/* ================================================================
   REQPROOF.COM — V8 "SIGNAL FIELD" DESIGN SYSTEM
   paper ground · near-black ink · one signal accent · living field
   Pages import ONLY this stylesheet. Fonts are self-hosted below —
   no external font or CSS request anywhere.
   Companion runtime: /assets/field.js (the living field engine).
   ================================================================ */

/* ---------- fonts (self-hosted, latin subset) ----------
   Space Grotesk is a variable file served for all four weights —
   the same file Google serves per-weight to woff2-capable browsers.
   IBM Plex Mono is four static faces. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/space-grotesk-var.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/space-grotesk-var.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/space-grotesk-var.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/space-grotesk-var.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400i.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body,h1,h2,h3,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul[class],ol[class]{padding:0;list-style:none}
img,svg,canvas{max-width:100%;display:block}
button{font:inherit;color:inherit}

/* ---------- tokens ---------- */
:root{
  --paper:#FAF8F2;          /* the page ground */
  --card:#FFFDF7;           /* solid document backing */
  --ink:#15140F;            /* near-black ink */
  --ink-60:rgba(21,20,15,.62);
  --ink-40:rgba(21,20,15,.42);
  --hair:rgba(21,20,15,.13);        /* hairline rule */
  --hair-strong:rgba(21,20,15,.32); /* strong hairline */
  --signal:#2337E0;         /* THE accent. one per page, spent well */
  --fail:#B8402E;           /* FAIL / red semantics only */
  --pass:#1D7A44;           /* pass / green semantics only */
  --bandbg:#14120C;         /* the one dark band's ground */
  --band-tx:#EDE8DA;        /* band text */
  --band-dim:rgba(237,232,218,.74);
  --band-hair:rgba(237,232,218,.17);
  --band-blue:#8D9BFF;      /* the signal accent, on the dark ground */
  --wash:rgba(250,248,242,.62);     /* translucent wash over the field */
  --sans:'Space Grotesk',-apple-system,'Segoe UI',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1140px;
}

/* ---------- base ---------- */
html,body{background:var(--paper)}
body{
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--signal);color:var(--paper)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--signal)}
em{font-style:normal;color:var(--signal)}
sup.dg{font-size:.72em;color:var(--ink-40);font-family:var(--mono)}

/* ---------- the living field: ONE world behind the whole document ----------
   field.js creates this layer (div.field > canvas#field-dither) and
   stretches the canvas over the document. Content sits above it at z-index 1. */
.field{position:absolute;top:0;left:0;width:100%;z-index:0;pointer-events:none}
.field canvas{
  width:100%;height:0;  /* JS stretches it over the document */
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  pointer-events:none;
}
header.top,main,footer.foot{position:relative;z-index:1}

/* corpus overlays: finding + survey brackets (created by field.js).
   hairline rectangles absolutely positioned inside the .field layer, so
   their coordinates are document coordinates. 1px borders, ink on paper,
   pale on the dark band (the .dark variant). */
.field .fbr,.field .sbr{position:absolute;pointer-events:none;opacity:0}
.field .fbr{border:1px solid rgba(21,20,15,.5);transition:opacity .4s ease}
.field .fbr.dark{border-color:rgba(237,232,218,.45)}
.field .fbr.on{opacity:1}
.field .sbr{border:1px solid rgba(21,20,15,.22);transition:opacity 1s ease}
.field .sbr.dark{border-color:rgba(237,232,218,.26)}
.field .sbr.on{opacity:1}
.field .sbr .tag{position:absolute;top:-1.3rem;left:-1px;font:400 .56rem/1.4 var(--mono);letter-spacing:.08em;color:var(--ink-40);white-space:nowrap}
.field .sbr.dark .tag{color:rgba(237,232,218,.4)}
@media (prefers-reduced-motion: reduce){.field .fbr,.field .sbr{display:none}}
.qa .field .fbr,.qa .field .sbr{display:none !important}

/* colony fate chip (created by field.js on the first paint) */
.colony-hud{position:fixed;left:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:6;max-width:min(76vw,340px);font:500 .66rem/1.45 var(--mono);letter-spacing:.05em;color:var(--ink-60);background:var(--wash);border:1px solid var(--hair-strong);padding:.42rem .7rem;pointer-events:none;opacity:0;transition:opacity .45s ease}
.colony-hud.on{opacity:1}
.colony-hud.gone{color:var(--fail)}
@media (max-width:560px){.colony-hud{left:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));font-size:.6rem;padding:.34rem .55rem;max-width:70vw}}
@media (prefers-reduced-motion: reduce){.colony-hud{display:none}}
.qa .colony-hud{display:none !important}

