/* Cyberlop Labs — shared stylesheet. Tokens verbatim from Brand Kit v1.0. */

/* ============================================================
   Cyberlop Labs — landing page
   Tokens taken verbatim from the Brand Kit v1.0 palette.
   Single-theme (dark): the full-dark logo cut is the primary
   lockup, so the page commits to the ink ground and paints
   every colour explicitly rather than inheriting a host theme.
   ============================================================ */
:root{
  /* ramps — raw material, never used directly by components */
  --sentinel-900:#0B2A6B; --sentinel-700:#1C67DE; --sentinel-500:#1F6FEB;
  --sentinel-300:#4C8DFF; --sentinel-100:#C3D8FF; --sentinel-050:#EAF1FF;
  --cipher-900:#2E1D7A; --cipher-700:#5B3FE0; --cipher-500:#7C5CFF;
  --cipher-300:#9A80FF; --cipher-100:#DED5FF;
  --magenta-500:#E056C8;
  --mint-900:#04503A; --mint-700:#007A56; --mint-500:#00E5A0;
  --amber-500:#FFB020; --coral-900:#6B0F22; --coral-500:#FF3B5C;
  --ink-900:#05080B; --ink-800:#0B0F14; --ink-700:#12171E; --ink-600:#232B36;
  --paper-000:#FFFFFF; --paper-100:#F4F6F8; --paper-300:#C9D2DC;
  --slate-600:#5B6675; --slate-500:#8B96A5;

  /* semantic — dark */
  --bg:var(--ink-800); --surface:var(--ink-700); --surface-2:#171D26;
  --rule:#1B222B; --border:var(--ink-600);
  --text:var(--paper-100); --muted:var(--slate-500); --dim:#737E8D;
  /* Signal Mint is the accent and the link colour, by the user's decision.
     Note this departs from the brand book, which reserves mint for verified
     states and gives links to Sentinel Blue. Mint reads 11.64:1 on the page
     ground, so it is the stronger link colour; --action-fg flips to ink
     because white on mint is 1.65:1 and unreadable. */
  --action:var(--mint-500); --action-text:var(--mint-500); --action-fg:var(--ink-900);
  --brand-secondary:var(--cipher-500);
  --focus:var(--cipher-300);
  --sev-critical:var(--coral-500); --sev-high:var(--amber-500);
  --sev-medium:var(--cipher-300); --sev-low:var(--slate-500);
  --healthy:var(--mint-500);
  --grad:linear-gradient(135deg,var(--sentinel-500) 0%,var(--cipher-500) 100%);
  /* same ramp, violet end darkened so white label text clears AA */
  --grad-btn:linear-gradient(135deg,var(--sentinel-500) 0%,#6B4AF0 100%);
  /* Cipher Violet 500 is brand only — it collapses into Sentinel Blue under
     deuteranopia. Anything encoding data uses 300 on ink, 700 on paper. */
  --data-2:var(--cipher-300);
  --ink-900-text:#0B0F14;

  --display:"Chakra Petch","Archivo",-apple-system,BlinkMacSystemFont,sans-serif;
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --maxw:1180px;
  --r:10px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:4px}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
section{position:relative}
section[id]{scroll-margin-top:88px}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--display); font-weight:600; letter-spacing:-.02em; margin:0; text-wrap:balance}
h1{font-size:clamp(38px,5.6vw,68px); line-height:1.03; letter-spacing:-.035em}
h2{font-size:clamp(28px,3.6vw,44px); line-height:1.1; letter-spacing:-.028em}
h3{font-size:20px; line-height:1.25}
p{margin:0 0 18px; max-width:66ch}
.lede{font-size:clamp(17px,1.5vw,20px); line-height:1.6; color:var(--muted); max-width:60ch}

.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--action-text); margin:0 0 18px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--action); flex:none}

.sec-head{margin-bottom:44px}
.sec-head p{color:var(--muted)}

