:root{
--bg:#B7C0AE;--surface:#D6DCCD;--surface2:#9EA894;
--ink:#141A12;--body:#26301F;--muted:#4E5946;--ink-soft:#3F4A38;--line:#7E8975;
--accent:#E8462A;--accent-ink:#141A12;--ok:#1F6B3A;--warn:#9A6A00;--bad:#A3201A;
--font-display:'Bricolage Grotesque',Arial Black,Helvetica,sans-serif;
--font-body:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
--font-mono:'Martian Mono',Menlo,Consolas,monospace;
--fs-0:0.75rem;--fs-1:0.875rem;--fs-2:1rem;--fs-3:1.25rem;--fs-4:1.75rem;--fs-5:2.75rem;--fs-6:4.5rem;
--lh-tight:1.05;--lh-body:1.55;
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:72px;
--peg-grid:28px;--radius:6px;--radius-tag:6px 6px 14px 14px;--hole:8px;
--shadow-tag:0 2px 0 rgba(20,26,18,0.25),0 6px 12px -4px rgba(20,26,18,0.3);
--shadow-panel:inset 0 0 0 1px var(--line),0 1px 0 rgba(255,255,255,0.35);
--ls-display:-0.02em;--ls-label:0.08em;--ls-mono:0.02em;
--dur-drop:240ms;--ease-drop:cubic-bezier(0.5,0,0.75,0);
--peg:radial-gradient(circle at 3px 3px,rgba(20,26,18,0.10) 1.9px,rgba(20,26,18,0) 2px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background-color:var(--bg);background-image:var(--peg);background-size:var(--peg-grid) var(--peg-grid);
color:var(--body);font-family:var(--font-body);font-size:var(--fs-2);line-height:var(--lh-body);font-weight:400;
text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.02;mix-blend-mode:multiply;
background-image:url('data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22%3E%3Cfilter id=%22g%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22/%3E%3C/filter%3E%3Crect width=%22160%22 height=%22160%22 filter=%22url(%23g)%22/%3E%3C/svg%3E');
background-size:160px 160px}
img,svg,canvas{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:800;letter-spacing:var(--ls-display);line-height:var(--lh-tight);color:var(--ink)}
h1{font-size:clamp(2.5rem,7.2vw,4.5rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.6rem)}
h3{font-size:clamp(1.1rem,1.8vw,1.4rem);font-weight:500;line-height:1.25}
h4{font-size:var(--fs-2)}
p{margin:0 0 var(--space-4)}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--accent)}
code,kbd,samp,pre{font-family:var(--font-mono);font-size:.86em;letter-spacing:var(--ls-mono)}
code{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:1px 5px;color:var(--ink)}
pre{background:var(--ink);color:var(--surface);padding:var(--space-4);border-radius:var(--radius);overflow-x:auto}
ul,ol{margin:0 0 var(--space-4);padding-left:var(--space-5)}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mono{font-family:var(--font-mono);letter-spacing:var(--ls-mono);font-variant-numeric:tabular-nums}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--space-5)}
.wrap-narrow{width:100%;max-width:820px;margin:0 auto;padding:0 var(--space-5)}
.row{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}
.hr{height:1px;background:var(--line);border:0;margin:var(--space-7) 0}
.sec{padding:var(--space-8) 0;position:relative}
.sec--dense{padding:var(--space-6) 0}
.sec--panel{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.sec--rail{background-image:var(--peg);background-size:var(--peg-grid) var(--peg-grid)}
.sec-head{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:var(--space-6);align-items:end;margin-bottom:var(--space-7)}
.sec-head--tight{align-items:start;margin-bottom:var(--space-5)}
.sec-h{max-width:22ch}
.kicker{margin:0 0 var(--space-3);font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:var(--ls-label);
text-transform:uppercase;color:var(--ink-soft)}
.lede{margin:0;font-size:clamp(1.02rem,1.4vw,1.2rem);line-height:1.5;color:var(--ink-soft);max-width:62ch}
.small{font-size:var(--fs-1);color:var(--ink-soft)}
.rule{display:flex;align-items:center;gap:var(--space-3);margin:0 0 var(--space-5)}
.rule::after{content:"";flex:1;height:1px;background:var(--line)}
.rule span{font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-soft)}
.plate{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:space-between;
background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-3) var(--space-4);
box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(20,26,18,.18)}
.plate--flat{background:var(--surface);box-shadow:var(--shadow-panel)}
.stamp{font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-panel);padding:var(--space-5)}
.panel--flat{box-shadow:inset 0 0 0 1px var(--line)}
.tag-chip{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--accent);color:var(--accent-ink);
border-radius:var(--radius-tag);padding:2px 10px 4px;font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:var(--ls-mono)}
.topbar{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line);
box-shadow:inset 0 -1px 0 rgba(255,255,255,.4),0 2px 8px -6px rgba(20,26,18,.6)}
.topbar-in{display:flex;align-items:center;gap:var(--space-5);min-height:60px;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:var(--space-3);text-decoration:none;color:var(--ink)}
.brand svg{width:22px;height:22px}
.wordmark{font-family:var(--font-display);font-weight:800;font-size:1.16rem;letter-spacing:-0.01em}
.wordmark em{font-style:normal;color:var(--accent)}
.brand-sub{font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-soft)}
#mainnav{display:flex;align-items:center;gap:var(--space-5)}
.nav-links{display:flex;align-items:center;gap:var(--space-5);list-style:none;margin:0;padding:0}
.nav-links a{font-size:var(--fs-1);font-weight:600;text-decoration:none;color:var(--ink)}
.nav-links a:hover{color:var(--accent)}
.nav-cta{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--accent);color:var(--accent-ink);
border:1px solid var(--ink);border-radius:var(--radius);padding:7px 12px;font-size:var(--fs-1);font-weight:600;
text-decoration:none;box-shadow:0 2px 0 var(--ink)}
.nav-cta:hover{color:var(--accent-ink);transform:translateY(1px);box-shadow:0 1px 0 var(--ink)}
.burger{display:none;align-items:center;gap:var(--space-2);background:var(--surface);border:1px solid var(--ink);
border-radius:var(--radius);padding:8px 10px;font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:var(--ls-label);
text-transform:uppercase;color:var(--ink);cursor:pointer}
.cab{padding:var(--space-7) 0 var(--space-8);position:relative}
.cab-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);gap:var(--space-7);align-items:stretch}
.cab-door{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 22px -18px rgba(20,26,18,.9);padding:var(--space-6) var(--space-6) var(--space-7)}
.cab-door::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--surface2);border-bottom:1px solid var(--line)}
.cab-door--open{border-left:0;transform-origin:left center}
.cab-hinge{position:absolute;left:-7px;top:24px;width:8px;height:34px;background:var(--line);border:1px solid var(--ink);border-radius:2px}
.cab-hinge--b{top:auto;bottom:24px}
.cab-tag{margin-bottom:var(--space-4)}
.cab h1{margin-bottom:var(--space-4);max-width:16ch}
.cab-lede{font-size:clamp(1rem,1.35vw,1.14rem);color:var(--ink-soft);max-width:52ch;margin-bottom:var(--space-5)}
.serial{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px dashed var(--line)}
.serial div{font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-soft)}
.serial b{display:block;font-size:var(--fs-1);color:var(--ink);letter-spacing:var(--ls-mono)}
.cab-ctas{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin-top:var(--space-5)}
.lock{position:relative;background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:inset 0 1px 0 rgba(255,255,255,.35);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}
.lock::after{content:"";position:absolute;inset:10px;border:1px dashed rgba(20,26,18,.22);border-radius:calc(var(--radius) - 2px);pointer-events:none}
.lock-ring{display:flex;align-items:center;gap:var(--space-3)}
.lock-slot{width:34px;height:34px;border:2px solid var(--ink);border-radius:50%;position:relative;flex:0 0 auto}
.lock-slot::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:16px;background:var(--ink);transform:translateX(-50%);border-radius:2px}
.lock-slot::before{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;border:2px solid var(--ink);border-radius:50%;transform:translate(-50%,-50%)}
.lock-title{font-family:var(--font-display);font-weight:800;font-size:var(--fs-3);color:var(--ink);line-height:1.1}
.lock-sub{font-size:var(--fs-1);color:var(--ink-soft);margin:0}
.field{display:block;margin:0}
.field label{display:block;font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:var(--ls-label);
text-transform:uppercase;color:var(--ink-soft);margin-bottom:var(--space-2)}
.input,select,textarea{width:100%;font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:var(--ls-mono);
color:var(--ink);background:var(--surface);border:1px solid var(--ink);border-radius:var(--radius);
padding:11px 12px;box-shadow:inset 0 2px 4px -2px rgba(20,26,18,.35)}
.input::placeholder{color:var(--muted)}
.input:focus{outline:none;border-color:var(--accent);box-shadow:inset 0 2px 4px -2px rgba(20,26,18,.35),0 0 0 2px rgba(232,70,42,.35)}
.field-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:flex-end}
.field-row .field{flex:1 1 320px}
.hint{font-size:var(--fs-0);color:var(--ink-soft);font-family:var(--font-mono);letter-spacing:var(--ls-mono);margin:var(--space-2) 0 0}
.err{color:var(--bad);font-size:var(--fs-1);font-weight:600;margin:var(--space-2) 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-body);
font-size:var(--fs-1);font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--ink);
border-radius:var(--radius);padding:11px 18px;box-shadow:0 2px 0 var(--ink);cursor:pointer;text-decoration:none;
transition:transform .1s linear,box-shadow .1s linear,background-color .1s linear}
.btn:hover{color:var(--ink);transform:translateY(1px);box-shadow:0 1px 0 var(--ink)}
.btn:active{transform:translateY(2px);box-shadow:none}
.btn--primary{background:var(--accent);color:var(--accent-ink)}
.btn--ghost{background:transparent;border-style:dashed;box-shadow:none}
.btn--sm{padding:7px 12px;font-size:var(--fs-0)}
.btn--wide{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;box-shadow:none;transform:none;cursor:not-allowed}
.link-btn{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-decoration:underline;cursor:pointer}
.link-btn:hover{color:var(--accent)}
.rails{display:flex;flex-direction:column;gap:var(--space-7)}
.rail{border-top:2px solid var(--ink);padding-top:var(--space-5)}
.rail-head{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;justify-content:space-between;margin-bottom:var(--space-5)}
.rail-id{font-family:var(--font-mono);font-size:var(--fs-0);color:var(--ink);background:var(--surface2);
border:1px solid var(--line);border-radius:3px;padding:3px 8px;word-break:break-all}
.rail-note{font-size:var(--fs-1);color:var(--ink-soft);max-width:46ch;margin:0}
.hooks{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-5);align-items:flex-start;min-height:96px}
.hook{position:relative;width:210px;padding-top:20px}
.hook::before{content:"";position:absolute;top:0;left:14px;width:12px;height:12px;border:2px solid var(--line);
border-radius:50%;background:var(--surface2)}
.hook--empty::after{content:"";position:absolute;top:12px;left:19px;width:2px;height:8px;background:var(--line)}
.tag{position:relative;background:var(--accent);color:var(--accent-ink);border-radius:var(--radius-tag);
padding:var(--space-4) var(--space-4) var(--space-5);box-shadow:var(--shadow-tag);transform-origin:14px -14px}
.tag::before{content:"";position:absolute;top:6px;left:10px;width:var(--hole);height:var(--hole);border-radius:50%;
background:var(--bg);box-shadow:inset 0 1px 2px rgba(20,26,18,.5),0 1px 0 rgba(255,255,255,.3)}
.tag::after{content:"";position:absolute;top:-14px;left:13px;width:1px;height:14px;background:var(--ink);opacity:.55}
.tag-d{font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:var(--ls-mono);word-break:break-all;
display:block;margin:0 0 var(--space-2);padding-left:22px;color:var(--accent-ink)}
.tag-a{font-family:var(--font-display);font-weight:800;font-size:var(--fs-3);line-height:1.05;display:block}
.tag-m{font-family:var(--font-mono);font-size:var(--fs-0);display:block;color:var(--accent-ink);opacity:.85}
.tag-bar{position:absolute;right:0;top:0;bottom:0;width:8px;background:var(--bad);border-radius:0 14px 14px 0}
.tag--dead{background:var(--ink);color:var(--surface)}
.tag--dead .tag-d,.tag--dead .tag-m{color:var(--surface)}
.tag--dead::before{background:var(--bg)}
.tag--dead .tag-a{color:var(--surface)}
.tag--dead .tag-bar{background:var(--bad);border-radius:0 14px 14px 0}
.tag--clear{background:var(--surface);color:var(--ink-soft);border:1px dashed var(--line);box-shadow:none}
.tag--clear .tag-d,.tag--clear .tag-a,.tag--clear .tag-m{color:var(--ink-soft)}
.tag--clear::after{opacity:.25}
.tag-s{width:100%}
.tag-legend{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-6);font-size:var(--fs-0);
font-family:var(--font-mono);letter-spacing:var(--ls-mono);color:var(--ink-soft)}
.tag-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.sw-live{background:var(--accent)}
.sw-dead{background:var(--ink)}
.sw-clear{background:var(--surface);border:1px dashed var(--line)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5)}
.step{border-top:2px solid var(--ink);padding-top:var(--space-4);position:relative}
.step-num{font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:var(--ls-label);text-transform:uppercase;
color:var(--ink-soft);display:block;margin-bottom:var(--space-3)}
.step h3{margin-bottom:var(--space-2)}
.step p{margin:0;font-size:var(--fs-1);color:var(--ink-soft)}
.step::before{content:"";position:absolute;top:-7px;left:0;width:10px;height:10px;border:2px solid var(--ink);
border-radius:50%;background:var(--bg)}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
.pillar.grid-2{grid-column:span 2}
.pillar{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow-panel);padding:var(--space-5) var(--space-5) var(--space-6);position:relative}
.pillar::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--surface2);border-bottom:1px solid var(--line)}
.pillar-label{font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:var(--ls-label);text-transform:uppercase;
color:var(--ink-soft);display:block;margin:var(--space-2) 0 var(--space-3)}
.pillar h3{font-weight:500;font-family:var(--font-display);font-size:var(--fs-3);margin-bottom:var(--space-3)}
.pillar p{margin:0;font-size:var(--fs-1);color:var(--ink-soft)}
.tiers{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-5)}
.tier{display:grid;grid-template-columns:200px minmax(0,1fr) 160px;gap:var(--space-5);align-items:center;
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-4) var(--space-5);
box-shadow:var(--shadow-panel);width:var(--len,100%)}
.tier:nth-child(1){--len:62%}
.tier:nth-child(2){--len:78%}
.tier:nth-child(3){--len:90%}
.tier:nth-child(4){--len:100%}
.tier-rail{height:10px;background:var(--surface2);border:1px solid var(--line);border-radius:2px;position:relative}
.tier-rail::after{content:"";position:absolute;inset:2px 40% 2px 2px;background:var(--accent);border-radius:1px}
.tier:nth-child(4) .tier-rail::after{inset:2px 2px 2px 2px}
.tier:nth-child(2) .tier-rail::after{inset:2px 30% 2px 2px}
.tier:nth-child(3) .tier-rail::after{inset:2px 16% 2px 2px}
.tier-name{font-family:var(--font-display);font-weight:800;font-size:var(--fs-4);line-height:1;color:var(--ink);display:block}
.tier-who{font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:var(--ls-mono);color:var(--ink-soft);display:block;margin-top:6px}
.tier-line{margin:0;font-size:var(--fs-1);color:var(--ink-soft)}
.tier-key{font-family:var(--font-mono);font-size:var(--fs-0);text-align:right;color:var(--ink-soft)}
.tier--free .tier-rail::after{background:var(--ok)}
.clip{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow-panel);padding:var(--space-7) var(--space-6) var(--space-5);margin-top:var(--space-6)}
.clip-clip{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:132px;height:26px;
background:var(--surface2);border:1px solid var(--ink);border-radius:4px 4px 2px 2px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.clip-clip::after{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:52px;height:8px;
border:1px solid var(--ink);border-radius:4px;background:var(--surface)}
.clip-head{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:space-between;align-items:baseline;
border-bottom:2px solid var(--ink);padding-bottom:var(--space-3);margin-bottom:var(--space-2)}
.qa{border-bottom:1px dashed var(--line)}
.qa:last-child{border-bottom:0}
.qa summary{display:grid;grid-template-columns:44px minmax(0,1fr) 24px;gap:var(--space-3);align-items:baseline;
cursor:pointer;padding:var(--space-4) 0;font-family:var(--font-display);font-weight:500;font-size:var(--fs-2);
color:var(--ink);list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa-n{font-family:var(--font-mono);font-size:var(--fs-0);color:var(--ink-soft);letter-spacing:var(--ls-mono)}
.qa-x{font-family:var(--font-mono);text-align:right;color:var(--accent)}
.qa[open] .qa-x{color:var(--ink-soft)}
.qa-a{margin:0;padding:0 var(--space-5) var(--space-4) 44px;font-size:var(--fs-1);color:var(--ink-soft);max-width:74ch}
.about-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);gap:var(--space-7);align-items:start}
.about-copy{font-size:var(--fs-3);line-height:1.5;color:var(--ink);max-width:52ch}
.facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.facts li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:var(--space-3);padding:var(--space-3) 0;
border-bottom:1px dashed var(--line);font-size:var(--fs-1);color:var(--ink-soft)}
.facts li::before{content:"";width:9px;height:9px;margin-top:7px;border:2px solid var(--ink);border-radius:50%}
.facts b{color:var(--ink);font-weight:600}
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-1);background:var(--surface);
border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tbl caption{text-align:left;font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:var(--ls-label);
text-transform:uppercase;color:var(--ink-soft);padding-bottom:var(--space-2)}
.tbl th,.tbl td{text-align:left;padding:10px var(--space-4);border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:var(--ls-label);text-transform:uppercase;
color:var(--ink-soft);font-weight:400;background:var(--surface2)}
.tbl td.mono{word-break:break-all}
.tbl tr:last-child td{border-bottom:0}
.tok-band{background:var(--ink);color:var(--surface);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.tok-band-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:var(--space-5);align-items:center;
padding:var(--space-3) 0}
.ticker{overflow:hidden;white-space:nowrap;font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:var(--ls-mono)}
.ticker-in{display:inline-block;padding-right:var(--space-8)}
.tok-band .tok-label,.tok-band .tok-status{color:var(--surface);opacity:.9}
.well{display:flex;align-items:center;gap:var(--space-3);background:rgba(214,220,205,.08);border:1px solid rgba(214,220,205,.4);
border-radius:var(--radius);padding:6px 8px 6px 12px;min-width:0}
.tok-label{font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:var(--ls-label);text-transform:uppercase;
color:var(--ink-soft);white-space:nowrap}
.tok-copy{font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:var(--ls-mono);color:var(--ink);
background:var(--surface);border:1px solid var(--ink);border-radius:3px;padding:5px 9px;cursor:pointer;max-width:230px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tok-copy:hover{background:var(--accent);color:var(--accent-ink)}
.tok-status{font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:var(--ls-mono);color:var(--ok);white-space:nowrap}
.well--panel{background:var(--surface);border-color:var(--line)}
.well--panel .tok-label{color:var(--ink-soft)}
.disclaimer{font-size:var(--fs-0);color:var(--ink-soft);line-height:1.5;max-width:96ch;margin:0}
.foot{background:var(--ink);color:var(--surface);margin-top:var(--space-8);padding:var(--space-8) 0 var(--space-6)}
.foot a{color:var(--surface);text-decoration-color:rgba(214,220,205,.5)}
.foot a:hover{color:var(--accent)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:var(--space-6)}
.foot h4{color:var(--surface);font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:var(--ls-label);
text-transform:uppercase;margin-bottom:var(--space-3);font-weight:400}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:var(--space-2);font-size:var(--fs-1)}
.foot-mark{font-family:var(--font-display);font-weight:800;font-size:var(--fs-3);color:var(--surface);display:block;margin-bottom:var(--space-3)}
.foot-legal{border-top:1px solid rgba(214,220,205,.28);margin-top:var(--space-6);padding-top:var(--space-4);
display:flex;flex-wrap:wrap;gap:var(--space-5);justify-content:space-between;align-items:flex-start}
.foot-legal .disclaimer{color:rgba(214,220,205,.82)}
.app-head{border-bottom:1px solid var(--line);background:var(--surface);padding:var(--space-6) 0 var(--space-5)}
.app-head .sec-h{font-size:clamp(1.5rem,3vw,2.2rem);max-width:none}
.app-grid{display:grid;grid-template-columns:minmax(340px,0.85fr) minmax(0,1.15fr);gap:var(--space-6);align-items:start;
padding:var(--space-6) 0 var(--space-7)}
.scan-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow-panel);padding:var(--space-5);position:sticky;top:76px}
#scan-form{display:flex;flex-direction:column;gap:var(--space-3)}
#scan-input{font-size:var(--fs-1)}
#scan-status{font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:var(--ls-label);text-transform:uppercase;
color:var(--ink-soft);margin-top:var(--space-3);min-height:1.4em}
#scan-status[data-state="ok"]{color:var(--ok)}
#scan-status[data-state="bad"]{color:var(--bad)}
#scan-status[data-state="busy"]{color:var(--warn)}
.scan-tools{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:space-between;
margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px dashed var(--line)}
.scan-out{display:flex;flex-direction:column;gap:var(--space-5)}
#scan-out>.rail{background:transparent}
.scan-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--space-4);align-items:center;
padding:var(--space-3) 0;border-bottom:1px dashed var(--line);font-size:var(--fs-1)}
[data-revoke]{cursor:pointer}
[data-revoke]:hover{background:rgba(232,70,42,.08)}
.tray{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface2);padding:var(--space-4);margin-top:var(--space-5)}
.tray-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:space-between}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:var(--fs-0);
letter-spacing:var(--ls-mono);background:var(--surface);border:1px solid var(--line);border-radius:100px;padding:3px 10px;color:var(--ink-soft)}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--line)}
.chip--live::before{background:var(--ok)}
.chip--sample::before{background:var(--warn)}
.chip--bad::before{background:var(--bad)}
.chip--live{color:var(--ink)}
.hero-widget{background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-4)}
#hero-canvas{width:100%;height:180px;background:var(--surface);border:1px solid var(--line);border-radius:4px}
#hero-stat{font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:var(--ls-mono);color:var(--ink-soft);margin-top:var(--space-3)}
.util-wrap{padding:var(--space-6) 0 var(--space-8)}
#util-board{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(280px,0.8fr);gap:var(--space-5);align-items:start}
#util-board .panel-head{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:space-between;align-items:baseline;
border-bottom:2px solid var(--ink);padding-bottom:var(--space-2);margin-bottom:var(--space-4)}
#util-tiers,#util-caps{display:flex;flex-direction:column;gap:var(--space-3)}
.cap-row{display:grid;grid-template-columns:minmax(0,1fr) 74px;gap:var(--space-3);align-items:center;
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:9px var(--space-3)}
.cap-row b{display:block;font-size:var(--fs-1);color:var(--ink);font-weight:600}
.cap-row span{font-family:var(--font-mono);font-size:var(--fs-0);color:var(--ink-soft);letter-spacing:var(--ls-mono)}
.cap-bar{height:8px;background:var(--surface2);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.cap-bar i{display:block;height:100%;background:var(--accent)}
.cap-row[data-tier="hook"] .cap-bar i{background:var(--ok)}
#util-stat{font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:var(--ls-mono);color:var(--ink);
display:flex;flex-direction:column;gap:var(--space-2)}
#util-stat b{font-family:var(--font-display);font-weight:800;font-size:var(--fs-4);color:var(--ink);letter-spacing:var(--ls-display)}
#util-canvas{width:100%;height:140px;background:var(--surface);border:1px solid var(--line);border-radius:4px}
.chart{width:100%;min-height:150px}
.uplot{font-family:var(--font-mono);font-size:var(--fs-0);color:var(--ink-soft)}
.uplot .u-cursor-x,.uplot .u-cursor-y{border-right:1px dashed var(--line)!important;border-bottom:1px dashed var(--line)!important}
.u-legend{font-family:var(--font-mono);font-size:var(--fs-0);color:var(--ink-soft);margin-top:var(--space-2)}
.u-legend .u-marker{width:9px;height:9px}
.empty{font-family:var(--font-mono);font-size:var(--fs-1);color:var(--ink-soft);border:1px dashed var(--line);
border-radius:var(--radius);padding:var(--space-5);text-align:left}
.reveal{opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease}
.reveal.in{opacity:1;transform:none}
.tag.drop{animation:tagdrop var(--dur-drop) var(--ease-drop) forwards}
@keyframes tagdrop{
0%{transform:translateY(0) rotate(0deg)}
35%{transform:translateY(-6px) rotate(-3deg)}
100%{transform:translateY(190px) rotate(7deg);opacity:0}
}
@media (max-width:1080px){
.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
.pillar.grid-2{grid-column:span 2}
#util-board{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#util-board>.panel.util-stat-panel{grid-column:span 2}
.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
.tier{grid-template-columns:170px minmax(0,1fr);width:100%}
.tier-key{grid-column:2;text-align:left}
}
@media (max-width:900px){
.burger{display:inline-flex}
#mainnav{position:absolute;left:var(--space-5);right:var(--space-5);top:60px;background:var(--surface);
border:1px solid var(--ink);border-radius:var(--radius);box-shadow:0 12px 24px -18px rgba(20,26,18,.9);
padding:var(--space-4);display:none;flex-direction:column;align-items:stretch;gap:var(--space-4)}
#mainnav.open{display:flex}
.nav-links{flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.nav-cta{align-self:flex-start}
.cab-in{grid-template-columns:minmax(0,1fr)}
.cab-door--open{border-left:1px solid var(--line)}
.cab-hinge{display:none}
.sec-head{grid-template-columns:minmax(0,1fr);gap:var(--space-4);align-items:start}
.about-grid{grid-template-columns:minmax(0,1fr)}
.app-grid{grid-template-columns:minmax(0,1fr)}
.scan-card{position:static}
.foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.tok-band-in{grid-template-columns:minmax(0,1fr) auto}
.tok-band-in .ticker{display:none}
.qa-a{padding-left:0}
}
@media (max-width:640px){
:root{--space-8:48px;--space-7:32px}
.wrap,.wrap-narrow{padding:0 var(--space-4)}
body{font-size:var(--fs-1)}
h1{font-size:clamp(2.1rem,11vw,3rem)}
.steps{grid-template-columns:minmax(0,1fr)}
.pillars{grid-template-columns:minmax(0,1fr)}
.pillar.grid-2{grid-column:span 1}
.hook{width:100%}
.sec-head{margin-bottom:var(--space-5)}
.panel,.cab-door,.lock,.scan-card{padding:var(--space-4)}
.foot-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
.tbl th:nth-child(3),.tbl td:nth-child(3){display:none}
.chip{font-size:11px}
.tok-copy{max-width:150px}
}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.reveal{opacity:1;transform:none}
.tag.drop{animation:none!important;opacity:0}
}

