/* =============================================================================
   fasten — brand kit
   Built on the fasten identity (teal · Plus Jakarta Sans · Roboto Mono).
   LIGHT/paper is the default; DARK is the toggle ([data-theme="dark"]).

   Design language
   ---------------
   · warm paper background, ink text, hairline borders
   · flat boxes framed by corner-tick brackets  →  .brk / .brk-accent
   · teal used sparingly: a hand-drawn marker highlight (.hl), a caliper
     underline (.cal), pills, checkmark ticks, the brand mark, one soft ring
   · buttons carry keyboard-shortcut badges      →  .btn + .kbd
   · monospace for anything a developer would type
   · small square grid only on alternating sections →  .gridbg

   Tokens are the single source of truth. Prefer var(--token) over literals.
   ============================================================================= */

/* ── tokens ───────────────────────────────────────────────────────────── */
:root,
[data-theme="light"]{
  color-scheme:light;
  --paper:#faf8f2; --paper-2:#f3f1ea; --card:#fffdf8;
  --ink:#0c0c0c; --soft:#33312c; --muted:#54514a; --dim:#726e67;
  --line:#e6e3d9; --line-2:#c9c5b7;
  --accent:#0f766e; --accent-2:#0b5e57; --accent-bright:#14a594; --hl:#5eead4;
  --tick:#a8a195;                         /* corner-tick color — light warm gray, not full ink */
  --hatch:rgba(15,118,110,.10);
  --grid:rgba(15,23,42,.045);
  --glow:rgba(15,118,110,.10);
  --ring:rgba(15,118,110,.13); --ring-line:rgba(15,118,110,.30); --inwash:rgba(15,118,110,.09);
  --warn:#b45309; --ok:#15803d; --bad:#b91c1c; --accent-soft:rgba(15,118,110,.08);
  --shadow-soft:0 18px 44px -28px rgba(12,12,12,.16);
  --shadow-card:0 22px 46px -30px rgba(12,12,12,.28);
  --shadow-pop:0 1px 0 rgba(12,12,12,.02),0 8px 28px -12px rgba(12,12,12,.18);
  /* SVG-internal aliases — inlined diagrams reference these */
  --hw-bg:var(--paper); --hw-panel:var(--card); --hw-panel2:var(--paper-2); --hw-cell:var(--paper-2);
  --hw-border:var(--line); --hw-border2:var(--line-2);
  --hw-text:var(--ink); --hw-sub:var(--muted); --hw-dim:var(--dim); --hw-soft:var(--soft);
  --hw-accent:var(--accent); --hw-adeep:var(--accent-2); --hw-asoft:var(--accent-soft);
  --hw-warn:var(--warn); --hw-bad:var(--bad); --hw-grid:rgba(127,127,127,.14);
  --api:#b45309; --sys:#1d4ed8; --aud:var(--accent); --err:var(--bad); --sub:var(--muted);
  --chrome:#ececec; --chrome-2:#dcdcdc; --url:#ffffff;
  --sidebar:var(--paper-2); --side-active:var(--accent-soft);
  --pill-bg:rgba(15,118,110,.10); --pane-fill:rgba(15,118,110,.03);
  --term-bg:var(--paper-2); --term-text:var(--ink); --term-dim:var(--muted);
}
[data-theme="dark"]{
  color-scheme:dark;
  --paper:#000000; --paper-2:#0a0a0a; --card:#0f0f0f;
  --ink:#fafafa; --soft:#d2d2d2; --muted:#a3a3a3; --dim:#7a7a7a;
  --line:#1f1f1f; --line-2:#2e2e2e;
  --accent:#2dd4bf; --accent-2:#14a594; --accent-bright:#5eead4; --hl:#2dd4bf;
  --tick:#4a4a4a;
  --hatch:rgba(45,212,191,.12);
  --grid:rgba(255,255,255,.035);
  --glow:rgba(45,212,191,.12);
  --ring:rgba(45,212,191,.18); --ring-line:rgba(45,212,191,.34); --inwash:rgba(45,212,191,.10);
  --warn:#f59e0b; --ok:#22c55e; --bad:#ef4444; --accent-soft:rgba(45,212,191,.10);
  --shadow-soft:0 18px 44px -28px rgba(0,0,0,.6);
  --shadow-card:0 24px 50px -28px rgba(0,0,0,.7);
  --shadow-pop:0 1px 0 rgba(0,0,0,.4),0 12px 34px -14px rgba(0,0,0,.7);
  /* SVG-internal aliases — dark overrides for the ones that aren't pure var() refs */
  --api:#f59e0b; --sys:#3b82f6;
  --chrome:#1f2128; --chrome-2:#262932; --url:#121316;
  --pill-bg:rgba(45,212,191,.14); --pane-fill:rgba(45,212,191,.04);
}
:root{
  --sans:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --mono:'Roboto Mono',ui-monospace,'SF Mono',monospace;
  --maxw:1100px;
  --r:5px;          /* base radius — near-square; the corner-ticks do the framing */
  --r-md:6px; --r-lg:8px;
}

/* ── base ─────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
code,pre,.mono{font-family:var(--mono)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ── bracketed box — engineering corner-ticks ────────────────────────────
   .brk frames any block with 8 tiny background-gradient ticks at the corners,
   plus a hairline border and a soft lift. .brk-accent adds the teal ring. */
.brk{position:relative;border:1px solid var(--line);background-color:var(--card);
  background-image:
    linear-gradient(var(--tick),var(--tick)),linear-gradient(var(--tick),var(--tick)),
    linear-gradient(var(--tick),var(--tick)),linear-gradient(var(--tick),var(--tick)),
    linear-gradient(var(--tick),var(--tick)),linear-gradient(var(--tick),var(--tick)),
    linear-gradient(var(--tick),var(--tick)),linear-gradient(var(--tick),var(--tick));
  background-repeat:no-repeat;
  background-size:10px 1.25px,1.25px 10px,10px 1.25px,1.25px 10px,10px 1.25px,1.25px 10px,10px 1.25px,1.25px 10px;
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;
  box-shadow:var(--shadow-soft)}
.brk-accent{--tick:var(--accent);border-color:var(--ring-line);
  box-shadow:0 0 0 1px var(--ring),var(--shadow-card),inset 0 70px 60px -60px var(--inwash)}

/* ── pulse — feedback when a keyboard shortcut jumps to a section ─────── */
@keyframes kpulse{0%{box-shadow:0 0 0 3px var(--accent)}100%{box-shadow:0 0 0 3px transparent}}
.pulse{animation:kpulse 950ms ease-out}
.btn.pulse{border-radius:var(--r)}

/* ── marker highlight — a hand-drawn SVG swipe (irregular, slight tilt) ─── */
.hl{color:var(--ink);padding:.04em .2em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='48' viewBox='0 0 200 48' preserveAspectRatio='none'><path d='M5 16 C38 7 92 11 132 9 C162 7 185 12 197 14 C199 21 196 33 191 38 C148 41 92 36 52 38 C30 39 13 38 6 34 C1 28 1 21 5 16 Z' fill='%235eead4' fill-opacity='0.88'/><path d='M14 32 C70 36 150 34 188 27' fill='none' stroke='%230f766e' stroke-width='2' stroke-opacity='0.13' stroke-linecap='round'/></svg>") no-repeat center / 100% 92%}

/* ── caliper underline — measurement-bracket emphasis for big headings ──── */
.cal{position:relative;white-space:nowrap;color:var(--ink)}
.cal::after{content:"";position:absolute;left:-.05em;right:-.05em;bottom:-.16em;height:.22em;
  border:2px solid var(--accent);border-top:none;border-radius:0 0 2px 2px}

/* ── small square grid — alternating sections only ────────────────────── */
.gridbg{background-color:var(--paper-2);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:11px 11px}

/* ── wordmark lockup ─────────────────────────────────────────────────── */
.wm{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:15px;letter-spacing:-.4px;color:var(--ink)}
.wm svg{width:16px;height:16px;color:var(--accent)}

/* ── buttons with keyboard-shortcut badges ──────────────────────────────
   .btn-ink (primary/black) · .btn-line (outline) · .btn-teal · .btn-ghost. */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:600;
  font-size:13.5px;line-height:1;padding:9px 16px;border-radius:1px;border:1px solid transparent;cursor:pointer;
  text-decoration:none;white-space:nowrap;background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--btn-tick),var(--btn-tick)),linear-gradient(var(--btn-tick),var(--btn-tick)),
    linear-gradient(var(--btn-tick),var(--btn-tick)),linear-gradient(var(--btn-tick),var(--btn-tick)),
    linear-gradient(var(--btn-tick),var(--btn-tick)),linear-gradient(var(--btn-tick),var(--btn-tick)),
    linear-gradient(var(--btn-tick),var(--btn-tick)),linear-gradient(var(--btn-tick),var(--btn-tick));
  background-size:9px 1px,1px 9px,9px 1px,1px 9px,9px 1px,1px 9px,9px 1px,1px 9px;
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;
  transition:background-color .14s,border-color .14s,color .14s,transform .08s}
.btn:active{transform:translateY(1px)}
.btn .kbd{display:inline-grid;place-items:center;min-width:17px;height:17px;margin-left:9px;padding:0 4px;
  font-family:var(--mono);font-size:10.5px;border:1px solid currentColor;border-radius:1px;opacity:.5}
.btn-ink{--btn-tick:rgba(255,255,255,.5);background-color:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-ink:hover{opacity:.9}
.btn-line{--btn-tick:var(--accent);background-color:var(--card);color:var(--ink);border-color:var(--line-2)}
.btn-line:hover{border-color:var(--accent);color:var(--accent)}
.btn-teal{--btn-tick:rgba(255,255,255,.6);background-color:var(--accent);color:#fff;border-color:var(--accent)}
.btn-teal:hover{background-color:var(--accent-2)}
.btn-ghost{--btn-tick:transparent;background:transparent;color:var(--soft);padding:9px 8px}
.btn-ghost:hover{color:var(--ink)}
.nav .right .btn{padding:7px 13px;font-size:13px}
/* text link with an arrow that opens its gap on hover */
.link-arrow{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:600;font-size:14px;text-decoration:none}
.link-arrow:hover{gap:9px}

/* ── nav + mega-dropdown ─────────────────────────────────────────────── */
.navbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:8px;height:60px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:18px;letter-spacing:-.5px;color:var(--ink)}
.brand .mk{width:20px;height:20px;color:var(--accent)}
.brand .tag{font-family:var(--mono);font-size:10px;font-weight:500;color:var(--dim);
  border:1px solid var(--line);border-radius:4px;padding:1px 5px;margin-left:4px;letter-spacing:.02em}
.nav .links{display:flex;align-items:center;gap:4px;margin-left:18px;font-size:14px}
.nav .links > a,.nav .links > .menu > button{display:inline-flex;align-items:center;gap:5px;color:var(--soft);
  background:none;border:none;font-family:var(--sans);font-size:14px;font-weight:500;cursor:pointer;
  padding:8px 11px;border-radius:var(--r);line-height:1}
.nav .links > a:hover,.nav .links > .menu > button:hover{background:var(--paper-2);color:var(--ink)}
.nav .links > .menu > button .chev{width:13px;height:13px;color:var(--dim);transition:transform .15s}
.nav .spacer{flex:1}
.nav .right{display:flex;align-items:center;gap:8px}

.menu{position:relative}
.mega{position:absolute;top:calc(100% + 10px);left:-12px;width:680px;background:var(--card);
  border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);
  display:grid;grid-template-columns:1fr 268px;overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s}
.menu:hover .mega,.menu:focus-within .mega,.menu.open .mega{opacity:1;visibility:visible;transform:translateY(0)}
.menu:hover > button .chev,.menu.open > button .chev{transform:rotate(180deg)}
.mega .col{padding:14px}
.mega .col-head{font-family:var(--mono);font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:var(--dim);padding:6px 10px 10px}
.mi{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:var(--r-md);color:var(--ink);transition:background .12s}
.mi:hover{background:var(--paper-2)}
.mi .ic{flex:none;width:34px;height:34px;border:1px solid var(--line-2);border-radius:var(--r-md);display:grid;place-items:center;color:var(--soft);background:var(--paper)}
.mi .ic svg{width:17px;height:17px}
.mi .t{font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.mi .t .pill{font-family:var(--mono);font-size:9.5px;font-weight:500;color:var(--accent);background:var(--hatch);border-radius:3px;padding:1px 5px;letter-spacing:.02em}
.mi .t .aka{font-family:var(--mono);color:var(--dim);font-weight:400;font-size:11px}
.mi .d{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.45}
.mega .feat{background-color:var(--paper-2);
  background-image:repeating-linear-gradient(45deg,var(--hatch) 0 1px,transparent 1px 9px);
  border-left:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:12px}
.feat .card{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-md);padding:13px}
.feat .card p{margin:7px 0 0;font-size:12px;color:var(--muted);line-height:1.5}
.feat .links{display:flex;flex-direction:column;gap:2px;margin-top:auto}
.feat .links a{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600;
  color:var(--ink);padding:9px 11px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.feat .links a:hover{border-color:var(--ink)}
.feat .links a .ar{color:var(--dim)}

/* theme toggle button (icon) */
.theme-toggle{display:inline-grid;place-items:center;width:34px;height:34px;border:none;
  border-radius:2px;background:transparent;color:var(--soft);cursor:pointer;transition:color .14s,background .14s}
.theme-toggle:hover{color:var(--accent);background:var(--paper-2)}
.theme-toggle svg{width:17px;height:17px}
.theme-toggle .icon-sun{display:none}.theme-toggle .icon-moon{display:block}
[data-theme="dark"] .theme-toggle .icon-sun{display:block}[data-theme="dark"] .theme-toggle .icon-moon{display:none}

/* ── hero ────────────────────────────────────────────────────────────── */
.statbar{display:flex;justify-content:center;padding:34px 0 0;font-size:13px;color:var(--soft);flex-wrap:wrap}
.statbar b{color:var(--ink)}.statbar span{padding:0 18px;border-right:1px solid var(--line)}.statbar span:last-child{border:none}
/* full-width proof band — stats below the hero, cleanly aligned */
.statband{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statband .statbar{padding:18px 0}
.hero{text-align:center;padding:48px 0 56px;background:radial-gradient(62% 92% at 50% -4%,var(--glow),transparent 62%)}
.hero .eyebrow{font-family:var(--mono);font-size:12px;color:var(--dim);letter-spacing:.04em;margin:0 0 18px}
.hero h1{font-size:clamp(36px,6.2vw,62px);font-weight:800;letter-spacing:-1.8px;line-height:1.02;margin:0 auto 20px;max-width:760px}
.hero p.sub{font-size:17px;color:var(--muted);max-width:580px;margin:0 auto 26px;line-height:1.62}
.hero .cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.langrow{display:flex;justify-content:center;padding:26px 0 0;flex-wrap:wrap}
.langrow span{font-family:var(--mono);font-size:12px;color:var(--dim);padding:0 14px;border-right:1px solid var(--line)}
.langrow span:last-child{border:none}

/* hero (split) — copy on the left, a real artifact panel on the right */
.hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;padding:40px 0 52px;
  background:radial-gradient(58% 86% at 84% 38%,var(--glow),transparent 62%)}
.hero-split .copy{text-align:left}
.hero-split .eyebrow{font-family:var(--mono);font-size:12px;color:var(--dim);letter-spacing:.04em;margin:0 0 16px}
.hero-split h1{font-size:clamp(32px,4.6vw,52px);font-weight:800;letter-spacing:-1.5px;line-height:1.04;margin:0 0 18px}
.hero-split p.sub{font-size:17px;color:var(--muted);max-width:520px;margin:0 0 24px;line-height:1.62}
.hero-split .cta{display:flex;gap:11px;flex-wrap:wrap}
.hero-split .art{min-width:0}

/* ── sections ────────────────────────────────────────────────────────── */
.sec{padding:80px 0}                         /* was 64px — give sections more breathing */
.sec > .wrap > p, .sec p.lede{line-height:1.65}
.sec-line{border-top:1px solid var(--line)}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--dim);margin:0 0 16px}

/* ── bento ───────────────────────────────────────────────────────────── */
.bento{display:grid;grid-template-columns:1fr 1fr;gap:0}
.bento .cell{padding:26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column}
/* trailing CTA in a card sticks to the bottom so CTAs align across unequal cards */
.bento .cell>.btn,.bento .cell>.link-arrow,.platform>.cell>.btn,.platform>.cell>.link-arrow{margin-top:auto}
.bento .cell:nth-child(2n){border-right:none}
.bento .cell:nth-last-child(-n+2){border-bottom:none}
.bento .hatch{background-image:repeating-linear-gradient(45deg,var(--hatch) 0 1px,transparent 1px 9px)}
.cell .lab{font-family:var(--mono);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim);margin:0 0 9px}
.cell h3{margin:0 0 8px;font-size:17px;letter-spacing:-.3px}
.cell h3 .aka{color:var(--dim);font-weight:400;font-family:var(--mono);font-size:12px}
.cell p{margin:0 0 14px;color:var(--muted);font-size:14.5px;line-height:1.6}

/* ── platform — three product cards sitting on one shared base layer ───── */
.platform{display:grid;grid-template-columns:repeat(3,1fr)}
.platform > .cell{padding:26px;border-right:1px solid var(--line);display:flex;flex-direction:column}
.platform > .cell:nth-child(3){border-right:none}
.platform > .base{grid-column:1/-1;border-top:1px solid var(--line);padding:22px 26px;display:flex;gap:18px;align-items:center;
  background-image:repeating-linear-gradient(45deg,var(--hatch) 0 1px,transparent 1px 9px)}
.platform > .base .blab{flex:none;font-family:var(--mono);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--ring-line);border-radius:var(--r);padding:8px 12px;background:var(--card)}
.platform > .base p{margin:0;color:var(--soft);font-size:13px;line-height:1.55}

/* ── flow (audit → belief → correction) ──────────────────────────────── */
.flow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0}
.flow .step{padding:24px;border-right:1px solid var(--line);position:relative}
.flow .step:last-child{border-right:none}
.flow .step .n{font-family:var(--mono);font-size:11px;color:var(--dim)}
.flow .step .arrow{position:absolute;right:-9px;top:50%;transform:translateY(-50%);width:18px;height:18px;
  background:var(--card);border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--accent);z-index:2;font-size:11px}
.flow .step h4{margin:8px 0 4px;font-size:15px}
.flow .step .who{font-family:var(--mono);font-size:11.5px;color:var(--soft);margin:0 0 8px}
.flow .step p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.55}

/* ── terminal mockup ─────────────────────────────────────────────────── */
.term{border:1px solid var(--line-2);border-radius:var(--r-md);overflow:hidden;background:var(--card);
  font-family:var(--mono);font-size:12.5px;box-shadow:var(--shadow-card)}
