/* ── tokens ───────────────────────────────────────────────────────── */
:root{
  --paper:#F6F4F2;
  --ink:#0A161F;
  --ink-rgb:10,22,31;
  --deep:#0088CC;
  --sea:#0195A3;
  --jade:#33AA98;
  --aqua:#15D5D3;

  --rule:rgba(var(--ink-rgb),.13);
  --rule-soft:rgba(var(--ink-rgb),.07);
  --muted:rgba(var(--ink-rgb),.56);
  --faint:rgba(var(--ink-rgb),.38);
  --lede:rgba(var(--ink-rgb),.74);
  --surface:#FFFFFF;
  --nav-bg:rgba(246,244,242,.88);
  --grid-line:rgba(var(--ink-rgb),.028);
  --wash:rgba(var(--ink-rgb),.03);
  --wash-2:rgba(var(--ink-rgb),.045);
  --shade:rgba(var(--ink-rgb),.42);
  /* text-safe accents (v3) — brand hues stay for fills/gradients */
  --deep-t:#006FA8;
  --sea-t:#017080;
  --jade-t:#1E7D6E;

  --display:'Space Grotesk',system-ui,sans-serif;
  --prose:'Public Sans',system-ui,sans-serif;
  --data:'JetBrains Mono',ui-monospace,monospace;

  --gap:clamp(52px,6.5vw,80px);
  --pad:clamp(20px,5vw,40px);
  --max:1180px;
  --nav-h:76px;
}
html[data-theme="dark"]{
  --paper:#0C1219;
  --ink:#E8EEF2;
  --ink-rgb:232,238,242;
  --surface:#151D28;
  --nav-bg:rgba(12,18,25,.88);
  --rule:rgba(232,238,242,.14);
  --rule-soft:rgba(232,238,242,.08);
  --muted:rgba(232,238,242,.62);
  --faint:rgba(232,238,242,.42);
  --lede:rgba(232,238,242,.76);
  --grid-line:rgba(232,238,242,.045);
  --wash:rgba(232,238,242,.05);
  --wash-2:rgba(232,238,242,.08);
  --shade:rgba(0,0,0,.55);
  --deep:#2BB0E8;
  --sea:#2BC4C0;
  --jade:#4EC4B0;
  --aqua:#3DE0DD;
  --deep-t:#5EC4F0;
  --sea-t:#4DD4CF;
  --jade-t:#6FD4C2;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
section,#pipeline,#top,#compare,#download,#capabilities,#connectors,#faq{scroll-margin-top:calc(var(--nav-h) + 20px)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--prose); font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
  /* graph-paper ground: this is a spreadsheet tool */
  background-image:
    linear-gradient(to right,var(--grid-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  background-size:56px 56px;
}
img,svg{display:block; max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--deep); outline-offset:3px; border-radius:2px}

.shell{max-width:var(--max); margin:0 auto; padding-inline:var(--pad)}

/* ── type ─────────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--display); font-weight:600; letter-spacing:-.025em; margin:0}
h1{font-size:clamp(37px,6.2vw,70px); line-height:1.02; letter-spacing:-.038em}
h2{font-size:clamp(27px,3.6vw,40px); line-height:1.1}
h3{font-size:17px; letter-spacing:-.01em}
p{margin:0}
.lede{font-size:clamp(17px,1.7vw,19.5px); line-height:1.55; color:var(--lede); max-width:53ch}

.eyebrow{
  font-family:var(--data); font-size:11px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--faint);
}
.num{font-family:var(--data); font-variant-numeric:tabular-nums}

/* ── top bar ──────────────────────────────────────────────────────── */
.topline{height:3px; background:linear-gradient(90deg,var(--deep),var(--sea) 42%,var(--jade) 68%,var(--aqua))}
.nav{position:sticky; top:0; z-index:40; background:var(--nav-bg);
     backdrop-filter:blur(12px); border-bottom:1px solid var(--rule-soft)}
.nav-in{display:flex; align-items:center; gap:28px; height:var(--nav-h); position:relative}
.logo{width:186px; height:56px; color:var(--ink); flex:none}
.nav-panel{
  /* group sits on the right — do not flex:1 (that pinned live actions next to the logo) */
  display:flex; align-items:center; gap:24px;
  flex:none; margin-left:auto;
}
.nav-actions{display:flex; align-items:center; gap:10px; flex:none; margin-left:0}
.nav-links{display:flex; gap:24px; margin-left:0; align-items:center}
.nav-links a{
  font-family:var(--data); font-size:12px; letter-spacing:.06em;
  text-decoration:none; color:var(--muted); text-transform:lowercase;
}
.nav-links a:hover{color:var(--ink)}
.nav-actions a.nav-cta{
  font-family:var(--display); font-weight:500; font-size:13.5px; letter-spacing:0;
  text-decoration:none; text-transform:none;
  background:var(--ink); color:var(--paper);
  border-radius:8px; padding:9px 16px;
  transition:transform .16s,box-shadow .16s;
}
.nav-actions a.nav-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px -10px var(--shade);
  color:var(--paper);
  background:var(--ink);
}
.nav-login{
  font-family:var(--display); font-weight:500; font-size:13.5px; letter-spacing:0;
  text-decoration:none; color:var(--ink);
  border:1px solid var(--rule); border-radius:8px; padding:8px 14px;
  background:var(--surface);
  transition:border-color .15s, background .15s, transform .16s;
}
.nav-login:hover{border-color:var(--ink); transform:translateY(-1px)}
.nav-mode,.nav-burger,.nav-theme{
  appearance:none; border:1px solid var(--rule); background:var(--surface);
  color:var(--ink); border-radius:8px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; flex:none;
  transition:border-color .15s, background .15s, color .15s;
}
.nav-mode:hover,.nav-burger:hover,.nav-theme:hover{border-color:var(--ink)}
.nav-mode .ico-live,.nav-mode .ico-static{display:none}
.nav-mode[aria-pressed="true"] .ico-static{display:block}
.nav-mode[aria-pressed="false"] .ico-live{display:block}
.nav-theme .ico-sun,.nav-theme .ico-moon{display:none}
html[data-theme="light"] .nav-theme .ico-moon{display:block}
html[data-theme="dark"] .nav-theme .ico-sun{display:block}
.nav-burger{display:none; flex-direction:column; gap:4px}
.nav-burger span{
  display:block; width:14px; height:1.5px; background:currentColor; border-radius:1px;
}