/* ---------- nav ---------- */
header.nav{
  position:sticky; top:0; z-index:60;
  background:rgb(11 15 20 / .72); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s, background .25s;
}
header.nav.stuck{border-bottom-color:var(--rule); background:rgb(11 15 20 / .92)}
.nav-in{display:flex; align-items:center; gap:34px; height:70px}
.nav-in img{height:26px; width:auto; display:block}
.nav-links{display:flex; gap:26px; margin-left:auto; align-items:center}
.nav-links a{
  font-size:14px; color:var(--muted); text-decoration:none; transition:color .18s;
  position:relative; padding:4px 0;
}
.nav-links a:hover{color:var(--text)}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--action); transition:right .28s ease;
}
.nav-links a:hover::after{right:0}
/* the CTA is a button first, a nav link second — don't let the link rules squash it */
.nav-links a.btn{padding:11px 20px; font-size:14.5px; color:#fff}
.nav-links a.btn::after{display:none}
.nav-links a.btn:hover{color:#fff}
@media(max-width:900px){.nav-links a:not(.btn){display:none}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:11px 20px;
  border-radius:8px; font-family:var(--sans); font-size:14.5px; font-weight:600;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .22s, background .2s, border-color .2s;
  white-space:nowrap;
}
.btn-primary{background:var(--grad-btn); color:#fff; box-shadow:0 1px 0 rgb(255 255 255 / .14) inset}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 30px -8px rgb(31 111 235 / .55)}
.btn-ghost{border-color:var(--border); color:var(--text); background:rgb(255 255 255 / .02)}
.btn-ghost:hover{border-color:var(--slate-600); background:rgb(255 255 255 / .05); transform:translateY(-2px)}
.btn-lg{padding:14px 26px; font-size:15.5px}
.btn::after{content:""}
.btn .arw{transition:transform .2s}
.btn:hover .arw{transform:translateX(3px)}

/* ---------- hero ---------- */
.hero{padding:78px 0 90px; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr; gap:44px}}
.hero h1 .grad{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero h1 .mint{color:var(--mint-500)}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
.hero-note{
  margin-top:22px; font-family:var(--mono); font-size:12px; color:var(--dim); letter-spacing:.02em;
  display:flex; align-items:center; gap:8px;
}
.dot-live{width:6px;height:6px;border-radius:50%;background:var(--mint-500);flex:none;
  box-shadow:0 0 0 0 rgb(0 229 160 / .55); animation:ping 2.6s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgb(0 229 160 / .5)}70%{box-shadow:0 0 0 9px rgb(0 229 160 / 0)}100%{box-shadow:0 0 0 0 rgb(0 229 160 / 0)}}

/* ambient glow behind hero */
.hero::before{
  content:""; position:absolute; inset:-20% 40% 30% -10%; pointer-events:none;
  background:radial-gradient(60% 60% at 60% 40%, rgb(31 111 235 / .16), transparent 70%);
  filter:blur(30px);
}

/* ---------- the loop diagram ---------- */
.loopwrap{position:relative}
.loopwrap svg{display:block; width:100%; height:auto; overflow:visible}
.ring-track{fill:none; stroke:var(--ink-600); stroke-width:9; stroke-linecap:round}
.ring-live{fill:none; stroke:url(#lg); stroke-width:9; stroke-linecap:round}
.ring-pulse{
  fill:none; stroke:var(--paper-100); stroke-width:9; stroke-linecap:round;
  stroke-dasharray:34 1200; filter:drop-shadow(0 0 8px rgb(124 92 255 /.9));
  animation:travel 7s linear infinite;
}
@keyframes travel{from{stroke-dashoffset:0}to{stroke-dashoffset:-1234}}
.mint-arc{fill:none; stroke:var(--mint-500); stroke-width:9; stroke-linecap:round;
  opacity:.45; animation:closeflash 7s ease-in-out infinite}
@keyframes closeflash{0%,72%{opacity:.45}82%{opacity:1;filter:drop-shadow(0 0 14px rgb(0 229 160 /.9))}100%{opacity:.45}}
.core{fill:var(--mint-500); animation:corebeat 7s ease-in-out infinite}
@keyframes corebeat{0%,70%{opacity:.5;transform:scale(.94)}84%{opacity:1;transform:scale(1.06)}100%{opacity:.5;transform:scale(.94)}}
.core{transform-origin:360px 225px}
.node{fill:var(--ink-800); stroke:var(--ink-600); stroke-width:2.5; transition:none}
.node.on{fill:var(--sentinel-500); stroke:var(--sentinel-300)}
.node-n{font-family:var(--mono); font-size:11px; font-weight:700; fill:var(--dim)}
.node.on + .node-n{fill:#fff}
.lead{stroke:var(--ink-600); stroke-width:1.5; fill:none}
.lbl{font-family:var(--display); font-size:15px; font-weight:600; fill:var(--text)}
.lbl-s{font-family:var(--mono); font-size:11px; fill:var(--dim); letter-spacing:.04em}
.stage-on .lbl{fill:#fff}
.stage-on .lbl-s{fill:var(--action-text)}
.stage-on .lead{stroke:var(--action)}
/* the SVG scales down with the column; scale the type up so the loop stays readable on a phone */
@media(max-width:620px){
  .lbl{font-size:24px} .lbl-s{font-size:16px} .node-n{font-size:16px}
  .node{stroke-width:3.5} .lead{stroke-width:2.5}
}

/* ---------- generic surfaces ---------- */
.band{padding:78px 0; border-top:1px solid var(--rule)}
.band.tight{padding:62px 0}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:24px; transition:border-color .22s, transform .22s, background .22s;
}
.card:hover{border-color:var(--slate-600); transform:translateY(-3px)}
.card h3{margin-bottom:8px}
.card p{font-size:15px; color:var(--muted); margin:0}
.grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px}
.grid-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:22px}
.grid-4{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px}

.kicker{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); margin-bottom:10px;
}
.chip{
  display:inline-block; font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:4px;
  border:1px solid; white-space:nowrap;
}
.chip-live{color:var(--mint-500); border-color:rgb(0 229 160 / .4); background:rgb(0 229 160 / .08)}
.chip-soon{color:var(--amber-500); border-color:rgb(255 176 32 / .4); background:rgb(255 176 32 / .08)}
.chip-crit{color:var(--coral-500); border-color:rgb(255 59 92 / .45); background:rgb(255 59 92 / .1)}

/* ============ components ============ */

/* reveal — visible by default; JS only adds motion when allowed.
   Uses the individual translate/scale properties, never `transform`, so a
   revealing element can still carry a pointer tilt or a scroll-linked
   rotation on its transform at the same time. */
.reveal{opacity:1; translate:none; scale:none}
.js-motion .reveal{
  opacity:0; translate:0 26px; scale:.978;
  transition:opacity .75s cubic-bezier(.16,1,.3,1),
             translate .9s cubic-bezier(.16,1,.3,1),
             scale .9s cubic-bezier(.16,1,.3,1);
}
.js-motion .reveal.in{opacity:1; translate:none; scale:none}

/* ---------- authorization matrix ---------- */
.mx-shell{border:1px solid var(--border); border-radius:var(--r); background:var(--surface); overflow:hidden}
.mx-bar{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:14px 18px; border-bottom:1px solid var(--rule); background:var(--surface-2);
}
.mx-title{font-family:var(--display); font-weight:600; font-size:15px}
.mx-legend{display:flex; gap:16px; flex-wrap:wrap; margin-left:auto}
.mx-legend i{display:flex; align-items:center; gap:6px; font-style:normal;
  font-family:var(--mono); font-size:10.5px; color:var(--dim); letter-spacing:.03em}
.sw{width:9px;height:9px;border-radius:2px;display:block}
.sw-ok{background:var(--mint-500)} .sw-no{background:var(--ink-600)} .sw-bad{background:var(--coral-500)}
.mx-scroll{overflow-x:auto}
table.mx{border-collapse:collapse; width:100%; min-width:720px}
table.mx th, table.mx td{border-bottom:1px solid var(--rule); border-right:1px solid var(--rule)}
table.mx thead th{
  font-family:var(--mono); font-size:11px; font-weight:500; color:var(--muted);
  text-align:left; padding:12px 14px; white-space:nowrap; background:rgb(255 255 255 / .015);
}
.mx-corner{color:var(--dim)!important; font-style:italic}
table.mx tbody th{
  font-family:var(--display); font-size:14px; font-weight:600; text-align:left;
  padding:12px 14px; white-space:nowrap; color:var(--text);
}
table.mx td{text-align:center; padding:12px 14px; position:relative; font-family:var(--mono); font-size:13px}
table.mx tr:last-child th, table.mx tr:last-child td{border-bottom:none}
table.mx th:last-child, table.mx td:last-child{border-right:none}
td[data-s="ok"]::after{content:"✓"; color:var(--mint-500); font-weight:700}
td[data-s="no"]::after{content:"—"; color:#3A4552}
td[data-s="bad"]::after{content:"LEAK"; color:var(--coral-500); font-weight:700; font-size:10px; letter-spacing:.09em}
td[data-s="bad"]{background:rgb(255 59 92 / .09); box-shadow:inset 0 0 0 1px rgb(255 59 92 / .28)}
td.lit{animation:cellpop .45s cubic-bezier(.2,.8,.3,1)}
@keyframes cellpop{
  0%{background:rgb(76 141 255 / .28)}
  100%{background:transparent}
}
td[data-s="bad"].lit{animation:cellbad .7s ease}
@keyframes cellbad{
  0%{background:rgb(255 59 92 / .5)} 100%{background:rgb(255 59 92 / .09)}
}
.mx-foot{
  display:flex; gap:14px; align-items:flex-start; padding:16px 18px;
  border-top:1px solid var(--rule); background:var(--surface-2);
  font-size:14px; color:var(--muted);
}
.mx-foot .chip{flex:none; margin-top:2px}

/* ---------- evidence terminal ---------- */
.term{border:1px solid var(--border); border-radius:var(--r); background:#0A0D12; overflow:hidden}
.term-bar{display:flex; align-items:center; gap:12px; padding:12px 16px;
  border-bottom:1px solid var(--rule); background:var(--surface-2)}
.term-t{font-family:var(--mono); font-size:12.5px; color:var(--text)}
.term-x{margin-left:auto; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mint-500)}
.term-b{
  margin:0; padding:18px 18px 20px; font-family:var(--mono); font-size:12.6px; line-height:1.85;
  color:#B9C2CE; overflow-x:auto; white-space:pre;
}
.c-dim{color:#5B6675} .c-key{color:var(--sentinel-300)} .c-hi{color:var(--cipher-300)}
.c-bad{color:var(--coral-500)} .c-ok{color:var(--mint-500)}

/* ---------- agent flow ---------- */
.flow{display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:center;
  border:1px solid var(--border); border-radius:var(--r); background:var(--surface); padding:28px}
@media(max-width:820px){.flow{grid-template-columns:1fr; text-align:center}}
.flow-box{border:1px solid var(--border); border-radius:8px; padding:20px; background:var(--surface-2)}
.flow-box strong{display:block; font-family:var(--display); font-size:19px; margin-bottom:6px}
.flow-box span{font-size:13.5px; color:var(--muted); line-height:1.55}
.flow-mid{min-width:210px; display:flex; flex-direction:column; gap:9px; align-items:center}
.flow-line{position:relative; height:2px; width:100%; background:var(--ink-600); border-radius:2px}
.pkt{position:absolute; top:-3px; width:8px; height:8px; border-radius:50%;
  background:var(--sentinel-500); box-shadow:0 0 10px var(--sentinel-500); animation:slide 2.8s linear infinite}
.flow-line.rev .pkt{background:var(--mint-500); box-shadow:0 0 10px var(--mint-500); animation:slideR 2.8s linear infinite; animation-delay:1.1s}
@keyframes slide{from{left:-4px}to{left:calc(100% - 4px)}}
@keyframes slideR{from{left:calc(100% - 4px)}to{left:-4px}}
.flow-lbl{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--dim);
  text-transform:uppercase; text-align:center}

/* ---------- pills ---------- */
.pills{display:flex; flex-wrap:wrap; gap:9px}
.pill{
  font-family:var(--mono); font-size:12.5px; padding:8px 14px; border-radius:999px;
  border:1px solid var(--border); color:var(--muted); background:var(--surface);
  transition:border-color .2s, color .2s, transform .2s;
}
.pill:hover{transform:translateY(-2px); color:var(--text); border-color:var(--slate-600)}
.pill.hot{
  color:#fff; border-color:transparent; background:var(--grad); font-weight:500;
  box-shadow:0 4px 18px -6px rgb(124 92 255 / .6);
}

/* ---------- tick lists ---------- */
ul.tick{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
ul.tick li{position:relative; padding-left:24px; font-size:15px; color:var(--muted); line-height:1.5}
ul.tick li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--mint-500); font-weight:700}
ul.tick.warn li::before{content:"○"; color:var(--amber-500)}

/* ---------- CTA ---------- */
.cta{text-align:center; overflow:hidden}
.cta::before{
  content:""; position:absolute; left:50%; top:0; width:900px; height:520px;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(50% 50% at 50% 30%, rgb(124 92 255 / .18), transparent 70%);
  filter:blur(24px);
}
.cta-in{position:relative; display:flex; flex-direction:column; align-items:center; gap:20px}
.cta-mark{width:62px; height:auto; animation:bob 5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.cta .lede{text-align:center}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule); padding:56px 0 0; background:var(--ink-900)}
.foot-in{display:grid; grid-template-columns:1.2fr 2fr; gap:44px; padding-bottom:44px}
@media(max-width:820px){.foot-in{grid-template-columns:1fr; gap:32px}}
.foot-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.foot-cols h4{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); font-weight:500; margin:0 0 14px}
.foot-cols a{display:block; font-size:14px; color:var(--muted); text-decoration:none;
  margin-bottom:9px; transition:color .18s}
.foot-cols a:hover{color:var(--text)}
.foot-b{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  border-top:1px solid var(--rule); padding-top:20px; padding-bottom:26px;
  font-family:var(--mono); font-size:11.5px; color:var(--dim)}
.mono-s{color:var(--mint-500); letter-spacing:.06em}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1!important; transform:none!important}
}

/* ==========================================================================
   MULTI-PAGE CHROME + COMPONENTS
   ========================================================================== */

/* ---------- mega menu ---------- */
.nav-in{position:relative}
.menu{display:flex; gap:4px; margin-left:auto; align-items:center}
@media(max-width:1080px){.menu{display:none}}
.mi{position:relative}
.mi > a, .mi > button{
  display:flex; align-items:center; gap:6px; padding:9px 13px; border-radius:7px;
  font-family:var(--sans); font-size:14px; color:var(--muted); background:none; border:0;
  cursor:pointer; text-decoration:none; transition:color .18s, background .18s;
}
.mi > a:hover, .mi > button:hover, .mi.open > button{color:var(--text); background:rgb(255 255 255 / .04)}
/* a little accent on the nav: a rule that grows from the centre on hover, and
   the open menu's label and caret taking the action colour */
.mi > a::after, .mi > button::after{content:""; position:absolute; left:50%; right:50%; bottom:2px;
  height:2px; border-radius:2px; background:var(--action);
  transition:left .22s cubic-bezier(.16,1,.3,1), right .22s cubic-bezier(.16,1,.3,1)}