html,body{max-width:100%;overflow-x:clip}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap,.wrap-narrow,main>section,main>div,.stack-list,.row-body,.chart,.grid{min-width:0}
img,svg,video,canvas,table,pre{max-width:100%}
pre,table,.tbl{overflow-x:auto}
code,pre,.addr,[class*="addr"],[class*="owner"],[class*="mint"],[class*="tx"],[class*="key"]{overflow-wrap:anywhere;word-break:break-word}
/* An icon-only X link in the nav reads as a modal CLOSE control (a vision review of the first fold
   called it exactly that). The handle makes it legible as a social link. */
.nav .xlink .xlabel{font-size:.72em;letter-spacing:.05em;opacity:.85;margin-right:.45em;white-space:nowrap}
.nav .xlink{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:.3em .7em}
.nav .xlink svg{width:14px;height:14px;display:block}
@media (max-width:600px){.nav .xlink .xlabel{display:none}}
/* revokepad repairs — appended after the pack CSS and GUARD_CSS on EVERY build
 * (fleet_build.py reads themes/<variant>.repair.css), so it survives `--force` rebuilds.
 *
 * Two jobs:
 *  1. READABILITY. A WCAG audit of the rendered pages (tools/contrast_audit.js) found 66
 *     text/bg pairs under AA — the accent was being used as a TEXT colour, `--ink-soft` was too
 *     light for the olive surfaces, the base grid slab was bleeding a dark background onto the
 *     theme's list variant of `.facts`, and three controls (disabled buttons, the copy-CA label,
 *     the footer disclaimer) dropped under AA purely through `opacity`. Every value below was
 *     chosen by measurement, not taste.
 *  2. PRO POLISH. Kills the two "unfinished wireframe" tells a design review flagged: the dashed
 *     inner frame on the hero lock panel and the near-invisible copy-CA affordance.
 */