/* desktop / tablet landscape: original horizontal bar for all views */
@media(min-width:821px){
  .nav-panel{
    display:flex !important;
    position:static !important;
    inset:auto !important;
    flex-direction:row !important;
    align-items:center;
    gap:24px;
    flex:none !important;
    margin-left:auto !important;
    width:auto !important;
    max-height:none !important;
    overflow:visible !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
  }
  .nav-links{
    display:flex !important;
    flex-direction:row;
    align-items:center;
    gap:24px;
    margin-left:0;
    width:auto;
  }
  .nav-links a{
    display:inline;
    width:auto;
    padding:0;
    border-top:0 !important;
  }
  .nav-actions{
    display:flex !important;
    flex-direction:row !important;
    align-items:center;
    gap:10px;
    width:auto;
    padding-top:0 !important;
    border-top:0 !important;
  }
  .nav-actions .nav-mode,
  .nav-actions .nav-theme,
  .nav-actions .nav-login,
  .nav-actions .nav-cta{
    width:auto !important;
  }
  .nav-burger{display:none !important}
  html[data-view="live"] .nav-links{display:none !important}
}

/* mobile static only: collapse links + actions into hamburger */
@media(max-width:820px){
  html[data-view="static"] .nav-panel{
    display:none;
    position:absolute; left:var(--pad); right:var(--pad); top:calc(100% + 6px);
    flex-direction:column; align-items:stretch; gap:12px; margin:0; z-index:50;
    background:var(--surface); border:1px solid var(--rule); border-radius:12px;
    padding:10px 14px 14px; box-shadow:0 16px 40px -18px var(--shade);
  }
  html[data-view="static"] .nav-panel.is-open{display:flex}
  html[data-view="static"] .nav-links{
    display:flex; flex-direction:column; align-items:stretch; gap:0; margin:0; width:100%;
  }
  html[data-view="static"] .nav-links a{
    display:block; width:100%; padding:10px 2px; border-top:1px solid var(--rule-soft);
  }
  html[data-view="static"] .nav-links a:first-child{border-top:0}
  html[data-view="static"] .nav-actions{
    display:flex; flex-direction:column; align-items:stretch; gap:8px;
    width:100%; padding-top:4px; border-top:1px solid var(--rule-soft);
  }
  html[data-view="static"] .nav-actions .nav-mode,
  html[data-view="static"] .nav-actions .nav-theme,
  html[data-view="static"] .nav-actions .nav-login,
  html[data-view="static"] .nav-actions .nav-cta{
    width:100%; justify-content:center; text-align:center;
    box-sizing:border-box;
  }
  html[data-view="static"] .nav-actions .nav-mode,
  html[data-view="static"] .nav-actions .nav-theme{
    height:40px;
  }
  html[data-view="static"] .nav-burger{display:inline-flex; margin-left:auto}

  /* mobile live: keep compact actions in the bar, no hamburger */
  html[data-view="live"] .nav-links{display:none !important}
  html[data-view="live"] .nav-burger{display:none !important}
  html[data-view="live"] .nav-panel{
    display:flex; position:static; inset:auto;
    flex:none; flex-direction:row; background:transparent; border:0; box-shadow:none;
    padding:0; margin-left:auto; width:auto; max-height:none; overflow:visible;
  }
  html[data-view="live"] .nav-actions{gap:8px}
  /* desktop-only product for now — hide Download until Android exists */
  html[data-view="live"] .nav-actions a.nav-cta{display:none}
  html[data-view="live"] .nav-login{padding:7px 12px; font-size:12.5px}
  .logo{width:150px;height:45px}
}

/* ── view modes: live scroll story vs static page ─────────────── */
html[data-view="live"] .intro-track{
  height:min(580vh, 5400px);
  position:relative;
}
html[data-view="live"] .intro-pin{
  position:sticky;
  top:var(--nav-h);
  height:calc(100dvh - var(--nav-h));
  display:grid;
  place-items:center;
  overflow:visible; /* must not clip the flying logo */
  box-sizing:border-box;
}
html[data-view="live"] .intro-pin > .hero,
html[data-view="live"] .intro-pin > .pipeline-stage{
  grid-area:1 / 1;
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding-inline:var(--pad);
  box-sizing:border-box;
  /* no will-change/transform here — that would trap position:fixed logo */
}
/* live hero uses more of the viewport than the page shell */
html[data-view="live"] .intro-pin > .hero{
  max-width:min(100%, 1680px);
  padding-top:clamp(12px,2vh,28px);
  padding-bottom:clamp(12px,2vh,28px);
  padding-inline:clamp(24px, 3.2vw, 48px);
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr);
  gap:clamp(40px, 6vw, 100px);
  align-items:center;
  width:100%;
}
html[data-view="live"] .intro-pin > .hero .hero-copy{
  transform:translate3d(0, calc(var(--hero-y, 0) * 1vh), 0);
  opacity:var(--hero-o, 1);
  pointer-events:var(--hero-pe, auto);
  filter:blur(calc(var(--hero-s, 0) * 1.5px));
  will-change:transform, opacity;
  max-width:none;
}
html[data-view="live"] .intro-pin > .hero h1{
  max-width:22ch;
}
html[data-view="live"] .intro-pin > .hero .lede{
  max-width:50ch;
  font-size:clamp(17px, 1.6vw, 21px);
}
html[data-view="live"] .intro-pin > .hero .hero-brand{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:clamp(160px, 28vh, 280px);
}
html[data-view="live"] .intro-pin > .hero .hero-logo{
  width:min(100%, clamp(380px, 46vw, 720px));
}
html[data-view="live"] .intro-pin > .pipeline-stage{
  padding-block:12px;
  transform:translate3d(0, calc(var(--pipe-y, 14) * 1vh), 0);
  opacity:var(--pipe-o, 0);
  pointer-events:var(--pipe-pe, none);
  will-change:transform, opacity;
}
html[data-view="live"] .intro-pin .bench{
  margin-top:0;
  max-height:calc(100dvh - var(--nav-h) - 32px);
  display:flex; flex-direction:column;
  overflow:hidden;
}
html[data-view="live"] .intro-pin .grid-wrap{
  max-height:min(38vh, 320px);
  overflow:auto;
}
html[data-view="live"] .intro-pin .bench-body{min-height:0; flex:1}
html[data-view="live"] .intro-hint{
  display:block;
  text-align:center;
  font-family:var(--data); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); margin-top:10px;
}

/* static / reduced-motion: normal document flow */
html[data-view="static"] .intro-track,
html[data-view="static"] .intro-pin{height:auto; position:static; display:block; overflow:visible}
html[data-view="static"] .intro-pin > .hero,
html[data-view="static"] .intro-pin > .pipeline-stage,
html[data-view="static"] .intro-pin > .hero .hero-copy{
  transform:none !important; opacity:1 !important; filter:none !important;
  pointer-events:auto !important; grid-area:auto;
}
html[data-view="static"] .intro-hint{display:none}
html[data-view="static"] .intro-pin > .hero .hero-brand{display:none}

