/* ==========================================================================
   landing_full.css — Spoiler marketing landing v2
   Implementation of the boardroom-green landing handed off from
   claude.ai/design (project: spoiler-landing-page). Helvetica end-to-end
   with Instrument Serif used only as an italic accent on hero headlines.
   ========================================================================== */

/* Default tokens (dark mode). Light overrides follow.
   ADA contrast targets (WCAG 2.1 AA): >=4.5:1 for body text,
   >=3:1 for large text and non-text UI components.
   The --accent and --accent-text split: --accent is used for
   decorative fills (em block bgs, button bgs, rule lines, borders,
   chip dots) where the WCAG 1.4.11 non-text rule (3:1) applies.
   --accent-text is used for any actual rendered text/glyph and hits
   4.5:1 against --bg so eyebrows + italic display em pass body AA. */
:root, :root[data-theme="dark"] {
  --bg:#15251E;
  --surface:#1B2E26;
  --surface-2:#223A30;
  --surface-3:#2A4538;
  --text:#E8E2D2;
  --text-dim:#B5B0A0;
  --text-mute:#A09B8C;            /* was #7E7A6E (3.4:1); now ~5.5:1 on bg */
  --line:rgba(232,226,210,.10);
  --line-strong:rgba(232,226,210,.18);
  --accent:#9E4B3E;               /* brand brick — decorative fills only */
  --accent-hover:#B35848;
  --accent-soft:rgba(158,75,62,.12);
  --accent-text:#D17263;          /* brighter brick for text — ~4.8:1 on bg */
  --cool:#7BA88C;
  --cool-soft:rgba(123,168,140,.12);
  --ok:#7BA88C;
  --warn:#C4A35B;
  --bad:#C66B5E;
  --on-accent:#F2ECDA;
  --shadow-lg:0 12px 32px rgba(0,0,0,.4);
  --font-body:Helvetica,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --font-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  color-scheme:dark;
}

/* Light theme — boardroom-green palette inverted onto warm cream
   paper. Every text/bg pair below was checked against WCAG AA at
   the size/weight it's used.
     text  #1A2A22  on bg #F4F1E8  -> ~17:1 (AAA body)
     text-dim #475A50 on bg        -> ~9:1  (AAA body)
     text-mute #5C5849 on bg       -> ~7:1  (AAA body)
     accent #8A3C30 on bg          -> ~8:1  (AAA body)
     on-accent #F4EFE2 on accent   -> ~9:1  (AAA body)
     cool #4F7A64 on bg            -> ~5:1  (AA body, AAA large)
     bad / warn used only for chip
     accents -- decorative, non-text. */
:root[data-theme="light"] {
  --bg:#F4F1E8;
  --surface:#EAE5D6;
  --surface-2:#DDD7C5;
  --surface-3:#CDC6B0;
  --text:#1A2A22;
  --text-dim:#475A50;
  --text-mute:#5C5849;
  --line:#C5BFA8;
  --line-strong:#A8A089;
  --accent:#8A3C30;
  --accent-hover:#9E4B3E;
  --accent-soft:rgba(138,60,48,.10);
  --accent-text:#8A3C30;          /* same as --accent — already ~8:1 on cream */
  --cool:#4F7A64;
  --cool-soft:rgba(79,122,100,.12);
  --ok:#4F7A64;
  --warn:#9F8438;
  --bad:#B05546;
  --on-accent:#F4EFE2;
  --shadow-lg:0 8px 24px rgba(20,30,30,.10);
  color-scheme:light;
}

*, *::before, *::after { box-sizing: border-box; }
html.lf-doc { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 120px; }
body.lf-page {
  margin:0; padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
body.lf-page section[id] { scroll-margin-top: 120px; }

/* Header */
.hdr {
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 48px;
}
.brand { display:flex; align-items:center; gap:14px; }
.brand .bird {
  height:60px; width:auto;
  flex-shrink:0;
  display:block;
}
[data-theme="light"] .brand .bird {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
}
[data-theme="dark"] .brand .bird { filter: brightness(1.05); }
.wm {
  font-family: 'Exo 2', sans-serif;
  font-weight: 700;
  font-size: 3rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1;
  text-decoration: none;
  display: inline-block;
  transform: skewX(-12deg);
  padding: 0 4px;
  text-shadow: 2px 2px 0 #000, 3px 3px 0 var(--accent);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
[data-theme="light"] .wm {
  color: #004225;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.85), 3px 3px 0 #DC2626;
}
.brand .org {
  font-size: 0.7rem !important;
}
.brand .org {
  font-family: 'Exo 2', sans-serif;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--text-mute);
  text-transform: uppercase;
  border-left: 1px solid var(--line-strong);
  padding-left: 14px;
  margin-left: 6px;
  line-height: 48px;
  align-self: center;
}
.brand .org a { color: var(--text-dim); text-decoration: none; }
.brand .org a:hover { color: var(--text); }
.hdr nav { display:flex; gap:2px; align-items:center; }
.hdr nav a.navlink {
  font-size:13px; font-weight:500;
  color:var(--text-dim);
  text-decoration:none;
  padding:8px 12px;
  border-radius:6px;
  transition:color .15s, background .15s;
}
.hdr nav a.navlink:hover { color:var(--text); background:var(--surface-2); }
.hdr-divider {
  width:1px; height:18px;
  background:var(--line);
  margin:0 8px;
}
.hdr nav a.login {
  font-size:13px; font-weight:500;
  color:var(--text-dim);
  padding:8px 12px;
  text-decoration:none;
  transition:color .15s;
}
.hdr nav a.login:hover { color:var(--text); }
.btn-p {
  font-weight:500; font-size:13px;
  padding:9px 16px;
  border-radius:6px;
  border:1px solid var(--accent);
  background:var(--accent);
  color:var(--on-accent);
  cursor:pointer;
  text-decoration:none;
  transition:background .15s;
  display:inline-flex; align-items:center; gap:7px;
  font-family:inherit;
  white-space:nowrap;
}
.btn-p:hover { background:var(--accent-hover); border-color:var(--accent-hover); }

/* Sovereignty bar */
.sov {
  display:flex; align-items:center; justify-content:center;
  gap:10px; padding:9px 48px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  font-size:12px; color:var(--text-dim);
}
.sov svg { width:13px; height:13px; color:var(--cool); flex-shrink:0; }
.sov b { color:var(--text); font-weight:600; }
.sov .dot { width:3px; height:3px; border-radius:50%; background:var(--text-mute); }

/* Buttons */
.btn-lg {
  font-weight:500; font-size:15px;
  padding:14px 24px; border-radius:6px;
  border:1px solid var(--accent);
  background:var(--accent);
  color:var(--on-accent);
  cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:9px;
  transition:background .15s;
  font-family:inherit; white-space:nowrap;
}
.btn-lg:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.btn-g {
  font-weight:500; font-size:15px;
  padding:14px 22px; border-radius:6px;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--text);
  cursor:pointer; text-decoration:none;
  transition:border-color .15s, background .15s;
  font-family:inherit; white-space:nowrap;
}
.btn-g:hover { border-color:var(--text-dim); background:var(--surface-2); }

