/* ================================================================
   PRODUCTION PULSE · REV G — "black ice"
   Dark cinematic system: near-black base, glass consoles, luminous
   cyan data accents, huge light display type, ambient depth.
   Type: Inter Tight / Hanken Grotesk / Martian Mono
   ================================================================ */
:root{
  --bg-0:#04070C;
  --bg-1:#060A11;
  --bg-2:#0A0F17;
  --bg-3:#0D141E;
  --line:#16202F;
  --line-soft:#101A28;
  --line-glow:rgba(47,220,242,.16);
  --text:#E9EFF6;
  --muted:#93A3B8;
  --dim:#5C6C7F;
  --cyan:#22C8E5;
  --cyan-hi:#2FDCF2;
  --cyan-glow:#2FDCF2;
  --steel:#1E5E95;
  --steel-hi:#3E8FE0;
  --run:#2FD68F;
  --warn:#F2B644;
  --down:#F0616B;
  --grad:linear-gradient(100deg,var(--cyan-glow) 0%,var(--cyan) 45%,var(--steel) 100%);
  --glow-cyan:0 0 24px rgba(47,220,242,.28);
  --shadow:0 26px 80px -30px rgba(0,0,0,.85);
  --font-d:"Inter Tight",system-ui,-apple-system,sans-serif;
  --font-b:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-m:"Martian Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --w:1180px;
  --r:12px;
  --navh:72px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
section[id],div[id].anchor{scroll-margin-top:calc(var(--navh) + 10px)}
body{
  background:var(--bg-1);color:var(--text);
  font-family:var(--font-b);font-weight:400;
  font-size:16.5px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(47,220,242,.028) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(47,220,242,.028) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 100% 80% at 50% 0%,black 20%,transparent 80%);
}
::selection{background:var(--cyan);color:#04070C}
img,svg{display:block}
a{color:var(--steel-hi);text-decoration:none}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}
.wrap{max-width:var(--w);margin:0 auto;padding:0 30px;position:relative;z-index:1}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--font-m);font-size:11px;font-weight:400;
  letter-spacing:.3em;text-transform:uppercase;color:var(--cyan-hi);
}
h1,h2,h3,h4{font-family:var(--font-d);color:var(--text)}
.display{
  font-weight:340;text-transform:none;
  font-size:clamp(46px,6.4vw,84px);line-height:1.06;letter-spacing:-0.028em;
}
.h2{
  font-weight:400;text-transform:none;
  font-size:clamp(30px,3.8vw,48px);line-height:1.08;letter-spacing:-0.024em;
}
.h3{font-weight:600;font-size:21px;line-height:1.25;letter-spacing:-0.015em}
.lead{font-size:clamp(16.5px,1.5vw,19px);color:var(--muted);line-height:1.72}
.mono{font-family:var(--font-m)}
/* padding-bottom extends the background paint area so descenders (y, g, p)
   survive background-clip:text; on inline elements it adds no layout height */
.grad-t{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.14em}

/* ---------- title block ---------- */
.tblock{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:10px 2px;margin-bottom:48px;position:relative;
}
.tblock::before,.tblock::after{
  content:"+";position:absolute;top:-9px;font-family:var(--font-m);
  font-size:11px;color:var(--cyan);
}
.tblock::before{left:-4px}.tblock::after{right:-4px}
.tb-l,.tb-r{font-family:var(--font-m);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase}
.tb-l{color:var(--text);font-weight:600}
.tb-l b{color:var(--cyan-hi);font-weight:600}
.tb-r{color:var(--dim)}
@media(max-width:680px){.tb-r{display:none}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-m);font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  padding:16px 28px;border-radius:5px;border:1px solid transparent;
  transition:transform .18s ease,box-shadow .18s ease,background .18s,border-color .18s;
  white-space:nowrap;
}
.btn-p{
  background:var(--grad);color:#03222B;
  box-shadow:0 0 0 1px rgba(47,220,242,.3),0 10px 34px -8px rgba(34,200,229,.45);
}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(47,220,242,.55),0 16px 46px -8px rgba(34,200,229,.65)}
.btn-g{background:rgba(10,15,23,.5);color:var(--text);border-color:var(--line)}
.btn-g:hover{border-color:var(--cyan);background:rgba(34,200,229,.08)}
.btn .arr{transition:transform .18s}
.btn:hover .arr{transform:translateX(4px)}

/* ================================================================
   NAVIGATION SYSTEM
   ================================================================ */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:70;background:var(--grad);box-shadow:0 0 14px rgba(47,220,242,.7)}
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--navh);
  background:rgba(4,7,12,.6);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:background .25s,border-color .25s;
}
.nav.on{background:rgba(4,7,12,.92);backdrop-filter:blur(18px);border-color:var(--line-soft)}
.nav-in{max-width:var(--w);margin:0 auto;padding:0 30px;height:100%;display:flex;align-items:center;gap:8px}
.nav-logo{height:29px;width:auto;flex:none;margin-right:26px}
.nav-menu{display:flex;align-items:center;gap:2px;height:100%}
.nav-item{position:relative;height:100%;display:flex;align-items:center}
.nav-top{
  display:flex;align-items:center;gap:7px;height:100%;padding:0 13px;
  font-family:var(--font-m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);transition:color .15s;position:relative;
}
.nav-top::after{
  content:"";position:absolute;left:13px;right:13px;bottom:0;height:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .2s;
}
.nav-item:hover .nav-top, .nav-top.active, .nav-item.open .nav-top{color:var(--cyan-hi)}
.nav-top.active::after{transform:scaleX(1)}
.nav-top .car{font-size:8px;color:var(--dim);transition:transform .2s}
.nav-item.open .car{transform:rotate(180deg)}
.drop{
  position:absolute;top:calc(100% + 1px);left:0;min-width:340px;
  background:rgba(10,15,23,.97);backdrop-filter:blur(22px);
  border:1px solid var(--line);border-top:2px solid var(--cyan);
  border-radius:0 0 10px 10px;padding:10px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s,transform .18s,visibility .18s;
  box-shadow:var(--shadow);
}
.nav-item:hover .drop, .nav-item.open .drop, .nav-item:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop a{
  display:grid;grid-template-columns:auto 1fr;gap:5px 14px;align-items:center;
  padding:13px 14px;border-radius:7px;transition:background .14s;
}
.drop a:hover{background:rgba(34,200,229,.09)}
.drop .dk{
  grid-row:span 2;align-self:start;margin-top:2px;
  font-family:var(--font-m);font-size:9.5px;letter-spacing:.1em;color:var(--cyan-hi);
  border:1px solid rgba(47,220,242,.35);border-radius:4px;padding:4px 7px;white-space:nowrap;
}
.drop .dt{font-family:var(--font-d);font-weight:600;font-size:15px;color:var(--text);letter-spacing:-0.01em}
.drop .dd{font-size:12.5px;color:var(--dim);line-height:1.45}
.drop hr{border:none;border-top:1px solid var(--line-soft);margin:8px 6px}
.nav-cta{margin-left:auto;padding:12px 22px;font-size:11px}
.nav-burger{
  display:none;margin-left:auto;border:1px solid var(--line);border-radius:5px;
  padding:10px 13px;color:var(--text);font-family:var(--font-m);font-size:10.5px;letter-spacing:.2em;
}
@media(max-width:1020px){
  .nav-menu{display:none}
  .nav-cta{display:none}
  .nav-burger{display:block}
}

/* mobile full-screen menu */
.mnav{
  position:fixed;inset:0;z-index:80;background:rgba(4,7,12,.98);backdrop-filter:blur(20px);
  padding:26px 30px 40px;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s;
}
.mnav.open{opacity:1;visibility:visible}
.mnav-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px}
.mnav-x{border:1px solid var(--line);border-radius:5px;padding:10px 14px;font-family:var(--font-m);font-size:10.5px;letter-spacing:.2em;color:var(--text)}
.mnav .mgroup{margin-bottom:28px}
.mnav .mg-t{font-family:var(--font-m);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--cyan-hi);margin-bottom:10px}
.mnav a.ml{
  display:block;padding:13px 2px;border-bottom:1px solid var(--line-soft);
  font-family:var(--font-d);font-weight:600;font-size:19px;color:var(--text);letter-spacing:-0.015em;
}
.mnav a.ml small{display:block;font-family:var(--font-b);font-weight:400;font-size:12.5px;color:var(--dim);margin-top:2px}

/* sheet rail (right edge) */
.rail{
  position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:14px;
}
.rail a{position:relative;display:flex;align-items:center;justify-content:flex-end}
.rail i{
  width:8px;height:8px;border-radius:50%;border:1px solid var(--dim);
  background:transparent;transition:all .2s;display:block;
}
.rail a.on i{background:var(--cyan-hi);border-color:var(--cyan-hi);box-shadow:0 0 12px rgba(47,220,242,.8)}
.rail span{
  position:absolute;right:20px;white-space:nowrap;
  font-family:var(--font-m);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan-hi);
  opacity:0;transform:translateX(6px);transition:all .18s;pointer-events:none;
  background:rgba(4,7,12,.92);padding:5px 9px;border:1px solid var(--line);border-radius:4px;
}
.rail a:hover span,.rail a.on span{opacity:1;transform:none}
@media(max-width:1320px){.rail{display:none}}

/* ================================================================
   HERO
   ================================================================ */