/* hero brand mark */
.hero-brand{margin-bottom:clamp(18px,2.8vh,28px)}
.hero-logo{
  width:clamp(220px, 28vw, 340px);
  aspect-ratio:799 / 240;
  height:auto;
  color:var(--ink);
  display:block;
}
html[data-view="live"] .nav-brand .logo{
  opacity:var(--nav-logo-o, 0);
}
html[data-view="live"] .hero-brand.is-flying{
  /* spacer only — real logo is position:fixed */
  margin:0;
}
html[data-view="live"] .hero-logo.is-flying{
  position:fixed;
  left:0; top:0;
  z-index:60;
  margin:0;
  max-width:none;
  transform-origin:0 0;
  pointer-events:none;
  will-change:transform;
  backface-visibility:hidden;
}
.brand-fly{display:none !important} /* unused — we fly the real logo node */
html[data-view="static"] .nav-brand .logo{opacity:1 !important}
html[data-view="static"] .intro-pin > .hero{display:block}
@media (prefers-reduced-motion: reduce){
  html[data-view="live"] .nav-brand .logo{opacity:1 !important}
  html[data-view="live"] .hero-logo.is-flying{
    position:static !important; transform:none !important; left:auto !important; top:auto !important;
  }
}
@media(max-width:820px){
  html[data-view="live"] .intro-pin > .hero{
    grid-template-columns:1fr;
    gap:18px;
    align-content:center;
  }
  html[data-view="live"] .intro-pin > .hero .hero-brand{
    min-height:0;
    justify-content:flex-start;
  }
  html[data-view="live"] .intro-pin > .hero .hero-logo{
    width:min(100%, 260px);
  }
}

/* restory: engine → download sticky scrub — live only; static stacks sections */
html[data-view="live"] .restory-scrub{
  height:min(640vh, 6200px);
  position:relative;
}
html[data-view="live"] .restory-pin{
  position:sticky;
  top:var(--nav-h);
  height:calc(100dvh - var(--nav-h));
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  box-sizing:border-box;
  overflow:hidden;
  padding-block:clamp(8px,1.5vh,16px);
  background-color:var(--paper);
  background-image:
    linear-gradient(to right,var(--grid-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  background-size:56px 56px;
}
html[data-view="live"] .restory-progress{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  max-width:var(--max); width:100%; margin:0 auto; padding-inline:var(--pad);
  flex:none;
}
html[data-view="live"] .restory-progress .dots{
  display:flex; gap:6px; flex-wrap:wrap; flex:1; min-width:0;
}
html[data-view="live"] .restory-progress .dots span{
  font-family:var(--data); font-size:11px; letter-spacing:.08em;
  border:1px solid var(--rule-soft); background:transparent; color:var(--faint);
  border-radius:8px; padding:7px 10px;
  transition:background .2s,border-color .2s,color .2s;
}
html[data-view="live"] .restory-progress .dots span[aria-current="true"]{
  background:var(--ink); border-color:var(--ink); color:var(--paper);
}
html[data-view="live"] .restory-count{
  font-family:var(--data); font-size:11px;
  letter-spacing:.12em; color:var(--faint); margin-left:auto;
}
html[data-view="live"] .restory-stage{
  flex:1 1 auto;
  min-height:0;
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding-inline:var(--pad);
  display:grid;
  place-items:center;
  position:relative;
}
html[data-view="live"] .restory-slide{
  grid-area:1 / 1;
  width:100%;
  max-height:100%;
  overflow:auto;
  box-sizing:border-box;
  padding-block:0;
  opacity:0;
  transform:translate3d(0, 22px, 0);
  visibility:hidden;
  pointer-events:none;
  transition:opacity .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1), visibility 0s linear .45s;
  scrollbar-width:thin;
}
html[data-view="live"] .restory-slide.is-on{
  opacity:1;
  transform:none;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1), visibility 0s;
  z-index:1;
}
html[data-view="live"] .restory-slide > .shell,
html[data-view="live"] .restory-slide.shell{
  max-width:none;
  padding-inline:0;
}
html[data-view="live"] #restory #engine,
html[data-view="live"] #restory #connectors,
html[data-view="live"] #restory #compare,
html[data-view="live"] #restory #faq,
html[data-view="live"] #restory #download,
html[data-view="live"] #restory #local{
  padding-block:0;
}
html[data-view="static"] .restory-scrub,
html[data-view="static"] .restory-pin{
  height:auto; position:static; display:block; overflow:visible;
  background:transparent; padding:0; gap:0;
}
html[data-view="static"] .restory-progress{display:none}
html[data-view="static"] .restory-stage{display:block; max-width:none; padding:0; margin:0}
html[data-view="static"] .restory-slide{
  opacity:1 !important; transform:none !important; visibility:visible !important;
  pointer-events:auto !important; grid-area:auto; max-height:none; overflow:visible;
  transition:none;
}
/* static: give the closing band + footer more air */
html[data-view="static"] #download{
  padding-bottom:clamp(72px, 9vw, 120px);
}
html[data-view="static"] footer{
  padding-block:clamp(36px, 5vw, 52px) clamp(64px, 9vw, 96px);
}
@media (prefers-reduced-motion: reduce){
  html[data-view="live"] .restory-scrub,
  html[data-view="live"] .restory-pin{
    height:auto; position:static; display:block; overflow:visible;
    background:transparent; padding:0;
  }
  html[data-view="live"] .restory-progress{display:none}
  html[data-view="live"] .restory-stage{display:block; max-width:none; padding:0}
  html[data-view="live"] .restory-slide{
    opacity:1 !important; transform:none !important; visibility:visible !important;
    pointer-events:auto !important; grid-area:auto; max-height:none; overflow:visible;
    transition:none;
  }
}
@media(max-width:900px){
  html[data-view="live"] .restory-scrub{height:min(560vh, 5200px)}
}

@media(max-width:900px){
  /* live scrub is awkward on small screens — CSS still works if forced, but default JS is static */
  html[data-view="live"] .intro-track{height:min(480vh, 4200px)}
  html[data-view="live"] .intro-pin .bench-body{grid-template-columns:1fr}
  html[data-view="live"] .intro-pin .rail{
    border-right:0; border-bottom:1px solid var(--rule-soft);
    display:flex; gap:8px; overflow-x:auto;
  }
}


