/* AfterCode OS — site styles. Tokens live in tokens.css; nothing here hard-codes a brand hex. */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--void);color:var(--signal);-webkit-text-size-adjust:100%;scrollbar-color:var(--line) var(--void)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;font-family:var(--font-display);font-size:18px;line-height:1.6;font-weight:400;overflow-x:clip;min-height:100vh}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--ignition);color:var(--void)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--ignition);outline-offset:3px;border-radius:var(--radius)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:fixed;left:12px;top:-60px;z-index:200;background:var(--ignition);color:var(--void);padding:10px 14px;font-family:var(--font-mono);font-size:13px;text-decoration:none;border-radius:var(--radius)}
.skip-link:focus{top:56px}

/* ---------- type ---------- */
.mono,.mono-label{font-family:var(--font-mono)}
.mono-label{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mono-data{font-family:var(--font-mono);font-size:14px}
.display-hero{font-size:clamp(48px,11vw,196px);font-weight:600;letter-spacing:-.04em;line-height:.92;margin:0}
.display{font-size:clamp(44px,7vw,128px);font-weight:600;letter-spacing:-.035em;line-height:.95;margin:0}
.h2{font-size:56px;font-weight:600;letter-spacing:-.02em;line-height:1.02;margin:0}
.h3{font-size:32px;font-weight:500;line-height:1.15;margin:0;letter-spacing:-.01em}
.lead{font-size:24px;line-height:1.45;max-width:62ch;color:var(--signal);margin:0}
.body{font-size:18px;line-height:1.6;max-width:68ch}
.muted{color:var(--muted)}
.ign{color:var(--ignition)}
@media (max-width:760px){
  body{font-size:17px}
  .h2{font-size:36px}.h3{font-size:24px}.lead{font-size:19px}.mono-label{font-size:12px}
}
/* character split words — weight shift instead of shimmer (PRO §2.4) */
.split .ch{display:inline-block;font-variation-settings:"wght" var(--w,600);transition:font-variation-settings 260ms var(--ease-in-out-enter),letter-spacing 260ms var(--ease-in-out-enter)}
.split:hover .ch{--w:700}
.split .sp{display:inline-block;width:.26em}
.shift{transition:font-variation-settings 260ms var(--ease-in-out-enter),letter-spacing 260ms var(--ease-in-out-enter);font-variation-settings:"wght" 400}
.shift:hover{font-variation-settings:"wght" 700;letter-spacing:-.01em}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 24px}
.section{position:relative;padding:160px 0}
@media (max-width:760px){.section{padding:96px 0}}
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.stack-8>*+*{margin-top:8px}.stack-16>*+*{margin-top:16px}.stack-24>*+*{margin-top:24px}.stack-40>*+*{margin-top:40px}.stack-64>*+*{margin-top:64px}
main{position:relative;z-index:2}

/* blueprint grid: the "OS desktop", bends with scroll velocity (os.js sets --skew) */
.blueprint{position:fixed;inset:-10vh -10vw;z-index:0;pointer-events:none;opacity:.4;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;transform:skewY(var(--skew,0deg));
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 80%)}

/* giant outline numerals behind sections, parallax 0.3x (os.js sets --py) */
.layer-num{position:absolute;right:-2vw;top:0;z-index:0;font-size:30vw;font-weight:600;line-height:.8;color:transparent;-webkit-text-stroke:1px var(--line);
  pointer-events:none;user-select:none;transform:translate3d(0,var(--py,0px),0);letter-spacing:-.04em}
.layer-num.left{left:-2vw;right:auto}