.mi:hover > a::after, .mi:hover > button::after,
.mi.open > button::after{left:13px; right:13px}
/* the nav text stays white; only the rule underneath carries the accent */
.mi.open > button{color:var(--text)}
.menu .signin:hover{color:var(--text)}
.mi .caret{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .22s}
.mi.open .caret{transform:rotate(180deg)}
.drop{
  position:absolute; top:calc(100% + 12px); left:-8px; z-index:80;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:12px; box-shadow:0 24px 60px -20px rgb(0 0 0 / .8), 0 0 0 1px rgb(255 255 255 / .02);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s cubic-bezier(.2,.8,.3,1), visibility .2s;
}
.mi.open .drop{opacity:1; visibility:visible; transform:none}
.drop.wide{width:560px; display:grid; grid-template-columns:1fr 1fr; gap:4px}
.drop.tall{width:280px}
.drop a{
  display:block; padding:11px 13px; border-radius:8px; text-decoration:none;
  transition:background .16s;
}
.drop a:hover{background:rgb(255 255 255 / .045)}
.drop a strong{display:block; font-family:var(--display); font-size:14.5px; font-weight:600; color:var(--text); margin-bottom:2px}
.drop a span{display:block; font-size:12.5px; color:var(--dim); line-height:1.45}
.drop .dhead{
  grid-column:1/-1; font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim); padding:8px 13px 4px;
}

/* mobile drawer */
.burger{display:none; margin-left:auto; background:none; border:1px solid var(--border);
  border-radius:8px; width:40px; height:38px; cursor:pointer; align-items:center; justify-content:center}
.burger span{display:block; width:17px; height:1.5px; background:var(--text); position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:17px; height:1.5px;
  background:var(--text); transition:transform .22s}
.burger span::before{top:-5.5px} .burger span::after{top:5.5px}
@media(max-width:1080px){.burger{display:flex}}
.drawer{
  position:fixed; inset:70px 0 0; z-index:70; background:var(--bg); overflow-y:auto;
  padding:22px 28px 60px; display:none;
}
.drawer.open{display:block}
.drawer h4{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); margin:22px 0 10px; font-weight:500}
.drawer a{display:block; padding:11px 0; font-family:var(--display); font-size:17px; font-weight:600;
  color:var(--text); text-decoration:none; border-bottom:1px solid var(--rule)}
.drawer .btn{margin-top:24px; width:100%; justify-content:center; border-bottom:0}

/* ---------- page header (interior pages) ---------- */
.phead{padding:64px 0 46px; border-bottom:1px solid var(--rule); position:relative; overflow:hidden}
.phead::before{content:""; position:absolute; inset:-40% 55% 20% -10%; pointer-events:none;
  background:radial-gradient(60% 60% at 50% 50%, rgb(31 111 235 / .13), transparent 70%); filter:blur(30px)}
.phead h1{font-size:clamp(34px,4.6vw,54px)}
.phead .lede{margin-top:18px}
.crumbs{font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--dim); margin-bottom:16px}
.crumbs a{color:var(--dim); text-decoration:none}
.crumbs a:hover{color:var(--action-text)}

/* ---------- testimonials ---------- */
.quotes{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px}
.quote{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:26px; position:relative; transition:border-color .22s, transform .22s;
}
.quote:hover{border-color:var(--slate-600); transform:translateY(-3px)}
.quote::before{
  content:"”"; position:absolute; top:8px; right:20px; font-family:var(--display);
  font-size:64px; line-height:1; color:var(--ink-600);
}
.quote p{font-size:15.5px; line-height:1.62; color:var(--text); margin:0 0 20px; position:relative}
.quote footer{display:flex; align-items:center; gap:12px; border:0; padding:0; background:none}
.qav{width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:14px; color:#fff; background:var(--grad)}
.qmeta strong{display:block; font-size:14px; font-weight:600; color:var(--text)}
.qmeta span{display:block; font-family:var(--mono); font-size:11px; color:var(--dim)}
.sample-flag{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--amber-500);
  border:1px dashed rgb(255 176 32 / .5); background:rgb(255 176 32 / .07);
  padding:6px 12px; border-radius:6px; margin-bottom:22px;
}

/* ---------- stat band ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:var(--r); overflow:hidden}
.stat{background:var(--surface); padding:26px 24px}
.stat b{display:block; font-family:var(--display); font-size:38px; font-weight:700; line-height:1;
  letter-spacing:-.03em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat span{display:block; font-size:13.5px; color:var(--muted); margin-top:9px; line-height:1.45}

/* ---------- comparison matrix ---------- */
.cmp{width:100%; border-collapse:collapse; min-width:720px}
.cmp th, .cmp td{padding:15px 16px; border-bottom:1px solid var(--rule); text-align:left; font-size:14.5px}
.cmp thead th{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); font-weight:500; vertical-align:bottom}
.cmp thead th.us{color:var(--text); position:relative}
.cmp thead th.us::after{content:""; position:absolute; left:8px; right:8px; bottom:-1px; height:2px; background:var(--grad)}
.cmp td.us{background:rgb(31 111 235 / .06)}
.cmp tbody th{font-weight:500; color:var(--muted); font-size:14.5px; text-align:left}
.cmp .y{color:var(--mint-500); font-weight:700}
.cmp .n{color:#3A4552}
.cmp .p{color:var(--amber-500)}
.cmp tr:last-child th, .cmp tr:last-child td{border-bottom:none}

/* ---------- tabs (vuln explorer) ---------- */
.tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px}
.tab{
  font-family:var(--mono); font-size:12.5px; padding:9px 15px; border-radius:8px; cursor:pointer;
  border:1px solid var(--border); background:var(--surface); color:var(--muted);
  transition:all .18s;
}
.tab:hover{color:var(--text); border-color:var(--slate-600)}
.tab[aria-selected="true"]{background:var(--grad); border-color:transparent; color:#fff; font-weight:500}
.panel{display:none; border:1px solid var(--border); border-radius:var(--r); background:var(--surface); padding:28px}
.panel.on{display:grid; grid-template-columns:1fr 1fr; gap:32px}
@media(max-width:820px){.panel.on{grid-template-columns:1fr; gap:22px}}
.panel h3{margin-bottom:10px}
.panel p{font-size:15px; color:var(--muted); margin:0 0 14px}
.vs{border-left:2px solid var(--border); padding-left:20px}
.vs dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); margin-bottom:5px}
.vs dd{margin:0 0 16px; font-size:14.5px; color:var(--muted); line-height:1.55}
.vs dd:last-child{margin-bottom:0}
.vs .good{color:var(--mint-500)}

/* ---------- scan timeline ---------- */
.tl{border:1px solid var(--border); border-radius:var(--r); background:#0A0D12; overflow:hidden}
.tl-bar{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--rule);
  background:var(--surface-2); font-family:var(--mono); font-size:12px; color:var(--muted)}
.tl-steps{display:flex; gap:0; border-bottom:1px solid var(--rule)}
.tl-step{flex:1; padding:13px 10px; text-align:center; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.07em; text-transform:uppercase; color:var(--dim); border-right:1px solid var(--rule);
  position:relative; transition:color .3s}
.tl-step:last-child{border-right:0}
.tl-step.done{color:var(--mint-500)}
.tl-step.now{color:#fff; background:rgb(31 111 235 / .12)}
.tl-step.now::after{content:""; position:absolute; left:0; bottom:-1px; height:2px; width:100%; background:var(--grad)}
.tl-log{margin:0; padding:16px 18px; font-family:var(--mono); font-size:12.4px; line-height:1.95;
  color:#B9C2CE; height:212px; overflow:hidden}
.tl-log .ln{display:block; white-space:pre-wrap}
.tl-log .t{color:#4A5563}

/* ---------- pricing ---------- */
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:18px; align-items:start}
.plan{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:28px; position:relative}
.plan.feat{border-color:transparent; box-shadow:0 0 0 1.5px var(--sentinel-500), 0 20px 50px -24px rgb(31 111 235 / .6)}
.plan .tagp{position:absolute; top:-11px; left:28px; font-family:var(--mono); font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; background:var(--grad); color:#fff;
  padding:4px 10px; border-radius:5px; font-weight:600}
.plan h3{font-size:19px; margin-bottom:6px}
.plan .pr{font-family:var(--display); font-size:34px; font-weight:700; letter-spacing:-.03em; margin:14px 0 4px}
.plan .pr small{font-family:var(--mono); font-size:12px; font-weight:400; color:var(--dim); letter-spacing:0}
.plan .sub{font-size:13.5px; color:var(--dim); margin-bottom:20px; min-height:38px}
.plan .btn{width:100%; justify-content:center; margin-bottom:20px}
.plan ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.plan li{position:relative; padding-left:22px; font-size:14px; color:var(--muted); line-height:1.5}
.plan li::before{content:"✓"; position:absolute; left:0; color:var(--mint-500); font-weight:700}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer; list-style:none; padding:20px 0; font-family:var(--display); font-size:17px;
  font-weight:600; display:flex; align-items:center; gap:14px; transition:color .18s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+"; font-family:var(--mono); color:var(--action-text); font-size:19px; flex:none; width:16px}
.faq details[open] summary::before{content:"–"}
.faq summary:hover{color:var(--action-text)}
.faq p{padding:0 0 20px 30px; color:var(--muted); font-size:15px; margin:0}

/* ---------- forms ---------- */
.form{display:grid; gap:16px}
.field label{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim); margin-bottom:7px}
.field input, .field select, .field textarea{
  width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:8px;
  padding:12px 14px; color:var(--text); font-family:var(--sans); font-size:15px;
  transition:border-color .18s, background .18s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--action); background:var(--surface);
}
.field textarea{min-height:120px; resize:vertical}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:600px){.row2{grid-template-columns:1fr}}

/* ---------- docs ---------- */
.doc-grid{display:grid; grid-template-columns:230px minmax(0,1fr); gap:48px; align-items:start}
@media(max-width:900px){.doc-grid{grid-template-columns:minmax(0,1fr); gap:28px}}
.doc-nav{position:sticky; top:96px}
.doc-nav h4{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); margin:0 0 12px; font-weight:500}
.doc-nav a{display:block; font-size:14px; color:var(--muted); text-decoration:none; padding:6px 0;
  border-left:2px solid transparent; padding-left:12px; margin-left:-2px; transition:all .18s}