/* ── hero ─────────────────────────────────────────────────────────── */
.hero{padding-top:clamp(48px,7vw,88px); padding-bottom:clamp(36px,5vw,60px)}
.status{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:26px;
  font-family:var(--data); font-size:11.5px; letter-spacing:.04em; color:var(--muted);
  border:1px solid var(--rule); border-radius:100px; padding:5px 13px 5px 9px; background:var(--surface);
}
.dot{width:6px; height:6px; border-radius:50%; background:var(--jade); flex:none}
.hero h1{max-width:22ch}
.hero h1 em{font-style:normal; background:linear-gradient(90deg,var(--deep),var(--sea) 55%,var(--jade));
            -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .lede{margin-top:24px}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.btn{
  font-family:var(--display); font-size:15px; font-weight:500; text-decoration:none;
  padding:12px 22px; border-radius:9px; border:1px solid transparent; display:inline-flex;
  align-items:center; gap:9px; transition:transform .16s, box-shadow .16s, background .16s;
}
.btn-primary{background:var(--ink); color:var(--paper)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 8px 22px -10px var(--shade)}
.btn-ghost{border-color:var(--rule); color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink); background:var(--wash)}

/* ── signature: the workbench ─────────────────────────────────────── */
.bench{
  margin-top:clamp(36px,5vw,60px);
  background:var(--surface); border:1px solid var(--rule);
  border-radius:14px; overflow:hidden;
  box-shadow:0 1px 0 var(--rule-soft), 0 26px 60px -42px var(--shade);
}
.bench-bar{
  display:flex; align-items:center; gap:12px; padding:11px 16px;
  border-bottom:1px solid var(--rule-soft); background:var(--wash);
}
.bench-bar .t{font-family:var(--data); font-size:11.5px; color:var(--muted); letter-spacing:.04em}
.bench-bar .t b{font-weight:500; color:var(--ink)}
.bench-bar .right{margin-left:auto; display:flex; align-items:center; gap:14px}
.rowcount{font-family:var(--data); font-size:11.5px; color:var(--faint); font-variant-numeric:tabular-nums}

.bench-body{display:grid; grid-template-columns:264px 1fr; min-height:0}
@media(max-width:900px){ .bench-body{grid-template-columns:1fr} }

/* step rail */
.rail{border-right:1px solid var(--rule-soft); padding:14px 12px; background:var(--wash)}
@media(max-width:900px){
  .rail{border-right:0; border-bottom:1px solid var(--rule-soft); display:flex; gap:8px;
        overflow-x:auto; padding:12px; scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
}
.rail-head{
  font-family:var(--data); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); padding:2px 8px 12px;
}
@media(max-width:900px){ .rail-head{display:none} }
.step{
  display:block; width:100%; text-align:left; background:none; cursor:pointer;
  border:1px solid transparent; border-radius:8px; padding:9px 11px; margin-bottom:3px;
  font-family:var(--data); font-size:12px; color:var(--muted); position:relative;
  transition:background .16s,color .16s,border-color .16s;
}
@media(max-width:900px){ .step{width:auto; flex:none; margin-bottom:0; white-space:nowrap} }
.step:hover{background:var(--wash-2); color:var(--ink)}
.step .k{color:var(--faint); margin-right:9px; font-variant-numeric:tabular-nums}
.step .fn{color:inherit}
.step .arg{color:var(--faint)}
.step[data-state="done"]{color:var(--ink)}
.step[data-state="done"] .k{color:var(--jade)}
.step[data-state="active"]{
  background:var(--surface); border-color:var(--rule); color:var(--ink);
  box-shadow:0 2px 10px -6px var(--shade);
}
.step[data-state="active"] .k{color:var(--deep)}
.step[data-state="active"]::after{
  content:''; position:absolute; left:11px; right:11px; bottom:3px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--deep),var(--aqua)); animation:sweep .5s ease-out;
}
@keyframes sweep{from{transform:scaleX(0); transform-origin:left}to{transform:scaleX(1)}}

/* table */
.grid-wrap{overflow-x:auto; padding:0}
table{border-collapse:collapse; width:100%; font-family:var(--data); font-size:12.5px}
th,td{
  text-align:left; padding:9px 14px; border-bottom:1px solid var(--rule-soft);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
th{
  font-weight:500; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); border-bottom:1px solid var(--rule); position:sticky; top:0;
  background:var(--surface);
}
th .type{display:block; font-size:9px; letter-spacing:.06em; color:rgba(var(--ink-rgb),.26); margin-top:2px}
td{color:rgba(var(--ink-rgb),.86)}
tbody tr:hover td{background:var(--wash)}

th.derived{color:var(--jade)}
th.derived .type{color:rgba(51,170,152,.7)}
td.derived{color:var(--sea)}

/* a missing value is hatched, the way a spreadsheet flags an invalid cell */
.null{
  display:inline-block; min-width:52px; color:var(--faint);
  background-image:repeating-linear-gradient(-45deg,rgba(var(--ink-rgb),.13) 0 1px,transparent 1px 5px);
  border-radius:3px; padding:0 6px;
}
tr.dropping{animation:drop .42s cubic-bezier(.4,0,.7,.2) forwards}
tr.dropping td{text-decoration:line-through; text-decoration-color:rgba(var(--ink-rgb),.4); color:var(--faint)}
@keyframes drop{
  0%{opacity:1} 35%{opacity:1; background:var(--wash-2)}
  100%{opacity:0; transform:translateX(-14px)}
}
td.flash{animation:flash .85s ease-out}
@keyframes flash{
  0%{background:rgba(21,213,211,.42)} 60%{background:rgba(21,213,211,.14)} 100%{background:transparent}
}
th.newcol,td.newcol{animation:newcol .7s ease-out}
@keyframes newcol{from{background:rgba(51,170,152,.22)}to{background:transparent}}

.bench-foot{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 16px; border-top:1px solid var(--rule-soft); background:var(--wash);
}
.run{
  font-family:var(--data); font-size:12px; letter-spacing:.04em; cursor:pointer;
  border:0; border-radius:7px; padding:9px 16px; color:#fff;
  background:linear-gradient(92deg,var(--deep),var(--sea));
  transition:filter .16s, transform .16s;
}
.run:hover{filter:brightness(1.08); transform:translateY(-1px)}
.run:disabled{opacity:.45; cursor:default; transform:none; filter:none}
.reset{
  font-family:var(--data); font-size:12px; background:none; border:0; cursor:pointer;
  color:var(--muted); padding:9px 4px; text-decoration:underline; text-underline-offset:3px;
}
.reset:hover{color:var(--ink)}
.note{font-family:var(--data); font-size:11.5px; color:var(--faint); margin-left:auto}
@media(max-width:620px){ .note{margin-left:0; width:100%} }