/* ---------- layout primitives ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:clamp(20px,4vw,48px)}
.sec{padding:clamp(4rem,9vw,7rem) 0}
h1{font-weight:700;font-size:clamp(2.35rem,5.6vw,4.35rem);line-height:1.02;letter-spacing:-.03em}
h2{font-weight:600;font-size:clamp(1.85rem,4vw,2.9rem);line-height:1.06;letter-spacing:-.02em;margin-bottom:1.1rem;max-width:840px}
.lede{font-size:clamp(1.02rem,1.5vw,1.16rem);max-width:660px;color:var(--ink)}
.lede b{font-weight:600}
.sec-meta{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.chip-ch{font:500 .68rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-60);border:1px solid var(--hair-strong);padding:.38rem .7rem;background:var(--paper)}
.chip-ch b{color:var(--signal);font-weight:600}
.sec-fig{font:400 .66rem/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-60)}
.fine{font:400 .72rem/1.7 var(--mono);color:var(--ink-60);max-width:720px}
.fine a{color:var(--ink-60)}
.sec-fineprint{margin-top:2.2rem;padding:1rem 1rem .85rem;border-top:1px solid var(--hair);background:var(--wash);width:fit-content}

/* kicker: the mono eyebrow with the signal tick */
.kicker{font:500 .68rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-60);margin-bottom:1.4rem;display:flex;align-items:center;gap:.6rem}
.kicker::before{content:"";width:22px;height:1px;background:var(--signal)}

/* big numbers (hero / band counters) */
.hn{min-width:0}
.hn-n{display:block;font:600 clamp(1.5rem,2.6vw,2.1rem)/1 var(--sans);letter-spacing:-.02em}
.hn-l{display:block;font:400 .62rem/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60);margin-top:.35rem}

/* ---------- reveal system (field.js drives .inview) ---------- */
.js .rvl{opacity:0;transform:translateY(10px);transition:opacity .55s ease-out,transform .55s ease-out;transition-delay:var(--rd,0s)}
.js .rvl.inview{opacity:1;transform:none}
.js .draw path{stroke-dasharray:1;stroke-dashoffset:1}
.js .inview .draw path{stroke-dashoffset:0;transition:stroke-dashoffset .55s ease-out;transition-delay:var(--d,0s)}

/* ---------- header ---------- */
header.top{border-bottom:1px solid var(--hair);background:var(--wash)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.85rem}
.wordmark{font:700 1.25rem/1 var(--sans);letter-spacing:-.02em}
a.wordmark{text-decoration:none}
a.wordmark:hover{color:inherit}
.wordmark i{font-style:normal;color:var(--signal)}
.wordmark small{display:block;font:400 .58rem/1.4 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-40);margin-top:.28rem}
.top-nav{display:flex;align-items:center;gap:1.3rem}
.top-nav a{font:500 .78rem/1 var(--mono);letter-spacing:.06em;text-decoration:none;white-space:nowrap}
.top-nav a[aria-current="page"]{color:var(--signal)}
.top-nav a.ext:hover{text-decoration:underline}
@media (max-width:1020px){.top-in{flex-wrap:wrap}.top-nav{flex-wrap:wrap;row-gap:.55rem}}
@media (max-width:700px){.top-nav .nl{display:none}}  /* page links live in the footer on phones */
@media (max-width:560px){.wordmark small{display:none}.top-nav{gap:.8rem}.top-nav .btn-sm{padding:.7rem .9rem}}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:.85rem 1.45rem;border:1px solid var(--ink);font:600 .95rem/1 var(--sans);text-decoration:none;transition:background .2s,border-color .2s,color .2s}
button.btn{cursor:pointer;background:transparent}
.btn-primary,button.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--signal);border-color:var(--signal);color:#fff}
.btn-ghost:hover{border-color:var(--signal);color:var(--signal)}
.btn-sm{padding:.55rem .9rem;font-size:.8rem}
.btn[disabled]{opacity:.55;cursor:default;pointer-events:none}
.cta-row{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.8rem;align-items:center}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(3.6rem,8vw,6.2rem) 0 clamp(3.2rem,7vw,5rem)}
.hero .wrap{position:relative;z-index:1}
.hero-copy{max-width:820px}
.hero-sub{margin-top:1.35rem;font-size:clamp(1.02rem,1.5vw,1.18rem);max-width:36em;color:var(--ink)}
.hero-sub b{font-weight:600}

