@font-face{font-family:Inter;src:url('/fonts/inter-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('/fonts/inter-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url('/fonts/inter-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url('/fonts/inter-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Architects Daughter';src:url('/fonts/architects-daughter-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Caveat;src:url('/fonts/caveat-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/jetbrains-mono-400.woff2') format('woff2');font-weight:400;font-display:swap}

/* ---------------------------------------------------------------------------
   Tokens — from web.pen (Landing Page — Mumble · V5 Lean)
--------------------------------------------------------------------------- */
:root{
  --bg:#FFFFFF;
  --surface-1:#F7F7F5;
  --surface-2:#F1F1EF;
  --border:#DCDCD9;
  --border-strong:#C9C9C5;
  --accent:#0F7B6C;
  --accent-dark:#0A5A4E;
  --accent-tint:#E3F2EE;
  --dark:#191919;
  --purple:#6940A5;
  --text:#191919;
  --text-body:#6B6B69;
  --text-meta:#9B9A97;
  --rec:#D93A3A;

  --font:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  --hand:'Architects Daughter','Comic Sans MS',cursive;
  --script:Caveat,'Bradley Hand',cursive;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:64px;
  --max:1312px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,p,figure{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{display:block;max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.i{width:1em;height:1em;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-48px;z-index:100;padding:8px 14px;border-radius:8px;background:var(--dark);color:#fff;font-size:14px;font-weight:600}
.skip-link:focus{top:12px}
.accent{color:var(--accent)}

.eyebrow{color:var(--accent);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
h2{font-size:40px;font-weight:700;line-height:1.1;letter-spacing:-1.2px;margin-top:12px}
.text-link{color:var(--accent);font-size:14px;font-weight:700}
.text-link:hover{color:var(--accent-dark)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:13px 24px;font-size:14.5px;font-weight:700;letter-spacing:-.1px;line-height:18px;white-space:nowrap;transition:background-color .15s,border-color .15s}
.btn .i{width:12px;height:12px}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark)}
.btn-primary:disabled{opacity:.7;cursor:progress}
.btn-outline{background:#fff;color:var(--text);box-shadow:inset 0 0 0 1px var(--border-strong);padding-inline:22px;font-weight:600}
.btn-outline:hover{box-shadow:inset 0 0 0 1px var(--text-meta);background:var(--surface-1)}
.btn-dark{background:var(--dark);color:#fff}
.btn-dark:hover{background:#333}
.btn-sm{padding:10px 19px;font-size:13.5px;line-height:16px}

/* ---------------------------------------------------------------------------
   Nav
--------------------------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px var(--gutter);background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);box-shadow:inset 0 -1px 0 var(--border)}
.brand{display:flex;align-items:center;gap:9px;font-size:16.5px;font-weight:700;letter-spacing:-.3px}
.brand img{border-radius:6px}
.nav-right{display:flex;align-items:center;gap:30px}
.nav-link{color:var(--text-body);font-size:14px}
.nav-link:hover{color:var(--text)}

/* ---------------------------------------------------------------------------
   Map primitives — cards, links, bubbles, laid out on a fixed "stage"
   Positions are in design pixels (--x/--y/--w). On narrow screens the stage
   becomes a simple indented list (see the flow-mode media query).
--------------------------------------------------------------------------- */
.stage-fit{width:100%;max-width:calc(var(--sw)*1px);height:calc(var(--sh)*1px*var(--s,1));overflow:hidden;flex-shrink:0}
.stage{position:relative;width:calc(var(--sw)*1px);height:calc(var(--sh)*1px);transform:scale(var(--s,1));transform-origin:0 0}
.stage-clip{background:var(--surface-2);border-radius:12px;box-shadow:inset 0 0 0 1px var(--border);overflow:hidden}
.links{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--border-strong);stroke-width:1.5;stroke-linecap:round;pointer-events:none}

.card,.bubble{position:absolute;left:calc(var(--x)*1px);top:calc(var(--y)*1px);width:calc(var(--w)*1px)}
.card{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:11px 13px;background:#fff;border-radius:10px;box-shadow:inset 0 0 0 1px var(--border);text-align:left}
.card .kind,.bubble .kind{display:flex;align-items:center;gap:5px;color:var(--text-meta);font-size:8.5px;font-weight:700;letter-spacing:.9px;line-height:10px;text-transform:uppercase}
.card .kind .i{width:10px;height:10px}
.card .title{display:block;width:100%;color:var(--text);font-size:12.5px;font-weight:600;letter-spacing:-.2px;line-height:1.32}
.card .meta{display:flex;align-items:center;gap:5px;color:var(--text-meta);font-size:9.5px;line-height:11px}
.card .meta i{width:11px;height:11px;border-radius:50%;background:var(--accent-tint)}
.card.is-key{box-shadow:inset 0 0 0 1px var(--accent)}
.card.is-key .kind{color:var(--accent)}
.card.is-suggestion{box-shadow:none;outline:1.5px dashed var(--purple);outline-offset:-1.5px}
.card.is-suggestion .kind{color:var(--purple)}

.bubble{display:flex;flex-direction:column;gap:6px;padding:10px 12px;background:var(--accent-tint);border-radius:10px;box-shadow:inset 0 0 0 1px var(--accent);z-index:3}
.bubble .kind{color:var(--accent-dark)}
.bubble .quote{color:var(--accent-dark);font-size:12px;font-style:italic;line-height:1.4}
.bubble.is-inferred{background:#F3EEFA;box-shadow:inset 0 0 0 1px var(--purple)}
.bubble.is-inferred .kind,.bubble.is-inferred .quote{color:var(--purple)}
.bubble.is-inferred .quote{font-style:normal}

.loop-chip{position:absolute;left:20px;bottom:21px;display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1px var(--border);color:var(--text-body);font-size:11px;font-weight:600;line-height:13px}
.loop-chip .i{width:11px;height:11px}
button.loop-chip{cursor:pointer}
button.loop-chip:hover{color:var(--text);background:#fff}


/* ---------------------------------------------------------------------------
   Diagram styles from the app (localcanvas/canvas.pen)
--------------------------------------------------------------------------- */
/* Post-it notes (14 — Post-it note spec) */
.sticky,.note-label,.sym,.scrawl{position:absolute;left:calc(var(--x)*1px);top:calc(var(--y)*1px)}
.sticky{--fill:#FFF3B0;width:110px;height:110px;display:flex;flex-direction:column;justify-content:space-between;padding:12px;background:var(--fill);border-radius:4px;box-shadow:0 3px 8px -2px rgba(0,0,0,.12);transform:rotate(var(--r,0deg));color:#2A2A2A}
.note-text{font-size:12.5px;font-weight:600;line-height:1.35;letter-spacing:-.1px}
.note-meta{font-size:9.5px;color:rgba(42,42,42,.55)}
.sticky.is-decided{--fill:#D3F2DC}
.sticky.is-risk{--fill:#FFD6E0}
.sticky.is-question{--fill:#D6E8FB}
.sticky.is-idea{--fill:#E7DCFA}
.sticky.is-parked{--fill:#EDEDEA}
.sticky.is-new{box-shadow:0 0 0 1.5px var(--accent),0 6px 14px -3px rgba(0,0,0,.16)}
.note-label{color:var(--text-meta);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase}

/* Coloured + icons (04b) */
.card-icon{flex-direction:row;align-items:center;gap:10px;padding:12px}
.card-icon .tile{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;border-radius:9px;background:var(--c);color:#fff}
.card-icon .tile .i{width:18px;height:18px}
.card-icon .body{display:flex;flex-direction:column;gap:3px;min-width:0}
.stage-icons .links{stroke:#BDBDB8}
.stage-icons .ports circle{fill:#fff;stroke:#9B9A97;stroke-width:1.2}

/* Sketch (04a / 15 — Sketch style spec) */
.stage-sketch{background:#FFFDF7}
.stage-sketch .links{stroke:#2B2B2B;stroke-width:1.8}
.stage-sketch .links .scrawl-arrow{stroke:#E5484D;stroke-width:1.5}
.card-sketch{--fill:#fff;--ink:#2B2B2B;background:var(--fill);box-shadow:none;outline:1.8px solid var(--ink);outline-offset:-1.8px;border-radius:5px;transform:rotate(var(--r,0deg));font-family:var(--hand)}
.card-sketch .kind{font-size:11px;font-weight:400;letter-spacing:.5px;color:var(--ink)}
.card-sketch .title{font-size:14.5px;font-weight:400;letter-spacing:0;line-height:1.3;color:#2B2B2B}
.card-sketch .meta{font-size:11px;color:rgba(43,43,43,.6)}
.card-sketch.is-lime{--fill:#E8F7DC;--ink:#2F9E44}
.card-sketch.is-coral{--fill:#FFE3E3;--ink:#E03131}
.card-sketch.is-sky{--fill:#DCEEFC;--ink:#1971C2}
.card-sketch.is-tangerine{--fill:#FFF3D6;--ink:#F08C00}
.scrawl{font-family:var(--hand);font-size:14px;color:#E5484D;transform:rotate(-2deg)}

/* Architecture symbols (WOO-206 v2) — one map, three styles */
.stage-arch .links{stroke:#6B6B69;stroke-width:1.25;stroke-linejoin:round}
.stage-arch .links text{fill:var(--text-body);stroke:none;font-size:11px;text-anchor:middle}
/* Edge labels are lifted out of the SVG into HTML (mumble.js): Chrome can paint
   static SVG <text> at unscaled coordinates inside a CSS-scaled stage. */
.edge-row{display:none}
.edge-label{position:absolute;left:calc(var(--x)*1px);top:calc(var(--y)*1px);translate:-50% -82%;z-index:1;color:var(--text-body);font-size:11px;line-height:1;white-space:nowrap;pointer-events:none}
.edge-label.start{translate:0 -82%}
.sym{width:130px;margin-left:-65px;margin-top:-28px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.sym-tile{display:grid;place-items:center;width:56px;height:56px;border-radius:12px;color:#3A3A38;transition:background-color .2s,color .2s}
.sym-tile .i{width:46px;height:46px;stroke-width:1.1}
.sym-label{font-size:13px;font-weight:500;line-height:1.2;color:var(--text)}
.stage-arch[data-style="icons"] .sym-tile{background:var(--purple);color:#fff}
.stage-arch[data-style="icons"] .sym-tile .i{width:26px;height:26px;stroke-width:2}
.stage-arch[data-style="icons"] .sym-label{font-weight:700}
.stage-arch[data-style="sketch"]{background:#FFFDF7}
.stage-arch[data-style="sketch"] .sym-tile{color:#2B2B2B;transform:rotate(var(--r,0deg))}
.stage-arch[data-style="sketch"] .sym-tile .i{stroke-width:1.9}
.stage-arch[data-style="sketch"] .sym-label,.stage-arch[data-style="sketch"] .links text,.stage-arch[data-style="sketch"] .edge-label{font-family:var(--hand);font-weight:400;font-size:14px}
.stage-arch[data-style="sketch"] .links text,.stage-arch[data-style="sketch"] .edge-label{font-size:12px}
.stage-arch[data-style="sketch"] .links{stroke:#2B2B2B;stroke-width:1.6}
.style-switch{position:absolute;right:16px;top:14px;z-index:4;display:flex;padding:3px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--border)}
.style-switch button{padding:5px 12px;border-radius:999px;color:var(--text-body);font-size:11.5px;font-weight:600;line-height:14px}
.style-switch button:hover{color:var(--text)}
.style-switch button[aria-pressed="true"]{background:var(--accent-tint);color:var(--accent-dark)}


/* Call participants — Zoom-style tiles (the call's own UI, not Mumble's) */
.call-strip{position:absolute;left:calc(var(--x)*1px);top:calc(var(--y)*1px);z-index:3;display:flex;gap:6px;margin:0}
.call-mini{position:relative;width:84px;height:47px;margin:0;border-radius:7px;overflow:hidden;background:#242422;box-shadow:0 0 0 1px rgba(25,25,25,.12),0 4px 10px -6px rgba(25,25,25,.4);transition:box-shadow .25s}
.call-mini img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.call-mini figcaption{position:absolute;left:4px;bottom:4px;max-width:calc(100% - 8px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:1px 5px;border-radius:4px;background:rgba(0,0,0,.5);color:#fff;font-size:8px;font-weight:600;line-height:11px}
.call-mini.is-talking{box-shadow:0 0 0 2px #2DBE6C,0 4px 10px -6px rgba(25,25,25,.4)}
.strip-hero .call-mini{width:92px;height:52px}

/* ---------------------------------------------------------------------------
   1 · Hero
--------------------------------------------------------------------------- */
.hero{display:flex;flex-direction:column;align-items:center;gap:44px;padding:92px var(--gutter)}
.hero-cols{display:flex;align-items:center;gap:52px;width:100%;max-width:var(--max)}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px;flex:0 1 600px;min-width:0}
.pill{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:var(--accent-tint);color:var(--accent);font-size:12.5px;font-weight:600;line-height:15px}
.pill .i{width:13px;height:13px}
h1{font-size:clamp(52px,6.2vw,88px);font-weight:700;line-height:1.02;letter-spacing:-.04em}
h1 span{display:block}
.lede{color:var(--text-body);font-size:16.5px;line-height:1.55}
.hero-buttons{display:flex;flex-wrap:wrap;gap:12px}
.fine{color:var(--text-meta);font-size:12.5px}

.hero-fit{max-width:660px;border-radius:16px}
.stage-hero{background:var(--surface-1);border-radius:16px;box-shadow:inset 0 0 0 1px var(--border);overflow:hidden}
.agent{position:absolute;left:calc(var(--x)*1px);top:calc(var(--y)*1px);display:flex;gap:3px;color:var(--accent);z-index:5;transition:left .7s cubic-bezier(.3,.7,.2,1),top .7s cubic-bezier(.3,.7,.2,1),opacity .3s}
.agent .i{width:17px;height:17px;fill:currentColor;stroke-width:1.5}
.agent span{padding:3px 7px;border-radius:2px 6px 6px 6px;background:var(--accent);color:#fff;font-size:10.5px;font-weight:700;line-height:13px}
.caption-bar{position:absolute;left:0;right:0;bottom:0;height:44px;display:flex;align-items:center;padding:0 20px;background:rgba(25,25,25,.94);color:#fff;font-size:13.5px;font-weight:600;letter-spacing:-.1px;z-index:4}

/* hero animation states (driven by mumble.js) */
.stage-hero .card,.stage-hero .bubble{transition:opacity .35s ease,transform .35s cubic-bezier(.3,.7,.2,1),box-shadow .3s}
.stage-hero .is-off{opacity:0;transform:translateY(6px) scale(.97)}
.stage-hero .links path{stroke-dasharray:var(--len,200);stroke-dashoffset:0;transition:stroke-dashoffset .6s ease}
.stage-hero .links path.is-off{stroke-dashoffset:var(--len,200)}
.caret::after{content:"";display:inline-block;width:1.5px;height:1.1em;margin-left:2px;vertical-align:-2px;background:var(--accent);animation:blink 1s steps(1) infinite}
.struck{color:var(--text-meta);text-decoration:line-through;font-weight:500}
@keyframes blink{50%{opacity:0}}

/* voice dock */
.dock{width:560px;max-width:100%;display:flex;flex-direction:column;gap:9px;padding:12px 16px;background:#fff;border-radius:14px;box-shadow:inset 0 0 0 1px var(--border),0 6px 20px -4px rgba(25,25,25,.08)}
.dock-top{display:flex;align-items:center;gap:12px}
.dock-rec{display:grid;place-items:center;width:26px;height:26px;border-radius:999px;background:var(--accent);flex-shrink:0}
.dock-rec i{width:8px;height:8px;border-radius:2px;background:#fff}
.dock-time{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.wave{display:flex;align-items:center;gap:3px;height:26px;flex-shrink:0}
.wave i{width:2.5px;height:calc(var(--h)*1px);border-radius:2px;background:var(--border-strong)}
.wave i:nth-child(-n+11){background:var(--accent)}
.dock.is-live .wave i{animation:wave 1.1s ease-in-out infinite alternate;animation-delay:calc(var(--h)*-70ms)}
@keyframes wave{to{transform:scaleY(.45)}}
.dock-caption{flex:1;min-width:0;color:var(--text-body);font-size:11.5px;line-height:1.35}
.dock-meta{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dock-left{display:flex;align-items:center;gap:9px;min-width:0}
.shape-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:var(--accent-tint);color:var(--accent);font-size:10.5px;font-weight:700;line-height:13px}
.shape-chip .i{width:10px;height:10px}
.dock-count,.dock-hint{color:var(--text-meta);font-size:11px;white-space:nowrap}

/* ---------------------------------------------------------------------------
   2 · Pick a shape
--------------------------------------------------------------------------- */
.shapes{background:var(--surface-1);padding:92px var(--gutter)}
.wrap{max-width:var(--max);margin:0 auto}
.tabs{display:flex;gap:12px;margin-top:38px}
.tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:10px;padding:12px;background:#fff;border-radius:12px;box-shadow:inset 0 0 0 1px var(--border);text-align:left;transition:box-shadow .15s,transform .15s,background-color .15s}
.tab:hover{box-shadow:inset 0 0 0 1px var(--border-strong),0 6px 16px -8px rgba(25,25,25,.18);transform:translateY(-1px)}
.tab[aria-selected="true"]{background:var(--accent-tint);box-shadow:inset 0 0 0 1px var(--accent);transform:none}
.thumb{position:relative;display:block;width:100%;height:56px;border-radius:8px;background:var(--surface-2);overflow:hidden;container-type:inline-size}
.tab[aria-selected="true"] .thumb{background:#fff}
.thumb i{position:absolute;left:calc(var(--l)/185*100cqw);top:calc(var(--t)*1px);width:calc(var(--w)/185*100cqw);height:calc(var(--h,10)*1px);border-radius:3px;background:var(--border-strong)}
.thumb i.on{background:var(--accent)}
.tab-name{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;letter-spacing:-.2px;line-height:15px}
.tab-name .i{width:13px;height:13px}
.tab[aria-selected="true"] .tab-name{color:var(--accent-dark)}
.tab[aria-selected="true"] .tab-name .i{color:var(--accent)}
.tab-desc{min-height:28px;color:var(--text-meta);font-size:10.5px;line-height:1.35}
.swipe-hint{display:none;margin-top:14px;color:var(--text-meta);font-size:12px}

.panel{display:flex;gap:40px;margin-top:38px;padding:32px;background:#fff;border-radius:16px;box-shadow:inset 0 0 0 1px var(--border)}
.panel:focus-visible{outline-offset:4px}
.panel-copy{flex:0 0 320px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.panel-copy p{color:var(--text-body);font-size:16.5px;line-height:1.55}
.persona-links{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.panel .stage-fit{flex:1 1 auto;border-radius:12px}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.97)}}

/* ---------------------------------------------------------------------------
   3 · The receipt
--------------------------------------------------------------------------- */
.receipt{display:flex;flex-direction:column;align-items:center;padding:92px var(--gutter);text-align:center}
.receipt h2{max-width:760px}
.receipt-fit{margin-top:34px;border-radius:16px}
.stage-receipt{background:var(--surface-1);border-radius:16px;box-shadow:inset 0 0 0 1px var(--border);text-align:left}
.stage-receipt .links .dashed{stroke:var(--dark);stroke-dasharray:8 8}
.stage-receipt .links .tether{stroke:var(--accent);stroke-dasharray:8 6}
.stage-receipt .links .tether.is-inferred{stroke:var(--purple)}
.stage-receipt .card{cursor:pointer;transition:box-shadow .15s,transform .15s}
.stage-receipt .card:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--border-strong),0 6px 16px -8px rgba(25,25,25,.2)}
.stage-receipt .card.is-key:hover{box-shadow:inset 0 0 0 1px var(--accent),0 6px 16px -8px rgba(15,123,108,.35)}
.stage-receipt .card.is-suggestion:hover{box-shadow:0 6px 16px -8px rgba(105,64,165,.35)}
.stage-receipt .card[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--accent),0 0 0 4px rgba(15,123,108,.12)}
.stage-receipt .card.is-suggestion[aria-pressed="true"]{box-shadow:0 0 0 4px rgba(105,64,165,.12)}
.stage-receipt .bubble{width:216px;animation:pop .3s cubic-bezier(.3,.7,.2,1) both}
.hint-chip{position:absolute;left:32px;top:336px;display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--accent),0 0 0 5px rgba(15,123,108,.12);color:var(--accent-dark);font-size:12px;font-weight:600;line-height:15px;transition:opacity .3s}
.hint-chip i{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.6s ease-in-out infinite}
.stage-receipt.has-pick .hint-chip{opacity:0}
@keyframes pulse{50%{box-shadow:0 0 0 5px rgba(15,123,108,.2)}}
.footnote{margin-top:34px;color:var(--text-meta);font-size:13px}

/* ---------------------------------------------------------------------------
   4 · Yours
--------------------------------------------------------------------------- */
.yours{display:flex;flex-direction:column;align-items:center;gap:34px;padding:88px var(--gutter);background:var(--dark);color:#fff;text-align:center;scroll-margin-top:72px}
.yours h2{margin:0}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.chip{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#fff;font-size:14px;font-weight:600;letter-spacing:-.1px;line-height:17px;transition:background-color .15s,box-shadow .15s}
.chip:hover{background:rgba(255,255,255,.12)}
.chip .i{width:15px;height:15px}
.chip .chev{width:14px;height:14px;color:rgba(255,255,255,.54);transition:transform .2s}
.chip[aria-expanded="true"]{background:rgba(15,123,108,.25);box-shadow:inset 0 0 0 1px var(--accent)}
.chip[aria-expanded="true"] .chev{transform:rotate(180deg)}
.yours-panel{width:100%;max-width:880px;display:flex;flex-direction:column;align-items:center;gap:22px;animation:pop .3s ease both}
.yours-panel > p{max-width:720px;color:rgba(255,255,255,.8);font-size:16px;line-height:1.55}
.file-cols{display:flex;align-items:flex-start;gap:20px;width:100%;text-align:left}
.code-box{flex:1 1 0;min-width:0;display:flex;flex-direction:column;border-radius:12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);overflow:hidden}
.code-box code{display:block;font-family:var(--mono);font-size:12.5px;line-height:17px;white-space:pre;overflow-x:auto}
.code-label{color:rgba(255,255,255,.54);font-size:10px;font-weight:700;letter-spacing:1.2px;line-height:12px;text-transform:uppercase}
.tree{gap:7px;padding:20px}
.tree code{color:rgba(255,255,255,.82)}
.tree code.strong{color:#fff}
.tree code span{margin-left:10px;color:rgba(255,255,255,.5)}
.diff{padding:20px 0}
.diff .code-label{padding:0 20px 10px;text-transform:none;letter-spacing:.3px}
.diff code{padding:4px 20px;color:rgba(255,255,255,.72)}
.diff code.del{background:rgba(255,107,107,.12);color:#FF9B9B}
.diff code.add{background:rgba(52,211,153,.12);color:#7EE2A8}


/* ---------------------------------------------------------------------------
   4b · Pricing
--------------------------------------------------------------------------- */
.pricing{display:flex;flex-direction:column;align-items:center;padding:92px var(--gutter);background:var(--bg);text-align:center}
.section-lede{max-width:560px;margin-top:14px;color:var(--text-body);font-size:16.5px;line-height:1.55}
.price-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;width:100%;max-width:var(--max);margin-top:38px;text-align:left}
.price-card{display:flex;flex-direction:column;gap:10px;padding:28px;background:#fff;border-radius:16px;box-shadow:inset 0 0 0 1px var(--border)}
.price-card.is-key{box-shadow:inset 0 0 0 1px var(--accent),0 10px 30px -18px rgba(15,123,108,.5)}
.price-tag{align-self:flex-start;padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--text-body);font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
.price-card.is-key .price-tag{background:var(--accent-tint);color:var(--accent-dark)}
.price-card.is-soon{background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--border)}
.price-card.is-soon .price-tag{background:#EFE8F8;color:var(--purple)}
.price-card.is-soon li::before{border-color:var(--text-meta)}
.price.price-word{display:flex;align-items:flex-end;min-height:44px;font-size:26px;letter-spacing:-.6px;line-height:1.15}
.price{font-size:44px;font-weight:700;letter-spacing:-1.5px;line-height:1}
.price-card p{color:var(--text);font-size:15px;font-weight:600}
.price-card ul{margin:4px 0 0;padding:14px 0 0;list-style:none;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:9px}
.price-card li{position:relative;padding-left:22px;color:var(--text-body);font-size:14px;line-height:1.45}
.price-card li::before{content:"";position:absolute;left:2px;top:4px;width:10px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.pricing .fine{margin-top:22px}

/* ---------------------------------------------------------------------------
   5 · Close + FAQ
--------------------------------------------------------------------------- */
.close{display:flex;flex-direction:column;align-items:center;padding:92px var(--gutter);text-align:center}
.close h2{margin:0;line-height:1.15}
.signup{display:flex;flex-direction:column;align-items:center;width:100%;max-width:488px;padding-top:28px}
.signup-row{display:flex;gap:10px;width:100%}
.signup input[type="email"]{flex:1;min-width:0;height:46px;padding:0 20px;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--border-strong);font:inherit;font-size:14.5px;color:var(--text)}
.signup input[type="email"]::placeholder{color:var(--text-meta)}
.signup input[type="email"]:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--accent),0 0 0 4px rgba(15,123,108,.12)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.microcopy{padding-top:12px;color:var(--text-meta);font-size:13px}
.signup-msg{margin-top:14px;padding:10px 16px;border-radius:10px;background:var(--accent-tint);color:var(--accent-dark);font-size:14px;font-weight:600}
.signup-msg[data-state="error"]{background:#FDECEC;color:#A22A2A}
.audience{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 30px;padding-top:26px}
.faq-section{display:flex;align-items:flex-start;justify-content:center;gap:64px;padding:96px var(--gutter);background:var(--surface-1);scroll-margin-top:72px}
.faq-head{flex:0 0 280px;position:sticky;top:120px}
.faq-head h2{font-size:36px}
.faq{flex:0 1 760px;min-width:0;text-align:left}
.faq details{border-top:1px solid var(--border)}
.faq details:last-child{border-bottom:1px solid var(--border)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;font-size:16.5px;font-weight:600;letter-spacing:-.2px;line-height:20px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .i{width:17px;height:17px;color:var(--text-meta)}
.faq summary:hover{color:var(--accent-dark)}
.faq details[open] summary{color:var(--accent-dark)}
.faq summary .minus,.faq details[open] summary .plus{display:none}
.faq details[open] summary .minus{display:block;color:var(--accent-dark)}
.faq details p{padding:0 80px 22px 0;color:var(--text-body);font-size:15px;line-height:1.6}

/* ---------------------------------------------------------------------------
   Footer
--------------------------------------------------------------------------- */
.footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px var(--gutter);border-top:1px solid var(--border);color:var(--text-meta);font-size:12.5px}
.footer-left{display:flex;align-items:center;gap:9px}
.footer-left img{border-radius:5px}
.footer-right{display:flex;gap:24px}
.footer-right a:hover{color:var(--text)}

section[id]{scroll-margin-top:72px}

/* ---------------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------------- */
@media (max-width:1180px){
  :root{--gutter:40px}
  .faq-section{flex-direction:column;align-items:stretch;gap:28px}
  .faq-head{position:static;flex:none}
  .faq{flex:none;max-width:760px}
  .hero-cols{flex-direction:column;align-items:flex-start;gap:44px}
  .hero-copy{flex:none;max-width:640px}
  .hero-fit{max-width:660px}
  .panel{flex-direction:column;gap:24px}
  .panel-copy{flex:none;max-width:560px}
}
@media (max-width:900px){
  .tabs{overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter)*-1);padding:2px var(--gutter);scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 150px;scroll-snap-align:start}
  .swipe-hint{display:block}
  .file-cols{flex-direction:column;align-items:stretch}
  .code-box{flex:none}
}
@media (max-width:640px){
  :root{--gutter:20px}
  .nav{padding-block:14px}
  .nav-link{display:none}
  .hero{gap:20px;padding-block:40px 56px}
  .hero-copy{gap:18px}
  .hero-buttons{width:100%;flex-direction:column}
  .hero-buttons .btn{width:100%;padding-block:15px}
  h2{font-size:30px;letter-spacing:-.8px}
  .shapes,.receipt,.close,.faq-section{padding-block:64px}
  .faq-head h2{font-size:30px}
  .faq summary{font-size:15.5px;line-height:1.35}
  .yours{padding-block:64px;gap:26px}
  .panel{padding:16px;margin-top:26px}
  .panel-copy p{font-size:15px}
  .signup-row{flex-direction:column}
  .signup input[type="email"]{flex:none}
  .signup-row .btn{padding-block:15px}
  .faq details p{padding-right:0}
  .footer{flex-direction:column;align-items:flex-start}
  .dock-caption,.dock-hint,.dock-count{display:none}

  /* Flow mode: maps become an indented list, links drawn as a rail */
  .stage-fit{height:auto;max-width:none}
  .stage{width:auto;height:auto;transform:none;display:flex;flex-direction:column;gap:10px;padding:12px}
  .stage .links,.stage .edge-label{display:none}
  .stage .card,.stage .bubble{position:relative;left:auto;top:auto;width:auto;max-width:280px;margin-left:calc(var(--d,0)*24px)}
  .stage .edge-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px;margin:-6px 0 2px 26px;color:var(--text-meta);font-size:12px;line-height:1.3;transition:opacity .3s}
  .stage .edge-row.is-off{opacity:0}
  .stage .edge-row.is-scratched{opacity:.45;text-decoration:line-through}
  .er-hook{color:var(--border-strong);font-size:14px}
  .er-label{padding:2px 7px;border-radius:5px;background:#fff;box-shadow:inset 0 0 0 1px var(--border);color:var(--text-body);font-weight:600}
  .er-arrow{color:var(--text-meta)}
  .er-target{display:inline-flex;align-items:center;gap:5px;color:var(--text);font-weight:600}
  .er-target .i{width:14px;height:14px;color:var(--text-body)}
  .stage-arch[data-style="sketch"] .edge-row{font-family:var(--hand);font-size:13px}
  .rail{position:absolute;z-index:0;border-left:1.5px solid var(--border-strong);border-bottom:1.5px solid var(--border-strong);border-bottom-left-radius:7px;pointer-events:none}
  .stage > :not(.rail){z-index:1}
  .stage .sticky,.stage .note-label,.stage .sym,.stage .scrawl{position:relative;left:auto;top:auto}
  .stage .call-strip{position:relative;left:auto;top:auto;order:-1;flex-wrap:wrap}
  .stage-notes .call-strip{flex-basis:100%}
  .stage .strip-hero{align-self:flex-end}
  .stage-notes{flex-direction:row;flex-wrap:wrap;gap:12px}
  .stage-notes .note-label{flex-basis:100%;margin-top:6px}
  .stage-notes .loop-chip{flex-basis:auto}
  .stage .card-sketch,.stage .card-icon{max-width:300px}
  .stage-arch .sym{margin:0;width:auto;flex-direction:row;gap:12px;text-align:left}
  .stage-arch .sym-tile .i{width:30px;height:30px}
  .style-switch{position:static;align-self:flex-start;order:-1}
  .scrawl{transform:none;margin-left:12px}
  .price-cards{grid-template-columns:1fr}
  .agent{display:none}
  .caption-bar{position:static;margin:2px -12px -12px;border-radius:0}
  .loop-chip{position:static;align-self:flex-start;margin-top:4px}
  .hint-chip{position:static;align-self:flex-start;order:-1;margin-bottom:4px}
  .stage-receipt .bubble{width:auto;max-width:280px}
  .receipt-fit,.hero-fit{max-width:none}
}

/* ===========================================================================
   Persona pages (/mumble/product-teams …) — share everything above
=========================================================================== */
.nav-link.is-current{color:var(--text);font-weight:700}
.h1-persona{font-size:clamp(40px,4.4vw,60px);letter-spacing:-.04em}
.persona .hero-cols{align-items:center}
@media (min-width:1181px){.persona .hero-copy{flex-basis:660px}}

/* hero map: call tile, step cards, blocked step */
.call-tile{position:absolute;left:calc(var(--x)*1px);top:calc(var(--y)*1px);width:140px;height:94px;border-radius:10px;background:#242422;overflow:hidden;box-shadow:inset 0 0 0 1px var(--border)}
.call-tile{z-index:2}
.call-tile img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.call-name{position:absolute;left:8px;bottom:8px;padding:3px 7px;border-radius:5px;background:rgba(0,0,0,.5);color:#fff;font-size:8.5px;font-weight:600;line-height:10px}
.call-rec{position:absolute;left:8px;top:8px;display:flex;align-items:center;gap:4px;padding:3px 6px;border-radius:5px;background:rgba(0,0,0,.5);color:#fff;font-size:8px;font-weight:700;letter-spacing:.6px;line-height:10px}
.call-rec i{width:6px;height:6px;border-radius:50%;background:var(--rec);animation:pulse-rec 1.4s ease-in-out infinite}
@keyframes pulse-rec{50%{opacity:.35}}
.self-view{position:absolute;right:6px;top:6px;width:42px;height:24px;border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.6)}
.self-view img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.pain-face{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--accent-tint)}
.t-who{display:flex;align-items:center;gap:6px}
.t-who img{width:18px;height:18px;border-radius:50%;object-fit:cover}
.card-step .badge{display:none}
.card-step.is-blocked .badge{display:inline-flex}
.card-step{transition:box-shadow .3s}
.card-step{gap:8px;padding:11px 12px}
.step-tile{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--surface-2);color:var(--text-body)}
.step-tile .i{width:19px;height:19px}
.card-step.is-teal .step-tile{background:var(--accent-tint);color:var(--accent)}
.card-step.is-blocked{box-shadow:inset 0 0 0 1px #B0761A}
.card-step.is-blocked .step-tile{background:#FBEFD9;color:#B0761A}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:#FBEFD9;color:#B0761A;font-size:8.5px;font-weight:700;letter-spacing:.9px;line-height:10px;text-transform:uppercase}
.badge .i{width:10px;height:10px}
.links .tether{stroke:var(--border-strong)}

/* sound familiar */
.familiar{background:var(--surface-1);padding:96px var(--gutter)}
.familiar h2{margin:0}
.pain-cards{display:flex;gap:20px;margin-top:40px}
.pain-card{flex:1 1 0;display:flex;flex-direction:column;gap:14px;padding:28px;background:#fff;border-radius:16px;box-shadow:inset 0 0 0 1px var(--border)}
.pain-card .eyebrow{line-height:1.3}
.pain-card h3{margin:0;font-size:19px;font-weight:700;letter-spacing:-.4px;line-height:1.35}
.pain-card p:last-child{color:var(--text-body);font-size:14.5px;line-height:1.5}

/* three conversations */
.conversations{padding:96px var(--gutter)}
.conv-title{max-width:820px;margin:0;line-height:1.12}
.tabs-3{margin-top:32px}
.tabs-3 .tab{flex:0 0 208px}
.thumb i.box{background:#fff;box-shadow:inset 0 0 0 1px var(--border);border-radius:4px}
.thumb i.box.warn{box-shadow:inset 0 0 0 1px #B0761A}
.thumb i.wire{background:var(--border-strong);border-radius:0}
.thumb i.tint{background:var(--accent-tint)}
.thumb i.soft{background:var(--surface-2)}
.tab[aria-selected="false"] .thumb i.soft{background:#fff}
.thumb i.ev{background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--border)}
.thumb i.pad{border-radius:3px}
.card.is-hypothesis{box-shadow:inset 0 0 0 1px var(--purple)}
.card.is-hypothesis .kind{color:var(--purple)}
.sep-label{display:flex;align-items:center;gap:5px;color:var(--purple);font-size:8.5px;letter-spacing:.9px}
.sep-label .i{width:11px;height:11px}
.links .sep{stroke-dasharray:7 6}
.sticky-hand{width:213px;height:76px;justify-content:flex-start;padding:12px 16px;box-shadow:0 2px 6px -1px rgba(25,25,25,.15)}
.sticky-hand .note-text{font-family:var(--script);font-size:21px;font-weight:400;line-height:1.1;color:#2A2A28}
.loop-chip-right{left:auto;right:20px}

/* every insight has a receipt */
.insight .eyebrow{margin-bottom:0}
.insight-board{display:flex;width:100%;max-width:var(--max);margin-top:42px;border-radius:16px;background:var(--surface-2);border:1px solid var(--border);overflow:hidden;text-align:left}
.insight-board .stage-fit{flex:1 1 auto;max-width:960px}
.stage-insight .card{cursor:pointer}
.stage-insight .card[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--accent),0 2px 10px -2px rgba(15,123,108,.18)}
.stage-insight .card[aria-pressed="true"] .kind{color:var(--accent)}
.stage-insight .card.is-suggestion[aria-pressed="true"]{box-shadow:0 0 0 4px rgba(105,64,165,.12)}
.stage-insight .card.is-suggestion[aria-pressed="true"] .kind{color:var(--purple)}
.stage-insight .card .meta i{width:11px;height:11px;border-radius:50%;background:var(--accent-tint)}
.stage-insight .links .inferred-link{stroke:var(--purple);transition:opacity .3s}
.stage-insight .links .tether{stroke:var(--accent)}
.stage-insight .links .tether.is-inferred{stroke:var(--purple)}
.stage-insight .bubble{animation:pop .3s cubic-bezier(.3,.7,.2,1) both}
.remove-chip{position:absolute;left:calc(var(--x)*1px);top:calc(var(--y)*1px);z-index:3;display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--border-strong),0 2px 8px -1px rgba(25,25,25,.15);color:var(--text-body);font-size:11px;font-weight:600;line-height:13px}
.remove-chip:hover{color:var(--text)}
.remove-chip .i{width:11px;height:11px}
.transcript{flex:0 0 352px;display:flex;flex-direction:column;gap:6px;padding:18px 20px;background:#fff;border-left:1px solid var(--border)}
.transcript-head{display:flex;justify-content:space-between;padding-bottom:8px;color:var(--text-meta);font-size:9.5px}
.transcript-head span:first-child{font-size:8.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase}
.t-line{display:flex;gap:10px;padding:7px 9px;border-radius:6px;cursor:pointer;transition:background-color .2s}
.t-line:hover{background:var(--surface-1)}
.t-line time{flex-shrink:0;padding-top:2px;color:var(--text-meta);font-size:10px;font-weight:600}
.t-line span{color:var(--text-body);font-size:12.5px;line-height:1.5}
.t-line.is-on{background:var(--accent-tint)}
.t-line.is-on time{color:var(--accent)}
.t-line.is-on span{color:var(--accent-dark)}
.insight-caption{margin-top:14px;color:var(--text-body);font-size:14.5px;line-height:1.5}
.chips-light{margin-top:18px}
.chips-light .chip{background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--border);color:var(--text)}
.chips-light .chip:hover{background:#fff}
.chips-light .chip .chev{color:var(--text-meta)}
.chips-light .chip[aria-expanded="true"]{background:var(--accent-tint);box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent-dark)}
.chip-panel{max-width:640px;margin-top:18px;animation:pop .3s ease both}
.chip-panel p{color:var(--text-body);font-size:15px;line-height:1.55}


@media (max-width:1180px){
  .price-cards{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
  .insight-board{flex-direction:column}
  .insight-board .stage-fit{max-width:none}
  .transcript{flex-basis:auto;border-left:0;border-top:1px solid var(--border)}
  .pain-cards{flex-direction:column}
}
@media (max-width:900px){
  .tabs-3 .tab{flex-basis:190px}
}
@media (max-width:640px){
  .familiar,.conversations{padding-block:64px}
  .pain-card{padding:22px}
  .stage .call-tile{position:relative;left:auto;top:auto;order:-1}
  .stage-persona{position:relative}
  .stage .card-step{flex-direction:row;align-items:center;flex-wrap:wrap}
  .stage .card-step .title{width:auto;flex:1}
  .stage .sticky-hand{width:100%;max-width:280px;height:auto;min-height:64px}
  .stage .remove-chip{position:relative;left:auto;top:auto;align-self:flex-start}
  .loop-chip-right{right:auto}
  .price-cards{grid-template-columns:1fr;max-width:420px}
}


/* ===========================================================================
   Engineers page
=========================================================================== */
.stage-hero .sym,.stage-hero .term-mini,.stage-hero .edge-label{transition:opacity .35s ease,transform .35s cubic-bezier(.3,.7,.2,1)}
.stage-arch .links text.start{text-anchor:start}
.sym.is-key .sym-tile{background:var(--accent-tint);color:var(--accent)}
.stage-arch[data-style="business"] .sym.is-key .sym-tile .i,.stage-eng .sym.is-key .sym-tile .i{width:30px;height:30px;stroke-width:1.6}
.sym.is-scratched{opacity:.4}
.sym.is-scratched .sym-label{text-decoration:line-through}
.stage .links path.is-scratched{stroke-dasharray:4 5!important;opacity:.45}
.stage .edge-label.is-scratched{opacity:.45;text-decoration:line-through}
.sym.is-inferred .sym-tile{outline:1.5px dashed var(--purple);outline-offset:3px;color:var(--purple)}
.sym.is-inferred .sym-label{color:var(--purple)}
.sym-kind{margin-top:-4px;color:var(--purple);font-size:8.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase}

.term-mini,.term-card{position:absolute;left:calc(var(--x)*1px);top:calc(var(--y)*1px);z-index:3;display:flex;flex-direction:column;gap:4px;padding:10px 14px 12px;border-radius:10px;background:#1C1C1A;box-shadow:0 10px 24px -12px rgba(0,0,0,.5);font-family:var(--mono);font-size:11px;line-height:1.5;color:rgba(255,255,255,.82)}
.term-mini{width:230px}
.term-card{width:380px}
.term-mini code,.term-card code{font-family:inherit;white-space:pre-wrap}
.term-dots{display:flex;gap:5px;margin-bottom:4px}
.term-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22)}
.term-mini b,.term-card b{color:#5FD3B8;font-weight:400}
.term-mini .dim{color:rgba(255,255,255,.5)}
.term-mini ins{color:#7EE2A8;text-decoration:none;margin-left:6px}
.term-mini del{color:#FF9B9B;text-decoration:none}
.term-card .ok{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.55)}
.term-card .ok .i{width:12px;height:12px;color:#7EE2A8}

/* diagrams in git (dark) */
.git-section{padding:96px var(--gutter);background:var(--dark);color:#fff}
.git-section h2{margin-bottom:38px}
.git-cols{display:flex;align-items:flex-start;gap:28px}
.git-left{flex:0 1 520px;min-width:0;display:flex;flex-direction:column;gap:22px}
.git-cols .diff{flex:1 1 0}
.git-left .code-box{flex:none}
.git-section .tree code.hl{color:#5FD3B8}
.git-section .tree code span{margin-left:14px}
.diff-head{display:flex;justify-content:space-between;align-items:center;padding:0 20px 12px!important;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.1);font-family:var(--mono);font-size:11.5px!important;letter-spacing:0!important;text-transform:none!important;color:rgba(255,255,255,.75)!important}
.diff-head ins{color:#7EE2A8;text-decoration:none}
.diff-head del{color:#FF9B9B;text-decoration:none}
.git-bullets{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.git-bullets li{position:relative;padding-left:16px;color:rgba(255,255,255,.78);font-size:14.5px}
.git-bullets li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:#5FD3B8}
.teams-use{margin-top:48px;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.teams-use summary{display:flex;align-items:center;justify-content:space-between;padding:20px 0;font-size:16.5px;font-weight:600;cursor:pointer;list-style:none}
.teams-use summary::-webkit-details-marker{display:none}
.teams-use summary .chev{width:16px;height:16px;color:rgba(255,255,255,.6);transition:transform .2s}
.teams-use[open] summary .chev{transform:rotate(180deg)}
.teams-use ul{margin:0;padding:0 0 12px;list-style:none}
.teams-use li{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid rgba(255,255,255,.08)}
.tu-tile{display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;border-radius:8px;background:rgba(255,255,255,.07);color:#5FD3B8}
.tu-tile .i{width:15px;height:15px}
.teams-use li b{display:block;font-size:15px;font-weight:600;color:#fff}
.teams-use li span:last-child{color:rgba(255,255,255,.62);font-size:13.5px}
.git-tip{margin-top:18px;font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.5)}

/* four conversations: terminal thumb, MCP flow */
.thumb-term{background:#1C1C1A!important;padding:10px 12px}
.tab[aria-selected="true"] .thumb-term{background:#1C1C1A!important}
.thumb-code{display:block;font-family:var(--mono);font-size:10px;line-height:1.6;color:rgba(255,255,255,.5)}
.thumb-code b{color:#5FD3B8;font-weight:400}
.flow-row{display:flex;align-items:center;gap:10px;margin-top:32px}
.flow-step{flex:1 1 0;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--border);font-size:13.5px;font-weight:600}
.flow-step .i{width:32px;height:32px;padding:8px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px var(--border);color:var(--text-body);flex-shrink:0}
.flow-step.is-agent{background:#F3EEFA;box-shadow:inset 0 0 0 1px var(--purple)}
.flow-step.is-agent .i{color:var(--purple)}
.flow-arrow{width:16px;height:16px;color:var(--text-meta);flex-shrink:0}
.flow-note{margin-top:14px;text-align:center;color:var(--text-body);font-size:13.5px}

@media (max-width:1180px){
  .git-cols{flex-direction:column;align-items:stretch}
  .git-left,.git-cols .diff{flex:none}
  .flow-row{flex-wrap:wrap}
  .flow-step{flex:1 1 40%}
  .flow-arrow{display:none}
}
@media (max-width:640px){
  .nav-link.nav-keep{display:inline}
  .git-section{padding-block:64px}
  .stage .term-mini,.stage .term-card{position:relative;left:auto;top:auto;width:auto;max-width:100%}
  .flow-step{flex-basis:100%}
  .diff code{white-space:pre;overflow-x:auto}
}


/* ===========================================================================
   Founders page
=========================================================================== */
.sticky-sketch{width:calc(var(--w,150)*1px);height:auto;min-height:44px;justify-content:flex-start;padding:12px 13px;border-radius:3px;box-shadow:0 2px 6px -1px rgba(25,25,25,.13)}
.sticky-sketch .note-text{font-family:var(--hand);font-size:14px;font-weight:400;line-height:1.3;letter-spacing:0;color:#3A3A37}
.sticky.is-ghost{opacity:.4;box-shadow:none;outline:1.5px dashed rgba(58,58,55,.35);outline-offset:-1.5px}
.sticky.is-ghost .note-text{color:rgba(58,58,55,.6)}
.sticky.is-moved{box-shadow:0 0 0 1.5px var(--accent),0 6px 14px -4px rgba(15,123,108,.3)}
.theme-label{position:absolute;left:calc(var(--x)*1px);top:calc(var(--y)*1px);font-family:var(--hand);font-size:15px;letter-spacing:.5px;text-transform:uppercase;color:var(--accent)}
.links-ink{stroke:rgba(58,58,55,.45);stroke-width:1.6}
.links .move-path{stroke:var(--accent);stroke-dasharray:4 5}
.stage-hero .sticky,.stage-hero .theme-label{transition:opacity .35s ease,transform .35s cubic-bezier(.3,.7,.2,1)}
.stage-hero .sticky.is-off{transform:rotate(var(--r,0deg)) translateY(8px) scale(.94)}
.keycap{position:absolute;left:340px;top:312px;display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 1px var(--border-strong),0 2px 4px rgba(25,25,25,.12);color:var(--text-meta);font-size:12px}
.keycap kbd{font:inherit;font-weight:600;font-size:12.5px;color:var(--text)}
.listen-ring{position:absolute;left:508px;top:286px;display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:rgba(231,164,184,.25);animation:ring 2.4s ease-in-out infinite}
.listen-ring::before{content:"";position:absolute;inset:10px;border-radius:50%;background:#E28AA6;box-shadow:inset 0 0 0 5px #E28AA6,inset 0 0 0 10px #fff}
.listen-ring i{position:relative;width:20px;height:20px;border-radius:50%;background:#E28AA6}
@keyframes ring{50%{box-shadow:0 0 0 8px rgba(231,164,184,.18)}}
.pro-con{position:absolute;left:calc(var(--x)*1px);top:calc(var(--y)*1px);width:214px;height:32px;display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:8px;font-size:12px;font-weight:600}
.pro-con .i{width:12px;height:12px;flex-shrink:0}
.pro-con.is-pro{background:#DBEDDB;color:#2F6B3A}
.pro-con.is-con{background:#FBE0DA;color:#A2402A}

/* change your mind */
.mind{padding:96px var(--gutter)}
.mind h2{margin:0 0 28px}
.before-after{display:flex;align-items:center;gap:24px}
.board-col{flex:1 1 0;min-width:0}
.board-label{margin-bottom:10px;color:var(--text-meta);font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
.stage-board{background:var(--surface-1);border-radius:14px;box-shadow:inset 0 0 0 1px var(--border);overflow:hidden}
.quote-strip{flex:0 0 220px;display:flex;flex-direction:column;align-items:center;gap:12px}
.bubble.bubble-static{position:static;width:100%;padding:14px 16px;border-radius:12px}
.bubble.bubble-static .quote{font-size:13px}
.ba-arrow{width:22px;height:22px;color:var(--text-meta)}
.style-compare{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:52px}
.seg{display:flex;gap:2px;padding:4px;border-radius:999px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border)}
.seg button{display:flex;align-items:center;gap:6px;padding:8px 18px;border-radius:999px;color:var(--text-meta);font-size:13px;font-weight:600}
.seg button .i{width:13px;height:13px}
.seg button[aria-pressed="true"]{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(25,25,25,.08)}
.compare-maps{display:flex;gap:24px;width:100%}
.compare-map{flex:1 1 0;min-width:0;border-radius:14px;transition:box-shadow .2s,opacity .2s;opacity:.7}
.compare-map.is-on{opacity:1;box-shadow:0 0 0 1.5px var(--accent)}
.compare-note{color:var(--text-body);font-size:13.5px}
.mind .chips-light{margin-top:36px}
.mind .chip-panel{margin-inline:auto;text-align:center}

@media (max-width:1180px){
  .before-after{flex-direction:column;align-items:stretch}
  .quote-strip{flex:none;flex-direction:row;justify-content:center}
  .quote-strip .bubble-static{max-width:320px}
  .ba-arrow{transform:rotate(90deg)}
  .compare-maps{flex-direction:column}
}
@media (max-width:640px){
  .mind{padding-block:64px}
  .stage .sticky-sketch{width:auto;max-width:280px;min-width:130px}
  .stage .theme-label{position:relative;left:auto;top:auto;flex-basis:100%;margin-top:6px}
  .stage .keycap{position:relative;left:auto;top:auto;align-self:flex-start}
  .stage-notes .caption-bar{flex-basis:calc(100% + 24px)}
  .stage .listen-ring{display:none}
  .stage .pro-con{position:relative;left:auto;top:auto;width:auto;max-width:280px;margin-left:24px}
  .compare-map:not(.is-on){display:none}
  .quote-strip{flex-direction:column}
}


/* ===========================================================================
   Site footer (all pages)
=========================================================================== */
.site-footer{padding:56px var(--gutter) 28px;border-top:1px solid var(--border);color:var(--text-body);font-size:14px}
.fcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;max-width:var(--max);margin:0 auto}
.fcols nav{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.fhead{margin-bottom:4px;color:var(--accent);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.fcols a:hover{color:var(--text)}
.fsig{max-width:var(--max);margin:40px auto 0;color:var(--text-body);font-size:13px}
.fbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:24px calc(var(--gutter)*-1) 0;padding:20px max(var(--gutter),calc(50% + var(--gutter) - var(--max)/2)) 0;border-top:1px solid var(--border);color:var(--text-meta);font-size:12.5px}
.fleft{display:flex;align-items:center;gap:9px}
.fleft img{border-radius:5px}
.fsocial{display:flex;gap:16px}
.fsocial a{color:var(--text-meta)}
.fsocial a:hover{color:var(--text)}
.fsocial .i{width:17px;height:17px}
.ffine{max-width:var(--max);margin:18px auto 0;color:var(--text-meta);font-size:12.5px}
.site-footer .fbar,.site-footer .fsig,.site-footer .ffine{box-sizing:border-box}
.yours-more{color:#5FD3B8}
.yours-more:hover{color:#8FE6D2}

/* ===========================================================================
   About — tiny space
=========================================================================== */
.about-hero{display:flex;flex-direction:column;align-items:center;padding:112px var(--gutter) 72px;text-align:center}
.about-hero h1{margin-top:14px;font-size:clamp(44px,5.4vw,72px);font-weight:700;letter-spacing:-.04em;line-height:1.05}
.about-hero .section-lede{max-width:700px;margin-top:22px;font-size:19px}
.squiggle{width:min(580px,100%);height:auto;margin-top:64px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.squiggle .wave-line{stroke:#E28AA6;stroke-width:2}
.squiggle .box-line,.squiggle rect{stroke:#6B6B69;stroke-width:1.5}
.squiggle .wave-line{stroke-dasharray:420;stroke-dashoffset:420;animation:draw 2.4s ease-out .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.why{display:flex;align-items:flex-start;gap:64px;max-width:1120px;margin:0 auto;padding:72px var(--gutter) 96px}
.why-text{flex:1 1 0;max-width:640px}
.why-text h2{margin:0 0 24px}
.why-text p{margin-bottom:18px;color:var(--text-body);font-size:19px;line-height:1.6}
.pull-quote{flex:0 0 300px;margin:40px 0 0;padding-top:20px;border-top:2px solid var(--accent);color:var(--accent);font-size:22px;font-weight:600;line-height:1.4;letter-spacing:-.3px}
.principles{padding:96px var(--gutter);background:var(--surface-1);scroll-margin-top:72px}
.principles h2{margin-bottom:14px}
.pr-lede{max-width:640px;margin:0;text-align:left}
.pr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:20px;margin-top:40px}
.principle{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:28px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--border);transition:background-color .2s,box-shadow .2s}
.principle.is-open{background:var(--accent-tint);box-shadow:inset 0 0 0 1px var(--accent)}
.pr-top{display:flex;align-items:center;gap:12px}
.pr-tile{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--surface-2);color:var(--accent)}
.principle.is-open .pr-tile{background:#fff}
.pr-tile .i{width:16px;height:16px}
.pr-num{color:var(--text-meta);font-size:12px;font-weight:700;letter-spacing:1px}
.principle h3{margin:6px 0 0;font-size:19px;font-weight:700;letter-spacing:-.3px}
.principle > p{color:var(--text-body);font-size:14.5px;line-height:1.55}
.pr-toggle{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:4px;color:var(--accent);font-size:13.5px;font-weight:700}
.pr-toggle .chev{width:14px;height:14px;transition:transform .2s}
.pr-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.pr-panel{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:5;padding:16px 24px 20px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--accent),0 16px 32px -16px rgba(25,25,25,.25);animation:pop .25s ease both}
.pr-panel-label{display:block;margin-bottom:8px;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
.pr-panel p{color:var(--text-body);font-size:14.5px;line-height:1.6}
.made{padding:96px var(--gutter)}
.made-card{display:flex;align-items:center;gap:36px;margin-top:20px;padding:24px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--border)}
.made-thumb{flex:0 0 360px;max-width:360px;border-radius:12px;pointer-events:none}
.made-copy{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.made-copy h3{margin:0;font-size:26px;font-weight:700;letter-spacing:-.5px}
.made-tag{color:var(--accent);font-size:16.5px;font-weight:700}
.made-copy p:not(.made-tag){color:var(--text-body);font-size:16.5px;line-height:1.55}
.made-copy .btn{margin-top:8px}
.who{margin-top:64px;scroll-margin-top:72px}
.who h2{font-size:26px;margin:0 0 10px}
.who p{color:var(--text-body);font-size:16.5px}
.who-links{margin-top:14px}

/* ===========================================================================
   What leaves your Mac
=========================================================================== */
.privacy-page{padding:56px var(--gutter) 96px}
.h1-page{margin-top:14px;font-size:40px;font-weight:700;letter-spacing:-1.2px;line-height:1.1}
.flow-diagram{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr) 40px minmax(0,1fr);grid-template-rows:auto auto 72px auto;margin:28px 0 0;padding:18px 32px 20px;border-radius:16px;background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--border)}
.fd-zone{grid-column:1/-1;grid-row:1/3;margin:-4px -24px 8px;border:1.5px dashed var(--border-strong);border-radius:4px;pointer-events:none}
.fd-zone span{display:block;padding:10px 16px 0;color:var(--text-meta);font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
.fd-box{grid-row:2;display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:2px;align-items:center;margin-bottom:22px;padding:12px 14px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--border);transition:opacity .3s,box-shadow .3s,background-color .3s}
.fd-audio{grid-column:1}
.fd-whisper{grid-column:3}
.fd-files{grid-column:5;background:var(--accent-tint);box-shadow:inset 0 0 0 1px var(--accent)}
.fd-box b{align-self:end;font-size:14px;font-weight:600;line-height:1.3}
.fd-files b{color:var(--accent-dark)}
.fd-box small{align-self:start;color:var(--text-meta);font-size:11.5px}
.fd-tile{grid-row:1/3;display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--surface-2);color:var(--text-body)}
.fd-files .fd-tile{background:#fff;color:var(--accent)}
.fd-tile .i{width:16px;height:16px}
.fd-audio,.fd-whisper,.fd-files{margin-top:36px}
.fd-arrow{grid-row:2;align-self:center;display:grid;place-items:center;margin-top:14px;color:var(--border-strong)}
.fd-a1{grid-column:2}
.fd-a2{grid-column:4}
.fd-arrow .i{width:22px;height:22px}
.fd-bridge{grid-column:5;grid-row:2/4;position:relative;margin-top:auto;height:72px;align-self:end;transition:opacity .3s}
.fd-line{position:absolute;top:0;bottom:0;width:1.5px;background:var(--accent)}
.fd-line.down{left:35%}
.fd-line.up{left:65%}
.fd-line.down::after,.fd-line.up::after{content:"";position:absolute;left:-4px;width:8px;height:8px;border:solid var(--accent);border-width:0 1.5px 1.5px 0}
.fd-line.down::after{bottom:0;transform:rotate(45deg)}
.fd-line.up::after{top:0;transform:rotate(-135deg)}
.fd-chip{position:absolute;top:24px;display:flex;align-items:center;gap:5px;padding:4px 9px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px var(--border);color:var(--accent-dark);font-size:11.5px;font-weight:600;white-space:nowrap}
.fd-chip .i{width:11px;height:11px}
.chip-down{right:calc(65% + 12px)}
.chip-up{left:calc(65% + 12px)}
.fd-provider{grid-column:5;grid-row:4;margin:0}
.fd-note{grid-column:1/4;grid-row:4;align-self:end;justify-self:start;display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px var(--border);color:var(--text-body);font-size:11.5px;font-weight:600;transition:box-shadow .3s,color .3s}
.fd-note .i{width:12px;height:12px}
.flow-diagram[data-ai="off"] .fd-bridge,.flow-diagram[data-ai="off"] .fd-provider{opacity:.25}
.flow-diagram[data-ai="off"] .fd-note{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent-dark)}
.three-lists{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start;margin-top:16px}
.tl{padding:18px 22px;border-radius:14px;background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--border)}
.tl.is-key{background:var(--accent-tint);box-shadow:inset 0 0 0 1px var(--accent)}
.tl-head{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:700}
.tl.is-key .tl-head{color:var(--accent-dark)}
.tl-head .i{width:16px;height:16px}
.tl ul{margin:10px 0 0;padding:0 0 0 18px;display:flex;flex-wrap:wrap;column-gap:26px;row-gap:6px;color:var(--text-body);font-size:14px}
.tl li::marker{color:var(--text-meta)}
.tl.is-key li::marker{color:var(--accent)}
.controls-title{margin:64px 0 6px;font-size:26px}
.controls-hint{margin-bottom:18px;color:var(--text-meta);font-size:13.5px}
.controls{border-radius:14px;box-shadow:inset 0 0 0 1px var(--border);overflow:hidden}
.control{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px}
.control + .control{border-top:1px solid var(--border)}
.control b{font-size:16.5px;font-weight:600}
.control p{margin-top:4px;color:var(--text-body);font-size:14.5px}
.switch{position:relative;flex-shrink:0;width:46px;height:26px;border-radius:999px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border-strong);transition:background-color .2s}
.switch::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(25,25,25,.25);transition:transform .2s}
.switch[aria-checked="true"]{background:var(--accent);box-shadow:none}
.switch[aria-checked="true"]::after{transform:translateX(20px)}
.small-print{margin-top:40px;color:var(--text-meta);font-size:13.5px}

@media (max-width:1180px){
  .why{flex-direction:column;gap:24px}
  .pull-quote{flex:none;margin:0}
  .pr-grid,.three-lists{grid-template-columns:repeat(2,minmax(0,1fr))}
  .made-card{flex-direction:column;align-items:flex-start}
  .made-thumb{flex:none;width:100%;max-width:480px}
  .fcols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
}
@media (max-width:760px){
  .flow-diagram{grid-template-columns:1fr;grid-template-rows:none;padding:20px}
  .fd-zone{grid-column:1;grid-row:1/6;margin:-4px -8px -10px}
  .fd-box,.fd-arrow,.fd-bridge,.fd-note{grid-column:1!important;margin:0}
  .fd-audio{grid-row:1!important;margin-top:44px!important}
  .fd-a1{grid-row:2!important}
  .fd-whisper{grid-row:3!important}
  .fd-a2{grid-row:4!important}
  .fd-files{grid-row:5!important;margin-bottom:12px!important}
  .fd-bridge{grid-row:6!important;height:110px;margin:10px 0 8px!important}
  .fd-provider{grid-row:7!important}
  .fd-note{grid-row:8!important;margin-top:12px!important;align-self:start}
  .fd-arrow{margin:6px 0!important;transform:rotate(90deg)}
  .fd-line.down{left:14%}
  .fd-line.up{left:86%}
  .chip-down,.chip-up{left:50%;right:auto;transform:translateX(-50%)}
  .chip-down{top:26px}
  .chip-up{top:66px}
}
@media (max-width:640px){
  .about-hero{padding-block:64px 40px}
  .about-hero .section-lede,.why-text p{font-size:16.5px}
  .why,.principles,.made,.privacy-page{padding-block:64px}
  .pr-grid,.three-lists{grid-template-columns:1fr}
  .pr-grid{grid-auto-rows:auto}
  .pr-panel{position:static;width:100%;margin-top:4px;box-shadow:inset 0 0 0 1px var(--accent)}
  .h1-page{font-size:30px}
  .fcols{grid-template-columns:1fr 1fr}
  .fbar{flex-direction:row}
  .control{align-items:flex-start}
}


/* ===========================================================================
   Nav — "Use cases" menu
=========================================================================== */
.nav-menu{position:relative}
.nav-menu-btn{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:14px;color:var(--text-body);cursor:pointer}
.nav-menu-btn.is-current{color:var(--text);font-weight:700}
.nav-chev{width:14px;height:14px;transition:transform .2s}
.nav-menu-btn[aria-expanded="true"] .nav-chev{transform:rotate(180deg)}
.nav-dropdown{position:absolute;left:-16px;top:calc(100% + 14px);z-index:60;display:flex;flex-direction:column;gap:2px;width:300px;padding:8px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--border),0 18px 40px -16px rgba(25,25,25,.3);animation:pop .18s ease both}
.nav-dd-item{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:10px}
.nav-dd-item:hover,.nav-dd-item[aria-current]{background:var(--surface-1)}
.nav-dd-icon{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;border-radius:8px;background:var(--accent-tint);color:var(--accent)}
.nav-dd-icon .i{width:16px;height:16px}
.nav-dd-item b{display:block;font-size:14px;font-weight:600;color:var(--text)}
.nav-dd-item small{display:block;margin-top:2px;font-size:12.5px;color:var(--text-meta)}
@media (max-width:640px){
  .nav-right{gap:16px}
  .nav-menu-btn.nav-keep{display:inline-flex}
  .nav-dropdown{left:auto;right:-110px;width:min(300px,calc(100vw - 32px))}
}

/* ===========================================================================
   Docs
=========================================================================== */
.docs{display:grid;grid-template-columns:200px minmax(0,760px);justify-content:center;gap:64px;padding:64px var(--gutter) 96px}
.docs-toc{position:sticky;top:104px;align-self:start;display:flex;flex-direction:column;gap:10px;padding-top:6px;font-size:13.5px}
.docs-toc a{color:var(--text-body)}
.docs-toc a:hover{color:var(--accent)}
.docs-body{min-width:0}
.docs-body h2{margin:56px 0 14px;font-size:26px;letter-spacing:-.5px;scroll-margin-top:88px}
.docs-body p{margin-bottom:14px;color:var(--text-body);font-size:15.5px;line-height:1.65}
.docs-body p b,.docs-list b{color:var(--text)}
.docs-body :not(pre) > code{padding:1px 6px;border-radius:5px;background:var(--surface-2);font-family:var(--mono);font-size:.86em;color:var(--text)}
.docs-lede{margin-top:16px;font-size:18px!important}
.docs-callout{display:flex;align-items:flex-start;gap:10px;margin-top:20px;padding:14px 16px;border-radius:12px;background:var(--accent-tint);box-shadow:inset 0 0 0 1px rgba(15,123,108,.3);color:var(--accent-dark)!important;font-size:14.5px!important}
.docs-callout .i{width:17px;height:17px;flex-shrink:0;margin-top:2px}
.doc-code{position:relative;margin:0 0 18px;padding:16px 18px;border-radius:12px;background:#1C1C1A;color:rgba(255,255,255,.86);font-family:var(--mono);font-size:12.5px;line-height:1.65;overflow-x:auto}
.doc-code[data-lang]::before{content:attr(data-lang);position:absolute;right:12px;top:8px;color:rgba(255,255,255,.35);font-size:10.5px;letter-spacing:.5px}
.doc-code code{font-family:inherit;white-space:pre}
.doc-diff .add{display:inline-block;min-width:100%;background:rgba(52,211,153,.12);color:#7EE2A8}
.doc-diff .del{display:inline-block;min-width:100%;background:rgba(255,107,107,.12);color:#FF9B9B}
.doc-diagram{margin:18px 0 8px;border-radius:14px}
.doc-zone{position:absolute;left:24px;top:24px;width:760px;height:332px;border:1.5px dashed var(--border-strong);border-radius:6px}
.doc-zone span{display:block;padding:10px 14px;color:var(--text-meta);font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
.sym-sub{margin-top:-5px;color:var(--text-meta);font-size:11px;font-family:var(--mono)}
@media (min-width:641px){.doc-diagram .sym{width:176px;margin-left:-88px}}
.docs-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.docs-card{padding:20px 22px;border-radius:14px;background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--border)}
.docs-card .tl-head{margin-bottom:8px}
.docs-card p:last-child{margin:0;font-size:14.5px}
.docs-table{margin-bottom:18px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--border);overflow:hidden;overflow-x:auto}
.docs-table table{width:100%;border-collapse:collapse;font-size:14px}
.docs-table th{padding:12px 16px;background:var(--surface-1);text-align:left;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent)}
.docs-table th span{text-transform:none;letter-spacing:0;font-family:var(--mono);color:var(--text-meta);font-weight:400}
.docs-table td{padding:11px 16px;border-top:1px solid var(--border);vertical-align:top;color:var(--text-body);line-height:1.55}
.docs-table td:first-child{width:190px;white-space:nowrap}
.docs-table td code{font-family:var(--mono);font-size:12.5px;color:var(--text)}
.docs-list{margin:0 0 16px;padding-left:20px;display:flex;flex-direction:column;gap:10px;color:var(--text-body);font-size:15.5px;line-height:1.6}
@media (max-width:1000px){
  .docs{grid-template-columns:minmax(0,1fr)}
  .docs-toc{position:static;flex-direction:row;flex-wrap:wrap;gap:8px 16px}
  .docs-toc .fhead{flex-basis:100%}
}
@media (max-width:640px){
  .docs{padding-block:40px 64px}
  .docs-cards{grid-template-columns:1fr}
  .docs-toc{display:none}
  .doc-zone{display:none}
  .sym-sub{margin-top:0}
  .docs-table td:first-child{white-space:normal;width:auto}
}


/* ===========================================================================
   Compare
=========================================================================== */
.compare-link{display:inline-block;margin-top:18px}
.cmp-hero{display:flex;flex-direction:column;align-items:center;padding:96px var(--gutter) 88px;text-align:center}
.cmp-hero h1{font-size:clamp(40px,4.6vw,60px);font-weight:700;letter-spacing:-.04em;line-height:1.06}
.cmp-hero h1 span{display:block}
.cmp-hero .section-lede{max-width:640px;margin-top:20px}
.cmp-actions{justify-content:center;align-items:center;gap:22px;margin-top:28px}
.three-title{margin:72px 0 22px;font-size:22px;letter-spacing:-.4px}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;width:100%;max-width:var(--max);text-align:left}
.three-card{display:flex;flex-direction:column;border-radius:14px;box-shadow:inset 0 0 0 1px var(--border);overflow:hidden;background:#fff}
.three-card.is-key{box-shadow:inset 0 0 0 1.5px var(--accent)}
.three-head{padding:12px 16px;border-bottom:1px solid var(--border);font-size:13.5px;font-weight:700}
.three-card.is-key .three-head{background:var(--accent-tint);color:var(--accent-dark);border-color:rgba(15,123,108,.3)}
.three-vis{position:relative;height:210px}
.vis-notes{display:flex;flex-direction:column;gap:9px;padding:18px 20px;background:var(--surface-1)}
.vis-notes i{display:block;width:var(--w);height:5px;border-radius:3px;background:var(--border)}
.vis-notes span{position:absolute;left:20px;bottom:14px;color:var(--text-meta);font-size:11.5px;font-family:var(--mono)}
.vis-board{background-color:#FAFAF8;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:28px 28px;display:grid;place-items:center}
.lonely{padding:14px 16px;width:120px;background:#FBEFC0;box-shadow:0 2px 6px -1px rgba(25,25,25,.15);transform:rotate(-2deg);font-family:var(--hand);font-size:13px;color:#3A3A37;line-height:1.3}
.vis-mumble{padding:10px 12px;background:var(--surface-1)}
.vis-mumble .stage-fit{margin:0 auto}
.fits{padding:96px var(--gutter);background:var(--surface-1)}
.pos-map{position:relative;display:grid;grid-template-columns:120px minmax(0,760px);grid-template-rows:auto 1fr 1fr auto auto;column-gap:18px;max-width:900px;margin:44px auto 0}
.axis-y-title{grid-column:1/-1;margin:0 0 14px 138px;color:var(--text-meta);font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
.axis-y{grid-column:1;align-self:center;justify-self:end;font-size:14px;font-weight:600}
.y-top{grid-row:2}
.y-bot{grid-row:3}
.quads{grid-column:2;grid-row:2/4;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(170px,auto);gap:20px;padding:0 0 18px 18px;border-left:1.5px solid var(--border-strong);border-bottom:1.5px solid var(--border-strong)}
.quad{position:relative;padding:18px 20px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--border)}
.quad.q-tr{background:var(--accent-tint);box-shadow:inset 0 0 0 1px var(--accent)}
.quad-title{margin-bottom:12px;color:var(--text-meta);font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
.q-tr .quad-title{color:var(--accent-dark)}
.quad-mumble{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;color:var(--accent-dark)}
.quad-mumble i{width:16px;height:16px;border-radius:50%;background:var(--accent)}
.quad ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.quad li{position:relative}
.quad-name{display:flex;align-items:center;gap:8px;color:var(--text-body);font-size:14px}
.quad-name::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--border-strong)}
.quad-name:hover,.quad-name[aria-expanded="true"]{color:var(--text)}
.quad-name[aria-expanded="true"]::before{background:var(--accent)}
.quad-tip{position:absolute;left:24px;top:calc(100% + 6px);z-index:10;display:none;width:280px;padding:12px 14px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px var(--border),0 14px 30px -12px rgba(25,25,25,.3);color:var(--text);font-size:13.5px;line-height:1.5}
.quad-tip .text-link{display:block;margin-top:6px;font-size:13px}
.quad-name[aria-expanded="true"] + .quad-tip{display:block;animation:pop .18s ease both}
.axis-x{grid-row:4;margin-top:12px;font-size:13.5px}
.x-left{grid-column:2;justify-self:start;padding-left:18px;color:var(--text-body)}
.x-right{grid-column:2;justify-self:end;font-weight:600}
.axis-x-title{grid-column:2;grid-row:5;padding-left:18px;margin-top:6px;color:var(--text-meta);font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
.side{padding:96px var(--gutter);scroll-margin-top:72px}
.side-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.side-head h2{margin:0}
.side-meta{margin-top:6px;color:var(--text-meta);font-size:13px}
.chip-sm{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--border);color:var(--text-body);font-size:13px;font-weight:600}
.chip-sm .i{width:13px;height:13px}
.chip-sm[aria-pressed="true"]{background:var(--accent-tint);box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent-dark)}
.cmp-table-wrap{position:relative;border-radius:14px;box-shadow:inset 0 0 0 1px var(--border);overflow-x:auto}
.cmp-table{width:100%;border-collapse:collapse;font-size:14px}
.cmp-table th,.cmp-table td{padding:13px 14px;border-top:1px solid var(--border);text-align:center}
.cmp-table thead th{border-top:0;background:var(--surface-1);font-weight:700}
.cmp-table thead .feat-h{color:var(--text-meta);font-size:12px;font-weight:500}
.cmp-table tbody th{text-align:left;font-weight:500;min-width:240px}
.cmp-table .feat-h{text-align:left}
.cmp-table .is-mumble{background:var(--accent-tint);color:var(--accent-dark)}
.cmp-table thead .is-mumble{color:var(--accent)}
.cmp-table .is-extra,.cmp-table .is-more{display:none}
.cmp-table.show-extra .is-extra{display:table-cell}
.cmp-table.show-more .is-more{display:table-row}
.cmp-table .i{width:16px;height:16px;vertical-align:middle}
.cmp-table .ck{color:var(--text)}
.is-mumble .ck{color:var(--accent)}
.cmp-table .cx{color:var(--text-meta);width:14px;height:14px}
.cmp-table .dash,.cmp-table .na{color:var(--text-meta);font-size:12.5px}
.cmp-table .txt{color:var(--text-body);font-size:12.5px;font-weight:600}
.note-row td{padding:9px 14px;background:var(--surface-1);color:var(--text-meta);font-size:12.5px;text-align:left}
.has-tip{position:relative}
.tip-btn{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:6px;cursor:help;text-decoration:underline dotted var(--text-meta);text-underline-offset:3px}
.tip-btn:hover,.tip-btn:focus-visible{background:rgba(25,25,25,.05)}
.tip{position:absolute;left:50%;bottom:calc(100% - 4px);z-index:10;display:none;width:240px;translate:-50% 0;padding:10px 12px;border-radius:10px;background:var(--dark);color:#fff;font-size:12.5px;font-weight:400;line-height:1.45;text-align:left}
.has-tip:hover .tip,.tip-btn:focus-visible + .tip{display:block}
.side-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px}
.rows-toggle{display:inline-flex;align-items:center;gap:6px;font-size:14px}
.rows-toggle .chev{width:15px;height:15px;transition:transform .2s}
.rows-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.legend{color:var(--text-meta);font-size:12.5px}
.alongside{padding:96px var(--gutter);background:var(--surface-2)}
.alongside h2{margin:0 0 32px}
.along{border-top:1px solid var(--border-strong);scroll-margin-top:88px}
.along:last-child{border-bottom:1px solid var(--border-strong)}
.along summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;cursor:pointer;list-style:none}
.along summary::-webkit-details-marker{display:none}
.along summary b{display:block;font-size:16.5px;font-weight:600}
.along summary small{display:block;margin-top:3px;color:var(--text-body);font-size:13.5px}
.along summary .i{width:17px;height:17px;color:var(--text-meta);flex-shrink:0}
.along summary .minus,.along[open] summary .plus{display:none}
.along[open] summary .minus{display:block}
.along[open] summary small{display:none}
.along-body{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:0 0 24px;animation:pop .25s ease both}
.along-body dl{margin:0;max-width:640px}
.along-body dt{margin-top:12px;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
.along-body dt:first-child{margin-top:0}
.along-body dd{margin:4px 0 0;color:var(--text-body);font-size:15px;line-height:1.55}
.along-visual{display:flex;align-items:center;gap:18px;flex-shrink:0}
.mini-map{position:relative;width:150px;height:90px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--accent)}
.mini-map svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--border-strong);stroke-width:1.2}
.mini-map span{position:absolute;padding:3px 6px;border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1px var(--border);font-size:8.5px;font-weight:600;line-height:1.2}
.mm-q{left:10px;top:34px}
.mm-a{left:72px;top:14px}
.mm-b{left:72px;top:58px}
.mm-o{left:118px;top:36px;box-shadow:inset 0 0 0 1px var(--accent)!important}
.along-arrow{width:18px;height:18px;color:var(--text-meta)}
.along-tool{font-size:20px;font-weight:700;letter-spacing:-.4px}
.tm-print{max-width:var(--max);margin:0 auto;padding:0 var(--gutter) 40px;color:var(--text-meta);font-size:12.5px;box-sizing:content-box}

@media (max-width:1240px){ .nav-opt{display:none} }
@media (max-width:1000px){
  .three{grid-template-columns:1fr;max-width:520px}
  .pos-map{grid-template-columns:70px minmax(0,1fr)}
  .axis-y-title{margin-left:88px}
  .along-body{flex-direction:column;align-items:flex-start;gap:20px}
}
@media (max-width:640px){
  .cmp-hero{padding-block:56px 64px}
  .fits,.side,.alongside{padding-block:64px}
  .pos-map{grid-template-columns:minmax(0,1fr)}
  .axis-y,.axis-y-title,.axis-x-title{display:none}
  .quads{grid-column:1;grid-template-columns:1fr;grid-auto-rows:auto;padding:0;border:0}
  .three-vis{height:180px}
  .three-vis.vis-mumble{height:auto}
  .x-left,.x-right{display:none}
  .quad-tip{left:0;width:min(280px,calc(100vw - 80px))}
  .side-head{flex-direction:column;align-items:flex-start}
  .side-foot{flex-direction:column;align-items:flex-start}
  .cmp-table tbody th{min-width:170px}
  .tip{left:auto;right:0;translate:none}
}

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