/* ── generic section ──────────────────────────────────────────────── */
/* Balanced air both sides; gap capped so pairs stay ~140–160px, not ~264. */
section{padding-block:var(--gap)}
#pipeline{
  padding-top:clamp(32px,4vw,52px);
  padding-bottom:var(--gap);
}
#local{
  padding-block:var(--gap);
  scroll-margin-top:calc(var(--nav-h) + 20px);
}
.head{margin-bottom:clamp(30px,4vw,46px); max-width:62ch}
.head .eyebrow{display:block; margin-bottom:14px}
.head p{margin-top:16px; color:var(--lede)}

/* ── comparison (from v3) ─────────────────────────────────────────── */
.vs{border:1px solid var(--rule); border-radius:13px; overflow:hidden; background:var(--surface)}
.vrow{display:grid; grid-template-columns:1.12fr 1fr 1fr 1.12fr; border-top:1px solid var(--rule-soft)}
.vrow:first-child{border-top:0}
.vrow>div{padding:15px 18px; font-size:14.5px; display:flex; align-items:center}
.vrow .crit{font-family:var(--data); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
            color:var(--faint); background:var(--wash); border-right:1px solid var(--rule-soft)}
.vrow .us{background:rgba(0,136,204,.05); border-left:1px solid rgba(0,136,204,.14); font-weight:500}
.vhead{background:var(--wash)}
.vhead>div{font-family:var(--display); font-weight:600; font-size:14px; padding-block:13px}
.vhead .us{color:var(--sea)}
@media(max-width:840px){
  .vrow{grid-template-columns:1fr}
  .vhead{display:none}
  .vrow>div{border-top:1px solid var(--rule-soft)}
  .vrow .crit{border-right:0; border-top:0}
  .vrow .us{border-left:0}
  .vrow>div[data-l]::before{content:attr(data-l); font-family:var(--data); font-size:10px;
    letter-spacing:.1em; text-transform:uppercase; color:var(--faint); width:92px; flex:none; margin-right:12px}
}

/* ── datasheet ────────────────────────────────────────────────────── */
.sheet{border:1px solid var(--rule); border-radius:12px; overflow:hidden; background:var(--surface)}
.sheet-row{display:grid; grid-template-columns:minmax(150px,240px) 1fr; border-top:1px solid var(--rule-soft)}
.sheet-row:first-child{border-top:0}
.sheet-row dt{
  font-family:var(--data); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint); padding:15px 18px; background:var(--wash);
  border-right:1px solid var(--rule-soft); display:flex; align-items:center;
}
.sheet-row dd{margin:0; padding:15px 18px; font-size:14.5px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.sheet-row dd b{font-family:var(--data); font-weight:500; font-size:15px; font-variant-numeric:tabular-nums}
.sheet-row dd span{color:var(--muted); font-size:13.5px}
@media(max-width:560px){
  .sheet-row{grid-template-columns:1fr}
  .sheet-row dt{border-right:0; border-bottom:1px solid var(--rule-soft); padding-block:10px}
}

/* ── two-up ───────────────────────────────────────────────────────── */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,68px); align-items:start}
#engine .split{align-items:center}
@media(max-width:840px){ .split{grid-template-columns:1fr} }
.points{display:grid; gap:2px; margin-top:8px}
.point{padding:16px 0; border-top:1px solid var(--rule-soft)}
.point:first-child{border-top:0; padding-top:0}
.point h3{margin-bottom:5px}
.point p{color:var(--muted); font-size:14.5px}

/* ── dark local band (from v3) ────────────────────────────────────── */
.band{background:var(--ink); color:var(--paper); border-radius:16px;
      padding:clamp(34px,5vw,58px) clamp(24px,4.5vw,54px)}
.band h2{color:var(--paper); max-width:18ch}
.band h4{font-family:var(--display); font-weight:600; font-size:15.5px; letter-spacing:-.005em; margin:0}
.band .cols{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,60px); align-items:start}
@media(max-width:840px){.band .cols{grid-template-columns:1fr}}
.band .lede{color:color-mix(in srgb, var(--paper) 72%, transparent)}
.band .pts{margin-top:26px}
.band .pt{padding:15px 0; border-top:1px solid color-mix(in srgb, var(--paper) 14%, transparent)}
.band .pt:first-child{border-top:0; padding-top:0}
.band .pt h4{color:var(--paper); margin-bottom:4px}
.band .pt p{font-size:14.5px; color:color-mix(in srgb, var(--paper) 74%, transparent)}

/* platforms / download cards */
.plats{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:12px}
.plat,.dl-card{border:1px solid var(--rule); border-radius:11px; padding:18px; background:var(--surface); display:flex; flex-direction:column}
.dl-card[data-you="1"]{border-color:var(--deep); box-shadow:0 0 0 3px rgba(0,136,204,.1)}
.dl-card .you{font-family:var(--data); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
              color:var(--deep); margin-bottom:3px}
.plat .os,.dl-card .os{font-family:var(--display); font-weight:600; font-size:16px; margin-bottom:3px}
.plat .arch,.dl-card .req{font-family:var(--data); font-size:11px; color:var(--faint); letter-spacing:.05em}
.plat .files,.dl-card .fmts{display:flex; flex-wrap:wrap; gap:5px; margin-top:13px}
.plat .files span,.dl-card .fmts span{
  font-family:var(--data); font-size:10.5px; padding:3px 7px; border-radius:5px;
  background:var(--wash-2); color:var(--muted);
}
.dl-card .go{margin-top:auto; padding-top:18px}
.dl-card .go a{display:block; font-family:var(--display); font-weight:500; font-size:14.5px;
               text-decoration:none; text-align:center; border:1px solid var(--rule); border-radius:9px;
               padding:10px 14px; transition:background .16s,border-color .16s,color .16s}
