/* RedYield — "Ledger" design system.
   Swiss Modernism: strict grid, 8px scale, hairline rules, one accent.
   Hand-written static CSS. No build step, no framework. */

/* Self-hosted: no request leaves this origin, and the fonts arrive in one
   round trip instead of four. Regenerate with scratchpad/selfhost-fonts.mjs
   if a weight is ever added — the families and weights here must match what
   --font-display / --font-body / --font-mono reference below. */
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/archivo-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/archivo-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/archivo-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/archivo-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jetbrains-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ---------- tokens ---------- */
:root {
  color-scheme: dark;   /* dark form controls regardless of OS setting */

  --bg: #0A0A0A;
  --surface: #151515;
  --surface-2: #1F1F1F;
  --fg: #FAFAFA;
  --muted: #A1A1A1;
  --line: #262626;

  /* Two reds, and the split is load-bearing. #D40202 on #0A0A0A is 3.59:1 —
     fine for large type and for fills carrying white text (5.52:1), but below
     the 4.5:1 needed for body copy. #EF4343 hits 5.23:1, so it takes every
     small label, link and numeral. Never swap them. */
  --accent: #D40202;        /* fills, large display, borders */
  --accent-text: #EF4343;   /* small text on the dark ground */
  --accent-ink: #FFFFFF;

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --u: 8px;
  --max: 1200px;
  --radius: 0;
}

/* Dark-only — no prefers-color-scheme override. The ground is a brand decision,
   not a viewer preference, so it must not flip on a light-mode OS. */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: calc(var(--u) * 3);
}

.section { padding-block: calc(var(--u) * 9); border-top: 1px solid var(--line); }
.section--flush { border-top: 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: calc(var(--u) * 3);
}
/* Grid and flex children default to min-width:auto, which stops long words and
   wide tables from ever letting the column shrink. */
.grid > * { min-width: 0; }

/* ---------- type ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* Scale contrast is the whole point of this system. The display sizes are
   deliberately far larger than the body text — without that jump the grid
   reads as flat rather than composed. */
/* The clamp floor has to fit the longest word at 375px, or the headline forces
   the whole layout wider than the viewport and every section clips. */
/* Leading has to clear descenders. At 0.94 the comma in "traffic," collided
   with the ascenders on the line below and the headline read as one solid
   block. Tracking eased off too — at -0.04em the letters packed together. */
/* Capped at 5.25rem, not 7.5rem. A three-line headline at 7.5rem ate an entire
   1440×800 viewport on its own, pushing the subhead and the CTA below the fold
   — the headline was the only thing anyone saw. */
h1 { font-size: clamp(2.25rem, 6.5vw, 5.25rem); line-height: 1.05; letter-spacing: -0.022em; }
h2 { font-size: clamp(1.625rem, 4.5vw, 3.5rem); line-height: 1.1; letter-spacing: -0.022em; }
h1, h2, h3 { overflow-wrap: break-word; }
h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }

p { max-width: 68ch; }

.lede { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }

/* The mono label is the signature of this system — it carries every
   section header, spec cell, and data point. */
.label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.label--accent { color: var(--accent-text); }

.rule { border: 0; border-top: 1px solid var(--line); }

.section-head {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 3);
  padding-bottom: calc(var(--u) * 3);
  margin-bottom: calc(var(--u) * 5);
  border-bottom: 2px solid var(--fg);
}
.section-head h2 { flex: 1; }

/* Oversized section numeral — the anchor that stops every band weighing the same.
   .num applies the same treatment to sections that don't use .section-head. */
.section-head .label, .num {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--accent-text);
  flex: none;
  font-variant-numeric: tabular-nums;
}
.num { display: block; margin-bottom: 12px; }

/* ---------- header ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 3);
  min-height: 64px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
}
.wordmark:hover { text-decoration: none; }
.wordmark svg { flex: none; }

.nav { display: flex; align-items: center; gap: calc(var(--u) * 4); }
.nav a {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  padding-block: calc(var(--u) * 1.5);
}
.nav a:hover, .nav a[aria-current='page'] { color: var(--fg); text-decoration: none; }
.nav a[aria-current='page'] { color: var(--accent-text); }

@media (max-width: 767px) {
  .nav { gap: calc(var(--u) * 2.5); }
  .nav .nav__hide-sm { display: none; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 calc(var(--u) * 3.5);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.btn:hover { background: transparent; color: var(--accent-text); text-decoration: none; }

.btn--ghost { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn--ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ---------- hero ---------- */
.hero { position: relative; padding-block: calc(var(--u) * 8) calc(var(--u) * 9); }