.doc-nav a:hover{color:var(--text); border-left-color:var(--action)}
.doc-body h2{font-size:26px; margin:38px 0 14px}
.doc-body h2:first-child{margin-top:0}
.doc-body h3{margin:26px 0 10px}
.doc-body p, .doc-body li{color:var(--muted); font-size:15.5px}
.doc-body pre{
  background:#0A0D12; border:1px solid var(--border); border-radius:8px; padding:16px 18px;
  overflow-x:auto; font-family:var(--mono); font-size:12.8px; line-height:1.8; color:#B9C2CE; margin:0 0 20px;
}
.doc-body code{font-family:var(--mono); font-size:.88em; background:var(--surface-2);
  padding:2px 6px; border-radius:4px; color:var(--action-text)}
.doc-body pre code{background:none; padding:0; color:inherit}

/* ---------- legal ---------- */
.legal{max-width:74ch}
.legal h2{font-size:23px; margin:38px 0 12px}
.legal h3{font-size:17px; margin:24px 0 8px}
.legal p, .legal li{color:var(--muted); font-size:15.5px}
.legal .upd{font-family:var(--mono); font-size:12px; color:var(--dim); margin-bottom:32px}

/* ---------- logo strip ---------- */
.strip{display:flex; align-items:center; gap:40px; flex-wrap:wrap; justify-content:center;
  padding:26px 0; opacity:.55}
.strip span{font-family:var(--display); font-size:16px; font-weight:600; color:var(--muted); letter-spacing:.01em}

/* ---------- big footer ---------- */
.foot-in{grid-template-columns:1.1fr 3fr!important}
@media(max-width:900px){.foot-in{grid-template-columns:1fr!important}}
.foot-cols{grid-template-columns:repeat(5,1fr)!important}
@media(max-width:900px){.foot-cols{grid-template-columns:repeat(2,1fr)!important; gap:28px 24px}}
.foot-b .fb-links{display:flex; gap:20px; flex-wrap:wrap}
.foot-b a{color:var(--dim); text-decoration:none}
.foot-b a:hover{color:var(--text)}

/* ==========================================================================
   HOMEPAGE v2 — hero built on the mark, plus a wider component set
   ========================================================================== */