.dl-card .go a:hover{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.dl-card[data-you="1"] .go a{background:var(--ink); border-color:var(--ink); color:var(--paper)}


footer{border-top:1px solid var(--rule); padding-block:clamp(28px,4vw,40px) clamp(40px,5vw,56px)}
.foot-in{display:flex; gap:26px; align-items:center; flex-wrap:wrap}
.foot-in .logo{width:158px; height:48px}
.foot-end{margin-left:auto; display:flex; flex-direction:column; align-items:flex-end}
/* BSOC lockup — brand-kit.html · sized to match UDS footer logo */
.foot-bsoc{
  display:inline-flex; align-items:center; gap:14px;
  text-decoration:none; color:inherit;
  height:48px;
}
.foot-bsoc:hover .bsoc-name{color:var(--ink)}
.bsoc-gm{display:grid; grid-template-columns:1fr 1fr; gap:4px; flex:none}
.bsoc-gc{
  width:22px; height:22px; border-radius:2.5px; position:relative;
  box-sizing:border-box;
}
.bsoc-gc .d{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:8px; height:8px; border-radius:50%;
}
html[data-theme="light"] .bsoc-gc{
  background:#e8e8e4; border:1px solid #c8c8c2;
}
html[data-theme="light"] .bsoc-gc.on{
  background:#0a0a0a; border:none;
}
html[data-theme="light"] .bsoc-gc.on .d{background:#d4ff47}
/* dark: lift empty cells so the 2×2 grid reads on --paper */
html[data-theme="dark"] .bsoc-gc{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.28);
}
html[data-theme="dark"] .bsoc-gc.on{
  background:#d4ff47; border:none;
}
html[data-theme="dark"] .bsoc-gc.on .d{background:#0a0a0a}
.bsoc-wm{display:flex; flex-direction:column; justify-content:center; gap:2px; line-height:1.05}
.bsoc-name{
  font-family:var(--data); font-size:22px; font-weight:500;
  letter-spacing:.06em; color:var(--ink);
}
.bsoc-tld{
  font-family:var(--data); font-size:11px; font-weight:400;
  letter-spacing:.28em; color:var(--muted);
}
@media(max-width:620px){
  .foot-end{margin-left:0; align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}



/* ── capabilities — scroll slides ── */
#capabilities{
  scroll-margin-top:calc(var(--nav-h) + 20px);
  --muted:rgba(var(--ink-rgb),.68);
  --faint:rgba(var(--ink-rgb),.60);
  padding-block:0;
  border-top:0;
  background:transparent;
}

#capabilities h3{font-size:clamp(20px,2.2vw,25px); line-height:1.2; letter-spacing:-.02em; font-weight:600; margin:0; font-family:var(--display)}
#capabilities h4{font-size:15.5px; letter-spacing:-.005em; font-family:var(--display); font-weight:600; margin:0}

/* slide deck — sticky scrub, content optically centered in the viewport */
#capabilities .cap-scrub{
  height:420vh; /* ~60vh per step */
  position:relative
}
#capabilities .cap-pin{
  --cap-nav:72px;
  position:sticky;
  top:var(--cap-nav);
  min-height:calc(100dvh - var(--cap-nav));
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-sizing:border-box;
  overflow:visible;
  background-color:var(--paper);
  background-image:
    linear-gradient(to right,var(--grid-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  background-size:56px 56px;
}
#capabilities .cap-pin-in{
  flex:0 1 auto;
  width:100%;
  display:flex; flex-direction:column;
  gap:clamp(14px,2vh,20px);
  padding-block:clamp(12px,2vh,20px);
}
#capabilities .head{
  max-width:60ch; margin:0 0 clamp(8px,1.2vh,14px); flex:none
}
#capabilities .head .eyebrow{display:block; margin-bottom:14px; color:var(--faint)}
#capabilities .head h2{
  font-size:clamp(26px,3.6vw,40px); line-height:1.12; letter-spacing:-.03em; margin:0
}
#capabilities .head p{margin-top:16px; color:var(--lede); font-size:clamp(15px,1.7vw,17px)}

#capabilities .cap-progress{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:none
}
#capabilities .cap-progress .dots{
  display:flex; gap:6px; flex-wrap:wrap; flex:1; min-width:0
}
#capabilities .cap-progress .dots span{
  font-family:var(--data); font-size:11px; letter-spacing:.08em;
  border:1px solid var(--rule-soft); background:transparent; color:var(--faint);
  border-radius:8px; padding:7px 10px;
  transition:background .2s,border-color .2s,color .2s
}
#capabilities .cap-progress .dots span[aria-current="true"]{
  background:var(--ink); border-color:var(--ink); color:var(--paper)
}
#capabilities .cap-count{
  font-family:var(--data); font-size:11px;
  letter-spacing:.12em; color:var(--faint); margin-left:auto
}

#capabilities .cap-stage{
  flex:0 1 auto;
  width:100%;
  position:relative;
  display:grid;
  border:1px solid var(--rule);
  border-radius:16px;
  background:var(--surface);
  box-shadow:0 1px 0 var(--rule-soft), 0 28px 64px -48px var(--shade);
  overflow:hidden
}
#capabilities .cap-slide{
  grid-area:1 / 1;
  visibility:hidden;
  pointer-events:none;
  z-index:0;
  padding:clamp(18px,2.2vh,28px) clamp(18px,2.8vw,32px);
  box-sizing:border-box;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
#capabilities .cap-slide.is-on{
  visibility:visible;
  pointer-events:auto;
  z-index:1;
}
#capabilities .cap-slide .two{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:clamp(18px,3vw,44px); align-items:center
}
#capabilities .cap-slide .two > *{min-width:0}
@media(max-width:900px){
  #capabilities .cap-slide .two{grid-template-columns:1fr; gap:18px}
}
#capabilities .cap-slide .n{margin-bottom:10px}
#capabilities .cap-slide .txt h3{margin:0 0 10px; max-width:19ch; font-size:clamp(18px,2vw,23px)}
#capabilities .facts{margin-top:14px}
#capabilities .fact{padding:9px 0; font-size:14px}

@media (prefers-reduced-motion: reduce){
  #capabilities .cap-scrub{height:auto}
  #capabilities .cap-pin{
    position:static; min-height:0; height:auto; overflow:visible;
    justify-content:flex-start
  }
  #capabilities .cap-stage{
    display:flex; flex-direction:column; gap:18px; border:0; background:transparent;
    box-shadow:none; overflow:visible; flex:none
  }
  #capabilities .cap-slide{
    grid-area:auto;
    visibility:visible;
    pointer-events:auto;
    z-index:auto;
    display:block;
    justify-content:flex-start;
    border:1px solid var(--rule); border-radius:16px; background:var(--surface);
    box-shadow:0 1px 0 var(--rule-soft), 0 28px 64px -48px var(--shade)
  }
  #capabilities .cap-progress{display:none}
}

#capabilities .cap-sec{display:contents}
#capabilities .two{display:contents}

#capabilities .n{font-family:var(--data); font-size:11px; letter-spacing:.16em; color:var(--jade-t); margin-bottom:14px}
#capabilities .txt h3{margin-bottom:14px; max-width:19ch}
#capabilities .txt p{color:var(--lede); font-size:16px; margin:0}
#capabilities .txt p + p{margin-top:14px}
#capabilities .facts{margin-top:22px; display:grid; gap:0}
#capabilities .fact{display:flex; gap:13px; padding:11px 0; border-top:1px solid var(--rule-soft); font-size:14.5px}
#capabilities .fact:first-child{border-top:0}
#capabilities .fact i{font-style:normal; color:var(--jade-t); flex:none; font-family:var(--data); font-size:11px; padding-top:4px}
#capabilities .fact span{color:var(--muted)}
#capabilities .fact b{color:var(--ink); font-weight:500}