/* The 12-column grid, drawn. Swiss layouts usually hide their scaffolding —
   showing it here gives the white space texture and signals "measured" without
   adding a single image. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0 0 0 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to right,
    var(--line) 0 1px,
    transparent 1px calc(100% / 12)
  );
  opacity: .55;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
}
.hero > * { position: relative; }

.hero h1 { margin-bottom: calc(var(--u) * 4); }
.hero h1 .dot { color: var(--accent-text); }
.hero .lede { margin-bottom: calc(var(--u) * 5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2); align-items: center; }
.hero__note {
  margin-top: calc(var(--u) * 4);
  padding-top: calc(var(--u) * 2);
  border-top: 1px solid var(--line);
}

/* ---------- funnel diagram ---------- */
/* Bars are a repeating gradient, not markup — one rule renders any count of
   ticks and stays sharp at every width. */
.funnel { display: grid; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 6); }
/* Inside the hero's two-column split the funnel sits beside the copy, so it
   starts level with it rather than carrying its own stacked-layout offset. */
@media (min-width: 1024px) { .hero .grid .funnel { margin-top: 0; } }
.funnel__row { display: grid; gap: 10px; }
.funnel__meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--u); }
.funnel__bars {
  height: 34px;
  background-image: repeating-linear-gradient(
    to right, var(--fg) 0 5px, transparent 5px 13px
  );
  transform-origin: left center;
}
.funnel__row:nth-child(1) .funnel__bars { width: 100%; }
.funnel__row:nth-child(2) .funnel__bars { width: 68%; }
.funnel__row:nth-child(3) .funnel__bars { width: 37%; }
.funnel__row:nth-child(4) .funnel__bars {
  width: 13%;
  background-image: none;
  background-color: var(--accent);
}
.funnel__row:nth-child(4) .funnel__meta .label { color: var(--accent-text); }

@media (prefers-reduced-motion: no-preference) {
  .funnel__bars { animation: funnel-in 620ms cubic-bezier(.2,.7,.3,1) backwards; }
  .funnel__row:nth-child(1) .funnel__bars { animation-delay: 60ms; }
  .funnel__row:nth-child(2) .funnel__bars { animation-delay: 180ms; }
  .funnel__row:nth-child(3) .funnel__bars { animation-delay: 300ms; }
  .funnel__row:nth-child(4) .funnel__bars { animation-delay: 420ms; }
}
@keyframes funnel-in { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* ---------- full-bleed accent band ---------- */
/* Was a flat #D40202 field. At full-bleed size a fully saturated red is a
   surface the eye can't rest on — saturated colour belongs in accents, not
   acres. The reference site never does this either: its red is a dark
   photographic field falling off to near-black, with pure red kept for
   headline words. Same idea here, done with a gradient. */
.band--accent {
  background: linear-gradient(135deg, #4A0808 0%, #1C0606 58%, #0A0A0A 100%);
  color: var(--fg);
  border-top: 1px solid var(--accent);
}
.band--accent h2, .band--accent .stat { color: #FFFFFF; }
.band--accent .label { color: var(--accent-text); }
.band--accent p { color: rgba(255,255,255,.72); }
.band--accent .hit { color: var(--accent-text); }
.band--accent .rule-x { border: 0; border-top: 1px solid rgba(255,255,255,.28); margin-block: calc(var(--u) * 4); }
.band--accent .stat { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem,4.5vw,3.25rem); letter-spacing: -0.03em; line-height: 1.05; }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
/* Hairline, not a second heavy rule — at 2px solid it read as a duplicate of
   the section-head border sitting just above it. */
.step { padding: calc(var(--u) * 4) calc(var(--u) * 3) calc(var(--u) * 4) 0; border-top: 1px solid var(--line); }
.step + .step { padding-left: calc(var(--u) * 3); }
.step__n { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; color: var(--accent-text); }
.step h3 { margin: calc(var(--u) * 2) 0 calc(var(--u) * 1.5); }
.step p { color: var(--muted); font-size: 0.9375rem; }

/* ---------- format / feature tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tile {
  position: relative;
  background: var(--bg);
  padding: calc(var(--u) * 4);
  display: flex; flex-direction: column; gap: calc(var(--u) * 1.5);
  overflow: hidden;
}
/* A crimson bar wipes across the top edge on hover — the only motion in the
   grid, so the eye knows exactly what is interactive. */
.tile::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 240ms cubic-bezier(.2,.7,.3,1);
}
a.tile:hover::after, a.tile:focus-visible::after { transform: scaleX(1); }
.tile h3 { color: var(--fg); font-size: 1.25rem; }
.tile p { color: var(--muted); font-size: 0.9375rem; }
.tile__spec { margin-top: auto; padding-top: calc(var(--u) * 2); }
a.tile:hover { background: var(--surface); text-decoration: none; }

/* ---------- spec tables ---------- */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { text-align: left; padding: calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * 2) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  border-bottom-color: var(--fg);
  white-space: nowrap;
}
td.mono, .mono { font-family: var(--font-mono); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }

/* ---------- list ---------- */
.checklist { list-style: none; padding: 0; display: grid; gap: calc(var(--u) * 2); }
.checklist li { display: grid; grid-template-columns: 18px 1fr; gap: calc(var(--u) * 2); align-items: start; color: var(--muted); }
.checklist svg { margin-top: 5px; color: var(--accent-text); }
.checklist strong { color: var(--fg); font-weight: 500; }

/* ---------- prose (policy / privacy) ---------- */
/* Document sub-headings, not section headers — the global h2 scale is built for
   band titles and is far too loud inside running legal copy. */
.prose h2 {
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-top: calc(var(--u) * 6);
  margin-bottom: calc(var(--u) * 2);
  padding-bottom: var(--u);
  border-bottom: 1px solid var(--line);
}
.prose h3 { font-size: 1rem; margin-top: calc(var(--u) * 4); margin-bottom: var(--u); }
.prose p, .prose ul { margin-bottom: calc(var(--u) * 2); color: var(--muted); }
.prose ul { padding-left: calc(var(--u) * 2.5); }
.prose li { margin-bottom: var(--u); }
.prose strong { color: var(--fg); font-weight: 500; }
.prose > :first-child { margin-top: 0; }

/* ---------- form ---------- */
.form { display: grid; gap: calc(var(--u) * 3); }
.field { display: grid; gap: var(--u); }
.field label { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.field .req { color: var(--accent-text); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 180ms ease;
}
.field textarea { min-height: 120px; resize: vertical; padding-top: calc(var(--u) * 1.5); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline-offset: 1px; }
.field .hint { font-size: 0.8125rem; color: var(--muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 3); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status {
  padding: calc(var(--u) * 2) calc(var(--u) * 2.5);
  border-left: 2px solid var(--accent);
  background: var(--surface);
  font-size: 0.9375rem;
}
.form__status[hidden] { display: none; }

/* ---------- CTA band ---------- */
/* Was an inverted white band, which only worked on a light ground. On black it
   becomes an elevated surface instead, and the CTA switches to a solid red fill
   so the closing action is the loudest thing on the page. */
.cta-band { background: var(--surface-2); color: var(--fg); border-top: 1px solid var(--line); }
.cta-band h2 { color: var(--fg); margin-bottom: calc(var(--u) * 2); }
.cta-band p { color: var(--muted); margin-bottom: calc(var(--u) * 4); }
.cta-band .btn--ghost { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cta-band .btn--ghost:hover { background: transparent; color: var(--accent-text); border-color: var(--accent); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding-block: calc(var(--u) * 6); }
.foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: calc(var(--u) * 4); }
.foot__grid nav { display: grid; gap: var(--u); align-content: start; }
.foot__grid nav a { color: var(--muted); font-size: 0.875rem; }
.foot__grid nav a:hover { color: var(--fg); }
.foot__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(var(--u) * 2);
  margin-top: calc(var(--u) * 5); padding-top: calc(var(--u) * 3); border-top: 1px solid var(--line);
}
.badge-18 {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  border: 1px solid var(--accent); color: var(--accent-text);
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
}

/* ---------- spans ---------- */
.col-7 { grid-column: span 7; }
.col-5 { grid-column: span 5; }
.col-8 { grid-column: span 8; }
.col-6 { grid-column: span 6; }
.col-12 { grid-column: span 12; }

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
  .steps { grid-template-columns: 1fr; }
  .step, .step + .step { padding-left: 0; padding-block: calc(var(--u) * 3); }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  /* Collapse the grid itself, not just the spans. Keeping 12 tracks here meant
     11 gutters (264px) had to fit before any content did — the layout blew past
     the viewport and overflow-x:hidden silently clipped every section. */
  .grid { grid-template-columns: 1fr; }
  .col-7, .col-5, .col-8, .col-6, .col-12 { grid-column: 1 / -1; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  .wrap { padding-inline: calc(var(--u) * 2.5); }
  .section { padding-block: calc(var(--u) * 6); }
  .hero { padding-block: calc(var(--u) * 7) calc(var(--u) * 6); }
  /* Wordmark + three nav items cannot fit one 375px row. Stack them, and drop
     sticky so the taller header doesn't eat the viewport. */
  .masthead { position: static; }
  .masthead__inner { flex-direction: column; align-items: stretch; gap: 10px; padding-block: 14px; min-height: 0; }
  .nav { justify-content: space-between; gap: var(--u); }
  .nav a { padding-block: 4px; }
  /* 12 column lines at phone width is visual noise — halve them. */
  .hero::before { background-image: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px calc(100% / 6)); }
  .funnel { margin-top: calc(var(--u) * 5); }
  .funnel__bars { height: 26px; }
  .tiles { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; gap: var(--u); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}