.hero{
  position:relative;padding:calc(var(--navh) + 92px) 0 84px;
  background:var(--bg-0) url(assets/hero-poster.jpg) center/cover no-repeat;
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(4,7,12,.88) 0%,rgba(4,7,12,.55) 38%,rgba(4,7,12,.18) 62%,rgba(4,7,12,.5) 100%),
    linear-gradient(0deg,rgba(4,7,12,.85) 0%,transparent 30%,transparent 72%,rgba(4,7,12,.55) 100%);
}
.hero .fx{z-index:1;opacity:.4}
.hero .hero-orb{z-index:1}
.hero .wrap{z-index:2}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:60px;align-items:center}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr}}
.hero .display{margin:24px 0 22px}
.hero .lead{max-width:560px;margin-bottom:36px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-note{margin-top:28px;font-family:var(--font-m);font-size:11px;color:var(--dim);letter-spacing:.08em;line-height:1.9}
.hero-note b{color:var(--warn);font-weight:600}
.hero-mark{position:absolute;right:-150px;top:-130px;width:580px;opacity:.08;pointer-events:none}

/* standards marquee */
.ribbon{
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  background:rgba(6,10,17,.7);overflow:hidden;position:relative;
}
.ribbon::before,.ribbon::after{
  content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;
}
.ribbon::before{left:0;background:linear-gradient(90deg,var(--bg-0),transparent)}
.ribbon::after{right:0;background:linear-gradient(270deg,var(--bg-0),transparent)}
.ribbon-track{display:flex;width:max-content;animation:marq 36s linear infinite}
.ribbon:hover .ribbon-track{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ribbon-set{display:flex;align-items:center}
.rb{
  display:flex;align-items:center;gap:12px;padding:15px 34px;
  font-family:var(--font-m);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;
}
.rb i{width:5px;height:5px;background:var(--cyan-hi);transform:rotate(45deg);flex:none;box-shadow:0 0 8px rgba(47,220,242,.7)}

/* ---------- telemetry console ---------- */
.panel{
  background:linear-gradient(180deg,rgba(13,20,30,.82),rgba(7,11,18,.9));
  backdrop-filter:blur(16px);
  border:1px solid var(--line-glow);border-radius:14px;
  box-shadow:var(--shadow),0 0 60px -20px rgba(34,200,229,.18),inset 0 1px 0 rgba(233,239,246,.05);
  overflow:hidden;position:relative;
}
.panel-hd{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:14px 18px;border-bottom:1px solid var(--line-soft);
  font-family:var(--font-m);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
}
.panel-hd b{color:var(--text);font-weight:600}
.live-dot{display:inline-flex;align-items:center;gap:7px;color:var(--run)}
.live-dot i{width:7px;height:7px;border-radius:50%;background:var(--run);box-shadow:0 0 10px var(--run);animation:blip 2s infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.35}}
.tele-top{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid var(--line-soft)}
.kpi{padding:16px 18px;border-right:1px solid var(--line-soft)}
.kpi:last-child{border-right:none}
.kpi-l{font-family:var(--font-m);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.kpi-v{font-family:var(--font-m);font-size:25px;font-weight:600;margin-top:6px;color:var(--text)}
.kpi-v small{font-size:13px;color:var(--muted)}
.kpi-v.c{color:var(--cyan-hi);text-shadow:0 0 22px rgba(47,220,242,.45)}
.wave-wrap{padding:6px 10px 0;border-bottom:1px solid var(--line-soft);background:rgba(4,7,12,.4)}
.wave-wrap svg{width:100%;height:60px;overflow:visible}
.mrows{padding:4px 0}
.mrow{
  display:grid;grid-template-columns:15px minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:8px 14px;font-family:var(--font-m);font-size:10.5px;
  border-bottom:1px dashed var(--line-soft);
}
.mrow:last-child{border-bottom:none}
.mdot{width:9px;height:9px;border-radius:50%}
.mdot.run{background:var(--run);box-shadow:0 0 8px rgba(47,214,143,.7)}
.mdot.set{background:var(--warn);box-shadow:0 0 8px rgba(242,182,68,.7)}
.mdot.idle{background:var(--dim)}
.mtxt{display:flex;flex-direction:column;min-width:0;line-height:1.45}
.mname{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mjob{color:var(--dim);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mstat{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;text-align:right}
.mstat.run{color:var(--run)}.mstat.set{color:var(--warn)}.mstat.idle{color:var(--dim)}
.ledger{background:rgba(4,7,12,.55)}
.ledger-hd{padding:11px 18px 4px;font-family:var(--font-m);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--steel-hi)}
.ledger-rows{padding:2px 0 10px;min-height:128px}
.lrow{
  display:grid;grid-template-columns:auto 104px minmax(0,1fr) auto;gap:12px;align-items:baseline;
  padding:5px 18px;
  font-family:var(--font-m);font-size:10px;color:var(--muted);
  animation:lin .4s ease both;
}
@keyframes lin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.lrow .lt{color:var(--dim)}
.lrow .lk{color:var(--cyan-hi);white-space:nowrap}
.lrow .lk.rev{color:var(--run)}
.lrow .lk.qtn{color:var(--warn)}
.lrow .lm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .ok{color:var(--run);white-space:nowrap}

/* ---------- proof strip ---------- */
.proof{border-bottom:1px solid var(--line-soft);background:var(--bg-2)}
.proof-in{display:grid;grid-template-columns:repeat(4,1fr)}
.pcell{padding:28px 22px;border-left:1px solid var(--line-soft)}
.pcell:first-child{border-left:none}
.pcell .pv{font-family:var(--font-d);font-weight:600;font-size:16.5px;color:var(--text);line-height:1.35;letter-spacing:-0.012em}
.pcell .pnum{
  font-family:var(--font-m);font-weight:600;font-size:clamp(28px,2.8vw,42px);
  color:var(--cyan-hi);text-shadow:0 0 24px rgba(47,220,242,.35);line-height:1.1;
}
.pcell .pk{font-family:var(--font-m);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-top:9px}
@media(max-width:900px){.proof-in{grid-template-columns:1fr 1fr}.pcell:nth-child(3){border-left:none}}
@media(max-width:540px){.proof-in{grid-template-columns:1fr}.pcell{border-left:none;border-top:1px solid var(--line-soft)}.pcell:first-child{border-top:none}}

/* ---------- sections ---------- */
section{padding:100px 0;position:relative}
section.alt{background:var(--bg-2)}
.sec-hd{max-width:790px;margin-bottom:54px}
.sec-hd .h2{margin:18px 0 20px}

/* pains */
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.pains{grid-template-columns:1fr}}
.pain{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:30px 27px;position:relative}
.pain::before{
  content:attr(data-tag);position:absolute;top:-11px;left:20px;
  font-family:var(--font-m);font-size:9px;letter-spacing:.24em;
  background:var(--bg-1);border:1px solid var(--down);color:var(--down);
  padding:4px 10px;border-radius:4px;text-transform:uppercase;
}
.pain h3{font-size:19px;margin-bottom:11px;font-weight:600;font-family:var(--font-d);letter-spacing:-0.015em}
.pain p{color:var(--muted);font-size:15px;line-height:1.66}

/* modules */
.mods{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media(max-width:900px){.mods{grid-template-columns:1fr}}
.mod{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:32px 30px;transition:transform .2s,border-color .2s,box-shadow .2s;
  display:flex;flex-direction:column;
}
.mod:hover{transform:translateY(-4px);border-color:rgba(47,220,242,.4);box-shadow:0 24px 60px -24px rgba(34,200,229,.3)}
.mod.base{grid-column:1/-1;background:linear-gradient(120deg,rgba(30,94,149,.22),rgba(34,200,229,.08) 60%,transparent),var(--bg-2);border-left:3px solid var(--cyan)}
.mod.wide{grid-column:1/-1}
.mod-hd{display:flex;align-items:center;gap:14px;margin-bottom:15px}
.mod-glyph{width:38px;height:36px;flex:none}
.mod-code{
  font-family:var(--font-m);font-size:9.5px;letter-spacing:.14em;color:var(--steel-hi);
  border:1px solid var(--line);padding:4px 8px;border-radius:4px;
}
.mod-tag{
  margin-left:auto;font-family:var(--font-m);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cyan-hi);border:1px solid rgba(47,220,242,.35);
  padding:5px 9px;border-radius:4px;white-space:nowrap;
}
.mod-tag.w{color:var(--warn);border-color:rgba(242,182,68,.4)}
.mod p{color:var(--muted);font-size:15px;margin-bottom:20px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.chip{
  font-family:var(--font-m);font-size:10px;color:var(--muted);
  border:1px solid var(--line);background:var(--bg-1);
  padding:6px 10px;border-radius:5px;letter-spacing:.04em;
}

/* ---------- spotlights (program / governor / pilot) ---------- */
.spot{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media(max-width:1000px){.spot{grid-template-columns:1fr}}
.spot-feats{border-top:1px solid var(--line)}
.sfeat{display:grid;grid-template-columns:30px 1fr;gap:16px;padding:20px 2px;border-bottom:1px solid var(--line)}
.sfeat .si{color:var(--cyan-hi);font-family:var(--font-m);font-size:11px;padding-top:4px}
.sfeat h4{font-size:17.5px;font-weight:600;margin-bottom:5px;letter-spacing:-0.013em}
.sfeat p{color:var(--muted);font-size:14.5px;line-height:1.62}
.cycle{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--font-m);font-size:10px;letter-spacing:.1em;margin:26px 0 8px}
.cy{padding:8px 13px;border-radius:5px;border:1px solid var(--line);color:var(--muted);text-transform:uppercase;background:var(--bg-2)}
.cy.p{border-color:var(--warn);color:var(--warn)}
.cy.g{border-color:var(--run);color:var(--run);box-shadow:0 0 16px -6px rgba(47,214,143,.6)}
.cy.o{border-color:var(--dim);color:var(--dim)}
.cy-arr{color:var(--dim)}
.gcode{background:#070B12;border:1px solid var(--line-glow);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.gcode-hd{display:flex;gap:10px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line-soft);font-family:var(--font-m);font-size:9.5px;color:var(--dim);letter-spacing:.08em}
.gcode-hd .tab{background:var(--bg-2);border:1px solid var(--line);border-bottom-color:var(--cyan);padding:6px 12px;border-radius:5px 5px 0 0;color:var(--text)}
.gcode pre{padding:16px 18px;font-family:var(--font-m);font-size:11px;line-height:1.9;color:var(--muted);overflow-x:auto}
.gc-g{color:var(--cyan-hi)}.gc-n{color:var(--steel-hi)}.gc-c{color:#57855F;font-style:italic}.gc-v{color:var(--warn)}
.gc-diff{background:rgba(47,214,143,.12);display:inline-block;width:100%}
.gc-diff-r{background:rgba(240,97,107,.12);display:inline-block;width:100%;text-decoration:line-through;text-decoration-color:rgba(240,97,107,.6)}
.gcode-ft{padding:11px 16px;border-top:1px solid var(--line-soft);font-family:var(--font-m);font-size:10px;color:var(--dim);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;letter-spacing:.06em}
.gcode-ft b{color:var(--warn);font-weight:600}
.finePrint{font-size:12.5px;color:var(--dim);margin-top:18px;line-height:1.65}

/* ---------- judgment artifacts (governor) ---------- */
.artifacts{display:flex;flex-direction:column;gap:16px;position:sticky;top:calc(var(--navh) + 20px)}
.artifact{background:#070B12;border:1px solid var(--line-glow);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.artifact-hd{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line-soft);font-family:var(--font-m);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.artifact-hd .ok{color:var(--run)}
.artifact-hd .wn{color:var(--warn)}
.artifact-bd{padding:16px 18px;font-family:var(--font-m);font-size:11px;line-height:2.05;color:var(--muted)}
.artifact-bd .k{color:var(--dim)}
.artifact-bd .hl{color:var(--warn)}
.artifact-bd .okv{color:var(--run)}
.artifact-bd .steel2{color:var(--cyan-hi)}
.artifact-bd .hsh{color:var(--dim);font-size:10px}
.ladder{display:flex;flex-direction:column;padding:14px 18px}
.rung{display:flex;align-items:center;gap:13px;font-family:var(--font-m);font-size:11px;padding:8px 0;color:var(--muted)}
.rung .box{width:13px;height:13px;border:1px solid var(--cyan-hi);flex:none;border-radius:2px}
.rung .box.fill{background:var(--cyan-hi);box-shadow:0 0 10px rgba(47,220,242,.6)}
.rung .arrow{color:var(--dim)}
.rung small{color:var(--dim);margin-left:auto;font-size:9.5px;text-align:right}

/* ---------- pilot chat ---------- */
.chat{background:#070B12;border:1px solid var(--line-glow);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.chat-hd{display:flex;align-items:center;gap:10px;padding:13px 17px;border-bottom:1px solid var(--line-soft);font-family:var(--font-m);font-size:9.5px;color:var(--dim);letter-spacing:.14em;text-transform:uppercase}
.chat-hd .avatar{width:22px;height:22px;border-radius:5px;background:var(--grad);color:#03222B;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px}
.chat-bd{padding:20px;display:flex;flex-direction:column;gap:14px}
.msg{max-width:88%;font-size:13px;line-height:1.68;padding:12px 15px;border-radius:8px}
.msg.user{align-self:flex-end;background:var(--bg-2);border:1px solid var(--line);color:var(--text)}
.msg.pilot{align-self:flex-start;background:rgba(47,214,143,.06);border:1px solid rgba(47,214,143,.25);color:var(--muted)}
.msg.pilot b{color:var(--text)}
.cite{font-family:var(--font-m);font-size:9px;color:var(--cyan-hi);background:rgba(34,200,229,.1);border:1px solid rgba(34,200,229,.4);border-radius:3px;padding:1.5px 6px;white-space:nowrap}
.msg.refused{align-self:flex-start;background:rgba(240,97,107,.07);border:1px solid rgba(240,97,107,.32);color:var(--muted);font-family:var(--font-m);font-size:10.5px;line-height:1.8}
.msg.refused .x{color:var(--down);font-weight:600}

/* ---------- comparison ---------- */
.cmp{margin-top:64px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg-2);box-shadow:var(--shadow)}
.cmp-hd{padding:13px 18px;border-bottom:1px solid var(--line);font-family:var(--font-m);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.cmp-row{display:grid;grid-template-columns:200px 1fr 1fr;border-top:1px solid var(--line-soft)}
.cmp-row>div{padding:17px 20px;font-size:14px;line-height:1.6}
.cmp-row .lbl{color:var(--text);font-weight:600;border-right:1px solid var(--line-soft)}
.cmp-row .them{color:var(--dim);border-right:1px solid var(--line-soft)}
.cmp-row .us{color:var(--muted)}
.cmp-row .us b{color:var(--cyan-hi);font-weight:600}
.cmp-head>div{font-family:var(--font-m);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.cmp-head .us{color:var(--cyan-hi)!important}
@media(max-width:820px){.cmp-row{grid-template-columns:1fr}.cmp-row .lbl,.cmp-row .them{border-right:none;border-bottom:1px dashed var(--line-soft)}}

/* ---------- CMMC ---------- */
.cmmc{
  background:radial-gradient(800px 440px at 20% 0%,rgba(34,200,229,.1),transparent 60%),var(--bg-0);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.cmmc-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:center}
@media(max-width:960px){.cmmc-grid{grid-template-columns:1fr}}
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:32px 0 18px}
.cnt{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:20px 8px;text-align:center}
.cnt b{display:block;font-family:var(--font-m);font-size:clamp(20px,2.6vw,30px);font-weight:600;color:var(--cyan-hi);text-shadow:0 0 22px rgba(47,220,242,.4)}
.cnt span{font-family:var(--font-m);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);display:block;margin-top:8px;line-height:1.6}
.cmmc-date{font-family:var(--font-m);font-size:10.5px;color:var(--dim);letter-spacing:.08em}
.cmmc-list{border-top:1px solid var(--line)}
.cmmc-li{display:grid;grid-template-columns:24px 1fr;gap:14px;padding:18px 2px;border-bottom:1px solid var(--line)}
.cmmc-li .ci{color:var(--cyan-hi);font-family:var(--font-m)}
.cmmc-li p{color:var(--muted);font-size:15px;line-height:1.62}
.cmmc-li p b{color:var(--text);font-weight:600}

/* ---------- deployment ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:st}
@media(max-width:900px){.steps{grid-template-columns:1fr}}
.step{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:30px 27px;position:relative;counter-increment:st}
.step::before{
  content:"0" counter(st);position:absolute;top:24px;right:24px;
  font-family:var(--font-m);font-size:12px;color:var(--steel-hi);letter-spacing:.1em;
}
.step h3{font-size:19px;margin-bottom:11px;padding-right:46px;font-family:var(--font-d);font-weight:600;letter-spacing:-0.015em}
.step p{color:var(--muted);font-size:14.5px;line-height:1.66}
.dep-note{
  margin-top:26px;padding:24px 28px;border:1px dashed rgba(62,143,224,.5);border-radius:var(--r);
  background:rgba(30,94,149,.1);color:var(--muted);font-size:15px;line-height:1.68;
}
.dep-note b{color:var(--text)}

/* ---------- roadmap ---------- */
.road{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1000px){.road{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.road{grid-template-columns:1fr}}
.rd{border:1px dashed var(--line);border-radius:var(--r);padding:28px 25px;background:rgba(10,15,23,.6)}
.rd .rk{font-family:var(--font-m);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--warn);margin-bottom:13px}
.rd.grad{border-style:solid;border-color:rgba(47,214,143,.45)}
.rd.grad .rk{color:var(--run)}
.rd h3{font-size:18px;margin-bottom:9px;font-family:var(--font-d);font-weight:600;letter-spacing:-0.015em}
.rd p{color:var(--dim);font-size:13.5px;line-height:1.62}
.rd .go2{display:inline-block;margin-top:12px;font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-hi)}

/* ---------- doctrine ---------- */
.doct{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
@media(max-width:960px){.doct{grid-template-columns:1fr}}
.doct-quote{
  font-family:var(--font-d);font-weight:500;font-size:clamp(21px,2.3vw,27px);line-height:1.38;letter-spacing:-0.018em;
  color:var(--text);border-left:3px solid var(--cyan);padding-left:26px;margin:28px 0;
}
.prov-panel{
  border:1px solid var(--line);border-radius:16px;padding:38px;
  background:linear-gradient(140deg,rgba(30,94,149,.22),rgba(34,200,229,.07) 55%,transparent),var(--bg-2);
  box-shadow:var(--shadow);
}
.prov-stat{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:28px;border:1px solid var(--line-soft);border-radius:10px;overflow:hidden}
.pstat{background:var(--bg-0);padding:22px}
.pstat b{display:block;font-family:var(--font-m);font-size:23px;font-weight:600;color:var(--cyan-hi)}
/* direct child only: the animated values are spans nested inside the b,
   and a descendant selector here restyles them as captions */
.pstat>span{font-family:var(--font-m);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}

/* ---------- final ---------- */
.final{
  text-align:center;padding:120px 0;
  background:radial-gradient(760px 420px at 50% 112%,rgba(34,200,229,.18),transparent 65%),var(--bg-0);
  border-top:1px solid var(--line-soft);
}
.final .display{font-size:clamp(34px,5vw,62px);margin:20px auto 22px;max-width:860px}
.final .lead{max-width:640px;margin:0 auto 38px}
.final .fineprint{max-width:640px;margin:26px auto 0;font-family:var(--font-m);font-size:10px;color:var(--dim);line-height:1.9;letter-spacing:.04em}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line-soft);background:var(--bg-0);padding:64px 0 42px}
.ft{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 1fr;gap:36px}
@media(max-width:900px){.ft{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.ft{grid-template-columns:1fr}}
.ft-logo{height:34px;width:auto;margin-bottom:18px}
.ft small{display:block;font-family:var(--font-m);font-size:10.5px;color:var(--dim);line-height:2.1;letter-spacing:.06em}
.ft-col h5{font-family:var(--font-m);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--cyan-hi);margin-bottom:16px;font-weight:400}
.ft-col a{display:block;padding:6px 0;font-size:14px;color:var(--muted);transition:color .15s}
.ft-col a:hover{color:var(--cyan-hi)}
.ft-base{margin-top:48px;padding-top:24px;border-top:1px solid var(--line-soft);font-family:var(--font-m);font-size:10px;color:var(--dim);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;letter-spacing:.06em}

/* ---------- solutions ---------- */
.sols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.sols{grid-template-columns:1fr}}
.sol{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:34px 28px 30px;display:flex;flex-direction:column;position:relative;transition:transform .2s,border-color .2s,box-shadow .2s}
.sol:hover{transform:translateY(-4px);border-color:rgba(47,220,242,.4);box-shadow:0 24px 60px -24px rgba(34,200,229,.3)}
.sol.lead-sol{border-color:rgba(34,200,229,.5);box-shadow:0 0 0 1px rgba(34,200,229,.22),0 24px 60px -24px rgba(34,200,229,.35)}
.sol .sk{font-family:var(--font-m);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--steel-hi);margin-bottom:14px}
.sol.lead-sol .sk{color:var(--cyan-hi)}
.sol .stag{position:absolute;top:-11px;right:20px;font-family:var(--font-m);font-size:9px;letter-spacing:.2em;background:var(--grad);color:#03222B;font-weight:600;padding:4px 10px;border-radius:4px;text-transform:uppercase}
.sol h3{font-family:var(--font-d);font-weight:600;font-size:20px;margin-bottom:12px;line-height:1.22;letter-spacing:-0.016em}
.sol p{color:var(--muted);font-size:14.5px;line-height:1.66;margin-bottom:18px}
.sol .chips{margin-bottom:22px;margin-top:0}
.sol .go{margin-top:auto;font-family:var(--font-m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-hi);display:inline-flex;gap:8px;align-items:center}
.sol .go .arr{transition:transform .18s}
.sol .go:hover .arr{transform:translateX(4px)}

/* ---------- platform at a glance ---------- */
.glance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1000px){.glance-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.glance-grid{grid-template-columns:1fr}}
a.rd{display:block;text-decoration:none;transition:transform .2s,border-color .2s,box-shadow .2s;position:relative}
a.rd:hover{transform:translateY(-3px);border-color:rgba(47,220,242,.4);box-shadow:0 20px 50px -22px rgba(34,200,229,.3)}

/* live signal sparkline in each module card */
.spk{position:absolute;top:26px;right:22px;width:66px;height:17px;opacity:.75}
.spk path{
  fill:none;stroke:var(--cyan-hi);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:46 132;stroke-dashoffset:178;
  animation:spkRun 3.1s linear infinite;
  filter:drop-shadow(0 0 3px rgba(47,220,242,.55));
}
@keyframes spkRun{to{stroke-dashoffset:0}}
.glance-grid .rd:nth-child(2) .spk path{animation-duration:2.5s}
.glance-grid .rd:nth-child(3) .spk path{animation-duration:3.7s}
.glance-grid .rd:nth-child(4) .spk path{animation-duration:2.8s}
.glance-grid .rd:nth-child(5) .spk path{animation-duration:3.4s}
.glance-grid .rd:nth-child(6) .spk path{animation-duration:4.1s}
a.rd:hover .spk path{animation-duration:1.2s}

/* staggered grid reveals */
.pains .pain:nth-child(2),.glance-grid .rd:nth-child(2),.proof-in .pcell:nth-child(2){transition-delay:.1s}
.pains .pain:nth-child(3),.glance-grid .rd:nth-child(3),.proof-in .pcell:nth-child(3){transition-delay:.2s}
.glance-grid .rd:nth-child(4),.proof-in .pcell:nth-child(4){transition-delay:.3s}
.glance-grid .rd:nth-child(5){transition-delay:.4s}
.glance-grid .rd:nth-child(6){transition-delay:.5s}

/* ---------- journal tape ---------- */
.tape{
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  background:var(--bg-2);overflow:hidden;position:relative;
}
.tape::before,.tape::after{content:"";position:absolute;top:0;bottom:0;width:140px;z-index:2;pointer-events:none}
.tape::before{left:0;background:linear-gradient(90deg,var(--bg-1),transparent)}
.tape::after{right:0;background:linear-gradient(270deg,var(--bg-1),transparent)}
.tape-track{display:flex;width:max-content;animation:marq 44s linear infinite}
.tape:hover .tape-track{animation-play-state:paused}
.tape-set{display:flex;align-items:center}
.tp{
  display:inline-flex;align-items:center;gap:10px;padding:13px 30px;
  font-family:var(--font-m);font-size:10.5px;letter-spacing:.05em;color:var(--muted);white-space:nowrap;
  border-right:1px dashed var(--line-soft);
}
.tp .tk{font-style:normal;color:var(--cyan-hi);letter-spacing:.14em}
.tp .tk.ok{color:var(--run)}
.tp .tk.wn{color:var(--warn)}
.tp em{font-style:normal;color:var(--run);letter-spacing:.1em}

/* ---------- scroll spine (EKG down the page) ---------- */
.spine{position:absolute;left:44px;width:2px;background:var(--line-soft);z-index:5;display:none;pointer-events:none}
@media(min-width:1180px){.spine{display:block}}
.spine-fill{
  position:absolute;top:0;left:0;right:0;height:0;
  background:linear-gradient(180deg,rgba(62,143,224,.5),var(--cyan-hi));
  box-shadow:0 0 12px rgba(47,220,242,.45);
}
.spine-dot{
  position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
  width:9px;height:9px;border-radius:50%;background:var(--cyan-hi);
  box-shadow:0 0 16px rgba(47,220,242,.9);animation:blip 2s infinite;
}

/* ---------- governor console ---------- */
.console{
  border:1px solid var(--line-soft);border-radius:18px;background:var(--bg-1);
  overflow:hidden;margin:8px 0 54px;
  box-shadow:0 30px 80px -40px rgba(0,0,0,.8);
}
.con-hd{
  display:flex;align-items:center;gap:12px;padding:13px 20px;
  border-bottom:1px solid var(--line-soft);background:rgba(255,255,255,.02);
  font-family:var(--font-m);font-size:10px;letter-spacing:.18em;
}
.con-dot{width:8px;height:8px;border-radius:50%;background:var(--run);box-shadow:0 0 10px rgba(63,214,138,.8);animation:blip 2s infinite;flex:none}
.con-t{color:var(--text);font-weight:600}
.con-sub{color:var(--dim);letter-spacing:.14em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.con-clock{color:var(--cyan-hi);letter-spacing:.14em}
.con-grid{display:grid;grid-template-columns:1.5fr 1fr}
@media(max-width:920px){.con-grid{grid-template-columns:1fr}}
.con-ledger{border-right:1px solid var(--line-soft);min-width:0}
@media(max-width:920px){.con-ledger{border-right:none;border-bottom:1px solid var(--line-soft)}}
.cl-hd{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:12px 20px 10px;font-family:var(--font-m);font-size:9.5px;letter-spacing:.2em;color:var(--muted);
}
.cl-note{color:var(--dim);letter-spacing:.14em;font-size:8.5px}
.cl-note b{color:var(--warn);font-weight:600}
.cl-rows{padding:0 12px 14px;min-height:238px}
.clr{
  display:grid;grid-template-columns:62px 66px 96px minmax(0,1fr) 64px;gap:10px;align-items:center;
  padding:8px 10px;border-radius:8px;font-family:var(--font-m);font-size:10.5px;
  animation:conIn .35s ease both;
}
@keyframes conIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.clr:nth-child(odd){background:rgba(255,255,255,.02)}
.clr .t{color:var(--dim)}
.clr .det{color:var(--steel2, #7FB2E8);letter-spacing:.1em}
.clr .m{color:var(--text)}
.clr .claim{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clr .st{text-align:right;letter-spacing:.12em;font-weight:600}
.clr .st.pending{color:var(--warn);animation:blip 1.4s infinite}
.clr .st.hit{color:var(--run)}
.clr .st.miss{color:#E86A6A}
@media(max-width:560px){.clr{grid-template-columns:56px 1fr 58px}.clr .det,.clr .claim{display:none}}
.con-kpis{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line-soft)}
.ck{padding:18px 14px 16px;border-left:1px solid var(--line-soft);text-align:center}
.ck:first-child{border-left:none}
.ck b{
  display:block;font-family:var(--font-m);font-weight:600;font-size:clamp(17px,1.6vw,23px);
  color:var(--cyan-hi);text-shadow:0 0 18px rgba(47,220,242,.3);
}
.ck b i{font-style:normal;font-size:.62em;color:var(--muted)}
.ck span{display:block;margin-top:7px;font-family:var(--font-m);font-size:8px;letter-spacing:.16em;color:var(--dim)}
.con-auth{padding-bottom:16px}
.auth-chips{display:flex;gap:8px;flex-wrap:wrap;padding:2px 20px 0}
.achip{
  font-family:var(--font-m);font-size:9.5px;letter-spacing:.14em;cursor:pointer;
  padding:8px 12px;border-radius:999px;border:1px solid var(--line-soft);
  background:transparent;color:var(--dim);transition:border-color .2s,color .2s,box-shadow .2s;
}
.achip.done{color:var(--muted);border-color:rgba(63,214,138,.35)}
.achip.cur{color:var(--cyan-hi);border-color:rgba(47,220,242,.55);box-shadow:0 0 14px rgba(47,220,242,.2)}
.achip.sel,.achip:hover{color:var(--text);border-color:var(--cyan-hi)}
.auth-note{
  margin:12px 20px 0;font-size:12.5px;line-height:1.6;color:var(--muted);
  border-left:2px solid rgba(47,220,242,.4);padding-left:12px;min-height:60px;
}

/* ---------- system topology ---------- */
.topo{
  position:relative;border:1px solid var(--line-soft);border-radius:18px;overflow:hidden;
  background:
    linear-gradient(rgba(147,163,184,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(147,163,184,.04) 1px, transparent 1px),
    radial-gradient(80% 90% at 50% 45%, #081019 0%, var(--bg-1) 70%);
  background-size:44px 44px,44px 44px,auto;
  box-shadow:0 30px 80px -40px rgba(0,0,0,.8), inset 0 0 120px rgba(0,0,0,.5);
}
.topo-scroll{overflow-x:auto}
.topo-scroll svg{display:block;width:100%;min-width:940px;height:auto}
.topo-view{position:relative}
.topo-tabs{
  display:flex;align-items:center;gap:8px;padding:12px 16px;
  border-bottom:1px solid var(--line-soft);background:rgba(255,255,255,.02);
}
.ttab{
  font-family:var(--font-m);font-size:9.5px;letter-spacing:.16em;cursor:pointer;
  padding:9px 14px;border-radius:8px;border:1px solid var(--line-soft);
  background:transparent;color:var(--dim);transition:color .2s,border-color .2s,box-shadow .2s;
}
.ttab:hover{color:var(--muted);border-color:rgba(47,220,242,.4)}
.ttab.sel{color:var(--cyan-hi);border-color:rgba(47,220,242,.6);box-shadow:0 0 16px rgba(47,220,242,.18)}
.tt-note{
  margin-left:auto;font-family:var(--font-m);font-size:8.5px;letter-spacing:.22em;color:var(--dim);
}

/* ---------- tick pipeline view ---------- */
.pipe-hd{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:16px 18px 4px;font-family:var(--font-m);font-size:9.5px;letter-spacing:.2em;
}
.ph-k{color:var(--muted)}
.ph-n{color:var(--dim);letter-spacing:.14em}
.ph-n b{color:var(--cyan-hi);font-weight:600}
.lanes{display:grid;gap:2px;padding:10px 18px 4px}
.lane{display:grid;grid-template-columns:172px minmax(0,1fr);gap:14px;align-items:start;padding:11px 0;border-top:1px dashed var(--line-soft)}
.lane:first-child{border-top:none}
.lane-k{
  display:flex;align-items:center;gap:9px;padding-top:7px;
  font-family:var(--font-m);font-size:9px;letter-spacing:.18em;color:var(--muted);
}
.lane-k i{width:6px;height:6px;border-radius:50%;background:var(--steel2,#3E8FE0);flex:none}
.lane:nth-child(2) .lane-k i{background:#2F8FD6}
.lane:nth-child(3) .lane-k i{background:var(--cyan-hi)}
.lane:nth-child(4) .lane-k i{background:var(--warn)}
.lane:nth-child(5) .lane-k i{background:var(--run)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  font-family:var(--font-m);font-size:9.5px;letter-spacing:.1em;cursor:pointer;text-align:left;
  padding:8px 12px;border-radius:7px;border:1px solid var(--line-soft);
  background:rgba(255,255,255,.015);color:var(--dim);
  transition:color .18s,border-color .18s,box-shadow .18s,background .18s,transform .18s;
}
.chip.done{color:var(--muted);border-color:rgba(47,214,143,.28)}
.chip:hover,.chip:focus-visible{color:var(--text);border-color:rgba(47,220,242,.55);outline:none}
.chip.live{
  color:#04121A;background:var(--cyan-hi);border-color:var(--cyan-hi);
  box-shadow:0 0 20px rgba(47,220,242,.45);transform:translateY(-1px);
}
.pipe-detail{
  margin:8px 18px 14px;padding:15px 18px;border-radius:12px;
  border:1px solid var(--line-soft);background:rgba(8,13,22,.72);
  border-left:2px solid var(--cyan-hi);
}
.pd-hd{display:flex;gap:12px;align-items:baseline;font-family:var(--font-m);font-size:9px;letter-spacing:.2em}
.pd-n{color:var(--cyan-hi)}
.pd-k{color:var(--dim)}
.pd-t{font-family:var(--font-d);font-weight:600;font-size:18px;color:var(--text);margin:7px 0 6px;letter-spacing:-0.012em}
.pd-d{margin:0;font-size:13px;line-height:1.66;color:var(--muted);max-width:78ch}
@media(max-width:760px){
  .lane{grid-template-columns:1fr;gap:8px}
  .lane-k{padding-top:0}
}
.radar circle{fill:none;stroke:rgba(147,163,184,.055);stroke-width:1}
.xh path{stroke:rgba(147,163,184,.15);stroke-width:1}
.ztag{font-family:var(--font-m);font-size:8.5px;fill:#46566B;letter-spacing:.26em}
.zline{stroke:rgba(147,163,184,.13);stroke-width:1;stroke-dasharray:2 8;fill:none}

.tedge{stroke:rgba(147,163,184,.17);stroke-width:1.1;fill:none;transition:stroke .25s,opacity .25s}
.tedge.lit{stroke:rgba(47,220,242,.85);filter:drop-shadow(0 0 5px rgba(47,220,242,.5))}
.tflow{
  stroke:rgba(47,220,242,.55);stroke-width:2;fill:none;stroke-linecap:round;
  stroke-dasharray:4 60;animation:tflow 3.2s linear infinite;
  filter:drop-shadow(0 0 3px rgba(47,220,242,.6));
}
@keyframes tflow{to{stroke-dashoffset:-192}}

.tnode{cursor:pointer;outline:none;transition:opacity .25s}
.tnode .core{stroke:#33435C;stroke-width:1.5;transition:stroke .2s,filter .2s}
.tnode .nlab{font-family:var(--font-m);font-weight:600;font-size:11px;fill:var(--text);text-anchor:middle;letter-spacing:.08em}
.tnode .nsub{font-family:var(--font-m);font-size:9px;fill:var(--dim);text-anchor:middle;letter-spacing:.16em}
.tnode:hover .core,.tnode:focus .core,.tnode.on .core{
  stroke:var(--cyan-hi);filter:drop-shadow(0 0 10px rgba(47,220,242,.55));
}
.tnode.on .nsub{fill:var(--muted)}
.topo svg.focused .tnode:not(.on){opacity:.55}
.topo svg.focused .tedge:not(.lit){opacity:.45}

.ringr{
  fill:none;stroke:rgba(47,220,242,.3);stroke-width:1;stroke-dasharray:4 14;
  transform-box:fill-box;transform-origin:center;animation:trot 36s linear infinite;
}
.rev-spin{animation-duration:26s;animation-direction:reverse}
@keyframes trot{to{transform:rotate(360deg)}}
.tickr{fill:none;stroke:rgba(147,163,184,.25);stroke-width:1.4;stroke-dasharray:1.5 8.5}
.hcore{stroke:rgba(47,220,242,.55)}
.hub .core{filter:drop-shadow(0 0 14px rgba(47,220,242,.3))}

.acore{fill:#151007;stroke:rgba(242,182,68,.65)}
.ants{
  fill:none;stroke:rgba(242,182,68,.45);stroke-width:1.1;stroke-dasharray:5 6;
  animation:antsK 5s linear infinite;
}
@keyframes antsK{to{stroke-dashoffset:-88}}
.tnode.air:hover .core,.tnode.air:focus .core,.tnode.air.on .core{
  stroke:var(--warn);filter:drop-shadow(0 0 10px rgba(242,182,68,.55));
}

.jbr path{fill:none;stroke:rgba(47,220,242,.4);stroke-width:1.3}
.jseq{font-family:var(--font-m);font-size:9px;fill:var(--run);text-anchor:middle;letter-spacing:.08em}
.jcore.flash{stroke:var(--run)!important;filter:drop-shadow(0 0 12px rgba(47,214,143,.55))!important}

.mname{font-family:var(--font-m);font-size:9.5px;fill:var(--text);text-anchor:start;letter-spacing:.06em}
.mstat{font-family:var(--font-m);font-size:8px;text-anchor:middle;letter-spacing:.14em}
.mstat.ok{fill:rgba(47,214,143,.75)}
.mstat.idle{fill:rgba(242,182,68,.7)}
.led.on{fill:var(--run);animation:blip 1.6s infinite;filter:drop-shadow(0 0 4px rgba(47,214,143,.8))}
.led.idle{fill:var(--warn)}

.qpulse{fill:var(--cyan-hi);opacity:0;filter:drop-shadow(0 0 8px rgba(47,220,242,.95))}
.qtrail{fill:var(--cyan-hi);opacity:0}
.ripple{
  fill:none;stroke:var(--cyan-hi);stroke-width:1.6;opacity:0;
  transform-box:fill-box;transform-origin:center;
}
.ripple.go{animation:ripK .8s ease-out forwards}
@keyframes ripK{0%{opacity:.85;transform:scale(.25)}100%{opacity:0;transform:scale(2.4)}}
.topo-q{
  position:absolute;top:20px;left:20px;max-width:380px;
  font-family:var(--font-m);font-size:11px;line-height:1.5;color:var(--text);
  background:rgba(8,13,22,.88);border:1px solid var(--line-soft);border-radius:10px;
  padding:11px 15px;opacity:0;transform:translateY(-6px);
  transition:opacity .4s,transform .4s,border-color .3s;pointer-events:none;
}
.topo-q.show{opacity:1;transform:none}
.topo-q.ans{border-color:rgba(63,214,138,.45)}
.topo-q.ans .tq-k{color:var(--run)}
.tq-k{color:var(--cyan-hi);letter-spacing:.12em;font-weight:600}
.tq-caret{
  display:none;width:7px;height:12px;background:var(--cyan-hi);
  margin-left:5px;vertical-align:-1px;animation:caretB .8s steps(1) infinite;
}
.topo-q.typing .tq-caret{display:inline-block}
@keyframes caretB{50%{opacity:0}}
.topo-card{
  position:absolute;top:20px;right:20px;width:288px;
  background:rgba(8,13,22,.88);border:1px solid var(--line-soft);border-radius:14px;
  padding:16px 18px 14px;backdrop-filter:blur(8px);
}
.topo-card.swap{animation:cardSwap .35s ease}
@keyframes cardSwap{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:none}}
.tc-k{font-family:var(--font-m);font-size:9.5px;letter-spacing:.2em;color:var(--cyan-hi)}
.tc-t{font-family:var(--font-d);font-weight:600;font-size:17px;color:var(--text);margin:6px 0 7px;letter-spacing:-0.01em}
.tc-d{font-size:12.5px;line-height:1.6;color:var(--muted);margin:0 0 11px}
.tc-s{
  font-family:var(--font-m);font-size:9px;letter-spacing:.16em;color:var(--run);
  border-top:1px dashed var(--line-soft);padding-top:10px;
}
.topo-legend{
  position:absolute;bottom:14px;left:20px;
  font-family:var(--font-m);font-size:8.5px;letter-spacing:.22em;color:var(--dim);
}
@media(max-width:860px){
  .topo-card{position:static;width:auto;margin:0 14px 14px;backdrop-filter:none}
  .topo-q{position:static;display:block;max-width:none;margin:14px 14px 10px;transform:none}
  .topo-legend{position:static;padding:0 14px 14px}
}

/* ---------- pain fix links ---------- */
.pain-fix{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--font-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-hi);border:1px solid rgba(47,220,242,.35);border-radius:4px;padding:8px 12px;transition:background .15s,border-color .15s}
.pain-fix:hover{background:rgba(34,200,229,.1);border-color:var(--cyan)}
.pain-fix .pf-k{color:var(--dim)}
.pain-fix .arr{transition:transform .18s}
.pain-fix:hover .arr{transform:translateX(4px)}

/* ---------- proving period ---------- */
#proving-wrap{
  padding:100px 0;
  background:radial-gradient(900px 460px at 80% 10%,rgba(34,200,229,.08),transparent 60%),var(--bg-1);
  border-top:1px solid var(--line-soft);
}
.prove{
  background:linear-gradient(140deg,rgba(30,94,149,.2),rgba(34,200,229,.06) 55%,transparent),var(--bg-2);
  border:1px solid rgba(47,220,242,.3);border-radius:16px;padding:44px 42px;
  box-shadow:var(--shadow),0 0 60px -24px rgba(34,200,229,.25);
}
.prove-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;flex-wrap:wrap;margin-bottom:22px}
.prove-t{font-family:var(--font-d);font-weight:400;font-size:clamp(26px,3.2vw,38px);letter-spacing:-0.02em;margin-top:12px}
.prove-lead{color:var(--muted);font-size:15.5px;line-height:1.7;max-width:860px;margin-bottom:34px}
.prove-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:960px){.prove-steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.prove-steps{grid-template-columns:1fr}}
.pstep{border-top:1px solid var(--line);padding-top:14px;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s;transition-delay:var(--d,0s)}
.prove.play .pstep{opacity:1;transform:none}
.pstep b{display:block;font-family:var(--font-m);font-size:10px;letter-spacing:.22em;color:var(--cyan-hi);margin-bottom:8px}
.pstep span{font-size:13.5px;color:var(--muted);line-height:1.6}

/* ---------- fx canvas + hero orbs ---------- */
.fx{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.7}
.hero-orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;will-change:transform}
.orb-a{width:560px;height:560px;background:rgba(34,200,229,.15);top:-140px;right:-80px}
.orb-b{width:480px;height:480px;background:rgba(30,94,149,.18);bottom:-160px;left:-120px}

/* ---------- cinematic image bands ---------- */
.cine{
  position:relative;overflow:hidden;
  max-width:var(--w);margin:48px auto;
  aspect-ratio:16/10;min-height:340px;
  border:1px solid var(--line-glow);border-radius:14px;
  background:#070B12;
  box-shadow:var(--shadow);
}
.cine-img{
  position:absolute;left:0;right:0;top:-4%;height:108%;width:100%;
  object-fit:cover;object-position:center;
  will-change:transform;
}
.cine-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(6,10,17,.85) 0%,rgba(6,10,17,.42) 42%,rgba(6,10,17,.08) 70%),
    linear-gradient(0deg,rgba(6,10,17,.6) 0%,transparent 34%);
}
.cine-cap{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 0 44px;
}
.cine-cap .eyebrow{color:var(--cyan-glow)}
.cine-cap h2{
  font-family:var(--font-d);font-weight:400;letter-spacing:-0.022em;
  font-size:clamp(28px,3.6vw,44px);line-height:1.06;color:#E9EFF6;margin-top:12px;max-width:640px;
}
.cine-cap p{font-family:var(--font-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#93A3B8;margin-top:14px}
.cine-tag{
  position:absolute;right:30px;bottom:44px;z-index:2;
  font-family:var(--font-m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#93A3B8;
  border:1px solid rgba(147,163,184,.4);border-radius:4px;padding:8px 12px;background:rgba(6,10,17,.6);backdrop-filter:blur(8px);
}
@media(max-width:820px){
  .cine{margin:32px 16px;aspect-ratio:4/3}
  .cine-tag{display:none}
}

/* ---------- reveal ---------- */
.rev{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rev.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rev{opacity:1;transform:none}
  .ribbon-track{animation:none!important}
}

/* ---------- contact page ---------- */
.ct-body{padding:64px 0 100px}
.ct-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:60px;align-items:start}
@media(max-width:960px){.ct-grid{grid-template-columns:1fr}}
.ct-info{display:flex;flex-direction:column;gap:34px;position:sticky;top:calc(var(--navh) + 20px)}
@media(max-width:960px){.ct-info{position:static}}
.ct-block{border-top:1px solid var(--line);padding-top:18px}
.ct-k{font-family:var(--font-m);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--cyan-hi);margin-bottom:12px}
.ct-block p{color:var(--muted);font-size:15px;line-height:1.7}
.ct-block p b{color:var(--text)}
.ct-block a{color:var(--cyan-hi)}
.ct-steps{display:flex;flex-direction:column;gap:0}
.ct-step{display:grid;grid-template-columns:32px 1fr;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line-soft)}
.ct-step:last-child{border-bottom:none}
.ct-step span{font-family:var(--font-m);font-size:11px;color:var(--cyan-hi);padding-top:3px}
.ct-step p{font-size:14.5px}
.ct-fine{font-size:13px;color:var(--dim)!important}
.ct-form-card{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.tabs{display:flex;border-bottom:1px solid var(--line);background:var(--bg-1)}
.tab-btn{
  flex:1;padding:16px 10px;font-family:var(--font-m);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim);cursor:pointer;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s,background .15s;
}
.tab-btn:hover{color:var(--text)}
.tab-btn[aria-selected="true"]{color:var(--cyan-hi);border-bottom-color:var(--cyan);background:var(--bg-2)}
.tab-panel{padding:28px 26px 30px}
.tab-panel[hidden]{display:none}

/* ---------- Zoho web forms ----------------------------------------
   The embed writes its own <style> block into the body, so it lands
   AFTER this file and wins every specificity tie. Two consequences
   shape the rules below.

   Everything hangs off Zoho's #crmWebToEntityForm rather than our own
   .zform wrapper. The ID outranks their heaviest selector
   (.zcwf_lblLeft .zcwf_col_fld input[type=text], which carries its own
   !important on the border), and it keeps working if the form lands
   outside the wrapper: their loader appends to document.body when the
   script resolves after parsing, and only document.write()s in place
   when it resolves during it.

   !important appears throughout because the container, the title, the
   labels and the required asterisks all carry inline styles, and an
   important author rule is the only thing that beats those.

   Class vocabulary is fixed by Zoho, so rules are included for field
   types these two forms don't currently use. Adding a dropdown or
   turning on the consent checkbox in the CRM should not send anyone
   back here. */
#crmWebToEntityForm{
  background:none!important;background-color:transparent!important;
  color:var(--text)!important;max-width:none!important;width:100%!important;
  padding:0!important;margin:0!important;font-family:var(--font-b)!important;
}
#crmWebToEntityForm form{margin:0}
/* their own heading duplicates the tab button directly above it */
#crmWebToEntityForm .zcwf_title{display:none!important}

/* unfloat the 30/68 two-column layout into stacked full-width rows */
#crmWebToEntityForm .zcwf_row{margin:0 0 15px!important}
#crmWebToEntityForm .zcwf_col_lab,
#crmWebToEntityForm .zcwf_col_fld{
  float:none!important;width:100%!important;max-width:none!important;
  margin:0!important;padding:0!important;
}
#crmWebToEntityForm .zcwf_col_lab label{
  font-family:var(--font-m)!important;font-size:10.5px!important;font-weight:400!important;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim)!important;
}
/* the mandatory marker ships as an inline red span */
#crmWebToEntityForm .zcwf_col_lab label span{color:var(--cyan)!important;margin-left:3px}

#crmWebToEntityForm input[type="text"],
#crmWebToEntityForm input[type="email"],
#crmWebToEntityForm input[type="tel"],
#crmWebToEntityForm input[type="url"],
#crmWebToEntityForm input[type="number"],
#crmWebToEntityForm input[type="date"],
#crmWebToEntityForm input[type="password"],
#crmWebToEntityForm select,
#crmWebToEntityForm .zcwf_col_fld_slt,
#crmWebToEntityForm textarea{
  width:100%!important;max-width:none!important;float:none!important;
  background:var(--bg-1)!important;border:1px solid var(--line)!important;border-radius:6px!important;
  padding:11px 12px!important;font-family:var(--font-b)!important;font-size:14px!important;
  color:var(--text)!important;margin:5px 0 0!important;box-sizing:border-box!important;height:auto!important;
}
#crmWebToEntityForm textarea{min-height:112px;resize:vertical!important;line-height:1.6}
#crmWebToEntityForm ::placeholder{color:var(--dim);opacity:1}
#crmWebToEntityForm input:focus,
#crmWebToEntityForm select:focus,
#crmWebToEntityForm textarea:focus{
  outline:none!important;border-color:var(--cyan)!important;
  box-shadow:0 0 0 3px rgba(34,200,229,.18)!important;
}
/* Chrome paints autofilled fields a flat pale yellow that no background
   declaration reaches; the inset shadow is the only way to repaint it */
#crmWebToEntityForm input:-webkit-autofill,
#crmWebToEntityForm input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 60px var(--bg-1) inset!important;
  -webkit-text-fill-color:var(--text)!important;caret-color:var(--text);
}

