/* ============================================================================
   UMBRA — landing. Hand-written CSS. No framework, no build step, no deps.
   Dark "operations console" system: void background, violet→cyan spectrum,
   lime only for LIVE state. Display: Space Grotesk. Body: Inter. Data: JetBrains.
   ========================================================================== */

:root{
  /* blueprint paper + ink — a light theme with dark "screens" as the accent device */
  --bg:#EDF2FB;
  --bg-2:#E3ECFA;
  --panel:#FFFFFF;
  --panel-2:#F6F9FF;
  --line:rgba(14,40,90,.13);
  --line-2:rgba(14,40,90,.24);
  --ink:#0B1B3A;
  --ink-2:#28406B;
  --muted:#57698C;
  --dim:#617394;
  --azure:#1B4BFF;
  --azure-2:#3B74FF;
  --teal:#0E93A8;
  --violet:#5B3EF5;
  --cyan:#0E93A8;
  --lime:#2E7D32;
  --amber:#B26A00;
  --red:#C42B4C;
  --ok:#0B8F62;
  --grad:linear-gradient(100deg,#1B4BFF 0%,#2F6BFF 46%,#0E93A8 100%);
  --grad-soft:linear-gradient(100deg,rgba(27,75,255,.10),rgba(14,147,168,.10));
  --paper:#FFFFFF;
  --grid:rgba(27,75,255,.055);
  --grid-2:rgba(27,75,255,.09);
  --display:"Space Grotesk","Inter",system-ui,-apple-system,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"Instrument Serif",Georgia,serif;
  --r:18px;
  --r-lg:18px;
  --pad:clamp(20px,4.2vw,40px);
  --max:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 22px 44px -30px rgba(14,40,90,.45);
  --plate:4px 4px 0 rgba(27,75,255,.10);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;color:var(--ink);
  background-color:var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px),
    linear-gradient(var(--grid-2) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-2) 1px,transparent 1px);
  background-size:26px 26px,26px 26px,130px 130px,130px 130px;
  background-position:-1px -1px,-1px -1px,-1px -1px,-1px -1px;
  font-family:var(--body);font-size:16px;line-height:1.6;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:rgba(124,92,255,.35);color:#fff}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--cyan);color:#04110f;padding:10px 16px;border-radius:10px;font-weight:600;transition:top .2s}
.skip:focus{top:16px}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.wrap.narrow{max-width:900px}
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.fine{color:var(--muted);font-size:.9rem;line-height:1.55;margin:10px 0 0}
.fine b{color:var(--ink-2);font-weight:600}

/* ── the screens are printed on the same paper: mono type and hairlines carry
      the terminal read, no dark surfaces anywhere ───────────────────────── */
.console,.termcard,.logcard,.pcard.feat{
  --bg:#F7FAFF; --bg-2:#F1F6FE; --panel:#FFFFFF; --panel-2:#F7FAFF;
  --line:rgba(14,40,90,.10); --line-2:rgba(14,40,90,.18);
  --ink:#0B1B3A; --ink-2:#28406B; --muted:#57698C; --dim:#617394;
  --ok:#0B8F62; --cyan:#0E93A8; --amber:#B26A00; --red:#C42B4C;
  --violet:#5B3EF5; --azure:#1B4BFF; --grad:linear-gradient(100deg,#1B4BFF 0%,#2F6BFF 38%,#0E93A8 100%);
  color:var(--ink);
}

/* ── progress + nav ─────────────────────────────────────────────── */
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:120;background:transparent}
.progress span{display:block;height:100%;width:0;background:var(--grad);box-shadow:0 0 18px rgba(46,230,214,.55)}

.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .35s var(--ease),border-color .35s,backdrop-filter .35s}
.nav::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent);opacity:0;transition:opacity .35s}
.nav.scrolled{background:rgba(255,255,255,.82);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);box-shadow:0 10px 30px -26px rgba(14,40,90,.55)}
.nav.scrolled::after{opacity:1}
.nav-in{display:flex;align-items:center;gap:20px;height:66px;transition:height .35s var(--ease)}
.nav.scrolled .nav-in{height:56px}

.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.mark{width:32px;height:32px;display:grid;place-items:center;color:var(--azure);filter:drop-shadow(0 2px 0 rgba(27,75,255,.16))}
.mark svg{width:100%;height:100%}
.brand-txt{font-family:var(--display);font-weight:700;letter-spacing:.14em;font-size:.95rem;display:flex;align-items:baseline;gap:2px}
.brand-txt em{font-style:normal;color:var(--azure);margin:0 1px}
.brand-txt span{font-family:var(--mono);font-weight:400;font-size:.6rem;letter-spacing:.18em;color:var(--dim);text-transform:uppercase}

.nav-links{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav-links a{position:relative;display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border-radius:9px;
  font-size:.845rem;font-weight:500;color:var(--ink-2);transition:color .2s,background .2s}
.nav-links a .ni{width:15px;height:15px;flex:0 0 auto;color:var(--dim);transition:color .2s,transform .25s var(--ease)}
.nav-links a::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:2px;border-radius:2px;
  background:var(--grad);opacity:0;transform:scaleX(.4);transform-origin:left;transition:opacity .25s,transform .3s var(--ease)}
.nav-links a:hover .ni,.nav-links a.active .ni{color:var(--azure)}
.nav-links a.active::after{opacity:1;transform:none}
.nav-links a:hover{color:var(--ink);background:rgba(27,75,255,.07)}
.nav-cta{display:flex;align-items:center;gap:14px;flex:0 0 auto}

.live{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ok)}
.live i{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(61,255,162,.6);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(61,255,162,.5)}70%{box-shadow:0 0 0 9px rgba(61,255,162,0)}100%{box-shadow:0 0 0 0 rgba(61,255,162,0)}}

.burger{display:none;width:40px;height:40px;border:1px solid var(--line-2);border-radius:10px;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
.burger span:first-child{top:15px}.burger span:last-child{top:23px}
.nav.open .burger span:first-child{transform:translateY(4px) rotate(45deg)}
.nav.open .burger span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* ── buttons ───────────────────────────────────────────────────── */
.btn{
  --bh:46px;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:var(--bh);padding:0 20px;border-radius:12px;font-family:var(--display);
  font-weight:600;font-size:.93rem;letter-spacing:-.01em;white-space:nowrap;
  transition:transform .18s var(--ease),box-shadow .28s var(--ease),background .25s,border-color .25s,color .2s;
  position:relative;isolation:isolate;
}
.btn svg{width:18px;height:18px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(1px) scale(.995)}
.btn-sm{--bh:36px;font-size:.82rem;padding:0 14px;border-radius:10px}
.btn-lg{--bh:56px;padding:0 30px;font-size:1.02rem;border-radius:14px}
.btn-primary{background:var(--grad);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.14);box-shadow:0 10px 26px -14px rgba(27,75,255,.85),var(--plate)}
.btn-primary:hover{box-shadow:0 16px 44px -12px rgba(46,230,214,.6),inset 0 1px 0 rgba(14,40,90,.45);transform:translateY(-1px)}
.btn-ghost{background:#fff;border:1px solid var(--line-2);color:var(--ink);box-shadow:0 1px 0 rgba(14,40,90,.04)}
.btn-ghost:hover{background:#fff;border-color:var(--azure);color:var(--azure);transform:translateY(-1px);box-shadow:var(--plate)}
.btn.wide{width:100%;margin-top:auto}

/* ── hero ──────────────────────────────────────────────────────── */
.hero{position:relative;padding:calc(56px + clamp(20px,2.6vh,34px)) 0 0;overflow:hidden}
.field{position:absolute;inset:0;width:100%;height:100%;opacity:.55;pointer-events:none}
.hero-glow{
  position:absolute;width:min(1100px,120vw);height:min(1100px,120vw);left:50%;top:-46%;
  transform:translateX(-50%);pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,rgba(124,92,255,.22),transparent 55%),
    radial-gradient(circle at 60% 40%,rgba(46,230,214,.13),transparent 50%);
  filter:blur(20px);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,28%),rgba(124,92,255,.12),transparent 62%);
  transition:background .25s linear;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(14,40,90,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(14,40,90,.028) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 20%,transparent 75%);
}
.hero-in{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(26px,3.5vw,52px);align-items:start;padding-bottom:clamp(14px,2vh,24px)}
.hero .console{margin-top:6px}

.eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
  border:1px solid rgba(61,255,162,.28);background:rgba(61,255,162,.07);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ok)}
.chip .dot{width:5px;height:5px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok)}
.eyebrow .sep{color:var(--dim)}