/* placeholders: decisions only Tony can make, facts we do not have */
.ph{display:inline-flex;align-items:center;gap:6px;border:1px dashed var(--muted);color:var(--signal);padding:0 6px;border-radius:var(--radius);font-family:var(--font-mono);font-size:.78em;letter-spacing:.02em;white-space:nowrap;vertical-align:baseline}
.ph::before{content:"";width:6px;height:6px;background:var(--ignition);border-radius:1px;flex:none}
.ph-block{border:1px dashed var(--muted);padding:20px;border-radius:var(--radius);font-family:var(--font-mono);font-size:14px;color:var(--muted)}
.ph-block b{color:var(--signal);font-weight:500}
.ph-tag{display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px dashed var(--muted);padding:2px 6px;border-radius:var(--radius)}
.sample{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--void);background:var(--muted);padding:2px 6px;border-radius:var(--radius)}

/* ---------- status bar (navigation) ---------- */
.statusbar{position:fixed;top:0;left:0;right:0;z-index:60;height:48px;display:flex;align-items:center;gap:20px;padding:0 20px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  background:color-mix(in srgb,var(--void) 82%,transparent);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.1) blur(8px)}
.sb-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--signal);background:none;border:0;padding:0;cursor:pointer;font:inherit;text-transform:inherit;letter-spacing:inherit}
.sb-brand .mark{width:20px;height:20px}
.sb-layer{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sb-layer b{color:var(--signal);font-weight:500}
.sb-nav{display:flex;gap:4px;margin-left:auto}
.sb-nav a{text-decoration:none;color:var(--muted);padding:6px 10px;border-radius:var(--radius);position:relative}
.sb-nav a:hover,.sb-nav a[aria-current="page"]{color:var(--signal)}
.sb-nav a[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:1px;background:var(--ignition)}
.sb-tools{display:flex;align-items:center;gap:8px}
.sb-btn{background:none;border:1px solid transparent;color:var(--muted);padding:6px 8px;border-radius:var(--radius);cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;white-space:nowrap}
.sb-btn:hover{color:var(--signal);border-color:var(--line)}
.sb-btn[aria-pressed="true"]{color:var(--signal)}
.sb-btn[aria-pressed="true"] .dot{background:var(--ignition)}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--line);margin-right:6px;vertical-align:1px}
.sb-menu{display:none}
.statusbar .btn{height:32px;padding:0 14px;font-size:12px}
@media (max-width:1100px){.sb-nav{display:none}.sb-menu{display:inline-block}.sb-tools{margin-left:auto}}
@media (max-width:760px){.sb-layer,.sb-hide-m{display:none}.statusbar{gap:10px;padding:0 12px}}

/* full-screen "process list" menu (mobile) */
.proclist{position:fixed;inset:0;z-index:70;background:var(--void);display:none;flex-direction:column;padding:72px 20px 24px;overflow:auto}
.proclist.open{display:flex}
.proclist .row{display:grid;grid-template-columns:56px 1fr auto;align-items:baseline;gap:12px;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--signal)}
.proclist .row .pid{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.proclist .row .nm{font-size:36px;font-weight:600;letter-spacing:-.02em}
.proclist .row .st{font-family:var(--font-mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.proclist-close{position:absolute;top:10px;right:12px}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border-radius:var(--radius);
  font-family:var(--font-display);font-size:16px;font-weight:500;text-decoration:none;cursor:pointer;border:0;white-space:nowrap;
  transition:transform 160ms var(--ease-in-out-enter),background-color 200ms;will-change:transform}
.btn:active{transform:translate(var(--mx,0px),var(--my,0px)) scale(.98)!important}
.btn-primary{background:var(--ignition);color:var(--void)}
.btn-primary .lbl{position:relative;display:inline-block}
.btn-primary .lbl-alt{font-family:var(--font-mono);font-size:.92em}
.btn-primary .trace{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);pointer-events:none;overflow:visible}
.btn-primary .trace rect{fill:none;stroke:var(--ignition);stroke-width:1;stroke-dasharray:var(--perim,400);stroke-dashoffset:var(--perim,400);transition:stroke-dashoffset 400ms linear}
.btn-primary:hover .trace rect,.btn-primary:focus-visible .trace rect{stroke-dashoffset:0}
.btn-secondary{background:transparent;color:var(--signal);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;isolation:isolate}
.btn-secondary::before{content:"";position:absolute;left:var(--fx,50%);top:var(--fy,50%);width:0;height:0;border-radius:50%;background:var(--graphite-2);transform:translate(-50%,-50%);transition:width 420ms var(--ease-in-out-enter),height 420ms var(--ease-in-out-enter);z-index:-1}
.btn-secondary:hover::before{width:260%;height:600%}
.btn-ghost{background:none;color:var(--signal);box-shadow:inset 0 0 0 1px var(--line);height:40px;padding:0 14px;font-size:14px}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--muted)}
.btn-ghost[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--ignition);color:var(--signal)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.tlink{position:relative;display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--signal);font-weight:500}
.tlink::after{content:"";position:absolute;left:0;right:22px;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 380ms var(--ease-in-out-enter)}
.tlink:hover::after,.tlink:focus-visible::after{transform:scaleX(1)}
.tlink .arr{transition:transform 300ms var(--ease-in-out-enter)}
.tlink:hover .arr{transform:translateX(4px)}
.btn-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}

