/* ============================================================
   Vector 48 — site system v16
   One world: near-black machine room lit by papaya.
   Two voices: Geist display, JetBrains Mono machine. Plex reads.
   Brand v0.2 tokens; light-surface extensions from the proposal system.
   ============================================================ */
:root{
  --bg:#0A0908; --bg2:#15100B; --bg3:#1A140F;
  --fg:#F5F1EA; --mut:#A49E95; --sub:#8B867F;
  --line:#221C16; --line2:#2E2720;
  --pap:#FF8700; --deep:#B85E00;
  --cream:#F5F1EA; --ink:#0A0908; --ink2:#57524B; --cline:#D9D2C6;
  --ok:#5DCAA5; --warn:#F5C518; --crit:#E24B4A;
  --disp:'Geist',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  color-scheme: dark;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{background:var(--bg); color:var(--fg); font:400 16px/1.6 var(--body); margin:0; overflow-x:clip;}
.gut{padding-left:max(20px, env(safe-area-inset-left, 0px)); padding-right:max(20px, env(safe-area-inset-right, 0px));}
.wrap{max-width:1280px; margin:0 auto;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--pap); outline-offset:3px;}
::selection{background:var(--pap); color:#0A0908;}
img{max-width:100%; height:auto;}

/* ---- fixed chrome: world, grain, scene tag ---- */
#world{position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0;}
#grain{position:fixed; inset:0; z-index:40; pointer-events:none; opacity:.07; mix-blend-mode:overlay;}
#scene-tag{position:fixed; left:max(20px, env(safe-area-inset-left,0px)); bottom:18px; z-index:41; font:500 9.5px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--sub); display:flex; gap:12px; align-items:center;}
#scene-tag b{color:var(--pap); font-weight:500; min-width:18px;}
#scene-tag i{display:block; width:46px; height:1px; background:var(--line2); position:relative; overflow:hidden;}
#scene-tag i em{position:absolute; inset:0; background:var(--pap); transform-origin:left; transform:scaleX(0);}
@media (max-width:900px){ #scene-tag{display:none;} }

/* ---- type ---- */
.eb{font:500 11px/1.5 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--pap); margin:0 0 20px;}
.marker{display:flex; align-items:baseline; gap:16px; border-top:1px solid var(--line2); padding-top:16px; margin-bottom:40px; font:500 11px/1.5 var(--mono); letter-spacing:.2em; text-transform:uppercase;}
.marker b{color:var(--pap); font-weight:500;}
.marker span{color:var(--sub);}
h1{font:600 clamp(40px,6.9vw,94px)/.98 var(--disp); letter-spacing:-.03em; margin:0 0 30px; max-width:15ch; text-wrap:balance;}
h1 .w, .big .w, .closing h2 .w{display:inline-block; overflow:clip; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em;}
h1 .w i, .big .w i, .closing h2 .w i{display:inline-block; font-style:normal; will-change:transform;}
h2{font:600 clamp(30px,5.4vw,62px)/1.06 var(--disp); letter-spacing:-.022em; margin:0 0 22px; text-wrap:balance; max-width:18ch;}
h3{font:600 clamp(20px,2.6vw,28px)/1.2 var(--disp); letter-spacing:-.012em; margin:0 0 12px; text-wrap:balance;}
.lead{font-size:clamp(16px,1.9vw,19px); line-height:1.65; color:var(--mut); max-width:60ch; margin:0 0 20px; text-wrap:pretty;}
.lead b{color:var(--fg); font-weight:500;}
section{padding-block:clamp(72px,8.5vw,116px); position:relative;}
.rev{will-change:transform;}

/* ---- nav ---- */
nav.site{position:fixed; top:env(safe-area-inset-top,0px); left:0; right:0; z-index:50; background:rgba(10,9,8,.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line); transition:transform .4s, background .3s;}
nav.site.hide{transform:translateY(-110%);}
nav.site.scrolled{background:rgba(10,9,8,.92);}
nav.site.scrolled .wrap{padding-block:11px;}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:60; background:var(--bg);}
nav.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:15px; transition:padding .3s;}
.lockup{display:flex; align-items:center; gap:10px; text-decoration:none;}
.wordmark{font:500 13px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--fg);}
nav.site .links{display:flex; gap:30px; align-items:center;}
nav.site .links a{font:500 10.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--mut); text-decoration:none; transition:color .18s;}
nav.site .links a:hover{color:var(--pap);}
nav.site .links a.on{color:var(--fg);}
nav.site .links a:not(.btn){position:relative; padding-bottom:3px;}
nav.site .links a:not(.btn)::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--pap); transform:scaleX(0); transform-origin:left; transition:transform .3s;}
nav.site .links a:not(.btn):hover::after{transform:scaleX(1);}
@media (max-width:820px){ nav.site .links a:not(.btn){display:none;} }
.btn{display:inline-block; font:500 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; padding:15px 24px; text-decoration:none; border:1px solid var(--line2); color:var(--fg); transition:all .2s; position:relative;}
.btn:hover{border-color:var(--pap); color:var(--pap);}
.btn.solid{background:var(--cream); border-color:var(--cream); color:var(--ink);}
.btn.solid:hover{background:var(--pap); border-color:var(--pap); color:#fff;}

/* ---- hero: full (home) ---- */
.hero{position:relative; z-index:1; min-height:88svh; display:flex; align-items:center; padding-block:clamp(130px,16vw,190px) clamp(70px,8vw,110px); overflow:clip;}
.hero .veil{position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(10,9,8,.35), rgba(10,9,8,0) 26%, rgba(10,9,8,0) 66%, var(--bg) 97%),
  radial-gradient(118% 92% at 16% 44%, rgba(10,9,8,.8), transparent 62%);}