/* ---------- the finding-record card (acard) ---------- */
.acard{background:var(--card);border:1px solid var(--ink)}
.acard-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.55rem .95rem;border-bottom:1px solid var(--hair-strong);font:500 .64rem/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-60)}
.acard-body{padding:1.05rem 1.15rem}
.acard-foot{display:flex;justify-content:space-between;gap:.6rem 1.4rem;flex-wrap:wrap;padding:.6rem .95rem;border-top:1px solid var(--hair-strong);font:400 .66rem/1.6 var(--mono);color:var(--ink-60)}
.chip{display:inline-block;border:1px solid;padding:.2rem .55rem;font:600 .6rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.chip-fail{color:var(--fail)}
.chip-pass{color:var(--pass)}
.chip-ink{color:var(--ink-60);border-color:var(--hair-strong)}
.t-fail{color:var(--fail);font-weight:600}
.t-pass{color:var(--pass);font-weight:600}

/* ---------- data strips ---------- */
.strip{border-top:1px solid var(--hair-strong);border-bottom:1px solid var(--hair-strong);background:var(--wash)}
.strip-in{display:flex;flex-wrap:wrap;gap:.45rem 2.4rem;padding:.78rem clamp(20px,4vw,48px);max-width:var(--maxw);margin:0 auto;font:500 .66rem/1.7 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60)}
.strip-in b{color:var(--ink);font-weight:600}
.strip-in a{text-decoration:none;color:var(--ink-60)}
.strip-in a:hover{color:var(--signal)}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pass);margin-right:.45rem;vertical-align:1px;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- the promise chain ---------- */
.chain{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr) 64px minmax(0,1fr);gap:.6rem;align-items:stretch;margin-top:2.6rem}
.chain-node{border:1px solid var(--ink);background:var(--card);padding:1.15rem 1.2rem 1.25rem;display:flex;flex-direction:column;gap:.7rem}
.cn-k{font:600 .62rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-60)}
.cn-k b{color:var(--signal)}
.cn-quote{font:500 clamp(1rem,1.5vw,1.14rem)/1.4 var(--sans);letter-spacing:-.01em}
.cn-sub{font:400 .72rem/1.65 var(--mono);color:var(--ink-40)}
.cn-list{display:flex;flex-direction:column;gap:.35rem;font:400 .74rem/1.55 var(--mono);color:var(--ink-60);margin-top:auto}
.cn-list li::before{content:"✓";margin-right:.55rem;color:var(--pass)}
.chain-arrow{display:flex;align-items:center;justify-content:center}
.chain-arrow svg{width:56px;height:26px;overflow:visible}
.chain-arrow path{fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.js .chain .chain-node,.js .chain .chain-arrow{opacity:0;transform:translateY(10px);transition:opacity .5s ease-out,transform .5s ease-out}
.js .chain.inview .chain-node,.js .chain.inview .chain-arrow{opacity:1;transform:none}
.js .chain.inview >*:nth-child(2){transition-delay:.22s}
.js .chain.inview >*:nth-child(3){transition-delay:.32s}
.js .chain.inview >*:nth-child(4){transition-delay:.54s}
.js .chain.inview >*:nth-child(5){transition-delay:.64s}
.chain-notes{display:grid;grid-template-columns:1fr 1fr;gap:1rem 3rem;margin-top:1.7rem;max-width:900px}
.chain-notes p{font:500 .9rem/1.55 var(--sans);color:var(--ink-60)}
.chain-notes p span{color:var(--signal);font-family:var(--mono);font-size:.7rem;margin-right:.5rem}

/* ---------- the machine (autoplay stage frame) ---------- */
.machine{border:1px solid var(--hair-strong);background:var(--wash);padding:clamp(1.1rem,3vw,2.2rem);margin-top:2.4rem}
.m-top{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font:500 .62rem/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-40);margin-bottom:1.2rem}
.m-hint{display:none}
.js-machine .m-hint{display:inline}
.m-viewport{position:relative}
.m-frame{position:relative;width:min(680px,100%);margin:0 auto}
.m-stage{position:relative;margin:0 0 56px;--lp:1}
.m-stage:last-child{margin-bottom:0}
.js-machine .m-frame{min-height:560px}
.js-machine .m-stage{position:absolute;inset:0;margin:0;opacity:0;pointer-events:none;display:flex;flex-direction:column;justify-content:center;--lp:0;will-change:opacity,transform}
.js-machine .m-stage.lead{position:relative;min-height:inherit}
@media (max-width:620px){.js-machine .m-frame{min-height:660px}}
@media (max-width:430px){.js-machine .m-frame{min-height:730px}}
.m-eyebrow{font:500 .64rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-60);margin-bottom:.8rem}
.m-eyebrow .num{color:var(--signal);font-weight:600}
.m-caption{margin-top:1.05rem;text-align:center;font:500 clamp(.92rem,1.6vw,1.08rem)/1.5 var(--sans)}
.m-caption span{font:600 .68rem var(--mono);color:var(--signal);margin-right:.55rem;vertical-align:1px}