/* =========================================================
   SCROLL-REVEAL HERO — TURN THIS / INTO THIS
   ========================================================= */
.scroll-hero { position:relative; height:280vh; }
.sh-track { position:sticky; top:0; height:100vh; overflow:hidden; isolation:isolate; }
.sh-screen { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:0 48px; }

/* Screen 1 — TURN THIS */
.sh-turn { background:var(--bg); z-index:1; }
.verb-field {
  position:absolute; inset:0;
  overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 36%, rgba(0,0,0,.16) 50%, rgba(0,0,0,.16) 60%, rgba(0,0,0,1) 74%, rgba(0,0,0,1) 100%);
          mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 36%, rgba(0,0,0,.16) 50%, rgba(0,0,0,.16) 60%, rgba(0,0,0,1) 74%, rgba(0,0,0,1) 100%);
}
.verb-col {
  position:absolute; top:-10%;
  width:22%;
  display:flex; flex-direction:column; gap:14px;
  will-change:transform;
  animation:vdrift linear infinite;
}
.verb-col-1 { left:-2%;  animation-duration:48s; animation-delay:-3s; }
.verb-col-2 { left:20%;  animation-duration:56s; animation-delay:-18s; }
.verb-col-3 { left:42%;  animation-duration:44s; animation-delay:-8s; }
.verb-col-4 { left:64%;  animation-duration:60s; animation-delay:-30s; }
.verb-col-5 { left:86%;  animation-duration:52s; animation-delay:-14s; }
.vb {
  display:block;
  font-family:var(--font-mono);
  font-size:12.5px; line-height:1.55;
  color:var(--text-mute);
  letter-spacing:.01em;
  padding:7px 10px;
  border-left:1px solid var(--line);
  white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  opacity:.55;
}
.verb-col-1 .vb:nth-child(3n) { color:var(--text-dim); opacity:.7; }
.verb-col-3 .vb:nth-child(4n) { color:var(--accent); opacity:.5; border-left-color:color-mix(in srgb, var(--accent) 40%, transparent); }
.verb-col-5 .vb:nth-child(5n) { color:var(--cool); opacity:.6; }
@keyframes vdrift {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, -50%, 0); }
}

.sh-turn .sh-content { position:relative; z-index:2; text-align:center; max-width:1000px; }
.sh-eye {
  font-family:var(--font-mono);
  font-size:11px; font-weight:700;
  text-transform:uppercase;
  letter-spacing:.28em;
  color:var(--accent-text);
  margin:0 0 28px;
}
.sh-h {
  font-family:var(--font-body);
  font-weight:700;
  font-size:clamp(4rem, 11vw, 10rem);
  line-height:.92;
  letter-spacing:-.035em;
  margin:0 0 24px;
  color:var(--text);
}
.sh-h em {
  font-style:normal;
  font-weight:700;
  background:var(--accent);
  color:var(--on-accent);
  padding:0 .12em;
  font-family:inherit;
  letter-spacing:inherit;
}
.sh-sub { font-size:1.15rem; line-height:1.55; color:var(--text-dim); max-width:60ch; margin:0 auto 44px; }
.sh-sub b { color:var(--text); font-weight:600; }

.sh-stats {
  display:inline-flex; gap:0;
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);
  padding:18px 0;
}
.sh-stats > div {
  padding:0 32px;
  border-left:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center;
  gap:6px; min-width:140px;
}
.sh-stats > div:first-child { border-left:none; }
.sh-stats b { font-weight:700; font-size:22px; color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:-.005em; }
.sh-stats span {
  font-family:var(--font-mono);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--text-mute);
}

.sh-scroll-hint {
  position:absolute; bottom:32px; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center;
  gap:8px;
  color:var(--text-mute);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  animation:hintbob 2.6s ease-in-out infinite;
  z-index:3;
  pointer-events:none;
}
.sh-scroll-hint svg { width:14px; height:14px; }
@keyframes hintbob {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity:.55; }
  50%      { transform: translateX(-50%) translateY(5px); opacity:.95; }
}

/* Screen 2 — INTO THIS (clipped from top-right→bottom-left) */
.sh-into {
  background:var(--surface);
  z-index:2;
  --reveal:0;
  clip-path: polygon(
    calc(220% - (var(--reveal) * 280%)) 0%,
    220% 0%,
    220% 100%,
    calc(120% - (var(--reveal) * 280%)) 100%
  );
}
.sh-into .sh-content {
  position:relative; z-index:2;
  max-width:1180px; width:100%;
  display:grid; grid-template-columns:1fr 1.25fr;
  gap:56px; align-items:center;
}
.sh-into .sh-eye { color:var(--cool); text-align:left; margin-bottom:18px; }
.sh-into .sh-h { text-align:left; font-size:clamp(3rem, 7.5vw, 5.5rem); margin-bottom:18px; }
.sh-into .sh-h em { background:var(--cool); color:var(--bg); }
.sh-into .sh-sub { text-align:left; margin:0 0 28px; font-size:1rem; max-width:42ch; }
.sh-cta { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:4px; }

/* Output card — "Into this" deliverable preview */
.sh-out {
  position:relative;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:0;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  display:flex; flex-direction:column;
}

/* File header strip */
.out-head {
  display:flex; align-items:center; gap:12px;
  padding:11px 18px;
  border-bottom:1px solid var(--line);
  background:var(--bg);
}
.out-dots { display:flex; gap:5px; }
.out-dots i { width:9px; height:9px; border-radius:50%; background:var(--line-strong); display:block; }
.out-fname {
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--text);
  letter-spacing:.04em;
  flex:1;
}
.out-fname b { color:var(--cool); font-weight:600; }
.out-stamp {
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--cool);
  letter-spacing:.16em;
  text-transform:uppercase;
  display:inline-flex; align-items:center; gap:6px;
}
.out-stamp::before {
  content:''; width:6px; height:6px;
  border-radius:50%;
  background:var(--cool);
  box-shadow:0 0 0 0 var(--cool);
  animation:lf-pulse 1.6s ease-out infinite;
}
@keyframes lf-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(123,168,140,.5); }
  100% { box-shadow: 0 0 0 8px rgba(123,168,140,0); }
}