#crmWebToEntityForm .zcwf_button{
  font-family:var(--font-m)!important;font-size:12px!important;font-weight:600!important;
  letter-spacing:.16em;text-transform:uppercase;max-width:none!important;
  padding:14px 26px!important;border-radius:5px!important;border:1px solid transparent!important;
  cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s,border-color .18s;
}
#crmWebToEntityForm .zcwf_row:last-child{margin-top:22px!important}
#crmWebToEntityForm input[type="submit"],
#crmWebToEntityForm .formsubmit.zcwf_button{
  background:var(--grad)!important;color:#03222B!important;
  box-shadow:0 0 0 1px rgba(47,220,242,.3),0 10px 34px -8px rgba(34,200,229,.45);
}
#crmWebToEntityForm input[type="submit"]:hover{transform:translateY(-2px);box-shadow:0 14px 40px -8px rgba(34,200,229,.6)}
#crmWebToEntityForm input[type="submit"][disabled]{opacity:.55;transform:none;cursor:default}
#crmWebToEntityForm input[type="reset"]{
  background:rgba(10,15,23,.55)!important;color:var(--muted)!important;border-color:var(--line)!important;
}
#crmWebToEntityForm input[type="reset"]:hover{border-color:var(--cyan)!important;color:var(--text)!important}