/* ---------- interactive boxes (cards) ---------- */
.card{position:relative;background:var(--graphite);border-radius:var(--radius);padding:28px;transform-style:preserve-3d;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform 500ms var(--ease-in-out-enter),background-color 200ms;
  box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;text-decoration:none;color:var(--signal);display:block}
.card.tilting{transition:transform 120ms linear}
.card:hover{background:var(--graphite-2)}
.card .edge{position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(var(--ea,90deg),var(--ignition),transparent 18%) border-box;opacity:0;transition:opacity 240ms;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;border:1px solid transparent}
.card:hover .edge,.card:focus-within .edge,.card:focus-visible .edge{opacity:1}
.card .inner{transform:translate3d(var(--ix,0px),var(--iy,0px),0);transition:transform 500ms var(--ease-in-out-enter)}
.card.tilting .inner{transition:transform 120ms linear}
.card .proc{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:12px;margin-bottom:24px}
.card .proc .live{color:var(--signal)}
.card .proc .live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-right:8px;vertical-align:1px}
.card h3{margin:0 0 10px;font-size:26px;font-weight:600;letter-spacing:-.015em;line-height:1.15}
.card p{margin:0;color:var(--muted);font-size:16px;line-height:1.55}
.card .go{margin-top:20px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--signal)}
.card-expand{cursor:pointer}
.card .detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows 520ms var(--ease-in-out-enter)}
.card .detail>div{overflow:hidden}
.card.open .detail{grid-template-rows:1fr}
.card.open .detail>div{padding-top:20px}
.card-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}

/* entrance verbs (each layer gets its own, PRO §2.4). JS adds .in when the element enters. */
.v-slot{opacity:0;transform:translate3d(0,0,0) scaleY(.94);transform-origin:top;clip-path:inset(0 0 100% 0)}
.v-slot.in{opacity:1;transform:none;clip-path:inset(0 0 0 0);transition:clip-path var(--t-enter) var(--ease-in-out-enter),transform var(--t-enter) var(--ease-in-out-enter),opacity 200ms}
.v-unfold{clip-path:inset(0 50% 0 50%)}
.v-unfold.in{clip-path:inset(0 0 0 0);transition:clip-path var(--t-enter) var(--ease-in-out-enter)}
.v-assemble{opacity:0;transform:scale(.97)}
.v-assemble.in{opacity:1;transform:none;transition:opacity 500ms var(--ease-in-out-enter),transform var(--t-enter) var(--ease-in-out-enter)}
.v-draw{clip-path:inset(0 100% 0 0)}
.v-draw.in{clip-path:inset(0 0 0 0);transition:clip-path 900ms var(--ease-in-out-enter)}
/* stagger: secondary moves start 100-200ms later */
.stagger>.in:nth-child(2){transition-delay:140ms}.stagger>.in:nth-child(3){transition-delay:280ms}.stagger>.in:nth-child(4){transition-delay:420ms}
.stagger>.in:nth-child(5){transition-delay:560ms}.stagger>.in:nth-child(6){transition-delay:700ms}.stagger>.in:nth-child(7){transition-delay:840ms}.stagger>.in:nth-child(8){transition-delay:980ms}