/* choreography primitives — pure function of --lp */
.rise{--v:clamp(0, calc((var(--lp, 0) - var(--d, 0)) * var(--k, 4)), 1);opacity:var(--v);transform:translateY(calc((1 - var(--v)) * 12px))}
.pop{--v:clamp(0, calc((var(--lp, 0) - var(--d, 0)) * var(--k, 7)), 1);opacity:var(--v);transform:rotate(-2deg) scale(calc(1.35 - .35 * var(--v)))}

/* machine stage internals */
.runrow{display:flex;align-items:baseline;gap:.6rem;font:400 .8rem/2 var(--mono)}
.runrow .rr-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.runrow i{flex:1;min-width:1.2rem;border-bottom:1px dotted var(--hair-strong);transform:translateY(-5px)}
.rr-pass{color:var(--pass)}
.rr-fail{color:var(--fail);font-weight:600;letter-spacing:.08em}
.rr-hot .rr-n{font-weight:600}
.rr-detail{margin-top:.7rem;border-left:2px solid var(--fail);padding:.5rem .85rem;font:400 .74rem/1.65 var(--mono);color:var(--ink)}
.rr-detail span{color:var(--ink-40);display:block;margin-top:.3rem}
.req-clause{font:500 clamp(1.05rem,2vw,1.3rem)/1.45 var(--sans);letter-spacing:-.01em}
.req-clause b{color:var(--ink);font-weight:600}
.crit{display:flex;gap:.65rem;align-items:baseline;font:400 .78rem/1.9 var(--mono);color:var(--ink-60)}
.crit .ok{color:var(--pass)}
.crit .bad{color:var(--fail);font-weight:600}
.crit-bad{color:var(--ink)}
.crit-bad b{color:var(--fail)}
.crit-list{margin-top:1rem;display:flex;flex-direction:column;gap:.15rem}
.sev-grade{font:600 clamp(1.2rem,2.4vw,1.6rem)/1.3 var(--sans);letter-spacing:-.015em;margin-bottom:.9rem}
.sev-grade .t-fail{font-weight:600}
.sev-row{display:flex;gap:.7rem;align-items:baseline;font:400 .78rem/1.8 var(--mono);color:var(--ink-60)}
.sev-row::before{content:"—";color:var(--ink-40)}
.swap{display:inline-grid;vertical-align:baseline}
.swap>span{grid-area:1/1;white-space:nowrap}
.swap .a{opacity:calc(1 - var(--vf, 0))}
.swap .b{opacity:var(--vf, 0)}
.st-fix .acard{--vf:clamp(0, calc((var(--lp, 0) - .46) * 6), 1)}
.fix-note{font:400 .78rem/1.7 var(--mono);color:var(--ink-60);margin-bottom:.8rem}
.fix-note b{color:var(--ink);font-weight:600}
.relrow{display:flex;align-items:flex-start;margin-top:1.6rem}
.relseg{flex:1;height:0;border-top:1px solid var(--hair-strong);margin-top:5px}
.reltick{display:flex;flex-direction:column;align-items:center;gap:.4rem;font:400 .6rem/1 var(--mono);color:var(--ink-60);letter-spacing:.08em}
.reltick i{width:9px;height:9px;border-radius:50%;background:var(--ink);display:block}
.reltick.inf i{background:var(--pass)}
.rel-label{margin-top:.9rem;font:400 .68rem/1.6 var(--mono);color:var(--ink-40)}
.stamp{display:inline-block;border:2px solid var(--ink);padding:.42rem .8rem;font:600 .66rem/1 var(--mono);letter-spacing:.22em;margin-top:1.2rem}
.corpus-line{font:500 .95rem/1.6 var(--sans)}