h1{
  font-family:var(--display);font-weight:700;letter-spacing:-.045em;line-height:.95;
  font-size:clamp(2.4rem,4.9vw,4.15rem);margin:0 0 18px;
}
h1 em{
  font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;
  background:linear-gradient(100deg,#fff 10%,#C9BEFF 45%,#8FF3E8 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-right:.06em;
}
.lede{font-size:clamp(.94rem,1.05vw,1.02rem);line-height:1.58;color:var(--ink-2);max-width:36em;margin:0 0 16px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}

/* console */
.console{
  position:relative;border-radius:var(--r-lg);border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(18,21,31,.92),rgba(9,11,16,.96));
  box-shadow:var(--shadow),0 0 0 1px rgba(255,255,255,.02) inset,0 1px 0 rgba(255,255,255,.06) inset;
  overflow:hidden;backdrop-filter:blur(8px);
}
.console::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(600px 200px at 20% -10%,rgba(124,92,255,.18),transparent 70%)}
.console-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);position:relative}
.dots{display:flex;gap:6px}
.dots i{width:9px;height:9px;border-radius:50%;background:#2A3040}
.dots i:nth-child(1){background:#3A2A34}.dots i:nth-child(2){background:#3A3626}.dots i:nth-child(3){background:#22333A}
.console-title{color:var(--muted);letter-spacing:.14em}
.console-state{margin-left:10px;display:inline-flex;align-items:center;gap:7px;color:var(--ok);font-size:.62rem}
.console-state .dot{width:5px;height:5px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
/* ── session recorder: a fixed-size box, dense rows, one live pane ── */
.sess{--sbody:208px;display:flex;flex-direction:column;height:506px}
.sess-clock{margin-left:auto;display:inline-flex;align-items:baseline;gap:6px;
  color:var(--dim);font-size:.58rem;letter-spacing:.12em}
.sess-clock b{color:var(--ink);font-family:var(--mono);font-weight:500;font-size:.76rem;
  letter-spacing:.02em;font-variant-numeric:tabular-nums}
.sess-track{position:relative;height:2px;margin:0 16px 8px;border-radius:2px;
  background:rgba(255,255,255,.07);overflow:hidden}
.sess-track span{display:block;height:100%;width:0;background:var(--grad);
  box-shadow:0 0 14px rgba(46,230,214,.7);transition:width .5s linear}

.rail{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;list-style:none;
  margin:0;padding:2px 16px 10px;position:relative;overflow:hidden}
.rail::before{content:"";position:absolute;left:27px;top:14px;bottom:18px;width:1px;
  background:linear-gradient(180deg,rgba(124,92,255,.6),rgba(46,230,214,.4) 52%,rgba(255,255,255,.05))}
.rail::after{content:"";position:absolute;left:27px;top:14px;width:1px;height:0;
  height:calc((100% - 32px) * var(--prog,0));background:linear-gradient(180deg,#7C5CFF,#2EE6D6 70%,#3DFFA2);
  box-shadow:0 0 12px rgba(46,230,214,.55);transition:height .4s linear;border-radius:1px}

.node{position:relative;display:grid;grid-template-columns:24px 84px minmax(0,1fr) auto;
  column-gap:10px;align-items:center;padding:4px 0;cursor:pointer}
.node:hover b{color:var(--ink)}
.node:focus-visible{outline:none}
.node .nid{grid-column:1;position:relative;justify-self:center;z-index:1;display:grid;place-items:center;
  width:24px;height:24px;border-radius:8px;border:1px solid var(--line-2);background:#0A0C12;color:var(--muted);
  font-size:.58rem;letter-spacing:.02em;font-variant-numeric:tabular-nums;
  transition:color .35s,border-color .35s,background .35s,box-shadow .35s}
.node b{grid-column:2;font-family:var(--display);font-size:.84rem;font-weight:600;letter-spacing:-.01em;
  color:var(--muted);white-space:nowrap;transition:color .35s}
.node .nres{grid-column:3;height:20px;line-height:20px;font-size:.6rem;letter-spacing:.05em;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .35s}
.node .nst{grid-column:4;font-size:.53rem;letter-spacing:.11em;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums;padding:2px 7px;border-radius:6px;border:1px solid var(--line);
  background:rgba(255,255,255,.035);transition:color .35s,border-color .35s,background .35s}
.node .nbody{grid-column:2 / 5;display:flex;flex-direction:column;height:0;overflow:hidden;opacity:0;
  transition:height .5s var(--ease),opacity .35s}
.node.on .nbody{height:var(--sbody);opacity:1}
.node.done .nres{opacity:1}

.node.on b{color:#fff}
.node.on .nst{color:#04110F;background:var(--grad);border-color:transparent;font-weight:500;
  box-shadow:0 0 18px -6px rgba(46,230,214,.9)}
.node.on .nid{color:#04110F;border-color:transparent;background:var(--grad);
  box-shadow:0 0 0 4px rgba(46,230,214,.08),0 0 24px -6px rgba(46,230,214,.85)}
.node.on .nid::after{content:"";position:absolute;inset:-1px;border-radius:8px;
  border:1px solid rgba(46,230,214,.65);animation:ring 2.4s var(--ease) infinite}
@keyframes ring{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(1.7);opacity:0}}
.node.done b{color:var(--ink-2)}
.node.done .nid{color:var(--ok);border-color:rgba(61,255,162,.38);background:rgba(61,255,162,.08)}
.node.done .nst{color:var(--ok);border-color:rgba(61,255,162,.28);background:rgba(61,255,162,.07)}

/* the live pane: window chrome so it reads as a real console, not a gap */
.pane{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:11px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012))}
.node.on .pane{border-color:rgba(124,92,255,.34);box-shadow:0 0 0 1px rgba(124,92,255,.08),
  0 16px 34px -26px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06)}
.node.on .pane::after{content:"";position:absolute;left:0;right:0;height:38%;top:-45%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(46,230,214,.07),transparent);
  animation:scan 4.8s linear infinite}
@keyframes scan{0%{top:-45%}100%{top:110%}}
.pane-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:0 0 auto;
  height:26px;padding:0 11px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03);
  color:var(--dim);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.pane-bar b{color:var(--cyan);font-weight:500;letter-spacing:.06em}
