/* Flux — shared design system
   Tokens mirror the landing page so every surface reads as one product. */

:root{
  --bg:#050807; --panel:#09100d; --panel-2:#0c1512; --line:#1b2d25;
  --text:#f2f7f4; --muted:#97a69f; --muted-2:#77857f;
  --green:#55e0a6; --green-dim:#2b7957; --lime:#b7ff38; --teal:#18b9a0;
  --max:1180px;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:Georgia,'Times New Roman',serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
.wrap{width:min(var(--max),calc(100% - 48px));margin:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.035em;margin:0}

/* ---------- nav ---------- */
/* Scoped to the header by class. A bare `nav{}` selector also captured the
   documentation sidebar's <nav>, which inherited the sticky 66px flex row and
   rendered the whole page navigation as a floating strip over the article. */
nav.site-nav{
  height:66px;display:flex;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.08);
  position:sticky;top:0;z-index:40;
  background:rgba(5,8,7,.72);backdrop-filter:blur(16px);
}
nav.site-nav .wrap{display:flex;align-items:center}
.brand{display:flex;align-items:center;gap:10px;font-weight:720;letter-spacing:.08em}
.mark{width:23px;height:23px}
.links{display:flex;gap:28px;margin-left:58px;color:#b3bcb8;font-size:14px}
.links a{position:relative;padding:4px 0}
.links a:hover{color:#fff}
.links a.on{color:#fff}
.links a.on::after{
  content:"";position:absolute;left:0;right:0;bottom:-23px;height:2px;
  background:var(--green);
}
.actions{margin-left:auto;display:flex;gap:9px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:38px;padding:0 17px;border:1px solid rgba(255,255,255,.1);
  border-radius:7px;font-size:14px;font-weight:650;transition:.16s ease;
}
.btn.primary{background:#f3f8f5;color:#07110c;border-color:#f3f8f5}
.btn.primary:hover{background:#fff}
.btn.accent{background:var(--green);border-color:var(--green);color:#06110c}
.btn.accent:hover{background:#7beabc}
.btn.ghost:hover{background:rgba(255,255,255,.05)}

/* ---------- page head ---------- */
.page-head{
  position:relative;padding:96px 0 72px;
  border-bottom:1px solid rgba(255,255,255,.08);overflow:hidden;
}
.page-head .glow{
  position:absolute;width:900px;height:520px;left:50%;top:-260px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(85,224,166,.16),transparent 68%);
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;padding:7px 11px;
  border:1px solid rgba(255,255,255,.11);background:rgba(7,13,10,.8);
  font:600 11px var(--mono);color:#aab6b0;letter-spacing:.06em;text-transform:uppercase;
}
.eyebrow b{color:var(--green)}
.page-head h1{font-size:clamp(42px,5.4vw,66px);line-height:1.03;margin:20px 0 18px;max-width:15ch}
.page-head .lead{font-size:19px;line-height:1.6;color:#a6b1ac;max-width:620px}
.head-cta{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}

/* ---------- sections ---------- */
section{position:relative}
.band{padding:88px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.band.tight{padding:64px 0}
.sec-head{max-width:660px;margin-bottom:44px}
.sec-head h2{font-size:clamp(30px,3.6vw,42px);line-height:1.1;margin-bottom:14px}
.sec-head p{color:var(--muted);font-size:17px;line-height:1.6;margin:0}
.kicker{
  font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);margin-bottom:14px;display:block;
}

/* ---------- cards ---------- */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{
  border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),#070d0b);
  border-radius:14px;padding:26px;transition:.18s ease;
}
.card:hover{border-color:#2b4a3c;transform:translateY(-2px)}
.card h3{font-size:20px;margin-bottom:10px;letter-spacing:-.02em}
.card p{color:var(--muted);font-size:14.5px;line-height:1.62;margin:0}
.card .ico{
  width:38px;height:38px;border-radius:9px;display:grid;place-items:center;
  background:rgba(85,224,166,.09);border:1px solid rgba(85,224,166,.2);margin-bottom:16px;
}
.card .ico svg{width:19px;height:19px;stroke:var(--green);fill:none;stroke-width:1.6}
.card ul{margin:14px 0 0;padding-left:17px;color:var(--muted);font-size:14px;line-height:1.75}
.card ul li::marker{color:var(--green-dim)}

/* ---------- stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.08)}
.stats>div{padding:26px 22px;border-right:1px solid rgba(255,255,255,.08)}
.stats>div:last-child{border-right:0}
.stats b{display:block;font-family:var(--serif);font-size:34px;color:var(--green);letter-spacing:-.03em}
.stats span{display:block;color:var(--muted);font-size:13.5px;margin-top:6px;line-height:1.5}

/* ---------- architecture diagram ---------- */
.arch{
  border:1px solid var(--line);border-radius:16px;background:#020605;
  padding:8px;overflow:hidden;position:relative;
}
.arch svg{width:100%;height:auto;display:block}
.node-box{fill:#0b1310;stroke:#244135}
.node-box.accent{fill:rgba(85,224,166,.07);stroke:rgba(85,224,166,.38)}
.node-t{fill:#eaf4ef;font:600 12.5px Inter,sans-serif}
.node-s{fill:#8fa39a;font:400 10.5px var(--mono)}
.lane-t{fill:#5d6f67;font:600 10px var(--mono);letter-spacing:.14em}
.link{stroke:#2c4a3d;stroke-width:1.4;fill:none}
.pulse{
  stroke:var(--green);stroke-width:1.6;fill:none;stroke-linecap:round;
  stroke-dasharray:5 190;animation:dash 3.4s linear infinite;
}
.pulse.d1{animation-delay:.5s}.pulse.d2{animation-delay:1s}.pulse.d3{animation-delay:1.5s}
.pulse.d4{animation-delay:2s}.pulse.d5{animation-delay:2.6s}
@keyframes dash{from{stroke-dashoffset:195}to{stroke-dashoffset:0}}
.arch-legend{
  display:flex;gap:22px;flex-wrap:wrap;margin-top:18px;
  color:var(--muted-2);font:500 12px var(--mono);
}
.arch-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:7px}

/* ---------- split feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev>div:first-child{order:2}
.split h3{font-size:27px;margin-bottom:14px;letter-spacing:-.025em}
.split p{color:var(--muted);font-size:15.5px;line-height:1.68}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.chip{
  padding:6px 11px;border:1px solid rgba(255,255,255,.11);border-radius:6px;
  font:600 11.5px var(--mono);color:#a9b8b1;background:rgba(255,255,255,.02);
}
.chip.on{border-color:rgba(85,224,166,.4);color:var(--green);background:rgba(85,224,166,.07)}

/* ---------- terminal / code panel ---------- */
.panel{
  border:1px solid var(--line);border-radius:13px;background:#020605;overflow:hidden;
}
.panel-bar{
  height:37px;display:flex;align-items:center;gap:8px;padding:0 13px;
  border-bottom:1px solid rgba(255,255,255,.07);color:#81928a;font:500 11.5px var(--mono);
}
.panel-bar i{width:7px;height:7px;border-radius:50%;background:#244237;display:block}
.panel-body{padding:20px;font:400 12.8px/1.85 var(--mono);color:#b9c8c1}
.panel-body .k{color:var(--green)}
.panel-body .m{color:#6d7f77}
.panel-body .w{color:var(--lime)}

/* ---------- flow steps ---------- */
.steps{counter-reset:s;display:grid;gap:2px}
.step{
  display:grid;grid-template-columns:54px 1fr;gap:20px;padding:24px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.step:last-child{border-bottom:0}
.step .n{
  counter-increment:s;font:600 12px var(--mono);color:var(--green);
  border:1px solid rgba(85,224,166,.28);border-radius:8px;
  height:34px;display:grid;place-items:center;background:rgba(85,224,166,.06);
}
.step .n::before{content:"0" counter(s)}
.step h4{font-family:var(--serif);font-weight:500;font-size:20px;margin:4px 0 8px;letter-spacing:-.02em}
.step p{color:var(--muted);font-size:14.5px;line-height:1.65;margin:0}

/* ---------- callout ---------- */
.callout{
  border:1px solid rgba(85,224,166,.24);border-radius:14px;
  background:linear-gradient(135deg,rgba(85,224,166,.08),rgba(85,224,166,.02));
  padding:30px 32px;
}
.callout h3{font-size:22px;margin-bottom:10px}
.callout p{color:#b6c5be;font-size:15px;line-height:1.66;margin:0;max-width:76ch}

/* ---------- cta ---------- */
.cta{padding:100px 0;text-align:center;position:relative;overflow:hidden}
.cta .glow{
  position:absolute;width:820px;height:420px;left:50%;bottom:-220px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(85,224,166,.15),transparent 70%);pointer-events:none;
}
.cta h2{font-size:clamp(32px,4.4vw,50px);line-height:1.06;margin-bottom:16px}
.cta p{color:var(--muted);font-size:17.5px;max-width:540px;margin:0 auto 30px;line-height:1.6}
.cta .head-cta{justify-content:center}

/* ---------- footer ---------- */
footer{border-top:1px solid rgba(255,255,255,.08);padding:46px 0 40px;color:var(--muted-2)}
footer .cols{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
footer .fl{display:flex;gap:34px;font-size:13.5px}
footer .fl a:hover{color:#fff}
footer small{display:block;margin-top:28px;font-size:12.5px;color:#5c6b64}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:34px}
  .split.rev>div:first-child{order:0}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats>div:nth-child(2n){border-right:0}
}
@media(max-width:760px){
  .links{display:none}
  .g2,.g4{grid-template-columns:1fr}
  .band{padding:62px 0}
  .page-head{padding:64px 0 52px}
  .wrap{width:min(100% - 28px,var(--max))}
  .actions .ghost{display:none}
  .step{grid-template-columns:42px 1fr;gap:14px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ═══════════════ accessibility ═══════════════ */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;padding:10px 16px;
  background:var(--green);color:#06110c;font-weight:650;border-radius:0 0 7px 0;
}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}

/* ═══════════════ hero ═══════════════ */
.hero{position:relative;min-height:760px;border-bottom:1px solid rgba(255,255,255,.08);overflow:hidden}
/* No mask here on purpose: .mask-bottom already fades the base of the hero,
   and a mask over a continuously animating subtree makes Chrome flicker. */
/* The animated layer is deliberately bounded.
   With inset:0 this spanned the full viewport width, so on an ultrawide it
   became a multi-thousand-pixel composited layer repainting every frame.
   Chrome switches to tiled rasterisation at that size and the tiles land out
   of step with each other, which reads as flicker. Capping the width keeps
   the layer a predictable size on every display, and paint containment stops
   invalidations escaping it. */
.field{
  position:absolute;top:0;bottom:0;left:0;right:0;
  max-width:2000px;margin-inline:auto;
  pointer-events:none;opacity:.93;
  contain:paint;
}
.field svg{width:100%;height:100%}
/* Connected conduits that ebb and flow.
   Chrome-safe by construction. Three things are deliberately avoided here,
   because together they caused violent flashing in Chrome while looking fine
   in other engines:
     1. No SVG filter on an animated element. Chrome re-rasterises a filtered
        subtree every frame it moves; the glow is a wider translucent path
        underneath instead, which costs nothing.
     2. No will-change. Sixteen forced compositing layers thrash far worse
        than letting the browser decide.
     3. No transform-box:fill-box + scale on a <g>. Chrome recomputes the
        group bounding box per frame, which jitters. The sway is translate
        only, so it never needs an origin. */
.weave{
  transform-origin:50% 50%;transform-box:view-box;
  animation:weave-drift 34s ease-in-out infinite;
}
@keyframes weave-drift{
  0%,100%{transform:translate(0,0)}
  50%    {transform:translate(-12px,8px)}
}

.conduit{
  animation-name:sway;animation-timing-function:cubic-bezier(.45,0,.55,1);
  animation-iteration-count:infinite;
}
@keyframes sway{
  0%,100%{transform:translate(0,0)}
  30%    {transform:translate(-5px,-13px)}
  65%    {transform:translate(4px,9px)}
}

.stream{fill:none;stroke-width:1.1;stroke-linecap:round;opacity:.82}
.conduit:nth-child(3n) .stream{opacity:.62}
.conduit:nth-child(5n) .stream{stroke-width:.7;opacity:.45}

/* Long ribbons of light. One animated dashed stroke per line and no more:
   stroke-dashoffset cannot be GPU-composited, so each one costs main-thread
   work every frame. Twelve is affordable; thirty-two was not. */
.pulse-line{
  fill:none;stroke-linecap:round;stroke-width:1.9;
  stroke-dasharray:var(--lit) var(--gap);
  animation:travel var(--dur) linear infinite;
  animation-delay:var(--lag);
}
@keyframes travel{from{stroke-dashoffset:var(--cycle)}to{stroke-dashoffset:0}}

/* One duration per conduit drives both its sway and its light. */
.c0{--lit:620px;--gap:1180px;--cycle:1800px;--dur:15s;--lag:-1s}
.c1{--lit:540px;--gap:1320px;--cycle:1860px;--dur:19s;--lag:-6s}
.c2{--lit:700px;--gap:1150px;--cycle:1850px;--dur:23s;--lag:-11s}
.c3{--lit:480px;--gap:1360px;--cycle:1840px;--dur:17s;--lag:-3s}
.c4{--lit:660px;--gap:1200px;--cycle:1860px;--dur:26s;--lag:-14s}
.c5{--lit:580px;--gap:1260px;--cycle:1840px;--dur:21s;--lag:-8s}
.c0,.c1,.c2,.c3,.c4,.c5{animation-duration:var(--dur);animation-delay:var(--lag)}

.hero-inner{position:relative;z-index:6;padding-top:68px}
.copy{width:490px;position:relative;z-index:6}
.metric{
  display:inline-flex;align-items:center;gap:8px;padding:7px 10px;
  border:1px solid rgba(255,255,255,.11);background:rgba(7,13,10,.8);
  font:600 11px var(--mono);color:#aab6b0;
}
.metric b{color:var(--green)}
.hero h1{
  font-family:var(--serif);font-weight:500;font-size:clamp(48px,6vw,75px);
  line-height:1.01;letter-spacing:-.045em;margin:18px 0;
}
.hero .lead{font-size:18px;line-height:1.55;color:#a6b1ac;max-width:470px}
.hero-cta{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.hero-trust{display:flex;gap:22px;margin-top:26px;flex-wrap:wrap}
.hero-trust span{display:inline-flex;align-items:center;gap:7px;color:var(--muted-2);font-size:12.5px}
.hero-trust svg{width:14px;height:14px;stroke:var(--green-dim);fill:none;stroke-width:1.7}

.product{
  position:absolute;z-index:5;width:min(840px,64vw);left:calc(50% - 40px);top:274px;
  border:1px solid rgba(255,255,255,.08);border-radius:20px 20px 0 0;background:#020605;
  padding:11px 11px 0;box-shadow:0 30px 120px rgba(0,0,0,.7);overflow:hidden;
}
.product .chrome{
  height:38px;display:flex;align-items:center;padding:0 12px;color:#81928a;
  font-size:11px;border-bottom:1px solid rgba(255,255,255,.07);
}
.product .dots{display:flex;gap:6px}
.product .dots i{width:7px;height:7px;border-radius:50%;background:#244237}
.product .chrome span{margin:auto;font-family:var(--mono)}
.product img{width:100%;height:auto;display:block;opacity:.88;filter:saturate(.9) contrast(1.02)}
.product .shade{
  position:absolute;inset:49px 10px 0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(2,6,5,.94) 0,transparent 16%,transparent 82%,rgba(2,6,5,.55) 100%),
    linear-gradient(180deg,transparent 65%,#050807 99%);
}
.mask-left,.mask-right{position:absolute;z-index:4;top:0;height:100%;pointer-events:none}
.mask-left{left:0;width:45%;background:linear-gradient(90deg,#050807 0,#050807 64%,rgba(5,8,7,.85) 82%,transparent 100%)}
.mask-right{right:0;width:22%;background:linear-gradient(270deg,#050807 0,#050807 64%,rgba(5,8,7,.85) 82%,transparent 100%)}
.mask-bottom{position:absolute;z-index:6;left:0;right:0;bottom:0;height:145px;
  background:linear-gradient(transparent,#050807 75%);pointer-events:none}

.proof{
  position:relative;z-index:8;margin-top:462px;display:grid;
  grid-template-columns:1.25fr repeat(4,1fr);border-top:1px solid rgba(255,255,255,.08);
}
.proof>div{
  min-height:112px;border-right:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;padding:20px;
}
.proof>div:last-child{border-right:0}
.proof .intro{font-size:19px;color:#cbd4d0}
.proof .intro b{color:#fff}
.proof .logo{
  font-weight:700;color:#9ba8a2;justify-content:center;font-size:13px;letter-spacing:.06em;
}
.proof .logo:hover{color:#fff;background:rgba(255,255,255,.025)}

/* ═══════════════ wide section head ═══════════════ */
.sec-head.wide{max-width:820px}

/* ═══════════════ mini architecture ═══════════════ */
.arch.mini{padding:14px}
.arch.mini .lane-t{font-size:8.5px}
.arch.mini .node-t{font-size:11px}
.arch.mini .node-s{font-size:9px}

/* ═══════════════ chat (shared with intelligence page) ═══════════════ */
.chat{border:1px solid var(--line);border-radius:14px;background:#020605;overflow:hidden}
.chat-bar{
  height:40px;display:flex;align-items:center;gap:9px;padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,.07);color:#8fa39a;font:600 12px var(--mono);
}
.chat-bar .dot{width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px rgba(85,224,166,.7)}
.chat-body{padding:20px}
.msg{margin-bottom:16px}
.msg:last-child{margin-bottom:0}
.msg .who{font:600 10.5px var(--mono);letter-spacing:.12em;color:var(--muted-2);margin-bottom:7px}
.msg.you .bub{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.bub{border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-size:14px;
  line-height:1.62;color:#cfdad5}
.bub .tool{
  display:inline-flex;align-items:center;gap:6px;font:600 11px var(--mono);color:var(--green);
  background:rgba(85,224,166,.08);border:1px solid rgba(85,224,166,.22);
  border-radius:5px;padding:3px 8px;margin:0 4px 6px 0;
}
.bub .lim{
  margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);
  color:var(--lime);font-size:13px;
}

/* ═══════════════ footer ═══════════════ */
footer .cols{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px}
footer .fbrand p{color:var(--muted-2);font-size:13.5px;line-height:1.6;margin:14px 0 0;max-width:34ch}
footer .fgroup{display:flex;flex-direction:column;gap:11px}
footer .fgroup h4{
  font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:#6d7f77;margin:0 0 4px;
}
footer .fgroup a{color:var(--muted);font-size:13.5px}
footer .fgroup a:hover{color:#fff}

/* ═══════════════ hero responsive ═══════════════ */
@media(max-width:900px){
  .hero{min-height:880px}
  .copy{width:auto}
  .product{left:24px;right:24px;width:auto;top:410px}
  .mask-left,.mask-right{display:none}
  .proof{margin-top:530px;grid-template-columns:1fr 1fr}
  .proof .intro{grid-column:1/-1}
  .proof>div{border-bottom:1px solid rgba(255,255,255,.08)}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .hero-inner{padding-top:46px}
  .hero h1{font-size:44px}
  .product{top:430px;left:14px;right:14px}
  .proof{margin-top:500px}
  .proof .logo{font-size:11.5px}
  footer .cols{grid-template-columns:1fr}
}

/* Very wide displays still rasterise a large area; halve the travelling
   lights there so the per-frame stroke work stays flat. The conduits and
   their sway remain, so the hero looks the same at a glance. */
@media (min-width:2400px){
  .conduit:nth-child(2n) .pulse-line{animation:none;opacity:0}
}

/* ═══════════════ demo form ═══════════════ */
.demo-split{align-items:start}
.form-card{
  border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,var(--panel),#070d0b);
  padding:30px 30px 26px;position:sticky;top:90px;
}
.form-card h3{font-size:23px;margin-bottom:8px}
.form-intro{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0 0 22px}
.form-card form{display:grid;gap:16px}
.form-card label{display:grid;gap:7px}
.form-card label>span{
  font:600 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#9db0a7;
  display:flex;align-items:center;gap:8px;
}
.form-card label>span i{
  font-style:normal;font-size:10px;letter-spacing:.08em;color:var(--green-dim);
}
.form-card input,.form-card select,.form-card textarea{
  width:100%;padding:11px 13px;border-radius:9px;
  border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.03);
  color:var(--text);font:400 14.5px Inter,ui-sans-serif,system-ui,sans-serif;
  transition:border-color .15s ease,background .15s ease;
}
.form-card textarea{resize:vertical;min-height:96px;line-height:1.55}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{
  outline:none;border-color:rgba(85,224,166,.55);background:rgba(85,224,166,.05);
}
.form-card input::placeholder,.form-card textarea::placeholder{color:#5f6f68}
.form-submit{width:100%;min-height:44px;margin-top:4px;font-size:15px}
.form-note{color:var(--muted-2);font-size:12.5px;line-height:1.55;margin:2px 0 0;text-align:center}
.form-errors{
  border:1px solid rgba(220,90,90,.35);background:rgba(220,90,90,.07);
  border-radius:10px;padding:14px 16px;margin-bottom:20px;color:#e8a49c;font-size:13.5px;
}
.form-errors strong{display:block;margin-bottom:6px;color:#f0bdb6}
.form-errors ul{margin:0;padding-left:18px;line-height:1.7}
/* Honeypot: off-screen, not display:none, so bots still fill it. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-done{text-align:center;padding:14px 0 6px}
.form-done .ico{
  width:52px;height:52px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;
  background:rgba(85,224,166,.12);border:1px solid rgba(85,224,166,.35);
}
.form-done .ico svg{width:24px;height:24px;stroke:var(--green);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.form-done h3{margin-bottom:10px}
.form-done p{color:var(--muted);font-size:14.5px;line-height:1.65;margin:0 0 22px}

/* ═══════════════ 404 ═══════════════ */
.notfound .nf-links{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:34px 0 30px;
}
.notfound .nf-links .card{padding:20px}
.notfound .nf-links h3{font-size:17px;margin-bottom:7px}
.notfound .nf-links p{font-size:13.5px}
.nf-path{
  font:600 13px var(--mono);color:var(--lime);
  background:rgba(183,255,56,.08);border:1px solid rgba(183,255,56,.2);
  padding:2px 7px;border-radius:5px;
}
@media(max-width:980px){.notfound .nf-links{grid-template-columns:1fr 1fr}}
@media(max-width:760px){
  .notfound .nf-links{grid-template-columns:1fr}
  .form-card{position:static;padding:24px 20px 20px}
}

/* Sign-in: the address form sits inline in a split rather than as a sticky
   sidebar card, so it opts out of the demo form's sticky positioning. */
.signin-card{position:static;margin-top:24px;padding:24px 24px 20px}
.inline-code{
  font:600 13px var(--mono);color:var(--green);
  background:rgba(85,224,166,.08);border:1px solid rgba(85,224,166,.2);
  border-radius:5px;padding:2px 7px;
}

/* ═══════════════════════ documentation ═══════════════════════
   Three columns on desktop: nav, content, page TOC. Every colour, font and
   radius below is an existing site token, so the docs read as the same
   product rather than a themed subdomain. */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.docs-shell{
  display:grid;grid-template-columns:250px minmax(0,1fr) 210px;gap:44px;
  width:min(1320px,calc(100% - 48px));margin:0 auto;padding:40px 0 88px;
  align-items:start;
}
/* Three columns need more room than the marketing pages' 1180px measure, so
   the header gets the same wider gutter here — otherwise the brand mark sits
   70px inside the sidebar it is supposed to line up with. */
.docs-page nav.site-nav .wrap,
.docs-page footer .wrap{width:min(1320px,calc(100% - 48px))}

/* sidebar */
.docs-side{position:sticky;top:90px;max-height:calc(100vh - 120px);overflow-y:auto;padding-right:6px}
.docs-search{position:relative;margin-bottom:24px}
.docs-search svg{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;stroke:var(--muted-2);fill:none;stroke-width:1.8;pointer-events:none;
}
.docs-search input{
  width:100%;padding:9px 12px 9px 33px;border-radius:9px;
  border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.03);
  color:var(--text);font:400 13.5px Inter,ui-sans-serif,system-ui,sans-serif;
}
.docs-search input:focus{outline:none;border-color:rgba(85,224,166,.55);background:rgba(85,224,166,.05)}
.docs-group{display:flex;flex-direction:column;gap:2px;margin-bottom:24px}
.docs-group-label{
  font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:#6d7f77;margin-bottom:8px;
}
.docs-group a{
  color:var(--muted);font-size:13.8px;line-height:1.45;padding:6px 10px;
  border-radius:7px;border-left:2px solid transparent;
}
.docs-group a:hover{color:#fff;background:rgba(255,255,255,.035)}
.docs-group a.on{
  color:var(--green);background:rgba(85,224,166,.08);border-left-color:var(--green);
}

/* content */
.docs-body{min-width:0}
.docs-crumbs{
  display:flex;align-items:center;gap:9px;margin-bottom:14px;
  font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#6d7f77;
}
.docs-crumbs a{color:var(--green-dim)}
.docs-crumbs a:hover{color:var(--green)}
.docs-body h1{font-size:clamp(31px,3.8vw,42px);line-height:1.1;margin-bottom:12px}
.docs-lead{color:var(--muted);font-size:17px;line-height:1.62;margin:0 0 34px;max-width:70ch}

.docs-content{max-width:76ch;color:#c6d2cc;font-size:15.2px;line-height:1.75}
.docs-content h2{
  font-family:var(--serif);font-weight:500;font-size:26px;letter-spacing:-.02em;
  margin:44px 0 14px;padding-top:10px;border-top:1px solid rgba(255,255,255,.07);color:var(--text);
}
.docs-content h3{
  font-family:var(--serif);font-weight:500;font-size:19.5px;letter-spacing:-.015em;
  margin:30px 0 10px;color:var(--text);
}
.docs-content h2 a.header-anchor,.docs-content h3 a.header-anchor{
  color:var(--green-dim);margin-left:9px;opacity:0;font-size:.72em;transition:opacity .15s ease;
}
.docs-content h2:hover a.header-anchor,.docs-content h3:hover a.header-anchor{opacity:1}
.docs-content p{margin:0 0 16px}
.docs-content ul,.docs-content ol{margin:0 0 18px;padding-left:20px}
.docs-content li{margin-bottom:7px}
.docs-content li::marker{color:var(--green-dim)}
.docs-content a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.docs-content a:hover{color:var(--lime)}
.docs-content strong{color:var(--text);font-weight:650}
.docs-content code{
  font:600 13px var(--mono);color:var(--green);
  background:rgba(85,224,166,.08);border:1px solid rgba(85,224,166,.18);
  border-radius:5px;padding:1px 6px;
}
.docs-content pre{
  background:#020605;border:1px solid var(--line);border-radius:11px;
  padding:16px 18px;overflow-x:auto;margin:0 0 20px;
}
.docs-content pre code{
  background:none;border:0;padding:0;color:#b9c8c1;font-weight:400;font-size:12.9px;line-height:1.75;
}
.docs-content blockquote{
  margin:0 0 20px;padding:2px 0 2px 16px;border-left:2px solid var(--green-dim);color:var(--muted);
}
.docs-content table{
  width:100%;border-collapse:collapse;margin:0 0 22px;font-size:14px;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;
}
.docs-content th{
  text-align:left;padding:11px 14px;background:rgba(255,255,255,.03);
  color:#9db0a7;font:600 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;
}
.docs-content td{padding:11px 14px;border-top:1px solid rgba(255,255,255,.07);color:var(--muted)}
.docs-content td strong{color:var(--text)}
.docs-content hr{border:0;border-top:1px solid rgba(255,255,255,.08);margin:34px 0}
.docs-content img{max-width:100%;height:auto;border-radius:10px;border:1px solid var(--line)}

/* syntax highlighting, tuned to the site palette */
.hljs-comment,.hljs-quote{color:#5f7269;font-style:italic}
.hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#79f0bb}
.hljs-string,.hljs-attr{color:var(--lime)}
.hljs-number,.hljs-built_in{color:#9bd7ff}
.hljs-title,.hljs-name,.hljs-section{color:var(--green)}
.hljs-attribute,.hljs-variable,.hljs-template-variable{color:#d6e2dc}
.hljs-meta{color:#8fa39a}

/* callouts */
.callout-box{
  border:1px solid var(--line);border-left-width:3px;border-radius:10px;
  padding:15px 18px;margin:0 0 20px;background:rgba(255,255,255,.02);
}
.callout-box strong{display:block;margin-bottom:5px;font-size:13.5px;letter-spacing:.01em}
.callout-box p{margin:0 0 8px}
.callout-box p:last-child{margin-bottom:0}
.callout-box--note{border-left-color:#6d7f77}
.callout-box--info{border-left-color:var(--teal)}
.callout-box--info strong{color:var(--teal)}
.callout-box--tip{border-left-color:var(--green)}
.callout-box--tip strong{color:var(--green)}
.callout-box--check{border-left-color:var(--lime)}
.callout-box--check strong{color:var(--lime)}
.callout-box--warning{border-left-color:#e0a86f;background:rgba(224,168,111,.05)}
.callout-box--warning strong{color:#e0a86f}

/* pager */
.docs-pager{
  display:flex;justify-content:space-between;gap:16px;margin-top:52px;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.08);
}
.docs-pager-link{
  display:flex;flex-direction:column;gap:4px;padding:14px 18px;
  border:1px solid var(--line);border-radius:11px;max-width:48%;transition:.16s ease;
}
.docs-pager-link:hover{border-color:#2b4a3c;background:rgba(255,255,255,.02)}
.docs-pager-link small{font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#6d7f77}
.docs-pager-link span{color:var(--text);font-size:14.5px}
.docs-pager-link--next{text-align:right;margin-left:auto}

/* page TOC */
.docs-toc{position:sticky;top:90px;display:flex;flex-direction:column;gap:7px}
.docs-toc-title{
  font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:#6d7f77;margin-bottom:4px;
}
.docs-toc a{
  color:var(--muted-2);font-size:12.8px;line-height:1.45;
  border-left:1px solid rgba(255,255,255,.1);padding:3px 0 3px 11px;
}
.docs-toc a:hover{color:var(--green);border-left-color:var(--green)}
.docs-toc a.lvl3{padding-left:22px;font-size:12.2px}
.docs-help{
  margin-top:26px;padding:16px;border:1px solid var(--line);border-radius:11px;
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;
}
.docs-help strong{font-size:13.5px}
.docs-help span{color:var(--muted-2);font-size:12.3px;line-height:1.5}
.docs-help .btn{min-height:32px;font-size:12.5px;padding:0 12px}

/* search results */
.docs-results{display:flex;flex-direction:column;gap:12px;max-width:76ch}
.docs-result{border:1px solid var(--line);border-radius:12px;padding:18px 20px;transition:.16s ease;display:block}
.docs-result:hover{border-color:#2b4a3c;background:rgba(255,255,255,.02)}
.docs-result strong{font-size:16px;color:var(--text);margin-right:10px}
.docs-result small{font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--green-dim)}
.docs-result p{color:var(--muted);font-size:13.8px;line-height:1.6;margin:8px 0 0}

@media(max-width:1180px){
  .docs-shell{grid-template-columns:230px minmax(0,1fr);gap:34px}
  .docs-toc{display:none}
}
@media(max-width:860px){
  .docs-shell{grid-template-columns:1fr;gap:26px;width:min(100% - 28px,1320px)}
  /* Stacked, the full contents list runs past 900px — a phone visitor scrolled
     a screen and a half of links before reaching the article. Cap it into a
     scrollable panel so the page still opens on the content. */
  .docs-side{
    position:static;max-height:44vh;overflow-y:auto;
    border:1px solid rgba(255,255,255,.08);border-radius:12px;
    background:rgba(255,255,255,.02);padding:16px 14px;
  }
  .docs-group{margin-bottom:18px}
  .docs-group:last-child{margin-bottom:0}
  .docs-pager-link{max-width:none;flex:1}
}

/* ═══════════════ feature grid ═══════════════
   Outcome-led cards on the landing page. Each is a link into the docs, so the
   marketing claim and its explanation are one click apart. */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature{
  display:flex;flex-direction:column;gap:9px;
  border:1px solid var(--line);border-radius:14px;padding:24px;
  background:linear-gradient(180deg,var(--panel),#070d0b);transition:.18s ease;
}
.feature:hover{border-color:#2b4a3c;transform:translateY(-2px)}
.feature-tag{
  font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);
}
.feature h3{
  font-family:var(--serif);font-weight:500;font-size:19.5px;letter-spacing:-.02em;
  margin:0;color:var(--text);line-height:1.25;
}
.feature p{color:var(--muted);font-size:14.3px;line-height:1.62;margin:0;flex:1}
.feature em{
  font-style:normal;font-size:12.5px;color:var(--green-dim);
  font-weight:600;margin-top:4px;transition:color .16s ease;
}
.feature:hover em{color:var(--green)}
.feature--wide{grid-column:1/-1;background:linear-gradient(135deg,rgba(85,224,166,.07),rgba(85,224,166,.015))}
.feature--wide p{max-width:88ch}

@media(max-width:980px){.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.feature-grid{grid-template-columns:1fr}}