/* machine HUD */
.m-hud{display:none;align-items:center;justify-content:center;gap:.35rem;margin-top:1.5rem;position:relative}
.js-machine .m-hud{display:flex}
.m-dot{background:none;border:0;padding:19px 6px;cursor:pointer;display:block}
.m-dot .bar{display:block;width:42px;height:5px;background:var(--hair);position:relative;overflow:hidden;border-radius:2.5px}
.m-dot .fill{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left center;border-radius:2.5px}
.m-dot:hover .bar{background:var(--hair-strong)}
.m-dot[aria-current] .fill{background:var(--signal)}
.m-replay{position:absolute;right:0;top:50%;transform:translateY(-50%);border:1px solid var(--hair-strong);background:var(--paper);padding:.42rem .75rem;font:500 .68rem/1 var(--mono);letter-spacing:.1em;cursor:pointer;opacity:.55;transition:opacity .3s}
.m-replay:hover{opacity:1;border-color:var(--ink)}
.m-replay.show{opacity:1}
.m-toggle{position:absolute;left:0;top:50%;transform:translateY(-50%);border:1px solid var(--hair-strong);background:var(--paper);padding:.42rem .75rem;font:500 .68rem/1 var(--mono);letter-spacing:.1em;cursor:pointer;opacity:.7;transition:opacity .3s}
.m-toggle:hover{opacity:1;border-color:var(--ink)}
@media (max-width:620px){
  .m-replay{position:static;transform:none;margin-left:.6rem}
  .m-toggle{position:static;transform:none;margin-right:.6rem}
  .m-dot .bar{width:30px}
}

/* "view all five stages" — a stacked, static reading of the same stages */
.js-machine.m-all .m-frame{min-height:0}
.js-machine.m-all .m-stage{position:relative;inset:auto;margin:0 0 56px;justify-content:flex-start;opacity:1 !important;transform:none !important;pointer-events:auto !important;--lp:1 !important}
.js-machine.m-all .m-stage:last-child{margin-bottom:0}
.js-machine.m-all .m-dot,.js-machine.m-all .m-replay{display:none}
.js-machine.m-all .m-toggle{position:static;transform:none;opacity:1}
.js-machine.m-all .m-hint{visibility:hidden}

/* ---------- the checker (model line, check panels, MISS card) ---------- */
.model-line{font:500 clamp(1.25rem,2.6vw,1.8rem)/1.4 var(--sans);letter-spacing:-.015em;max-width:880px;margin-bottom:2.4rem}
.model-line em{color:var(--signal)}
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.4rem}
.check-panel{border:1px solid var(--ink);background:var(--card);padding:1.3rem 1.35rem 1.45rem}
.cp-k{font:600 .66rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.1rem;display:flex;align-items:center;gap:.6rem}
.cp-k::after{content:"";flex:1;border-top:1px solid var(--hair)}
.cp-row{display:grid;grid-template-columns:auto 1fr;gap:.7rem;padding:.5rem 0;border-bottom:1px dotted var(--hair);font-size:.9rem;line-height:1.5}
.cp-row:last-child{border-bottom:0}
.cp-row b{font:600 .72rem/1.7 var(--mono);letter-spacing:.06em;color:var(--ink-60);white-space:nowrap}
.cp-fine{margin-top:.9rem;font:400 .68rem/1.6 var(--mono);color:var(--ink-40)}
.check-notes{display:grid;grid-template-columns:1fr 1fr;gap:1rem 3rem;margin-bottom:2.6rem;max-width:980px}
.check-notes p{font:400 .85rem/1.6 var(--sans);color:var(--ink-60)}
.check-notes p b{color:var(--ink);font-weight:600}

/* MISS-001 centerpiece */
.miss{border:1px solid var(--ink);background:var(--card);box-shadow:6px 6px 0 0 rgba(21,20,15,.08)}
.miss .acard-head{background:rgba(184,64,46,.05)}
.miss-body{padding:1.3rem 1.35rem 1.5rem}
.miss-tl-scroll{overflow-x:auto;margin-bottom:1.4rem;padding-bottom:.2rem}
.miss-tl{display:flex;align-items:flex-start;min-width:520px;padding-top:1.8rem}
.mt-seg{flex:1;border-top:1px solid var(--hair-strong);margin-top:6px}
.mt-node{display:flex;flex-direction:column;align-items:center;gap:.45rem;font:400 .62rem/1.4 var(--mono);color:var(--ink-60);letter-spacing:.06em;position:relative;padding-top:0}
.mt-node i{width:11px;height:11px;border-radius:50%;background:var(--paper);border:1.6px solid var(--ink);display:block}
.mt-node.hot i{border-color:var(--fail);background:var(--fail)}
.mt-node.hot{color:var(--fail);font-weight:600}
.mt-note{position:absolute;top:-1.55rem;left:50%;transform:translateX(-50%);white-space:nowrap;font:400 .62rem/1 var(--mono);color:var(--fail)}
.miss-copy{font-size:.98rem;max-width:640px}
.miss-copy b{font-weight:600}
.miss-quote{margin:1.4rem 0 0;padding-left:1rem;border-left:2px solid var(--signal);font:500 1.02rem/1.55 var(--sans);color:var(--ink-60);max-width:520px}