.pane-foot{flex:0 0 auto;height:24px;line-height:24px;padding:0 11px;border-top:1px solid var(--line);
  background:rgba(255,255,255,.02);color:var(--dim);font-size:.55rem;letter-spacing:.07em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.term{flex:1 1 auto;min-height:0;margin:0;padding:6px 11px;position:relative;overflow:hidden;
  font-family:var(--mono);font-size:.69rem;line-height:1.72;color:var(--ink-2);
  white-space:pre-wrap;word-break:break-word}
.term .ln{display:block}
.term .t{color:var(--dim)}
.term .ok{color:var(--ok)}
.term .ac{color:#A893FF}
.term .ask{color:#0B1B3A}
.term .cy{color:var(--cyan)}
.term .wr{color:var(--amber)}
.term .cursor{display:inline-block;width:7px;height:13px;background:var(--cyan);vertical-align:-2px;
  animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.arms{flex:0 0 auto;display:grid;grid-template-columns:repeat(8,1fr);gap:3px;margin:6px 0 0}
.arms span{font-family:var(--mono);font-size:.5rem;letter-spacing:.04em;text-transform:uppercase;text-align:center;
  padding:4px 2px;border-radius:5px;border:1px solid var(--line);color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .35s,border-color .35s,background .35s,box-shadow .35s,transform .35s var(--ease)}
.arms span.on{color:#0B7A54;border-color:rgba(11,143,98,.45);background:rgba(11,143,98,.10);
  box-shadow:0 0 14px -7px var(--ok);transform:translateY(-1px)}

.console-foot{display:flex;align-items:center;gap:0;padding:8px 16px;border-top:1px solid var(--line);
  color:var(--muted);font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;font-family:var(--mono)}
.console-foot span{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.console-foot span + span{padding-left:14px;margin-left:14px;border-left:1px solid var(--line)}
.console-foot span:last-child{margin-left:auto;padding-left:14px;border-left:1px solid var(--line)}
.console-foot b{color:var(--ink);font-weight:500;font-size:.8rem;letter-spacing:0;text-transform:none;
  font-family:var(--display);font-variant-numeric:tabular-nums}


/* ── sections ─────────────────────────────────────────────────── */
.section{position:relative;padding:clamp(24px,2.9vh,40px) 0}
.section.alt{background:linear-gradient(180deg,var(--bg-2),var(--bg));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:720px;margin-bottom:clamp(13px,1.7vh,20px)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.kicker{color:var(--cyan);margin:0 0 8px;letter-spacing:.2em}
h2{font-family:var(--display);font-weight:700;letter-spacing:-.038em;line-height:1.06;font-size:clamp(1.55rem,2.5vw,2.05rem);margin:0 0 10px}
h2 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;
  background:linear-gradient(100deg,#C9BEFF,#8FF3E8);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--muted);font-size:clamp(.92rem,1vw,.98rem);max-width:58ch;margin:0}
.sec-head.center .sub{margin-inline:auto}

/* steps — a vertical process spine (reads as a sequence, not a feature grid) */
/* 01 · the flow — a numbered stepper: node on the spine, annotation line, prose */
.steps{position:relative;list-style:none;margin:0;padding:0}
.steps::before{content:"";position:absolute;left:23px;top:28px;bottom:26px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,rgba(27,75,255,.42),rgba(14,147,168,.34) 55%,rgba(27,75,255,.10))}
.step{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);
  gap:clamp(16px,2vw,26px);align-items:start;padding:12px 0;border-top:1px solid var(--line);
  transition:background .35s var(--ease)}
.step:first-child{border-top:0;padding-top:2px}
.step:last-child{padding-bottom:4px}
.step:hover{background:linear-gradient(90deg,rgba(27,75,255,.05),transparent 62%)}
.step-n{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  background:#fff;border:1px solid var(--line-2);box-shadow:0 2px 0 rgba(27,75,255,.10);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--ink-2);
  font-variant-numeric:tabular-nums;transition:border-color .35s,box-shadow .35s}
.step:has(.actor.you) .step-n{border-color:rgba(14,147,168,.5);color:#0A7C8D;background:rgba(14,147,168,.045)}
.step:has(.actor.machine) .step-n{border-color:rgba(91,62,245,.45);color:#4A2FD6;background:rgba(91,62,245,.05)}
.step:has(.actor.adv) .step-n{border-color:rgba(178,106,0,.45);color:#96590A;background:rgba(178,106,0,.05)}
.step:hover .step-n{box-shadow:0 0 0 4px rgba(27,75,255,.10),0 2px 0 rgba(27,75,255,.16)}
.step-meta{display:flex;align-items:center;gap:12px;margin-bottom:6px;max-width:66ch}
.step-when{margin-left:auto}
.actor{font-family:var(--mono);font-size:.58rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  padding:2px 8px;border-radius:5px;border:1px solid var(--line-2);color:var(--muted)}
.actor.you{color:#0A7C8D;border-color:rgba(14,147,168,.42);background:rgba(14,147,168,.10)}
.actor.machine{color:#4A2FD6;border-color:rgba(91,62,245,.42);background:rgba(91,62,245,.10)}
.actor.adv{color:#96590A;border-color:rgba(178,106,0,.40);background:rgba(178,106,0,.10)}
.step-when{font-family:var(--mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.step-body h3{font-family:var(--display);font-size:clamp(1rem,1.3vw,1.12rem);font-weight:600;letter-spacing:-.022em;margin:0 0 4px;line-height:1.24}
.step-body p{margin:0;color:var(--muted);font-size:.875rem;line-height:1.55;max-width:70ch}
.step-body p b{color:var(--ink-2);font-weight:600}

@media (max-width:860px){
  .steps::before{left:19px}
  .step{grid-template-columns:40px minmax(0,1fr);gap:14px;padding:14px 0}
  .step-n{width:40px;height:40px;font-size:.64rem}
  .step-body p{max-width:none}
  .step-meta{flex-wrap:wrap;gap:8px}
}

.sidecar{margin-top:26px;display:grid;grid-template-columns:.9fr 2.1fr;gap:clamp(16px,2.4vw,36px);
  padding:clamp(15px,1.7vw,20px);border:1px dashed rgba(178,106,0,.26);border-radius:18px;
  background:linear-gradient(180deg,#fff,#F8FAFF);position:relative;overflow:hidden}
.sidecar::after{content:"";position:absolute;right:-80px;top:-80px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(178,106,0,.07),transparent 70%);pointer-events:none}
.sidecar-head h3{font-family:var(--display);font-size:1.12rem;margin:9px 0 0;letter-spacing:-.02em;color:var(--ink-2)}
.badge{display:inline-block;padding:5px 10px;border-radius:999px;border:1px solid rgba(255,178,61,.3);color:var(--amber);background:rgba(255,178,61,.07);font-size:.6rem}
.sidecar p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.58}
.sidecar p b{color:var(--ink-2)}
.chips{grid-column:2;display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:13px 0 0;padding:0}
.chips li{font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  padding:6px 11px;border-radius:8px;border:1px solid var(--line-2);background:rgba(14,40,90,.03)}

/* two-col */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.ticks{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.ticks li{position:relative;padding-left:30px;color:var(--muted);font-size:.9rem;line-height:1.52}
.ticks li b{color:var(--ink)}
.ticks li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(46,230,214,.9) 0 3px,rgba(46,230,214,.16) 3.5px 100%);
  box-shadow:0 0 0 1px rgba(46,230,214,.4) inset}
.ticks.tight{gap:7px;margin-top:12px}
.ticks.tight li{font-size:.9rem}

.termcard{border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF,#F7FAFF);box-shadow:var(--shadow)}
.termcard .console-bar{padding:10px 14px}
.termcard .console-title{letter-spacing:.12em}
.term-shell{margin-left:auto;color:var(--dim);font-size:.58rem;letter-spacing:.14em}
.term2{margin:0;padding:14px 16px;font-family:var(--mono);font-size:.755rem;line-height:1.85;color:var(--ink-2);
  overflow-x:auto;white-space:pre;tab-size:2}
.term2 .p{color:#0A6F80;font-weight:500}
.term2 .f{color:#28406B}
.term2 .c{color:#0A6F80}
.term2 .d{color:var(--dim)}
.term2 .ok{color:#0B7A54;font-weight:500}
.term2 .bad{color:var(--red)}
.term2 .warn{color:#8A5200}
.term2 .m{color:var(--dim)}
.term-foot{display:flex;align-items:center;gap:0;padding:9px 16px;border-top:1px solid var(--line);
  color:var(--muted);font-size:.6rem;letter-spacing:.1em}
.term-foot span{white-space:nowrap}
.term-foot span + span{padding-left:12px;margin-left:12px;border-left:1px solid var(--line)}
.term-foot span:last-child{margin-left:auto}

/* telemetry */
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tcard{border:1px solid var(--line);border-radius:var(--r);padding:13px 14px 11px;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(14,40,90,.026),rgba(14,40,90,.008));position:relative;overflow:hidden;
  transition:border-color .3s,transform .3s var(--ease)}
.tcard:hover{border-color:rgba(14,40,90,.18);transform:translateY(-2px)}
.tcard.big{grid-row:span 1}
.lbl{color:var(--muted);margin:0 0 6px;font-size:.58rem;letter-spacing:.12em}
.big-n{font-family:var(--display);font-weight:600;letter-spacing:-.035em;font-size:clamp(1.45rem,2vw,1.8rem);margin:0;font-variant-numeric:tabular-nums;line-height:1}
.big-n small{font-size:.4em;font-weight:500;color:var(--muted);letter-spacing:0;margin-left:6px}
.tcard .fine{font-size:.755rem;line-height:1.42;margin:5px 0 0;color:var(--muted)}

.mini{margin-top:auto;padding-top:9px}
.mini svg{display:block;width:100%;height:30px;overflow:visible}
.mline{stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 1.3s var(--ease)}
.tcard.in .mline{stroke-dashoffset:0}
.mfill{opacity:0;transition:opacity .7s .15s}
.tcard.in .mfill{opacity:.6}
.mx{display:flex;justify-content:space-between;color:var(--dim);font-size:.5rem;letter-spacing:.1em;margin-top:3px}

/* telemetry: full-width live log */
.logcard{border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF,#F5F9FF);box-shadow:var(--shadow)}
.logbar{display:flex;align-items:center;gap:12px;padding:8px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.loglive{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.loglive .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 9px var(--ok);animation:pulse 2.6s infinite}

.log{height:238px;overflow:hidden;padding:3px 0;font-family:var(--mono);font-size:.755rem;line-height:1.55;color:var(--ink-2);
  overscroll-behavior:contain}
.log::-webkit-scrollbar{width:10px}
.log::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13);border-radius:8px}
.lday{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:10px;padding:8px 18px 6px;
  background:linear-gradient(180deg,#FBFCFF,#F4F8FF);color:var(--dim);
  font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;backdrop-filter:blur(6px)}
.lday::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.1),transparent)}
.lrow{display:grid;grid-template-columns:62px 172px minmax(0,1fr);gap:14px;
  align-items:baseline;padding:4px 18px;border-left:2px solid transparent}
.lrow:hover{background:rgba(255,255,255,.028);border-left-color:rgba(46,230,214,.45)}
.lt{color:#98A3B8;font-variant-numeric:tabular-nums}
.le{color:var(--cyan);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk{font-size:.735rem;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk.ok{color:var(--ok)}.lk.cy{color:var(--cyan)}.lk.wr{color:#C9C2E8}.lk.mu{color:var(--muted)}
.lx{color:var(--muted);font-size:.72rem}
.ld{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ld .tr{color:var(--dim)}
.logfoot{display:flex;justify-content:space-between;gap:12px;padding:8px 16px;border-top:1px solid var(--line);
  color:var(--dim);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase}


@media (max-width:1080px){
}
@media (max-width:620px){
  .log{height:300px;font-size:.66rem}
  .lrow{grid-template-columns:52px minmax(0,1fr);grid-template-areas:"t k" "d d";gap:3px 10px;padding:8px 14px}
  .lt{grid-area:t;color:#8A93A8}.le{grid-area:e;min-width:0}
  .lk{grid-area:k;min-width:0}
  .ld{grid-area:d;font-size:.68rem;min-width:0}
  .lday{padding:7px 14px}
  .logfoot{font-size:.52rem;letter-spacing:.08em}
}

/* pricing */
.price{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
.pcard{position:relative;display:flex;flex-direction:column;gap:6px;padding:clamp(16px,1.8vw,20px);
  border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.006));
  transition:transform .3s var(--ease),border-color .3s}
.pcard:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.2)}
.pcard.feat{border-color:transparent;background:
  linear-gradient(180deg,#0C0F17,#0A0C12) padding-box,
  var(--grad) border-box;border:1px solid transparent;box-shadow:0 24px 70px -30px rgba(124,92,255,.55)}
.lbl .n{color:var(--azure);margin-right:7px;font-weight:500}
.p-n{font-family:var(--display);font-weight:600;letter-spacing:-.04em;font-size:clamp(1.85rem,2.8vw,2.3rem);margin:0;line-height:1}
.p-n small{font-size:.36em;color:var(--muted);font-weight:500;letter-spacing:0}
.ribbon{position:absolute;top:-12px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:5px 11px;border-radius:999px;background:var(--grad);color:#fff;font-size:.58rem;letter-spacing:.12em;font-weight:600}
.price-note{text-align:center;color:var(--dim);margin-top:18px;font-size:.64rem;letter-spacing:.12em}

/* lab */
.labgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.lab{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:clamp(18px,2vw,24px);
  border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(160deg,rgba(255,255,255,.03),rgba(255,255,255,.006));
  transition:transform .3s var(--ease),border-color .3s,background .3s;overflow:hidden}
.lab::after{content:"";position:absolute;inset:auto -30% -60% auto;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,92,255,.18),transparent 70%);opacity:0;transition:opacity .4s}
.lab:hover{transform:translateY(-4px);border-color:rgba(124,92,255,.35);background:linear-gradient(160deg,rgba(124,92,255,.08),rgba(255,255,255,.01))}
.lab:hover::after{opacity:1}
.lab .lbl{color:var(--cyan);margin:0}
.lab h3{font-family:var(--display);font-size:1.24rem;margin:5px 0 7px;letter-spacing:-.02em}
.lab p{max-width:30ch}
.lab p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.55}
.go{margin:16px auto 0;display:inline-flex;align-items:center;gap:9px;width:fit-content;
  font-family:var(--mono);font-size:.65rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);
  padding:8px 13px;border:1px solid var(--line-2);border-radius:10px;background:rgba(255,255,255,.03);
  transition:color .2s,border-color .25s,background .25s,transform .25s var(--ease)}
.lab:hover .go{color:#fff;background:var(--grad);border-color:transparent;transform:translateX(2px)}


/* faq */
.faq{display:grid;gap:6px}
.qa{border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.022);transition:border-color .25s,background .25s}
.qa[open]{border-color:rgba(124,92,255,.34);background:linear-gradient(180deg,rgba(124,92,255,.07),rgba(255,255,255,.01))}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:9px 16px;font-family:var(--display);font-weight:600;font-size:.97rem;letter-spacing:-.015em}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.04);position:relative;transition:transform .3s var(--ease),border-color .3s}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;inset:50% 5px auto 5px;height:1.4px;background:var(--ink-2);transform:translateY(-50%);transition:transform .3s var(--ease),background .3s}
.qa summary i::after{transform:translateY(-50%) rotate(90deg)}
.qa[open] summary i{border-color:var(--cyan);transform:rotate(180deg)}
.qa[open] summary i::after{transform:translateY(-50%) rotate(0deg);background:var(--cyan)}
.qa .a{padding:0 16px 11px;color:var(--muted);font-size:.9rem;line-height:1.6;max-width:72ch}
.qa .a p{margin:0}
.qa .a b{color:var(--ink-2)}

/* cta */
.cta{position:relative;padding:clamp(28px,3.4vh,44px) 0;text-align:center;overflow:hidden;border-top:1px solid var(--line)}
.cta-glow{position:absolute;inset:auto 50% -40% auto;transform:translateX(50%);width:min(900px,110vw);height:min(900px,110vw);
  background:radial-gradient(circle at 50% 50%,rgba(124,92,255,.24),rgba(46,230,214,.08) 45%,transparent 68%);filter:blur(10px);pointer-events:none}
.cta-in{position:relative}
.cta h2{margin-bottom:14px}
.cta-actions{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:20px}
.qr{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border:1px solid var(--line-2);border-radius:14px;background:rgba(255,255,255,.03)}
.qr img{border-radius:8px;background:#fff;padding:5px;width:76px;height:76px}
.qr span{font-size:.6rem;letter-spacing:.12em;color:var(--muted);text-align:left;max-width:84px;line-height:1.5}

/* footer */
.foot{border-top:1px solid var(--line);padding:18px 0;background:var(--bg)}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:12px}
.mark.small{width:26px;height:26px}
.foot-name{font-family:var(--display);font-weight:700;letter-spacing:.16em;margin:0;font-size:.86rem}
.foot-brand .fine{margin:2px 0 0;font-size:.78rem}
.legal{max-width:34ch;margin:8px 0 0;font-size:.66rem;line-height:1.5;color:var(--dim)}
.foot-links{display:flex;gap:6px;flex-wrap:wrap}
.foot-links a{padding:7px 11px;border-radius:8px;font-size:.82rem;color:var(--muted);transition:color .2s,background .2s}
.foot-links a:hover{color:#fff;background:rgba(255,255,255,.05)}
.foot-status{display:flex;align-items:center;gap:18px;color:var(--dim);font-size:.62rem;letter-spacing:.12em}

/* ── reveal ────────────────────────────────────────────────────── */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.steps .step.in:nth-child(2),.price .pcard.in:nth-child(2),.labgrid .lab.in:nth-child(2){transition-delay:.07s}
.steps .step.in:nth-child(3),.price .pcard.in:nth-child(3),.labgrid .lab.in:nth-child(3){transition-delay:.14s}
.steps .step.in:nth-child(4){transition-delay:.21s}
.steps .step.in:nth-child(5){transition-delay:.28s}
.steps .step.in:nth-child(6){transition-delay:.35s}
.tgrid .tcard.in:nth-child(2){transition-delay:.06s}
.tgrid .tcard.in:nth-child(3){transition-delay:.12s}
.tgrid .tcard.in:nth-child(4){transition-delay:.18s}

/* ── responsive ────────────────────────────────────────────────── */
@media (max-width:1080px){
  .hero-in{grid-template-columns:1fr;gap:44px}
  .console{max-width:640px}
  .sess{--sbody:208px;height:506px}
  .tgrid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .sidecar{grid-template-columns:1fr}
  .chips{grid-column:1}
  .labgrid{grid-template-columns:1fr}
}
@media (max-width:860px){
  .nav-links{
    position:fixed;inset:62px 0 auto 0;flex-direction:column;align-items:stretch;gap:2px;
    padding:14px var(--pad) 22px;background:rgba(255,255,255,.98);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);transform:translateY(-14px);opacity:0;pointer-events:none;
    transition:transform .3s var(--ease),opacity .3s;max-height:calc(100vh - 62px);overflow:auto
  }
  .nav.open .nav-links{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{padding:14px 12px;font-size:1rem;border-radius:10px}
  .burger{display:block}
  .nav-cta .live{display:none}
  .two{grid-template-columns:1fr;gap:34px}
  .price{grid-template-columns:1fr}
  .pcard.feat{order:-1}
  .tgrid{grid-template-columns:1fr}
  .foot-in{justify-content:flex-start}
}
@media (max-width:620px){
  h1{font-size:clamp(2.45rem,10.5vw,3.2rem)}
  .steps{grid-template-columns:1fr}
  .rail{padding:2px 13px 10px}
  .rail::before{left:24px}
  .arms{grid-template-columns:repeat(2,1fr)}
  .term2{font-size:.565rem;padding:12px 9px;line-height:1.78}
  .term-foot{flex-wrap:wrap;gap:6px 0;font-size:.56rem}
  .nres{display:none}
  .console-state{display:none}
  .console-foot span:last-child{display:none}
  .sess{--sbody:330px;height:640px}
  .arms{grid-template-columns:repeat(4,1fr)}
  .cta-actions{flex-direction:column}
  .qr{width:100%;justify-content:center}
  .qr span{max-width:none}
  .btn-lg{width:100%}
  .log{height:280px;font-size:.64rem}
  .sidecar{padding:22px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .mline{stroke-dashoffset:0}
  .mfill{opacity:.6}
}

/* print — nobody prints this, but don't ship a mess if they do */
@media print{
  .nav,.progress,.field,.hero-glow,.cta-glow,.qr,.burger{display:none!important}
  body{background:#fff;color:#000}
  .step,.tcard,.pcard,.lab,.console,.termcard{border-color:#ccc;background:#fff;box-shadow:none}
  .sess,.node.on .nbody{height:auto!important}
}

/* telemetry extras */
.stamp{display:inline-block;margin-left:12px;padding:3px 9px;border-radius:6px;border:1px solid var(--line-2);
  color:var(--dim);font-size:.56rem;letter-spacing:.1em;white-space:nowrap}
.log{font-size:.775rem}
.log .tm{color:#7C8598}
.log .rf{color:#9AA2B4}
/* nav active state */
.nav-links a.active{color:var(--ink)}

/* ── small-screen hardening ────────────────────────────────────── */
@media (max-width:620px){
  .console-bar{flex-wrap:wrap;gap:8px 10px}
  .console-title{font-size:.62rem}
  .console-state{margin-left:0;flex-basis:100%;font-size:.58rem}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  .eyebrow{gap:8px 10px}
  .eyebrow .mono{font-size:.68rem;letter-spacing:.04em}
  .console-foot{grid-template-columns:1fr 1fr;gap:10px}
  .console-foot span:last-child{grid-column:span 2;border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:10px}
}
@media (max-width:400px){
  .brand-txt span{display:none}
  .nav-cta .btn-sm{padding:0 11px;font-size:.76rem}
}

.hero-legal{margin:18px 0 0;color:var(--muted);font-size:.62rem;letter-spacing:.1em}

/* ── 04 · the buildable index ─────────────────────────────────── */
.idx{border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF,#F7FAFF);box-shadow:var(--shadow)}
.idx-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:11px 16px;border-bottom:1px solid var(--line)}
.idx-count{display:flex;align-items:baseline;gap:10px;flex:0 0 auto}
.idx-count b{font-family:var(--display);font-weight:600;font-size:clamp(1.7rem,2.8vw,2.2rem);letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;line-height:1;
  background:linear-gradient(120deg,#fff,#8FF3E8);-webkit-background-clip:text;background-clip:text;color:transparent}
.idx-count span{color:var(--dim);font-size:.6rem;letter-spacing:.12em}
.idx-search{position:relative;flex:1 1 240px;min-width:200px}
.idx-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--dim)}
.idx-search input{width:100%;height:38px;padding:0 14px 0 38px;border-radius:10px;border:1px solid var(--line-2);
  background:rgba(14,40,90,.04);color:var(--ink);font-family:var(--body);font-size:.9rem;outline:none;
  transition:border-color .2s,background .2s}
.idx-search input::placeholder{color:var(--dim)}
.idx-search input:focus{border-color:rgba(46,230,214,.5);background:rgba(46,230,214,.05)}
.idx-live{display:inline-flex;align-items:center;gap:8px;color:var(--ok);font-size:.6rem;letter-spacing:.12em;flex:0 0 auto}
.idx-live .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:pulse 2.6s infinite}

.idx-filters{display:flex;gap:7px;padding:8px 16px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
.idx-filters::-webkit-scrollbar{display:none}
.chipf{flex:0 0 auto;padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);background:rgba(14,40,90,.02);
  color:var(--muted);font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  transition:color .2s,border-color .2s,background .2s}
.chipf:hover{color:var(--ink);border-color:rgba(14,40,90,.22)}
.chipf.on{color:#fff;background:var(--grad);border-color:transparent}

.idx-table{border-bottom:1px solid var(--line)}
.idx-head,.idx-row{display:grid;grid-template-columns:1.7fr 1.25fr .95fr .6fr;gap:14px;align-items:center}
.idx-head{padding:7px 16px;background:rgba(14,40,90,.025);color:var(--dim);font-size:.56rem;letter-spacing:.14em;
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2;backdrop-filter:blur(8px)}
.idx-body{max-height:252px;overflow:auto;overscroll-behavior:contain}
.idx-body::-webkit-scrollbar{width:10px}
.idx-body::-webkit-scrollbar-thumb{background:rgba(14,40,90,.12);border-radius:8px}
.idx-row{padding:8px 16px;border-bottom:1px solid rgba(14,40,90,.045);cursor:pointer;
  transition:background .18s,transform .18s var(--ease)}
.idx-row:last-child{border-bottom:0}
.idx-row:hover{background:linear-gradient(90deg,rgba(124,92,255,.09),rgba(46,230,214,.03))}
.idx-row:active{transform:scale(.998)}
.idx-name{font-family:var(--display);font-weight:600;font-size:.92rem;letter-spacing:-.01em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.idx-dom{font-family:var(--mono);font-size:.74rem;color:var(--cyan);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.idx-tier{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 7px;border-radius:5px;border:1px solid rgba(124,92,255,.3);background:rgba(124,92,255,.08);color:#B9A6FF;
  justify-self:start;white-space:nowrap}
.idx-waf{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.idx-waf.cf{color:#FFB23D}.idx-waf.ak{color:#FF8FA3}.idx-waf.im{color:#7FE7FF}
.idx-seen{font-family:var(--mono);font-size:.62rem;color:var(--dim);text-align:right;white-space:nowrap}
.idx-empty{grid-column:1/-1;padding:44px 22px;text-align:center;color:var(--muted);font-size:.9rem}
.idx-skel div{height:44px;border-bottom:1px solid rgba(14,40,90,.04);
  background:linear-gradient(90deg,rgba(14,40,90,.02),rgba(14,40,90,.055),rgba(14,40,90,.02));
  background-size:200% 100%;animation:shimmer 1.5s infinite}
@keyframes shimmer{0%{background-position:180% 0}100%{background-position:-80% 0}}
.idx-foot{display:flex;align-items:flex-start;gap:20px;padding:18px 22px;flex-wrap:wrap}
.idx-foot .fine{flex:1 1 320px;margin:0;max-width:70ch}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);opacity:0;pointer-events:none;
  z-index:150;padding:11px 16px;border-radius:11px;border:1px solid rgba(46,230,214,.35);
  background:rgba(8,12,16,.96);color:var(--ink);font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;box-shadow:0 20px 50px -20px rgba(0,0,0,.9);transition:opacity .25s,transform .25s}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:860px){
  .idx-head{display:none}
  .idx-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name rail" "dom rail";gap:5px 12px;padding:14px 18px}
  .idx-name{grid-area:name;min-width:0}.idx-dom{grid-area:dom;min-width:0}
  .idx-rail{grid-area:rail;flex-direction:column;align-items:flex-end;gap:4px}
  .idx-bar{padding:16px 18px;gap:12px}
  .idx-filters{padding:12px 18px}
  .idx-foot{padding:16px 18px}
  .idx-body{max-height:340px}
  .idx-live{display:none}
}

/* index refinements */
.idx-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;color:var(--muted);font-size:1rem;line-height:1;background:rgba(14,40,90,.06)}
.idx-clear:hover{color:var(--ink);background:rgba(14,40,90,.12)}
.chipf .cn{margin-left:6px;opacity:.62;font-variant-numeric:tabular-nums}
.idx-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
#idxShowing{color:var(--dim);font-size:.58rem;letter-spacing:.11em;white-space:nowrap}
[hidden]{display:none!important}
.idx-row .idx-dom::after{content:"copy";margin-left:8px;opacity:0;font-size:.55rem;letter-spacing:.1em;color:var(--dim);transition:opacity .2s}
.idx-row:hover .idx-dom::after{opacity:1}
@media (max-width:860px){.idx-row .idx-dom::after{display:none}}

/* mobile index polish */
@media (max-width:620px){
  .sec-head h2{font-size:1.92rem}
  .idx-search input{height:46px;font-size:16px}       /* 16px stops iOS zoom-on-focus */
  .idx-filters{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent);
    padding-right:34px}
  .idx-body{scrollbar-width:none;-ms-overflow-style:none}
  .idx-body::-webkit-scrollbar{display:none}
  .idx-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name rail" "dom rail";gap:4px 12px;padding:13px 16px}
  .idx-name{grid-area:name;min-width:0}
  .idx-dom{grid-area:dom;min-width:0}
  .idx-rail{grid-area:rail;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
  .idx-seen{grid-area:rail}
  .idx-waf{max-width:120px;overflow:hidden;text-overflow:ellipsis;text-align:right}
  .idx-name,.idx-dom{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* the rail is transparent on desktop (children participate in the table grid) */
.idx-rail{display:contents}
@media (max-width:860px){ .idx-rail{display:flex} }

/* final polish: touch targets, rail width, log bezel */
@media (max-width:620px){
  .chipf{padding:9px 14px;font-size:.62rem}
  .idx-rail{width:112px;flex:0 0 112px}
  .idx-waf{max-width:112px}
  .idx-filters{scroll-snap-type:x proximity}
  .chipf{scroll-snap-align:start}
}
.logbar{padding:8px 14px}
.log{padding-bottom:10px}

/* ── 05 · managed 24h runs ─────────────────────────────────────── */
.runs{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(22px,3.6vw,54px);align-items:start}
.runcard{
  position:sticky;top:84px;
  display:flex;flex-direction:column;gap:10px;padding:clamp(17px,1.9vw,21px);
  border-radius:var(--r-lg);border:1px solid transparent;
  background:linear-gradient(180deg,#fff,#F4F8FF) padding-box,var(--grad) border-box;
  box-shadow:0 30px 80px -40px rgba(124,92,255,.65);
}
.run-head{display:flex;align-items:center;gap:18px}
.run-24{font-family:var(--display);font-weight:600;font-size:3.4rem;line-height:.82;letter-spacing:-.06em;
  background:linear-gradient(140deg,#0B1B3A,#1B4BFF 58%,#0E93A8);-webkit-background-clip:text;background-clip:text;color:transparent}
.run-24 span{font-size:.26em;letter-spacing:0;color:var(--cyan);-webkit-text-fill-color:var(--cyan);margin-left:3px}
.run-head h3{font-family:var(--display);font-size:1.24rem;letter-spacing:-.025em;margin:2px 0 0}

/* five-stage bar: segment over label, so labels can wrap on a phone without breaking the rail */
.runbar{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:2px 0 0}
.rb-step{display:grid;gap:7px;min-width:0}
.rb-seg{height:2px;border-radius:2px;background:rgba(14,40,90,.09)}
.rb-step:nth-child(1) .rb-seg{background:rgba(124,92,255,.55)}
.rb-step:nth-child(2) .rb-seg{background:rgba(124,92,255,.85)}
.rb-step:nth-child(3) .rb-seg{background:var(--cyan)}
.rb-step:nth-child(4) .rb-seg{background:var(--grad)}
.rb-step:nth-child(5) .rb-seg{background:rgba(61,255,162,.75)}
.rb-lbl{font-family:var(--mono);font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);text-align:center;line-height:1.35}
.run-note{color:var(--ink-2);font-size:.66rem;letter-spacing:.01em;margin:-2px 0 0;line-height:1.5;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;text-transform:none;text-wrap:pretty}
.run-note .rnk{font-family:var(--mono);font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);border:1px solid rgba(46,230,214,.3);background:rgba(46,230,214,.07);
  padding:2px 7px;border-radius:5px;white-space:nowrap}
.incl{margin:2px 0 -6px}
.run-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.run-actions .btn{flex:1 1 150px}

/* booking flow: a real timeline, one rail, numbered nodes */
.runflow{min-width:0}
.runflow-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.runflow-head .lbl{margin:0}
.runflow-meta{color:var(--dim);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase}
.runsteps{position:relative;list-style:none;margin:0;padding:0}
.runsteps li:not(:last-child)::before{content:"";position:absolute;left:15px;top:41px;bottom:-1px;width:1px;
  background:rgba(46,230,214,.20)}
.runsteps li{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:15px;align-items:start;
  padding:9px 10px 9px 0;border-top:1px solid rgba(14,40,90,.055);transition:background .25s}
.runsteps li:first-child{border-top:0;padding-top:12px}
.runsteps li:hover{background:linear-gradient(90deg,rgba(46,230,214,.055),transparent 62%)}
.runsteps li:hover .rn{border-color:var(--cyan);color:#04070B;background:var(--cyan);
  box-shadow:0 0 0 4px #080A10,0 6px 18px -6px rgba(46,230,214,.7)}
.rn{position:relative;z-index:1;display:grid;place-items:center;width:31px;height:31px;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.02em;color:var(--cyan);
  background:#fff;border:1px solid rgba(27,75,255,.32);border-radius:50%;box-shadow:0 0 0 4px var(--bg);
  transition:border-color .25s,background .25s,color .25s,box-shadow .25s}
.runsteps .rh{display:flex;align-items:baseline;gap:9px}
.runsteps h4{font-family:var(--display);font-size:.98rem;font-weight:600;letter-spacing:-.015em;margin:0 0 4px}
.rn-who{flex:0 0 auto;font-family:var(--mono);font-size:.5rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);border:1px solid rgba(14,40,90,.12);border-radius:4px;padding:1px 5px;line-height:1.5}
.rn-who.us{color:rgba(46,230,214,.9);border-color:rgba(46,230,214,.3);background:rgba(46,230,214,.06)}
.runsteps p{margin:0;color:var(--muted);font-size:.825rem;line-height:1.46;text-wrap:pretty}
.runsteps p b{color:var(--ink-2)}
.runsteps p a{color:var(--cyan);border-bottom:1px dotted rgba(46,230,214,.5)}

/* who-brings-what: one sheet, three columns, rules not boxes */
.sheet{display:grid;grid-template-columns:1fr 1fr 1.35fr;margin-top:15px;border:1px solid var(--line);
  border-radius:18px;overflow:hidden;background:linear-gradient(180deg,rgba(14,40,90,.022),rgba(14,40,90,.008))}
.sheet-col{padding:15px 20px;min-width:0}
.sheet-col + .sheet-col{border-left:1px solid var(--line)}
.sheet-col .lbl{margin:0 0 12px;color:var(--ink-2)}
.sheet-col .ticks{margin:0;gap:9px}
.sheet-col.note{background:linear-gradient(180deg,rgba(46,230,214,.055),rgba(14,40,90,.012))}
.sheet-col.note .fine{margin-top:0;font-size:.86rem}
.sheet-col.note .fine + .fine{margin-top:10px}

@media (max-width:1080px){
  .runs{grid-template-columns:1fr}
  .runcard{position:static;max-width:700px}
  .sheet{grid-template-columns:1fr 1fr}
  .sheet-col.note{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:620px){
  .run-24{font-size:3.2rem}
  .rb-lbl{font-size:.47rem;letter-spacing:.04em}
  .run-actions .btn{flex:1 1 100%}
  .runsteps li{padding:12px 0;grid-template-columns:30px minmax(0,1fr);gap:12px}
  .runsteps li:first-child{padding-top:14px}
  .runsteps::before{left:14px;top:22px}
  .rn{width:29px;height:29px;font-size:.55rem}
  .runsteps .rh{gap:8px;align-items:center}
  .rn-who{font-size:.46rem;padding:1px 4px}
  .sheet{grid-template-columns:1fr}
  .sheet-col{padding:18px 18px}
  .sheet-col + .sheet-col{border-left:0;border-top:1px solid var(--line)}
  .sheet-col.note{grid-column:auto;border-top:1px solid var(--line)}
}

.run-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:14px;padding:18px 22px;border:1px dashed rgba(14,40,90,.16);border-radius:16px;
  background:linear-gradient(100deg,rgba(124,92,255,.07),rgba(46,230,214,.04))}
.run-cta p{margin:0;color:var(--muted);font-size:.9rem}
.run-cta p b{color:var(--ink)}
.run-cta-actions{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:620px){
  .run-cta{flex-direction:column;align-items:stretch;text-align:center}
  .run-cta-actions .btn{flex:1 1 100%}
  .run-note{font-size:.7rem;line-height:1.45}
}

/* 8 nav links need the sheet earlier than the rest of the 860 layout break */
@media (max-width:980px){
  .nav-links{
    position:fixed;inset:62px 0 auto 0;flex-direction:column;align-items:stretch;gap:2px;
    padding:14px var(--pad) 22px;background:rgba(255,255,255,.98);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);transform:translateY(-14px);opacity:0;pointer-events:none;
    transition:transform .3s var(--ease),opacity .3s;max-height:calc(100vh - 62px);overflow:auto
  }
  .nav.open .nav-links{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{padding:14px 12px;font-size:1rem;border-radius:10px}
  .burger{display:block}
  .nav-cta .live{display:none}
}

/* ── mobile density pass (2026-10-29): same content, tighter rhythm ── */
@media (max-width:620px){
  .section{padding:22px 0}
  .sec-head{margin-bottom:14px}
  h2{font-size:1.5rem;margin-bottom:9px}
  .sub{font-size:.875rem}
  .kicker{margin-bottom:7px}
  .hero{padding-top:calc(58px + 22px)}
  .hero-in{padding-bottom:22px;gap:20px}
  .lede{margin-bottom:14px}
  .hero-actions{margin-bottom:14px}
  .step{padding:10px 0 10px 34px}
  .step-body p{font-size:.825rem;line-height:1.45}
  .sidecar{padding:14px}
  .tcard{padding:13px}
  .log{height:252px}
  .idx-body{max-height:240px}
  .idx-bar{padding:10px 12px}
  .idx-filters{padding:8px 12px}
  .idx-row{padding:9px 12px}
  .run-24{font-size:2.6rem}
  .runcard{padding:16px;gap:10px}
  .runsteps li{padding:8px 0}
  .runsteps p{font-size:.8rem;line-height:1.4}
  .pcard{padding:14px}
  .lab{padding:14px}
  .qa summary{padding:10px 14px;font-size:.92rem}
  .qa .a{padding:0 14px 11px;font-size:.875rem}
  .cta{padding:32px 0}
  .foot{padding:16px 0}
  }

/* ============================================================================
   BLUEPRINT PAPER — theme layer (2026-11-04)
   The page is a drawing sheet: pale blue ground with a fine grid, ink hairlines,
   white printed plates with a hard offset shadow, and dark "screens" (console,
   terminal, order feed) as the only dark surfaces. Appended so the layout rules
   above stay untouched; every override here is intentional.
   ========================================================================== */

/* ground + air */
.section.alt{background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.24));border-color:var(--line)}
.hero{background:transparent}
.hero::after{content:none}
.hero::before{background:radial-gradient(560px circle at var(--mx,50%) var(--my,28%),rgba(27,75,255,.10),transparent 62%)}
.hero-glow{background:
  radial-gradient(circle at 50% 50%,rgba(27,75,255,.16),transparent 58%),
  radial-gradient(circle at 62% 38%,rgba(14,147,168,.13),transparent 52%);filter:blur(28px)}
.field{opacity:.5}

/* headings: ink + a cobalt rule under every kicker */
.kicker{color:var(--azure);letter-spacing:.22em}
.sec-head{position:relative}
.sec-head .kicker{display:inline-flex;align-items:center;gap:9px}
.sec-head .kicker::before{content:"";width:22px;height:2px;background:var(--grad);border-radius:2px}
h2 em,h1 em{background:linear-gradient(100deg,#1B4BFF 6%,#2F6BFF 46%,#0E93A8 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--muted)}

/* printed plates */
.tcard,.lab,.qa,.pcard,.sidecar,.idx,.runcard,.term-foot,.qr,.idx-search input{
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--plate)}
.tcard:hover,.lab:hover{border-color:rgba(27,75,255,.38);box-shadow:5px 5px 0 rgba(27,75,255,.14)}
.qa[open]{border-color:rgba(27,75,255,.35);background:#fff;box-shadow:5px 5px 0 rgba(27,75,255,.12)}
.sidecar{background:linear-gradient(180deg,#fff,#F7FAFF)}
.qa summary i{border-color:var(--line-2);background:#fff}
.qa summary i::before,.qa summary i::after{background:var(--ink-2)}

/* labels read as engineering annotations */
.lbl,.spark-cap,.logfoot,.idx-head,.runflow-meta,.stamp{color:var(--dim)}
.tcard .lbl,.lab .lbl{color:var(--azure)}
.lab .lbl{letter-spacing:.16em}

/* index: paper table, cobalt accents */
.idx{background:#fff}
.idx-bar{background:linear-gradient(180deg,#fff,#F7FAFF)}
.idx-count b{background:linear-gradient(120deg,#0B1B3A,#1B4BFF 70%,#0E93A8);-webkit-background-clip:text;background-clip:text;color:transparent}
.idx-head{background:#F3F7FF;color:var(--dim);border-bottom:1px solid var(--line)}
.idx-row{border-bottom:1px solid rgba(14,40,90,.07)}
.idx-row:hover{background:linear-gradient(90deg,rgba(27,75,255,.07),rgba(14,147,168,.03))}
.idx-dom{color:var(--azure)}
.idx-waf.cf{color:#9A5B00}.idx-waf.ak{color:#B0284A}.idx-waf.im{color:#0B6E8A}
.chipf{background:#fff;border-color:var(--line-2);color:var(--ink-2)}
.chipf:hover{color:var(--azure);border-color:var(--azure)}
.chipf.on{color:#fff;background:var(--grad);border-color:transparent;box-shadow:0 6px 14px -8px rgba(27,75,255,.8)}
.idx-clear{background:rgba(14,40,90,.06);color:var(--ink-2)}

/* steps + runs read as a drawing callout list */
.step:hover{background:linear-gradient(90deg,rgba(27,75,255,.05),transparent 55%)}
.step .actor,.rn-who{color:var(--dim);border-color:var(--line-2);background:#fff}
.rn-who.us{color:var(--azure);border-color:rgba(27,75,255,.3);background:rgba(27,75,255,.06)}
.runsteps li:hover{background:linear-gradient(90deg,rgba(27,75,255,.05),transparent 62%)}
.rn{color:var(--azure);border-color:rgba(27,75,255,.35);background:#fff}
.runsteps li:hover .rn{color:#fff;background:var(--azure);border-color:var(--azure);box-shadow:0 0 0 4px var(--bg),0 6px 16px -8px rgba(27,75,255,.8)}
.runcard{background:linear-gradient(180deg,#fff,#F7FAFF) padding-box,var(--grad) border-box;box-shadow:0 26px 60px -40px rgba(27,75,255,.55)}
.runbar .rb-seg{background:rgba(14,40,90,.12)}
.ribbon{box-shadow:0 8px 18px -10px rgba(27,75,255,.8)}
.pcard{background:#fff}
.pcard.feat{box-shadow:0 30px 60px -34px rgba(0,0,0,.6)}

/* chips + ticks + small print */
.chip{border-color:rgba(11,143,98,.35);background:rgba(11,143,98,.08);color:var(--ok)}
.chip .dot{box-shadow:0 0 0 3px rgba(11,143,98,.14)}
.ticks li::before{background:rgba(27,75,255,.10);border:1px solid rgba(27,75,255,.28);box-shadow:none}
.ticks li::after{background:var(--azure)}
.fine b{color:var(--ink)}
.hero-legal{color:var(--muted)}

/* misc surfaces */
.toast{background:#fff;color:var(--ink);border-color:rgba(27,75,255,.35);box-shadow:0 18px 40px -22px rgba(14,40,90,.5)}
.skip{background:var(--azure);color:#fff}
::selection{background:rgba(27,75,255,.22);color:var(--ink)}
.progress span{box-shadow:0 0 14px rgba(27,75,255,.45)}

/* footer on paper */
.foot{background:rgba(255,255,255,.6);border-top:1px solid var(--line)}
.foot-links a:hover{color:var(--azure);background:rgba(27,75,255,.07)}

/* the ink screens sit ON the paper: cobalt ring + hard offset plate */
.console,.termcard,.logcard{
  box-shadow:0 0 0 1px rgba(27,75,255,.18), 7px 7px 0 rgba(27,75,255,.10), 0 34px 60px -44px rgba(14,40,90,.65);
  border-color:rgba(27,75,255,.28);
}
.rail{padding-right:18px}
.console-foot{padding-right:18px}
/* the timeline rule needs to read on paper */
.steps::before{background:linear-gradient(180deg,rgba(27,75,255,.45),rgba(14,147,168,.30) 55%,rgba(14,40,90,.10))!important}

/* small print that has to be readable on paper */
.lbl,.logfoot,.idx-head,.runflow-meta,.stamp,.legal{color:var(--muted)}
.lday{padding-top:11px;border-top:1px solid var(--line)}
.lday:first-child{border-top:0;padding-top:6px}

/* the screens are ink, not black: they belong to the blue family */
.console{background:linear-gradient(180deg,rgba(12,20,38,.97),rgba(8,14,28,.99))!important}
.termcard,.logcard{background:linear-gradient(180deg,#0C1730,#0A1226)!important}
.console-bar,.logbar{background:rgba(120,160,255,.05)}

/* 4. the index is a sheet of its own: cobalt keyline + tinted header */
.idx{box-shadow:0 0 0 1px rgba(27,75,255,.22), 8px 8px 0 rgba(27,75,255,.12), 0 26px 50px -44px rgba(14,40,90,.6)}
.idx-count span{color:var(--azure)}
.idx-foot{background:linear-gradient(180deg,#fff,#F7FAFF)}
.idx-foot .fine{color:var(--muted)}

/* 5. the $5 card is the one to pick: a cobalt keyline, not a dark block on paper */
.pcard.feat{box-shadow:0 0 0 2px var(--azure) inset, 8px 8px 0 rgba(27,75,255,.16), 0 30px 60px -40px rgba(14,40,90,.5)}

/* telemetry feed: a little more air, fewer rows in view */

/* FAQ becomes one sheet with rules, not nine floating pills */
.faq{gap:0;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;
  box-shadow:var(--plate)}
.qa{border:0;border-radius:0;border-top:1px solid var(--line);background:#fff;box-shadow:none}
.qa:first-child{border-top:0}
.qa[open]{background:linear-gradient(180deg,rgba(27,75,255,.045),rgba(255,255,255,.6));box-shadow:none}
.qa summary{padding:12px 18px}
.qa .a{padding:0 18px 14px}

/* the $5 plate keeps a keyline so it reads as a card, not a hole */
.pcard.feat{box-shadow:0 0 0 1px rgba(109,146,255,.55), 9px 9px 0 rgba(27,75,255,.14), 0 34px 70px -46px rgba(0,0,0,.65)!important}
.pcard.feat .btn-primary{box-shadow:0 10px 26px -14px rgba(124,92,255,.9),0 2px 0 rgba(0,0,0,.35)}

/* the CTA QR gets a frame that matches the button */
.qr{border:1px solid var(--line-2);background:#fff;box-shadow:var(--plate)}

/* FAQ: numbered like a drawing schedule */
.faq{counter-reset:qa}
.qa summary span::before{counter-increment:qa;content:counter(qa,decimal-leading-zero);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--azure);margin-right:12px;
  vertical-align:2px}
.qa summary{font-size:.95rem}

/* the CTA paragraph is centred text in a left-aligned box — centre the box too */
.cta .sub{max-width:56ch;margin-inline:auto;margin-bottom:0}
.cta h2{max-width:none}

/* ============================================================================
   NO BLACK ANYWHERE + every section is a box (2026-11-05)
   The four "screens" (hero recorder, deliverable card, order feed, featured
   price) are now pale-blue plates with hairlines. Sections are boxes too.
   ========================================================================== */

/* screens: paper, not ink */
.console{background:linear-gradient(180deg,#FCFDFF,#F3F8FF)!important;
  border-color:rgba(27,75,255,.24)!important;
  box-shadow:0 0 0 1px rgba(27,75,255,.16), 7px 7px 0 rgba(27,75,255,.10), 0 30px 60px -44px rgba(14,40,90,.45)!important}
.termcard,.logcard{background:linear-gradient(180deg,#FFFFFF,#F4F9FF)!important;
  border-color:rgba(27,75,255,.24)!important;
  box-shadow:0 0 0 1px rgba(27,75,255,.14), 7px 7px 0 rgba(27,75,255,.09), 0 30px 60px -46px rgba(14,40,90,.45)!important}
.console-bar,.logbar{background:linear-gradient(180deg,#F7FAFF,#EEF4FF)!important;border-bottom:1px solid rgba(14,40,90,.10)!important}
.node .nid{background:#fff!important;border-color:rgba(14,40,90,.20)!important}
.node.on .nid{background:var(--azure)!important;color:#fff!important;border-color:var(--azure)!important}
.term .ac{color:#4A2FD6}
.term .ok,.term .hit{color:#0B8F62}
.log .lt{color:#5B6C8C}
.lday{background:linear-gradient(180deg,#FBFCFF,#F4F8FF)!important;color:#57698C;border-bottom:1px solid rgba(14,40,90,.07)}
.lday::after{background:linear-gradient(90deg,rgba(14,40,90,.18),transparent)}
.lrow:hover{background:rgba(27,75,255,.055)!important;border-left-color:rgba(27,75,255,.35)!important}
.log::-webkit-scrollbar-thumb{background:rgba(14,40,90,.18)!important}
.rail::after{background:linear-gradient(180deg,rgba(27,75,255,.45),rgba(14,147,168,.35) 70%,rgba(27,75,255,.12))!important}
.pane,.term-foot,.node{box-shadow:none}
.console .mono,.console-title,.pane-bar{color:var(--muted)}
.cur{background:var(--azure)}

/* every section sits in its own box */
.section{padding:clamp(16px,2.2vh,26px) 0}
.section > .wrap{
  background:var(--panel);border:1px solid var(--line);border-radius:26px;
  padding:clamp(20px,2.4vw,38px);box-shadow:var(--plate);
}
.section.alt{background:transparent!important;border-color:transparent!important}
@media (max-width:640px){
  .section > .wrap{border-radius:20px;padding:18px 16px}
}

/* the featured price card is the one dark-block left — make it a cobalt-keyed paper plate */
.pcard.feat{
  background:linear-gradient(180deg,#FFFFFF,#EFF5FF) padding-box,
             linear-gradient(100deg,#1B4BFF,#0E93A8) border-box!important;
  border:1px solid transparent!important;
  box-shadow:9px 9px 0 rgba(27,75,255,.14), 0 30px 60px -40px rgba(14,40,90,.45)!important;
}
.pcard.feat .btn-primary{box-shadow:0 10px 26px -16px rgba(27,75,255,.85)}

/* section plates: a thin gradient tab, softer hairline, more air between boxes */
.section{padding:26px 0}
.section > .wrap{position:relative;border-color:rgba(14,40,90,.09)}
.section > .wrap::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:26px 26px 0 0;
  background:var(--grad);opacity:.55}
.section.alt > .wrap::before{opacity:.3}

/* the two data sections sit a shade cooler than the prose ones */
#telemetry > .wrap,#index > .wrap{background:linear-gradient(180deg,#FFFFFF,#FBFDFF)}
#pricing > .wrap{background:linear-gradient(180deg,#FFFFFF,#F9FBFF)}

/* the screens keep their "terminal" read with a tinted pane, not a dark one */
.pane,.term,.term2{background:#F5F9FF!important;border:1px solid rgba(27,75,255,.14)!important;border-radius:10px}
.console .pane{border-color:rgba(27,75,255,.12)!important}
.console-bar .dot,.logbar .dot{box-shadow:none}

/* light-screen palette: nothing that assumed dark ink is left light-on-light */
.term .t,.term2 .t{color:#617394}
.term .cy{color:#0A6F80}
.term .ok,.term2 .ok{color:#0B7A54}
.term .wr{color:#8A5200}
.term .cursor{background:#1B4BFF}
.arms span{color:#57698C;border-color:rgba(14,40,90,.16);background:#fff}
.console .mono,.pane-bar,.sess-hud,.hud b,.nst{color:#57698C}
.node .nst{color:#4A2FD6}
.cur{background:#1B4BFF}
/* any stray white text from the dark build */
.console b,.console strong,.termcard b,.termcard strong,.logcard b,.logcard strong{color:#0B1B3A}

/* deliverable terminal: the one place a `$` was too light on paper */
.term2 .p,.term2 .c{color:#0A6F80}
.term2 b,.term2 strong{color:#0B1B3A}
/* index links and the run "A index" label */
a.index,#index a{color:#1743C9}

.pane-bar b,.pane-bar .mono b{color:#0B1B3A}
.warn,.term .wr{color:#8A5200}

/* last two light-on-light survivors */
.pane-bar.mono b,.pane-bar b{color:#0B1B3A!important}
.step-body p a,.runsteps p a,li p a{color:#1743C9}
.term a,.term2 a{color:#1743C9}

/* boxes keep a gutter on small screens instead of touching the edges */
@media (max-width:900px){
  .section > .wrap{width:auto;margin:0 var(--pad)}
  .section{padding:18px 0}
}

/* 01 slim: same shape, less height per stage */
.steps::before{left:19px;top:24px;bottom:22px}
.step{padding:8px 0;grid-template-columns:40px minmax(0,1fr);gap:clamp(14px,1.8vw,22px)}
.step:first-child{padding-top:1px}
.step:last-child{padding-bottom:2px}
.step-n{width:40px;height:40px;font-size:.64rem}
.step-meta{margin-bottom:4px;gap:10px}
.actor{font-size:.55rem;padding:1px 7px}
.step-when{font-size:.52rem}
.step-body h3{font-size:clamp(.96rem,1.2vw,1.05rem);margin-bottom:3px}
.step-body p{font-size:.845rem;line-height:1.5}
@media (max-width:860px){
  .step{padding:11px 0}
  .steps::before{left:19px}
}

.step-body p{font-size:.835rem;line-height:1.47}
.step-body h3{font-size:clamp(.94rem,1.15vw,1.02rem)}
.step-meta{margin-bottom:3px}

/* narrow screens: no artificial measure cap */
@media (max-width:640px){ .sub{max-width:none} }

@media (max-width:860px){
  .step{padding:9px 0}
  .step-body p{font-size:.82rem;line-height:1.45}
  .step-meta{gap:8px}
}

/* 04 has no intro paragraph now: tighten the headline → table gap */
#index .sec-head{margin-bottom:clamp(10px,1.2vh,14px)}

/* hero proof strip: four claims with icons, replacing the old three-item meta line */
.hero-proof{display:grid;grid-template-columns:1fr 1fr;gap:11px 20px;margin:20px 0 0;padding:0;list-style:none;max-width:520px}
.hero-proof li{display:flex;align-items:flex-start;gap:9px}
.hero-proof .pi{width:17px;height:17px;flex:0 0 auto;margin-top:1px;color:var(--azure)}
.hero-proof b{display:block;font-size:.87rem;font-weight:600;color:var(--ink);letter-spacing:-.012em;line-height:1.25}
.hero-proof small{display:block;font-size:.745rem;color:var(--muted);line-height:1.35;margin-top:1px}
.hero-proof li:nth-child(2) .pi{color:#0B7A54}
.hero-proof li:nth-child(3) .pi{color:#1743C9}
.hero-proof li:nth-child(4) .pi{color:#0A6F80}
@media (max-width:520px){
  .hero-proof{grid-template-columns:1fr;gap:9px}
  .hero-proof b{font-size:.85rem}
}

/* mobile refinements: step prose a notch larger, index rows a little more right air */
@media (max-width:640px){
  .runsteps li p{font-size:.84rem;line-height:1.52}
  .idx-row{padding-right:18px}
  .idx-rail{width:104px;flex:0 0 104px}
  .log .lrow{padding:8px 14px}
  .log .lt{font-size:.7rem}
}

@media (max-width:640px){
  .labgrid{gap:18px}
  .qa summary{padding:14px 16px}
  .qa .a{padding:0 16px 15px}
}

/* very small phones (≤380): keep every line inside the card */
@media (max-width:380px){
  .section > .wrap{padding:16px 14px}
  .idx-bar{flex-wrap:wrap;gap:8px}
  .idx-count b{font-size:1.5rem}
  .log .ld,.log .lk{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .term,.term2{font-size:.53rem}
  .hero-proof{gap:8px}
}

@media (max-width:380px){
  .idx-count{flex-wrap:wrap;gap:4px 10px}
  .idx-count span{font-size:.58rem;letter-spacing:.06em}
}

@media (max-width:380px){
  .idx-count{flex:0 1 auto;min-width:0;max-width:100%}
  .idx-count span{min-width:0;overflow-wrap:anywhere}
}

/* 861–1100: the full nav must still fit — drop the live pill, tighten link padding */
@media (max-width:1100px){
  .nav-cta .live{display:none}
  .nav-links a{padding:7px 8px;font-size:.84rem}
  .nav-in{gap:14px}
}

/* ============================================================================
   Section heads: centred, with the section's own icon in its accent colour
   ========================================================================== */
.sec-head{text-align:center;max-width:760px;margin-left:auto;margin-right:auto;margin-bottom:clamp(18px,2.4vh,26px)}
.sec-head .kicker{display:inline-flex;align-items:center;gap:8px;justify-content:center;letter-spacing:.2em}
.sec-head .kicker::before{display:none}
.kicker .ki{width:15px;height:15px;flex:0 0 auto;stroke-width:1.9;vertical-align:-3px}
/* the CTA kicker is outside .sec-head: make it the same centred inline-flex unit */
.cta .kicker{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px}
.sub{margin-left:auto;margin-right:auto}
#flow .kicker .ki{color:#1B4BFF}
#file .kicker .ki{color:#0E93A8}
#telemetry .kicker .ki{color:#0B8F62}
#index .kicker .ki{color:#1743C9}
#runs .kicker .ki{color:#5B3EF5}
#pricing .kicker .ki{color:#0A6F80}
#lab .kicker .ki{color:#B26A00}
#faq .kicker .ki{color:#C42B4C}
.cta .kicker .ki{color:#0B8F62}
.cta .kicker{justify-content:center}
/* the section plates keep a left-aligned body; only the head block is centred */
.section .wrap > .tgrid,.section .wrap > .idx,.section .wrap > .runs,.section .wrap > .two,
.section .wrap > .steps,.section .wrap > .sidecar,.section .wrap > .labgrid,.section .wrap > .price,
.section .wrap > .faq,.section .wrap > .sheet,.section .wrap > .logcard{text-align:left}

/* air between the four stat cards and the recent-orders feed */
.logcard{margin-top:clamp(14px,1.6vw,18px)}

/* lab cards: one icon tile each, coloured per door */
.lab{position:relative}
.lab-ico{display:inline-grid;place-items:center;width:38px;height:38px;margin-bottom:10px;border-radius:11px;
  border:1px solid rgba(14,40,90,.12);background:#fff;box-shadow:0 2px 0 rgba(27,75,255,.08)}
.lab-ico svg{width:19px;height:19px;stroke-width:1.8}
.lab-ico.bot{color:#1B4BFF;border-color:rgba(27,75,255,.28);background:rgba(27,75,255,.06)}
.lab-ico.feed{color:#0B8F62;border-color:rgba(11,143,98,.28);background:rgba(11,143,98,.06)}
.lab-ico.touch{color:#5B3EF5;border-color:rgba(91,62,245,.28);background:rgba(91,62,245,.06)}
.lab:hover .lab-ico{box-shadow:3px 3px 0 rgba(27,75,255,.14)}

/* lab cards: the action sits on the same baseline in all three, whatever the copy length */
.lab{display:flex;flex-direction:column;align-items:flex-start}
.lab .go{margin-top:auto;padding-top:14px}

/* pricing: an icon tile per card, and the two coin marks on the payment line */
.pico{display:inline-grid;place-items:center;width:36px;height:36px;margin-bottom:9px;border-radius:10px;
  border:1px solid rgba(14,40,90,.12);background:#fff;box-shadow:0 2px 0 rgba(27,75,255,.08)}
.pico svg{width:18px;height:18px;stroke-width:1.8}
.pico.free{color:#0B8F62;border-color:rgba(11,143,98,.28);background:rgba(11,143,98,.06)}
.pico.paid{color:#1B4BFF;border-color:rgba(27,75,255,.28);background:rgba(27,75,255,.06)}
.pico.refer{color:#5B3EF5;border-color:rgba(91,62,245,.28);background:rgba(91,62,245,.06)}
.pcard.feat .pico{background:rgba(27,75,255,.07);border-color:rgba(27,75,255,.3)}
.pay{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.coins{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto}
.coin{width:22px;height:22px;flex:0 0 auto;border-radius:50%;display:block}

/* the payment line: coins sit on the text baseline, not below it */
.pay{gap:8px}
.pay .coins{margin-right:1px;transform:translateY(.5px)}

/* payment methods read as a badge, not as tiny stray marks */
.paychip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px 2px 5px;border-radius:999px;
  border:1px solid var(--line-2);background:#fff;font-family:var(--mono);font-size:.6rem;letter-spacing:.09em;
  color:var(--ink-2);white-space:nowrap;box-shadow:0 1px 0 rgba(27,75,255,.08)}
.paychip .coin{width:20px;height:20px}
.pay{gap:8px;align-items:center}