@media (max-width:979px){ .hero .veil{background:linear-gradient(180deg, rgba(10,9,8,.55), rgba(10,9,8,.42) 22%, rgba(10,9,8,.6) 46%, rgba(10,9,8,.55) 72%, var(--bg) 97%);} }
.gridlines{position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:repeating-linear-gradient(90deg, rgba(245,241,234,.05) 0 1px, transparent 1px calc(100%/6));
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);}
.hero .grid > div:first-child{position:relative;}
.hero .grid > div:first-child::before{content:""; position:absolute; inset:-8% -14% -10% -18%; z-index:-1; pointer-events:none;
  background:radial-gradient(58% 55% at 42% 46%, rgba(10,9,8,.62), rgba(10,9,8,.28) 55%, transparent 96%);}
.hero .grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(36px,5vw,80px); align-items:end; position:relative; width:100%;}
@media (max-width:980px){ .hero .grid{grid-template-columns:1fr;} }
.sub{font-size:clamp(16px,2vw,20px); line-height:1.6; color:var(--mut); max-width:46ch; margin:0 0 38px; text-wrap:pretty;}
.sub b{color:var(--fg); font-weight:500;}
.ctas{display:flex; gap:14px; flex-wrap:wrap;}
.hero.noGL{background:
  radial-gradient(60% 46% at 78% 18%, rgba(255,135,0,.28), transparent 70%),
  radial-gradient(42% 36% at 62% 52%, rgba(184,94,0,.18), transparent 70%), var(--bg);}

/* ---- hero: interior pages ---- */
.hero.page{min-height:0; padding-block:clamp(130px,15vw,180px) clamp(54px,6vw,80px);}
.hero.page h1{font-size:clamp(36px,5.6vw,72px); max-width:18ch;}
.hero.page .sub{max-width:58ch;}

/* ---- living panel / mock voice ---- */
.panel{background:rgba(21,16,11,.6); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  padding:20px 22px 18px; font:400 12.5px/1.65 var(--mono); color:var(--fg); font-variant-numeric:tabular-nums;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 40px 90px rgba(0,0,0,.6); min-width:0; will-change:transform;}
.panel .ph{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font:500 10px/1.5 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--pap); border-bottom:1px solid var(--line2); padding-bottom:11px; margin-bottom:13px;}
.panel .ph span:last-child{color:var(--sub);}
.panel .tag{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--pap);}
.panel .row{display:grid; grid-template-columns:62px 1fr; gap:0 12px; padding:6px 0;}
.panel .row div{color:var(--mut);}
.panel .row div b{color:var(--fg); font-weight:500;}
.caret{display:inline-block; width:7px; height:14px; background:var(--pap); vertical-align:-2px; margin-left:2px;}
@media (prefers-reduced-motion:no-preference){ .caret{animation:blink 1s steps(1) infinite;} @keyframes blink{50%{opacity:0;}} }
.gorow{display:flex; align-items:center; gap:12px; border-top:1px solid var(--line2); margin-top:10px; padding-top:13px; flex-wrap:wrap;}
.gochip{font:500 10px/1 var(--mono); letter-spacing:.18em; padding:10px 16px; border:1px solid var(--pap); color:var(--pap); text-transform:uppercase; transition:all .3s;}
.gochip.hit{background:var(--pap); color:#0A0908; box-shadow:0 0 24px rgba(255,135,0,.4);}
.golog{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--sub); min-height:14px;}
.mock{background:#1A140F; border:1px solid #2A2422; padding:16px 18px; color:#F5F1EA; font:400 12.5px/1.6 var(--mono); font-variant-numeric:tabular-nums; min-width:0;}
.mock .mh{display:flex; justify-content:space-between; gap:10px; font:500 10px/1.4 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:#FF8700; border-bottom:1px solid #2A2422; padding-bottom:9px; margin-bottom:10px; flex-wrap:wrap;}
.mock .mh span:last-child{color:#7D7871;}
.mock .sec{font:500 10px/1.4 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:#8A8580; margin:12px 0 4px;}
.mock .it{display:grid; grid-template-columns:72px 1fr; gap:0 10px; padding:4px 0;}
.mock .it i{font-style:normal; color:#FF8700; font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding-top:2px;}
.mock .it em{font-style:normal; color:#7D7871;}
.mock .foot{margin-top:12px; border-top:1px solid #2A2422; padding-top:9px; color:#7D7871; font-size:11px;}

/* ---- ticker ---- */
.ticker{position:relative; z-index:1; border-block:1px solid var(--line); padding-block:16px; overflow:clip; white-space:nowrap; background:var(--bg); font-variant-numeric:tabular-nums;}
.tape{display:inline-block; will-change:transform;}
.ticker .in{display:inline-block; font:500 11px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--sub); padding-right:60px;}
.ticker .in b{color:var(--mut); font-weight:500;}
.ticker .in i{color:var(--deep); font-style:normal; padding:0 20px;}
@media (prefers-reduced-motion:no-preference){ .tape{animation:tape 40s linear infinite;} @keyframes tape{to{transform:translateX(-50%);}} }

/* ---- staff rows ---- */
.row-staff{border-top:1px solid var(--line2); display:grid; grid-template-columns:76px minmax(0,5fr) minmax(0,6fr); gap:0 24px; padding:34px 0 30px; align-items:baseline; position:relative; isolation:isolate;}
.row-staff:last-of-type{border-bottom:1px solid var(--line2);}
.row-staff::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,135,0,.06), transparent 55%); opacity:0; transition:opacity .3s; z-index:-1;}
.row-staff:hover::after, .row-staff:focus-within::after{opacity:1;}
.row-staff .ri{font:500 clamp(28px,3vw,40px)/1.2 var(--mono); color:transparent; -webkit-text-stroke:1px var(--line2); letter-spacing:0; transition:all .3s;}
.row-staff:hover .ri{-webkit-text-stroke-color:var(--pap);}
.row-staff .rn{font:600 clamp(26px,3.6vw,42px)/1.08 var(--disp); letter-spacing:-.018em;}
.row-staff .rr{display:block; font:500 10px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--pap); margin-top:11px;}
.row-staff .rd{color:var(--mut); font-size:16px; max-width:46ch; text-wrap:pretty;}
.row-staff .demo{font:400 12px/1.65 var(--mono); color:var(--sub); margin-top:13px; max-height:0; overflow:clip; transition:max-height .4s ease, opacity .4s; opacity:0;}
.row-staff:hover .demo, .row-staff:focus-within .demo{max-height:70px; opacity:1;}
.row-staff .demo b{color:var(--pap); font-weight:400;}
@media (max-width:860px){
  .row-staff{grid-template-columns:52px 1fr;}
  .row-staff > div:nth-of-type(2){grid-column:2;}
  .row-staff .demo{display:none;}
}
/* ---- foundation: kcard, trail, payoff rail ---- */
.thesis .grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(40px,6vw,100px); align-items:start;}
@media (max-width:900px){ .thesis .grid{grid-template-columns:1fr;} }
.sticky{position:sticky; top:120px;}
@media (max-width:900px){ .sticky{position:static;} }
.ghost{position:absolute; right:-4vw; top:-30px; font:500 clamp(140px,22vw,300px)/1 var(--mono); color:transparent; -webkit-text-stroke:1px var(--line2); letter-spacing:-.02em; pointer-events:none; z-index:0; opacity:.9;}
@media (max-width:900px){ .ghost{display:none;} }
.kcard{background:var(--bg3); border:1px solid var(--line2); border-top:3px solid var(--pap); padding:20px 22px; max-width:390px; margin-top:34px; position:relative; z-index:1; box-shadow:0 24px 60px rgba(0,0,0,.45);}
.kcard .kt{font:500 10px/1.5 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--sub); margin-bottom:9px;}
.kcard .kr{font:600 19px/1.3 var(--disp); margin-bottom:13px;}
.kcard .km{font:400 11.5px/2 var(--mono); color:var(--mut);}
.kcard .km b{color:var(--pap); font-weight:500;}
.ktrail{display:flex; align-items:center; gap:0; margin-top:18px; max-width:390px;}
.kt-node{display:flex; flex-direction:column; align-items:center; gap:8px; flex:1;}
.kt-node i{width:9px; height:9px; transform:rotate(45deg); border:1px solid var(--line2); background:var(--bg); transition:all .4s;}
.kt-node.on i{background:var(--pap); border-color:var(--pap); box-shadow:0 0 14px rgba(255,135,0,.5);}
.kt-node span{font:500 9px/1 var(--mono); letter-spacing:.18em; color:var(--sub); text-transform:uppercase; transition:color .4s;}
.kt-node.on span{color:var(--pap);}
.kt-line{flex:1.2; height:1px; background:var(--line2); margin-bottom:17px;}
@media (max-width:900px){ .ktrail{display:none;} }
.payrail{position:relative; padding-left:clamp(22px,3vw,40px);}
.payrail::before{content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--line2);}
#payline{position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--pap); transform-origin:top; transform:scaleY(0);}
.pay{padding:clamp(38px,5vw,60px) 0; opacity:.62; transition:opacity .5s;}
.pay.on{opacity:1;}
.pay .pi{font:500 12px/1 var(--mono); letter-spacing:.22em; color:var(--pap); display:block; margin-bottom:16px; text-transform:uppercase;}
.pay h3{font-size:clamp(23px,3.1vw,34px); margin-bottom:12px; max-width:22ch;}
.pay p{margin:0; color:var(--mut); font-size:16px; max-width:46ch; text-wrap:pretty;}

/* ---- manifesto (cream interlude) ---- */
.manifesto{background:var(--cream); color:var(--ink);}
.manifesto .hm{display:flex; gap:10px; align-items:center; font:500 10px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--ink2); margin-bottom:46px;}
.manifesto .hm b{color:#9A4A00; font-weight:500;}
.manifesto .big{font:600 clamp(40px,7.4vw,92px)/1.02 var(--disp); letter-spacing:-.028em; margin:0; max-width:15ch; color:var(--ink);}
.manifesto .big em{font-style:normal; color:transparent; -webkit-text-stroke:1.5px #9A4A00;}
.mani-grid{display:grid; grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:40px 70px; align-items:end;}
@media (max-width:860px){ .mani-grid{grid-template-columns:1fr;} }
.mani-aside{font:400 12px/2 var(--mono); color:var(--ink2); border-left:2px solid #9A4A00; padding-left:18px; margin-bottom:64px;}
.mani-aside b{color:#9A4A00; font-weight:500;}
.credos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1.5px solid var(--ink); gap:0 32px;}
@media (max-width:760px){ .credos{grid-template-columns:1fr; gap:0;} }
.credo{padding:24px 0 28px; border-bottom:1px solid var(--cline); font:500 18px/1.4 var(--disp); color:var(--ink);}
.credo span{display:block; font:500 10px/1 var(--mono); letter-spacing:.2em; color:#9A4A00; margin-bottom:12px;}

/* ---- panels grid (specialties, engage, products) ---- */
.mpanels{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line2); border:1px solid var(--line2); margin-top:42px;}
@media (max-width:820px){ .mpanels{grid-template-columns:1fr;} }
.mp{background:var(--bg); padding:26px 24px 30px; position:relative; overflow:clip; text-decoration:none; display:block;}
.mp::before{content:""; position:absolute; left:0; top:0; width:100%; height:2px; background:linear-gradient(90deg, var(--pap), transparent 70%); transform:scaleX(0); transform-origin:left; transition:transform .5s;}
.mp:hover::before{transform:scaleX(1);}
.mp .mt{font:500 10px/1.5 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--pap); margin-bottom:13px;}
.mp p{margin:0; color:var(--mut); font-size:15px; text-wrap:pretty;}
.mp p b{color:var(--fg); font-weight:500;}
.mp .go{font:500 10px/1 var(--mono); letter-spacing:.18em; color:var(--sub); text-transform:uppercase; margin-top:16px; display:inline-block; transition:color .2s;}
.mp:hover .go{color:var(--pap);}
.split{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:24px 60px; align-items:end; margin-bottom:10px;}
.split .lead{margin-bottom:6px;}
@media (max-width:860px){ .split{grid-template-columns:1fr;} }

/* ---- numbered list ---- */
.deliv{margin:34px 0 0; padding:0; list-style:none; counter-reset:d; max-width:76ch;}
.deliv li{counter-increment:d; display:grid; grid-template-columns:56px 1fr; gap:0 20px; padding:18px 0; border-top:1px solid var(--line2); font-size:16.5px; color:var(--mut); text-wrap:pretty;}
.deliv li:last-child{border-bottom:1px solid var(--line2);}
.deliv li::before{content:"0" counter(d); font:500 13px/1.9 var(--mono); color:var(--pap); letter-spacing:.14em;}
.deliv li b{color:var(--fg); font-weight:500;}

/* ---- promises ---- */
.prom{border-top:1px solid var(--line2); padding:clamp(30px,4.4vw,50px) 0; display:grid; grid-template-columns:76px 1fr; gap:0 24px; align-items:baseline;}
.prom:last-child{border-bottom:1px solid var(--line2);}
.prom .pn{font:500 clamp(24px,2.6vw,34px)/1.4 var(--mono); color:transparent; -webkit-text-stroke:1px var(--line2);}
.prom h3{font-size:clamp(26px,4.4vw,50px); margin:0; max-width:22ch; letter-spacing:-.02em; line-height:1.08;}
.prom p{grid-column:2; margin:12px 0 0; color:var(--sub); font-size:15px; max-width:56ch;}

/* ---- stats (vertical pages) ---- */
.stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line2); border:1px solid var(--line2); margin-top:42px;}
@media (max-width:820px){ .stats{grid-template-columns:1fr;} }
.stat{background:var(--bg); padding:28px 24px 30px;}
.stat .sv{font:600 clamp(34px,4vw,52px)/1.05 var(--disp); letter-spacing:-.02em; margin-bottom:10px;}
.stat p{margin:0 0 14px; color:var(--mut); font-size:14.5px; text-wrap:pretty;}
.stat .ss{font:500 9.5px/1.5 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--sub);}

/* ---- product sections (vertical pages) ---- */
.prod{border-top:1px solid var(--line2); padding-top:clamp(40px,5vw,64px); margin-top:clamp(40px,5vw,64px);}
.prod .grid{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(32px,5vw,72px); align-items:start;}
@media (max-width:900px){ .prod .grid{grid-template-columns:1fr;} }
.prod .pk{font:500 11px/1.5 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--sub); margin-bottom:14px;}
.prod .pk b{color:var(--pap); font-weight:500;}
.prod h3{font-size:clamp(24px,3.2vw,36px);}
.featl{margin:22px 0 0; padding:0; list-style:none;}
.featl li{padding:12px 0; border-top:1px solid var(--line); font-size:15px; color:var(--mut); text-wrap:pretty;}
.featl li b{color:var(--fg); font-weight:500;}

/* ---- FAQ ---- */
.faq{margin-top:38px; max-width:860px;}
.faq details{border-top:1px solid var(--line2);}
.faq details:last-child{border-bottom:1px solid var(--line2);}
.faq summary{cursor:pointer; list-style:none; display:grid; grid-template-columns:22px 1fr; gap:0 14px; align-items:baseline; padding:20px 0; font:600 16.5px/1.4 var(--disp); color:var(--fg);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{content:"◆"; color:var(--deep); font-size:9px; transition:transform .3s, color .3s;}
.faq details[open] summary::before{transform:rotate(45deg); color:var(--pap);}
.faq details p{margin:0 0 20px 36px; color:var(--mut); font-size:15.5px; max-width:66ch; text-wrap:pretty;}
.faq details p b{color:var(--fg); font-weight:500;}

/* ---- tool rows (stack strips) ---- */
.toolband{border-top:1px solid var(--line); padding-block:18px; display:flex; gap:10px 28px; flex-wrap:wrap; align-items:baseline;}
.toolband:last-of-type{border-bottom:1px solid var(--line);}
.toolband .lbl{font:500 10px/1.8 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--sub); min-width:220px;}
.toolband span{font:500 13px/1.8 var(--mono); color:var(--mut);}

/* ---- closing + footer ---- */
.closing{padding-bottom:clamp(50px,7vw,100px);}
footer.site{border-top:1px solid var(--line2); position:relative; z-index:1; overflow:clip; background:var(--bg);}
footer.site .wrap{display:flex; justify-content:space-between; gap:12px 28px; flex-wrap:wrap; padding-block:28px 110px; font:500 10px/1.8 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--sub); position:relative; z-index:1;}
footer.site a{text-decoration:none;}
footer.site a:hover{color:var(--pap);}
.wm{position:absolute; left:50%; transform:translateX(-50%); bottom:-.16em; font:500 clamp(64px,13vw,170px)/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:transparent; -webkit-text-stroke:1px var(--line2); white-space:nowrap; pointer-events:none;}

/* ---- contact drawer ---- */
#veil2{position:fixed; inset:0; background:rgba(10,9,8,.6); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); z-index:70; opacity:0; pointer-events:none; transition:opacity .35s;}
#drawer{position:fixed; top:0; bottom:0; right:0; width:min(440px,100%); background:var(--bg3); border-left:1px solid var(--line2); z-index:71; transform:translateX(102%); transition:transform .45s cubic-bezier(.32,.72,0,1); overflow:auto; padding:28px clamp(20px,4vw,36px) 40px; padding-top:calc(28px + env(safe-area-inset-top,0px)); padding-right:max(clamp(20px,4vw,36px), env(safe-area-inset-right,0px));}
body.drawer-open #veil2{opacity:1; pointer-events:auto;}
body.drawer-open #drawer{transform:none;}
#drawer .dh{display:flex; justify-content:space-between; align-items:center; margin-bottom:30px;}
#drawer .dh span{font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--pap);}
#dclose{background:none; border:1px solid var(--line2); color:var(--mut); font:500 11px/1 var(--mono); letter-spacing:.14em; padding:10px 14px; cursor:pointer; text-transform:uppercase;}
#dclose:hover{border-color:var(--pap); color:var(--pap);}
#drawer h3{font-size:clamp(24px,3vw,30px); margin-bottom:10px;}
#drawer .dlead{color:var(--mut); font-size:15px; margin:0 0 30px;}
.field{margin-bottom:22px;}
.field label{display:block; font:500 10px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--sub); margin-bottom:9px;}
.field input,.field textarea{width:100%; background:transparent; border:0; border-bottom:1px solid var(--line2); color:var(--fg); font:400 16px/1.5 var(--body); padding:8px 0 10px; transition:border-color .2s; border-radius:0;}
.field input:focus,.field textarea:focus{outline:none; border-bottom-color:var(--pap);}
.field textarea{resize:vertical; min-height:84px;}
.field .err{font:400 11px/1.6 var(--mono); color:var(--crit); margin-top:6px; display:none;}
.field.bad input,.field.bad textarea{border-bottom-color:var(--crit);}
.field.bad .err{display:block;}
#dsend, .fsend{width:100%; margin-top:8px; cursor:pointer; font:500 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; padding:17px 22px; background:var(--cream); border:1px solid var(--cream); color:var(--ink); transition:all .2s;}
#dsend:hover, .fsend:hover{background:var(--pap); border-color:var(--pap); color:#fff;}
#dsend[disabled], .fsend[disabled]{opacity:.6; cursor:wait;}
#dnote, .fnote{font:400 10.5px/1.8 var(--mono); color:var(--sub); margin-top:16px; letter-spacing:.06em;}
#dfail{font:400 12px/1.7 var(--mono); color:var(--crit); margin-top:14px; display:none;}
#drawer.fail #dfail{display:block;}
#dthanks{display:none; padding:40px 0;}
#dthanks .big-ok{font:600 clamp(26px,3vw,34px)/1.15 var(--disp); margin:0 0 12px;}
#dthanks p{color:var(--mut); font-size:15px;}
#drawer.sent form{display:none;}
#drawer.sent #dthanks{display:block;}

/* ============================================================
   v16.1 — the product kit: every mock is an app window that runs
   ============================================================ */
.app{position:relative; background:linear-gradient(180deg,#17120C,#100C08); border:1px solid rgba(255,255,255,.07);
  border-radius:8px; overflow:clip; font:400 12.5px/1.6 var(--mono); color:var(--fg); font-variant-numeric:tabular-nums;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 30px 70px rgba(0,0,0,.55); min-width:0; will-change:transform;}
.app.glass{background:rgba(20,15,10,.84); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);}
.app-bar{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.025);}
.ab-l{display:flex; align-items:center; gap:8px; font:500 10px/1.4 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--fg);}
.ab-l i{width:7px; height:7px; background:var(--pap); transform:rotate(45deg); flex:none;}
.ab-r{display:flex; align-items:center; gap:8px; font:500 9.5px/1.4 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--sub);}
.live-dot{width:6px; height:6px; border-radius:50%; background:var(--ok); flex:none;}
@media (prefers-reduced-motion:no-preference){ .live-dot{animation:ld 2.2s ease-in-out infinite;} @keyframes ld{50%{opacity:.35;}} }
.app-body{padding:13px 16px 14px;}
.app-foot{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.06); padding:9px 14px; font:400 10.5px/1.7 var(--mono); letter-spacing:.08em; color:var(--sub); text-transform:uppercase;}
/* rows inside an app (shared with legacy .panel / .mock markup) */
.app .ph, .app .mh{border-bottom:0; padding-bottom:0; margin-bottom:0;}
.app .row{display:grid; grid-template-columns:62px 1fr; gap:0 12px; padding:6px 0;}
.app .row div{color:var(--mut);}
.app .row div b{color:var(--fg); font-weight:500;}
.app .tag{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--pap);}
.app .sec{font:500 10px/1.4 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--sub); margin:12px 0 4px;}
.app .sec:first-child{margin-top:0;}
.app .it{display:grid; grid-template-columns:72px 1fr; gap:0 10px; padding:4px 0;}
.app .it i{font-style:normal; color:var(--pap); font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding-top:2px;}
.app .it em{font-style:normal; color:var(--sub);}
.app .gorow{display:flex; align-items:center; gap:12px; margin:0; padding:0; border:0; flex-wrap:wrap;}
/* chips, owners, status */
.chip{display:inline-block; font:500 8.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--line2); border-radius:3px; padding:3px 5px; color:var(--sub); vertical-align:1px; margin-right:6px;}
.chip.src{color:var(--mut);}
.chip.ok{color:var(--ok); border-color:rgba(93,202,165,.4);}
.chip.warn{color:var(--warn); border-color:rgba(245,197,24,.35);}
.chip.crit{color:var(--crit); border-color:rgba(226,75,74,.4);}
.chip.pap{color:var(--pap); border-color:rgba(255,135,0,.45);}
.avx{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; flex:none;
  background:var(--bg3); border:1px solid var(--line2); border-radius:4px; font:500 8.5px/1 var(--mono); letter-spacing:.06em; color:var(--mut);}
/* board rows */
.b-row{display:grid; grid-template-columns:28px 1fr auto; gap:0 10px; align-items:center; padding:7px 0; border-top:1px solid rgba(255,255,255,.05);}
.b-row:first-of-type{border-top:0;}
.b-row .bt{color:var(--mut); font-size:12px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.b-row .bt b{color:var(--fg); font-weight:500;}
/* chat rows */
.c-row{display:grid; grid-template-columns:70px 1fr; gap:0 10px; padding:5px 0;}
.c-row i{font-style:normal; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--pap); padding-top:2px;}
.c-row.sys i{color:var(--ok);}
.c-row div{color:var(--mut);}
.c-row div b{color:var(--fg); font-weight:500;}
.type-dots{display:inline-flex; gap:4px; padding:4px 0;}
.type-dots i{width:5px; height:5px; border-radius:50%; background:var(--sub);}
@media (prefers-reduced-motion:no-preference){
  .type-dots i{animation:td 1s ease-in-out infinite;}
  .type-dots i:nth-child(2){animation-delay:.15s;} .type-dots i:nth-child(3){animation-delay:.3s;}
  @keyframes td{40%{transform:translateY(-3px); background:var(--mut);}}
}
/* layer browser */
.lay{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:0;}
.lay-list{border-right:1px solid rgba(255,255,255,.06); padding-right:4px;}
.lay-item{padding:8px 10px; font-size:11.5px; color:var(--sub); border-left:2px solid transparent; cursor:default; transition:all .3s; border-radius:0 4px 4px 0;}
.lay-item.sel{color:var(--fg); border-left-color:var(--pap); background:rgba(255,135,0,.05);}
.lay-det{padding:4px 0 4px 16px; position:relative; min-width:0;}
.lay-det .kr{font:600 15px/1.35 var(--disp); margin-bottom:9px; letter-spacing:-.01em;}
.lay-det .km{font-size:11px; line-height:2; color:var(--mut);}
.lay-det .km b{color:var(--pap); font-weight:500;}
.lay-reads{margin-top:10px;}
.stamp{position:absolute; right:2px; top:0; font:600 10px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--pap); border:1.5px solid var(--pap); border-radius:3px; padding:5px 7px; transform:rotate(-5deg) scale(1); opacity:0;}
.stamp.on{opacity:1;}
@media (prefers-reduced-motion:no-preference){ .stamp.on{animation:stamp .4s cubic-bezier(.2,2.2,.4,1);} @keyframes stamp{0%{transform:rotate(-5deg) scale(1.8); opacity:0;} 100%{transform:rotate(-5deg) scale(1); opacity:1;}} }
/* gate log */
.g-row{display:grid; grid-template-columns:70px 1fr; gap:0 10px; padding:4px 0; font-size:11.5px;}
.g-row i{font-style:normal; color:var(--sub); font-size:10.5px;}
.g-row .v-ok{color:var(--ok);} .g-row .v-warn{color:var(--warn);} .g-row .v-crit{color:var(--crit);} .g-row .v-pap{color:var(--pap);}
.g-row div{color:var(--mut);}
/* research */
.q-row{display:flex; gap:10px; align-items:baseline; padding-bottom:9px; border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:9px;}
.q-row i{font-style:normal; color:var(--pap); font:500 10px/1.6 var(--mono); letter-spacing:.14em;}
.q-row b{color:var(--fg); font-weight:500; font-size:12.5px;}
.scanline{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--sub); padding:4px 0;}
.f-row{display:grid; grid-template-columns:26px 1fr; gap:0 10px; padding:5px 0; font-size:12px; color:var(--mut);}
.f-row i{font-style:normal; color:var(--pap); font-size:10px; padding-top:2px;}
.f-row b{color:var(--fg); font-weight:500;}
/* replay engine states */
[data-live] .lv{opacity:0; transform:translateY(8px); transition:opacity .32s ease, transform .32s ease;}
[data-live] .lv.in{opacity:1; transform:none;}
[data-live].static .lv{opacity:1; transform:none; transition:none;}
/* home showcase strip */
.showcase{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2.5vw,28px); margin-top:52px; align-items:start;}
@media (max-width:900px){ .showcase{grid-template-columns:1fr;} }

[data-live] .pool:not(.in){display:none;}
[data-live].static .pool{display:block;}

/* v16.2 — scenes: one component, several stories */
.scene[hidden]{display:none;}
.sdots{display:inline-flex; gap:6px; align-items:center; margin-left:12px;}
.sdots i{width:5px; height:5px; transform:rotate(45deg); background:var(--line2); transition:background .4s;}
.sdots i.on{background:var(--pap);}
.ab-t{min-width:0;}
.lvl{display:inline-block; font:500 8.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; border-radius:3px; padding:3px 6px; border:1px solid var(--line2); color:var(--sub);}
.lvl.l3{color:var(--ok); border-color:rgba(93,202,165,.4);}
.lvl.l2{color:var(--fg); border-color:rgba(245,241,234,.35);}
.lvl.l1{color:var(--mut);}
.stat-strip{display:flex; gap:18px 26px; flex-wrap:wrap; padding:8px 0 4px;}
.stat-strip b{display:block; font:600 22px/1.1 var(--disp); color:var(--fg); letter-spacing:-.01em;}
.stat-strip span{font:500 9px/1.6 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--sub);}
.rstamp{position:relative;}
.rstamp .stamp{position:static; display:inline-block; margin-left:10px; vertical-align:1px;}

/* v16.8 — standard auth card */
.auth{max-width:380px; margin:0 auto; background:var(--bg3); border:1px solid var(--line2); border-radius:8px; padding:30px 28px 26px;}
.auth h1{font:600 24px/1.2 var(--disp); margin:0 0 6px; max-width:none;}
.auth .sub2{font-size:13.5px; color:var(--sub); margin:0 0 24px;}
.auth .err2{display:none; font-size:13px; line-height:1.6; color:var(--crit); border:1px solid rgba(226,75,74,.35); border-radius:4px; padding:10px 12px; margin-bottom:16px;}
.auth.failed .err2{display:block;}
.auth .foot2{margin-top:18px; font-size:12.5px; color:var(--sub);}
.auth .foot2 a{color:var(--mut); text-decoration:none;}
.auth .foot2 a:hover{color:var(--pap);}

/* v16.11 — responsive hardening */
.job-row{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; padding:18px 0; border-top:1px solid var(--line2);}
.job-row:last-of-type{border-bottom:1px solid var(--line2);}
.job-row .jt{flex:1 1 260px; min-width:0; font-weight:500; color:var(--fg); font-size:16.5px;}
.mpanels.two{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:820px){ .mpanels.two{grid-template-columns:1fr;} }
/* v16.11 — services composition: alternation, centerpiece band, timeline rail */
.prod.flip .grid > div:first-child{order:2;}
@media (max-width:900px){ .prod.flip .grid > div:first-child{order:0;} }
.prod.band{border-top:0; margin-inline:calc(50% - 50vw); padding-inline:max(20px, calc(50vw - 640px));
  background:radial-gradient(900px 420px at 50% 0%, rgba(255,135,0,.05), transparent 70%), linear-gradient(180deg, rgba(23,18,12,.55), rgba(16,12,8,.25));
  border-block:1px solid var(--line2); padding-block:clamp(48px,6vw,84px);}
.prod.band h3{font-size:clamp(26px,3.6vw,40px); max-width:18ch;}
.prod.band .bandhead .lead{max-width:62ch;}
.prod.band .app{max-width:880px; margin-top:34px;}
.prod.band .featl{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 32px; max-width:1040px; margin-top:28px;}
@media (max-width:820px){ .prod.band .featl{grid-template-columns:1fr;} }
.mpanels.rail{background:transparent; border:0; gap:0 28px; position:relative;}
.mpanels.rail::before{content:""; position:absolute; left:0; right:0; top:5px; height:1px; background:var(--line2);}
.mpanels.rail .mp{background:transparent; padding:24px 0 0;}
.mpanels.rail .mp::before{content:""; position:absolute; top:0; left:0; width:11px; height:11px; border-radius:50%; background:var(--bg); border:1px solid var(--pap);}
@media (max-width:820px){ .mpanels.rail{gap:26px;} .mpanels.rail::before{display:none;} .mpanels.rail .mp{border-top:1px solid var(--line2); padding-top:20px;} .mpanels.rail .mp::before{display:none;} }
/* v16.11 — mobile menu, vertical strip, level-chip neutrality */
.menu-btn{display:none; font:500 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--fg); background:transparent; border:1px solid var(--line); padding:11px 14px; cursor:pointer;}
@media (max-width:820px){ .menu-btn{display:inline-block;} }
#mnav{position:fixed; inset:0; z-index:80; background:rgba(10,9,8,.97); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; pointer-events:none; transition:opacity .22s;}
body.mnav-open #mnav{opacity:1; pointer-events:auto;}
body.mnav-open{overflow:hidden;}
#mnav .mnav-in{display:flex; flex-direction:column; padding:92px max(24px, env(safe-area-inset-left, 0px)) 40px max(24px, env(safe-area-inset-left, 0px)); max-width:560px; margin:0 auto;}
#mnav a{font:600 25px/1 var(--disp); letter-spacing:-.01em; color:var(--fg); text-decoration:none; border-bottom:1px solid var(--line); padding:17px 2px;}
#mnav a.mbook{margin-top:26px; border:1px solid var(--pap); color:var(--pap); font:500 12px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; text-align:center; padding:16px;}
#mclose{position:absolute; top:20px; right:20px; z-index:81; font:500 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--fg); background:transparent; border:1px solid var(--line); padding:11px 14px; cursor:pointer;}
.vstrip{display:flex; flex-wrap:wrap; gap:12px 26px; align-items:baseline; margin-top:clamp(40px,5vw,64px); padding-top:22px; border-top:1px solid var(--line2); font:500 12px/1.6 var(--mono); letter-spacing:.14em; text-transform:uppercase;}
.vstrip span{color:var(--sub);}
.vstrip a{color:var(--fg); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px;}
.vstrip a:hover{border-color:var(--pap);}
/* v16.12 — readability + a11y hardening */
nav.site .links a.btn, nav.site .links a.btn:hover{color:var(--ink);}
.btn.solid:hover, #dsend:hover, .fsend:hover{color:var(--ink);}
#mnav{visibility:hidden; transition:opacity .22s, visibility 0s .22s;}
body.mnav-open #mnav{visibility:visible; transition:opacity .22s, visibility 0s 0s;}
body.drawer-open{overflow:hidden;}
#drawer{overscroll-behavior:contain;}
html{scroll-padding-top:84px;}
.skip{position:fixed; top:-60px; left:16px; z-index:200; background:var(--pap); color:var(--ink); font:500 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; padding:12px 16px; text-decoration:none; transition:top .15s;}
.skip:focus{top:12px;}
.foot2 a{text-decoration:underline; text-underline-offset:3px;}
@media (prefers-reduced-motion: reduce){ *{transition-duration:.01ms !important;} }
/* v16.18 — class-based reveals (replaces scroll-tweened reveals) */
html.anim section .rev:not(.on), html.anim footer .rev:not(.on), html.anim .manifesto .big:not(.on), html.anim .closing h2:not(.on){opacity:0; transform:translateY(16px);}
html.anim section .rev:not(.done), html.anim footer .rev:not(.done), html.anim .manifesto .big:not(.done), html.anim .closing h2:not(.done){transition:opacity .65s cubic-bezier(.22,.61,.36,1), transform .65s cubic-bezier(.22,.61,.36,1);}

/* v16.22 — hamburger icon */
.menu-btn{display:none; width:46px; height:40px; padding:0; align-items:center; justify-content:center; background:transparent; border:1px solid var(--line); cursor:pointer;}
@media (max-width:820px){ .menu-btn{display:inline-flex;} }
.menu-btn .mb{display:flex; flex-direction:column; gap:4px;}
.menu-btn .mb i{display:block; width:18px; height:2px; background:var(--fg);}

/* v16.23 — platform sign-in card + legal page */
.auth{max-width:400px;}
.au-mark{display:flex; align-items:center; justify-content:center; gap:9px; margin-bottom:22px;}
.auth h1, .auth .rh{font:600 22px/1.2 var(--disp); margin:0 0 18px; max-width:none; text-align:center; letter-spacing:-.01em; color:var(--fg);}
.auth .sub2{text-align:center;}
.lblrow{display:flex; justify-content:space-between; align-items:baseline;}
.lblrow a{font-size:12px; color:var(--sub); text-decoration:none;}
.lblrow a:hover{color:var(--pap);}
.auth .err2 a{color:inherit; text-decoration:underline; text-underline-offset:2px;}
.ok2{font-size:13px; line-height:1.6; color:var(--ok); border:1px solid rgba(93,202,165,.35); border-radius:4px; padding:10px 12px; margin-bottom:16px;}
.ok2 b{color:var(--fg); font-weight:500;}
.auth .fsend{width:100%;}
.legal h2{font:600 17px/1.3 var(--disp); color:var(--fg); margin:34px 0 10px;}
.legal h2:first-child{margin-top:0;}
.legal p{font-size:15px; line-height:1.75; color:var(--mut); margin:0 0 10px;}
.legal a{color:var(--fg); text-decoration:underline; text-underline-offset:3px;}
/* v16.24 — scroll anchoring never keys off the animated mocks */
[data-live], [data-live] *{overflow-anchor:none;}