:root {
  /* Text roles, re-tuned so each one clears 4.5:1 on the surface it is actually used on.
     old #3F4A38 -> 3.77:1 on --surface2 ; old #4E5946 -> 3.93:1 on --bg */
  --ink-soft: #2C3626;      /* bg 6.71 | surface 9.01 | surface2 5.10 */
  --muted: #303A29;         /* bg 6.33 | surface 8.50 | surface2 4.81  (placeholders) */

  /* A brand accent is a FILL colour. As a text colour #E8462A is 2.09:1 on --bg, so accent
     LABELS (eyebrows, step numbers, pillar numbers, the FAQ +/-, tier names) use a stamped
     version of the same red instead: 6.15 / 8.26 / 4.68 on bg / surface / surface2. */
  --accent-text: #6E1A08;

  /* Ink for text sitting ON an accent fill (4.83:1 — #141A12 was exactly 4.50 and lost margin
     the moment anything above it carried opacity). */
  --on-accent: #0C0F0B;
}

/* ---------- accent-coloured labels: use the text red, not the fill red ---------- */
.eyebrow,
.card .eyebrow, .step .eyebrow, .app-panel .eyebrow, .util-pillar .eyebrow, .util-board .eyebrow, .band .eyebrow,
.step .n, .util-pillar .n, .qa-x, .tbl caption, .tier-key, .pillar-label, .cab-tag {
  color: var(--accent-text);
}
.qa[open] .qa-x { color: var(--ink-soft); }