/* ---------- cursor (desktop only; native cursor stays) ---------- */
.ac-cursor{position:fixed;left:0;top:0;z-index:300;pointer-events:none;transform:translate3d(-100px,-100px,0);display:none}
.ac-cursor .caret{width:2px;height:18px;background:var(--ignition);transition:width 200ms,height 200ms,opacity 200ms}
.ac-cursor .cross{position:absolute;left:-9px;top:-9px;width:18px;height:18px;opacity:0;transition:opacity 160ms}
.ac-cursor .cross::before,.ac-cursor .cross::after{content:"";position:absolute;background:var(--ignition)}
.ac-cursor .cross::before{left:8px;top:0;width:1px;height:18px}.ac-cursor .cross::after{top:8px;left:0;height:1px;width:18px}
.ac-cursor .pill{position:absolute;left:14px;top:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:var(--ignition);color:var(--void);padding:3px 8px;border-radius:var(--radius);opacity:0;transform:scale(.9);transition:opacity 160ms,transform 260ms var(--ease-in-out-enter);white-space:nowrap}
.ac-cursor.m-cross .caret{opacity:0}.ac-cursor.m-cross .cross{opacity:1}
.ac-cursor.m-beam .caret{height:24px;width:1px}
.ac-cursor.m-pill .pill{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){.ac-cursor{display:block}}