#crmWebToEntityForm .zcwf_col_help,
#crmWebToEntityForm .zcwf_privacy_txt{color:var(--dim)!important;font-family:var(--font-b)!important;font-size:12.5px!important}
#crmWebToEntityForm .zcwf_help_icon{background:var(--bg-2)!important;border-color:var(--line)!important;color:var(--dim)!important}
#crmWebToEntityForm .zcwf_tooltip_ctn{background:var(--bg-2)!important;color:var(--text)!important;border:1px solid var(--line)}
#crmWebToEntityForm .zcwf_ckbox{accent-color:var(--cyan);margin-top:4px}
#crmWebToEntityForm .error,#crmWebToEntityForm .errorMsg,#crmWebToEntityForm .errorlabel{color:var(--down)!important;font-size:12px!important}
/* post-submit confirmation, otherwise a pale green card on a black page */
.wf_customMessageBox{
  background:var(--bg-2)!important;color:var(--text)!important;
  border:1px solid var(--cyan)!important;font-family:var(--font-b)!important;
  box-shadow:0 18px 50px -12px rgba(0,0,0,.7)!important;
}

.zform-fallback{padding:18px;border:1px dashed var(--steel-hi);border-radius:8px;background:rgba(30,94,149,.12)}
.zform-fallback p{color:var(--muted);font-size:14px;margin-bottom:14px}
.zform-fallback .btn{font-size:11px}