/* ---------- the drama band (full-strength field zone) ----------
   mark the section [data-field-drama] — the field runs edge to edge there */
.drama{position:relative;min-height:46vh;display:flex;align-items:center;overflow:hidden;border-top:1px solid var(--hair-strong);border-bottom:0;padding:clamp(2.6rem,6vw,4rem) 0}
.drama .wrap{position:relative;z-index:1;width:100%}
.drama-k{font:500 .68rem/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-60);margin-bottom:2rem}
.drama-q{font-weight:700;font-size:clamp(2.7rem,10.5vw,7.8rem);line-height:1;letter-spacing:-.035em;max-width:12em}
.drama-q i{font-style:normal;color:var(--signal)}
.drama-cue{margin-top:2rem;font:500 .7rem/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60)}

/* ---------- the one dark band (palette inversion zone) ----------
   mark the section [data-field-band] — the shared field canvas paints the
   darkness (palette flips in the band's y-range); the CSS background is
   only a no-JS / no-canvas fallback. field.js adds .world to <html> when
   the canvas owns the band. */
.band{position:relative;background:var(--bandbg);color:var(--band-tx);overflow:hidden}
.world .band{background:transparent}
.band .wrap{position:relative;z-index:1}
.band .sec-inner{padding:clamp(4rem,8vw,6.5rem) 0}
.band .chip-ch{color:var(--band-dim);border-color:var(--band-hair);background:transparent}
.band .chip-ch b{color:var(--band-blue)}
.band .sec-fig{color:rgba(237,232,218,.4)}
.band h2{color:var(--band-tx)}
.band .lede{color:var(--band-dim)}
.band .lede b{color:var(--band-tx)}
.band a{color:var(--band-tx)}
.band a:hover{color:var(--band-blue)}
.band .fine{color:rgba(237,232,218,.7)}
.band .fine a{color:rgba(237,232,218,.85)}
.band sup.dg{color:rgba(237,232,218,.55)}

/* receipts ledger (dark-band table) */
.tscroll{overflow-x:auto;margin-top:2rem;border:1px solid var(--band-hair);background:rgba(20,18,12,.66)}
table.receipts{width:100%;border-collapse:collapse;min-width:760px}
.receipts th{font:600 .6rem/1.5 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--band-dim);text-align:left;padding:.75rem .9rem;border-bottom:1px solid var(--band-hair);background:rgba(237,232,218,.06)}
.receipts td{padding:.85rem .9rem;border-bottom:1px solid rgba(237,232,218,.09);font:400 .8rem/1.55 var(--mono);color:var(--band-dim);vertical-align:top;background:rgba(237,232,218,.045)}
.receipts tr:last-child td{border-bottom:0}
.receipts td.proj{color:var(--band-tx);font-weight:600}
.receipts td.proj small{display:block;font-weight:400;color:var(--band-dim);font-size:.66rem;margin-top:.25rem;letter-spacing:.04em}
.receipts .num{color:var(--band-tx)}
.receipts a{font-weight:600;text-decoration-color:rgba(237,232,218,.4)}
.st-live{color:#4FC583;white-space:nowrap}
.st-live::before{content:"●";margin-right:.45rem;animation:pulse 2.4s ease-in-out infinite}
.st-draft{color:rgba(237,232,218,.58);white-space:nowrap}
.st-draft::before{content:"○";margin-right:.45rem}
.band-counters{display:flex;gap:1.6rem 3.4rem;flex-wrap:wrap;margin-top:3rem;padding-top:1.8rem;border-top:1px solid var(--band-hair)}
.bc .hn-n{color:var(--band-tx)}
.bc .hn-l{color:var(--band-dim)}
.band-counters-note{margin-top:1.3rem;font:400 .68rem/1.7 var(--mono);color:rgba(237,232,218,.7)}

/* featured case-study strip — sits above the index table */
.case{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 2.6rem;align-items:end;border:1px solid var(--band-hair);background:rgba(237,232,218,.05);padding:1.25rem 1.35rem;margin-top:2.4rem}
.case-k{font:600 .62rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--band-blue);margin-bottom:.6rem}
.case-p{font-size:.95rem;line-height:1.62;color:var(--band-dim);max-width:600px}
.case-p b{color:var(--band-tx);font-weight:600}
.case-links{display:flex;flex-direction:column;gap:.55rem;font:500 .78rem/1.5 var(--mono);white-space:nowrap;padding-bottom:.1rem}
@media (max-width:700px){.case{grid-template-columns:1fr}.case-links{flex-direction:row;flex-wrap:wrap;gap:.4rem 1.6rem;white-space:normal}}

