/* ============================================================================
   The story landing (index.html). One message, ten gates, one join.
   Builds on kit.css: same tokens, same three faces. The only region drenched in
   ink is the governor's tower; everything else stays on paper.
   ============================================================================ */
:root{
  --ink-2:#212329; --ink-3:#2c2f36;
  --on-ink:#f4f2ee; --on-ink-2:rgba(244,242,238,.68); --on-ink-3:rgba(244,242,238,.56);
  --red-on-ink:#f2777a; --green-on-ink:#4cc98a; --amber-on-ink:#e3a94a;
  --eng-template:#7d838b; --eng-llm:#6b46c9;
  --gut:clamp(16px,4vw,56px);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
body.story{ --muted:#5f656c; font-size:16px; line-height:1.55; background:var(--bg); overflow-x:clip; }
body.story ::selection{ background:var(--red); color:#fff }
:where(.story) :where(h1,h2,h3){ text-wrap:balance; margin:0 }
:where(.story) :where(p){ margin:0; text-wrap:pretty }

/* ---- top bar ------------------------------------------------------------ */
.st-bar{ position:fixed; inset:0 0 auto 0; z-index:50; height:60px; display:flex; align-items:center;
  gap:24px; padding:0 var(--gut);
  background:rgba(244,242,238,.82); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid rgba(23,24,28,.07); }
.st-links{ display:flex; gap:22px; margin-left:auto; font-size:14px; color:var(--ink-soft) }
.st-links a{ padding:6px 0; background:linear-gradient(var(--red),var(--red)) 0 100%/0 1.5px no-repeat;
  transition:background-size .3s var(--ease-out), color .2s }
.st-links a:hover{ color:var(--ink); background-size:100% 1.5px }

/* ---- buttons ------------------------------------------------------------ */
.st-btn{ display:inline-flex; align-items:center; gap:9px; min-height:48px; padding:0 22px;
  border-radius:var(--s-r2); font-family:"Archivo",sans-serif; font-weight:700; font-variation-settings:"wdth" 88; font-size:16px;
  letter-spacing:.005em; color:#fff; background:var(--red);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 10px 24px -12px rgba(168,27,34,.7);
  transition:transform .2s var(--ease-out), box-shadow .2s, background .2s; }
.st-btn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .25s var(--ease-out) }
.st-btn:hover{ background:var(--red-deep); transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 16px 30px -14px rgba(168,27,34,.8) }
.st-btn:hover svg{ transform:translateX(3px) }
.st-btn:active{ transform:translateY(0) }
.st-btn[hidden]{ display:none }
.st-btn-sm{ min-height:38px; padding:0 15px; font-size:14px; white-space:nowrap }
.st-btn-ghost{ color:var(--ink); background:transparent; box-shadow:inset 0 0 0 1.5px var(--line-2) }
.st-btn-ghost:hover{ background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--ink); }
.st-btn-dark{ color:var(--on-ink); box-shadow:inset 0 0 0 1.5px rgba(244,242,238,.28) }
body.story{ scrollbar-color:#c9c3b8 var(--bg) }
.st-btn-dark:hover{ background:rgba(244,242,238,.08); box-shadow:inset 0 0 0 1.5px var(--on-ink) }

/* ============================================================================
   1 · The gauntlet. A tall section; the stage sticks while scroll drives the token.
   ============================================================================ */
.gauntlet{ position:relative; height:560vh; }
.g-anchor{ position:absolute; top:62vh; height:1px; width:1px }
.g-stage{ position:sticky; top:0; height:100vh; height:100svh; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,88px); align-items:center;
  padding:92px var(--gut) 32px; max-width:1440px; margin:0 auto; }

.g-copy{ position:relative; display:grid; align-items:center; min-height:0 }
.g-copy > *{ grid-area:1/1 }
.g-hero h1{ font-size:clamp(40px,5.6vw,84px); line-height:.98; letter-spacing:-.025em; font-weight:800; font-variation-settings:"wdth" 82 }
.g-hero h1 em{ font-style:normal; color:var(--red); position:relative; white-space:nowrap }
.g-hero h1 em::after{ content:""; position:absolute; left:0; right:0; bottom:-.02em; height:.08em; border-radius:.04em;
  background:var(--red); transform:scaleX(var(--strike,0)); transform-origin:left;
  transition:transform .7s var(--ease-out) .5s }
.is-ready .g-hero h1 em{ --strike:1 }
.g-sub{ margin-top:26px; max-width:34em; font-size:clamp(16px,1.35vw,19px); color:var(--ink-soft); line-height:1.55 }
.g-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px }
.g-note{ margin-top:16px; font-size:13px; color:var(--muted) }