/* ================================================================
   MOTION PACK (REV G)
   ================================================================ */

/* ---------- hero entrance choreography ---------- */
.hi{opacity:0}
body.hero-go .hi{animation:hiIn .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes hiIn{
  from{opacity:0;transform:translateY(26px);filter:blur(7px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
body.hero-go .hero .rev{opacity:1;transform:none}

/* ---------- tilt on telemetry panel ---------- */
.tilt{transition:transform .25s ease;transform-style:preserve-3d;will-change:transform}

/* ---------- cursor spotlight on cards ----------
   note: no overflow:hidden here — the ::after is inset:0 so it cannot
   spill, and clipping would shave the FINDING tags that sit above the
   card border (.pain::before at top:-11px) */
.spotlit{position:relative}
.spotlit::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(47,220,242,.09),transparent 65%);
}
.spotlit:hover::after{opacity:1}

/* ---------- authority ladder sequential earn ---------- */
.ladder.pre-play .rung .box.fill{background:transparent;box-shadow:none}
.ladder.play .rung .box.fill{animation:rungFill .5s ease forwards;animation-delay:var(--d,0s)}
@keyframes rungFill{
  from{background:transparent;box-shadow:none}
  to{background:var(--cyan-hi);box-shadow:0 0 10px rgba(47,220,242,.6)}
}
.ladder.play .rung{animation:rungText .5s ease forwards;animation-delay:var(--d,0s)}
@keyframes rungText{from{opacity:.45}to{opacity:1}}

/* ---------- pilot chat playback ---------- */
.cm{opacity:0;transform:translateY(10px)}
.chat.play .cm{animation:cmIn .45s ease forwards;animation-delay:var(--d,0s)}
@keyframes cmIn{to{opacity:1;transform:none}}
.typing{display:none;align-items:center;gap:5px;padding:2px 0 2px 4px}
.chat.play .typing{display:inline-flex;animation:typingHide .1s var(--d,1s) forwards}
@keyframes typingHide{to{visibility:hidden;height:0;padding:0}}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--run);animation:tp 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,100%{opacity:.3}50%{opacity:1}}
.chat.play .msg.refused{animation:refusedStamp .4s cubic-bezier(.2,1.4,.4,1) forwards;animation-delay:var(--d,0s);transform:scale(1.06)}
@keyframes refusedStamp{to{opacity:1;transform:scale(1)}}