#capabilities .ingest{display:grid; gap:11px}
#capabilities .src{display:flex; align-items:center; gap:13px; border:1px solid var(--rule-soft); border-radius:10px;
     background:var(--surface); padding:13px 15px}
#capabilities .src .ext{font-family:var(--data); font-size:10px; letter-spacing:.06em; color:var(--sea-t);
          border:1px solid rgba(0,136,204,.24); border-radius:5px; padding:3px 7px; flex:none}
#capabilities .src .nm{font-family:var(--data); font-size:12.5px}
#capabilities .src .sz{margin-left:auto; font-family:var(--data); font-size:11px; color:var(--faint);
         font-variant-numeric:tabular-nums}
#capabilities .merge{display:flex; align-items:center; gap:12px; padding:4px 0 0}
#capabilities .merge .line{flex:1; height:1px; background:linear-gradient(90deg,var(--deep),var(--aqua))}
#capabilities .merge span{font-family:var(--data); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--jade-t)}
#capabilities .merged{border:1px solid rgba(51,170,152,.34); border-radius:10px; background:rgba(51,170,152,.05);
        padding:15px; font-family:var(--data); font-size:12px}
#capabilities .merged .h{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--jade-t); margin-bottom:10px}
#capabilities .merged .cols{display:flex; flex-wrap:wrap; gap:6px}
#capabilities .merged .cols span{background:var(--surface); border:1px solid var(--rule-soft); border-radius:5px; padding:3px 9px}

#capabilities .panel{background:var(--surface); border:1px solid var(--rule); border-radius:14px; overflow:hidden;
       box-shadow:0 1px 0 var(--rule-soft),0 24px 56px -44px var(--shade)}
#capabilities .panel-bar{display:flex; align-items:center; gap:12px; padding:11px 16px; flex-wrap:wrap;
           border-bottom:1px solid var(--rule-soft); background:var(--wash);
           font-family:var(--data); font-size:11.5px; color:var(--muted)}
#capabilities .panel-bar b{font-weight:500; color:var(--ink)}
#capabilities .cfg{border-bottom:1px solid var(--rule-soft); padding:15px; display:grid; gap:10px;
     background:var(--wash)}
#capabilities .fld{display:grid; grid-template-columns:104px 1fr; gap:12px; align-items:center}
#capabilities .fld .k{font-family:var(--data); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
#capabilities .fld .v{font-family:var(--data); font-size:12px; background:var(--surface); border:1px solid var(--rule);
        border-radius:7px; padding:7px 11px}
#capabilities .fld .v.auto{border-style:dashed; color:var(--sea-t); border-color:rgba(0,136,204,.4)}
#capabilities .fld .v.auto em{font-style:normal; color:var(--faint); font-size:10.5px; margin-left:8px}
#capabilities .scroll{overflow-x:auto}
#capabilities .panel table{border-collapse:collapse; width:100%; font-family:var(--data); font-size:12.5px}
#capabilities .panel th, #capabilities .panel td{text-align:left; padding:9px 15px; border-bottom:1px solid var(--rule-soft);
      white-space:nowrap; font-variant-numeric:tabular-nums}
#capabilities .panel th{font-weight:500; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
   color:var(--faint); border-bottom:1px solid var(--rule)}
#capabilities .panel th .t{display:block; font-size:9px; letter-spacing:.06em; color:var(--faint); margin-top:2px}
#capabilities .panel td{color:rgba(var(--ink-rgb),.86)}
#capabilities .panel tr:last-child td{border-bottom:0}
#capabilities .panel th.new{color:var(--jade-t)}
#capabilities .panel th.new .t{color:var(--jade-t)}
#capabilities .panel td.new{color:var(--sea-t)}
#capabilities .outcome{display:flex; gap:8px; flex-wrap:wrap; padding:11px 15px; border-top:1px solid var(--rule-soft);
         background:rgba(51,170,152,.05)}
#capabilities .won{font-family:var(--data); font-size:11px; color:var(--ink); background:var(--surface);
     border:1px solid rgba(51,170,152,.3); border-radius:6px; padding:4px 10px}
#capabilities .won b{color:var(--jade-t); font-weight:700}

/* 04 — vertical workflow chain (fits slide card width) */
#capabilities .chainviz{border:1px solid var(--rule); border-radius:14px; background:var(--surface); padding:18px 16px 16px}
#capabilities .track{display:flex; flex-direction:column; gap:0; margin:0; padding:0; list-style:none}
#capabilities .node{
  display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:10px;
  border:1px solid var(--rule-soft); border-radius:9px;
  padding:10px 12px; background:var(--paper);
}
#capabilities .node .ix{
  width:22px; height:22px; border-radius:6px;
  display:grid; place-items:center;
  font-family:var(--data); font-size:10px; font-weight:500; color:var(--faint);
  background:var(--wash); border:1px solid var(--rule-soft);
}
#capabilities .node .f{font-family:var(--data); font-size:12px; font-weight:500; color:var(--ink)}
#capabilities .node .o{font-family:var(--data); font-size:10.5px; color:var(--faint); text-align:right; white-space:nowrap}
#capabilities .node.out{border-color:rgba(51,170,152,.4); background:rgba(51,170,152,.06)}
#capabilities .node.out .ix{color:var(--jade-t); border-color:rgba(51,170,152,.35); background:rgba(51,170,152,.1)}
#capabilities .node.out .f{color:var(--jade-t)}
#capabilities .node.out .o{color:var(--jade-t)}
#capabilities .link{
  width:1px; height:12px; margin:0 0 0 22px;
  background:var(--rule); flex:none; border:0; padding:0;
}
#capabilities .rerun{
  display:flex; align-items:flex-start; gap:10px; margin-top:14px; padding-top:14px;
  border-top:1px dashed var(--rule);
  font-family:var(--data); font-size:11px; line-height:1.45; color:var(--muted);
}
#capabilities .rerun b{color:var(--ink); font-weight:500}
#capabilities .rerun .badge{
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--jade-t);
  border:1px solid rgba(51,170,152,.35); border-radius:5px; padding:4px 8px; flex:none; margin-top:1px;
}

#capabilities .code{background:var(--ink); border-radius:12px; padding:20px 22px; overflow-x:auto}
#capabilities .code pre{margin:0; font-family:var(--data); font-size:12.5px; line-height:1.75; color:#C6D3DC}
#capabilities .code .kw{color:#6FD3E8}
#capabilities .code .fnm{color:#7BE0C4}
#capabilities .code .str{color:#9BD07F}
#capabilities .code .cm{color:rgba(198,211,220,.62)}
#capabilities .code .ty{color:#EBC98A}
#capabilities .codecap{font-family:var(--data); font-size:10.5px; color:var(--faint); margin-top:10px; line-height:1.6}