/* ---------- deliverable cards ---------- */
.dl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.4rem}
.dl-card{border:1px solid var(--ink);background:var(--card);padding:1.15rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.6rem}
.dl-num{font:600 .64rem/1 var(--mono);letter-spacing:.16em;color:var(--signal)}
.dl-card h3{font:600 1.02rem/1.35 var(--sans);letter-spacing:-.01em}
.dl-card p{font-size:.85rem;line-height:1.6;color:var(--ink-60)}
.dl-card p b{color:var(--ink);font-weight:600}

/* ---------- the framed portal render ---------- */
.portal{margin-top:2.6rem;border:1px solid var(--ink);background:var(--card);box-shadow:0 26px 60px -34px rgba(21,20,15,.35)}
.portal-bar{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;padding:.62rem 1rem;border-bottom:1px solid var(--hair-strong);background:rgba(21,20,15,.035);font:500 .7rem/1.5 var(--mono);color:var(--ink-60)}
.portal-bar .url{font-weight:600;color:var(--ink)}
.portal-bar .note{color:var(--ink-40);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;margin-left:auto}
.portal-doc{padding:clamp(1rem,3vw,1.8rem)}
.portal-h{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.portal-h h3{font:600 1.15rem/1.3 var(--sans)}
.portal-chips{display:flex;gap:.45rem;flex-wrap:wrap;font:400 .62rem/1.6 var(--mono);color:var(--ink-40)}
.portal-chips span{border:1px solid var(--hair);padding:.15rem .5rem;white-space:nowrap}
.pscroll{overflow-x:auto}
.pi{min-width:600px}
.pi-row{display:grid;grid-template-columns:5.4rem minmax(0,1.4fr) minmax(0,1fr) auto;gap:1rem;align-items:baseline;padding:.75rem .2rem;border-bottom:1px solid var(--hair);font:400 .78rem/1.55 var(--mono)}
.pi-row .sev{font-weight:600;font-size:.62rem;letter-spacing:.14em}
.pi-row .what{color:var(--ink);font-weight:500}
.pi-row .meta{color:var(--ink-40);font-size:.7rem}
.pi-row .res{white-space:nowrap;font-size:.7rem}
.pi-ghost{display:block;padding:.9rem .2rem .2rem;font:400 .74rem/1.6 var(--mono);color:var(--ink-40);text-decoration:none}
.pi-ghost:hover{color:var(--signal)}
.portal-cap{margin-top:1rem;font:400 .68rem/1.6 var(--mono);color:var(--ink-40)}

/* ---------- seat cards (personas) ---------- */
.seats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.4rem}
.seat{border:1px solid var(--ink);background:var(--card);padding:1.25rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.9rem}
.seat-k{font:600 .64rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-60)}
.seat-q{font:500 1.04rem/1.5 var(--sans);letter-spacing:-.01em;border-left:2px solid var(--signal);padding-left:.9rem}
.seat-a{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--hair)}
.seat-a b{display:block;font:600 .58rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-40);margin-bottom:.5rem}
.seat-a p{font-size:.86rem;line-height:1.6;color:var(--ink-60)}

/* ---------- close ---------- */
.close .category{font:500 clamp(1.3rem,2.8vw,1.95rem)/1.35 var(--sans);letter-spacing:-.018em;max-width:920px;margin:1.6rem 0 2.2rem}
.close .category em{color:var(--signal)}
.close-note{font:400 .9rem/1.7 var(--sans);color:var(--ink-60);max-width:560px;margin-top:1.3rem}

/* ---------- lead form (the scoping form, v8-styled) ----------
   a document: solid card backing, ink border, mono labels */