/* ---------- command palette ---------- */
.palette{position:fixed;inset:0;z-index:120;display:none;align-items:flex-start;justify-content:center;padding-top:14vh;background:color-mix(in srgb,var(--void) 70%,transparent)}
.palette.open{display:flex}
.palette .box{width:min(640px,92vw);background:var(--graphite);box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--radius)}
.palette .in-row{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line);font-family:var(--font-mono)}
.palette .in-row span{color:var(--ignition)}
.palette input{flex:1;background:none;border:0;font-family:var(--font-mono);font-size:16px;color:var(--signal)}
.palette input:focus{outline:none}
.palette ul{list-style:none;margin:0;padding:6px;max-height:50vh;overflow:auto}
.palette li a,.palette li button{display:flex;justify-content:space-between;gap:12px;width:100%;padding:10px 12px;border-radius:var(--radius);text-decoration:none;background:none;border:0;cursor:pointer;text-align:left;color:var(--signal);font-size:15px}
.palette li[aria-selected="true"] a,.palette li[aria-selected="true"] button{background:var(--graphite-2);box-shadow:inset 2px 0 0 var(--ignition)}
.palette li .k{font-family:var(--font-mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.palette .foot{padding:10px 18px;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:11px;color:var(--muted);letter-spacing:.06em}

/* ---------- boot / power-down overlays ---------- */
#boot{position:fixed;inset:0;z-index:500;background:#000;display:flex;align-items:center;justify-content:center}
#boot .bcur{width:10px;height:22px;background:var(--ignition);opacity:0}
#boot .blines{position:absolute;left:50%;top:50%;transform:translate(-50%,28px);font-family:var(--font-mono);font-size:13px;color:var(--muted);letter-spacing:.04em;white-space:pre;min-width:min(420px,86vw)}
#boot .blines .ok{color:var(--signal)}
#boot .blines .ok::after{content:" · ok";color:var(--ok)}
#boot .blines .later::after{content:" · continuing in background";color:var(--muted)}
#boot .hz{position:absolute;left:50%;top:50%;height:1px;width:10px;background:var(--signal);transform:translate(-50%,-50%) scaleX(0);opacity:0}
#boot .bskip{position:absolute;right:20px;bottom:20px;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--muted);background:none;border:1px solid var(--line);padding:8px 12px;border-radius:var(--radius);cursor:pointer}
#boot .bskip:hover{color:var(--signal)}
#boot.opening{background:transparent;pointer-events:none}
#boot.opening::before,#boot.opening::after{content:"";position:absolute;left:0;right:0;height:50%;background:#000;transition:transform 620ms var(--ease-in-out-enter)}
#boot.opening::before{top:0}#boot.opening::after{bottom:0}
#boot.opening.go::before{transform:translateY(-100%)}#boot.opening.go::after{transform:translateY(100%)}
#boot.opening .blines,#boot.opening .bskip,#boot.opening .bcur{display:none}
html.booting body{overflow:hidden}

#powerdown{position:fixed;inset:0;z-index:400;display:none;pointer-events:none}
#powerdown.on{display:block;pointer-events:auto}
#powerdown .shut{position:absolute;left:0;right:0;height:50%;background:#000;transition:transform 520ms var(--ease-exit)}
#powerdown .shut.t{top:0;transform:translateY(-100%)}#powerdown .shut.b{bottom:0;transform:translateY(100%)}
#powerdown.close .shut{transform:none}
#powerdown .pline{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--signal);transform:scaleX(1);opacity:0;transition:transform 420ms var(--ease-exit) 0ms,opacity 120ms}
#powerdown.close .pline{opacity:1}
#powerdown.point .pline{transform:scaleX(0)}
#powerdown .pcur{position:absolute;left:50%;top:50%;width:10px;height:22px;margin:-11px 0 0 -5px;background:var(--ignition);opacity:0}
#powerdown.cursor .pcur{animation:blink 1s steps(1) infinite}
#powerdown .pmsg{position:absolute;left:50%;top:calc(50% + 36px);transform:translateX(-50%);font-family:var(--font-mono);font-size:13px;color:var(--muted);text-align:center;opacity:0;width:min(640px,90vw);line-height:1.8}
#powerdown.cursor .pmsg{opacity:1;transition:opacity 300ms 300ms}
#powerdown .pmsg b{color:var(--signal);font-weight:500}
#powerdown .pon{margin-top:18px;background:none;border:1px solid var(--line);color:var(--signal);font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;padding:8px 14px;border-radius:var(--radius);cursor:pointer}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ---------- page hero (inner pages) ---------- */
.phero{position:relative;padding:180px 0 120px;overflow:hidden}
.phero .crumb{display:flex;gap:10px;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:32px;flex-wrap:wrap}
.phero .crumb a{color:var(--muted);text-decoration:none}.phero .crumb a:hover{color:var(--signal)}
.phero .display{max-width:15ch}
.phero .lead{margin-top:32px;color:var(--muted)}
@media (max-width:760px){.phero{padding:120px 0 72px}}

.rule{height:1px;background:var(--line);border:0;margin:0}
.kv{display:grid;grid-template-columns:200px 1fr;gap:12px 32px;font-size:16px}
.kv dt{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:4px}
.kv dd{margin:0}
@media (max-width:760px){.kv{grid-template-columns:1fr}}
.list-tick{list-style:none;padding:0;margin:0}
.list-tick li{position:relative;padding:12px 0 12px 32px;border-bottom:1px solid var(--line)}
.list-tick li::before{content:"";position:absolute;left:0;top:21px;width:12px;height:1px;background:var(--muted)}
.list-tick.ign li::before{background:var(--ignition)}

/* checklist that ticks as you scroll */
.ticklist{list-style:none;padding:0;margin:0;counter-reset:t}
.ticklist li{display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);font-size:22px;color:var(--muted);transition:color 400ms}
.ticklist li .box{width:22px;height:22px;box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--radius);position:relative}
.ticklist li .box::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid var(--void);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform 300ms var(--ease-in-out-enter)}
.ticklist li.on{color:var(--signal)}
.ticklist li.on .box{background:var(--ignition);box-shadow:none}
.ticklist li.on .box::after{transform:rotate(45deg) scale(1)}