/* 06 — local engine stack (specs table lives in #engine) */
#capabilities .localstack{
  border:1px solid var(--rule); border-radius:14px; background:var(--surface);
  padding:16px; display:grid; gap:0;
}
#capabilities .localstack .box{
  border:1px solid var(--rule-soft); border-radius:10px; padding:14px 15px;
  background:var(--paper);
}
#capabilities .localstack .box.core{
  border-color:rgba(0,136,204,.35); background:rgba(0,136,204,.05);
}
#capabilities .localstack .k{
  font-family:var(--data); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); margin-bottom:6px;
}
#capabilities .localstack .box.core .k{color:var(--sea-t)}
#capabilities .localstack .t{
  font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:-.01em; margin:0 0 4px;
}
#capabilities .localstack .d{
  font-family:var(--data); font-size:11.5px; color:var(--muted); line-height:1.45; margin:0;
}
#capabilities .localstack .pipe{
  display:flex; align-items:center; gap:10px; padding:10px 4px 10px 18px;
  font-family:var(--data); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint);
}
#capabilities .localstack .pipe::before{
  content:""; width:1px; height:18px; background:var(--rule); flex:none;
}
#capabilities .localstack .pipe b{color:var(--sea-t); font-weight:500; letter-spacing:.06em}
#capabilities .localstack .runs{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:12px;
}
#capabilities .localstack .runs span{
  font-family:var(--data); font-size:10.5px; padding:4px 9px; border-radius:5px;
  border:1px solid rgba(0,136,204,.28); background:var(--surface); color:var(--ink);
}
#capabilities .localstack .runs span[data-on]{
  border-color:rgba(51,170,152,.4); background:rgba(51,170,152,.08); color:var(--jade-t);
}


/* 02 — org connectors */
#capabilities .connviz{
  border:1px solid var(--rule); border-radius:14px; background:var(--surface);
  padding:16px; display:grid; gap:0;
}
#capabilities .conn-admin{
  border:1px solid var(--rule-soft); border-radius:10px; padding:14px 15px; background:var(--paper);
}
#capabilities .conn-admin .k{
  font-family:var(--data); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); margin-bottom:6px;
}
#capabilities .conn-admin .t{
  font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:-.01em; margin:0 0 4px;
}
#capabilities .conn-admin .d{
  font-family:var(--data); font-size:11.5px; color:var(--muted); line-height:1.45; margin:0;
}
#capabilities .conn-pipe{
  display:flex; align-items:center; gap:10px; padding:10px 4px 10px 18px;
  font-family:var(--data); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint);
}
#capabilities .conn-pipe::before{content:""; width:1px; height:18px; background:var(--rule); flex:none}
#capabilities .conn-pipe b{color:var(--sea-t); font-weight:500; letter-spacing:.06em}
#capabilities .conn-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media(max-width:520px){ #capabilities .conn-grid{grid-template-columns:1fr} }
#capabilities .conn-card{
  border:1px solid rgba(0,136,204,.28); border-radius:10px; padding:14px 14px 12px;
  background:rgba(0,136,204,.05);
}
#capabilities .conn-card .brand{
  font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:-.01em;
}
#capabilities .conn-card .meta{
  font-family:var(--data); font-size:11px; color:var(--muted); margin-top:4px;
}
#capabilities .conn-card .st{
  margin-top:12px; display:inline-block;
  font-family:var(--data); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--jade-t); border:1px solid rgba(51,170,152,.35); border-radius:5px; padding:3px 8px;
}
#capabilities .conn-use{
  display:flex; align-items:flex-start; gap:10px; margin-top:14px; padding-top:14px;
  border-top:1px dashed var(--rule);
  font-family:var(--data); font-size:11px; line-height:1.45; color:var(--muted);
}
#capabilities .conn-use b{color:var(--ink); font-weight:500}
#capabilities .conn-use .badge{
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--jade-t);
  border:1px solid rgba(51,170,152,.35); border-radius:5px; padding:4px 8px; flex:none; margin-top:1px;
}

/* FAQ */
#faq{scroll-margin-top:calc(var(--nav-h) + 20px)}
#faq .faq{display:grid; gap:0; border-top:1px solid var(--rule)}
#faq details{
  border-bottom:1px solid var(--rule); padding:0;
}
#faq summary{
  list-style:none; cursor:pointer;
  font-family:var(--display); font-weight:600; font-size:16.5px; letter-spacing:-.015em;
  padding:18px 0; display:flex; align-items:baseline; gap:14px;
}
#faq summary::-webkit-details-marker{display:none}
#faq summary::before{
  content:"+"; font-family:var(--data); font-size:14px; color:var(--faint); flex:none; width:1ch;
}
#faq details[open] summary::before{content:"−"}
#faq summary:hover{color:var(--sea-t)}
#faq .a{
  padding:0 0 18px; max-width:62ch;
  color:var(--muted); font-size:15px; line-height:1.55;
}
#faq .a b{color:var(--ink); font-weight:500}

/* Connectors logos */
#connectors{scroll-margin-top:calc(var(--nav-h) + 20px)}
#connectors .conn-bands{display:grid; gap:20px}
#connectors .conn-band{
  border:1px solid var(--rule); border-radius:13px;
  background:var(--surface); padding:22px 24px 24px;
}
#connectors .conn-band .lbl{
  font-family:var(--data); font-size:11px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
}
#connectors .conn-band .hint{
  margin:8px 0 18px; font-size:14.5px; line-height:1.5; color:var(--muted); max-width:58ch;
}
#connectors .logo-row{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
}
@media(max-width:560px){ #connectors .logo-row{grid-template-columns:1fr} }
#connectors .logo-tile{
  display:flex; align-items:center; gap:14px;
  padding:15px 16px; border:1px solid var(--rule-soft);
  border-radius:10px; background:var(--paper);
  text-decoration:none; color:inherit;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
#connectors .logo-tile:hover{
  border-color:var(--rule); transform:translateY(-1px);
  box-shadow:0 10px 24px -18px var(--shade);
}
#connectors .logo-tile .mark{
  width:42px; height:42px; flex:none; border-radius:9px;
  display:grid; place-items:center; overflow:hidden;
}
#connectors .logo-tile .mark svg{width:26px; height:26px}
#connectors .logo-tile .name{
  font-family:var(--display); font-weight:600; font-size:16px; letter-spacing:-.02em; line-height:1.15;
}
#connectors .logo-tile .tag{
  font-family:var(--data); font-size:11px; color:var(--faint); margin-top:3px; letter-spacing:.04em;
}