/* Tagged-rows table */
.out-rows { padding:14px 18px 12px; border-bottom:1px solid var(--line); }
.out-rows-head {
  display:grid; grid-template-columns:18px 1fr 240px 60px;
  gap:14px; padding:0 6px 8px;
  font-family:var(--font-mono);
  font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-mute);
  border-bottom:1px dashed var(--line-strong);
}
.out-rows-body { display:flex; flex-direction:column; }
.out-row {
  display:grid; grid-template-columns:32px 1fr 240px 60px;
  gap:14px; padding:9px 6px;
  align-items:center;
  border-bottom:1px solid var(--line);
  font-size:12.5px; color:var(--text);
  position:relative;
  opacity:0; transform:translateX(8px);
  transition:opacity .42s ease, transform .42s ease;
}
.out-row:last-child { border-bottom:none; }
.sh-into.is-revealed .out-row { opacity:1; transform:none; }
.sh-into.is-revealed .out-row:nth-child(1) { transition-delay:80ms; }
.sh-into.is-revealed .out-row:nth-child(2) { transition-delay:200ms; }
.sh-into.is-revealed .out-row:nth-child(3) { transition-delay:320ms; }
.sh-into.is-revealed .out-row:nth-child(4) { transition-delay:440ms; }
.sh-into.is-revealed .out-row:nth-child(5) { transition-delay:560ms; }
.sh-into.is-revealed .out-row:nth-child(6) { transition-delay:680ms; }
.out-row .row-id { font-family:var(--font-mono); font-size:10px; color:var(--text-mute); letter-spacing:.04em; text-align:right; }
.out-row .row-vb { color:var(--text-dim); font-style:italic; line-height:1.4; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.out-row .row-vb::before { content:'"'; color:var(--text-mute); }
.out-row .row-vb::after  { content:'"'; color:var(--text-mute); }
.row-chips { display:flex; flex-wrap:wrap; gap:4px; align-items:center; min-width:0; }
.row-chip {
  display:inline-flex; align-items:center; gap:5px;
  font-size:10.5px; font-weight:600;
  padding:2px 7px 2px 6px;
  border-radius:3px;
  background:var(--clr-soft, var(--surface-3));
  color:var(--clr, var(--text));
  border:1px solid var(--clr-line, var(--line-strong));
  font-family:inherit;
  letter-spacing:0;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.row-chip::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--clr, var(--text)); flex-shrink:0; }