/* FAQ accordion: unfold */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:24px 0;font-size:22px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{font-family:var(--font-mono);color:var(--muted);transition:transform 300ms var(--ease-in-out-enter)}
.faq details[open] summary .pm{transform:rotate(45deg);color:var(--ignition)}
.faq .ans{color:var(--muted);padding:0 0 24px;max-width:70ch;animation:unfold 520ms var(--ease-in-out-enter)}
@keyframes unfold{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

/* forms */
.field{display:flex;flex-direction:column;gap:8px}
.field label,.field .lab{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=url],.field textarea,.field select{
  background:var(--graphite);border:0;box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--radius);padding:14px 16px;font-size:17px;color:var(--signal);width:100%}
.field textarea{min-height:110px;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--ignition)}
.field .err{font-family:var(--font-mono);font-size:12px;color:var(--ignition);min-height:1em}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{box-shadow:inset 0 0 0 1px var(--ignition)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:none;border:0;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);padding:8px 14px;border-radius:var(--radius);cursor:pointer;font-size:14px;font-family:var(--font-mono);letter-spacing:.02em}
.chip:hover{color:var(--signal);box-shadow:inset 0 0 0 1px var(--muted)}
.chip[aria-pressed="true"],.chip[aria-checked="true"]{color:var(--void);background:var(--signal);box-shadow:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.check{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--muted)}
.check input{width:18px;height:18px;accent-color:var(--ignition);margin-top:3px;flex:none}

/* ---------- footer: system tray ---------- */
.tray{position:relative;z-index:2;border-top:1px solid var(--line);background:var(--void);padding:72px 0 28px;margin-top:0}
.tray .top{display:grid;grid-template-columns:1.4fr repeat(6,1fr) 1.2fr;gap:24px}
.tray .brand .mark{width:36px;height:36px;margin-bottom:16px}
.tray .brand p{margin:0;font-size:20px;font-weight:500;letter-spacing:-.01em;max-width:18ch}
.tray .brand p.tray-ref{margin-top:14px;font-size:14px;font-weight:400;color:var(--muted);letter-spacing:0}
.tray h3{margin:0 0 14px;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tray ul{list-style:none;margin:0;padding:0}
.tray li{margin:0 0 8px}
.tray li a{text-decoration:none;color:var(--signal);font-size:15px;opacity:.85}
.tray li a:hover{opacity:1;color:var(--signal)}
.tray .readouts{font-family:var(--font-mono);font-size:12px;color:var(--muted);letter-spacing:.04em;line-height:2}
.tray .readouts a{color:var(--signal);text-decoration:none}
.tray .readouts .on::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-right:8px;vertical-align:1px}
.tray .bottom{margin-top:56px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.tray .bottom a,.tray .bottom button{color:var(--muted);text-decoration:none;background:none;border:0;padding:0;cursor:pointer;font:inherit}
.tray .bottom a:hover,.tray .bottom button:hover{color:var(--signal)}
.tray .bottom nav{display:flex;flex-wrap:wrap;gap:16px}
@media (max-width:1100px){.tray .top{grid-template-columns:repeat(3,1fr)}.tray .brand,.tray .readouts{grid-column:1/-1}}
@media (max-width:560px){.tray .top{grid-template-columns:repeat(2,1fr)}}

/* ---------- reduced motion: never removes content ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .v-slot,.v-unfold,.v-assemble,.v-draw{opacity:1!important;transform:none!important;clip-path:none!important}
  .blueprint{transform:none!important}
  .layer-num{transform:none!important}
}
html.rm .v-slot,html.rm .v-unfold,html.rm .v-assemble,html.rm .v-draw{opacity:1!important;transform:none!important;clip-path:none!important}
html.rm .blueprint,html.rm .layer-num{transform:none!important}
html.rm *,html.rm *::before,html.rm *::after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}

.layer-num~.wrap,.phero .wrap{position:relative;z-index:1}
.layer-num~[class$="-track"]{position:relative;z-index:1}
.layer-num~.reel,.layer-num~.dept-row-wrap{z-index:1}