.g-hero, .g-caption{ transition:opacity .45s var(--ease-out), transform .6s var(--ease-out), filter .45s; }
.g-caption{ opacity:0; transform:translateY(18px); pointer-events:none; filter:blur(4px); }
.phase-run .g-hero, .phase-done .g-hero{ opacity:0; transform:translateY(-22px); pointer-events:none; filter:blur(4px) }
.phase-run [data-caption], .phase-done [data-final]{ opacity:1; transform:none; pointer-events:auto; filter:none }

.g-cap-pos{ font-family:"Martian Mono",monospace; font-stretch:75%; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap }
.g-cap-t{ font-size:clamp(34px,4.2vw,62px); line-height:1; letter-spacing:-.03em; font-weight:700 }
.g-cap-t::first-letter{ text-transform:uppercase }
.g-cap-d{ margin-top:18px; max-width:30em; font-size:clamp(16px,1.3vw,19px); color:var(--ink-soft) }
.g-cap-held{ margin-top:28px; padding-top:18px; border-top:1px solid var(--line-2); max-width:30em; font-size:15px; color:var(--muted) }
.g-cap-held .num{ font-size:22px; font-weight:600; color:var(--ink); margin-right:4px }
.g-final .st-btn{ margin-top:28px; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line-2) }
.g-final .st-btn:hover{ background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--ink) }

/* ---- the tower ---------------------------------------------------------- */
.tower{ position:relative; margin:0; align-self:stretch; max-height:760px; display:flex; flex-direction:column;
  background:var(--ink); color:var(--on-ink); border-radius:12px; padding:22px 24px 18px 24px;
  box-shadow:0 2px 3px rgba(20,18,16,.12), 0 40px 80px -40px rgba(40,16,10,.55);
  --lane:88px; }
.tower::before{ content:""; position:absolute; top:58px; bottom:58px; left:calc(24px + var(--lane) / 2 - 1px); width:2px;
  background:repeating-linear-gradient(to bottom, rgba(244,242,238,.16) 0 4px, transparent 4px 9px); }
.tower-head, .tower-foot{ display:flex; justify-content:space-between; gap:12px;
  font-family:"Martian Mono",monospace; font-stretch:75%; font-size:11.5px; color:var(--on-ink-3); }
.tower-head span:first-child{ color:var(--on-ink); font-weight:600 }
.tower-foot{ padding-top:14px; border-top:1px solid rgba(244,242,238,.1); color:var(--on-ink-2) }
.tower-foot b{ color:var(--on-ink); font-weight:600 }
.gates{ list-style:none; margin:12px 0; padding:0; flex:1; display:flex; flex-direction:column; justify-content:space-between; min-height:0 }

.gate{ position:relative; display:grid; grid-template-columns:var(--lane) minmax(0,1fr) auto; align-items:center;
  column-gap:14px; padding:6px 0; border-radius:6px; }
.gate::after{ content:""; position:absolute; inset:0 -10px; border-radius:6px; background:rgba(244,242,238,.05);
  opacity:0; transition:opacity .3s; z-index:0 }
.gate.is-next::after{ opacity:1 }
.gate > *{ position:relative; z-index:1 }

/* the boom arm: closed across the lane, swings up when the message clears */
.arm{ position:relative; height:28px; display:block }
.arm::before{ content:""; position:absolute; z-index:1; left:-3px; top:50%; width:12px; height:18px; margin-top:-9px;
  border-radius:3px; background:var(--ink-3); box-shadow:inset 0 0 0 1.5px rgba(244,242,238,.35) }