.row-chip[data-key="taste"] { --clr:#C4A35B; --clr-soft:rgba(196,163,91,.14); --clr-line:rgba(196,163,91,.45); }
.row-chip[data-key="avail"] { --clr:#7BA88C; --clr-soft:rgba(123,168,140,.14); --clr-line:rgba(123,168,140,.45); }
.row-chip[data-key="price"] { --clr:#9E4B3E; --clr-soft:rgba(158,75,62,.16); --clr-line:rgba(158,75,62,.45); }
.row-chip[data-key="pack"]  { --clr:#C66B5E; --clr-soft:rgba(198,107,94,.14); --clr-line:rgba(198,107,94,.45); }
.row-chip[data-key="sugar"] { --clr:#B5B0A0; --clr-soft:rgba(181,176,160,.14); --clr-line:rgba(181,176,160,.45); }
.row-chip[data-key="deliv"] { --clr:#7E7A6E; --clr-soft:rgba(126,122,110,.16); --clr-line:rgba(126,122,110,.45); }
.row-sent { font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-align:center; font-variant-numeric:tabular-nums; }
.row-sent.s-pos { color:#7BA88C; }
.row-sent.s-neg { color:#C66B5E; }
.row-sent.s-neu { color:var(--text-mute); }

/* Theme distribution — segmented bar + legend */
.out-dist { padding:14px 18px 16px; border-bottom:1px solid var(--line); }
.out-dist-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; gap:12px; }
.out-dist-title { font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-mute); flex:1; min-width:0; }
.out-dist-n { font-family:var(--font-mono); font-size:10px; color:var(--text); letter-spacing:.06em; }
.out-tabs { display:flex; background:var(--surface); border:1px solid var(--line); border-radius:5px; padding:2px; gap:0; }
.out-tab {
  font-family:var(--font-mono);
  font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase;
  padding:4px 9px;
  border-radius:3px;
  color:var(--text-mute);
  cursor:pointer;
  background:transparent;
  border:none;
  transition:background .15s, color .15s;
  line-height:1.4;
}
.out-tab:hover { color:var(--text); }
.out-tab.is-on { background:var(--bg); color:var(--text); box-shadow:inset 0 0 0 1px var(--line-strong); }

.out-viz { position:relative; }
.out-viz-pane { display:none; }
.out-viz-pane.is-on { display:block; }

/* Stacked bar */
.out-stacked { display:flex; height:14px; border-radius:3px; overflow:hidden; background:var(--surface); border:1px solid var(--line); }
.out-seg { height:100%; background:var(--clr); width:0; transition:width 1100ms cubic-bezier(.2,.9,.2,1); position:relative; }
.sh-into.is-revealed .out-seg { width:var(--w); }
.sh-into.is-revealed .out-seg:nth-child(1) { transition-delay:200ms; }
.sh-into.is-revealed .out-seg:nth-child(2) { transition-delay:280ms; }
.sh-into.is-revealed .out-seg:nth-child(3) { transition-delay:360ms; }
.sh-into.is-revealed .out-seg:nth-child(4) { transition-delay:440ms; }
.sh-into.is-revealed .out-seg:nth-child(5) { transition-delay:520ms; }
.sh-into.is-revealed .out-seg:nth-child(6) { transition-delay:600ms; }
.out-seg:hover { filter:brightness(1.1); }
.out-legend { display:grid; grid-template-columns:repeat(3,1fr); gap:6px 14px; margin-top:14px; }
.out-leg { display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--text-dim); cursor:pointer; padding:2px 0; }
.out-leg b { color:var(--text); font-weight:600; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.out-leg i { width:9px; height:9px; border-radius:2px; background:var(--clr); flex-shrink:0; display:block; }
.out-leg span { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.out-leg.is-on { color:var(--text); }

/* Donut chart */
.out-donut-wrap { display:grid; grid-template-columns:170px 1fr; gap:22px; align-items:center; padding:6px 4px; }
/* Legend inside the donut wrap is narrower than the standalone stack legend,
   so drop to 2 columns so percent values don't get clipped. */
.out-donut-wrap .out-legend { grid-template-columns:repeat(2,1fr); margin-top:0; }
.out-donut { position:relative; width:160px; height:160px; }
.out-donut svg { width:100%; height:100%; transform:rotate(-90deg); }
.donut-seg { fill:none; stroke-width:22; transition:opacity .2s, stroke-width .2s; cursor:pointer; }
.donut-seg.is-dim { opacity:.28; }
.donut-seg.is-hi { stroke-width:26; }
.donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; pointer-events:none; }
.donut-n { font-size:24px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1; }
.donut-k { font-family:var(--font-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-mute); margin-top:4px; }

/* Bars */
.out-bars { display:flex; flex-direction:column; gap:7px; padding:2px 0; }
.out-bar { display:grid; grid-template-columns:120px 1fr 56px; gap:12px; align-items:center; cursor:pointer; padding:3px 4px; border-radius:3px; transition:background .15s; }
.out-bar:hover, .out-bar.is-on { background:var(--surface-3); }
.out-bar-lab { font-size:11.5px; color:var(--text); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.out-bar-track { height:7px; background:var(--surface); border-radius:2px; overflow:hidden; border:1px solid var(--line); }
.out-bar-fill { height:100%; width:0; background:var(--clr); border-radius:2px; transition:width 800ms cubic-bezier(.2,.9,.2,1); }
.out-viz-pane.is-on .out-bar-fill { width:var(--w); }
.out-viz-pane.is-on .out-bar:nth-child(1) .out-bar-fill { transition-delay:0ms; }
.out-viz-pane.is-on .out-bar:nth-child(2) .out-bar-fill { transition-delay:60ms; }
.out-viz-pane.is-on .out-bar:nth-child(3) .out-bar-fill { transition-delay:120ms; }
.out-viz-pane.is-on .out-bar:nth-child(4) .out-bar-fill { transition-delay:180ms; }
.out-viz-pane.is-on .out-bar:nth-child(5) .out-bar-fill { transition-delay:240ms; }
.out-viz-pane.is-on .out-bar:nth-child(6) .out-bar-fill { transition-delay:300ms; }
.out-bar-pct { font-family:var(--font-mono); font-size:11px; color:var(--text); text-align:right; font-variant-numeric:tabular-nums; letter-spacing:.02em; }

/* Codes view — denser layout for ~16 code-level bars */
.out-bars--codes { gap:4px; max-height:400px; overflow-y:auto; padding-right:6px; }
.out-bars--codes .out-bar { grid-template-columns:140px 1fr 48px; gap:10px; padding:2px 4px; }
.out-bars--codes .out-bar-lab { font-size:11px; font-weight:500; }
.out-bars--codes .out-bar-track { height:6px; }
.out-bars--codes .out-bar-pct { font-size:10.5px; }
/* Custom scrollbar so it doesn't feel like the OS chrome */
.out-bars--codes::-webkit-scrollbar { width:6px; }
.out-bars--codes::-webkit-scrollbar-track { background:transparent; }
.out-bars--codes::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:3px; }
.out-bars--codes::-webkit-scrollbar-thumb:hover { background:var(--text-mute); }

/* Footer summary tiles */
.out-foot { display:grid; grid-template-columns:repeat(4,1fr); background:var(--bg); }
.out-tile { padding:14px 16px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:2px; }
.out-tile:last-child { border-right:none; }
.out-tile-k { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-mute); }
.out-tile-v { font-size:18px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.out-tile-v em { font-style:normal; font-size:11px; color:var(--text-mute); font-weight:500; margin-left:3px; letter-spacing:0; }
.out-tile.is-time .out-tile-v { color:var(--cool); }

/* =========================================================
   SECTION SCAFFOLD
   ========================================================= */
.lf-section { padding:96px 48px; }
.lf-section.surface { background:var(--surface); }
.section-head { max-width:920px; margin:0 auto 56px; }
.section-head.center { text-align:center; }
.sec-eye {
  font-family:var(--font-mono);
  font-size:11px; font-weight:700;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--accent-text);
  margin:0 0 18px;
  display:inline-flex; align-items:center; gap:10px;
}
.sec-eye::before { content:''; width:24px; height:1px; background:var(--accent); }
.section-head.center .sec-eye { display:inline-flex; }
.sec-h { font-weight:700; font-size:clamp(2rem, 4.4vw, 3.2rem); line-height:1.05; letter-spacing:-.02em; margin:0 0 18px; color:var(--text); text-wrap:balance; }
.sec-h em { font-style:italic; color:var(--accent-text); font-family:inherit; font-weight:700; }
.sec-sub { font-size:1.05rem; line-height:1.65; color:var(--text-dim); max-width:62ch; margin:0; }
.section-head.center .sec-sub { margin:0 auto; }
.sec-sub b { color:var(--text); font-weight:600; }

/* =========================================================
   POSITIONING
   ========================================================= */
.position { padding:80px 48px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg); }
.position-inner { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1.4fr; gap:64px; align-items:center; }
.position .label { font-family:var(--font-mono); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.22em; color:var(--cool); margin:0 0 16px; }
.position h2 { font-weight:700; font-size:clamp(1.8rem, 3.4vw, 2.4rem); line-height:1.18; letter-spacing:-.015em; margin:0 0 10px; color:var(--text); }
.position h2 em { font-style:italic; color:var(--accent-text); font-family:inherit; font-weight:700; }
.position p { font-size:1rem; line-height:1.7; color:var(--text-dim); margin:0 0 14px; }
.position p b { color:var(--text); font-weight:600; }
.position .ko { color:var(--accent-text); font-weight:600; }

/* =========================================================
   THREE PILLARS — manifesto + sub-sections
   ========================================================= */
.manifesto { padding:140px 48px 120px; text-align:center; background:var(--bg); position:relative; }
.manifesto .sec-eye { display:inline-flex; justify-content:center; margin-bottom:36px; }
.manifesto .mani-rule { width:48px; height:1px; background:var(--accent); margin:0 auto 28px; }
.manifesto .mani-rule:last-child { margin:36px auto 0; }
.mani-h {
  font-weight:700;
  font-size:clamp(2.6rem, 7vw, 5.6rem);
  line-height:1.02;
  letter-spacing:-.025em;
  margin:0 0 32px;
  color:var(--text);
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.mani-word { display:inline-flex; align-items:baseline; gap:18px; }
.mani-num { font-family:var(--font-mono); font-size:.22em; font-weight:700; letter-spacing:.12em; color:var(--text-mute); align-self:flex-start; margin-top:.3em; }
.mani-h em { font-style:italic; color:var(--accent-text); font-family:inherit; font-weight:700; }
.mani-sub { max-width:58ch; margin:0 auto; font-size:1.1rem; line-height:1.6; color:var(--text-dim); }

/* Sub sections */
.sub { padding:120px 48px; border-top:1px solid var(--line); background:var(--bg); }
.sub.sub-speed { background:var(--surface); }
.sub-inner { max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1fr 1.15fr; gap:80px; align-items:center; }
.sub-flip .sub-inner { grid-template-columns:1.15fr 1fr; }
.sub-flip .sub-copy { order:2; }
.sub-flip .sub-vis { order:1; }
.sub-eye { font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-text); margin:0 0 22px; display:inline-flex; align-items:center; gap:14px; }
.sub-num { font-family:var(--font-mono); font-size:11px; color:var(--text-mute); letter-spacing:.18em; border:1px solid var(--line-strong); padding:3px 8px; border-radius:3px; }
.sub-h { font-weight:700; font-size:clamp(2rem, 4.4vw, 3.2rem); line-height:1.05; letter-spacing:-.02em; margin:0 0 22px; color:var(--text); text-wrap:balance; }
.sub-h em { font-style:italic; color:var(--accent-text); font-family:inherit; font-weight:700; }
.sub-lede { font-size:1.1rem; line-height:1.6; color:var(--text-dim); margin:0 0 28px; max-width:48ch; }
.sub-lede b { color:var(--text); font-weight:600; }
.sub-list { list-style:none; padding:0; margin:0 0 32px; display:flex; flex-direction:column; gap:14px; }
.sub-list li { font-size:1rem; line-height:1.55; color:var(--text-dim); position:relative; padding-left:22px; }
.sub-list li::before { content:''; position:absolute; left:0; top:11px; width:12px; height:1px; background:var(--accent); }
.sub-list li b { color:var(--text); font-weight:600; }
.sub-tag { font-family:var(--font-mono); font-size:11.5px; color:var(--text); letter-spacing:.04em; line-height:1.5; padding:14px 18px; border-left:2px solid var(--accent); background:var(--accent-soft); border-radius:0 4px 4px 0; }

/* Security diagram */
.sec-diag { padding:32px; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; display:flex; flex-direction:column; gap:18px; }
.sec-row { display:flex; align-items:center; gap:14px; }
.sec-row-out { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.sec-node { flex:1; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:14px 16px; display:flex; flex-direction:column; gap:4px; position:relative; }
.sec-node .sec-lab { font-size:13px; font-weight:600; color:var(--text); }
.sec-node .sec-meta { font-family:var(--font-mono); font-size:10px; color:var(--text-mute); letter-spacing:.08em; text-transform:uppercase; }
.sec-node.sec-private { border-color:var(--cool); background:var(--cool-soft); }
.sec-node.sec-private .sec-lab { color:var(--cool); }
.sec-node.sec-private .sec-meta { color:var(--cool); opacity:.8; }
.sec-shield { position:absolute; top:10px; right:12px; color:var(--cool); font-size:10px; }
.sec-node.sec-blocked { opacity:.45; }
.sec-node.sec-blocked .sec-lab { text-decoration:line-through; text-decoration-color:var(--bad); }
.sec-arr { width:80px; height:12px; color:var(--cool); flex-shrink:0; }
.sec-bar { display:flex; align-items:center; gap:14px; font-family:var(--font-mono); font-size:10px; color:var(--cool); letter-spacing:.16em; text-transform:uppercase; padding-top:6px; }
.sec-bar-line { flex:1; height:1px; background:linear-gradient(90deg, var(--cool) 0%, var(--cool) 50%, transparent 50%, transparent 100%); background-size:8px 1px; }
.sec-foot { font-family:var(--font-mono); font-size:10.5px; color:var(--text-mute); letter-spacing:.1em; text-transform:uppercase; text-align:center; padding-top:6px; border-top:1px dashed var(--line-strong); }

/* Speed diagram */
.spd-diag { padding:28px; background:var(--bg); border:1px solid var(--line); border-radius:14px; display:flex; flex-direction:column; gap:22px; }
.spd-head { display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.spd-head-l { color:var(--cool); font-weight:700; }
.spd-head-r { color:var(--text-mute); }
.spd-lanes { display:flex; flex-direction:column; gap:8px; }
.spd-lane { display:grid; grid-template-columns:54px 1fr 110px; gap:14px; align-items:center; }
.spd-lab { font-family:var(--font-mono); font-size:11px; color:var(--text-dim); letter-spacing:.1em; }
.spd-bar { height:14px; background:var(--surface-2); border-radius:3px; overflow:hidden; border:1px solid var(--line); }
.spd-fill { height:100%; background:var(--cool); border-radius:2px; animation:spdfill 2.4s ease-out infinite; }
.spd-fill.f1 { animation-delay:0ms; }
.spd-fill.f2 { animation-delay:120ms; }
.spd-fill.f3 { animation-delay:240ms; }
.spd-fill.f4 { animation-delay:360ms; }
.spd-t { font-family:var(--font-mono); font-size:11px; color:var(--cool); letter-spacing:.04em; text-align:right; font-variant-numeric:tabular-nums; }
@keyframes spdfill {
  0%   { width:0; }
  60%  { width:100%; }
  80%  { width:100%; }
  100% { width:0; }
}

.spd-compare { display:flex; flex-direction:column; gap:10px; padding-top:18px; border-top:1px dashed var(--line-strong); }
.spd-cmp { display:grid; grid-template-columns:120px 1fr 80px; gap:14px; align-items:center; }
.spd-cmp-lab { font-size:12.5px; color:var(--text-dim); }
.spd-cmp-us .spd-cmp-lab { color:var(--text); font-weight:700; }
.spd-cmp-bar { height:6px; background:var(--surface-2); border-radius:2px; overflow:hidden; }
.spd-cmp-fill { height:100%; background:var(--bad); border-radius:2px; }
.spd-cmp-val { font-family:var(--font-mono); font-size:11px; color:var(--text-mute); text-align:right; letter-spacing:.04em; }
.spd-cmp-us .spd-cmp-val { color:var(--cool); font-weight:700; }

/* Precision diagram */
.prc-diag { padding:28px; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; display:flex; flex-direction:column; gap:14px; }
.prc-input, .prc-output {
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
  padding:10px 14px;
  border:1px dashed var(--line-strong);
  border-radius:6px;
  color:var(--text-dim);
}
.prc-output { color:var(--accent-text); border-color:var(--accent); background:var(--accent-soft); font-weight:700; }
.prc-stages { display:flex; flex-direction:column; gap:8px; position:relative; }
.prc-stages::before {
  content:''; position:absolute;
  left:24px; top:8px; bottom:8px;
  width:1px;
  background:linear-gradient(to bottom, var(--accent) 0%, var(--accent) 100%);
  opacity:.4;
}
.prc-stage {
  display:grid;
  grid-template-columns:48px 1fr;
  grid-template-rows:auto auto;
  column-gap:14px; row-gap:2px;
  padding:12px 14px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:8px;
  position:relative;
}
.prc-num {
  grid-row:1 / span 2;
  font-family:var(--font-mono);
  font-size:12px; font-weight:700;
  color:var(--accent-text);
  letter-spacing:.06em;
  align-self:center;
  background:var(--accent-soft);
  border:1px solid var(--accent);
  padding:6px 0;
  border-radius:4px;
  text-align:center;
  z-index:1;
}
.prc-name { grid-column:2; font-size:14px; font-weight:700; color:var(--text); margin:0; }
.prc-desc { grid-column:2; font-size:12.5px; color:var(--text-dim); line-height:1.5; }

/* =========================================================
   OBJECTION HANDLERS
   ========================================================= */
.obj-grid { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.obj { padding:26px 28px; background:var(--surface); border:1px solid var(--line); border-radius:10px; }
.obj .q { font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; color:var(--accent-text); text-transform:uppercase; margin:0 0 8px; font-weight:700; }
.obj h3 { font-weight:600; font-size:1.05rem; line-height:1.45; color:var(--text); margin:0 0 10px; letter-spacing:-.005em; }
.obj h3::before { content:'"'; color:var(--text-mute); margin-right:2px; }
.obj h3::after  { content:'"'; color:var(--text-mute); }
.obj p { font-size:.94rem; line-height:1.6; color:var(--text-dim); margin:0; }
.obj p b { color:var(--text); font-weight:600; }

/* =========================================================
   QUOTE
   ========================================================= */
.lf-quote { max-width:1100px; margin:0 auto; padding:80px 48px; text-align:center; }
.lf-quote blockquote { font-weight:700; font-size:clamp(1.5rem, 3vw, 2.15rem); line-height:1.3; letter-spacing:-.015em; color:var(--text); margin:0 0 20px; text-wrap:balance; }
.lf-quote blockquote::before { content:'"'; color:var(--accent-text); margin-right:4px; }
.lf-quote blockquote::after  { content:'"'; color:var(--accent-text); }
.lf-quote cite { font-style:normal; font-size:13px; color:var(--text-mute); letter-spacing:.02em; }
.lf-quote cite b { color:var(--text); font-weight:600; }

/* =========================================================
   FINAL CTA
   ========================================================= */
.final { padding:120px 48px; text-align:center; background:var(--surface); border-top:1px solid var(--line); position:relative; overflow:hidden; }
.final h2 { font-weight:700; font-size:clamp(2.5rem, 5.6vw, 4rem); line-height:1.02; letter-spacing:-.025em; margin:0 0 18px; color:var(--text); text-wrap:balance; }
.final h2 em { font-style:italic; color:var(--accent-text); font-family:inherit; font-weight:700; }
.final p { font-size:1.1rem; color:var(--text-dim); max-width:60ch; margin:0 auto 32px; line-height:1.55; }
.final .cta-row { display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap; }
.final .micro { margin-top:24px; font-family:var(--font-mono); font-size:11px; color:var(--text-mute); letter-spacing:.12em; text-transform:uppercase; }

/* Footer */
.lf-footer { padding:32px 48px; background:var(--bg); border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.lf-footer small { font-family:var(--font-mono); font-size:11px; color:var(--text-mute); }
.lf-footer nav { display:flex; gap:22px; }
.lf-footer nav a { font-size:12px; color:var(--text-dim); text-decoration:none; transition:color .15s; }
.lf-footer nav a:hover { color:var(--text); }

/* =========================================================
   LIGHT-MODE OVERRIDES — places where the token-flip alone
   doesn't reach AA contrast on a cream surface.
   ========================================================= */
[data-theme="light"] .vb { color: var(--text-mute); opacity: .72; }
[data-theme="light"] .verb-col-1 .vb:nth-child(3n) { color: var(--text-dim); opacity: .85; }

/* Sample-row chips: theme-color dot + theme-color border, but the
   text itself drops back to --text so the chip label stays readable
   on a light tinted background. The dot carries the theme encoding. */
[data-theme="light"] .row-chip { color: var(--text); }

/* Sentiment scores: the dark-mode greens/reds wash out on cream.
   Use darker, AA-compliant variants. */
[data-theme="light"] .row-sent.s-pos { color:#2F6149; }    /* ~6:1 on cream */
[data-theme="light"] .row-sent.s-neg { color:#9C3F32; }    /* ~7:1 */
[data-theme="light"] .row-sent.s-neu { color: var(--text-mute); }

/* Bar labels (Codes/Themes tabs): keep --text. Track bg picks up
   --surface auto. Fills stay theme-color (decorative). */

/* Speed compare bar -- the "reading by hand" red fill needs more
   weight on cream. */
[data-theme="light"] .spd-cmp-fill { background:#B05546; }

/* Drop-shadow on the deliverable card: the dark-mode rgba(0,0,0,.4)
   shadow looks like a smudge on cream. The token already swapped
   --shadow-lg, but a couple of inline filters need explicit fixes. */
[data-theme="light"] .bubble-core { /* unused on landing -- inherited safety */ }
[data-theme="light"] .out-stamp::before {
  /* Sage live-pulse needs more weight on cream */
  box-shadow: 0 0 0 0 var(--cool);
}

/* Hero block-italic em swatches: brick on cream + cream on brick
   are both AA. Cool em block uses cool bg + bg color (cream-on-sage)
   which is ~5:1 -- fine for a 5.5rem display headline (large-text
   threshold is 3:1). */

/* =========================================================
   ACCESSIBILITY -- focus rings, reduced motion
   ========================================================= */
.lf-page :is(a, button, [role="button"], input, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
.lf-page .btn-p:focus-visible,
.lf-page .btn-lg:focus-visible,
.lf-page .btn-g:focus-visible,
.lf-page .out-tab:focus-visible {
  outline-offset: 4px;
}
/* Theme toggle button -- meaningful contrast in either mode */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text-dim);
  width: 36px; height: 36px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
  padding: 0;
  margin-left: 6px;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: var(--surface-2);
  border-color: var(--text-mute);
  color: var(--text);
}
.theme-toggle svg { width: 16px; height: 16px; display: block; }
.theme-toggle .tt-sun { display: none; }
[data-theme="light"] .theme-toggle .tt-sun { display: block; }
[data-theme="light"] .theme-toggle .tt-moon { display: none; }

@media (prefers-reduced-motion: reduce) {
  .verb-col { animation: none !important; }
  .spd-fill { animation: none !important; width: 100% !important; }
  .out-stamp::before { animation: none !important; }
  .sh-scroll-hint { animation: none !important; }
  .out-seg, .out-bar-fill, .out-row { transition: none !important; }
  .sh-into { transition: none !important; }
  html.lf-doc { scroll-behavior: auto; }
}

/* =========================================================
   RESPONSIVE — desktop above 980px is unchanged.
   Three breakpoints: tablet (980), mobile primary (768), phone (480).
   ========================================================= */

/* ───── Tablet (≤980px) ───── */
@media (max-width:980px) {
  .sub-inner, .sub-flip .sub-inner { grid-template-columns:1fr; gap:48px; }
  .sub-flip .sub-copy { order:1; }
  .sub-flip .sub-vis { order:2; }
  .mani-h { font-size:clamp(2.2rem, 9vw, 3.6rem); }
  .mani-word { gap:10px; }
  .sub { padding:80px 32px; }
  .manifesto { padding:96px 32px 80px; }
  .position-inner { grid-template-columns:1fr; gap:40px; }
  .sh-into .sh-content { grid-template-columns:1fr; gap:32px; }
}

/* ───── Mobile (≤768px) — conversion-focused layout ───── */
@media (max-width:768px) {
  /* Header: keep brand + auth controls, hide middle nav anchor links */
  .hdr {
    padding:12px 20px;
  }
  .hdr nav { gap:6px; }
  .hdr nav a.navlink,
  .hdr-divider { display:none; }
  .brand .bird { height:48px; }
  .wm { font-size:2.25rem; letter-spacing:.08em; padding:0 3px; }

  /* Section padding */
  .lf-section { padding:56px 20px; }
  .sub { padding:64px 20px; }
  .manifesto { padding:72px 20px 56px; }
  .position { padding:64px 20px; }
  .final { padding:80px 20px; }
  .lf-footer { padding:24px 20px; flex-direction:column; align-items:flex-start; gap:14px; }
  .lf-footer nav { gap:16px; flex-wrap:wrap; }

  /* Scroll-hero — keep animation, slim it down */
  .scroll-hero { height:240vh; }
  .sh-screen { padding:0 20px; }
  .sh-h { font-size:clamp(2.6rem, 13vw, 4.2rem); line-height:.95; letter-spacing:-.03em; }
  .sh-sub { font-size:.98rem; max-width:42ch; margin:0 auto 28px; }
  .sh-eye { margin-bottom:18px; font-size:10px; letter-spacing:.22em; }
  .sh-stats { flex-wrap:wrap; gap:0; padding:14px 0; max-width:100%; }
  .sh-stats > div { padding:6px 16px; min-width:0; flex:1 1 50%; }
  .sh-stats b { font-size:18px; }
  .sh-stats span { font-size:9.5px; }
  .verb-col { width:42%; }
  .verb-col-2, .verb-col-4, .verb-col-5 { display:none; }
  .verb-col-1 { left:-2%; }
  .verb-col-3 { left:48%; }
  .sh-into .sh-h { font-size:clamp(2.2rem, 8vw, 3.4rem); }
  .sh-into .sh-sub { font-size:.95rem; }
  .sh-into .sh-content { gap:24px; }
  .sh-cta { gap:8px; }
  .sh-cta .btn-lg, .sh-cta .btn-g { padding:12px 18px; font-size:14px; }

  /* Position */
  .position-inner { grid-template-columns:1fr; gap:24px; }

  /* Manifesto: stack the three pillar words */
  .mani-h { flex-direction:column; gap:14px; font-size:clamp(2rem, 11vw, 2.8rem); align-items:center; display:flex; }
  .mani-word { gap:8px; }
  .mani-num { font-size:11px; }

  /* Sub-section copy + visualization stacks already from 980px */
  .sub-inner { gap:32px; }
  .sub-h { font-size:clamp(1.65rem, 7vw, 2.2rem); }
  .sub-lede { font-size:1rem; }
  .sub-list li { font-size:.95rem; }
  .sub-tag { font-size:11px; padding:12px 14px; }

  /* Security diagram — stack the data flow vertically */
  .sec-diag { padding:20px; gap:14px; }
  .sec-row { flex-direction:column; gap:10px; }
  .sec-arr { width:14px; height:28px; transform:rotate(90deg); align-self:center; }
  .sec-row-out { grid-template-columns:1fr; gap:8px; }
  .sec-node { padding:12px 14px; }
  .sec-foot { font-size:10px; }

  /* Speed diagram — compress the 4 lanes */
  .spd-diag { padding:18px; gap:16px; }
  .spd-lane { grid-template-columns:42px 1fr 76px; gap:8px; }
  .spd-bar { height:12px; }
  .spd-lab, .spd-t { font-size:10px; }
  .spd-cmp { grid-template-columns:80px 1fr 56px; gap:8px; }
  .spd-cmp-lab { font-size:11px; }

  /* Precision diagram — already vertical; tighten padding */
  .prc-diag { padding:18px; gap:10px; }
  .prc-stage { padding:10px 12px; column-gap:10px; }
  .prc-num { font-size:11px; padding:5px 0; }
  .prc-name { font-size:13px; }
  .prc-desc { font-size:12px; }
  .prc-input, .prc-output { font-size:10px; padding:8px 12px; }

  /* FAQ */
  .obj-grid { grid-template-columns:1fr; gap:14px; }
  .obj { padding:22px 22px; }
  .obj h3 { font-size:1rem; }
  .obj p { font-size:.92rem; }

  /* Final CTA */
  .final h2 { font-size:clamp(2rem, 9vw, 2.8rem); }
  .final p { font-size:1rem; }
  .final .cta-row { gap:10px; }
  .final .cta-row .btn-lg, .final .cta-row .btn-g { padding:12px 20px; }
  .final .micro { font-size:10px; }

  /* Touch targets */
  .hdr nav a.login,
  .btn-p,
  .theme-toggle {
    min-height:40px;
    display:inline-flex;
    align-items:center;
  }

  /* Demo card on the "Into this" screen sits inside the sticky 100vh
     .sh-track with overflow:hidden + align-items:center. On mobile the
     copy + card stack to >100vh and the centering clips the eyebrow +
     H1 + subtitle off the top of the viewport. Shrink the card AND the
     copy block so the whole .sh-content column fits in 100vh at the
     TALLEST cycle state (Codes tab), keeping the wipe animation. */

  .sh-into .sh-content { gap:14px; }
  .sh-into .sh-h       { font-size:clamp(1.4rem,6vw,2.1rem); margin-bottom:10px; line-height:.96; }
  .sh-into .sh-sub     { font-size:.85rem; line-height:1.45; margin:0 0 14px; max-width:32ch; }
  .sh-into .sh-eye     { margin-bottom:8px; font-size:10px; }
  .sh-cta .btn-lg,
  .sh-cta .btn-g       { padding:10px 16px; font-size:13px; }

  /* File header strip */
  .out-head            { padding:6px 12px; gap:6px; }
  .out-fname           { font-size:9.5px; }
  .out-stamp           { font-size:8.5px; letter-spacing:.12em; }
  .out-dots i          { width:6px; height:6px; }

  /* Tagged-rows table — show 3 rows, drop verbatim + sentiment (they
     were already invisible at this width because the grid overflowed). */
  .out-rows            { padding:6px 12px 4px; }
  .out-rows-head       { grid-template-columns:18px 1fr; gap:10px; font-size:8.5px; padding:0 4px 4px; }
  .out-rows-head > span:nth-child(3),
  .out-rows-head > span:nth-child(4) { display:none; }
  .out-row             { grid-template-columns:28px 1fr; gap:10px; padding:4px 4px; font-size:11px; }
  .out-row .row-vb,
  .out-row .row-sent   { display:none; }
  .out-row:nth-child(n+4) { display:none; }
  .row-chip            { font-size:9.5px; padding:1px 5px; }

  /* Theme-distribution head: stack title above tabs so neither squeezes */
  .out-dist            { padding:8px 12px 10px; }
  .out-dist-head       { flex-direction:column; align-items:stretch; gap:6px; margin-bottom:6px; }
  .out-dist-title      { font-size:8.5px; letter-spacing:.14em; }
  .out-tabs            { width:100%; padding:1px; }
  .out-tab             { flex:1; padding:4px 5px; font-size:9px; }

  /* Visualizations */
  .out-stacked         { height:10px; }
  .out-donut-wrap      { grid-template-columns:90px 1fr; gap:10px; padding:2px 0; }
  .out-donut           { width:90px; height:90px; }
  .donut-n             { font-size:15px; }
  .donut-k             { font-size:7px; margin-top:2px; }
  .out-donut-wrap .out-legend { grid-template-columns:1fr; gap:2px; margin-top:0; }
  .out-bars            { gap:4px; padding:0; }
  .out-bar             { grid-template-columns:82px 1fr 38px; gap:7px; padding:1px 2px; }
  .out-bar-lab         { font-size:10px; }
  .out-bar-pct         { font-size:9.5px; }
  .out-bar-track       { height:5px; }
  .out-bars--codes     { max-height:120px; gap:2px; }
  .out-bars--codes .out-bar      { grid-template-columns:96px 1fr 34px; gap:7px; padding:0 2px; }
  .out-bars--codes .out-bar-lab  { font-size:9.5px; }
  .out-bars--codes .out-bar-pct  { font-size:9px; }
  .out-bars--codes .out-bar-track{ height:4px; }
  .out-legend          { grid-template-columns:repeat(2,1fr); gap:2px 8px; margin-top:6px; }
  .out-leg             { font-size:9.5px; padding:0; }
  .out-leg i           { width:6px; height:6px; }
  .out-leg b           { font-size:9.5px; }

  /* Hide the shared stack-legend on Themes + Codes tabs — those panes
     already self-label every bar, so the duplicate legend is wasted
     height in cycle states. Stacked still shows it (the only label). */
  .out-dist:has(.out-viz-pane[data-viz="bars"].is-on)  #stackLegend,
  .out-dist:has(.out-viz-pane[data-viz="codes"].is-on) #stackLegend {
    display:none;
  }

  /* Foot tiles — 2x2 grid on mobile instead of 4-wide */
  .out-foot            { grid-template-columns:repeat(2,1fr); }
  .out-tile            { padding:6px 10px; border-right:1px solid var(--line); }
  .out-tile:nth-child(2n)   { border-right:none; }
  .out-tile:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .out-tile-k          { font-size:8px; letter-spacing:.14em; }
  .out-tile-v          { font-size:13px; }
  .out-tile-v em       { font-size:8.5px; margin-left:2px; }
}

/* ───── Phone (≤480px) — tightest pass ───── */
@media (max-width:480px) {
  /* Header: drop "by Outsized Insights" subtitle, shrink logo */
  .brand { gap:8px; }
  .brand .bird { height:40px; }
  .wm { font-size:1.8rem; letter-spacing:.06em; padding:0 2px; }
  .brand .org { display:none; }
  .hdr { padding:10px 14px; }
  .hdr nav { gap:4px; }
  .hdr nav a.login { padding:6px 8px; font-size:12px; }
  .btn-p { padding:7px 12px; font-size:12px; gap:5px; }
  .btn-p svg { width:11px; height:11px; }
  .theme-toggle { width:32px; height:32px; }

  /* Padding squeezes */
  .lf-section { padding:48px 16px; }
  .sub { padding:48px 16px; }
  .manifesto { padding:56px 16px 48px; }
  .position { padding:48px 16px; }
  .final { padding:64px 16px; }
  .lf-footer { padding:20px 16px; }

  /* Hero further compression */
  .scroll-hero { height:220vh; }
  .sh-screen { padding:0 16px; }
  .sh-h { font-size:clamp(2rem, 14vw, 3.2rem); }
  .sh-sub { font-size:.92rem; margin-bottom:24px; }
  .sh-stats > div { flex:1 1 100%; padding:8px 12px; border-left:none; border-bottom:1px solid var(--line); }
  .sh-stats > div:last-child { border-bottom:none; }
  .sh-into .sh-h { font-size:clamp(1.8rem, 9vw, 2.6rem); }

  /* Manifesto */
  .mani-h { font-size:clamp(1.7rem, 12vw, 2.4rem); }

  /* Section heads */
  .sec-h { font-size:clamp(1.6rem, 8vw, 2.2rem); }
  .sub-h { font-size:clamp(1.5rem, 8vw, 2rem); }

  /* Speed diagram — keep all 4 lanes but very compact */
  .spd-lane { grid-template-columns:36px 1fr 64px; gap:6px; }
  .spd-lab, .spd-t { font-size:9.5px; }
  .spd-cmp { grid-template-columns:70px 1fr 48px; gap:6px; }
  .spd-cmp-val { font-size:10px; }

  /* Precision diagram */
  .prc-stage { grid-template-columns:38px 1fr; column-gap:8px; padding:9px 10px; }
  .prc-num { font-size:10px; padding:4px 0; }
  .prc-name { font-size:12.5px; }
  .prc-desc { font-size:11.5px; line-height:1.45; }

  /* FAQ */
  .obj { padding:18px 18px; }

  /* Final CTA — full-width stacking */
  .final .cta-row { flex-direction:column; align-items:stretch; gap:10px; }
  .final .cta-row .btn-lg, .final .cta-row .btn-g {
    width:100%;
    justify-content:center;
    padding:14px 18px;
  }
}