/* ---------- the theme's LIST variant of .facts must not inherit the base grid's dark slab ----
   base.css paints `.facts{background:var(--line)}` for its div/dt/dd grid; the pack renders the
   same class as a <ul>, so every row sat on #7E8975 at 2.55:1. */
ul.facts { background: transparent; border: 0; }
ul.facts li { color: var(--ink); }
ul.facts li::before { border-color: var(--accent-text); }

/* ---------- table headers sit on --surface2 ---------- */
th, .tbl th { color: var(--ink); }

/* ---------- fills: text on the accent uses --on-accent ---------- */
.btn.primary,
.btn--primary,
.util-tier[aria-pressed="true"] { color: var(--on-accent); }
.tag-m { opacity: 1; color: var(--on-accent); }

/* ---------- opacity must never be what makes text unreadable ---------- */
.disc { opacity: 1; color: var(--ink-soft); }
.tok-copy { opacity: 1; color: var(--ink-soft); }
.tok-copy:hover { color: var(--ink); }
.tok-note { opacity: 1; color: var(--ink-soft); }

/* A disabled control that is the same button at 50% opacity reads as a rendering fault; a
   distinct "stamped out" surface reads as a decision, and keeps its label legible. */
.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 1;
  background: var(--surface2);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: none;
  transform: none;
}