.arm::after{ content:""; position:absolute; right:-3px; top:50%; width:4px; height:14px; margin-top:-7px; border-radius:2px;
  background:rgba(244,242,238,.18) }
.arm i{ position:absolute; left:4px; right:4px; top:50%; height:10px; margin-top:-5px; border-radius:3px;
  background:repeating-linear-gradient(-45deg, rgba(244,242,238,.62) 0 7px, rgba(244,242,238,.16) 7px 14px);
  transform-origin:0 50%; transition:transform .65s var(--ease-out), background .3s; }
.gate.is-next .arm i{ background:repeating-linear-gradient(-45deg, var(--red-on-ink) 0 7px, rgba(242,119,122,.28) 7px 14px) }
.gate.is-open .arm i{ transform:scaleX(.16); background:var(--green-on-ink) }

.gate-name{ display:block; font-family:"Archivo",sans-serif; font-weight:600; font-size:clamp(14px,1.15vw,16.5px);
  letter-spacing:-.01em; color:var(--on-ink-2); transition:color .3s }
.gate-why{ display:block; font-size:12.5px; color:var(--on-ink-3); line-height:1.35; margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.gate.is-next .gate-name, .gate.is-open .gate-name{ color:var(--on-ink) }
.gate-n{ font-family:"Martian Mono",monospace; font-stretch:75%; font-size:11px; color:var(--on-ink-3); margin-right:7px; font-weight:400 }
.gate-count{ font-family:"Martian Mono",monospace; font-stretch:75%; font-variant-numeric:tabular-nums; font-size:14px; text-align:right;
  color:var(--on-ink-3); min-width:5.5ch; transition:color .3s }
.gate-count small{ display:block; font-size:10.5px; color:var(--on-ink-3) }
.gate.is-open .gate-count{ color:var(--on-ink) }
.gate.is-open.t-amber .gate-count{ color:var(--amber-on-ink) }
.gate.is-open.t-red .gate-count{ color:var(--red-on-ink) }
.gate.is-open.t-zero .gate-count{ color:var(--green-on-ink) }

/* the message */
.token{ position:absolute; z-index:3; left:calc(24px + var(--lane) / 2 - 8px); top:0; width:16px; height:16px;
  border-radius:50%; background:var(--red-2);
  outline:2px solid rgba(242,119,122,.45); outline-offset:3px; box-shadow:0 5px 10px -2px rgba(0,0,0,.6);
  transform:translateY(var(--ty,40px)); transition:transform .5s var(--ease-out), background .4s, outline-color .4s; }
.phase-done .token{ background:var(--green-on-ink); outline-color:rgba(76,201,138,.5) }

/* ============================================================================
   Sections on paper
   ============================================================================ */
.sec{ max-width:1240px; margin:0 auto; padding:clamp(96px,12vw,168px) var(--gut) 0; }
.sec-head{ max-width:760px }
.sec-head h2{ font-size:clamp(32px,3.8vw,54px); line-height:1.03; letter-spacing:-.03em; font-weight:700 }
.sec-head h2 q{ quotes:"“" "”"; color:var(--red-deep) }
.sec-head p{ margin-top:20px; max-width:38em; font-size:clamp(16px,1.3vw,18.5px); color:var(--ink-soft) }

/* ---- 2 · the chat ------------------------------------------------------- */
.thread-grid{ margin-top:56px; display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:48px; align-items:start }
.phone{ background:#ece5dd; border-radius:24px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(23,24,28,.08), 0 30px 60px -36px rgba(40,20,12,.45);
  background-image:radial-gradient(rgba(23,24,28,.045) 1px, transparent 1.2px); background-size:14px 14px; }
.phone-top{ display:flex; align-items:center; gap:12px; padding:14px 20px; background:#f7f5f1; border-bottom:1px solid var(--line) }
.phone-top b{ display:block; font-size:15px; line-height:1.2 }
.phone-top small{ font-size:12px; color:var(--muted) }
.avatar-n{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:#fff;
  font-family:"Archivo",sans-serif; font-weight:700 }

.chat-list{ list-style:none; margin:0; padding:24px clamp(14px,2.4vw,28px) 28px; display:flex; flex-direction:column; gap:14px }
.turn{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(14px,3vw,40px); align-items:start }
.turn-in .msg{ grid-column:1 }
.turn-out .msg{ grid-column:2; justify-self:end }
.turn-out .why{ grid-column:1; grid-row:1; }
.msg{ max-width:100%; width:fit-content; padding:9px 12px 7px; font-size:15px; line-height:1.45; white-space:pre-wrap; color:#111b21;
  box-shadow:0 1px 1px rgba(20,18,16,.1); }
.turn-in .msg{ background:#fff; border-radius:3px 12px 12px 12px }
.turn-out .msg{ background:#d9fdd3; border-radius:12px 3px 12px 12px }
.msg .at{ display:block; text-align:right; font-family:"Martian Mono",monospace; font-stretch:75%; font-size:10.5px; color:#667781; margin-top:2px }
.msg .gloss{ display:block; white-space:normal; margin-top:6px; padding-top:6px; border-top:1px solid rgba(17,27,33,.08);
  font-size:13px; line-height:1.45; color:#54656f }
.why{ align-self:center; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.62); font-size:13.5px; line-height:1.45; color:var(--ink-soft);
  box-shadow:0 0 0 1px rgba(23,24,28,.05) }
.why-h{ display:flex; align-items:center; gap:8px; margin-bottom:4px; font-family:"Martian Mono",monospace; font-stretch:75%; font-size:11.5px; font-weight:600; color:var(--ink) }
.why-h .ms{ margin-left:auto; font-weight:400; color:var(--muted) }
.dot{ display:inline-block; width:9px; height:9px; border-radius:50%; flex:none }
.e-template{ background:var(--eng-template) } .e-deterministic{ background:var(--blue) } .e-tool{ background:var(--green) }
.e-guardrail{ background:var(--amber) } .e-llm{ background:var(--eng-llm) }

.engine-key{ position:sticky; top:96px; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; font-size:14px; color:var(--muted) }
.engine-key li{ display:grid; grid-template-columns:12px 1fr; column-gap:10px; line-height:1.45 }
.engine-key .dot{ margin-top:6px; grid-row:span 2 }
.engine-key b{ display:block; color:var(--ink); font-family:"Archivo",sans-serif; font-weight:600; font-size:15px }

/* reveal: visible by default, the script only adds the entrance */
.js .turn.pre{ opacity:0; transform:translateY(16px) }
.turn{ transition:opacity .6s var(--ease-out), transform .7s var(--ease-out) }

/* ---- 3 · the call ------------------------------------------------------- */
.call-grid{ margin-top:56px; display:grid; grid-template-columns:300px minmax(0,1fr); gap:56px; align-items:start }
.call-meta{ position:sticky; top:96px; background:var(--ink); color:var(--on-ink); border-radius:12px; padding:24px }
.cm-time{ font-family:"Martian Mono",monospace; font-stretch:75%; font-size:44px; font-weight:500; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums }
.cm-sub{ margin-top:8px; font-size:13.5px; color:var(--on-ink-2) }
.cm-wave{ display:flex; align-items:center; gap:2px; height:44px; margin:20px 0 18px }
.cm-wave i{ flex:1; border-radius:2px; background:rgba(244,242,238,.22); transition:background .3s }
.cm-wave i.on{ background:var(--red-on-ink) }
.cm-facts{ list-style:none; margin:0; padding:16px 0 0; border-top:1px solid rgba(244,242,238,.1); display:grid; gap:9px; font-size:13.5px }
.cm-facts li{ display:flex; justify-content:space-between; gap:12px; color:var(--on-ink-2) }
.cm-facts b{ color:var(--on-ink); font-weight:600; font-family:"Martian Mono",monospace; font-stretch:75%; font-size:12.5px; text-align:right }
.cm-gates{ margin-top:16px; padding-top:14px; border-top:1px solid rgba(244,242,238,.1); font-size:12.5px; color:var(--on-ink-2) }
.cm-gates p{ color:var(--on-ink); font-weight:600; margin-bottom:8px; font-size:13.5px }
.cm-gates span{ display:inline-flex; align-items:center; gap:5px; margin:0 10px 6px 0 }
.cm-gates svg{ width:12px; height:12px; stroke:var(--green-on-ink); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }

.transcript{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column }
.line{ display:grid; grid-template-columns:62px minmax(0,1fr); gap:18px; padding:18px 0; border-top:1px solid var(--line) }
.line:first-child{ border-top:0; padding-top:4px }
.line-t{ font-family:"Martian Mono",monospace; font-stretch:75%; font-size:12.5px; color:var(--muted); padding-top:4px; font-variant-numeric:tabular-nums }
.line-who{ font-family:"Archivo",sans-serif; font-weight:600; font-size:13px; color:var(--muted); margin-bottom:3px }
.line-agent .line-who{ color:var(--red-deep) }
.line-say{ font-size:clamp(17px,1.45vw,20px); line-height:1.45; color:var(--ink) }
.line-candidate .line-say{ color:var(--ink-soft) }
.line-en{ margin-top:5px; font-size:14.5px; color:var(--muted) }
.line-note{ margin-top:12px; display:flex; gap:10px; align-items:baseline; padding:10px 13px; border-radius:6px; background:var(--amber-tint);
  box-shadow:inset 0 0 0 1px var(--amber-soft); font-size:14px; color:var(--amber-deep); max-width:44em }
.line-note.n-policy{ background:var(--blue-soft); box-shadow:inset 0 0 0 1px #cddcf6; color:#174a9e }
.line-note.n-barge{ background:var(--bg-2); box-shadow:inset 0 0 0 1px var(--line); color:var(--ink-soft) }
.line-note b{ font-family:"Martian Mono",monospace; font-stretch:75%; font-size:11.5px; font-weight:600; white-space:nowrap }
.line.is-key .line-say{ font-weight:600 }

/* ---- 4 · site lead, join, last gate ------------------------------------- */
.lead-card{ margin-top:48px; max-width:760px; background:var(--paper); border-radius:12px; padding:22px 24px;
  box-shadow:0 0 0 1px var(--line), 0 24px 50px -36px rgba(40,20,12,.4);
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:6px 18px; align-items:center }
.lc-av{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:var(--red-tint); color:var(--red-deep);
  font-family:"Archivo",sans-serif; font-weight:700; font-size:18px; grid-row:span 2 }
.lc-name{ font-family:"Archivo",sans-serif; font-weight:700; font-size:20px; letter-spacing:-.015em }
.lc-meta{ font-size:14px; color:var(--muted); grid-column:2 }
.lc-call{ grid-row:span 2; grid-column:3; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; border:0; cursor:pointer;
  background:var(--green); color:#fff; box-shadow:0 10px 20px -10px rgba(23,138,82,.8); transition:transform .2s var(--ease-out) }
.lc-call:hover{ transform:scale(1.06) }
.lc-call svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round }
.lc-row{ grid-column:1/-1; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.lc-row > span{ font-size:14px; color:var(--muted); margin-right:6px }
.lc-out{ min-height:38px; padding:0 14px; border-radius:6px; border:1px solid var(--line-2); background:var(--paper); cursor:pointer;
  font:600 14px/1 "Archivo",sans-serif; color:var(--ink-soft); transition:all .18s }
.lc-out:hover{ border-color:var(--ink); color:var(--ink) }
.lc-out[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff }
.lc-said{ grid-column:1/-1; font-size:13.5px; color:var(--muted); min-height:1.4em; margin-top:2px }
.lc-tags{ grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px; margin-top:12px }
.lc-tag{ font-size:13px; padding:4px 10px; border-radius:6px; background:var(--bg); color:var(--ink-soft) }
.lc-tag.good{ background:var(--green-soft); color:#0f6b3e }

.claim{ margin-top:clamp(96px,10vw,140px) }
.claim h3, .lastgate h3{ font-size:clamp(28px,3vw,42px); line-height:1.05; letter-spacing:-.025em; font-weight:700; max-width:18em }
.claim > p{ margin-top:16px; font-size:17px; color:var(--ink-soft); max-width:38em }
.flow{ list-style:none; margin:44px 0 0; padding:0; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); align-items:end; gap:10px }
.flow li{ display:flex; flex-direction:column; gap:10px }
.flow .bar{ animation:none; height:var(--h); min-height:4px; border-radius:6px 6px 2px 2px; background:var(--line-2); transform-origin:bottom;
  transition:transform 1s var(--ease-out); }
.js .flow.pre .bar{ transform:scaleY(.04) }
.flow .fn{ font-family:"Martian Mono",monospace; font-stretch:75%; font-variant-numeric:tabular-nums; font-size:clamp(15px,1.5vw,20px); font-weight:500; color:var(--ink) }
.flow .fl{ font-size:13px; color:var(--muted); line-height:1.3; min-height:2.6em }
.flow li:last-child .bar{ background:var(--red) }
.flow li:last-child .fn{ color:var(--red-deep); font-weight:600 }
.claim-foot{ margin-top:28px; font-size:17px; color:var(--ink-soft) }
.claim-foot .num{ font-weight:600; color:var(--ink) }

.lastgate{ margin:clamp(96px,10vw,140px) 0 0; display:grid; grid-template-columns:120px minmax(0,1fr); gap:32px; align-items:center; max-width:880px }
.lastgate p{ margin-top:14px; font-size:17px; color:var(--ink-soft); max-width:36em }
.lastgate-bar{ position:relative; height:120px; border-radius:12px; background:var(--ink); }
.lastgate-bar span{ position:absolute; top:50%; height:8px; margin-top:-4px; border-radius:3px; background:var(--red-on-ink); width:72px; left:24px;
  transform-origin:4px 50%; transform:rotate(-62deg); transition:transform 1.1s var(--ease-out) .2s }
.lastgate-bar span:first-child{ width:12px; height:12px; margin-top:-6px; border-radius:50%; background:var(--ink-3); box-shadow:inset 0 0 0 2px rgba(244,242,238,.4); left:18px; transform:none; z-index:1 }
.lastgate.shut .lastgate-bar span:last-child{ transform:rotate(0) }
.js .lastgate:not(.shut) .lastgate-bar span:last-child{ transform:rotate(-62deg) }

/* ---- 5 · close ---------------------------------------------------------- */
.close{ margin-top:clamp(120px,14vw,200px); background:var(--ink); color:var(--on-ink); padding:clamp(80px,10vw,140px) var(--gut) 40px; }
.close-in{ max-width:1240px; margin:0 auto }
.close h2{ color:var(--on-ink); font-size:clamp(36px,5vw,72px); line-height:1; letter-spacing:-.035em; font-weight:700; max-width:14em }
.close-in > p{ margin-top:22px; font-size:18px; color:var(--on-ink-2); max-width:38em }
.close .st-btn{ box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 10px 22px -12px rgba(0,0,0,.7) }
.close .st-btn-dark{ box-shadow:inset 0 0 0 1.5px rgba(244,242,238,.28) }
.close-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px }
.close-tip{ margin-top:22px !important; font-size:15px !important; color:var(--on-ink-3) !important }
.close kbd{ font-family:"Martian Mono",monospace; font-stretch:75%; font-size:13px; padding:2px 7px; border-radius:6px; background:var(--ink-3); color:var(--on-ink) }
.st-suite{ margin-top:clamp(64px,8vw,104px); padding-top:20px; border-top:1px solid rgba(244,242,238,.1); color:var(--on-ink-2) }
.st-foot{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:18px; padding-top:18px;
  border-top:1px solid rgba(244,242,238,.1); font-size:13px; color:var(--on-ink-3) }
.st-foot a{ color:var(--on-ink-2); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(244,242,238,.3) }
.st-foot a:hover{ color:var(--on-ink) }
.close :focus-visible, .tower :focus-visible{ outline-color:var(--on-ink) }

/* ============================================================================
   Narrow screens. The stage stacks: copy above, a compressed tower below.
   ============================================================================ */
@media (max-width:980px){
  .thread-grid{ grid-template-columns:1fr }
  .engine-key{ position:static; order:-1; display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px 20px }
  .call-grid{ grid-template-columns:1fr; gap:32px }
  .call-meta{ position:static }
}
@media (max-width:820px){
  .st-links{ display:none }
  .st-bar{ height:56px }
  .gauntlet{ height:620vh }
  .g-stage{ grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); gap:18px; padding:76px var(--gut) 16px; align-items:stretch }
  .g-hero h1{ font-size:clamp(34px,9.6vw,52px) }
  .g-sub{ margin-top:14px; font-size:15.5px }
  .g-ctas{ margin-top:18px }
  .g-ctas .st-btn{ min-height:44px; font-size:15px; padding:0 16px }
  .g-ctas{ align-items:center; gap:6px 18px }
  .g-ctas .st-btn-ghost{ min-height:44px; padding:0; box-shadow:none; background:none; font-size:14.5px; color:var(--ink-soft);
    text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--line-2) }
  .g-note{ margin-top:10px; font-size:12.5px }
  .g-copy{ align-items:start }
  /* once the hero has gone, it stops reserving height, so the tower grows up to meet the caption */
  .phase-run .g-hero, .phase-done .g-hero{ position:absolute; inset:0 0 auto 0 }
  .g-cap-t{ font-size:32px; margin-top:6px }
  .g-cap-d{ margin-top:10px; font-size:15px }
  .g-cap-held{ margin-top:12px; padding-top:10px; font-size:13.5px }
  .g-cap-held .num{ font-size:18px }
  .g-final .st-btn{ margin-top:14px }
  .tower{ padding:14px 16px 12px; border-radius:12px; --lane:56px }
  .tower::before{ left:calc(16px + var(--lane) / 2 - 1px); top:44px; bottom:44px }
  .token{ left:calc(16px + var(--lane) / 2 - 7px); width:14px; height:14px }
  .gates{ margin:8px 0 }
  .gate{ padding:2px 0; column-gap:10px }
  .gate-why{ display:none }
  .gate-name{ font-size:14px }
  .gate-count{ font-size:13px }
  .gate-count small{ display:none }
  .arm{ height:22px }
  .arm i{ height:8px; margin-top:-4px }
  .tower-head span:last-child{ display:none }
  .tower-foot{ font-size:11px; padding-top:10px }

  .turn{ grid-template-columns:1fr; gap:6px }
  .turn-out .msg{ grid-column:1; margin-left:12%; }
  .turn-in .msg{ margin-right:12% }
  .turn-out .why{ grid-row:auto; grid-column:1; margin-left:12%; padding:9px 11px; font-size:13px }
  .flow{ grid-template-columns:1fr; gap:6px }
  .flow li{ display:grid; grid-template-columns:minmax(0,1fr) 72px; grid-template-areas:"bar n" "l l"; column-gap:12px; row-gap:2px }
  .flow .bar{ grid-area:bar; height:10px; width:var(--w); border-radius:3px; transform-origin:left }
  .js .flow.pre .bar{ transform:scaleX(.04) }
  .flow .fn{ grid-area:n; text-align:right; font-size:15px }
  .flow .fl{ grid-area:l; min-height:0; margin-bottom:8px }
  .lastgate{ grid-template-columns:1fr; gap:22px }
  .lastgate-bar{ width:120px }
  .lead-card{ grid-template-columns:auto minmax(0,1fr) auto; padding:18px }
  .lc-av{ width:44px; height:44px; font-size:16px }
  .lc-call{ width:46px; height:46px }
}
@media (max-width:820px) and (max-height:700px){
  .g-sub{ display:none }
}

@media (prefers-reduced-motion:reduce){
  .g-hero, .g-caption, .token, .arm i, .turn, .flow .bar, .lastgate-bar span, .st-btn, .st-btn svg{ transition:none !important }
  .js .turn.pre{ opacity:1; transform:none }
  .js .flow.pre .bar{ transform:none }
}