/* ---------- journal row flash ---------- */
.lrow.flash{animation:lin .4s ease both,rowFlash 1.4s ease}
@keyframes rowFlash{0%{background:rgba(34,200,229,.16)}100%{background:transparent}}

/* ---------- wave area fill ---------- */
.wave-area{fill:url(#parea);stroke:none;opacity:.55}

/* .dl spans are plain inline (drill-era inline-block removed: it clipped
   background-clip:text descenders against the 1.0 line-height box) */

/* ================================================================
   SUBPAGE COMPONENTS (restored + REV G styling)
   ================================================================ */

/* ---------- page hero (all subpages) ---------- */
.phero{
  position:relative;padding:calc(var(--navh) + 84px) 0 64px;
  background:
    radial-gradient(1000px 480px at 80% 0%,rgba(34,200,229,.13),transparent 62%),
    radial-gradient(700px 420px at 5% 100%,rgba(30,94,149,.12),transparent 60%),
    var(--bg-0);
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
}
.phero{isolation:isolate}
.phero.compact{padding:calc(var(--navh) + 62px) 0 46px}
.phero .display{margin:20px 0 18px;font-size:clamp(36px,5vw,60px)}
.phero .lead{max-width:640px}
.phero .wrap{position:relative;z-index:5}

/* layer 1: cinematic plate. hero-fx.js drives the drift so the occlusion
   matte stays registered to the photo frame for frame; the static transform
   here is the no-JS fallback */
.ph-media{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.ph-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform-origin:50% 42%;transform:scale(1.08);will-change:transform;
}
/* A header whose plate is moving footage rather than a still. The poster
   is painted on the container underneath, so print, reduced motion and a
   video that never loads all land on the same frame instead of black.
   No drift here: the clip supplies its own motion, and there is no
   occlusion matte to keep registered against it. */
.ph-media.motion{
  background:#04070c url("assets/pilot-brain-poster.webp") center 44%/cover no-repeat;
}
.ph-vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 44%;
  /* the headline sits on the plate's own black rather than on footage */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 16%,#000 42%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,transparent 16%,#000 42%,#000 100%);
}
/* A phone header is tall and narrow, so the text fills it and there is no
   region left for footage to occupy: a horizontal mask cannot separate
   them when the copy spans the full width. The clip is dropped entirely
   below this width, which also saves the visitor a 1.1MB download, and
   the poster stays as a dimmed plate so the image is still there. */
@media(max-width:820px){
  .ph-vid{display:none}
  .ph-media.motion{opacity:.42;background-position:66% 40%}
}

/* layer 2: scrim. .ph-t sits straight on the plate, so this is what
   keeps the headline legible over the bright areas of every image */
.ph-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(4,7,12,.95) 0%,rgba(4,7,12,.82) 38%,rgba(4,7,12,.2) 72%,rgba(4,7,12,.42) 100%),
    linear-gradient(0deg,rgba(4,7,12,.9) 0%,rgba(4,7,12,.14) 48%,rgba(4,7,12,.55) 100%),
    radial-gradient(900px 420px at 78% 6%,rgba(34,200,229,.22),transparent 62%);
}
/* The Governor plate is a gauge cluster, and the shared scrim above opens
   the photograph up across the right third, which is precisely where the
   verdict card sits. Two extra stops darken that side so the card has a
   ground, while the middle stays open and the gauges still carry the
   frame. Scoped to the motif rather than the page so the two travel
   together. */
.phero[data-fx="verdict"] .ph-veil{
  background:
    linear-gradient(90deg,rgba(4,7,12,.95) 0%,rgba(4,7,12,.86) 30%,rgba(4,7,12,.34) 52%,rgba(4,7,12,.76) 74%,rgba(4,7,12,.88) 100%),
    linear-gradient(0deg,rgba(4,7,12,.9) 0%,rgba(4,7,12,.14) 48%,rgba(4,7,12,.55) 100%),
    radial-gradient(900px 420px at 78% 6%,rgba(34,200,229,.15),transparent 62%);
}

/* Grain unifies a still plate with the linework drawn over it. Over moving
   footage there is no vector layer to unify, and it stacks on top of the
   codec's own noise, so a motion plate opts out. */
.ph-media.motion ~ .ph-veil::after{display:none}
/* grain sits over the plate and under the linework: a shared texture is
   what stops vector and photograph reading as two pasted-together layers */
.ph-veil::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

.ph-grid{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(47,220,242,.04) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(47,220,242,.04) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 100% at 50% 0%,black 30%,transparent 85%);
}

/* layer 4: per-page motif, painted by hero-fx.js. The mask lets a motif be
   bold on the right without ever competing with the headline on the left */
.ph-fx{
  position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;
  /* screen makes the linework emit light into the plate instead of painting
     over it, which is most of the difference between integrated and pasted */
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 30%,#000 53%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,transparent 30%,#000 53%,#000 100%);
}
@media(max-width:900px){
  .ph-fx{
    -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 34%,#000 62%,#000 100%);
    mask-image:linear-gradient(180deg,transparent 0,transparent 34%,#000 62%,#000 100%);
    opacity:.75;
  }
  /* The other motifs are linework and can sit behind copy at low opacity.
     The verdict card is a block of text, and a phone header is entirely
     copy and buttons with no spare column to give it, so it collides
     instead of composing. Dropped here for the same reason the Pilot clip
     is; the darkened plate carries the header on its own. */
  .phero[data-fx="verdict"] .ph-fx{display:none}
}

/* Capability strip: the band under a page header that states the surface
   the page covers. Deliberately a hairline rule rather than a panel, so
   it reads as an index to what follows and does not compete with the
   plate above it. The trailing item is the discipline, not another
   capability, so it is set apart from the list. */
.capstrip{
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(8,13,22,.9),var(--bg-1));
}
.capstrip .wrap{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;
  padding-top:15px;padding-bottom:15px;
}
.cs-k,.cs-i,.cs-r{
  font-family:var(--font-m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
}
.cs-k{color:var(--cyan-hi);font-weight:600;letter-spacing:.26em}
/* No drawn separators between items. Any leading glyph or pseudo-element
   becomes an orphan at the start of every wrapped row, and this list
   wraps to three or four rows on a phone. The gap carries it. */
.cs-i{color:var(--muted)}
.cs-r{color:var(--dim);margin-left:auto;text-transform:none;letter-spacing:.06em;font-size:10px}
@media(max-width:900px){.cs-r{margin-left:0;flex-basis:100%}}

.ph-k{
  font-family:var(--font-m);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--cyan-hi);margin-bottom:18px;
}
.ph-t{
  font-family:var(--font-d);font-weight:340;letter-spacing:-0.026em;
  font-size:clamp(38px,4.8vw,64px);line-height:1.03;max-width:820px;
}
.ph-s{color:var(--muted);font-size:clamp(16px,1.45vw,18.5px);line-height:1.7;max-width:660px;margin:20px 0 32px}
.btn-g-dark{background:rgba(10,15,23,.55);border-color:#22314a}
.btn-g-dark:hover{border-color:var(--cyan);background:rgba(34,200,229,.08)}

/* ---------- works-with wall (platform) ---------- */
.wall{
  background:var(--bg-2);border:1px solid var(--line);border-radius:14px;
  padding:0;overflow:hidden;box-shadow:var(--shadow);
}
.wall-hd{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:15px 22px;border-bottom:1px solid var(--line);
  font-family:var(--font-m);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--text);
}
.wall-sub{color:var(--dim);letter-spacing:.16em;font-size:9.5px}
.wall-tiers{display:grid;grid-template-columns:repeat(3,1fr)}
@media(max-width:920px){.wall-tiers{grid-template-columns:1fr}}
.wtier{padding:24px 22px;border-right:1px solid var(--line-soft)}
.wtier:last-child{border-right:none}
@media(max-width:920px){.wtier{border-right:none;border-bottom:1px solid var(--line-soft)}.wtier:last-child{border-bottom:none}}
.wt-k{
  display:inline-block;font-family:var(--font-m);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;padding:5px 10px;border-radius:4px;border:1px solid var(--line);
  color:var(--dim);margin-bottom:12px;
}
.wt-k.live{color:var(--run);border-color:rgba(47,214,143,.45);box-shadow:0 0 14px -6px rgba(47,214,143,.5)}
.wt-k.sup{color:var(--cyan-hi);border-color:rgba(47,220,242,.4)}
.wt-k.rd{color:var(--warn);border-color:rgba(242,182,68,.4)}
.wt-b{color:var(--dim);font-size:13px;line-height:1.6;margin-bottom:16px}
.wcells{display:flex;flex-direction:column;gap:8px}
.wcell{
  display:flex;flex-direction:column;gap:2px;
  border:1px solid var(--line-soft);border-radius:6px;background:var(--bg-1);
  padding:10px 12px;
}
.wcell b{font-family:var(--font-d);font-weight:600;font-size:14px;color:var(--text);letter-spacing:-0.01em}
.wcell small{font-family:var(--font-m);font-size:10px;color:var(--dim);letter-spacing:.04em}

/* ---------- industries image cards ---------- */
.sol.has-img{position:relative;overflow:hidden;min-height:430px;justify-content:flex-end;z-index:0}
.sol-bg{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;opacity:.55;
  transition:opacity .3s,transform .5s ease;
}
.sol.has-img:hover .sol-bg{opacity:.7;transform:scale(1.03)}
.sol-veil{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(0deg,rgba(10,15,23,.96) 22%,rgba(10,15,23,.55) 55%,rgba(10,15,23,.15) 100%);
}
.sol.has-img h3,.sol.has-img p{text-shadow:0 2px 14px rgba(4,7,12,.8)}
/* has-img cards keep overflow:hidden for the image zoom, so their corner
   badge moves inside the frame instead of poking above it */
.sol.has-img .stag{top:14px;right:20px}

@media(prefers-reduced-motion:reduce){
  .ph-vid{display:none}
  .sol.has-img:hover .sol-bg{transform:none}
}

@media(prefers-reduced-motion:reduce){
  .hero-video{display:none}
  .spk path{animation:none;stroke-dasharray:none}
  .tape-track{animation:none}
  .spine{display:none!important}
  .tflow{animation:none;stroke-dasharray:none;opacity:.16}
  .clr{animation:none}
  .clr .st.pending{animation:none}
  .con-dot{animation:none}
  .ringr,.ants,.led.on,.tq-caret{animation:none}
  .ripple.go{animation:none}
  .topo-card.swap{animation:none}
  .hero{background:var(--bg-0) url(assets/hero-poster.jpg) center/cover no-repeat}
  .spindle{display:none!important}
  .hi{opacity:1}
  body.hero-go .hi{animation:none}
  .spotlit::after{display:none}
  .ladder.play .rung .box,.ladder.play .rung{animation:none}
  .chat.play .cm,.chat.play .msg.refused{animation:none;opacity:1;transform:none}
  .chat.play .typing{display:none}
  .lrow.flash{animation:lin .4s ease both}
  .cine-img{position:absolute;top:0;height:100%}
  /* the plate is parked at the drift midpoint by hero-fx.js so the framing
     matches what everyone else sees, just without the movement */
}

/* ================================================================
   PRINT / REVIEW PACKET
   Everything that reveals on scroll must be forced to its final
   state: print has no scroll, so IntersectionObserver never fires
   and un-forced content would come out blank.
   ================================================================ */
.print-hd{display:none}

@media print{
  @page{size:11in 8.5in;margin:0}

  *,*::before,*::after{
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
    animation:none!important;
    transition:none!important;
  }
  html,body{background:var(--bg-0)!important}

  /* Gradient-filled text is painted by clipping a background to the glyphs.
     The print rasteriser composites that element against opaque black first,
     so every run of it leaves a visible black rectangle on top of the header
     plate. Solid cyan reproduces closer to the screen colour anyway. */
  .grad-t{
    background:none!important;-webkit-background-clip:border-box!important;
    background-clip:border-box!important;color:var(--cyan)!important;
  }

  /* screen-only chrome */
  .progress,.spine,.mnav,.nav-burger,.drop,.topo-q,.hero-video,
  .typing,.qpulse,.qtrail,.ripple,.ph-fx{display:none!important}
  /* hero-fx.js leaves an inline drift transform on the plate; reset it so
     the header prints at its natural framing. The grain is a screen device,
     on paper it only costs file size and bands in flat areas. */
  .ph-img{transform:none!important}
  .ph-vid{display:none!important}
  .ph-veil::after{display:none!important}
  .phero{padding-top:52px!important}

  /* fixed bars would repeat or clip: print the masthead once, inline */
  .nav{
    position:static!important;background:rgba(4,7,12,.95)!important;
    backdrop-filter:none!important;border-bottom:1px solid var(--line-soft)!important;
  }
  .hero{padding-top:56px!important}

  /* final state for every scroll-revealed element */
  .rev,.hi,.cm,.pstep,.msg,.ladder .rung{opacity:1!important;transform:none!important;filter:none!important}
  .ladder .rung .box.fill{background:var(--cyan-hi)!important;box-shadow:0 0 10px rgba(47,220,242,.6)!important}
  .spk path,.tflow{stroke-dasharray:none!important}
  .tflow{opacity:.45!important}

  /* architecture: print both views, unclipped, info card inline */
  .topo-view[hidden]{display:block!important}
  .topo-scroll{overflow:visible!important}
  .topo-scroll svg{min-width:0!important}
  .topo-card{position:static!important;width:auto!important;margin:0 18px 16px!important;backdrop-filter:none!important}
  .topo-legend{position:static!important;padding:0 18px 14px!important}
  #viewPipe{break-before:page}

  /* The footer is site navigation, not something a reviewer signs off on,
     and repeated across eleven pages it was costing twenty near-blank
     sheets of solid black. The closing CTA band is the other offender:
     120px of padding either side made it taller than half a sheet, so it
     could almost never fit under the section above it. Compacted, it
     usually can. Do not add break-before:avoid to pull it up harder; that
     wins against break-inside and splits the band, stranding the button
     alone on the next sheet. */
  footer{display:none!important}
  .final{padding:30px 0!important}
  .final .display{font-size:26px!important;margin:8px auto 10px!important}
  .final .lead{margin:0 auto 16px!important;font-size:13px!important}
  .final .btn{padding:13px 26px!important;font-size:11px!important}
  .final .fineprint{margin-top:14px!important}

  /* keep components whole across page breaks */
  .pain,.rd,.sol,.artifact,.console,.topo,.cine,.pcell,
  .sfeat,.pstep,.wtier,.chat,.cmp-row,.lane,.final{break-inside:avoid}
  h1,h2,h3,.sec-hd,.tblock{break-after:avoid}

  /* review-packet slug, injected per page by tools/build_review_pdf.py */
  .print-hd{
    display:flex!important;justify-content:space-between;gap:20px;
    font-family:var(--font-m);font-size:8.5px;letter-spacing:.2em;
    color:var(--dim);background:#02050A;
    padding:9px 30px;border-bottom:1px solid var(--line-soft);
  }
  .print-hd b{color:var(--cyan-hi);font-weight:600}
}