/* ---------- inputs: the placeholder was 3.93:1, and the focus ring needs to read as focus ---- */
.input::placeholder, input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.input, input[type=text], textarea, select {
  border-color: color-mix(in srgb, var(--line) 80%, var(--ink));
}
.input:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ---------- pro polish: the hero panel's dashed inner frame read as a placeholder ---------- */
.lock::after {
  border: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
  border-radius: calc(var(--radius) - 2px);
  inset: 9px;
}
/* …and the two dashed rules that ARE the key-tag language keep it, but at a legible value. */
.serial { border-top-color: color-mix(in srgb, var(--line) 85%, transparent); }
ul.facts li { border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent); }

/* ---------- the live data strip must not look like a failed embed ---------- */
.hero-widget { position: relative; }
.hero-widget #hero-canvas {
  display: block;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: calc(var(--radius) - 2px);
}
#hero-stat { color: var(--ink-soft); }

/* ---------- nav: the X link must read as a social link, not a modal close button ---------- */
.nav .xlink { border-color: color-mix(in srgb, var(--line) 85%, transparent); }
.nav .xlink:hover { color: var(--accent-text); border-color: var(--accent-text); }

/* ---------- PRO POLISH: the two first-fold tells that read as "unfinished" ----------
 * (1) A cabinet hinge that looks like a stray scrollbar thumb. Give it the geometry and the
 *     screws of an actual hinge plate, flush against the door edge.
 * (2) The hero grid stretches both columns, so the lock panel carried ~55% dead space under its
 *     last line. Centre the lock instead of leaving it crammed at the top. */
.cab-hinge {
  left: -10px;
  top: 28px;
  width: 11px;
  height: 46px;
  background-color: var(--surface2);
  background-image:
    radial-gradient(circle at 50% 12px, var(--ink) 1.5px, transparent 2px),
    radial-gradient(circle at 50% 34px, var(--ink) 1.5px, transparent 2px);
  border: 1.5px solid var(--ink);
  border-left: 0;
  border-radius: 0 3px 3px 0;
  box-shadow: 0 1px 0 rgba(20, 26, 18, .28);
}
.cab-hinge--b { top: auto; bottom: 28px; }
.cab-door--open { border-left: 1px solid var(--line); }

.lock { display: flex; flex-direction: column; justify-content: flex-start; gap: var(--space-5); }
.lock .field { margin: 0; }

/* The hero grid stretched both columns, so the lock panel carried ~440px of dead space under its
   last line (a design review read it as missing content). Let the action card size to its content
   and sit flush with the top of the copy column: the asymmetric hero the concept asks for. */
.cab-in { align-items: start; }

/* ---------- focus visibility on the whole page ---------- */
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }