/* ==========================================================================
   CAMPLAX — "Paper"
   Pure white canvas, near-black type, one blue held in reserve.

   Three rules carry the whole system:
   1. Nothing is separated by a drawn black line. Structure comes from white
      cards on white, defined by a semi-transparent hairline plus a two-layer
      shadow — a border alone reads flat, a shadow alone reads muddy.
   2. Radius is either a rounded rectangle (11 / 16 / 24 / 30) or a full pill.
      Pills are for labels, chips and nav items. Never for a block of content.
   3. Child radius never exceeds its parent's, so nested curves stay concentric.

   Contrast: muted text sits at #6e6e73 — 4.9:1 on white, which clears AA.
   Every :hover and :focus state gains contrast against rest; none lose it.
   ========================================================================== */

:root{
  --canvas:#fff;
  --paper:#fff;
  --ink:#0a0a0a;             /* headings — near-black is softer than #000 */
  --ink-2:#3d3d42;           /* body copy */
  --ink-3:#6e6e73;           /* muted, meta, captions. 4.9:1 on white */
  --surface:#f5f5f5;         /* quiet fill: chips, inactive tabs, inputs */
  --surface-2:#ebebeb;

  /* semi-transparent, so an edge reads correctly on white or on a fill */
  --edge:rgba(0,0,0,.08);
  --edge-2:rgba(0,0,0,.15);
  --hairline:var(--edge);

  /* the inverted side — used for the showcase, the terminal and the lead plan */
  --night:#0a0a0a;
  --night-2:#161616;
  --night-3:#1f1f1f;
  --night-line:rgba(255,255,255,.1);
  --night-ink:#f2f2f2;
  --night-ink-2:#8a8a90;

  --signal:#0f5bff;
  --ok:#12a150;

  /* compatibility aliases for inline styles left behind by older systems.
     without these, `border:1px solid var(--line-2)` resolves to currentColor
     and reinstates a black rule — the exact thing this system removes. */
  --line:var(--edge);
  --line-2:var(--edge);
  --body:var(--ink-2);
  --muted:var(--ink-3);
  --tint:var(--surface);
  --blue:var(--signal);

  --font:"Onest","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* type — headings run at 500. the weight is deliberately light for the size;
     hierarchy comes from scale and colour, not from bolding everything. */
  --t-caption:13px;   --lh-caption:1.5;   --tr-caption:-.002em;
  --t-small:14.5px;   --lh-small:1.55;    --tr-small:-.008em;
  --t-body:16.5px;    --lh-body:1.6;      --tr-body:-.011em;
  --t-sub:19px;       --lh-sub:1.5;       --tr-sub:-.018em;
  --t-h3:clamp(22px,2.4vw,28px);  --lh-h3:1.25;  --tr-h3:-.022em;
  --t-h2:clamp(27px,3.4vw,38px);  --lh-h2:1.18;  --tr-h2:-.028em;
  --t-h1:clamp(32px,4.2vw,46px);  --lh-h1:1.12;  --tr-h1:-.03em;
  --t-display:clamp(36px,4.9vw,62px); --lh-display:1.06; --tr-display:-.032em;

  --r-btn:11px;
  --r-sm:10px;
  --r:14px;
  --r-lg:18px;
  --r-xl:24px;
  --r-2xl:30px;
  --pill:999px;

  /* one tight contact shadow + one wide ambient. a single blur is the tell */
  --shadow-s:0 1px 2px rgba(0,0,0,.05),0 1px 1px rgba(0,0,0,.03);
  --shadow-m:0 1px 2px rgba(0,0,0,.05),0 8px 20px -8px rgba(0,0,0,.09);
  --shadow-l:0 1px 3px rgba(0,0,0,.06),0 22px 50px -22px rgba(0,0,0,.2);
  --shadow-night:0 2px 4px rgba(0,0,0,.28),0 32px 70px -30px rgba(0,0,0,.55);

  --max:1200px;
  --gap:clamp(72px,8vw,116px);
  --ease:cubic-bezier(.2,.8,.2,1);

  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 2v20M2 12h20M4.9 4.9l14.2 14.2M19.1 4.9L4.9 19.1'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{min-width:320px;margin:0;padding-bottom:96px;background:var(--canvas);color:var(--ink-2);
  font-family:var(--font);font-size:var(--t-small);line-height:var(--lh-small);
  letter-spacing:var(--tr-small);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
svg{display:block}
::selection{background:var(--ink);color:#fff}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:4px}
.wrap{width:min(var(--max),calc(100% - 40px));margin:0 auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* tabular figures only where numbers line up against each other, not in prose */
.nums{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ type */
.display{color:var(--ink);font-size:var(--t-display);font-weight:500;
  line-height:var(--lh-display);letter-spacing:var(--tr-display);text-wrap:balance}
h1{color:var(--ink);font-size:var(--t-h1);font-weight:500;line-height:var(--lh-h1);
  letter-spacing:var(--tr-h1);text-wrap:balance}
h2{color:var(--ink);font-size:var(--t-h2);font-weight:500;line-height:var(--lh-h2);
  letter-spacing:var(--tr-h2);text-wrap:balance}
h3{color:var(--ink);font-size:var(--t-sub);font-weight:500;line-height:1.35;letter-spacing:-.018em}
h4{color:var(--ink);font-size:var(--t-small);font-weight:600;letter-spacing:var(--tr-small)}
.big{color:var(--ink);font-size:var(--t-h2);font-weight:500;line-height:var(--lh-h2);
  letter-spacing:var(--tr-h2)}
.sub{font-size:var(--t-sub);font-weight:400;line-height:var(--lh-sub);letter-spacing:var(--tr-sub)}
.body{font-size:var(--t-body);font-weight:400;line-height:var(--lh-body);letter-spacing:var(--tr-body)}
.cap{font-size:var(--t-caption);line-height:var(--lh-caption);letter-spacing:var(--tr-caption)}
.measure{max-width:62ch}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:-.01em}
.muted{color:var(--ink-3)}
/* section eyebrow. the only place the blue appears in running content. */
.mark{display:block;color:var(--signal);font-size:var(--t-caption);font-weight:500;
  letter-spacing:.02em}

/* --------------------------------------------------------------- buttons */
/* rounded rectangles, never pills — a pill button next to pill nav chips
   makes everything read as the same rank. trailing padding runs 2px tight
   when a glyph sits on the right, because optical beats geometric there. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 18px;
  border:1px solid transparent;border-radius:var(--r-btn);background:var(--ink);color:#fff;
  font-size:15px;font-weight:500;letter-spacing:-.012em;line-height:1.25;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),
  box-shadow .18s var(--ease),transform .12s var(--ease)}
.btn:has(svg:last-child){padding-right:16px}
.btn:hover{background:#000;box-shadow:var(--shadow-m)}
.btn:active{transform:translateY(.5px)}
.btn--fill{background:var(--ink);color:#fff;box-shadow:var(--shadow-s)}
.btn--soft{background:var(--paper);border-color:var(--edge);color:var(--ink);
  box-shadow:var(--shadow-s)}
.btn--soft:hover{background:var(--paper);border-color:var(--edge-2);box-shadow:var(--shadow-m)}
.btn--ghost{background:var(--surface);color:var(--ink)}
.btn--ghost:hover{background:var(--surface-2);box-shadow:none}
.btn--sm{padding:8px 13px;font-size:13.5px}
.btn--lg{padding:13px 22px;font-size:16px}
.btn--block{width:100%}
.btn svg{transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(2px)}
.tlink{display:inline-flex;align-items:center;gap:7px;color:var(--ink);font-size:var(--t-small);
  font-weight:500;letter-spacing:-.012em;transition:color .18s var(--ease)}
.tlink svg{transition:transform .25s var(--ease)}
.tlink:hover{color:var(--signal)}
.tlink:hover svg{transform:translateX(3px)}

/* ------------------------------------------------------------------- nav */
/* three chips floating on the canvas — no bar, no rule, no fill behind them */
.nav{position:sticky;top:0;z-index:60}
.nav::before{content:"";position:absolute;inset:0 0 -24px;z-index:-1;pointer-events:none;
  background:linear-gradient(#fff 62%,rgba(255,255,255,0));opacity:0;
  transition:opacity .3s var(--ease)}
.nav.stuck::before{opacity:1}
/* panels anchor to the bar, not to their trigger — a trigger near the left
   edge would otherwise push an 880px sheet off the page */
.nav-in{position:relative;display:flex;align-items:center;gap:14px;padding:16px 0}

.brand{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;
  border:1px solid var(--edge);border-radius:var(--r-btn);background:var(--paper);
  color:var(--ink);font-size:15px;font-weight:600;letter-spacing:-.024em;line-height:1;
  box-shadow:var(--shadow-s);transition:box-shadow .2s var(--ease),border-color .2s var(--ease)}
.brand:hover{border-color:var(--edge-2);box-shadow:var(--shadow-m)}
.brand i{width:14px;height:14px;flex:0 0 auto;background:currentColor;
  -webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat;
  transition:transform .5s var(--ease)}
.brand:hover i{transform:rotate(90deg)}

/* centre group: one container, pills inside it, radius nested one step down */
.menu{position:absolute;left:50%;display:flex;align-items:center;gap:2px;padding:5px;
  border:1px solid var(--edge);border-radius:var(--r);background:var(--paper);
  box-shadow:var(--shadow-s);transform:translateX(-50%)}
.menu > a,.mi > button{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;
  border:0;border-radius:9px;background:transparent;color:var(--ink-3);
  font-size:14.5px;font-weight:400;letter-spacing:-.012em;cursor:pointer;
  transition:background .16s var(--ease),color .16s var(--ease)}
.menu > a:hover,.mi > button:hover,.mi.open > button{background:var(--surface);color:var(--ink)}
.mi > button svg{opacity:.45;transition:transform .25s var(--ease)}
.mi.open > button svg{transform:rotate(180deg)}

.nav-act{display:flex;align-items:center;gap:8px;margin-left:auto}
.nav-act .plain{padding:8px 12px;border-radius:9px;color:var(--ink-3);font-size:14.5px;
  font-weight:400;letter-spacing:-.012em;
  transition:background .16s var(--ease),color .16s var(--ease)}
.nav-act .plain:hover{background:var(--surface);color:var(--ink)}
.burger{display:none;align-items:center;justify-content:center;width:38px;height:38px;padding:0;
  border:1px solid var(--edge);border-radius:var(--r-btn);background:var(--paper);color:var(--ink);
  box-shadow:var(--shadow-s);cursor:pointer;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.burger:hover{border-color:var(--edge-2);box-shadow:var(--shadow-m)}

/* mega panels — a floating sheet. columns divided by space, not by rules. */
.mega{position:absolute;top:calc(100% + 10px);left:50%;z-index:40;display:grid;gap:6px;
  padding:10px;border:1px solid var(--edge);border-radius:var(--r-xl);background:var(--paper);
  box-shadow:var(--shadow-l);opacity:0;visibility:hidden;
  transform:translate(-50%,-6px) scale(.985);transform-origin:top center;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
.mi.open .mega{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}
.mega--3{grid-template-columns:repeat(3,minmax(0,1fr));width:min(880px,92vw)}
.mega--2{grid-template-columns:repeat(2,minmax(0,1fr));width:min(620px,92vw)}
.mcol{padding:14px 10px}
.mcol h5{margin:0 0 10px;padding-left:12px;color:var(--ink-3);font-size:11.5px;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase}
/* every dropdown row carries a monochrome line glyph — no colour, no emoji */
.mlink{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:start;
  padding:10px 12px;border-radius:var(--r);transition:background .16s var(--ease)}
.mlink:hover{background:var(--surface)}
.mi-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:var(--surface);color:var(--ink-3);
  transition:background .16s var(--ease),color .16s var(--ease)}
.mlink:hover .mi-ico{background:var(--ink);color:#fff}
.mi-ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.mlink strong{display:block;color:var(--ink);font-size:14.5px;font-weight:500;line-height:1.35;
  letter-spacing:-.016em}
.mlink small{display:block;margin-top:2px;color:var(--ink-3);font-size:12.5px;line-height:1.45}
.mrail{display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:20px;
  border-radius:var(--r-lg);background:var(--surface)}
.mrail h4{color:var(--ink);font-size:17px;font-weight:500;line-height:1.3;letter-spacing:-.022em}
.mrail p{margin-top:8px;color:var(--ink-3);font-size:13.5px;line-height:1.5}

.drawer{display:none;position:fixed;inset:0;z-index:70;overflow-y:auto;padding:16px 16px 90px;
  background:var(--paper)}
.drawer.open{display:block}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.drawer h5{margin:24px 0 4px;padding-left:12px;color:var(--ink-3);font-size:11.5px;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase}
.drawer .mlink{padding:13px 12px}
.drawer .mlink strong{font-size:16px}
.drawer .mlink:active{background:var(--surface)}

/* ------------------------------------------------------------------ hero */
/* centred, and deliberately narrower than it could be. the headline stopping
   at ~15ch is what keeps it from reading like a template. */
.hero{position:relative;padding:clamp(60px,9vw,110px) 0 0;text-align:center}
.hero .display{margin:0 auto;max-width:15ch}
.hero-sub{margin:22px auto 0;max-width:50ch;color:var(--ink-3);font-size:var(--t-body);
  font-weight:400;line-height:1.6;letter-spacing:-.008em;text-wrap:pretty}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:32px}
.hero-note{margin-top:20px;color:var(--ink-3);font-size:13px;opacity:.9}

/* ------------------------------------------------------- showcase (dark) */
/* the inversion, and the only high-contrast block above the fold. an all-white
   page with no dark anchor is what makes a layout read washed out. */
.showcase{position:relative;margin:clamp(48px,6vw,84px) auto 0;
  width:min(1320px,calc(100% - 32px));border-radius:clamp(var(--r-xl),2.6vw,var(--r-2xl));
  background:var(--night);box-shadow:var(--shadow-night);color:var(--night-ink);overflow:hidden}
.showcase-in{position:relative;display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1fr) minmax(0,.94fr);
  gap:clamp(24px,4vw,72px);align-items:center;
  padding:clamp(30px,4.4vw,62px) clamp(24px,4vw,58px)}
.showcase-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.showcase-wires path{fill:none;stroke:rgba(255,255,255,.15);stroke-width:1;
  stroke-dasharray:1;stroke-dashoffset:1;animation:trace 1.5s var(--ease) .35s forwards}
@keyframes trace{to{stroke-dashoffset:0}}
.showcase-wires .flow{stroke:var(--signal);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:.06 .94;stroke-dashoffset:1;opacity:.9;
  animation:flow 3.4s linear infinite var(--lag,0s)}
@keyframes flow{to{stroke-dashoffset:0}}

.sc-card{padding:18px;border:1px solid var(--night-line);border-radius:var(--r-lg);
  background:var(--night-2)}
.sc-card h5{margin:0 0 14px;color:var(--night-ink);font-size:12.5px;font-weight:500;
  letter-spacing:-.008em}
.sc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;
  border:1px solid var(--night-line);border-radius:11px;background:var(--night-3);
  transition:border-color .2s var(--ease)}
.sc-row + .sc-row{margin-top:8px}
.sc-row:hover{border-color:rgba(255,255,255,.22)}
.sc-row b{display:block;font-size:13px;font-weight:500;letter-spacing:-.012em}
.sc-row small{display:block;margin-top:2px;color:var(--night-ink-2);font-size:11.5px}
.sc-dot{width:6px;height:6px;flex:0 0 auto;border-radius:var(--pill);background:#38d178;
  box-shadow:0 0 0 3px rgba(56,209,120,.15)}
.sc-flow{display:grid;gap:clamp(14px,1.8vw,22px)}
.sc-node{padding:16px 18px;border:1px solid var(--night-line);border-radius:var(--r);
  background:var(--night-2);text-align:center;
  transition:border-color .25s var(--ease),background .25s var(--ease)}
.sc-node:hover{border-color:rgba(255,255,255,.22);background:var(--night-3)}
.sc-node b{display:block;font-size:13.5px;font-weight:500;letter-spacing:-.014em}
.sc-node small{display:block;margin-top:3px;color:var(--night-ink-2);font-size:11.5px}
.sc-out{position:relative;padding:18px;border:1px solid rgba(120,150,255,.3);
  border-radius:var(--r-lg);background:linear-gradient(180deg,#17171b,#121215);
  box-shadow:0 0 0 1px rgba(15,91,255,.08),0 0 60px -14px rgba(15,91,255,.45)}
.sc-out-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:14px}
.sc-out-head b{font-size:12.5px;font-weight:500;letter-spacing:-.008em}
.sc-tag{padding:4px 10px;border:1px solid var(--night-line);border-radius:var(--pill);
  color:var(--night-ink-2);font-size:11px}
.sc-body{padding:16px;border:1px solid var(--night-line);border-radius:12px;background:var(--night)}
.sc-body .url{font-size:13.5px;font-weight:500;letter-spacing:-.014em}
.sc-body ul{display:grid;gap:7px;margin:12px 0 0;padding:0;list-style:none;
  color:var(--night-ink-2);font-size:11.5px;line-height:1.5}
.sc-body li{display:flex;justify-content:space-between;gap:12px}
.sc-body li span:last-child{color:#c9c9cf}
.sc-body p{margin-top:14px;padding-top:12px;border-top:1px solid var(--night-line);
  color:var(--night-ink);font-size:12px;line-height:1.5}
.sc-tour{position:absolute;right:clamp(18px,2.2vw,26px);bottom:clamp(16px,2vw,24px);z-index:3;
  display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 8px;
  border:1px solid var(--night-line);border-radius:var(--pill);background:rgba(255,255,255,.06);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--night-ink);
  font-size:12.5px;font-weight:400;letter-spacing:-.008em;cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease)}
.sc-tour:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.26)}
.sc-tour i{display:grid;place-items:center;width:22px;height:22px;border-radius:var(--pill);
  background:#fff;color:var(--night)}
.sc-tour svg{width:9px;height:9px;margin-left:1px;fill:currentColor}

/* ----------------------------------------------------------------- trust */
.trust{margin-top:clamp(40px,5vw,64px);text-align:center}
.trust p{color:var(--ink-3);font-size:12px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase}
.trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.trust-row span{padding:8px 15px;border:1px solid var(--edge);border-radius:var(--pill);
  background:var(--paper);color:var(--ink-2);font-size:13.5px;font-weight:400;
  letter-spacing:-.01em;box-shadow:var(--shadow-s)}

/* -------------------------------------------------------------- sections */
section{padding:var(--gap) 0}
/* rhythm without grey bands: the canvas stays white and the cards do the work */
.band{background:transparent}
/* every section header is centred — same axis as the hero, all the way down */
.head{max-width:660px;margin:0 auto clamp(32px,4vw,52px);text-align:center}
.head h2{margin-top:12px}
.head p{margin-top:16px;color:var(--ink-3);font-size:var(--t-body);line-height:var(--lh-body);
  letter-spacing:var(--tr-body)}
.head--mid{text-align:center}

/* metrics — typographic, no boxes. weight and colour carry the hierarchy. */
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;
  padding:clamp(26px,3vw,38px) clamp(24px,3vw,36px);border:1px solid var(--edge);
  border-radius:var(--r-xl);background:var(--paper);box-shadow:var(--shadow-m)}
.metric strong{display:block;color:var(--ink);font-size:clamp(26px,3vw,34px);font-weight:500;
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.metric span{display:block;margin-top:9px;color:var(--ink-3);font-size:13px;line-height:1.45}

/* ------------------------------------------------------------ card types */
/* one card recipe reused everywhere: white, hairline, layered shadow. */
.card,.pcard,.panel,.feat > div,.crop,.code,.qa,.plan,.reader,.row{
  border:1px solid var(--edge);border-radius:var(--r-xl);background:var(--paper);
  box-shadow:var(--shadow-s)}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{overflow:hidden;transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.card:hover{box-shadow:var(--shadow-m);transform:translateY(-2px)}
.card .art{background:var(--surface)}
.card .art svg{width:100%;height:auto}
.card .mark{margin:20px 20px 0}
.card h3{margin:6px 20px 0;font-size:16.5px}
.card p{margin:8px 20px 20px;color:var(--ink-3);font-size:13.5px;line-height:1.55}

/* ----------------------------------------------------------------- bento */
/* six columns, cards claim two/three/four of them. the rule that keeps a wide
   card from going hollow: text pins to the top, artwork takes `margin-top:auto`
   and absorbs the leftover height. a card never has to invent filler. */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.bx{display:flex;flex-direction:column;grid-column:span 2;padding:26px;
  border:1px solid var(--edge);border-radius:var(--r-xl);background:var(--paper);
  box-shadow:var(--shadow-s);
  transition:box-shadow .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.bx:hover{border-color:var(--edge-2);box-shadow:var(--shadow-m);transform:translateY(-2px)}
.bx--w3{grid-column:span 3}
.bx--w4{grid-column:span 4}
.bx--w6{grid-column:span 6}
.bx h3{font-size:17px}
.bx p{margin-top:8px;color:var(--ink-3);font-size:13.5px;line-height:1.55;max-width:46ch}
.bx .spec{align-self:flex-start;margin-top:14px;padding:5px 11px;border-radius:var(--pill);
  background:var(--surface);color:var(--ink-3);font-size:11.5px;white-space:nowrap}
/* artwork slot — soaks up the remaining height so wide cards never go empty */
.bx-art{display:flex;align-items:flex-end;margin:22px -6px -6px;min-height:96px;flex:1}
.bx-art .fig{width:100%;height:auto}
.bx--dark{border-color:transparent;background:var(--night);color:var(--night-ink);
  box-shadow:var(--shadow-night)}
.bx--dark:hover{border-color:transparent;box-shadow:var(--shadow-night)}
.bx--dark h3{color:var(--night-ink)}
.bx--dark p{color:var(--night-ink-2)}
.bx--dark .bx-ico{background:rgba(255,255,255,.09);color:var(--night-ink)}
.bx--dark .spec{background:rgba(255,255,255,.09);color:var(--night-ink-2)}

/* ------------------------------------------------------ dithered artwork */
/* the halftone dissolve from the reference images, built rather than shipped:
   a soft two-tone gradient with a dot grid punched through the transition. */
.dither{position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:linear-gradient(140deg,var(--d1,#cfe9ff) 0%,var(--d2,#8fd4ff) 52%,var(--d3,#b9c8ff) 100%)}
.dither::before,.dither::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at center,#fff 44%,transparent 46%);
  background-size:5px 5px}
/* two passes at different scales: the coarse grid dissolves, the fine one
   feathers the edge, which is what stops it reading as a flat screen-door */
.dither::before{
  -webkit-mask-image:linear-gradient(140deg,#fff 6%,rgba(255,255,255,.55) 34%,transparent 56%);
  mask-image:linear-gradient(140deg,#fff 6%,rgba(255,255,255,.55) 34%,transparent 56%)}
.dither::after{background-size:3px 3px;
  -webkit-mask-image:linear-gradient(140deg,transparent 46%,rgba(255,255,255,.5) 72%,#fff 100%);
  mask-image:linear-gradient(140deg,transparent 46%,rgba(255,255,255,.5) 72%,#fff 100%)}
.dither--mint{--d1:#d8f5c8;--d2:#7fd6b0;--d3:#a8e6d0}
.dither--rose{--d1:#f4d9f7;--d2:#9fb4ff;--d3:#c9e8d2}
.dither--sky {--d1:#d5e6ff;--d2:#7fc9f5;--d3:#a9b6f7}
.bx .dither{margin:22px -26px -26px;min-height:150px;flex:1;
  border-radius:0 0 calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px)}

/* readers — three cards, not three wide rows */
.readers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.reader{display:block;padding:26px}
.reader p{margin-top:10px;color:var(--ink-3);font-size:13.5px;line-height:1.6}
.checks{display:grid;gap:10px;margin:16px 0 0;padding:0;list-style:none}
.checks li{display:grid;grid-template-columns:16px 1fr;gap:10px;align-items:start;
  color:var(--ink-3);font-size:13.5px;line-height:1.55}
.checks li::before{content:"";width:14px;height:14px;margin-top:4px;border-radius:var(--pill);
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--edge)}
.checks b{color:var(--ink);font-weight:500}

/* ------------------------------------------------------------- terminal */
/* the code block is inverted, matching the showcase. it is the product's
   voice, and reversing it out is cheaper than decorating it. */
.code{overflow:hidden;border-color:transparent;background:var(--night);
  box-shadow:var(--shadow-night)}
.code-tabs{display:flex;gap:4px;padding:12px 12px 0}
.code-tab{padding:7px 13px;border:0;border-radius:9px;background:transparent;
  color:var(--night-ink-2);font-family:var(--font);font-size:12.5px;font-weight:400;
  letter-spacing:-.01em;cursor:pointer;
  transition:background .16s var(--ease),color .16s var(--ease)}
.code-tab:hover{color:var(--night-ink)}
.code-tab[aria-selected=true]{background:rgba(255,255,255,.1);color:var(--night-ink)}
.code-body{padding:18px 22px 24px;color:var(--night-ink);font-family:var(--mono);font-size:12.5px;
  line-height:2}
.code-body[hidden]{display:none}
.code-body div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-p{color:#6b6b72}   /* prompt */
.c-c{color:#6b6b72}   /* comment / dim */
.c-ok{color:#38d178}  /* success tick */
.c-w{color:var(--night-ink)}  /* the command you typed */
.c-u{color:#7fa4ff}   /* url */
.c-b{color:#7fa4ff}

/* --------------------------------------------------------- data as cards */
/* what used to be a table. same information, no row list — each record is a
   small card with its fields labelled, so it reads on a phone too. */
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.dcard{padding:20px;border:1px solid var(--edge);border-radius:var(--r-lg);background:var(--paper);
  box-shadow:var(--shadow-s);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.dcard:hover{border-color:var(--edge-2);box-shadow:var(--shadow-m)}
.dcard > b{display:block;color:var(--ink);font-size:15px;font-weight:500;line-height:1.35;
  letter-spacing:-.016em}
.dcard dl{display:grid;gap:10px;margin:14px 0 0}
.dcard dt{color:var(--ink-3);font-size:10.5px;font-weight:500;letter-spacing:.07em;
  text-transform:uppercase}
.dcard dd{margin:3px 0 0;color:var(--ink-2);font-size:13.5px;line-height:1.5}

/* ---------------------------------------------------------------- table */
.tbl-wrap{overflow-x:auto;border:1px solid var(--edge);border-radius:var(--r-xl);
  background:var(--paper);box-shadow:var(--shadow-s)}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{padding:16px 20px;color:var(--ink-3);font-size:11.5px;font-weight:500;
  letter-spacing:.07em;text-align:left;text-transform:uppercase;background:var(--surface)}
.tbl th:first-child{border-top-left-radius:var(--r-xl)}
.tbl th:last-child{border-top-right-radius:var(--r-xl)}
.tbl td{padding:16px 20px;border-top:1px solid var(--edge);color:var(--ink-3);line-height:1.5;
  vertical-align:top}
.tbl td:first-child{color:var(--ink);font-weight:500}
.tbl td:last-child{color:var(--ink)}

/* -------------------------------------------------------------- pricing */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:880px}
.plan{padding:30px}
.plan--lead{border-color:transparent;background:var(--night);color:var(--night-ink);
  box-shadow:var(--shadow-night)}
.plan--lead h3,.plan--lead .amount{color:var(--night-ink)}
.plan--lead > p,.plan--lead .checks li{color:var(--night-ink-2)}
.plan--lead .checks li::before{background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px var(--night-line)}
.plan--lead .checks b{color:var(--night-ink)}
.plan--lead .btn{background:#fff;color:var(--night)}
.plan--lead .btn:hover{background:#e9e9e9}
.plan .amount{margin-top:20px;color:var(--ink);font-size:clamp(30px,3.4vw,40px);font-weight:500;
  line-height:1;letter-spacing:-.032em;font-variant-numeric:tabular-nums}
.plan .amount span{color:var(--ink-3);font-size:14px;font-weight:400;letter-spacing:-.01em}
.plan > p{margin-top:14px;color:var(--ink-3);font-size:14px;line-height:1.55}
.plan .checks{margin:22px 0 26px}

/* ------------------------------------------------------------------ faq */
.qa{padding:8px 26px}
.qa details{border-bottom:1px solid var(--edge)}
.qa details:last-child{border-bottom:0}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;
  color:var(--ink);font-size:15.5px;font-weight:500;letter-spacing:-.016em;list-style:none;
  cursor:pointer;transition:color .16s var(--ease)}
.qa summary:hover{color:var(--signal)}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{position:relative;flex:0 0 auto;width:16px;height:16px}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;top:50%;left:50%;
  background:currentColor;transform:translate(-50%,-50%);transition:transform .3s var(--ease)}
.qa summary i::before{width:11px;height:1.4px}
.qa summary i::after{width:1.4px;height:11px}
.qa details[open] summary i::after{transform:translate(-50%,-50%) scaleY(0)}
.qa .ans{max-width:68ch;padding:0 40px 22px 0;color:var(--ink-3);font-size:14px;line-height:1.65}

/* -------------------------------------------------------------- closing */
.cta{padding:clamp(40px,5vw,64px);border-radius:var(--r-2xl);background:var(--night);
  color:var(--night-ink);box-shadow:var(--shadow-night);text-align:center}
.cta h2{color:var(--night-ink);max-width:18ch;margin:0 auto}
.cta p{margin:16px auto 0;max-width:46ch;color:var(--night-ink-2);font-size:var(--t-body);
  line-height:var(--lh-body)}
.cta .btn{background:#fff;color:var(--night)}
.cta .btn:hover{background:#e9e9e9}
.cta .btn--soft{background:transparent;border-color:var(--night-line);color:var(--night-ink)}
.cta .btn--soft:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24)}

/* --------------------------------------------------------------- footer */
.foot-wrap{padding:var(--gap) 0 44px;border-top:1px solid var(--edge);background:var(--paper)}
.foot{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:28px}
.foot-brand p{margin-top:16px;max-width:28ch;color:var(--ink-3);font-size:13px;line-height:1.55}
.foot h5{margin:0 0 16px;color:var(--ink-3);font-size:11.5px;font-weight:500;letter-spacing:.07em;
  text-transform:uppercase}
.foot ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.foot li a{color:var(--ink-2);font-size:13.5px;transition:color .16s var(--ease)}
.foot li a:hover{color:var(--ink)}
.foot-base{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:44px;
  padding-top:22px;border-top:1px solid var(--edge);color:var(--ink-3);font-size:12.5px}

/* -------------------------------------------------------------- ask bar */
.ask{position:fixed;bottom:20px;left:50%;z-index:45;width:min(620px,calc(100% - 32px));
  transform:translateX(-50%)}
.ask-panel{margin-bottom:10px;border:1px solid var(--edge);border-radius:var(--r-xl);
  background:var(--paper);box-shadow:var(--shadow-l);overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s}
.ask.open .ask-panel{opacity:1;visibility:visible;transform:none}
.ask-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;
  border-bottom:1px solid var(--edge);color:var(--ink-3);font-size:11.5px;letter-spacing:.07em;
  text-transform:uppercase}
.ask-close{display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:8px;
  background:transparent;color:var(--ink-3);font-size:15px;cursor:pointer;
  transition:background .16s var(--ease),color .16s var(--ease)}
.ask-close:hover{background:var(--surface);color:var(--ink)}
.ask-log{display:grid;gap:12px;max-height:min(44vh,320px);overflow-y:auto;padding:18px}
.ask-log:empty{display:none}
.ask-msg{max-width:88%;font-size:13.5px;line-height:1.6}
.ask-msg.bot{color:var(--ink-2)}
.ask-msg.me{margin-left:auto;padding:10px 14px;border-radius:var(--r);background:var(--ink);
  color:#fff}
.ask-msg a{color:var(--signal)}
.ask-msg a:hover{text-decoration:underline;text-underline-offset:3px}
.ask-msg.typing{display:flex;gap:4px;align-items:center}
.ask-msg.typing i{width:5px;height:5px;border-radius:var(--pill);background:var(--ink-3);
  animation:blink 1.2s var(--ease) infinite}
.ask-msg.typing i:nth-child(2){animation-delay:.15s}
.ask-msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.ask-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 18px}
.ask-chips button{padding:8px 13px;border:1px solid var(--edge);border-radius:var(--pill);
  background:var(--paper);color:var(--ink-2);font-size:12.5px;cursor:pointer;
  transition:border-color .16s var(--ease),color .16s var(--ease)}
.ask-chips button:hover{border-color:var(--edge-2);color:var(--ink)}
.ask-bar{display:flex;align-items:center;gap:10px;padding:7px 7px 7px 18px;
  border:1px solid var(--edge);border-radius:var(--pill);background:var(--paper);
  box-shadow:var(--shadow-l)}
.ask-bar input{flex:1;min-width:0;padding:8px 0;border:0;background:none;
  font-family:var(--font);font-size:14.5px;letter-spacing:-.01em;color:var(--ink);outline:none}
.ask-bar input::placeholder{color:var(--ink-3)}
.ask-send{padding:10px 20px;border:0;border-radius:var(--pill);background:var(--ink);color:#fff;
  font-size:13.5px;font-weight:500;cursor:pointer;transition:background .16s var(--ease)}
.ask-send:hover{background:#000}

/* ------------------------------------------------------------- sub-pages */
/* sub-page headers sit on the same centre axis as the home hero */
.phero{padding:clamp(44px,6vw,76px) 0 0;text-align:center}
.phero-in{display:block;max-width:800px;margin:0 auto}
.crumb{display:inline-flex;align-items:center;gap:7px;color:var(--ink-3);font-size:12.5px}
.crumb a{transition:color .16s var(--ease)}
.crumb a:hover{color:var(--ink)}
.crumb span[aria-hidden]{opacity:.45}
.phero .kick{margin-top:16px}
.phero h1{margin-top:10px}
.phero .lede,.phero .sub{margin:18px auto 0;max-width:56ch;color:var(--ink-3);
  font-size:var(--t-body);font-weight:400;line-height:1.6;letter-spacing:var(--tr-body)}
.phero .hero-cta{margin-top:28px}
/* the figure moves below the header and runs the full column */
.phero-art{margin-top:clamp(36px,5vw,60px)}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat > div{padding:24px}
.feat p{margin-top:8px;color:var(--ink-3);font-size:13.5px;line-height:1.55}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pcard{padding:24px;transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.pcard:hover{box-shadow:var(--shadow-m);transform:translateY(-2px)}
.pcard p{margin-top:8px;color:var(--ink-3);font-size:13.5px;line-height:1.55}
.pcard .tlink{margin-top:18px}
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;
  align-items:start}
.split + .split{margin-top:var(--gap)}
.split.flip > *:first-child{order:2}
.panel{padding:24px}
.bx-ico{display:grid;width:38px;height:38px;place-items:center;margin-bottom:16px;
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink)}
.bx-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}

/* the old grey band is now just a section — rhythm comes from space alone */
.band-sect{background:transparent}
/* was a two-column header; centred now like every other one */
.head--row{display:block;max-width:660px}
.sc{max-width:44ch}

/* sub-page eyebrow, above the h1 */
.kick{display:inline-block;color:var(--signal);font-size:var(--t-caption);font-weight:500;
  letter-spacing:.02em}

/* figure panels carry a header strip; the card itself loses its padding */
.panel:has(.panel-top){padding:0}
.panel-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 20px;border-bottom:1px solid var(--edge)}
.panel-top .t{color:var(--ink);font-size:13px;font-weight:500;letter-spacing:-.012em}
.panel-top .g{padding:5px 11px;border-radius:var(--pill);background:rgba(18,161,80,.1);
  color:var(--ok);font-size:11.5px;font-weight:500;white-space:nowrap}
.panel > .fig{display:block;width:calc(100% - 40px);margin:20px auto}

/* pricing, generator flavour */
.plan-flag{display:inline-block;margin-bottom:14px;padding:5px 12px;border-radius:var(--pill);
  background:rgba(255,255,255,.12);color:var(--night-ink);font-size:11.5px;font-weight:500;
  letter-spacing:.01em}
.plan:not(.plan--lead) .plan-flag{background:var(--surface);color:var(--ink-3)}
.price{display:flex;align-items:baseline;gap:8px;margin-top:18px}
.price strong{color:var(--ink);font-size:clamp(30px,3.4vw,40px);font-weight:500;line-height:1;
  letter-spacing:-.032em;font-variant-numeric:tabular-nums}
.price span{color:var(--ink-3);font-size:14px}
.plan--lead .price strong{color:var(--night-ink)}
.plan--lead .price span{color:var(--night-ink-2)}
.plan--lead .mark{color:#8fb0ff}

/* ------------------------------------------------------ console mock (crop) */
.crop{overflow:hidden}
.crop-cap{margin-bottom:10px;color:var(--ink-3);font-size:12px}
.c-chrome{display:flex;align-items:center;gap:14px;padding:14px 18px;
  border-bottom:1px solid var(--edge)}
.c-proj{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-size:13px;
  font-weight:500}
.c-proj i{width:9px;height:9px;border-radius:3px;background:var(--signal)}
.c-url{margin:0 auto;color:var(--ink-3);font-size:12px}
.c-live{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--pill);
  background:rgba(18,161,80,.1);color:var(--ok);font-size:11.5px;font-weight:500}
.c-live i{width:5px;height:5px;border-radius:var(--pill);background:currentColor}
.c-tabs{display:flex;gap:3px;overflow-x:auto;padding:10px 14px;border-bottom:1px solid var(--edge);
  scrollbar-width:none}
.c-tabs::-webkit-scrollbar{display:none}
.c-tab{flex:0 0 auto;padding:7px 12px;border-radius:8px;color:var(--ink-3);font-size:12.5px}
.c-tab.on{background:var(--surface);color:var(--ink);font-weight:500}
.c-body{display:grid;grid-template-columns:minmax(0,1fr) 260px}
.c-main{padding:22px;border-right:1px solid var(--edge)}
.c-side{display:grid;gap:12px;align-content:start;padding:22px}
.c-card{padding:16px;border:1px solid var(--edge);border-radius:var(--r);background:var(--paper)}
.c-card .l,.c-stat .l{display:block;color:var(--ink-3);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase}
.c-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.c-stat{padding:16px;border:1px solid var(--edge);border-radius:var(--r);background:var(--paper)}
.c-stat .v{margin-top:10px;color:var(--ink);font-size:22px;font-weight:500;line-height:1;
  letter-spacing:-.026em;font-variant-numeric:tabular-nums}
.c-stat .d{margin-top:6px;color:var(--ink-3);font-size:11.5px}
.c-deploy{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px;
  padding:16px;border:1px solid var(--edge);border-radius:var(--r);background:var(--paper)}
.c-deploy .k{display:block;color:var(--ink-3);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase}
.c-deploy .sha{margin-top:8px;color:var(--ink);font-size:14px;font-weight:500;letter-spacing:-.014em}
.c-deploy .meta{margin-top:4px;color:var(--ink-3);font-size:11.5px}
.c-deploy .go{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;
  border:1px solid var(--edge);border-radius:9px;color:var(--ink);font-size:12.5px;
  white-space:nowrap}
.c-bars{display:flex;align-items:flex-end;gap:4px;height:64px;margin-top:20px}
.c-bars i{flex:1;border-radius:3px 3px 0 0;background:var(--surface-2);transform-origin:bottom;
  transform:scaleY(0);animation:rise .7s var(--ease) forwards}
.c-bars i.on{background:var(--signal)}
@keyframes rise{to{transform:scaleY(1)}}
.c-x{display:flex;justify-content:space-between;margin-top:8px;color:var(--ink-3);font-size:11px}
.c-wallet{color:var(--ink);font-size:22px;font-weight:500;line-height:1;letter-spacing:-.026em}
.c-meter{height:5px;margin-top:12px;border-radius:var(--pill);background:var(--surface-2);
  overflow:hidden}
.c-meter i{display:block;height:100%;width:43%;border-radius:var(--pill);background:var(--ink);
  transform-origin:left;transform:scaleX(0);animation:fill .9s var(--ease) .3s forwards}
@keyframes fill{to{transform:scaleX(1)}}
.c-note,.c-card .note{margin-top:12px;color:var(--ink-3);font-size:12px;line-height:1.5}
.c-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;
  border-bottom:1px solid var(--edge);font-size:13px}
.c-row:last-child{border-bottom:0}
.c-row b{color:var(--ink);font-weight:500}
.c-row .m{color:var(--ink-3);font-size:12px;font-variant-numeric:tabular-nums}

/* ----------------------------------------------------- comparison slider */
/* one artifact split by a draggable seam: their wiring on the left, ours on
   the right. the control is a real <input type=range> lying invisibly over
   the top, so it drags with a pointer AND steps with arrow keys for free. */
/* Both panes draw the SAME six services at the SAME coordinates — only the
   wiring between them changes. That is what makes a wipe legible: every seam
   position shows a coherent picture, so nothing has to be dragged to an end
   stop to make sense. Dim dashed white is the tangle, blue is the order. */
.vs{position:relative;--x:50%;border-radius:var(--r-2xl);background:var(--night);
  box-shadow:var(--shadow-night);overflow:hidden;touch-action:pan-y}
.vs-pane{position:absolute;inset:0;padding:clamp(18px,2.4vw,26px)}
.vs-pane--them{position:relative}
.vs-pane--us{clip-path:inset(0 0 0 var(--x));background:var(--night)}
.vs-fig{display:block;width:100%;height:auto;margin-top:40px}
.vs-lbl{position:absolute;top:clamp(18px,2.4vw,26px);left:clamp(18px,2.4vw,26px);
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px;
  border:1px solid var(--night-line);border-radius:var(--pill);color:var(--night-ink);
  font-size:12.5px;font-weight:500;white-space:nowrap}
.vs-pane--us .vs-lbl{left:auto;right:clamp(18px,2.4vw,26px);
  border-color:rgba(120,150,255,.45);background:rgba(15,91,255,.16)}
.vs-count{color:var(--night-ink-2);font-weight:400;font-variant-numeric:tabular-nums}

/* the diagram itself */
.vs-fig .box{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.15)}
.vs-fig .t{fill:#f2f2f2;font-family:var(--font);font-size:15px;font-weight:500;
  letter-spacing:-.014em}
.vs-fig .s{fill:#8a8a90;font-family:var(--font);font-size:11.5px}
.vs-fig .w{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1.2}
.vs-fig .w--mess{stroke-dasharray:5 5;stroke:rgba(255,255,255,.26)}
.vs-fig .w--clean{stroke:var(--signal);stroke-width:1.7;stroke-linecap:round}
.vs-fig .hull{fill:rgba(15,91,255,.05);stroke:rgba(120,150,255,.42);stroke-width:1.2}
.vs-fig .chip{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.2);stroke-dasharray:4 4}
.vs-fig .dot{fill:var(--signal)}
.vs-fig .flow{fill:none;stroke:var(--signal);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:.05 .95;stroke-dashoffset:1;animation:flow 3.2s linear infinite var(--lag,0s)}

/* the seam */
.vs-seam{position:absolute;top:0;bottom:0;left:var(--x);z-index:3;width:1px;
  background:rgba(255,255,255,.5);pointer-events:none}
.vs-grip{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:38px;height:38px;
  border-radius:var(--pill);background:#fff;color:var(--night);
  box-shadow:0 2px 6px rgba(0,0,0,.4);transform:translate(-50%,-50%)}
.vs-grip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.vs-range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;padding:0;
  border:0;background:transparent;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.vs-range::-webkit-slider-thumb{-webkit-appearance:none;width:48px;height:100%;cursor:ew-resize}
.vs-range::-moz-range-thumb{width:48px;height:600px;border:0;background:transparent;
  cursor:ew-resize}
.vs-range:focus-visible ~ .vs-seam .vs-grip{outline:2px solid var(--signal);outline-offset:3px}
.vs-hint{position:absolute;left:50%;bottom:14px;z-index:3;padding:6px 13px;border-radius:var(--pill);
  background:rgba(255,255,255,.1);color:var(--night-ink-2);font-size:11.5px;
  transform:translateX(-50%);pointer-events:none;
  transition:opacity .3s var(--ease)}
.vs.touched .vs-hint{opacity:0}

/* ---------------------------------------------------------- schematics */
.fig{width:100%;height:auto;overflow:visible}
.fig .wire{fill:none;stroke:rgba(0,0,0,.16);stroke-width:1;stroke-dasharray:100;
  stroke-dashoffset:100;animation:draw .9s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.fig .pulse{fill:none;stroke:var(--signal);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:5 95;stroke-dashoffset:100;animation:run var(--d,3s) linear infinite var(--lag,0s)}
@keyframes run{to{stroke-dashoffset:0}}
/* a white plate on a white card is invisible — the fill carries it, not a stroke */
.fig .plate{fill:var(--surface);stroke:var(--edge)}
.fig .frame{fill:none;stroke:var(--edge-2);stroke-dasharray:4 4}
.fig .node{opacity:0;animation:pop .5s var(--ease) forwards;
  animation-delay:calc(.2s + var(--i,0)*.06s)}
.fig .junction{fill:var(--signal)}
.fig .lbl{fill:var(--ink);font-family:var(--font);font-size:12px;font-weight:500;
  letter-spacing:-.014em}
.fig .sub{fill:var(--ink-3);font-family:var(--font);font-size:10px}
.fig .tag{fill:var(--ink-3);font-family:var(--font);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase}
.fig .ico{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.fig .ico-d{fill:none;stroke:var(--ink-3);stroke-width:1.4;stroke-linecap:round;
  stroke-linejoin:round}
/* the same schematic, reversed out for a dark card */
.fig--dark .plate{fill:rgba(255,255,255,.06);stroke:var(--night-line)}
.fig--dark .frame{stroke:var(--night-line)}
.fig--dark .wire{stroke:rgba(255,255,255,.3)}
.fig--dark .lbl{fill:var(--night-ink)}
.fig--dark .sub,.fig--dark .tag{fill:var(--night-ink-2)}
.fig--dark .ico{stroke:var(--night-ink)}
.fig--dark .ico-d{stroke:var(--night-ink-2)}

/* --------------------------------------------------------------- reveal */
.rv{opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.lift{opacity:0;animation:pop .9s var(--ease) both}
.l1{animation-delay:.04s}.l2{animation-delay:.12s}.l3{animation-delay:.22s}
.l4{animation-delay:.32s}.l5{animation-delay:.44s}
@keyframes pop{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ----------------------------------------------------------- responsive */
@media (max-width:1100px){
  .menu{display:none}
  .burger{display:inline-flex}
  .nav-act .plain{display:none}
}
@media (pointer:coarse){
  .burger{width:44px;height:44px}
  .btn--sm{padding:12px 16px}
}
@media (max-width:1000px){
  .showcase-in{grid-template-columns:1fr;gap:16px}
  .showcase-wires{display:none}
  .sc-tour{position:static;display:flex;width:fit-content;
    margin:0 auto clamp(24px,4vw,40px)}
  .metrics{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .hero .display{max-width:14ch}
  .phero-in,.split,.plans{grid-template-columns:1fr}
  .split.flip > *:first-child{order:0}
  .grid3,.pgrid,.feat{grid-template-columns:1fr 1fr}
  .c-body{grid-template-columns:1fr}
  .c-main{border-right:0;border-bottom:1px solid var(--edge)}
  .bento{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bx--w3,.bx--w4{grid-column:span 4}
  .readers{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .wrap{width:calc(100% - 32px)}
  .hero .display{max-width:none}
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%}
  .grid3,.pgrid,.feat,.metrics{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .bx,.bx--w3,.bx--w4{grid-column:span 1}
  .c-stats{grid-template-columns:1fr}
  .qa{padding:8px 20px}
  .plan,.reader,.bx,.cta{padding-left:22px;padding-right:22px}
  .bx .dither{margin-left:-22px;margin-right:-22px;margin-bottom:-22px}
  .vs-code{font-size:10.5px}
  .foot{grid-template-columns:1fr}
  .foot-base{flex-direction:column;align-items:flex-start}
  .ask-bar input{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;
    scroll-behavior:auto!important}
  .rv,.lift,.fig .node{opacity:1;transform:none}
  .showcase-wires path{stroke-dashoffset:0}
  .showcase-wires .flow,.fig .pulse{display:none}
  .c-bars i{transform:scaleY(1)}
  .c-meter i{transform:scaleX(1)}
}