.term .hd{display:flex;justify-content:space-between;align-items:center;padding:8px 13px;border-bottom:1px solid var(--line);color:var(--muted);font-size:11px}
.term .hd .dots{display:flex;gap:5px}.term .hd .dots i{width:8px;height:8px;border-radius:50%;background:var(--line-2);display:block}
.term .bd{padding:14px;color:var(--soft);white-space:pre;line-height:1.7;overflow-x:auto}
.term .bd .k{color:var(--ink);font-weight:600}.term .bd .s{color:var(--muted)}.term .bd .c{color:var(--dim)}
.term .bd .warn{color:var(--warn)}

/* ── feature split + checklist ───────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.split h2{font-size:28px;letter-spacing:-.8px;margin:0 0 14px;line-height:1.12}
.split p{color:var(--muted);font-size:15.5px;line-height:1.62;margin:0 0 16px}
.checklist{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:10px}
.checklist li{display:flex;gap:10px;font-size:14.5px;color:var(--soft);line-height:1.5}
.checklist li svg{flex:none;width:17px;height:17px;color:var(--accent);margin-top:2px}

/* ── cta + footer ────────────────────────────────────────────────────── */
.cta-box{text-align:center;padding:52px 30px;background-image:repeating-linear-gradient(45deg,var(--hatch) 0 1px,transparent 1px 11px)}
.cta-box h2{font-size:32px;letter-spacing:-.8px;margin:0 0 12px}
.cta-box p{color:var(--muted);font-size:15px;max-width:460px;margin:0 auto 24px}
.cta-box .cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.foot{border-top:1px solid var(--line);padding:40px 0 60px;font-size:13px;color:var(--muted)}
.foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
.foot h5{font-family:var(--mono);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim);margin:0 0 12px}
.foot a{display:block;color:var(--muted);padding:4px 0}
.foot a:hover{color:var(--ink)}
.foot .end{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:34px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--dim)}

/* ── diagram theming — bind the shared SVGs' --hw-* vars to kit tokens ─── */
.hw-figure{max-width:1000px;margin:24px auto 6px;padding:0 8px}
.hw-figure svg{width:100%;height:auto;display:block}
.hw-figure figcaption{text-align:center;color:var(--muted);font-size:13px;margin-top:12px}
.hw-figure figcaption code{font-family:var(--mono);color:var(--accent)}
.hw svg{
  --hw-bg:var(--paper);
  --hw-panel:var(--card); --hw-panel2:var(--paper-2);
  --hw-border:var(--line); --hw-border2:var(--line-2);
  --hw-text:var(--ink); --hw-sub:var(--muted); --hw-dim:var(--dim); --hw-soft:var(--soft);
  --hw-accent:var(--accent); --hw-adeep:var(--accent-2); --hw-asoft:var(--hatch);
  --hw-api:#b45309; --hw-sys:#2563eb;
}
[data-theme="dark"] .hw svg{ --hw-api:#f59e0b; --hw-sys:#3b82f6; }

/* ── responsive ──────────────────────────────────────────────────────── */
@media(max-width:760px){
  .mega{width:92vw;left:0;grid-template-columns:1fr}.mega .feat{border-left:none;border-top:1px solid var(--line)}
  .bento,.flow,.split,.platform{grid-template-columns:1fr}
  .hero-split{grid-template-columns:1fr;gap:28px;text-align:center}.hero-split .copy{text-align:center}.hero-split .cta{justify-content:center}.hero-split p.sub{margin-left:auto;margin-right:auto}
  .flow .step{border-right:none;border-bottom:1px solid var(--line)}.flow .step .arrow{display:none}
  .platform > .cell{border-right:none;border-bottom:1px solid var(--line)}.platform > .base{flex-direction:column;align-items:flex-start;gap:12px}
  .nav .links{display:none}.foot .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .wrap{padding:0 16px}
  .sec{padding:44px 0}
  .hero{padding:30px 0 40px}
  .hero h1{letter-spacing:-1px}
  .statbar{flex-wrap:wrap;gap:4px 0}.statbar span{padding:3px 12px;border-right:1px solid var(--line)}
  .cta-box{padding:36px 18px}.cta-box h2{font-size:26px}
  .split{gap:22px}.split h2{font-size:24px}
  .bento .cell,.platform > .cell,.flow .step{padding:20px}
  .foot .cols{grid-template-columns:1fr}
  .nav .right .btn-line{display:none}
}

/* Inlined diagrams scale to the column width; viewBox preserves aspect ratio. */
.svg-embed > svg, .svg-embed > img{display:block;width:100%;height:auto}
.figure > svg, .figure > img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.figure .cap{font-family:var(--mono);font-size:11.5px;color:var(--dim);letter-spacing:.04em;margin:8px 0 0;text-align:center}

/* Mobile: let big diagrams (1240-wide viewBoxes) shrink responsively to fit
   the column width. Labels become small at phone widths but the diagram stays
   in-flow and pinch-zoom handles detail — this is more reliable than nested
   horizontal scroll, which competes with the page's vertical pan on touch.
   touch-action stays default; overscroll-behavior contains any inner scroll
   so users don't bounce the page while inspecting a wide figure. */
@media(max-width:760px){
  .svg-embed,.figure,.hw-figure{
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;scrollbar-width:thin;
    touch-action:pan-x pan-y
  }
  /* tap-to-zoom hint: complex diagrams get a subtle cursor + faint scrollbar */
  .svg-embed::-webkit-scrollbar,.figure::-webkit-scrollbar,.hw-figure::-webkit-scrollbar{height:4px}
  .svg-embed::-webkit-scrollbar-thumb,.figure::-webkit-scrollbar-thumb,.hw-figure::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:2px}
}

/* ── Mobile burger + slide-in drawer ────────────────────────────────────
   Desktop: hidden. Mobile (<=760px): burger visible, opens a right-side panel
   containing the full nav since .nav .links is hidden at that breakpoint. */
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--ink)}
.burger span{display:block;width:22px;height:2px;background:currentColor;margin:4px 0;border-radius:1px;transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.drawer{position:fixed;inset:0;z-index:100;visibility:hidden;pointer-events:none}
.drawer.open{visibility:visible;pointer-events:auto}
.drawer-bg{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .22s}
.drawer.open .drawer-bg{opacity:1}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(86vw,340px);background:var(--paper);
  border-left:1px solid var(--line);padding:22px 22px 28px;overflow-y:auto;
  transform:translateX(100%);transition:transform .25s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;gap:24px}
.drawer.open .drawer-panel{transform:translateX(0)}
.drawer-close{position:absolute;top:14px;right:14px;background:none;border:0;cursor:pointer;color:var(--soft);
  width:36px;height:36px;display:grid;place-items:center;border-radius:4px}
.drawer-close:hover{background:var(--paper-2);color:var(--ink)}
.drawer-close svg{width:18px;height:18px}
.drawer-group{display:flex;flex-direction:column;gap:2px}
.drawer-label{font-family:var(--mono);font-size:10.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--dim);
  margin:0 0 8px;padding:0 4px}
.drawer-link{display:block;padding:11px 8px;color:var(--ink);font-size:15px;font-weight:600;
  border-radius:4px;border:1px solid transparent}
.drawer-link:hover,.drawer-link:focus-visible{background:var(--paper-2);outline:none}
.drawer-link .d{display:block;font-weight:400;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.drawer-cta{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.drawer-cta .btn{justify-content:center;width:100%;padding:11px 16px;font-size:13.5px}

@media(max-width:760px){
  .burger{display:inline-flex;flex-direction:column;justify-content:center}
  /* keep theme-toggle + burger visible; hide the secondary buttons on mobile */
  .nav .right .btn{display:none}
}