/* ═══════════════════════════════════════════════════════════════════════
   SENTYS v2 — "one continuous instrument"
   The whole site is a single dark room: the Chladni plate lives behind
   everything, conducted by scroll. Light exists only as paper — the
   documents Sentys actually produces (a work order, a report, the ask).
   Type: Clash Display (display) · Supreme (body) · IBM Plex Mono (data).
   ═══════════════════════════════════════════════════════════════════════ */

@font-face { font-family:'Clash'; src:url('../fonts/ClashDisplay-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Clash'; src:url('../fonts/ClashDisplay-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Clash'; src:url('../fonts/ClashDisplay-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Supreme'; src:url('../fonts/Supreme-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Supreme'; src:url('../fonts/Supreme-Italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Supreme'; src:url('../fonts/Supreme-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Supreme'; src:url('../fonts/Supreme-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'PlexMono'; src:url('../fonts/PlexMono-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'PlexMono'; src:url('../fonts/PlexMono-500.woff2') format('woff2'); font-weight:500; font-display:swap; }

:root {
  --plate:#0f1216;
  --plate-2:#151a21;
  --panel:rgba(18,22,28,.78);
  --hairline:#242b35;
  --dust:#ece5d6;
  --dust-dim:#a2abb5;
  --ember:#f0a43c;
  --ember-strong:#ffb54a;
  --heat:#ff6a45;
  /* paper — the documents */
  --paper:#f2efe8;
  --paper-2:#faf9f4;
  --ink:#181b1f;
  --ink-dim:#565f68;
  --p-line:#ddd8ca;
  --p-accent:#8a5c0a;
  /* data semantics */
  --ok:#3d8f5c; --ok-dark:#57c07e;
  --bad:#c94a36; --bad-dark:#ef7963;

  --maxw:1140px;
  --display:'Clash', -apple-system, BlinkMacSystemFont, sans-serif;
  --sans:'Supreme', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:'PlexMono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --shadow:0 2px 6px rgba(0,0,0,.35), 0 18px 50px rgba(0,0,0,.45);
}

* { box-sizing:border-box; }
html.smooth { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html.smooth { scroll-behavior:auto; } }
body {
  margin:0; background:var(--plate); color:var(--dust);
  font:400 17px/1.7 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
a { color:var(--ember); }
h1,h2,h3 { font-family:var(--display); font-weight:500; line-height:1.06; letter-spacing:.004em; color:var(--dust); }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 22px; }
@media (min-width:720px){ .wrap { padding:0 32px; } }
.num { font-variant-numeric:tabular-nums; }
:focus-visible { outline:2px solid var(--ember); outline-offset:2px; }
.paper :focus-visible { outline-color:var(--p-accent); }
.skip { position:absolute; left:-9999px; top:0; z-index:100; background:var(--ember); color:#140f06; padding:10px 16px; font:500 14px var(--sans); }
.skip:focus { left:12px; top:12px; }

/* ── the plate: fixed behind everything, with a global veil ─────────── */
#plate { position:fixed; inset:0; width:100%; height:100%; z-index:0;
  opacity:0; transition:opacity 1.1s ease; }
#plate.on { opacity:1; }
.plate-fallback { position:fixed; inset:0; z-index:0; background:radial-gradient(90% 70% at 64% 42%, #1c222b 0%, var(--plate) 68%); }
.veil::after { content:""; position:absolute; inset:0; opacity:0; transition:opacity .6s ease;
  background:radial-gradient(78% 66% at 50% 46%, rgba(10,12,15,0) 40%, rgba(10,12,15,.78) 100%); }
body.story-focus .veil::after { opacity:1; }
.veil { position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 40%, rgba(15,18,22,0) 30%, rgba(15,18,22,.5) 100%); }
body > nav, body > header, body > main, body > footer { position:relative; z-index:2; }

/* eyebrow */
.eyebrow {
  font:500 12px/1.5 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--dust-dim); display:flex; align-items:center; gap:11px; margin:0 0 20px;
}
.eyebrow::before { content:""; width:18px; height:2px; background:var(--ember); flex:none; }
/* ── unified eyebrow entrance (hero + every section): the bar draws
      itself first, then each phrase lands in sequence ── */
.eyebrow-seq, .eyebrow.reveal { flex-wrap:wrap; }
.eyebrow .sep { color:var(--ember); }
.js .eyebrow-seq::before, .js .eyebrow.reveal::before {
  transform:scaleX(0); transform-origin:left center;
  transition:transform .5s cubic-bezier(.2,.6,.25,1) .1s; }
.js .eyebrow-seq.in::before, .js .eyebrow.reveal.in::before { transform:scaleX(1); }
.js .eyebrow-seq .ph, .js .eyebrow-seq .sep,
.js .eyebrow.reveal .ph, .js .eyebrow.reveal .sep {
  opacity:0; transform:translateY(5px); transition:opacity .45s ease, transform .45s ease; }
.js .eyebrow-seq.in .ph, .js .eyebrow-seq.in .sep,
.js .eyebrow.reveal.in .ph, .js .eyebrow.reveal.in .sep { opacity:1; transform:none; }
.js .eyebrow-seq.in > :nth-child(1), .js .eyebrow.reveal.in > :nth-child(1){ transition-delay:.6s }
.js .eyebrow-seq.in > :nth-child(2), .js .eyebrow.reveal.in > :nth-child(2){ transition-delay:.82s }
.js .eyebrow-seq.in > :nth-child(3), .js .eyebrow.reveal.in > :nth-child(3){ transition-delay:.93s }
.js .eyebrow-seq.in > :nth-child(4), .js .eyebrow.reveal.in > :nth-child(4){ transition-delay:1.15s }
.js .eyebrow-seq.in > :nth-child(5), .js .eyebrow.reveal.in > :nth-child(5){ transition-delay:1.26s }
@media (prefers-reduced-motion: reduce){
  .js .eyebrow-seq::before, .js .eyebrow.reveal::before { transform:none; transition:none; }
  .js .eyebrow-seq .ph, .js .eyebrow-seq .sep,
  .js .eyebrow.reveal .ph, .js .eyebrow.reveal .sep { opacity:1; transform:none; transition:none; } }
@media (max-width:480px){ .eyebrow { letter-spacing:.13em; font-size:11.5px; gap:9px; } }

/* reveal */
.js .reveal { opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.2,.6,.25,1), transform .6s cubic-bezier(.2,.6,.25,1); }
.js .reveal.in { opacity:1; transform:none; }
.js .reveal.d1 { transition-delay:.08s; } .js .reveal.d2 { transition-delay:.16s; } .js .reveal.d3 { transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){ .js .reveal { opacity:1; transform:none; transition:none; } }

/* ── nav ─────────────────────────────────────────────────────────────── */
nav.top {
  position:fixed; top:0; left:0; right:0; z-index:40;
  background:rgba(15,18,22,0); border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease;
}
nav.top.scrolled { background:rgba(15,18,22,.94); border-color:var(--hairline); }
nav.top .wrap { display:flex; align-items:center; justify-content:space-between; height:62px; }
.brand { font:600 15px/1 var(--display); letter-spacing:.4em; color:var(--dust); text-decoration:none; }
.brand i { font-style:normal; color:var(--ember); }
.nav-links { display:flex; gap:26px; align-items:center; font-size:14px; }
.nav-links a:not(.nav-cta) { color:var(--dust-dim); text-decoration:none; padding-bottom:3px; border-bottom:2px solid transparent; }
.nav-links a:not(.nav-cta):hover { color:var(--dust); }
.nav-links a.current { color:var(--dust); border-bottom-color:var(--ember); }
.nav-cta { color:#140f06; background:var(--ember); padding:9px 16px; border-radius:4px; font-weight:500; text-decoration:none; }
.nav-cta:hover { background:var(--ember-strong); }
@media (max-width:820px){ .nav-links a:not(.nav-cta){ display:none; } }

/* ── hero ────────────────────────────────────────────────────────────── */
header.hero { min-height:100svh; display:flex; flex-direction:column; }
.hero-scrim { position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:linear-gradient(92deg, rgba(15,18,22,.96) 0%, rgba(15,18,22,.86) 30%, rgba(15,18,22,.5) 52%, rgba(15,18,22,.08) 72%, rgba(15,18,22,0) 84%),
             linear-gradient(to bottom, rgba(15,18,22,.42) 0%, rgba(15,18,22,0) 22%, rgba(15,18,22,0) 62%, rgba(15,18,22,.86) 96%);
}
header.hero { position:relative; overflow:hidden; }
@media (max-width:860px){
  .hero-scrim { background:linear-gradient(to bottom, rgba(15,18,22,.55) 0%, rgba(15,18,22,.72) 34%, rgba(15,18,22,.42) 60%, rgba(15,18,22,.9) 96%); }
}
.hero-inner { flex:1; display:flex; align-items:center; width:100%; }
.hero-inner .wrap { width:100%; }
.hero-copy { max-width:660px; padding:120px 0 60px; }
header.hero h1 { font-size:clamp(42px, 5.6vw, 82px); margin:0 0 22px; max-width:15ch; }
header.hero h1 em { font-style:normal; color:var(--ember); }
.hero-sub { font-size:clamp(17.5px, 2.1vw, 20px); color:var(--dust-dim); max-width:50ch; margin:0 0 32px; }
.hero-sub b { color:var(--dust); font-weight:500; }
.cta-row { display:flex; flex-wrap:wrap; gap:14px; margin:0 0 34px; }
.btn { display:inline-block; padding:15px 25px; border-radius:4px; font:500 15px/1.2 var(--sans); text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform .06s ease, background .15s ease, border-color .15s ease; }
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--ember); color:#140f06; }
.btn-primary:hover { background:var(--ember-strong); }
.btn-ghost { background:rgba(15,18,22,.4); color:var(--dust); border-color:var(--hairline); }
.btn-ghost:hover { border-color:var(--ember); }

.voice { display:flex; align-items:baseline; gap:10px; font:500 13px/1.6 var(--mono); color:var(--dust-dim); min-height:22px; max-width:60ch; }
.voice .dot { flex:none; width:7px; height:7px; border-radius:50%; background:var(--ok-dark); align-self:center; transition:background .4s ease; }
.voice.alert .dot { background:var(--ember); }
.voice .vtext { letter-spacing:.02em; }
.voice.alert .vtext { color:var(--ember); }
.voice .caret { display:inline-block; width:7px; margin-left:1px; color:var(--ember); animation:blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
@media (prefers-reduced-motion: reduce){ .voice .caret { animation:none; } }

.readouts { border-top:1px solid var(--hairline); background:rgba(15,18,22,.78); }
.readout-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.readout { padding:22px 24px 24px; border-right:1px solid var(--hairline); }
.readout:last-child { border-right:0; }
.readout .n { font:500 34px/1.05 var(--display); color:var(--dust); }
.readout .n i { font-style:normal; color:var(--ember); }
.readout .l { font:400 12.5px/1.55 var(--mono); color:var(--dust-dim); margin-top:7px; letter-spacing:.02em; }
@media (max-width:860px){
  .readout-grid { grid-template-columns:1fr 1fr; }
  .readout { padding:16px 18px 18px; }
  .readout:nth-child(2n){ border-right:0; }
  .readout:nth-child(-n+2){ border-bottom:1px solid var(--hairline); }
  .readout .n { font-size:27px; }
}

/* ── sections ────────────────────────────────────────────────────────── */
section { padding:96px 0; border-top:1px solid var(--hairline); }
header.hero + main > section:first-child { border-top:0; }
section h2 { font-size:clamp(30px, 3.8vw, 48px); margin:0 0 14px; max-width:24ch; text-shadow:0 2px 24px rgba(15,18,22,.9); }
.section-lead { color:var(--dust-dim); max-width:66ch; margin:0 0 44px; font-size:18.5px; text-shadow:0 1px 12px rgba(15,18,22,.9); }
.section-lead b { color:var(--dust); font-weight:500; }

/* ── spec plate (what it is): one engraved panel, three readings ─────── */
.platewall { position:relative; background:var(--panel);
  border:1px solid var(--hairline); border-radius:8px; overflow:hidden;
  display:grid; grid-template-columns:1fr; }
@media (min-width:840px){ .platewall { grid-template-columns:repeat(3,1fr); } }
.platewall .screw, .fig-stage .screw { position:absolute; width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #3a4450, #12161c 70%); box-shadow:inset 0 0 2px rgba(0,0,0,.8); }
.platewall .screw.tl, .fig-stage .screw.tl { top:9px; left:9px; }
.platewall .screw.tr, .fig-stage .screw.tr { top:9px; right:9px; }
.platewall .screw.bl, .fig-stage .screw.bl { bottom:9px; left:9px; }
.platewall .screw.br, .fig-stage .screw.br { bottom:9px; right:9px; }
.pw-cell { padding:30px 28px 32px; border-bottom:1px solid var(--hairline); }
.pw-cell:last-child { border-bottom:0; }
@media (min-width:840px){
  .pw-cell { border-bottom:0; border-right:1px solid var(--hairline); }
  .pw-cell:last-child { border-right:0; }
}
.pw-cell .tag { font:500 11.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ember); margin-bottom:16px; }
.pw-cell h3 { font-size:20px; margin:0 0 10px; }
.pw-cell p { margin:0; color:var(--dust-dim); font-size:16.5px; }
.pw-cell p + p { margin-top:10px; }
.pw-cell p b, .pw-cell p i { color:var(--dust); }

/* ── the story: one engine's life ────────────────────────────────────── */
#story { position:relative; }
.story-track { height:380vh; }
.story-stick { position:sticky; top:0; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:84px 0 30px; }
.story-head { display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.story-title { font:500 clamp(24px,3vw,38px)/1.1 var(--display); }
.story-cycle { font:500 13px/1 var(--mono); letter-spacing:.1em; color:var(--dust-dim); }
.story-cycle .cyc { color:var(--dust); }
.story-chartbox { position:relative; background:var(--plate-2); border:1px solid var(--hairline); border-radius:8px; overflow:hidden;
  transition:border-color .4s ease, box-shadow .4s ease; }
/* magnetic approach: the box rises and its ring warms as the lock nears */
#story .story-chartbox { transform:translateY(calc((1 - var(--ap, 1)) * 30px));
  box-shadow:0 0 0 1px rgba(240,164,60, calc(var(--ap, 0) * .22)); }
/* three slow pulses on dock: the frame breathes ember so the job change
   (page scroll → engine scrub) cannot be missed */
#story.docked .story-chartbox { animation:dockpulse 1.4s ease 2; border-color:#3a4450; box-shadow:0 0 0 1px rgba(240,164,60,.15), var(--shadow); transform:none; }
@media (prefers-reduced-motion: reduce){ #story .story-chartbox { transform:none; } }
@keyframes dockpulse { 0%,100%{ box-shadow:0 0 0 1px rgba(240,164,60,.15); border-color:#3a4450; }
  40%{ box-shadow:0 0 0 4px rgba(240,164,60,.42); border-color:var(--ember); } }
#story.done .story-chartbox { border-color:var(--hairline); box-shadow:none; }
@media (prefers-reduced-motion: reduce){ #story.docked .story-chartbox { animation:none; } }
#storychart { display:block; width:100%; height:min(52vh, 460px); }
@media (max-width:720px){ #storychart { height:38vh; } }
.story-chips { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--hairline); }
.story-chip { padding:12px 16px; border-right:1px solid var(--hairline); font:500 11.5px/1.6 var(--mono); letter-spacing:.06em; color:var(--dust-dim); text-transform:uppercase; }
.story-chip:last-child { border-right:0; }
.story-chip .cv { display:block; font-size:17px; color:var(--ok-dark); letter-spacing:0; }
.story-chip.warn .cv { color:var(--ember); }
.story-chip.hot .cv { color:var(--heat); }
@media (max-width:720px){
  .story-chips { grid-template-columns:1fr 1fr; }
  .story-chip { padding:10px 14px; font-size:10.5px; border-bottom:1px solid var(--hairline); }
  .story-chip:nth-child(2n){ border-right:0; }
  .story-chip:nth-child(n+3){ border-bottom:0; }
  .story-chip .cv { font-size:16px; }
  .story-stages { min-height:150px; }
}
.story-rail { position:relative; height:4px; background:var(--hairline); border-radius:0 0 8px 8px; overflow:visible; }
.story-rail .fill { display:block; height:100%; width:0; background:linear-gradient(90deg, var(--dust) 0%, var(--ember) 62%, var(--heat) 100%); transition:width .12s linear; }
.story-rail .tick { position:absolute; top:-3px; bottom:-3px; left:68.7%; width:2px; background:var(--ember); opacity:.8; }
.story-rail .tick::after { content:"123"; position:absolute; top:8px; left:-12px; font:500 9.5px var(--mono); color:var(--ember); letter-spacing:.06em; }
.story-cycle { position:relative; }
.story-hint { position:absolute; left:50%; top:12px; z-index:3; font:500 12px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--ember); background:rgba(15,18,22,.88); border:1px solid rgba(240,164,60,.45); border-radius:999px; padding:9px 16px;
  opacity:0; transform:translate(-50%,-6px); transition:opacity .4s ease, transform .4s ease; white-space:nowrap; pointer-events:none; }
.story-hint.on { opacity:1; transform:translate(-50%,0); }
/* the polite exit: visible only while the story owns the wheel */
.story-skip { position:absolute; right:12px; top:12px; z-index:3; font:500 11px/1 var(--mono);
  letter-spacing:.14em; text-transform:uppercase; color:var(--dust-dim); text-decoration:none;
  padding:7px 11px; border:1px solid transparent; border-radius:999px;
  opacity:0; transition:opacity .4s ease; pointer-events:none; }
#story.docked .story-skip { opacity:1; pointer-events:auto; }
#story.done .story-skip { opacity:0; pointer-events:none; }
.story-skip:hover { color:var(--dust); border-color:var(--hairline); background:rgba(15,18,22,.7); }
.story-hint .ar { display:inline-block; animation:hintbob 1.1s ease-in-out infinite; }
@keyframes hintbob { 50% { transform:translateY(3px); } }
@media (prefers-reduced-motion: reduce){ .story-hint .ar { animation:none; } }
@media (prefers-reduced-motion: reduce){ .story-hint { transition:none; } }
.story-stages { position:relative; min-height:132px; margin-top:20px; }
.story-stage { position:absolute; inset:0; opacity:0; transform:translateY(10px);
  transition:opacity .3s ease, transform .3s ease; pointer-events:none; }
.story-stage.on { opacity:1; transform:none; pointer-events:auto; transition:opacity .45s ease .18s, transform .45s ease .18s; }
.story-stage .s-kicker { font:500 11.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ember); margin-bottom:8px; }
.story-stage p { margin:0; font-size:clamp(16.5px, 1.9vw, 19px); color:var(--dust); max-width:72ch; text-shadow:0 1px 12px rgba(15,18,22,.9); }
.story-stage p i { color:var(--dust-dim); }
.story-stage .s-quote { font:500 14px/1.7 var(--mono); color:var(--ember); }
.story-stage .s-payoff { font:500 clamp(26px,3.4vw,44px)/1.1 var(--display); color:var(--dust); margin-bottom:8px; }
.story-stage .s-payoff b { color:var(--ember); font-weight:500; }
.story-stage a { color:var(--ember); }
/* static fallback (reduced motion): stack the stages, no scrub */
.story-static .story-track { height:auto; }
.story-static .story-stick { position:static; min-height:0; }
.story-static .story-stages { min-height:0; margin-top:14px; display:grid; gap:14px; }
.story-static .story-stage { position:static; opacity:1; transform:none; }
.story-static .story-stage[data-from="0"] i { display:none; }  /* "scroll to live it" doesn't apply */

/* ── paper documents ─────────────────────────────────────────────────── */
.paper {
  background:
    repeating-linear-gradient(to right, transparent 0 47px, rgba(24,27,31,.03) 47px 48px),
    repeating-linear-gradient(to bottom, transparent 0 47px, rgba(24,27,31,.03) 47px 48px),
    var(--paper);
  color:var(--ink); border-radius:6px; box-shadow:var(--shadow);
}
.paper h2, .paper h3 { color:var(--ink); text-shadow:none; }
.paper a { color:var(--p-accent); }
.paper .btn-primary { background:var(--p-accent); color:#fdf9ef; }
.paper .btn-primary:hover { background:#a06e10; }

/* work order (verbatim artifact) */
.workorder { border-left:4px solid var(--p-accent); padding:18px 20px; font:400 12.5px/1.65 var(--mono); color:var(--ink-dim); }
.workorder .wo-title { color:var(--ink); font-weight:500; font-size:13px; margin-bottom:10px; }
.workorder .wo-kv { display:flex; justify-content:space-between; gap:10px; border-bottom:1px dashed var(--p-line); padding:4px 0; }
.workorder .wo-kv span:last-child { color:var(--ink); text-align:right; }
.workorder .wo-quote { margin:12px 0 0; color:var(--ink-dim); }
.workorder .wo-quote b { color:var(--ink); font-weight:500; }
.workorder .wo-foot { margin-top:12px; padding-top:10px; border-top:1px solid var(--p-line); font-size:11.5px; color:var(--p-accent); }

/* flow (signal → action) */
.flow { display:grid; grid-template-columns:1fr; gap:18px; margin-bottom:28px; }
@media (min-width:880px){ .flow { grid-template-columns:1fr 1.3fr 1fr; gap:22px; align-items:start; } }
.flow-step { background:var(--panel); border:1px solid var(--hairline); border-radius:8px; padding:26px; }
.flow-step .stepno { font:500 12px/1 var(--mono); letter-spacing:.16em; color:var(--ember); margin-bottom:14px; }
.flow-step h3 { font-size:19px; margin:0 0 10px; }
.flow-step p { margin:0; color:var(--dust-dim); font-size:16px; }
.flow-step p b { color:var(--dust); }
.flow-cap { font-size:14px; color:var(--dust-dim); margin:10px 0 0; }
.guardrail { display:flex; gap:14px; align-items:flex-start; background:rgba(240,164,60,.08); border:1px solid var(--hairline); border-left:4px solid var(--ember); border-radius:8px; padding:18px 20px; }
.guardrail svg { flex:none; color:var(--ember); margin-top:2px; }
.guardrail p { margin:0; font-size:16px; color:var(--dust); }
.guardrail p b { color:var(--ember-strong); }
.agentchain { display:flex; flex-wrap:wrap; gap:10px 12px; align-items:stretch; margin-top:18px; }
.ac-step { display:flex; flex-direction:column; justify-content:center; gap:5px; flex:1; min-width:170px;
  background:rgba(15,18,22,.55); border:1px solid var(--hairline); border-radius:6px; padding:13px 16px; }
.ac-step b { font:500 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ember); font-weight:500; }
.ac-step span { font-size:14.5px; color:var(--dust-dim); }
.ac-sep { color:var(--dust-dim); font-size:15px; flex:none; align-self:center; }
.agentchain-cap { font-size:14px; color:var(--dust-dim); margin:10px 0 0; }
@media (max-width:760px){ .ac-sep { display:none; } .ac-step { min-width:44%; } }

/* ── evidence: the instrument wall ───────────────────────────────────── */
.wall { border:1px solid var(--hairline); border-radius:8px; overflow:hidden; background:rgba(15,18,22,.55); margin-bottom:26px; }
.wall-row { display:grid; grid-template-columns:1fr; border-bottom:1px solid var(--hairline); }
.wall-row:last-child { border-bottom:0; }
@media (min-width:880px){ .wall-row { grid-template-columns:230px 1fr 300px; } }
.wall-metric { padding:26px 26px 22px; border-bottom:1px dashed var(--hairline); }
.wall-body { padding:26px; }
.wall-tech { padding:26px; font:400 12.5px/1.7 var(--mono); color:var(--dust-dim); border-top:1px dashed var(--hairline); }
@media (min-width:880px){
  .wall-metric { border-bottom:0; border-right:1px solid var(--hairline); }
  .wall-tech { border-top:0; border-left:1px dashed var(--hairline); }
}
.wall-metric .m { font:500 34px/1.05 var(--display); color:var(--ember); }
.wall-metric .m small { font:500 13.5px var(--sans); color:var(--dust-dim); display:block; margin-top:4px; letter-spacing:0; }
.wall-body h3 { font-size:18px; margin:0 0 8px; }
.wall-body p { margin:0; font-size:16px; color:var(--dust-dim); }
.wall-body p b { color:var(--dust); }

.gates { display:grid; grid-template-columns:1fr; gap:0; border:1px dashed var(--hairline); border-radius:8px; overflow:hidden; margin-bottom:26px; }
@media (min-width:840px){ .gates { grid-template-columns:repeat(3,1fr); } }
.gate { padding:20px 22px; border-bottom:1px dashed var(--hairline); background:rgba(15,18,22,.55); }
.gate:last-child { border-bottom:0; }
@media (min-width:840px){
  .gate { border-bottom:0; border-right:1px dashed var(--hairline); }
  .gate:last-child { border-right:0; }
}
.gate .g-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.gate .g-name { font:500 13px/1.4 var(--mono); letter-spacing:.04em; color:var(--dust); }
.gate .g-stamp { font:500 10.5px/1 var(--mono); letter-spacing:.14em; padding:5px 8px; border-radius:3px; border:1px solid; }
.gate .g-stamp.pass { color:var(--ok-dark); border-color:var(--ok-dark); }
.gate .g-stamp.fail { color:var(--bad-dark); border-color:var(--bad-dark); }
.gate p { margin:0; font-size:14.5px; color:var(--dust-dim); }
.gate p b { color:var(--dust); }

.honest { display:flex; gap:14px; align-items:flex-start; background:rgba(240,164,60,.08); border:1px solid var(--hairline); border-left:4px solid var(--ember); border-radius:8px; padding:20px 22px; margin-bottom:20px; }
.honest svg { flex:none; color:var(--ember); margin-top:2px; }
.honest p { margin:0; font-size:16.5px; color:var(--dust); }
.honest p b { color:var(--ember-strong); }
.qa { background:var(--panel); border:1px solid var(--hairline); border-radius:8px; padding:22px 24px; }
.qa h3 { margin:0 0 8px; font-size:18px; }
.qa p { margin:0; font-size:16px; color:var(--dust-dim); }
.qa p b { color:var(--dust); }

/* ── demo ────────────────────────────────────────────────────────────── */
.demo-chip { display:inline-flex; align-items:center; gap:9px; margin-bottom:16px; font:500 12.5px/1.4 var(--mono); letter-spacing:.05em; color:var(--dust); background:var(--plate-2); border:1px solid var(--hairline); border-radius:999px; padding:8px 15px; }
.demo-chip .dot { width:8px; height:8px; border-radius:50%; background:var(--ok-dark); animation:pulse 2s ease-in-out infinite; flex:none; }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(87,192,126,.4);} 50%{ box-shadow:0 0 0 6px rgba(87,192,126,0);} }
@media (prefers-reduced-motion: reduce){ .demo-chip .dot { animation:none; } }
.demo-embed { border:1px solid var(--hairline); border-radius:8px; overflow:hidden; background:#0d1117; }
.demo-embed iframe { width:100%; height:clamp(520px, 70vh, 720px); border:0; display:block; background:#0d1117; }
.demo-caption { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-top:16px; }
.demo-caption p { margin:0; color:var(--dust-dim); font-size:15px; max-width:62ch; }
.demo-caption p b { color:var(--dust); }

/* ── report (paper) ──────────────────────────────────────────────────── */
.report-card { display:grid; grid-template-columns:1fr; gap:30px; align-items:center; padding:32px; }
@media (min-width:840px){ .report-card { grid-template-columns:1.1fr .9fr; gap:36px; padding:36px; } }
.report-card ul { margin:0 0 24px; padding-left:0; list-style:none; display:grid; gap:11px; }
.report-card li { display:flex; gap:10px; font-size:16px; color:var(--ink-dim); }
.report-card li svg { flex:none; color:var(--p-accent); margin-top:4px; }
.report-card .note { font-size:14px; color:var(--ink-dim); margin-top:14px; }
.report-thumb { border:1px solid var(--p-line); border-radius:8px; background:var(--paper-2); padding:18px 20px; font:400 12.5px/1.6 var(--mono); color:var(--ink-dim); }
.report-thumb .rt-title { font-weight:500; color:var(--ink); font-size:13.5px; margin-bottom:4px; }
.report-thumb .rt-bar { height:7px; border-radius:3px; background:#e7e2d4; margin:7px 0; overflow:hidden; }
.report-thumb .rt-bar i { display:block; height:100%; border-radius:3px; }
.report-thumb .rt-line { display:flex; justify-content:space-between; margin-top:8px; }

/* ── fits ────────────────────────────────────────────────────────────── */
.fit-band { margin:0 0 26px; }
.fit-band-media { position:relative; border-radius:8px; border:1px solid var(--hairline); overflow:hidden; }
.fit-band picture, .fit-band img { display:block; width:100%; height:auto; }
.fit-band video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s ease; }
.fit-band video.on { opacity:1; }
.fit-band figcaption { font:400 12.5px/1.6 var(--mono); color:var(--dust-dim); margin-top:10px; letter-spacing:.02em; }
.fit-grid { display:grid; grid-template-columns:1fr; border:1px solid var(--hairline); border-radius:8px; overflow:hidden; background:rgba(15,18,22,.55); }
@media (min-width:840px){ .fit-grid { grid-template-columns:1fr 1fr; } }
.fit { padding:26px; position:relative; border-bottom:1px solid var(--hairline); }
.fit:last-child { border-bottom:0; }
@media (min-width:840px){
  .fit { border-bottom:0; }
  .fit:nth-child(-n+2){ border-bottom:1px solid var(--hairline); }
  .fit:nth-child(odd){ border-right:1px solid var(--hairline); }
}
.fit .fico { position:absolute; top:22px; right:22px; color:var(--dust-dim); opacity:.75; }
.fit .fico .em { stroke:var(--ember); }
.fit .tag { font:500 11.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ember); margin-bottom:14px; }
.fit h3 { font-size:19px; margin:0 0 10px; }
.fit p { margin:0; color:var(--dust-dim); font-size:16px; }
.fit p b, .fit p i { color:var(--dust); }

/* ── founder ─────────────────────────────────────────────────────────── */
.founder { display:flex; gap:30px; align-items:flex-start; flex-wrap:wrap; background:var(--panel); border:1px solid var(--hairline); border-radius:8px; padding:30px; }
.founder > img { width:132px; height:132px; border-radius:8px; object-fit:cover; border:1px solid var(--hairline); }
.founder-body { flex:1; min-width:260px; }
.founder h3 { margin:0 0 2px; font-size:21px; }
.founder .role { color:var(--dust-dim); font-size:13px; margin:0 0 14px; font-family:var(--mono); }
.founder p { margin:0 0 12px; color:var(--dust-dim); font-size:16.5px; max-width:66ch; }
.founder p b { color:var(--dust); }
.founder-links { display:flex; gap:18px; font-size:14.5px; }
.founder-robot { flex:0 1 250px; min-width:220px; margin:0; }
.founder-robot img { display:block; width:100%; height:auto; border-radius:8px; border:1px solid var(--hairline); }
.founder-robot figcaption { font:400 11.5px/1.6 var(--mono); color:var(--dust-dim); margin-top:8px; letter-spacing:.03em; }

/* ── the ask: one paper sheet ────────────────────────────────────────── */
.ask-doc { max-width:820px; padding:44px 46px 40px; }
@media (max-width:720px){ .ask-doc { padding:30px 24px 28px; } }
.ask-doc .doc-head { display:flex; justify-content:space-between; gap:12px; align-items:baseline; border-bottom:2px solid var(--ink); padding-bottom:12px; margin-bottom:8px; }
.ask-doc .doc-head .db { font:500 13px/1 var(--display); letter-spacing:.4em; color:var(--ink); }
.ask-doc .doc-head .db i { font-style:normal; color:var(--p-accent); }
.ask-doc .doc-head .dm { font:500 11px/1.4 var(--mono); letter-spacing:.12em; color:var(--ink-dim); text-transform:uppercase; }
.steps { counter-reset:step; display:grid; gap:0; margin:0 0 8px; }
.step { position:relative; padding:20px 0 20px 60px; border-bottom:1px dashed var(--p-line); }
.step::before {
  counter-increment:step; content:counter(step, decimal-leading-zero);
  position:absolute; left:0; top:22px;
  font:500 13px/1 var(--mono); letter-spacing:.06em; color:var(--p-accent);
  border:1px solid var(--p-line); border-radius:4px; padding:8px 9px; background:var(--paper-2);
}
.step h3 { font-size:18px; margin:0 0 6px; }
.step p { margin:0; color:var(--ink-dim); font-size:16px; }
.step p b { color:var(--ink); }
.spec { padding:24px 0 6px; border-bottom:1px dashed var(--p-line); }
.spec h3 { font-size:18px; margin:0 0 14px; }
.spec ol { margin:0 0 14px; padding-left:20px; color:var(--ink-dim); font-size:16px; display:grid; gap:7px; }
.spec ol b { color:var(--ink); }
.spec .spec-link { font-size:15.5px; padding-bottom:14px; margin:0; }
.aicard { margin:24px 0 4px; padding:18px 20px 16px; background:var(--paper-2);
  border:1px solid var(--p-line); border-left:4px solid var(--p-accent); border-radius:4px; }
.aicard .ai-stamp { font:500 10.5px/1 var(--mono); letter-spacing:.14em; color:var(--p-accent); text-transform:uppercase; margin-bottom:10px; }
.aicard h3 { font-size:17px; margin:0 0 8px; }
.aicard p { margin:0; color:var(--ink-dim); font-size:15px; line-height:1.65; }
.aicard b { color:var(--ink); }
.handling { padding:22px 0 8px; }
.handling h3 { font-size:16.5px; margin:0 0 10px; }
.handling ul { margin:0; padding-left:18px; color:var(--ink-dim); font-size:15px; display:grid; gap:7px; }
.handling b { color:var(--ink); }
.ask-cta { padding-top:26px; margin-top:8px; border-top:2px solid var(--ink); }
.ask-cta .mail { font:500 clamp(22px,3.4vw,34px)/1.25 var(--display); margin:0; }
.ask-cta .mail a { color:var(--p-accent); text-decoration:none; border-bottom:2px solid var(--p-accent); }
.ask-cta p { color:var(--ink-dim); font-size:15.5px; margin:10px 0 0; }

/* ── footer ──────────────────────────────────────────────────────────── */
footer { background:rgba(15,18,22,.85); color:var(--dust-dim); border-top:1px solid var(--hairline); padding:0 0 44px; font-size:14.5px; }
footer .fwave { display:block; width:100%; height:44px; color:var(--hairline); }
footer .fwave path { stroke:currentColor; fill:none; }
footer .fwave .fw-em { stroke:var(--ember); opacity:.7; }
footer .frow { display:flex; flex-wrap:wrap; gap:18px 30px; justify-content:space-between; align-items:baseline; padding-top:8px; }
footer a { color:var(--dust-dim); }
footer a:hover { color:var(--dust); }
footer .fbrand { font:600 13px/1 var(--display); letter-spacing:.4em; color:var(--dust); }
footer .fbrand i { font-style:normal; color:var(--ember); }

/* ── Fig. 01, the organ: engraved plate + afferent overlay ───────────── */
#organ .organ-head { text-align:center; }
#organ .organ-head .eyebrow { justify-content:center; }
#organ h2 { margin:0 auto 14px; max-width:none; text-wrap:balance; }
#organ h2 em { font-style:normal; color:var(--ember); }
.organ-lead { color:var(--dust-dim); font-size:clamp(17px, 2vw, 19.5px); max-width:60ch;
  margin:0 auto; text-align:center; text-shadow:0 1px 12px rgba(15,18,22,.9); }
.organ-lead b { color:var(--dust); font-weight:500; }
.fig-frame { position:relative; max-width:1000px; margin:30px auto 0; padding:0 22px; }
/* the matte is owned: the figure is mounted like the spec plate-wall —
   hairline frame, corner screws — so its dark field reads as furniture.
   (Asset blacks are baked to var(--plate) via channel-max; main's z-index
   isolates any live mix-blend from the shader, so baking is the honest fix.) */
.fig-stage { position:relative; aspect-ratio:1376/768; background:var(--plate); border:1px solid var(--hairline); border-radius:8px; overflow:hidden; }
.fig-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  user-select:none; -webkit-user-drag:none; }
#afferent { position:absolute; inset:0; width:100%; height:100%; display:block; }
.plate-label { position:absolute; left:46px; top:20px; z-index:2; font:400 11.5px/1.9 var(--mono);
  letter-spacing:.12em; color:var(--dust-dim); text-shadow:0 1px 8px rgba(15,18,22,.9); }
.plate-label b { color:var(--dust); font-weight:500; }
.organ-state { text-align:center; font:400 11.5px/1.7 var(--mono); letter-spacing:.18em;
  color:var(--dust-dim); text-transform:uppercase; margin:24px 0 0; }
.organ-state b { color:var(--dust); font-weight:500; }
.organ-state .dot { display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--ok-dark); margin-right:9px; vertical-align:1px; transition:background .4s ease; }
.organ-state.surprised .dot { background:var(--ember); }
.organ-state.surprised b { color:var(--ember); }
@media (max-width:760px){
  .plate-label { position:static; text-align:center; margin-bottom:18px; padding:0 16px; }
  /* art-directed mobile plate: left third cropped away (organ-plate-m).
     The crop removes the open lateral field the ganglion lives in, so the
     stage letterboxes a band below the image (asset blacks are baked to
     var(--plate); the seam is invisible) and the overlay perches the
     ganglion there — fibers converge downward into clear field.
     .7544 = 768/1018, the mobile image ratio. The plate goes full-bleed
     here: on a phone every pixel of width goes to the drawing. */
  .fig-frame { padding:0; }
  .fig-stage { aspect-ratio:auto; height:calc(100vw*.7544 + clamp(130px, 24vw, 190px));
    border-left:0; border-right:0; border-radius:0; }
  .fig-stage img { object-fit:contain; object-position:top center; }
}
@media (max-width:480px){
  /* the status line is wider than a phone at .18em tracking */
  .organ-state { font-size:10.5px; letter-spacing:.12em; padding:0 16px; }
  /* narrow the legend so the sense list wraps 2+2, not 3 + orphaned d.
     (292 = 260 of content + the 2×16 side padding, border-box) */
  .plate-label { max-width:292px; margin-left:auto; margin-right:auto; }
}

/* ── print ───────────────────────────────────────────────────────────── */
@media print {
  .js .reveal { opacity:1 !important; transform:none !important; }
  nav.top, #plate, .plate-fallback, .veil, .hero-scrim, .voice, .demo-embed, .story-track, #afferent, .organ-state { display:none !important; }
  header.hero { min-height:auto; }
  body, footer { background:#fff !important; color:#000 !important; }
}