.lead-form{margin-top:1.8rem;max-width:600px;background:var(--card);border:1px solid var(--ink);padding:1.35rem 1.4rem 1.25rem}
.lead-form label{display:block;font:600 .62rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-60);margin-bottom:.45rem}
.lead-form input[type=email],.lead-form input[type=text]:not([aria-hidden]),.lead-form textarea{width:100%;border:1px solid var(--hair-strong);background:var(--paper);padding:.65rem .7rem;font:400 .88rem/1.5 var(--mono);color:var(--ink)}
.lead-form input:focus,.lead-form textarea:focus{outline:none;border-color:var(--signal)}
.lead-form textarea{resize:vertical;min-height:7.5rem}
.lead-form ::placeholder{color:var(--ink-40)}
.lf-row{margin-bottom:1rem}
.lf-actions{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center;margin-top:1.15rem}
.lf-note{margin-top:1rem;font:400 .7rem/1.7 var(--mono);color:var(--ink-60)}

/* ---------- title-block colophon (the ONE signature device per page) ---------- */
.colophon{margin-top:clamp(3rem,6vw,4.5rem)}
.tb{border:1px solid var(--ink);background:var(--card);box-shadow:inset 0 0 0 4px var(--card),inset 0 0 0 5px var(--hair-strong);display:grid;grid-template-columns:1fr 1.15fr 1.25fr}
.tb-cell{padding:1.15rem 1.25rem 1.2rem;border-left:1px solid var(--ink);min-width:0}
.tb-cell:first-child{border-left:0}
.tb-k{display:block;font:600 .58rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-40);margin-bottom:.65rem}
.tb-v{display:block;font:600 1.02rem/1.35 var(--sans);letter-spacing:-.01em}
.tb-s{display:block;font:400 .64rem/1.6 var(--mono);color:var(--ink-40);margin-top:.4rem}
.tb-sig{width:min(170px,80%);margin:0 0 .1rem}
.tb-sig svg{width:100%;height:auto;display:block}
.tb-sig path{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.js .inview .tb-sig path{transition-duration:.5s}
.js .inview .tb-sig path:nth-of-type(1){transition-delay:.3s}
.js .inview .tb-sig path:nth-of-type(2){transition-delay:.55s}
.js .inview .tb-sig path:nth-of-type(3){transition-delay:.8s}
.tb-fine{margin-top:.9rem;text-align:center;font:500 .6rem/1.8 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-60)}

/* ---------- footer ---------- */
footer.foot{border-top:1px solid var(--hair);padding:1.4rem 0 2rem;background:var(--wash)}
.foot-in{display:flex;justify-content:space-between;gap:.6rem 2rem;flex-wrap:wrap;font:400 .64rem/1.8 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60)}
.foot-in a{text-decoration:none;color:var(--ink-60)}
.foot-in a:hover{color:var(--signal)}
.foot-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--hair);font:400 .64rem/1.8 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60)}
.foot-nav a{text-decoration:none;color:var(--ink-60)}
.foot-nav a:hover{color:var(--signal)}
.foot-nav .copy{margin-left:auto;color:var(--ink-40)}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .dl-grid{grid-template-columns:repeat(2,1fr)}
  .seats{grid-template-columns:1fr;max-width:640px}
}
@media (max-width:860px){
  .chain{grid-template-columns:minmax(0,1fr);gap:.4rem;max-width:520px}
  .chain-arrow{height:52px}
  .chain-arrow svg{transform:rotate(90deg)}
  .chain-notes{grid-template-columns:1fr}
  .check-grid{grid-template-columns:1fr}
  .check-notes{grid-template-columns:1fr}
  .tb{grid-template-columns:1fr}
  .tb-cell{border-left:0;border-top:1px solid var(--ink)}
  .tb-cell:first-child{border-top:0}
}
@media (max-width:560px){
  .dl-grid{grid-template-columns:1fr}
}

/* ---------- reduced motion: finished states, no motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .rvl{opacity:1;transform:none;transition:none}
  .js .draw path,.js .inview .draw path{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .js .chain .chain-node,.js .chain .chain-arrow{opacity:1;transform:none;transition:none}
  .js .tb-sig path{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .live-dot,.st-live::before{animation:none}
  .m-replay,.m-toggle,.m-dot{display:none}
}

/* ---------- QA mode (#qa-final): everything at its finished state ---------- */
.qa .rvl{opacity:1 !important;transform:none !important;transition:none !important}
.qa .draw path{stroke-dasharray:none !important;stroke-dashoffset:0 !important;transition:none !important}
.qa .chain .chain-node,.qa .chain .chain-arrow{opacity:1 !important;transform:none !important;transition:none !important}
.qa .tb-sig path{stroke-dasharray:none !important;stroke-dashoffset:0 !important;transition:none !important}
.qa .live-dot,.qa .st-live::before{animation:none !important}
.qa .m-replay,.qa .m-toggle,.qa .m-dot{display:none !important}