/* ═══════════════════════════════════════════════════════════════════════════
   GRIDTALLY MARKETING SITE — layout on top of brand.css
   ═══════════════════════════════════════════════════════════════════════════
   brand.css is the source of truth for tokens + fb-* components and is copied
   verbatim from tsfgeo-portal/assets/brand.css. Never fork the tokens here;
   if a token needs to change, change it there and re-copy.

   This is a MARKETING surface, so it runs the signature at FULL volume
   (rule 3): square corners, 2px ink rules, hard offset shadows, and the
   ink/yellow fb-btn. Reading-length text sits on sheets, never on the grid
   (rule 1). No emoji anywhere — icons are ink SVG (rule 7).
   ═════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fb-body);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--fb-ink);
  background-color: var(--fb-paper);
  background-image:
    linear-gradient(var(--fb-grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--fb-grid-color) 1px, transparent 1px);
  background-size: var(--fb-grid-size) var(--fb-grid-size);
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 940px; margin: 0 auto; padding: 0 20px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--fb-ink); color: var(--fb-yellow);
  padding: 10px 16px; z-index: 100; text-decoration: none;
}
.skip:focus { left: 0; }

/* ── Header ──────────────────────────────────────────────────────────── */
.site-head {
  border-bottom: var(--fb-border);
  background: var(--fb-paper);
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fb-ink); }
.brand img { display: block; width: 34px; height: 34px; }
.brand b {
  font-family: var(--fb-display);
  font-size: 1.5rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; line-height: 1;
}
.site-nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.site-nav a {
  color: var(--fb-ink); text-decoration: none;
  font-family: var(--fb-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; font-size: .95rem;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a:focus-visible { border-bottom-color: var(--fb-ink); }
/* The nav CTA must re-assert fb-btn's yellow: `.site-nav a` (0,1,1) outranks
   `.fb-btn` (0,1,0), which painted ink text on the ink block — an invisible
   button. Caught in render, not in review. `.site-nav .fb-btn` is 0,2,0. */
.site-nav .fb-btn {
  color: var(--fb-yellow);
  padding: 9px 16px; font-size: .9rem; border-bottom: none;
}
.site-nav .fb-btn:hover { color: var(--fb-yellow); border-bottom-color: transparent; }

/* ── Hero (display type may sit on the grid — rule 1) ────────────────── */
.hero { padding: 64px 0 52px; }
.hero h1 {
  font-family: var(--fb-display);
  font-size: clamp(2.5rem, 7vw, 4.2rem);
  font-weight: 800; text-transform: uppercase;
  letter-spacing: .01em; line-height: .96;
  margin: 18px 0 0;
}
.hero .lede {
  max-width: 44rem; margin: 22px 0 0;
  font-size: 1.16rem; color: var(--fb-ink-soft);
}
.hero .cta-row { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.cta-note { font-size: .92rem; color: var(--fb-ink-faint); }

/* ── Sheets (all reading content lives here) ─────────────────────────── */
section { margin-bottom: 34px; }
.sheet-body { padding: 24px 28px; }
.sheet-body > :first-child { margin-top: 0; }
.sheet-body > :last-child { margin-bottom: 0; }

h2 {
  font-family: var(--fb-display);
  font-size: 1.5rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  margin: 0; line-height: 1.15;
}
h3 {
  font-family: var(--fb-display);
  font-size: 1.12rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  margin: 26px 0 8px;
}
p { margin: 0 0 14px; }
a { color: var(--fb-ink); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

ul { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 7px; }

/* ── Feature rows with ink SVG icons ─────────────────────────────────── */
.feature { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px; }
.feature:last-child { margin-bottom: 0; }
.feature .ico { flex: 0 0 auto; width: 28px; height: 28px; margin-top: 3px; }
.feature .ico svg { display: block; width: 28px; height: 28px; }
.feature h3 { margin: 0 0 4px; }
.feature p { margin: 0; color: var(--fb-ink-soft); }

/* ── Definition-style contact block ──────────────────────────────────── */
.nap { margin: 0; }
.nap div {
  display: flex; gap: 14px; padding: 9px 0;
  border-bottom: 1px solid var(--fb-line);
}
.nap div:last-child { border-bottom: none; }
.nap dt {
  flex: 0 0 8.5rem;
  font: 700 .76rem var(--fb-mono);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--fb-ink-faint); padding-top: 3px;
}
.nap dd { margin: 0; }

/* ── Callout: the one place a policy point must not be missed ────────── */
.callout {
  border: var(--fb-border);
  background: var(--fb-yellow-soft);
  padding: 16px 18px;
  margin: 18px 0;
}
.callout p:last-child { margin-bottom: 0; }

/* ── Legal pages ─────────────────────────────────────────────────────── */
.legal { padding: 40px 0 20px; }
/* Kept as a class, not a style="" attribute, so the CSP can refuse
   'unsafe-inline' outright — a vetting surface must never risk a blocked
   render. Same reason there is no JavaScript on this site at all. */
.legal-title {
  font-family: var(--fb-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800; text-transform: uppercase;
  letter-spacing: .02em; line-height: 1;
  margin: 16px 0 6px;
}
.sheet-top { margin-top: 22px; }
.legal .updated {
  font: 700 .76rem var(--fb-mono);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--fb-ink-faint);
}
.legal .sheet-body { padding: 30px 34px; }
.legal .sheet-body h2:not(:first-of-type) { margin-top: 34px; }
.legal .sheet-body h2 { margin-bottom: 10px; }
.toc { font-size: .96rem; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-foot {
  border-top: var(--fb-border);
  background: var(--fb-ink);
  color: #E8E7E3;
  padding: 30px 0;
  margin-top: 10px;
}
.site-foot a { color: var(--fb-yellow); text-decoration: underline; }
.site-foot .cols { display: flex; gap: 40px; flex-wrap: wrap; justify-content: space-between; }
.site-foot .entity { max-width: 30rem; font-size: .95rem; }
.site-foot .entity strong { color: #FFF; }
.site-foot nav { display: flex; flex-direction: column; gap: 7px; font-size: .95rem; }
.site-foot .fine {
  margin-top: 24px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: .85rem; color: #A9A7A2;
}

@media (max-width: 700px) {
  .hero { padding: 44px 0 36px; }
  .sheet-body, .legal .sheet-body { padding: 20px 18px; }
  .nap div { flex-direction: column; gap: 2px; }
  .nap dt { flex-basis: auto; }
  .site-head .wrap { justify-content: flex-start; }
}