/* ---------- hero: the loop is the hero ---------- */
.hero2{
  position:relative; padding:34px 0 72px; text-align:center; overflow:hidden;
  border-bottom:1px solid var(--rule);
}
.hero2::before{  /* ambient field */
  content:""; position:absolute; left:50%; top:-8%; width:1100px; height:900px;
  transform:translateX(-50%); pointer-events:none; z-index:0;
  background:
    radial-gradient(38% 34% at 50% 34%, rgb(31 111 235 / .20), transparent 72%),
    radial-gradient(30% 26% at 62% 52%, rgb(124 92 255 / .16), transparent 72%);
  filter:blur(18px);
}
.hero2::after{  /* faint engineering grid */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.42;
  background-image:linear-gradient(var(--rule) 1px, transparent 1px),
                   linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(60% 52% at 50% 40%, #000 20%, transparent 78%);
          mask-image:radial-gradient(60% 52% at 50% 40%, #000 20%, transparent 78%);
}
.hero2 .wrap{position:relative; z-index:1}
.markstage{max-width:800px; margin:0 auto 2px}
.markstage svg{display:block; width:100%; height:auto; overflow:visible}

.tickring{fill:none; stroke:var(--ink-600); stroke-width:1.5; stroke-dasharray:2 15;
  transform-origin:490px 270px; animation:spin 64s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.scanarc{fill:none; stroke:var(--sentinel-500); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:120 1451; transform-origin:490px 270px; opacity:.7;
  animation:spin 7s linear infinite}
.h-track{fill:none; stroke:var(--ink-600); stroke-width:13; stroke-linecap:round}
.h-ring{fill:none; stroke:url(#hg); stroke-width:13; stroke-linecap:round}
.h-pulse{fill:none; stroke:#fff; stroke-width:13; stroke-linecap:round;
  stroke-dasharray:42 1400; filter:drop-shadow(0 0 12px rgb(124 92 255 / .95));
  animation:htravel 7s linear infinite}
@keyframes htravel{from{stroke-dashoffset:0}to{stroke-dashoffset:-1442}}
.h-seal{fill:none; stroke:var(--mint-500); stroke-width:13; stroke-linecap:round;
  opacity:.58; animation:hseal 7s ease-in-out infinite}
@keyframes hseal{0%,70%{opacity:.58}
  82%{opacity:1; filter:drop-shadow(0 0 22px rgb(0 229 160 / .9))}100%{opacity:.58}}
.h-core{fill:var(--mint-500); transform-origin:490px 270px; animation:hcore 7s ease-in-out infinite}
@keyframes hcore{0%,68%{opacity:.45; transform:scale(.9)}
  84%{opacity:1; transform:scale(1.08)}100%{opacity:.45; transform:scale(.9)}}
/* anatomy callouts — the mark explains itself */
.an-lead{fill:none; stroke:var(--ink-600); stroke-width:1.5; transition:stroke .4s}
.an-dot{fill:var(--ink-800); stroke:var(--slate-600); stroke-width:2; transition:all .4s}
.an-name{font-family:var(--display); font-size:16px; font-weight:600; fill:var(--muted); transition:fill .4s}
.an-desc{font-family:var(--mono); font-size:11.5px; fill:var(--dim); transition:fill .4s}
.anat.on .an-lead{stroke:var(--action)}
.anat.on .an-dot{fill:var(--action); stroke:var(--sentinel-300); r:5.5}
.anat.on .an-name{fill:#fff}
.anat.on .an-desc{fill:var(--action-text)}
/* the seal is the proof — light it in mint, not blue */
.anat[data-a="3"].on .an-lead{stroke:var(--mint-500)}
.anat[data-a="3"].on .an-dot{fill:var(--mint-500); stroke:var(--mint-500)}
.anat[data-a="3"].on .an-desc{fill:var(--mint-500)}
/* the mouth is the vulnerability — light it in coral */
.anat[data-a="2"].on .an-lead{stroke:var(--coral-500)}
.anat[data-a="2"].on .an-dot{fill:var(--coral-500); stroke:var(--coral-500)}
.anat[data-a="2"].on .an-desc{fill:var(--coral-500)}

@media(max-width:760px){
  .an-name{font-size:26px} .an-desc{display:none}
  .an-lead{stroke-width:2.5} .an-dot{r:7}
}

.hero2 h1{margin:6px 0 0; font-size:clamp(40px,6.2vw,76px)}
.hero2 h1 .g{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero2 h1 .m{color:var(--mint-500)}
.hero2 .lede{margin:16px auto 0; text-align:center; max-width:58ch}

/* stage strip under the mark */
.strip4{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:10px; overflow:hidden; margin:26px auto 0; max-width:900px}
@media(max-width:720px){.strip4{grid-template-columns:repeat(2,1fr)}}
.s4{background:var(--surface); padding:16px 14px; text-align:left; transition:background .35s}
.s4 .n{font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--dim); display:block; margin-bottom:5px}
.s4 strong{display:block; font-family:var(--display); font-size:15px; font-weight:600; color:var(--muted); transition:color .35s}
.s4 span{display:block; font-size:12.5px; color:var(--dim); margin-top:3px; line-height:1.45}
.s4.on{background:var(--surface-2)}
.s4.on strong{color:var(--text)}
.s4.on .n{color:var(--action-text)}

/* ---------- marquee ---------- */
.marq{overflow:hidden; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:18px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq-in{display:flex; gap:0; width:max-content; animation:marq 42s linear infinite}
.marq:hover .marq-in{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marq b{display:inline-flex; align-items:center; gap:14px; padding:0 22px;
  font-family:var(--mono); font-size:13px; font-weight:400; color:var(--muted); white-space:nowrap}
.marq b::after{content:"◆"; color:var(--ink-600); font-size:9px}

/* ---------- editorial statement ---------- */
.thesis{font-family:var(--display); font-weight:600; font-size:clamp(24px,3vw,38px);
  line-height:1.28; letter-spacing:-.022em; max-width:20ch; text-wrap:balance}
.thesis em{font-style:normal; background:var(--grad); -webkit-background-clip:text;
  background-clip:text; color:transparent}

/* ---------- process rail ---------- */
.rail{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:12px}
@media(max-width:900px){.rail{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.rail{grid-template-columns:1fr}}
.rail::before{content:""; position:absolute; left:26px; right:26px; top:19px; height:2px;
  background:linear-gradient(90deg,var(--sentinel-500),var(--cipher-500) 66%,var(--mint-500));
  opacity:.35}
@media(max-width:900px){.rail::before{display:none}}
.step{position:relative; padding-top:0}
.step .bub{width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--bg); border:2px solid var(--border); font-family:var(--mono); font-size:12px;
  font-weight:700; color:var(--action-text); position:relative; z-index:1; margin-bottom:16px}
.step:last-child .bub{border-color:var(--mint-500); color:var(--mint-500)}
.step h3{font-size:18px; margin-bottom:7px}
.step p{font-size:14.5px; color:var(--muted); margin:0}

/* ---------- bento ---------- */
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:16px}
@media(max-width:900px){.bento{grid-template-columns:1fr}}
.bx{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:26px;
  position:relative; overflow:hidden; transition:border-color .22s, transform .22s}
.bx:hover{border-color:var(--slate-600); transform:translateY(-3px)}
.bx.w4{grid-column:span 4} .bx.w3{grid-column:span 3} .bx.w2{grid-column:span 2}
@media(max-width:900px){.bx.w4,.bx.w3,.bx.w2{grid-column:span 1}}
.bx h3{font-size:19px; margin-bottom:9px}
.bx p{font-size:14.5px; color:var(--muted); margin:0}
.bx .glow{position:absolute; inset:auto -30% -60% auto; width:280px; height:280px; pointer-events:none;
  background:radial-gradient(circle, rgb(124 92 255 / .16), transparent 68%); filter:blur(12px)}
.bx.mint .glow{background:radial-gradient(circle, rgb(0 229 160 / .14), transparent 68%)}
.bx .lead-in{font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--action-text); margin-bottom:12px; display:block}

/* mini role grid inside a bento tile */
.mini{display:grid; grid-template-columns:repeat(5,1fr); gap:5px; margin-top:20px; max-width:196px}
.mini i{aspect-ratio:1; border-radius:3px; background:var(--ink-600); display:block}
.mini i.ok{background:rgb(0 229 160 / .55)}
.mini i.bad{background:var(--coral-500); box-shadow:0 0 10px rgb(255 59 92 / .7)}

/* before/after proof line inside a bento tile */
.pline{display:flex; align-items:center; gap:12px; margin-top:20px; flex-wrap:wrap}
.pline b{font-family:var(--mono); font-size:11.5px; font-weight:500; padding:7px 11px;
  border-radius:6px; border:1px solid; white-space:nowrap}
.pline .was{color:var(--coral-500); border-color:rgb(255 59 92 / .4); background:rgb(255 59 92 / .09)}
.pline .now{color:var(--mint-500); border-color:rgb(0 229 160 / .4); background:rgb(0 229 160 / .09)}
.pline i{font-style:normal; color:var(--dim); font-family:var(--mono); font-size:13px}
.pline .cap{flex-basis:100%; font-family:var(--mono); font-size:10.5px; color:var(--dim); letter-spacing:.06em}

/* ---------- real-numbers line ---------- */
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px;
  background:var(--border); border-block:1px solid var(--border)}
.fact{background:var(--bg); padding:28px 22px; text-align:center}
.fact b{display:block; font-family:var(--display); font-size:40px; font-weight:700; line-height:1;
  letter-spacing:-.03em; color:var(--text)}
.fact span{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--dim); margin-top:10px}

/* ---------- code tabs ---------- */
.ctabs{border:1px solid var(--border); border-radius:var(--r); background:#0A0D12; overflow:hidden}
.ctabs-bar{display:flex; background:var(--surface-2); border-bottom:1px solid var(--rule); overflow-x:auto}
.ctab{padding:13px 18px; font-family:var(--mono); font-size:12px; color:var(--dim); background:none;
  border:0; border-right:1px solid var(--rule); cursor:pointer; white-space:nowrap; transition:all .18s}
.ctab:hover{color:var(--text)}
.ctab[aria-selected="true"]{color:#fff; background:#0A0D12; box-shadow:inset 0 -2px 0 var(--sentinel-500)}
.cpane{display:none; margin:0; padding:20px; font-family:var(--mono); font-size:12.6px; line-height:1.9;
  color:#B9C2CE; overflow-x:auto; white-space:pre}
.cpane.on{display:block}
.k{color:var(--sentinel-300)} .v{color:var(--mint-500)} .cm{color:#5B6675} .st{color:var(--cipher-300)}

/* ---------- integration tiles ---------- */
.ints{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px}
.int{display:flex; align-items:center; gap:12px; padding:16px; border:1px solid var(--border);
  border-radius:9px; background:var(--surface); transition:border-color .2s, transform .2s}
.int:hover{border-color:var(--slate-600); transform:translateY(-2px)}
.int i{width:30px; height:30px; border-radius:7px; flex:none; display:grid; place-items:center;
  font-family:var(--display); font-size:12px; font-weight:700; color:#fff; background:var(--ink-600); font-style:normal}
.int span{font-size:14px; color:var(--text)}
.int em{display:block; font-style:normal; font-family:var(--mono); font-size:10.5px; color:var(--dim)}

/* ---------- audience cards ---------- */
.aud{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px}
.ac{display:block; text-decoration:none; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:28px; transition:border-color .22s, transform .22s, background .22s}
.ac:hover{border-color:var(--action); transform:translateY(-4px); background:var(--surface-2)}
.ac h3{font-size:20px; margin-bottom:9px; display:flex; align-items:center; gap:9px}
.ac p{font-size:14.5px; color:var(--muted); margin:0 0 16px}
.ac .go{font-family:var(--mono); font-size:12px; color:var(--action-text); display:inline-flex; gap:7px}
.ac:hover .go .arw{transform:translateX(4px)}
.ac .go .arw{transition:transform .2s}

@media(prefers-reduced-motion:reduce){
  .tickring,.scanarc,.h-pulse,.h-seal,.h-core,.marq-in{animation:none!important}
}

/* ---------- nav sign-in ---------- */
.signin{font-size:14px; color:var(--muted); text-decoration:none; padding:9px 13px;
  border-radius:7px; transition:color .18s, background .18s}
.signin:hover{color:var(--text); background:rgb(255 255 255 / .04)}

/* ---------- booking form ---------- */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.formnote{margin:0; font-family:var(--mono); font-size:13px; line-height:1.6; padding:12px 14px;
  border-radius:8px; border:1px solid}
.formnote.ok{color:var(--mint-500); border-color:rgb(0 229 160 / .4); background:rgb(0 229 160 / .08)}
.formnote.err{color:var(--coral-500); border-color:rgb(255 59 92 / .4); background:rgb(255 59 92 / .08)}
.field input:invalid:not(:placeholder-shown){border-color:var(--coral-500)}
button[disabled]{opacity:.6; cursor:progress}

/* ==========================================================================
   DEPTH & LIGHT
   Light bands to break up a long dark page, pointer-tilt on cards,
   scroll-linked 3D for the instrument panels, and the explanatory
   graphics (funnel, venn, rail, case file). Every motion rule sits under
   .js-motion, so reduced-motion and no-JS both get the flat layout.
   ========================================================================== */

/* ---------- light band ------------------------------------------------- */
.band.light{
  /* Cold Paper ground, Vault Ink type, muted step per the palette */
  --bg:var(--paper-100); --surface:var(--paper-000); --surface-2:#E9EDF2;
  --rule:rgb(11 15 20 / .10); --border:rgb(11 15 20 / .15);
  --text:var(--ink-900-text); --muted:var(--slate-600); --dim:var(--slate-600);
  --action-text:var(--sentinel-500);
  --data-2:var(--cipher-700);            /* violet encodes data as 700 on paper */
  --lift:0 1px 2px rgb(11 15 20 / .05), 0 16px 36px -22px rgb(11 15 20 / .28);
  color:var(--text); border-top-color:rgb(11 15 20 / .10);
  background:
    radial-gradient(1100px 420px at 50% -12%, rgb(31 111 235 / .10), transparent 70%),
    linear-gradient(180deg,#FBFCFD 0%,var(--paper-100) 100%);
}
.band.light::before{           /* faint measuring field, fades out downward */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(rgb(11 15 20 / .09) 1px, transparent 1.3px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 60%);
          mask-image:linear-gradient(180deg,#000,transparent 60%);
}
.band.light > .wrap{position:relative; z-index:1}
.band.light :is(.card,.bx,.ac,.int,.panel,.plan,.quote,.funnel){box-shadow:var(--lift)}
.band.light :is(.vs .good, ul.tick li::before){color:var(--mint-700)}
.band.light .tab{box-shadow:0 1px 2px rgb(11 15 20 / .05)}
.band.light .tab[aria-selected="true"]{box-shadow:0 10px 22px -10px rgb(31 111 235 / .65)}
.band.light .btn-ghost{background:#fff; border-color:var(--border)}
.band.light .btn-ghost:hover{background:#fff; border-color:var(--slate-500)}
/* the instrument panels stay dark on a light band — they read as hardware */
.band.light :is(.tl,.term,.ctabs,.mx-shell,.sheet){
  --surface:var(--ink-700); --surface-2:#171D26; --rule:#1B222B; --border:var(--ink-600);
  --text:var(--paper-100); --muted:var(--slate-500); --action-text:var(--sentinel-300);
  color:var(--text); border-color:var(--ink-600);
  box-shadow:0 40px 70px -34px rgb(11 15 20 / .55), 0 2px 6px rgb(11 15 20 / .10);
}

/* ---------- pointer tilt (JS adds .tilt on fine pointers only) ---------- */
.tilt{
  position:relative;
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .3s ease,
             border-color .22s, background .22s,
             opacity .75s cubic-bezier(.16,1,.3,1),
             translate .9s cubic-bezier(.16,1,.3,1),
             scale .9s cubic-bezier(.16,1,.3,1);
}
.tilt:hover{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)}
.tilt::after{            /* specular sheen that follows the cursor */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
             rgb(255 255 255 / .10), transparent 45%);
  opacity:0; transition:opacity .3s ease;
}
.tilt:hover::after{opacity:1}
.band.light .tilt::after{
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
             rgb(31 111 235 / .10), transparent 46%);
}
.band.light .tilt:hover{box-shadow:0 2px 4px rgb(11 15 20 / .05), 0 30px 54px -26px rgb(31 111 235 / .42)}

/* ---------- scroll-linked depth: a panel that stands up as you reach it -- */
.js-motion [data-depth]{
  transform-origin:50% 100%;
  transform:perspective(1700px)
            rotateX(calc((1 - var(--p,1)) * 17deg))
            scale(calc(.94 + var(--p,1) * .06));
  transition:transform .12s linear;
  will-change:transform;
}

/* ---------- reading-progress hairline ---------------------------------- */
.sprog{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:61; pointer-events:none;
  background:linear-gradient(90deg,var(--sentinel-500),var(--cipher-500) 60%,var(--mint-500));
  transform:scaleX(0); transform-origin:0 50%;
}

/* ---------- hero: depth field ------------------------------------------ */
.hero2{perspective:1400px}
.floor{                  /* a receding grid plane the hero sits on */
  position:absolute; left:-35%; right:-35%; bottom:-1px; height:48%;
  pointer-events:none; z-index:0; opacity:.55;
  transform:perspective(560px) rotateX(66deg); transform-origin:50% 100%;
  background-image:
    linear-gradient(rgb(76 141 255 / .30) 1px, transparent 1px),
    linear-gradient(90deg, rgb(76 141 255 / .18) 1px, transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:linear-gradient(0deg,#000 6%, transparent 82%);
          mask-image:linear-gradient(0deg,#000 6%, transparent 82%);
}
.js-motion .floor{animation:floorpull 3.4s linear infinite}
@keyframes floorpull{to{background-position:0 60px, 0 0}}
.orb{                    /* glass spheres, lit from the upper left */
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle at 33% 28%,
    rgb(255 255 255 / .55), rgb(124 92 255 / .45) 26%, rgb(31 111 235 / .22) 58%, transparent 73%);
  box-shadow:0 30px 60px -24px rgb(31 111 235 / .55);
  translate:calc(var(--hx,0) * -34px) calc(var(--hy,0) * -22px);
  transition:translate 1.1s cubic-bezier(.16,1,.3,1);
}
.orb.o1{width:104px; height:104px; left:6%;  top:24%}
.orb.o2{width:58px;  height:58px;  right:9%; top:54%;
  background:radial-gradient(circle at 33% 28%,
    rgb(255 255 255 / .5), rgb(0 229 160 / .4) 26%, rgb(0 229 160 / .16) 58%, transparent 73%);
  box-shadow:0 20px 44px -20px rgb(0 229 160 / .5);
}
.js-motion .orb{animation:drift 13s ease-in-out infinite}
.js-motion .orb.o2{animation-duration:9s; animation-direction:reverse}
@keyframes drift{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-22px) scale(1.04)}}
@media(max-width:760px){.orb{display:none}}
.markstage{
  transform:perspective(1400px)
            rotateY(calc(var(--hx,0) * 13deg))
            rotateX(calc(var(--hy,0) * -9deg));
  transition:transform 1s cubic-bezier(.16,1,.3,1);
  filter:drop-shadow(0 30px 50px rgb(5 8 11 / .6));
}

/* ---------- funnel: one run, narrowed to proof ------------------------- */
.funnel{
  margin-top:38px; border:1px solid var(--border); border-radius:14px;
  background:var(--surface); padding:26px 28px 22px; overflow:hidden;
}
.fn-head{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:22px}
.fn-head .kicker{margin:0}
.fn-note{font-family:var(--mono); font-size:11px; color:var(--dim); margin-left:auto}
.fn-row{display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:20px; align-items:center;
  padding:7px 0}
.fn-track{position:relative; height:34px; border-radius:7px; background:var(--surface-2);
  overflow:hidden}
.fn-fill{
  position:absolute; inset:0; margin:0 auto; width:calc(var(--w) * 100%); border-radius:7px;
  background:linear-gradient(90deg,var(--sentinel-500),var(--cipher-500));
  transform-origin:50% 50%;
}
.js-motion .fn-fill{transition:transform .95s cubic-bezier(.16,1,.3,1)}
.js-motion .funnel:not(.in) .fn-fill{transform:scaleX(0)}
.js-motion .fn-fill::after{      /* light travelling through the stage */
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent, rgb(255 255 255 / .35), transparent);
  translate:-100% 0; animation:sheen 3.4s ease-in-out infinite;
}
@keyframes sheen{0%{translate:-100% 0}55%,100%{translate:100% 0}}
.fn-row.bad .fn-fill{background:linear-gradient(90deg,#C42945,var(--coral-500))}
.fn-row.ok  .fn-fill{background:linear-gradient(90deg,var(--mint-700),var(--mint-500))}
.fn-meta b{font-family:var(--display); font-size:22px; font-weight:700; letter-spacing:-.02em;
  margin-right:8px}
.fn-meta span{font-size:13.5px; color:var(--muted)}
.fn-row.bad .fn-meta b{color:var(--coral-500)}
.fn-row.ok  .fn-meta b{color:var(--mint-700)}
@media(max-width:700px){
  .fn-row{grid-template-columns:1fr; gap:6px}
  .fn-meta{order:-1}
}

/* ---------- venn: the intersection is the product ---------------------- */
.sec-head.split{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:44px; align-items:center}
@media(max-width:900px){.sec-head.split{grid-template-columns:1fr; gap:26px}}
.venn{width:100%; height:auto; overflow:visible}
.venn circle.vc{stroke-width:1.5}
.venn .v-src{fill:rgb(31 111 235 / .20); stroke:var(--sentinel-500)}
.venn .v-run{fill:rgb(124 92 255 / .20); stroke:var(--cipher-500)}
.venn .v-both{fill:rgb(0 229 160 / .30); stroke:var(--mint-500); stroke-width:1.5}
.venn .v-name{font-family:var(--display); font-size:15px; font-weight:600; fill:var(--text)}
.venn .v-sub{font-family:var(--mono); font-size:10.5px; fill:var(--dim); letter-spacing:.05em}
.venn .v-mid{font-family:var(--display); font-size:15px; font-weight:700; fill:var(--mint-500)}
.band.light .venn .v-mid{fill:var(--mint-700)}
.js-motion .venn g{transition:translate 1.1s cubic-bezier(.16,1,.3,1), opacity .7s ease .35s}
.js-motion .venn:not(.in) .g-src{translate:-52px 0}
.js-motion .venn:not(.in) .g-run{translate:52px 0}
.js-motion .venn:not(.in) .g-both{opacity:0}

/* ---------- process rail: the line draws, the stages light -------------- */
.rail::before{top:27px; left:30px; right:30px}
.rail::after{
  content:""; position:absolute; left:30px; right:30px; top:27px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--sentinel-500),var(--cipher-500) 66%,var(--mint-500));
  transform:scaleX(var(--p,1)); transform-origin:0 50%;
  box-shadow:0 0 14px rgb(124 92 255 / .55);
}
@media(max-width:900px){.rail::after{display:none}}
.step .bub{
  width:56px; height:56px; border-radius:16px; border:1px solid transparent;
  background:var(--grad); color:#fff;
  box-shadow:0 14px 30px -12px rgb(31 111 235 / .75), inset 0 1px 0 rgb(255 255 255 / .22);
}
.step:last-child .bub{background:linear-gradient(135deg,var(--mint-700),var(--mint-500)); color:#04160F;
  box-shadow:0 14px 30px -12px rgb(0 229 160 / .5), inset 0 1px 0 rgb(255 255 255 / .3)}
.step .bub .ico{width:24px; height:24px}
.js-motion .step:not(.lit) .bub{
  background:var(--bg); border-color:var(--border); color:var(--dim); box-shadow:none;
}
.js-motion .step.lit .bub{animation:flipin .75s cubic-bezier(.16,1,.3,1)}
@keyframes flipin{from{transform:perspective(420px) rotateY(-165deg)}to{transform:perspective(420px) rotateY(0)}}
.step .no{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--dim);
  display:block; margin-bottom:5px}

/* ---------- receipt: business logic, shown not described ---------------- */
.rcpt{margin-top:20px; border:1px solid var(--rule); border-radius:9px; background:#0A0D12;
  padding:12px 14px; font-family:var(--mono); font-size:12px; color:#B9C2CE}
.rcpt div{display:flex; align-items:center; gap:10px; padding:3px 0}
.rcpt b{margin-left:auto; font-weight:500}
.rcpt .dup{color:var(--coral-500)}
.rcpt .dup em{font-style:normal; font-size:10px; letter-spacing:.06em; color:var(--coral-500);
  border:1px solid rgb(255 59 92 / .4); background:rgb(255 59 92 / .1); padding:1px 6px; border-radius:4px}
.js-motion .rcpt .dup{animation:dupflash 3.2s ease-in-out infinite}
@keyframes dupflash{0%,55%,100%{opacity:.55}70%{opacity:1}}
.rcpt .tot{border-top:1px dashed var(--ink-600); margin-top:6px; padding-top:8px; color:var(--paper-100)}

/* ---------- case file: the evidence stack ------------------------------ */
.casefile{position:relative; perspective:1500px; padding-top:40px}
.casefile .term{position:relative; z-index:3}
.sheet{
  position:absolute; z-index:1; height:210px; overflow:hidden;
  border:1px solid var(--border); border-radius:var(--r); background:#0E131A;
  box-shadow:0 30px 60px -34px rgb(0 0 0 / .9);
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.sheet-h{display:flex; align-items:center; gap:9px; padding:9px 14px; border-bottom:1px solid var(--rule);
  background:var(--surface-2); font-family:var(--mono); font-size:11.5px; color:var(--muted)}
.sheet-h i{width:7px; height:7px; border-radius:50%; background:var(--slate-600); flex:none}
.sheet-b{margin:0; padding:12px 14px; font-family:var(--mono); font-size:11.5px; line-height:1.75;
  color:#8B96A5; white-space:pre}
.sh-src{top:20px; left:34px; right:-16px; transform:rotate(1.6deg)}
.sh-shot{top:0;  left:66px; right:-32px; transform:rotate(3.4deg)}
.casefile:hover .sh-src{transform:translate(14px,-22px) rotate(3.4deg)}
.casefile:hover .sh-shot{transform:translate(30px,-40px) rotate(6deg)}
.shot-rows{display:flex; flex-direction:column; gap:8px; padding:14px}
.shot-rows span{height:9px; border-radius:3px; background:var(--ink-600)}
.shot-rows span:nth-child(2){width:72%}
.shot-rows span:nth-child(3){width:54%; background:rgb(255 59 92 / .45)}
.shot-rows span:nth-child(4){width:64%}
@media(max-width:900px){.sheet{display:none} .casefile{padding-top:0}}

/* ---------- perimeter flow --------------------------------------------- */
.flow-box.perim{border:1px dashed rgb(0 229 160 / .5); background:rgb(0 229 160 / .04)}
.flow-deny{display:flex; align-items:center; justify-content:center; gap:9px; margin-top:4px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--dim)}
.flow-deny i{font-style:normal; color:var(--coral-500); border:1px solid rgb(255 59 92 / .4);
  background:rgb(255 59 92 / .1); border-radius:4px; padding:1px 7px}

/* ---------- card icons -------------------------------------------------- */
.ico{fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  width:20px; height:20px; flex:none}
.card .icobox, .ac .icobox{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center; margin-bottom:14px;
  color:var(--action-text); background:rgb(31 111 235 / .10);
  border:1px solid rgb(31 111 235 / .22);
}
.band.light .card .icobox, .band.light .ac .icobox{background:rgb(31 111 235 / .08)}
.ac .icobox{margin-bottom:16px}

/* ---------- CTA mark, spun like a coin ---------------------------------- */
.cta-in{perspective:700px}
.js-motion .cta-mark{animation:bob 5s ease-in-out infinite, coin 11s ease-in-out infinite}
@keyframes coin{0%,100%{rotate:y -26deg}50%{rotate:y 26deg}}

@media(prefers-reduced-motion:reduce){
  .tilt{transform:none!important}
  .js-motion [data-depth]{transform:none!important}
  .floor,.orb,.markstage{animation:none!important; transform:none!important}
}

/* two light bands in a row read as one sheet, not two panels */
.band.light + .band.light{
  border-top-color:transparent;
  background:linear-gradient(180deg,#EFF2F6 0%,#FAFBFC 100%);
}
.band.light + .band.light::before{display:none}

/* ==========================================================================
   CREATIVE LAYER
   Aurora fields, gradient-lit glass cards, a cursor spotlight, angled band
   edges, the scroll-driven loop scene and the escalation-path diagram.
   Palette discipline: Sentinel for action, Cipher 500 for brand surfaces
   only, --data-2 (Cipher 300 on ink / 700 on paper) wherever a colour
   encodes data, Mint for verified, Coral for critical.
   ========================================================================== */

/* ---------- aurora + grain ---------------------------------------------- */
.aurora{position:absolute; inset:-25% -12% auto -12%; height:150%; z-index:0;
  pointer-events:none; filter:blur(64px); opacity:.6}
.aurora i{position:absolute; display:block; border-radius:50%}
.aurora i:nth-child(1){inset:4% auto auto 2%; width:46%; aspect-ratio:1.3;
  background:radial-gradient(circle, rgb(31 111 235 / .55), transparent 66%)}
.aurora i:nth-child(2){inset:18% 4% auto auto; width:40%; aspect-ratio:1.1;
  background:radial-gradient(circle, rgb(124 92 255 / .45), transparent 66%)}
.aurora i:nth-child(3){inset:auto auto 6% 34%; width:34%; aspect-ratio:1.4;
  background:radial-gradient(circle, rgb(0 229 160 / .22), transparent 66%)}
.js-motion .aurora i:nth-child(1){animation:au1 21s ease-in-out infinite}
.js-motion .aurora i:nth-child(2){animation:au2 26s ease-in-out infinite}
.js-motion .aurora i:nth-child(3){animation:au1 31s ease-in-out infinite reverse}
@keyframes au1{0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(6%,-8%,0) scale(1.15)}}
@keyframes au2{0%,100%{transform:translate3d(0,0,0) scale(1.05)}
  50%{transform:translate3d(-8%,6%,0) scale(.92)}}

body::before{            /* film grain, so the flat ink has a surface */
  content:""; position:fixed; inset:0; z-index:90; pointer-events:none; opacity:.05;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* ---------- cursor spotlight (JS positions it) -------------------------- */
.spot{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0;
  transition:opacity .45s ease;
  background:radial-gradient(420px circle at var(--sx,50%) var(--sy,40%),
             rgb(31 111 235 / .13), rgb(124 92 255 / .06) 42%, transparent 66%);
}
.spot.on{opacity:1}

/* ---------- gradient-lit cards ------------------------------------------ */
@property --ang{syntax:"<angle>"; inherits:false; initial-value:0deg}
.gcard{position:relative; isolation:isolate}
.gcard > *{position:relative; z-index:2}
.gcard::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.2px; z-index:1;
  pointer-events:none; opacity:0; transition:opacity .35s ease;
  background:conic-gradient(from var(--ang),
    transparent 0deg 210deg, var(--sentinel-500) 275deg, var(--cipher-500) 320deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
}
.gcard:hover::before{opacity:1}
.js-motion .gcard:hover::before{animation:spinang 3.8s linear infinite}
@keyframes spinang{to{--ang:360deg}}
.band.light .gcard::before{
  background:conic-gradient(from var(--ang),
    transparent 0deg 210deg, var(--sentinel-500) 275deg, var(--cipher-700) 320deg, transparent 360deg);
}

/* ---------- angled band edges ------------------------------------------- */
.band.light{clip-path:polygon(0 34px, 100% 0, 100% 100%, 0 calc(100% - 34px)); margin-block:-22px;
  padding-block:106px}
.band.light + .band.light{clip-path:polygon(0 0, 100% 34px, 100% calc(100% - 34px), 0 100%)}
@media(max-width:700px){.band.light{clip-path:none; margin-block:0; padding-block:74px}}

/* ---------- the loop, told as you scroll -------------------------------- */
.story{--p:.28}
.story.s0{--p:.28} .story.s1{--p:.58} .story.s2{--p:.82} .story.s3{--p:1}
.story-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px;
  align-items:start}
@media(max-width:940px){.story-grid{grid-template-columns:1fr; gap:22px}}
.story-stage{position:sticky; top:104px}
@media(max-width:940px){.story-stage{position:static}}
.loopfig{display:block; width:100%; height:auto; overflow:visible;
  filter:drop-shadow(0 30px 50px rgb(5 8 11 / .55))}
.lf-track{fill:none; stroke:var(--ink-600); stroke-width:13; stroke-linecap:round}
.lf-arc{fill:none; stroke:url(#lfg); stroke-width:13; stroke-linecap:round;
  stroke-dasharray:786; stroke-dashoffset:calc(786px * (1 - var(--p)));
  transition:stroke-dashoffset .9s cubic-bezier(.16,1,.3,1)}
.lf-core{fill:var(--sentinel-500); transition:fill .55s ease, filter .55s ease}
.story.s1 .lf-core{fill:var(--coral-500); filter:drop-shadow(0 0 20px rgb(255 59 92 / .65))}
.story.s2 .lf-core{fill:var(--data-2)}
.story.s3 .lf-core{fill:var(--mint-500); filter:drop-shadow(0 0 22px rgb(0 229 160 / .6))}
.lf-seal{fill:none; stroke:var(--mint-500); stroke-width:13; stroke-linecap:round;
  stroke-dasharray:176; stroke-dashoffset:176; transition:stroke-dashoffset 1s cubic-bezier(.16,1,.3,1)}
.story.s3 .lf-seal{stroke-dashoffset:0}
.lf-ring{fill:none; stroke:var(--ink-600); stroke-width:1.5; stroke-dasharray:2 14;
  transform-origin:260px 260px}
.js-motion .lf-ring{animation:spin 70s linear infinite}
.lf-dots circle{fill:var(--ink-600); opacity:0; transition:fill .5s ease, opacity .5s ease}
.story.s0 .lf-dots circle, .story.s1 .lf-dots circle,
.story.s2 .lf-dots circle, .story.s3 .lf-dots circle{opacity:1; fill:var(--sentinel-500)}
.lf-dots circle:nth-child(odd){transition-delay:.12s}
.lf-pkt{fill:var(--coral-500); opacity:0}
.js-motion .story.s1 .lf-pkt{opacity:1; animation:pktin 2.4s cubic-bezier(.4,0,.5,1) infinite}
@keyframes pktin{0%{translate:150px 0; opacity:0}12%{opacity:1}
  72%{translate:-104px 0; opacity:1}100%{translate:-104px 0; opacity:0}}
.lf-patch{fill:var(--data-2); opacity:0; transition:opacity .5s ease}
.js-motion .story.s2 .lf-patch{opacity:1; animation:patchin 2.6s ease-in-out infinite}
@keyframes patchin{0%{translate:0 130px; opacity:0}30%,70%{translate:0 0; opacity:1}
  100%{translate:0 0; opacity:0}}
.lf-cap{font-family:var(--mono); font-size:15px; fill:var(--muted); opacity:0; transition:opacity .45s}
.story.s0 .lf-c0, .story.s1 .lf-c1, .story.s2 .lf-c2, .story.s3 .lf-c3{opacity:1}
.story.s1 .lf-c1{fill:var(--coral-500)}
.story.s3 .lf-c3{fill:var(--mint-500)}

.story-steps{display:flex; flex-direction:column}
.stg{border-left:2px solid var(--rule); padding:34px 0 34px 28px; min-height:min(46vh,400px);
  transition:opacity .45s ease, border-color .45s ease}
/* only dim the inactive stages when something is there to undim them */
.js-motion .stg:not(.on){opacity:.4}
@media(max-width:940px){.stg{min-height:0; padding:22px 0 22px 22px; opacity:1}}
.stg.on{opacity:1; border-left-color:var(--action)}
.stg:last-child.on{border-left-color:var(--mint-500)}
.stg-h{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.stg-n{font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--dim)}
.stg.on .stg-n{color:var(--action-text)}
.stg-ic{width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  border:1px solid var(--border); color:var(--dim); transition:all .45s ease}
.stg.on .stg-ic{background:var(--grad); border-color:transparent; color:#fff;
  box-shadow:0 12px 26px -12px rgb(31 111 235 / .8)}
.stg:last-child.on .stg-ic{background:linear-gradient(135deg,var(--mint-700),var(--mint-500));
  color:#04160F; box-shadow:0 12px 26px -12px rgb(0 229 160 / .55)}
.stg h3{font-size:22px; margin-bottom:8px}
.stg p{font-size:15px; color:var(--muted); margin:0}

/* ---------- escalation paths -------------------------------------------- */
.paths{margin-bottom:26px; border:1px solid var(--border); border-radius:14px;
  background:var(--surface); padding:22px 20px 14px; overflow:hidden}
.paths svg{display:block; width:100%; height:auto; overflow:visible}
.pt-lbl{font-family:var(--mono); font-size:13px; fill:var(--muted)}
.pt-role{font-family:var(--display); font-size:15px; font-weight:600; fill:var(--text)}
.pt-line{fill:none; stroke:var(--ink-600); stroke-width:1.6}
.pt-ok{fill:none; stroke:var(--mint-700); stroke-width:1.8; opacity:.85}
.pt-bad{fill:none; stroke:var(--coral-500); stroke-width:2.6; stroke-dasharray:9 7;
  filter:drop-shadow(0 0 7px rgb(255 59 92 / .7))}
.js-motion .pt-bad{animation:flow 1.1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-32}}
.pt-node{fill:var(--surface-2); stroke:var(--border); stroke-width:1.5}
.pt-node.bad{stroke:var(--coral-500); fill:rgb(255 59 92 / .12)}
.pt-tag{font-family:var(--mono); font-size:11px; letter-spacing:.09em; fill:var(--coral-500)}

/* ---------- facts, lit --------------------------------------------------- */
.facts{position:relative; overflow:hidden}
.fact b{background:linear-gradient(135deg,var(--sentinel-500),var(--data-2));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.fact{position:relative}
.fact::after{content:""; position:absolute; left:50%; bottom:18px; width:26px; height:2px;
  translate:-50% 0; background:var(--grad); opacity:.5}

/* ---------- marquee, two directions -------------------------------------- */
.marq.rev .marq-in{animation-direction:reverse}
.marq.rev b{color:var(--dim)}
.marq b em{font-style:normal; color:var(--data-2)}
.marq + .marq{border-top:0}

/* ---------- data colour corrections -------------------------------------- */
.fn-fill{background:linear-gradient(90deg,var(--sentinel-500),var(--data-2))}
.venn .v-run{fill:rgb(154 128 255 / .20); stroke:var(--data-2)}
.band.light .venn .v-run{fill:rgb(91 63 224 / .16)}
.venn .v-mid{fill:var(--text)}
.rcpt .dup{color:var(--paper-100)}
.rcpt .dup b{color:var(--coral-500)}

/* ---------- editorial artwork -------------------------------------------
   Vector only: a few KB each, sharp at any size, and the same geometry the
   homepage scene is built from. The keyword sits in HTML on top rather than
   inside the file, because an SVG loaded through <img> cannot fetch the
   brand webfonts and would fall back to whatever the reader happens to have. */
.art-wrap{position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--border)}
.art-wrap img{display:block; width:100%; height:auto}
.art-cap{position:absolute; left:clamp(18px,4%,34px); bottom:clamp(16px,6%,30px); right:18px}
.art-cap .kicker{color:var(--mint-500); margin-bottom:6px}
.art-cap h1,.art-cap h2,.art-cap .art-kw{
  font-family:var(--display); font-weight:700; letter-spacing:-.03em; line-height:1.02;
  margin:0; color:var(--text); text-shadow:0 2px 24px rgb(5 8 11 / .8)}
.post-art{display:block; width:100%; height:auto; border-radius:14px; border:1px solid var(--border)}

/* the A–Z banners on the knowledge hub */
.az-art{display:block; width:100%; height:auto; border-radius:12px;
  border:1px solid var(--border); margin-bottom:22px}


/* ---------- the pointer ---------------------------------------------------
   The cursor is the mark: the open ring turning slowly, the mint core on the
   exact point, and the seal drawing closed over anything clickable. It lives
   here rather than in the homepage stylesheet so every page has the same
   pointer. Only offered to a device that actually has one, so touch keeps its
   native behaviour and nothing is hidden from it. */
html.has-cursor,
html.has-cursor a,
html.has-cursor button,
html.has-cursor summary,
html.has-cursor input,
html.has-cursor textarea,
html.has-cursor select{cursor:none}
.cur{position:fixed; inset:0; z-index:150; pointer-events:none}
.cur i{position:absolute; top:0; left:0; display:block}
.cur-d{width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:1.5px;
  background:var(--mint-500); box-shadow:0 0 10px rgb(0 229 160 / .75);
  transition:background .25s, box-shadow .25s}
.cur-r{width:0; height:0}
.cur-m{position:absolute; left:0; top:0; width:34px; height:34px; margin:-17px 0 0 -17px;
  display:block; overflow:visible; animation:cur-turn 9s linear infinite;
  transition:width .28s cubic-bezier(.16,1,.3,1), height .28s cubic-bezier(.16,1,.3,1),
    margin .28s cubic-bezier(.16,1,.3,1)}
@keyframes cur-turn{to{transform:rotate(360deg)}}
.cur-m path{fill:none; stroke-width:7; stroke-linecap:round}
.cur-m .cur-ring{stroke:rgb(244 246 248 / .45); transition:stroke .25s}
/* over anything clickable the mark grows and the loop seals */
.cur-m .cur-seal{stroke:var(--mint-500); stroke-dasharray:72; stroke-dashoffset:72;
  transition:stroke-dashoffset .4s cubic-bezier(.16,1,.3,1)}
.cur.hot .cur-m{width:58px; height:58px; margin:-29px 0 0 -29px}
.cur.hot .cur-ring{stroke:var(--sentinel-300)}
.cur.hot .cur-seal{stroke-dashoffset:0}

/* ---------- knowledge hub ------------------------------------------------
   One hub, one page per term. The list is plain anchors so it works with no
   JavaScript at all; the search only hides rows that do not match. */
.kh-search{margin-bottom:26px; max-width:560px}
.kh-search .lbl{display:block; margin-bottom:8px}
.kh-search input{width:100%; padding:13px 16px; border-radius:10px;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  font-family:var(--sans); font-size:16px; transition:border-color .18s, background .18s}
.kh-search input:focus{outline:none; border-color:var(--action); background:var(--surface-2)}
.kh-search input::placeholder{color:var(--dim)}
.kh-count{font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim); margin:10px 0 0}

.kh-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:12px; overflow:hidden}
.kh-row{display:block; padding:16px 18px; background:var(--bg); text-decoration:none;
  transition:background .16s}
.kh-row:hover{background:var(--surface)}
.kh-row b{display:block; color:var(--text); font-weight:600; margin-bottom:4px}
.kh-row span{display:block; color:var(--muted); font-size:14px; line-height:1.5}
.kh-row[hidden]{display:none}
.kh-none{margin-top:22px; color:var(--muted)}
/* the quieter second option under a call to action */
.cta-note{margin:16px auto 0; max-width:62ch; color:var(--muted); font-size:14.5px}
/* citations under a glossary entry */
.src-list{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.src-list li{padding-left:20px; position:relative; color:var(--muted); font-size:15px}
.src-list li::before{content:"\2197"; position:absolute; left:0; color:var(--action-text)}
.src-list a{color:var(--action-text); text-decoration:none}
.src-list a:hover{text-decoration:underline}

/* ---------- social ------------------------------------------------------
   Icons rather than labels: six names would crowd the footer's first column,
   and these marks are recognised without reading. Each link still carries an
   aria-label, so a screen reader hears the platform name. */
.social{display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:20px 0 0}
.social a{display:grid; place-items:center; width:36px; height:36px; border-radius:9px;
  border:1px solid var(--border); color:var(--muted); background:rgb(255 255 255 / .02);
  transition:color .18s, border-color .18s, background .18s, transform .18s}
.social svg{width:17px; height:17px; fill:currentColor; display:block}
/* Each platform in its own colour. These are third-party marks, so they sit
   outside the brand palette on purpose: mint and coral still mean verified and
   critical everywhere else on the site. Muted at rest so the footer stays calm,
   full strength and lifted on hover. */
.social a{opacity:.72}
.social a:hover{opacity:1; transform:translateY(-2px)}
.social .s-li{color:#0A66C2}  .social .s-li:hover{border-color:#0A66C2; background:rgb(10 102 194 / .14)}
.social .s-x{color:#E9EDF2}   .social .s-x:hover{border-color:#E9EDF2; background:rgb(233 237 242 / .12)}
.social .s-ig{color:#E4405F}  .social .s-ig:hover{border-color:#E4405F; background:rgb(228 64 95 / .14)}
.social .s-th{color:#E9EDF2}  .social .s-th:hover{border-color:#E9EDF2; background:rgb(233 237 242 / .12)}
.social .s-fb{color:#1877F2}  .social .s-fb:hover{border-color:#1877F2; background:rgb(24 119 242 / .14)}
.social .s-rd{color:#FF4500}  .social .s-rd:hover{border-color:#FF4500; background:rgb(255 69 0 / .14)}

/* ---------- prose links --------------------------------------------------
   a{color:inherit} keeps navigation and cards from turning blue, but it also
   makes a link inside a paragraph invisible. Anywhere we write real prose,
   links take the accent and underline on hover so they read as links. */
.doc-body a:not(.btn),
.faq p a:not(.btn),
.kh-none a,
.rdy-note a{color:var(--action-text); text-decoration:none;
  border-bottom:1px solid rgb(0 229 160 / .35); transition:border-color .18s, color .18s}
.doc-body a:not(.btn):hover,
.faq p a:not(.btn):hover,
.kh-none a:hover,
.rdy-note a:hover{border-bottom-color:var(--action-text)}