@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif/regular.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif/italic.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/inter/inter.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/jetbrains-mono/jetbrains-mono.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/geist.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/geist-mono.woff2) format('woff2')}
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('Arimo');size-adjust:106%;ascent-override:91.51%;descent-override:22.64%;line-gap-override:0%}
@font-face{font-family:'Instrument Serif Fallback';src:local('Times New Roman'),local('TimesNewRomanPSMT'),local('Liberation Serif'),local('Tinos');size-adjust:82.55%;ascent-override:119.92%;descent-override:37.55%;line-gap-override:0%}
/*
 * launchpad — light-first, with a real dark mode. Tokens and rules: site/DESIGN.md.
 *
 * The colour system (DESIGN.md §2; owner, 2026-10-02): neutrals, ONE accent, and THREE state hues, one meaning each.
 * The build writes the palette's values in at the "@palette" marks (src/system.mjs).
 *   accent  the palette's one colour (src/system.mjs PALETTE) — launchpad itself: what you press, what it promises,
 *           what it reports, and the words a headline leans on. Shared with Mission Control.
 *   ok      green — done.
 *   warn    amber — not yet: a wait or a draft.
 *   opt     grey — optional: off unless you turn it on, and you can turn it off again.
 * Each hue is three tokens: the hue itself for graphics (icons, dots, wires: 3:1 and up on every ground), `-ink` for
 * small text (4.5:1 and up, on its own wash too) and `-wash` for a fill. Everything else is neutral.
 * Terminals stay dark in both themes; the demo's Mission Control follows the
 * page's theme with the dashboard's own tokens (src/demo.css).
 */
:root{
  --bg:#FBFBF9; --bg-sub:#F4F4F1; --surface:#FFFFFF; --line:#E7E6E1; --line-strong:#D6D4CD;
  --ink:#16171A; --ink-2:#4A4D55; --ink-3:#666971;
  --accent:#2F4BD1; --accent-ink:#253CAF; --accent-wash:#EEF1FD; --on-accent:#FFFFFF; --accent-lip:#1C2E8A; --accent-dark:#93A6FF; --lit:47 75 209; --lit-deep:28 46 138; --sc-hill:#86A886; --sc-hill-deep:#4E7A5A; --sc-sun:#FFFFFF; --sc-trunk:#A7B5A4; --sc-star:#FFFFFF; --sc-hull:#FFF8E8; --sc-butter:#F2CF6B; --sc-line:#A99572; --sc-window:#E4EBEF; --sc-shine:#FFFFFF; --sc-flame:#F07F22; --sc-flame-mid:#F9A93A; --sc-flame-core:#FFE49A; --sc-puff:#D2C7B2; --sc-trail:#C9BEA9;
  /* The hero's sky (DESIGN.md §2, "The hero's sky"): a wash from the page's ground into a pale tint of the accent at
     the horizon behind the buy key, and back to the ground before the demo. No stars by day. */
  --sky:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--accent-wash) 70%,transparent) 64%,transparent 100%);
  --stars-on:none;
  /* The hero scene (DESIGN.md §2, "The hero scene"): its colours are src/system.mjs SCENE (--sc-*, written at the
     palette mark above), used by the scene alone. The far hills mix into the sky's haze, the near into the ground. */
  --hs-haze:color-mix(in srgb,var(--accent-wash) 60%,var(--bg));
  --hs-r0a:7%; --hs-r0b:10%; --hs-r1a:11%; --hs-r1b:14%; --hs-r2a:15%; --hs-r2b:18%; --hs-r3a:17%; --hs-r3b:21%;
  --ok:#15803D; --ok-ink:#116A32; --ok-wash:#E8F7EE;
  --warn:#C76B05; --warn-ink:#8A4B08; --warn-wash:#FDF1DC;
  --opt:#6C6F77; --opt-ink:#55585F; --opt-wash:#EFEFEC;
  /* The sections' own grounds (owner, 2026-10-27: each section looks distinct): the price band's cream, the stacks'
     night and the privacy band's navy in dark, and the deep ember the stars mix toward (the hero's amber, run.css). */
  --band-cream-a:#FBF8F2; --band-cream-b:#F6F1E7; --band-night:#07081A; --band-navy:#0B1030; --ember-deep:#7A2E00;
  /* Iris, the secondary accent: decoration only (auras, the platform pills' highlight, the lock pill's glow). Never on
     a button, a link, focus, a headline phrase or a state (DESIGN.md §2; verify.mjs). */
  --iris:#7C52D6; --iris-ink:#6239BE; --iris-wash:#F3EEFC;
  /* Cards (owner, 2026-10-07: "colors blend with the background"; RESEARCH.md: Clerk's ring + soft drop, Raycast's top
     highlight): a hairline ring drawn as a shadow, a tight contact shadow, a soft drop, and a lit top edge. No border. */
  --card-bg:var(--surface);
  --card-shadow:0 0 0 1px rgb(16 17 20/.075),0 1px 2px rgb(16 17 20/.05),0 12px 28px -18px rgb(16 17 20/.16),inset 0 1px 0 rgb(255 255 255/.9);
  /* The faint aura behind some sections: Iris into the accent, at a whisper, from the top centre. */
  --aura:radial-gradient(52% 62% at 50% 0%,color-mix(in srgb,var(--iris) 9%,transparent) 0%,color-mix(in srgb,var(--accent) 4%,transparent) 48%,transparent 78%);
  --code-bg:#111318; --code-ink:#E6E7EA;
  /* The install window's tick: the dark theme's green, since the window is dark in both themes. */
  --tw-ok:#6EE7B7;
  --shadow-1:0 1px 2px rgba(16,17,20,.06),0 1px 1px rgba(16,17,20,.04);
  --shadow-2:0 2px 4px rgba(16,17,20,.04),0 12px 32px -8px rgba(16,17,20,.12);
  --shadow-window:0 0 0 1px rgba(16,17,20,.08),0 2px 4px rgba(16,17,20,.04),0 10px 24px -12px rgba(16,17,20,.18),0 30px 80px -20px rgba(16,17,20,.28),0 48px 96px -40px rgb(var(--lit)/.26);
  /* The page's own faces (site v2's type, owner's choice 2026-09-29), served
     from /fonts/ out of src/fonts/. --serif (= --display) is Instrument Serif at
     400, never bold: the headline, the section headings, the pricing card's
     amount and the legal h1; its italic is the hero's rotating word and nothing else. --sans
     (Inter) carries every other word; --mono (JetBrains Mono) is code and
     the demo's terminal. The hero demo keeps Mission Control's
     own faces (Geist, from app.html) through src/demo.css. */
  --serif:'Instrument Serif','Instrument Serif Fallback',ui-serif,Georgia,'Times New Roman',serif;
  --display:var(--serif);
  --sans:'Inter','Inter Fallback',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Depth (DESIGN.md §4). --drop is the shadow's colour as rgb components; the
     accent button and the two elevated objects (the demo window, the price card)
     cast accent-tinted ambient light in light mode, neutral in dark (a coloured
     blur on a dark ground reads as a glow). Every shadow has an offset. */
  --drop:16 17 20; --hi:rgb(255 255 255/.7);
  /* The keys (§5): the accent key's lip is the accent pressed dark; it casts
     the accent's own light in light mode, neutral black in dark. */
  --buy-lip:var(--accent-lip);
  --buy-shadow:0 2px 3px rgb(var(--lit-deep)/.24),0 12px 22px -12px rgb(var(--lit)/.5);
  --ink-lip:#000; --ghost-lip:#D6D4CD;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#111214; --bg-sub:#18191D; --surface:#1B1C20; --line:#2A2B30; --line-strong:#3A3B41;
  --ink:#F2F2F0; --ink-2:#B4B6BC; --ink-3:#8A8D94;
  --accent:#93A6FF; --accent-ink:#BFCBFF; --accent-wash:#161D3F; --on-accent:#0A1033; --accent-lip:#253CAF; --accent-dark:#93A6FF; --sc-hill:#3F6B55; --sc-hill-deep:#0C1612; --sc-sun:#2F3E36; --sc-trunk:#26352E; --sc-star:#FFFFFF; --sc-hull:#F2E8D0; --sc-butter:#E6C25B; --sc-line:#7D6E52; --sc-window:#3B4756; --sc-shine:#FFFFFF; --sc-flame:#F58A2C; --sc-flame-mid:#FBB44A; --sc-flame-core:#FFEBB0; --sc-puff:#C9C2B4; --sc-trail:#B9B2A4;
  --sky:linear-gradient(180deg,color-mix(in srgb,var(--accent-wash) 85%,transparent) 0%,color-mix(in srgb,var(--accent-wash) 30%,transparent) 55%,transparent 100%);
  --stars-on:block;
  --hs-haze:color-mix(in srgb,var(--accent-wash) 75%,var(--bg));
  --hs-r0a:12%; --hs-r0b:15%; --hs-r1a:18%; --hs-r1b:22%; --hs-r2a:26%; --hs-r2b:30%; --hs-r3a:28%; --hs-r3b:32%;
  --drop:0 0 0; --lit:0 0 0; --hi:rgb(255 255 255/.05);
  --buy-lip:var(--accent-lip);
  --buy-shadow:0 2px 3px rgb(0 0 0/.5),0 12px 22px -12px rgb(0 0 0/.7);
  --ink-lip:#9A9CA2; --ghost-lip:#3A3B41;
  --ok:#34D399; --ok-ink:#6EE7B7; --ok-wash:#10291E;
  --warn:#FBBF24; --warn-ink:#FCD67A; --warn-wash:#2E2412;
  --opt:#8F939B; --opt-ink:#BEC1C7; --opt-wash:#24262B;
  --iris:#BDA2FF; --iris-ink:#D9C8FF; --iris-wash:#221A3D;
  --card-bg:linear-gradient(180deg,rgb(255 255 255/.035),rgb(255 255 255/0) 64%),var(--surface);
  --card-shadow:0 0 0 1px rgb(255 255 255/.075),inset 0 1px 0 rgb(255 255 255/.06),0 14px 30px -16px rgb(0 0 0/.75);
  --aura:radial-gradient(52% 62% at 50% 0%,color-mix(in srgb,var(--iris) 13%,transparent) 0%,color-mix(in srgb,var(--accent) 6%,transparent) 48%,transparent 78%);
  --code-bg:#0B0C0E;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 12px 32px -8px rgba(0,0,0,.5);
  --shadow-window:0 0 0 1px rgba(255,255,255,.08),0 30px 80px -20px rgba(0,0,0,.7);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}
code,pre{font-family:var(--mono)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
/* No italics but the hero's rotating word (owner, 2026-10-02): the tags a browser slants by default are set upright
   here, once, and `.rot` below is the only rule that asks for the slant. verify.mjs reads every element's computed style. */
em,i,cite,dfn,var,address{font-style:normal}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
::selection{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--ink)}
html{accent-color:var(--accent);scrollbar-color:var(--line-strong) transparent}
code{font-size:.88em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:8px;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:880px}

/* ── Buttons: keys ───────────────────────────────────────────────────────── */
/* Every button is a key (v12, owner 2026-09-29: option B, "Launch key"): a face
   (::after) standing on a lip (::before), which shows 3px below it. Hover raises
   the key 1px (the lip shows 4px); press sinks it 2px onto its lip (1px shows).
   Only transform moves: the button and its lip translate in opposite senses, so
   the lip stays where it is on the page while the face travels. The layout box
   is the face; the lip is drawn by a transform and shifts nothing. */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 18px;border-radius:10px;font:500 15px/1 var(--sans);text-decoration:none;white-space:nowrap;background:none;-webkit-tap-highlight-color:transparent;
  --face:var(--surface); --lip:var(--ghost-lip); --edge:inset 0 0 0 1px var(--line-strong),inset 0 1px 0 var(--hi); --cast:0 1px 2px rgb(var(--drop)/.08),0 6px 12px -8px rgb(var(--drop)/.2);
  transition:transform .2s var(--ease-out)}
.btn::before,.btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none}
.btn::before{background:var(--lip);box-shadow:var(--cast);transform:translateY(3px);transition:transform .2s var(--ease-out)}
.btn::after{background:var(--face);box-shadow:var(--edge)}
@media (hover:hover){.btn:hover{transform:translateY(-1px)}.btn:hover::before{transform:translateY(4px)}}
.btn:active{transform:translateY(2px);transition-duration:.06s}
.btn:active::before{transform:translateY(1px);transition-duration:.06s}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:10px}
.btn-sm:focus-visible{border-radius:9px}
.btn-primary{color:var(--bg);--face:linear-gradient(180deg,color-mix(in srgb,var(--ink) 86%,#fff),var(--ink) 60%);--lip:var(--ink-lip);--edge:inset 0 1px 0 rgb(255 255 255/.14);--cast:0 2px 3px rgb(var(--drop)/.22),0 10px 18px -10px rgb(var(--drop)/.4)}
.btn-ghost{color:var(--ink)}
@media (hover:hover){.btn-ghost:hover{--edge:inset 0 0 0 1px var(--ink-3),inset 0 1px 0 var(--hi)}}
.btn-sm{height:36px;padding:0 14px;font-size:14px;border-radius:9px}
.btn.full{width:100%}
/* The accent key: a flat accent face with a hairline of light on its top edge,
   the lip the accent pressed dark, the brand mark as its glyph. Its label is --on-accent:
   white on the light accent (6.5:1), the accent's own near-black on the dark one (7.4:1). */
.btn-buy{color:var(--on-accent);--face:linear-gradient(180deg,color-mix(in srgb,var(--accent) 92%,#fff),var(--accent) 55%);--lip:var(--buy-lip);--edge:inset 0 1px 0 rgb(255 255 255/.26);--cast:var(--buy-shadow)}
.btn svg{flex:none}
/* A buy press is working (2026-11-03): app.js's buyLoading adds .is-loading and a .btn-spin child (the face is ::before
   and ::after, so the spinner is a real element). The label stays in the box, unseen (opacity, not visibility: a
   screen reader still reads the whole name), so the key keeps its size and
   nothing shifts; the ring is the label's own colour (--spin, read before the label is hidden). */
.btn.is-loading{color:transparent;pointer-events:none;cursor:progress}
.btn.is-loading>:not(.btn-spin){opacity:0}
.btn-spin{position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;box-sizing:border-box;border:2px solid var(--spin,currentColor);border-right-color:transparent;border-radius:50%;animation:btnSpin .7s linear infinite}
@keyframes btnSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn-spin{border-right-color:var(--spin,currentColor);border-width:3px;width:12px;height:12px;margin:-6px 0 0 -6px;animation:none}}
/* The buy key's price ("{price} once"): one line, no struck figure (owner, 2026-10-11). */
.bb-now{margin-left:-3px}
/* "Launch price" (page.mjs `launchTag`; owner, 2026-10-11): a small, still label over the price in the hero's and the
   closing block's key, its caret pointing at the figure. It does not move — not even with motion on. It is the key's
   sibling; anchor positioning puts it over the price, never over the label. Without anchor positioning it sits centred
   over the key. */
.cta-row.has-tip{position:relative;anchor-scope:--key,--price}
.has-tip .btn-buy{anchor-name:--key}
.has-tip .bb-now{anchor-name:--price}
.bb-tip{position:absolute;left:50%;bottom:calc(100% + 9px);padding:4px 9px;border-radius:7px;background:var(--surface);color:var(--accent-ink);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 34%,transparent),0 4px 10px -6px rgb(var(--drop)/.2);font:600 12px/1.15 var(--sans);letter-spacing:.01em;white-space:nowrap;pointer-events:none;translate:-50% 0}
@supports (anchor-name:--a){
  .bb-tip{position-anchor:--price;left:anchor(--price center);bottom:calc(anchor(--key top) + 9px)}
}
.bb-tip::after{content:"";position:absolute;left:50%;top:100%;width:8px;height:8px;margin:-4.5px 0 0 -4px;background:var(--surface);box-shadow:1px 1px 0 color-mix(in srgb,var(--accent) 34%,transparent);transform:rotate(45deg)}
.cta-row.has-tip{margin-top:46px}
/* The hero's "For the first 1,000 buyers" bobs (owner, 2026-10-20); the closing block's "Launch price" stays still. */
@media (prefers-reduced-motion:no-preference){.bb-bob{animation:tipBob 2.4s ease-in-out infinite}}
@keyframes tipBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* The nav's key: the whole label, and "Get it — {price}" on a narrow phone (below). */
.bl-short{display:none}
.bl-long .bb-now{margin-left:0}
/* The glyph is the mark (src/brand.ts): its booster and its upper stage. Hover
   lifts the stage 2 units off the booster: the key is ready. */
.key-g{display:inline-grid;place-items:center;width:20px;height:20px;flex:none;margin-left:-4px}
.key-g svg{width:20px;height:20px;overflow:visible}
.key-g .mk-stage{transform-box:fill-box;transition:transform .3s var(--ease-out)}
.btn-sm .key-g,.btn-sm .key-g svg{width:15px;height:15px}
@media (hover:hover){.btn-buy:hover .key-g .mk-stage{transform:translateY(-2px)}}
/* The sheen: one band of light crosses the face as the pointer arrives (and at
   lift-off). It snaps back unseen when the pointer leaves. */
.key-sheen{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.key-sheen::before,.key-band{content:"";position:absolute;inset:0 auto 0 0;width:60%;background:linear-gradient(100deg,transparent 20%,rgb(255 255 255/.22) 50%,transparent 80%);transform:translateX(-110%)}
@media (hover:hover){.btn-buy:hover .key-sheen::before{transform:translateX(190%);transition:transform .75s var(--ease-out)}}
/* Lift-off (app.js). The countdown is three ticks in the key's lip, under the
   glyph: all three light, then go out 3-2-1; at zero the upper stage separates
   from the booster (which stays on the pad) and leaves the key. Two copies of
   the stage fly in step, one in the label's colour
   clipped to the face (.fx-in), one in the accent clipped to the sky above the
   key (.fx-sky), so it changes colour as it crosses the edge; nothing clips it
   short of leaving. Everything is removed when it lands. */
.key-ticks{position:absolute;top:calc(100% + 1px);display:flex;gap:3px;transform:translateX(-50%);pointer-events:none}
.key-ticks i{width:5px;height:1.5px;border-radius:1px;background:rgb(255 255 255/.9);opacity:0}
.btn-ghost .key-ticks i,.btn-primary .key-ticks i{background:var(--accent)}
.fx-in{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.fx-sky{position:absolute;bottom:100%;height:140px;overflow:hidden;pointer-events:none}
.fx-craft{position:absolute;left:0;display:block;transform-origin:50% 27%}
.fx-craft svg{display:block;width:100%;height:100%;overflow:visible}
.fx-trail{position:absolute;left:50%;top:46%;width:2px;height:96px;margin-left:-1px;border-radius:2px;transform-origin:50% 0;background:linear-gradient(currentColor,transparent)}
.fx-in .fx-trail{background:linear-gradient(rgb(255 255 255/.7),transparent)}
.btn-mini{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:7px;background:rgba(255,255,255,.08);color:#C9CBD1;font:500 12px/1 var(--sans);box-shadow:inset 0 1px 0 rgb(255 255 255/.06),0 1px 2px rgb(0 0 0/.3);transition:transform .2s var(--ease-out),background-color .15s}
.btn-mini:hover{background:rgba(255,255,255,.14)}
.btn-mini:active{transform:translateY(1px) scale(.97);transition-duration:.06s}

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:600 17px/1 var(--sans);letter-spacing:-.01em}
.brand .mark,.foot-brand .mark{color:var(--ink);flex:none}
.mark.night{border-radius:6.5px;box-shadow:0 1px 2px rgba(7,10,31,.25),0 0 10px rgba(84,112,245,.22)}
:root[data-theme="dark"] .mark.night{box-shadow:0 0 0 1px rgba(147,166,255,.28),0 0 12px rgba(84,112,245,.4)}
.nav-links{display:flex;gap:28px}
.nav-links a{color:var(--ink-2);text-decoration:none;font-size:14px;font-weight:500}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink)}
.nav-end{display:flex;align-items:center;gap:10px}
.theme{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:var(--ink-2)}
.theme:hover{background:var(--bg-sub);color:var(--ink)}
.theme .i-sun{display:none}
:root[data-theme="dark"] .theme .i-sun{display:block} :root[data-theme="dark"] .theme .i-moon{display:none}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{position:relative;padding:64px 0 40px;isolation:isolate;--hero-pad:64px}
.hero-top{position:relative}
/* The hero scene (owner, 2026-10-07; DESIGN.md §2 "The hero scene" and §5 motif 5; src/scene.mjs draws it and
   generates the rockets' keyframes): one layer behind the hero's head, from the very top of the page (under the nav)
   to a little below the buttons — the sky, by night its stars, four ridges far to near with trees on them, and the
   rockets between the ridges. Behind every word and control (z-index -2 in the hero's own stacking context), never
   in the way of a pointer, hidden from a reader. Transform and opacity only; app.js pauses it off-screen. */
.hero-scene{position:absolute;left:0;right:0;top:calc(-1 * (var(--hero-pad) + 65px));bottom:calc(-1 * var(--hs-ext,200px));z-index:-2;pointer-events:none;overflow:hidden;container-type:size;background:var(--sky);-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 90px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 90px),transparent)}
.hero-scene i{position:absolute;display:block}
.hs-set{position:absolute;inset:0}
.hs-phone{display:none}
/* The night's stars (src/scene.mjs `stars`): one SVG pattern repeated across the width, densest at the top. */
.hs-stars{position:absolute;inset:0 0 auto;height:min(80%,560px);display:var(--stars-on);-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
.hs-st{position:absolute;inset:0;width:100%;height:100%;fill:var(--sc-star)}
.hs-tw{width:2px;height:2px;margin:-1px 0 0 -1px;border-radius:50%;background:var(--sc-star);animation:hsTw 5.2s ease-in-out infinite alternate}
@keyframes hsTw{from{opacity:.15}to{opacity:.9}}
.hs-ridge{position:absolute;left:0;bottom:0;width:100%;height:calc(780px - var(--hs-band))}
.hs-wide{--hs-band:420px}
.hs-phone{--hs-band:530px}
.hs-crest{stroke:var(--sc-sun);stroke-width:1;stroke-linecap:round}
/* Atmospheric perspective: the far ridge is nearly the sky, the near one the most green. --rl is a ridge's lit top,
   --rb its body, and its right-facing slopes are --rb deepened toward the trees' sage. */
.hs-r0{--rl:color-mix(in srgb,var(--sc-hill) var(--hs-r0a),var(--hs-haze));--rb:color-mix(in srgb,var(--sc-hill) var(--hs-r0b),var(--hs-haze));--sh:8%}
.hs-r1{--rl:color-mix(in srgb,var(--sc-hill) var(--hs-r1a),var(--hs-haze));--rb:color-mix(in srgb,var(--sc-hill) var(--hs-r1b),var(--hs-haze));--sh:10%}
.hs-r2{--rl:color-mix(in srgb,var(--sc-hill) var(--hs-r2a),var(--bg));--rb:color-mix(in srgb,var(--sc-hill) var(--hs-r2b),var(--bg));--sh:13%}
.hs-r3{--rl:color-mix(in srgb,var(--sc-hill) var(--hs-r3a),var(--bg));--rb:color-mix(in srgb,var(--sc-hill) var(--hs-r3b),var(--bg));--sh:16%}
.hs-lit{stop-color:var(--rl)} .hs-base{stop-color:var(--rb)}
.hs-shadow{fill:color-mix(in srgb,var(--sc-hill-deep) var(--sh),var(--rb))}
/* On a phone the words cover the hills, so by day the hills there are paler still (verify measures the words over them). */
:root:not([data-theme="dark"]) .hs-phone{--hs-r0a:4%;--hs-r0b:6%;--hs-r1a:6%;--hs-r1b:8%;--hs-r2a:9%;--hs-r2b:11%;--hs-r3a:12%;--hs-r3b:15%}
:root:not([data-theme="dark"]) .hs-phone .hs-ridge{--sh:2%}
.hs-r0 .hs-crest{opacity:.5}.hs-r1 .hs-crest{opacity:.6}.hs-r2 .hs-crest{opacity:.7}.hs-r3 .hs-crest{opacity:.8}
/* Trees: plain HTML (src/scene.mjs), smaller and paler the farther back. A trunk (::before) and a crown (the inner
   <i>) that sways from the top of its trunk; a round crown has a second lobe (::before) and a lit patch (::after). */
.hs-tree{width:calc(var(--h) * .625);height:var(--h);margin-left:calc(var(--h) * -.3125)}
.hs-tree::before{content:"";position:absolute;left:calc(50% - var(--h) * .03);bottom:0;width:calc(var(--h) * .06);height:50%;border-radius:9px;background:var(--sc-trunk)}
.hs-tree>i{left:0;top:0;width:100%;height:68%;transform-origin:50% 100%;animation:hsSway var(--sp,4.4s) ease-in-out var(--sd,0s) infinite alternate;background:var(--hs-crown)}
.hs-round>i{border-radius:50%;width:76%;left:12%}
.hs-round>i::before,.hs-round>i::after{content:"";position:absolute;border-radius:50%}
.hs-round>i::before{right:-22%;bottom:-6%;width:62%;height:62%;background:var(--hs-crown)}
.hs-round>i::after{left:18%;top:16%;width:38%;height:38%;background:var(--sc-sun);opacity:.35}
.hs-pine>i{height:72%;clip-path:polygon(50% 0,94% 92%,88% 100%,12% 100%,6% 92%)}
@keyframes hsSway{from{transform:rotate(-2.2deg)}to{transform:rotate(2.6deg)}}
.hs-tree{--hs-crown:color-mix(in srgb,var(--sc-hill-deep) var(--tc),var(--hs-haze))}
.hs-d0{--tc:30%;opacity:.7}.hs-d1{--tc:42%;opacity:.8}.hs-d2{--tc:56%;opacity:.9}.hs-d3{--tc:70%}
/* The rockets: the mark, filled in the scene's warm palette (a cream stage with a butter nose, a butter booster and
   fins, a muted outline, a small window), an orange flame with a yellow core, puffs of exhaust and a trail that
   spreads and fades. --k is its depth (units to px) and --o its strength: farther is smaller, paler and
   thinner-trailed. The generated rules (src/scene.mjs) place and fly each one, and draw out its trail. */
.hs-rk{left:0;top:0;width:calc(var(--k) * 15px);height:calc(var(--k) * 21px);margin:calc(var(--k) * -21px) 0 0 calc(var(--k) * -7.5px);transform-origin:50% 100%}
.hs-craft{inset:0;opacity:var(--o);transition:opacity .7s ease}
/* One focal motion (owner, 2026-10-20): while the hero's run plays, demo.js sets data-quiet and the rockets fade out
   of the sky; they come back when it rests on its final frame. */
.hero-scene[data-quiet] .hs-craft{opacity:0}
.hs-body,.hs-flame{position:absolute;display:block}
.hs-body{inset:0;width:100%;height:100%;overflow:visible}
.hs-stage{stroke:var(--sc-line);stroke-linejoin:round}
.hs-boost{fill:var(--sc-butter);stroke:var(--sc-line);stroke-linejoin:round}
.hs-nose{stop-color:var(--sc-butter)} .hs-hull{stop-color:var(--sc-hull)}
.hs-win{fill:var(--sc-window);stroke:var(--sc-line)}
.hs-shine{fill:var(--sc-shine);opacity:.8}
.hs-flame{left:calc(50% - var(--k) * 2.7px);top:calc(var(--k) * 20px);width:calc(var(--k) * 5.4px);height:calc(var(--k) * 9px);overflow:visible}
.hs-flame path{transform-box:fill-box;transform-origin:50% 0}
.hs-f1{fill:var(--sc-flame);animation:hsFlick .36s ease-in-out infinite alternate}
.hs-f2{fill:var(--sc-flame-mid);animation:hsFlick .27s ease-in-out infinite alternate-reverse}
.hs-f3{fill:var(--sc-flame-core);animation:hsCore .2s ease-in-out infinite alternate}
@keyframes hsFlick{from{transform:scaleY(.8)}to{transform:scaleY(1.12)}}
@keyframes hsCore{from{opacity:.7;transform:scaleY(.9)}to{opacity:1;transform:scaleY(1.05)}}
/* The trail: narrow at the nozzle and wider behind, soft at both edges, fading along its length. */
.hs-trail{left:calc(50% - var(--k) * 6px);top:calc(var(--k) * 26px);width:calc(var(--k) * 12px);height:calc(var(--trail) * var(--k) * 1px);transform-origin:50% 0;background:linear-gradient(180deg,var(--sc-trail),color-mix(in srgb,var(--sc-trail) 45%,transparent) 45%,transparent);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 32%,#000 68%,transparent);mask-image:linear-gradient(90deg,transparent,#000 32%,#000 68%,transparent)}
/* Exhaust: each puff leaves the nozzle, drifts out and down behind the climbing rocket, grows and fades. */
.hs-puff{left:calc(50% - var(--k) * 2.5px);top:calc(var(--k) * 24px);width:calc(var(--k) * 5px);height:calc(var(--k) * 5px);border-radius:50%;background:var(--sc-puff);opacity:0;animation:hsPuff 1.8s cubic-bezier(.2,.6,.4,1) infinite}
@keyframes hsPuff{0%{transform:translate(0,0) scale(.35);opacity:0}12%{opacity:.95}100%{transform:translate(calc(var(--px,0) * var(--k) * 7px),calc(var(--k) * 20px)) scale(2.3);opacity:0}}
/* Paused off-screen and in a hidden tab (app.js), still under reduced motion (the end of this file). */
.hero-scene[data-paused] *{animation-play-state:paused!important}
.hero-head{text-align:center;display:flex;flex-direction:column;align-items:center}
.hero h1{margin-top:0;font:400 clamp(52px,5.7vw,74px)/.96 var(--display);letter-spacing:-.025em;max-width:960px}
/* The accent word: italic Instrument Serif in the accent (v2) — the page's ONE italic. The padding keeps the italic's overhang inside the slot. */
.rot{display:inline-block;vertical-align:bottom;position:relative;color:var(--accent);font-style:italic;white-space:nowrap;padding-right:.06em}
.rot-w{display:inline-block}
.rot-w.out{animation:rotOut .28s cubic-bezier(.4,0,.2,1) forwards}
.rot-w.in{animation:rotIn .42s var(--ease-out) both}
@keyframes rotOut{to{transform:translateY(-38%);opacity:0;filter:blur(4px)}}
@keyframes rotIn{from{transform:translateY(38%);opacity:0;filter:blur(4px)}to{transform:none;opacity:1;filter:blur(0)}}
.lede{margin-top:24px;max-width:640px;text-wrap:pretty;font-size:19px;line-height:1.55;color:var(--ink-2)}
/* The hero's sentence (22 words, owner 2026-10-20) sits on two lines at desktop width, so the run stays on the first screen. */
.hero .lede{max-width:760px}
/* The description's hierarchy (owner, 2026-10-03: "needs bolding"): the two phrases that carry it in bold ink, the
   rest in the lede's grey. */
.lede b{font-weight:600;color:var(--ink)}
.cta-row{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap;justify-content:center;align-items:center}
.hero .cta-row .btn,.final .cta-row .btn{height:48px;padding:0 22px;font-size:16px}
/* The hero's keys keep most of the room the "Launch price" label had over them (2026-10-19), so the line under them
   sits in the open band above the hills, where the key-facts panel stood. */
.hero .cta-row{margin-top:40px}
/* One line of reassurance under the buttons. */
.assure{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;margin-top:14px;font-size:14px;color:var(--ink-3)}
.assure span+span::before{content:"·";margin:0 10px;color:var(--line-strong)}
/* The line under the hero's buttons (page.mjs `heroFacts`; owner, 2026-10-19): no panel, no border, no background —
   an icon and a few words each, then the link to the costs section. One centred row on a wide screen; a centred short
   stack on a phone (below). */
.kf{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 24px;margin:20px auto 0;padding:0;font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.kf li{display:inline-flex;align-items:center;gap:8px;text-shadow:0 0 6px var(--bg),0 0 2px var(--bg)}
/* The phone's "email me the link" box (page.mjs laptopBox): a touch screen only, where it takes the copy button's place. */
.lap{display:none}
@media (hover:none) and (pointer:coarse){
  .hero .cta-row [data-copy]{display:none}
  .hero .cta-row .bb-tip[data-free-build]{display:none}
  .lap{display:block;box-sizing:border-box;width:100%;max-width:420px;margin:18px auto 0;padding:12px 12px 12px 14px;border-radius:14px;text-align:left;color:var(--code-ink);background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 22%,var(--code-bg)),var(--code-bg))}
  .lap-h{font-size:14px;line-height:1.4;color:color-mix(in srgb,var(--code-ink) 78%,transparent)}
  .lap-h b{display:block;font:400 18px/1.2 var(--serif,'Instrument Serif',serif);color:var(--code-ink)}
  .lap-row{display:flex;gap:6px;margin-top:10px}
  .lap-in{flex:1;min-width:0;height:40px;padding:0 12px;border-radius:9px;border:1px solid color-mix(in srgb,var(--code-ink) 20%,transparent);background:color-mix(in srgb,var(--code-ink) 7%,transparent);color:var(--code-ink);font:400 16px var(--sans)}
  .lap-in::placeholder{color:color-mix(in srgb,var(--code-ink) 55%,transparent)}
  .lap-in:focus-visible,.lap-go:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .lap-go{flex:none;display:flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:9px;border:1px solid color-mix(in srgb,var(--code-ink) 35%,transparent);background:transparent;color:var(--code-ink);font:600 14px var(--sans);cursor:pointer}
  .lap-go:disabled{opacity:.6}
  .lap-done{margin-top:8px;font-size:14px;font-weight:600;color:var(--code-ink)}
  .lap.is-sent .lap-row{display:none}
}

.kf svg{flex:none;color:var(--accent)}
.kf b{font-weight:500;color:var(--ink)}
.kf-go a{color:var(--accent-ink);font-weight:500;text-decoration:none}
.kf-go a:hover{text-decoration:underline;text-underline-offset:3px}
/* "Questions before buying? Ask support →" · "Not sure it fits? Search your stack →", under the pricing card's key and
   the closing block's. */
.buy-help{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin-top:14px;font-size:13.5px;color:var(--ink-3)}
.buy-help a{font-weight:500}

/* Trust strip */
.trust{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 32px;margin:32px auto 0;padding-top:0;font-size:14px;color:var(--ink-2)}
.trust li{display:flex;align-items:center;gap:8px}
.trust svg{color:var(--ink-3)}

/* ── Sections ────────────────────────────────────────────────────────────── */
.sec{padding:112px 0}
.sec-head{text-align:center;max-width:680px;margin:0 auto 48px}
.sec-head h2,.mission-copy h2,.final h2{font:400 48px/1.06 var(--display);letter-spacing:-.02em;text-wrap:balance}
.sub{text-wrap:balance;margin-top:14px;font-size:18px;line-height:1.55;color:var(--ink-2)}
/* Section heads, three patterns from one type scale and one grid (owner, 2026-10-07 round 4; DESIGN.md §3, "Section
   heads"): CENTRED over a wide visual (the checklist, Mission Control, pricing, the close); SPLIT — the head and its
   line on the left, the content on the right (How it works, costs); LEFT — a left-aligned head with a dense grid or a
   list beside or under it (stacks, FAQ). No eyebrows (§7). */
.head-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:start;margin-bottom:56px}
.sec-head.head-left{text-align:left;max-width:none;margin:0}
.head-left .sub{text-wrap:pretty}
.head-left h2{text-wrap:balance}
/* A split head stays in view while its content scrolls past (Linear's sticky titles). */
.head-split>.head-left{position:sticky;top:104px}

/* ── Covered ─────────────────────────────────────────────────────────────── */
.covered{padding-top:96px}
.legend{display:flex;gap:18px;font-size:13px;color:var(--ink-2)}
.legend>span{display:inline-flex;align-items:center;gap:7px}
.legend b{font-weight:500;color:var(--ink-3);font-variant-numeric:tabular-nums}
.cov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.cov-card{background:var(--card-bg);box-shadow:var(--card-shadow);border-radius:14px;padding:16px 18px 10px;display:inline-block;width:100%}
.cov-card[hidden]{display:none}
.cov-card h3{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;letter-spacing:-.01em;padding-bottom:10px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.cov-card h3 svg{color:var(--ink-2)}
.cov-ic{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--bg-sub);box-shadow:inset 0 0 0 1px var(--line)}
.cov-card h3 .n{margin-left:auto;padding:4px 8px;border-radius:999px;background:var(--bg-sub);font:500 12px/1 var(--mono);color:var(--ink-3)}
.cov-card ul{list-style:none;margin:0;padding:0}
.cap{position:relative;display:flex;align-items:center;gap:10px;min-height:32px;padding:4px 0;font-size:14px;line-height:1.35;break-inside:avoid;outline-offset:0}
.cap-m{width:18px;height:18px;flex:none;border-radius:50%;display:inline-grid;place-items:center}
.cap-m svg{stroke-width:2.4}
.is-done .cap-m,.cap-m.is-done{background:var(--ok-wash);color:var(--ok)}
.is-tell .cap-m i,.cap-m.is-tell i{width:12px;height:12px;border-radius:50%;border:1.6px solid var(--ink-3)}
.cap-l{flex:1;min-width:0}
.cap-p{font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.cap-lock{position:relative;margin:4px 0 6px;padding:6px 0 4px}
.cap-lock .bars{display:grid;gap:9px;padding:4px 0 0 28px}
.cap-lock .bars i{display:block;height:9px;border-radius:5px;background:linear-gradient(90deg,var(--line) 0%,color-mix(in srgb,var(--line) 30%,transparent) 100%)}
.cap-lock .bars i:nth-child(2){width:72%}
.lock-t{position:absolute;right:0;bottom:2px;display:inline-flex;align-items:center;gap:6px;padding:2px 0 2px 10px;background:var(--surface);font-size:13px;font-weight:500;color:var(--ink-3)}
.lock-t svg{color:var(--ink-3)}
.legend{justify-content:center;margin:-24px 0 24px}
.unlock{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;border-radius:14px;background:linear-gradient(150deg,var(--accent-wash) 0%,color-mix(in srgb,var(--iris-wash) 70%,var(--surface)) 100%);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 18%,var(--line)),inset 0 1px 0 var(--hi);font-size:15px;line-height:1.5;color:var(--ink-2);text-align:center;text-wrap:balance}
.unlock>svg{color:var(--accent-ink)}
.unlock b{color:var(--ink);font-weight:600}
.unlock .btn{height:40px}
.cov-foot{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:24px;font-size:14px;color:var(--ink-2);text-align:center;text-wrap:balance}
.cov-foot a{color:var(--accent-ink);text-underline-offset:3px;white-space:nowrap}
.cov-foot a::after{content:" →"}
.cov-foot svg{flex:none;color:var(--accent-ink)}

/* ── How ─────────────────────────────────────────────────────────────────── */
.how{background:var(--bg-sub);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.how-head{max-width:820px}
/* "launchpad works best with …": a small label under the description, Claude's mark before it (the accounts list's own). */
.best{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:5px 12px 5px 6px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:13px;font-weight:500;color:var(--ink-2)}
.best .rq-logo{width:22px;height:22px;border:0;background:none;border-radius:0}
.best .rq-logo svg{width:15px;height:15px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:s}
.step{background:var(--card-bg);box-shadow:var(--card-shadow);border-radius:14px;padding:16px 16px 22px}
/* How it works: the commands beside the head, one card each (round 4). */
.cmds{grid-template-columns:minmax(0,1fr);gap:16px}
.cmds .step{padding:12px 12px 18px}
.cmds .step h3{margin:14px 6px 4px}
.cmds .step p{margin:0 6px}
.step-every{display:flex;align-items:flex-start;gap:14px;padding:18px}
.step-every h3{margin:0 0 4px!important}
.step-every p{margin:0!important}
.every-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--bg-sub);color:var(--ink-2)}
/* A calm terminal card: dark in both themes, a quiet header, a muted prompt, the palette's tones. */
.term{position:relative;border-radius:10px;background:var(--code-bg);box-shadow:inset 0 0 0 1px rgb(255 255 255/.06);overflow:hidden}
.term-h{display:flex;align-items:center;gap:10px;height:34px;padding:0 8px 0 12px;border-bottom:1px solid rgb(255 255 255/.06)}
.term-dots{display:flex;gap:5px}
.term-dots i{width:8px;height:8px;border-radius:50%;background:#2A2E36}
.term-l{font:500 12px/1 var(--sans);color:#7C7F87}
.term .btn-mini{position:static;margin-left:auto;height:24px;padding:0 9px}
.term-b{margin:0;padding:14px 16px 16px;overflow-x:auto;font:400 13px/1.85 var(--mono);color:var(--code-ink);white-space:pre;scrollbar-width:thin}
.term-b code{font:inherit}
.t-line{display:block}
.t-prompt{margin-right:10px;color:#7C7F87;opacity:.6}
.t-cmd{color:var(--accent-dark)}
.t-ref{color:#C9CBD1}
.t-arg{color:#7C7F87}
.step h3{font-size:18px;margin-bottom:6px}
.step p:last-child{color:var(--ink-2);font-size:15px;line-height:1.5}
.step p code{font-size:13px;background:var(--bg-sub);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
/* "Using the Claude desktop app or VS Code?" under Install once (page.mjs appsGuide): one quiet line until opened. */
/* Install once, two ways (page.mjs installStep): a segmented switch over a track that snaps, so a phone swipes it. */
.inst-tabs{display:inline-flex;gap:2px;margin-bottom:12px;padding:3px;border-radius:10px;background:var(--bg-sub);box-shadow:inset 0 0 0 1px var(--line)}
.inst-tab{height:32px;padding:0 14px;border:0;border-radius:8px;background:transparent;color:var(--ink-2);font:500 13.5px/1 var(--sans);cursor:pointer}
.inst-tab[aria-selected="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--line)}
.inst-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.inst-track{display:flex;gap:32px;overflow-x:auto;overflow-y:hidden;transition:height .25s ease;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;align-items:flex-start}
.inst-track::-webkit-scrollbar{display:none}
.inst-panel{flex:0 0 100%;min-width:0;scroll-snap-align:start}
/* The desktop app's steps (src/desktop-steps.mjs): one large drawing at a time in the page's own colours, a plain ring
   and number on the place to click, Back / Next under it; a phone swipes the track. */
.dsv-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.dsv-track::-webkit-scrollbar{display:none}
.dsv-slide{flex:0 0 100%;min-width:0;margin:0;scroll-snap-align:start}
.dsv-art{display:block;width:100%;height:auto;border-radius:14px}
@media (max-width:640px){
  .dsv-frame{position:relative;overflow:hidden;aspect-ratio:calc(var(--cw) / var(--ch));border-radius:12px;border:1px solid var(--line-strong);background:var(--surface)}
  .dsv-frame .dsv-art{position:absolute;max-width:none;border-radius:0;width:calc(640 / var(--cw) * 100%);left:calc(var(--cx) / var(--cw) * -100%);top:calc(var(--cy) / var(--ch) * -100%)}
}
.dsv-cap{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.dsv-cap b{display:block;color:var(--ink);font-weight:600}
.dsv-cap code{font-size:13px;background:var(--bg-sub);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.dsv-n{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--accent);color:var(--on-accent);font:600 12px/1 var(--sans)}
.dsv-copy{margin-left:auto;flex:none;height:28px;padding:0 10px;border-radius:7px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:500 12.5px var(--sans);cursor:pointer}
.dsv-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.dsv-btn{height:34px;padding:0 16px;border-radius:9px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:500 14px var(--sans);cursor:pointer}
.dsv-btn:disabled{color:var(--ink-3);cursor:default}
.dsv-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.start .steps{margin-top:28px}
.dsv-count{font-size:13.5px;color:var(--ink-3)}
.dw-win{fill:var(--surface);stroke:var(--line-strong)}
.dw-box{fill:var(--surface);stroke:var(--line-strong)}
.dw-soft{fill:var(--bg-sub);stroke:var(--line)}
.dw-hi{fill:var(--accent-wash);stroke:none}
.dw-scrim{fill:var(--bg-sub);opacity:.7}
.dw-bar{fill:var(--line)}
.dw-dot{fill:var(--line-strong)}
.dw-ln{fill:none;stroke:var(--line-strong);stroke-width:1.6}
.dw-strongbox{fill:var(--ink)}
.dw-ring{fill:none;stroke:var(--accent);stroke-width:1.6}
.dw-num{fill:var(--accent)}
.dw-numt{fill:var(--on-accent);font:600 12px var(--sans)}
.dw-t{fill:var(--ink-2);font:400 14px var(--sans)}
.dw-s{fill:var(--ink-2);font:500 13px var(--sans)}
.dw-xs{fill:var(--ink-3);font:400 12px var(--sans)}
.dw-faint{fill:var(--ink-3);font:400 14px var(--sans)}
.dw-strong{fill:var(--ink);font:600 14px var(--sans)}
.dw-h{fill:var(--ink);font:600 20px var(--sans)}
.dw-code{fill:var(--ink);font:500 13.5px var(--mono)}
.dw-onstrong{fill:var(--bg);font:600 13px var(--sans)}

/* ── Mission ─────────────────────────────────────────────────────────────── */
/* One window under the centred head (owner, 2026-10-23): the fleet with the question open inside it, no column beside. */
.mission-pic{max-width:1060px}
.mission-head{max-width:900px}
/* The accent phrase in a section headline (DESIGN.md §2–3): the headline's own serif, upright, in the accent.
   Colour alone marks it; the italic is the hero's rotating word's and nothing else's. */
.acc{color:var(--accent)}
/* "unlimited projects" in the pricing headline (owner, 2026-10-03): the accent as a gradient, its ink to a light tint
   of itself — one hue, the same paint as "Free" on a free plan. */
.grad{display:inline-block;background:linear-gradient(100deg,var(--accent-ink) 0%,var(--accent) 55%,color-mix(in srgb,var(--accent) 70%,#fff) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.08em}
/* The live rocket (owner, 2026-10-02): the mark from brand.ts beside the word "live", hovering on its exhaust.
   The page's one loop: transform and opacity only, CSS only, and still under reduced motion. */
.live-w,.nw{white-space:nowrap}
.live-rocket{display:inline-block;width:auto;height:.98em;margin:0 .04em 0 .14em;vertical-align:-.16em;color:var(--accent);overflow:visible}
.lr-craft{animation:lrHover 2.8s ease-in-out infinite}
.lr-stage{animation:lrStage 2.8s ease-in-out infinite}
.lr-flame{transform-box:fill-box;transform-origin:50% 0}
.lr-f1{fill:var(--accent);animation:lrFlame .34s ease-in-out infinite alternate}
.lr-f2{fill:color-mix(in srgb,var(--accent) 38%,#fff);animation:lrFlame .23s ease-in-out infinite alternate-reverse}
@keyframes lrHover{0%,100%{transform:translateY(1.2px)}50%{transform:translateY(-1.2px)}}
@keyframes lrStage{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.3px)}}
@keyframes lrFlame{from{transform:scaleY(.62);opacity:.5}to{transform:scaleY(1.12);opacity:.95}}
@media (prefers-reduced-motion:reduce){.lr-craft,.lr-stage,.lr-flame{animation:none}.lr-f1{opacity:.6}}
.shot-frame{border-radius:14px;overflow:hidden;box-shadow:var(--shadow-window);background:var(--code-bg);aspect-ratio:16/10}
.shot-frame img{width:100%;height:100%;object-fit:cover;object-position:top left;transition:opacity .2s}
.mission-shot figcaption{margin-top:10px;font-size:13px;color:var(--ink-3)}
.thumbs{display:flex;gap:10px;margin-top:12px}
.thumb{display:block;width:96px;border-radius:8px;overflow:hidden;border:1.5px solid var(--line);opacity:.7;transition:opacity .15s,border-color .15s;aspect-ratio:16/10}
.thumb img{width:100%;height:100%;object-fit:cover;object-position:top left}
.thumb:hover{opacity:1}
.thumb.on{opacity:1;border-color:var(--accent)}
/* What you do in Mission Control, as outcomes: four plain cells on a hairline, no cards (DESIGN.md §4). */
.mc-does{list-style:none;margin:56px 0 0;padding:28px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 32px}
.mc-does li{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:10px;row-gap:4px;align-items:start;align-content:start;font-size:14px;line-height:1.5;color:var(--ink-2)}
.mc-does svg{margin-top:2px;color:var(--ink-3)}
.mc-does b{font-weight:600;font-size:15px;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.mc-does span{grid-column:2}
@media (max-width:980px){.mc-does{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── Stacks ──────────────────────────────────────────────────────────────── */
.stacks{background:var(--bg-sub);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:80px 0}
.stacks .sec-head{margin-bottom:28px}
.finder{max-width:560px;margin:0 auto}
/* FAQ: a SPLIT head, the questions beside it. */
.faq-split{grid-template-columns:minmax(0,4fr) minmax(0,8fr);margin-bottom:0}
.faq-split .qs{max-width:none;margin:0}
.field{display:flex;align-items:center;gap:10px;height:52px;padding:0 16px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);box-shadow:var(--shadow-1);color:var(--ink-3);transition:border-color .15s,box-shadow .15s}
.field:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-wash)}
.field input{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:none;font:400 16px/1 var(--sans);color:var(--ink)}
.field input::placeholder{color:var(--ink-3)}
.answer{margin-top:10px;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-size:14px;line-height:1.5;color:var(--ink-2)}
.answer h3{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink);margin-bottom:4px}
.answer p+p{margin-top:6px}
.answer .host{font-size:13px;color:var(--ink-3)}
.answer .caveat{font-size:13px;color:var(--ink-2);background:var(--warn-wash);border-radius:8px;padding:8px 10px}
.pill{font:500 12px/1 var(--sans);padding:4px 8px;border-radius:999px;background:var(--bg-sub);color:var(--ink-2)}
/* "Ships it" is done (green); "Knows it" and "Not yet" are neutral: the accent is not a status. */
.pill.deploys{background:var(--ok-wash);color:var(--ok-ink)}
/* --cols / --cols-t / --cols-m: the widest row whose last row is not a lone icon (page.mjs balancedCols), per breakpoint. */
.tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:28px auto 0;max-width:calc(var(--cols,10)*106px - 10px)}
@media (max-width:860px){.tiles{max-width:calc(var(--cols-t,7)*106px - 10px)}}
.tile{position:relative;width:96px;min-height:84px;padding:13px 6px 10px;border-radius:12px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--c,var(--ink-2));transition:transform .15s,opacity .15s,border-color .15s,box-shadow .15s}
.tile svg{width:22px;height:22px;flex:none}
/* The stack's name, under its icon (owner, 2026-10-15): ink-2 whatever the mark's colour, two lines at most. */
.tile-name{font:500 11.5px/1.3 var(--sans);color:var(--ink-2);text-align:center;letter-spacing:-.005em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word;hyphens:auto}
.tile.status-recognised svg,.tile.status-planned svg{opacity:.45}
.tile.status-recognised .tile-name,.tile.status-planned .tile-name{color:var(--ink-3)}
.tile:hover,.tile:focus-visible{transform:translateY(-2px);opacity:1;box-shadow:var(--shadow-2);border-color:var(--line-strong)}
@keyframes fadeIn{from{opacity:0}}
.tile.dim{opacity:.18}
.tile.hit{opacity:1;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.tile[hidden]{display:none}
:root[data-theme="dark"] .tile.tone-dark{color:#F2F2F0}
:root[data-theme="dark"] .tile.status-recognised svg{opacity:.6}
:root:not([data-theme="dark"]) .tile.tone-light{color:var(--ink)}
.tiles-legend{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:18px;font-size:13px;color:var(--ink-3)}
.lg{width:10px;height:10px;border-radius:3px;background:var(--ink-2);display:inline-block}
.lg-recognised{opacity:.35;margin-left:12px}
.grid-foot{margin-top:8px;text-align:center;font-size:13px;color:var(--ink-3)}
.grid-foot a{color:var(--ink-2)}

/* ── Accounts and costs (#need) ──────────────────────────────────────────── */
/* A free plan the registry has is set in the accent, as a gradient (page.mjs `hasFreePlan`; the build and
   verify.mjs fail on the treatment anywhere else). Static: no shimmer, so the motion rules stand. */
.need{--free-hi:color-mix(in srgb,var(--accent) 70%,#fff)}
.rq-fig.is-free,.sum-fig.is-free b{display:inline-block;background:linear-gradient(100deg,var(--accent-ink) 0%,var(--accent) 55%,var(--free-hi) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.rq-tag{display:block;margin-top:3px;font-size:12px;line-height:1.3;color:var(--ink-3)}

.need-pick{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;width:max-content;max-width:100%;margin:0 auto 28px;padding:4px;border-radius:12px;background:var(--bg-sub);border:1px solid var(--line)}
.np-in{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.np{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:9px;font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.np:hover{color:var(--ink)}
.np-in:focus-visible+.np{outline:2px solid var(--accent);outline-offset:2px}
.need-panel{background:var(--card-bg);box-shadow:var(--card-shadow);border-radius:18px;overflow:hidden}
.sum{margin:0;border-bottom:1px solid var(--line);background:var(--bg-sub)}
.sum-r{display:grid;grid-template-columns:184px minmax(0,1fr);column-gap:24px;padding:20px 28px 22px;align-items:start}
.sum-r+.sum-r{border-top:1px solid var(--line)}
.sum-d{margin:0;min-width:0}
.sum-k{display:flex;align-items:center;gap:8px;margin:0;padding-top:4px;font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--ink-3)}
.sum-k svg{flex:none;color:var(--ink-2)}
.sum-v{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;font-size:15px;color:var(--ink-2)}
.sum-fig b,.sum-none{font:600 38px/1 var(--sans);letter-spacing:-.025em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.sum-plus{color:var(--ink-3)}
.sum-n{margin-top:8px;font-size:14px;line-height:1.5;color:var(--ink-2)}
/* The iOS card's way to the store (page.mjs `releasePath`; owner, 2026-10-19): build → TestFlight → you submit → Apple
   review, the review's published wait beside it, above the other waits. The buyer's own step is in the accent's ink. */
/* From build to store (owner, 2026-10-20): each step a small card that says who takes it — launchpad in the accent,
   you in the opt-in hue, the store in grey — then the step, one line, and a time where one is known. */
.sum-path{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;counter-reset:sp}
.sum-path li{position:relative;display:flex;flex-direction:column;gap:3px;padding:12px 14px 13px;border:1px solid var(--line);border-radius:12px;background:var(--surface);min-width:0}
.sum-path li+li::before{content:"";position:absolute;left:-10px;top:50%;width:10px;border-top:1.5px solid var(--line-strong)}
.sum-path b{font-size:15px;font-weight:600;line-height:1.3;color:var(--ink)}
.sp-who{align-self:flex-start;margin-bottom:4px;padding:2px 8px;border-radius:999px;font:600 11.5px/1.4 var(--sans);letter-spacing:.01em;background:var(--bg-sub);color:var(--ink-2)}
.sum-path [data-who="launchpad"] .sp-who{background:var(--accent-wash);color:var(--accent-ink)}
.sum-path [data-who="launchpad"]{border-color:color-mix(in srgb,var(--accent) 28%,var(--line))}
.sum-path [data-you] .sp-who{background:var(--opt-wash);color:var(--opt-ink)}
.sp-note{font-size:13px;line-height:1.4;color:var(--ink-2)}
.sp-wait{margin-top:4px;font-size:12.5px;font-weight:600;color:var(--ink)}
.sum-gh{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--ink-2)}
.sum-path+.sum-gh{padding-top:14px;border-top:1px solid var(--line)}
.sum-g{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sum-g li{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;font-size:14px;color:var(--ink-2)}
.sum-g b{font-size:16px;font-weight:600;color:var(--ink)}
.sum-if{font-size:13px;color:var(--ink-3)}
.sum-days{display:inline-block;padding:1px 7px;border-radius:6px;background:var(--warn-wash);color:var(--warn-ink);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.rq-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.rq-cols.one{grid-template-columns:minmax(0,1fr)}
.rq-col+.rq-col{border-left:1px solid var(--line)}
.rq-h{padding:22px 28px 4px;font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--ink-3)}
.rqs{list-style:none;margin:0;padding:0 28px 10px}
.rq{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:14px;padding:14px 0;align-items:center}
.rq+.rq{border-top:1px solid var(--line)}
.rq-logo{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--bg);display:grid;place-items:center;color:var(--c,var(--ink-2))}
.rq-logo svg{width:19px;height:19px}
:root:not([data-theme="dark"]) .rq-logo.tone-light{color:var(--ink)}
:root[data-theme="dark"] .rq-logo.tone-dark{color:var(--ink)}
.rq-main{min-width:0}
.rq-name{display:block;font-size:15px;font-weight:600;line-height:1.3}
.rq-for{display:block;margin-top:1px;font-size:13.5px;line-height:1.4;color:var(--ink-3)}
.rq-cost{text-align:right;max-width:190px}
.rq-fig{font:600 20px/1.05 var(--sans);letter-spacing:-.01em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.rq-cad{font-size:13px;color:var(--ink-2)}
.rq-note{display:block;font-size:13px;line-height:1.4;color:var(--ink-2)}
.rq-later{display:block;margin-top:4px;font-size:12.5px;line-height:1.35;color:var(--ink-3)}
.usage{margin-top:24px;border-radius:18px;background:var(--card-bg);box-shadow:var(--card-shadow);padding:0 0 18px}
.usage-l{list-style:none;margin:0;padding:10px 28px 0;display:flex;flex-wrap:wrap;gap:8px}
.usage-l li{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 5px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.usage-l .rq-logo{width:26px;height:26px;border:0;background:none}
.usage-l .rq-logo svg{width:16px;height:16px}
.usage-l b{font-size:14px;font-weight:500}
.usage-n{padding:14px 28px 0;font-size:13.5px;color:var(--ink-2)}
.need-foot{display:flex;align-items:flex-start;justify-content:center;gap:8px;max-width:720px;margin:24px auto 0;font-size:13.5px;line-height:1.5;color:var(--ink-3);text-align:center}
.need-foot svg{flex:none;margin-top:2px}
.need-panel+.need-panel{margin-top:24px}
@supports selector(:has(*)){.need-panel+.need-panel{margin-top:0}}

/* ── Pricing ─────────────────────────────────────────────────────────────── */
/* The price card is the page's second object (the demo window is the first):
   its edge is a 1px ring in the shadow stack, and it stands on the same layered,
   accent-tinted light as the window (neutral in dark). */
.price-card{max-width:460px;margin:0 auto;background:var(--surface);border-radius:18px;overflow:hidden;box-shadow:0 0 0 1px var(--line-strong),0 2px 4px rgb(var(--drop)/.04),0 12px 24px -14px rgb(var(--drop)/.16),0 36px 72px -32px rgb(var(--lit)/.3)}
.pc-strip{background:var(--accent-wash);color:var(--accent-ink);font-size:13px;font-weight:600;text-align:center;padding:10px}
.pc-body{padding:28px 28px 24px}
.pc-name{font-size:17px;font-weight:600}
.pc-price{display:flex;align-items:baseline;gap:10px;margin-top:4px}
.pc-price .amt{font:400 72px/1 var(--display);font-variant-numeric:lining-nums;letter-spacing:-.02em}
.pc-price .once{font-size:16px;color:var(--ink-3)}
.pc-price .pc-was{color:var(--ink-3);text-decoration-thickness:3px;font-size:.55em;margin-right:.15em}
.pc-then{margin-top:6px;color:var(--ink-2);font-size:15px}
.price-card .btn.full + .btn.full{margin-top:10px}
.pc-sub{margin-top:8px;font-size:14px;color:var(--ink-2)}
.pc-ladder{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 12px;border-radius:9px;background:var(--accent-wash);color:var(--accent-ink);font-size:14px;font-weight:500;line-height:1.35}
.pc-ladder svg{flex:none}
.pc-list{list-style:none;margin:22px 0 24px;padding:0;display:grid;gap:12px;font-size:15px}
.pc-list li{display:flex;align-items:center;gap:12px}
.pc-list svg{flex:none;color:var(--ink-3)}
.pc-body .btn.full{height:48px;font-size:16px}
.pc-note{margin-top:12px;font-size:13px;color:var(--ink-2);text-align:center;text-wrap:balance}
.pc-fine{margin-top:12px;font-size:12.5px;color:var(--ink-3);text-align:center;text-wrap:balance}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.qs{max-width:680px;margin:0 auto;border-top:1px solid var(--line)}
.qs details{border-bottom:1px solid var(--line)}
.qs summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;font-size:17px;font-weight:600;letter-spacing:-.01em;cursor:pointer;list-style:none}
.qs summary span{text-wrap:balance}
.qs summary::-webkit-details-marker{display:none}
.qs summary svg{flex:none;color:var(--ink-3);transition:transform .2s}
.qs details[open] summary svg{transform:rotate(45deg)}
.qs details p{padding:0 40px 22px 0;color:var(--ink-2);line-height:1.6}

/* ── Final ───────────────────────────────────────────────────────────────── */
.final{background:var(--bg-sub);border-top:1px solid var(--line);padding:104px 0;text-align:center}
.final .sub{margin-top:12px}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer{border-top:1px solid var(--line);padding:28px 0 40px;font-size:13px;color:var(--ink-3)}
.foot{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:10px;color:var(--ink)}
.foot-brand span{color:var(--ink-3)}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.foot a{color:var(--ink-3);text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot-compare{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.foot-compare .fc-h{color:var(--ink-2);font-weight:600}

/* ── Legal ───────────────────────────────────────────────────────────────── */
.legal .doc{max-width:760px;padding-top:48px;padding-bottom:96px}
.legal h1{font:400 52px/1.05 var(--display);letter-spacing:-.02em;margin:24px 0 10px}
.legal h2{font:600 20px/1.3 var(--sans);letter-spacing:-.01em;margin:40px 0 12px}
.legal p,.legal li{color:var(--ink-2);line-height:1.7}
.legal p{margin:0 0 14px}
.legal ul{padding-left:20px}
.legal li{margin-bottom:8px}
.legal b{color:var(--ink)}
.legal code{font-size:.88em;background:var(--bg-sub);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.legal .section-lede{font-size:18px}
.legal .microcopy{font-size:13px;color:var(--ink-3)}
.legal .doc a{color:var(--accent-ink)}
.legal .doc .btn{color:var(--ink)}
.draft-banner{display:block;padding:14px 16px;border-radius:12px;border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);background:var(--warn-wash);color:var(--ink-2);font-size:14px;line-height:1.55}
.draft-banner b{color:var(--ink)}

/* ── Comparison pages and the 404 (src/compare.mjs) ───────────────────────── */
/* One reading column like the legal pages; the head in the display serif, the lede in the page's grey, a table whose
   launchpad column carries the accent's wash (the one place the accent sits on these pages), hairlines between rows. */
.cmp{padding:56px 0 96px}
.cmp-wrap{max-width:880px}
.cmp-head h1{font:400 52px/1.05 var(--display);letter-spacing:-.02em;text-wrap:balance}
.cmp-updated{margin-top:12px;font-size:13px;color:var(--ink-3)}
.cmp .cmp-lede{max-width:none;font-size:18px}
.cmp-summary{margin-top:16px;color:var(--ink-2);line-height:1.7}
.cmp a{color:var(--accent-ink)}
.cmp .btn{color:var(--on-accent)}
.cmp-table-wrap{margin-top:36px;border-radius:16px;background:var(--card-bg,var(--surface));box-shadow:var(--card-shadow,0 0 0 1px var(--line));overflow:hidden}
.cmp-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:15px;line-height:1.55}
.cmp-c-label{width:20%}
.cmp-table th,.cmp-table td{padding:14px 18px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.cmp-table thead th,.cmp-table thead td{border-top:0;font:600 14px/1.3 var(--sans);color:var(--ink)}
.cmp-table thead .cmp-us{display:table-cell}
.cmp-table thead .cmp-us .mark{display:inline-block;width:16px;height:16px;vertical-align:-3px;margin-right:6px;color:var(--ink)}
.cmp-table tbody th{font-weight:600;color:var(--ink);font-size:14px}
.cmp-table td{color:var(--ink-2)}
.cmp-table td.cmp-us{background:var(--accent-wash);color:var(--ink)}
.cmp-table thead .cmp-us{background:var(--accent-wash)}
.cmp-table .vp{color:inherit;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.cmp-table .vp:hover{text-decoration-color:currentColor}
.cmp-costs{margin-top:24px;color:var(--ink-2);line-height:1.7;font-size:15px}
.cmp-costs b{color:var(--ink)}
.cmp-list{margin:36px 0 0;padding:0;list-style:none;counter-reset:alt;display:grid;gap:14px}
.cmp-list li{counter-increment:alt;position:relative;padding:20px 22px 20px 64px;border-radius:16px;background:var(--card-bg,var(--surface));box-shadow:var(--card-shadow,0 0 0 1px var(--line))}
.cmp-list li::before{content:counter(alt);position:absolute;left:22px;top:20px;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--bg-sub);color:var(--ink-2);font:600 13px/1 var(--sans)}
.cmp-list li:first-child{background:linear-gradient(112deg,var(--accent-wash),var(--surface))}
.cmp-list li:first-child::before{background:var(--accent);color:var(--on-accent)}
.cmp-list h2{font:600 17px/1.35 var(--sans);color:var(--ink)}
.cmp-list h2 a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.cmp-list p{margin-top:6px;color:var(--ink-2);line-height:1.65;font-size:15px}
.cmp-list .vp{color:inherit;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.nf{min-height:52vh;display:flex;align-items:center}
.nf h1{font:400 52px/1.05 var(--display);letter-spacing:-.02em;margin-bottom:24px}
@media (max-width:640px){
  .cmp{padding:36px 0 64px}
  .cmp-head h1,.nf h1{font-size:36px}
  .cmp-lede{font-size:17px}
  /* A phone reads each row as a card: the label, then each side under its own name. */
  .cmp-table-wrap{background:none;box-shadow:none;border-radius:0;overflow:visible}
  .cmp-table,.cmp-table tbody,.cmp-table tr,.cmp-table th,.cmp-table td{display:block;width:auto}
  .cmp-table thead,.cmp-table colgroup{display:none}
  .cmp-table tr{margin-bottom:12px;border-radius:14px;overflow:hidden;background:var(--card-bg,var(--surface));box-shadow:var(--card-shadow,0 0 0 1px var(--line))}
  .cmp-table tbody th{border-top:0;padding:14px 16px 4px;width:auto}
  .cmp-table td{border-top:0;padding:4px 16px 12px}
  .cmp-table td::before{content:attr(data-col);display:block;font:600 12px/1.4 var(--sans);color:var(--ink-3);margin-bottom:2px}
  .cmp-table td.cmp-us{padding-top:12px;padding-bottom:14px}
  .cmp-list li{padding:16px 16px 16px 56px}
  .cmp-list li::before{left:16px;top:16px}
}
/* The launch guides (src/guide-pages.mjs): the comparison pages' frame, a reading column, numbered checklist cards. */
.gd-crumb{margin-bottom:14px;font-size:14px}
.gd-crumb a{text-decoration:none;font-weight:500}
.gd-crumb a::before{content:'← '}
.gd-p{margin-top:14px;color:var(--ink-2);line-height:1.7;max-width:72ch}
.gd-sec{margin-top:44px}
.gd h2{font:400 32px/1.15 var(--display);letter-spacing:-.01em;color:var(--ink)}
.gd-sec p{margin-top:14px;color:var(--ink-2);line-height:1.7;max-width:72ch}
.gd-faq h3{margin-top:24px;font:600 17px/1.4 var(--sans);color:var(--ink)}
.gd-faq h3+p{margin-top:6px}
.gd-lp{padding:20px 22px 22px;border-radius:16px;background:linear-gradient(112deg,var(--accent-wash),var(--surface));box-shadow:var(--card-shadow,0 0 0 1px var(--line))}
.gd-lp h2{font:600 17px/1.35 var(--sans)}
.gd-lp p{margin-top:8px;color:var(--ink)}
.gd-links{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.gd-links li{line-height:1.5}
.gd-links a{text-underline-offset:3px}
.gd-src .gd-checked{font-size:14px;color:var(--ink-3)}
.gd-group{margin-top:48px}
.gd-items{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:14px}
.gd-items li{position:relative;padding:20px 22px 20px 64px;border-radius:16px;background:var(--card-bg,var(--surface));box-shadow:var(--card-shadow,0 0 0 1px var(--line))}
.gd-items li::before{content:attr(data-n);position:absolute;left:22px;top:20px;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--bg-sub);color:var(--ink-2);font:600 13px/1 var(--sans)}
.gd-items h3{font:600 17px/1.35 var(--sans);color:var(--ink)}
.gd-items p{margin-top:6px;color:var(--ink-2);line-height:1.65;font-size:15px}
.gd-items .gd-meta{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:10px;font-size:13px;color:var(--ink-3)}
.gd-meta a{color:var(--ink-2);text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.side-cta{margin-top:56px;padding:28px;border-radius:18px;background:var(--card-bg,var(--surface));box-shadow:var(--card-shadow,0 0 0 1px var(--line));text-align:center}
.side-cta p{max-width:60ch;margin:0 auto;color:var(--ink-2);line-height:1.65}
.side-cta .cta-row{margin-top:20px}
.cmp .side-cta .btn-ghost{color:var(--ink)}
/* The checklist by email (src/checklist-email.mjs): an inline box in the page's flow, never an overlay; the printable
   checklist; the form handler's pages reuse the guide shell. */
.gd-mail{margin-top:44px;padding:22px 24px 20px;border-radius:16px;background:linear-gradient(112deg,var(--accent-wash),var(--surface));box-shadow:var(--card-shadow,0 0 0 1px var(--line))}
.gd .gd-mail h2{font:600 19px/1.35 var(--sans);letter-spacing:-.01em}
.gd-mail>p{margin-top:6px;color:var(--ink-2);line-height:1.6;max-width:64ch}
.gd-mail-form{margin-top:16px}
.gd-mail-label{display:block;margin-bottom:6px;font:600 13px/1.3 var(--sans);color:var(--ink)}
.gd-mail-row{display:flex;gap:10px}
.gd-mail-input{flex:1;min-width:0;height:44px;padding:0 14px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--ink);font:400 16px/1 var(--sans);box-shadow:var(--shadow-1)}
.gd-mail-input::placeholder{color:var(--ink-3)}
.gd-mail-input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.gd-mail-check{display:flex;align-items:flex-start;gap:9px;margin-top:12px;font-size:14px;line-height:1.45;color:var(--ink-2);cursor:pointer}
.gd-mail-check input{flex:none;width:17px;height:17px;margin:1px 0 0}
.gd-mail-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.gd-mail-note{margin-top:12px;font-size:13px;line-height:1.55;color:var(--ink-3);max-width:64ch}
.gd-mail-note a{color:var(--ink-2);text-underline-offset:3px}
.gd-mail-act{margin-top:20px}
.gd-print-act{display:none;margin-top:20px}
.js .gd-print-act{display:block}
.gd-print-group{margin-top:36px}
.gd .gd-print-group h2{font:600 19px/1.35 var(--sans)}
.gd-print-items{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.gd-print-items li{display:flex;gap:14px;align-items:flex-start;break-inside:avoid}
.gd-box{flex:none;width:18px;height:18px;margin-top:2px;border:1.5px solid var(--ink-3);border-radius:4px}
.gd-print-items h3{font:600 16px/1.4 var(--sans);color:var(--ink)}
.gd-print-items p{margin-top:2px;color:var(--ink-2);line-height:1.55;font-size:14.5px}
.gd-print-foot{font-size:14px}
@media print{
  .nav,.footer,.skip,.gd-crumb,.gd-print-act,.side-cta,.buybar,.nudge{display:none!important}
  body{background:#fff}
  .cmp,.cmp-wrap{padding:0!important;margin:0!important;max-width:none!important}
  .cmp-head h1{font-size:28px}
  .gd-print-group{margin-top:18px}
  .gd-print-items{gap:8px}
  .gd-print-items p{font-size:12px}
  .gd-print-items h3{font-size:13px}
}

@media (max-width:640px){
  .gd h2{font-size:26px}
  .gd-lp h2{font-size:17px}
  .gd .gd-mail h2,.gd .gd-print-group h2{font-size:18px}
  .gd-mail{padding:18px 16px}
  .gd-mail-row{flex-direction:column}
  .gd-mail-input{flex:none;width:100%}
  .gd-mail-row .btn{width:100%}
  .gd-items li{padding:16px 16px 16px 56px}
  .gd-items li::before{left:16px;top:16px}
  .side-cta{padding:22px 18px}
}

/* ── Ignition ────────────────────────────────────────────────────────────── */
/* "Done" lights up once, as it comes into view (app.js): each checklist card's ✓
   marks ignite in order with one ring each, and How it works' board lights its
   shipped apps cell by cell. Only groups below the fold at load are held back
   (.pre), only with JavaScript and motion allowed; everything else, and every
   group without JavaScript or under reduced motion, is drawn finished. */
.cap-m{position:relative}
.pre .is-done .cap-m svg{opacity:0;transform:scale(.4)}
.pre.lit .is-done .cap-m svg{animation:ignite .5s var(--ease-out) var(--t) both}
.pre.lit .is-done .cap-m::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--ok);opacity:0;animation:igniteRing .7s cubic-bezier(.2,.6,.3,1) var(--t) both}
.cov-card{--col:0}
.cov-card .cap{--t:calc(var(--col) * 70ms + 120ms)}
.cov-card .cap:nth-child(2){--t:calc(var(--col) * 70ms + 240ms)}
.cov-card .cap:nth-child(3){--t:calc(var(--col) * 70ms + 360ms)}
@keyframes ignite{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes igniteRing{from{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(2.2)}}

/* ── Responsive ──────────────────────────────────────────────────────────── */
/* ── The machine (inside How it works) ───────────────────────────────────── */
/* One structure (owner, 2026-10-02), under the three steps of the same section: the machine (a dashed boundary
   around a laptop drawn from the tokens, Claude's mark on its session), the numbered things launchpad sends from
   it on a wire each (dashed for one that is off unless you say yes), and the acts launchpad asks before doing. */
.how .tm,.how .tm-asks{max-width:992px;margin-inline:auto}
.tm{--tm-gap:72px;display:grid;grid-template-columns:minmax(0,372px) minmax(0,1fr);column-gap:var(--tm-gap);align-items:stretch}
.tm h3,.tm-asks h3{font-size:16px;font-weight:600;letter-spacing:-.01em}
.tm-machine{align-self:start;padding:22px 24px 24px;border:1.5px dashed var(--line-strong);border-radius:18px;background:var(--surface)}
.tm-machine p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.tm-laptop{width:100%;max-width:300px;height:auto;margin:2px auto 18px}
.tl-lid{fill:var(--surface);stroke:var(--line-strong);stroke-width:1.6}
.tl-screen{fill:var(--code-bg)}
.tl-prompt{fill:none;stroke:var(--accent-dark);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tl-card{fill:var(--surface)}
.tl-mark{fill:var(--ink)}
.tl-bar{fill:var(--ink-3);opacity:.5}
.tl-rule{fill:var(--line)}
.tl-ok{fill:var(--ok-wash);stroke:color-mix(in srgb,var(--ok) 40%,transparent)}
.tl-idle{fill:var(--bg-sub);stroke:var(--line)}
.tl-base{fill:var(--bg-sub);stroke:var(--line-strong);stroke-width:1.6;stroke-linejoin:round}
.tl-notch{fill:var(--line-strong)}
.tm-machine .tm-stays-h{margin-top:14px;font-size:13px;font-weight:600;color:var(--ink)}
.tm-stays{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tm-stays li{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px 0 9px;border:1px solid var(--line);border-radius:999px;background:var(--bg);font-size:13px;font-weight:500;color:var(--ink-2)}
.tm-stays svg{flex:none;color:var(--ink-3)}
.tm-out{min-width:0;padding-top:4px}
/* "Your data is secure": the block's own heading in the display face, its padlock in the accent (the shackle closes
   once in view), across both columns; under it the count of what launchpad reports and the opt-in sentence.
   The block sits on its own card so it reads as its own part of the section (owner, 2026-10-20). */
.how .tm{margin-top:72px;padding:40px 44px 44px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent-wash) 55%,var(--surface)) 0%,var(--surface) 220px)}
.tm-head{grid-column:1/-1;margin-bottom:32px;max-width:640px}
.tm .tm-title{display:flex;align-items:center;gap:14px;margin:0;font:400 44px/1.05 var(--display);letter-spacing:-.02em;color:var(--ink)}
.tm-title svg{flex:none;width:34px;height:34px;color:var(--accent)}
.tm-head h3{margin-top:12px;font-size:18px;font-weight:500;line-height:1.45;letter-spacing:-.01em;color:var(--ink)}
.tm-optin{margin-top:2px;font-size:15px;line-height:1.5;color:var(--ink-2)}
[data-lock].is-open .lp-shackle{transform:translateY(-2.5px) rotate(24deg)}
.tm-more{margin:6px 0 0 38px}
.tm-more summary{display:inline-block;cursor:pointer;font-size:13px;font-weight:500;color:var(--ink-3);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;list-style:none}
.tm-more summary::-webkit-details-marker{display:none}
.tm-more summary:hover{color:var(--accent-ink)}
.tm-full{margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.tm-more .tm-off{margin-left:0}
.tm-outl{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line)}
.tm-outl>li{position:relative;padding:15px 0 16px;border-bottom:1px solid var(--line)}
.tm-name{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:15px;color:var(--ink)}
.tm-name b{font-weight:600}
/* A row's hue says which kind it is, and its icon and words say the same (colour is never the only carrier):
   reported = the accent (launchpad's own acts); optional = grey, a dashed wire and a switch drawn off. */
.tm-outl>li{--hue:var(--accent);--hue-ink:var(--accent-ink);--hue-wash:var(--accent-wash)}
.tm-outl>li[data-optin]{--hue:var(--opt);--hue-ink:var(--opt-ink);--hue-wash:var(--opt-wash)}
.tm-ic{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--hue-wash);color:var(--hue-ink);flex:none}
.tm-chip{display:inline-flex;align-items:center;gap:6px;font:500 12px/1 var(--sans);padding:4px 9px 4px 5px;border-radius:999px;background:var(--hue-wash);color:var(--hue-ink)}
/* The switch, off: a track with its knob at the left. */
.tm-sw{position:relative;width:20px;height:12px;border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--hue);flex:none}
.tm-sw::after{content:"";position:absolute;left:3px;top:3px;width:6px;height:6px;border-radius:50%;background:var(--hue)}
.tm-say{margin-top:5px;padding-left:38px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.tm-off{display:flex;align-items:flex-start;gap:7px;margin:8px 0 0 38px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.tm-off svg{flex:none;margin-top:3px;color:var(--hue)}
.tm-off code,.ta-undo code{font-size:13px;background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:1px 6px;white-space:nowrap}
/* The wire: from a port on the machine's boundary, across the gap, to the row's icon. */
.tm-wire{position:absolute;left:calc(-1*var(--tm-gap) - 1px);top:23px;width:calc(var(--tm-gap) - 7px);height:12px;color:color-mix(in srgb,var(--hue) 70%,var(--ink-3));pointer-events:none}
.tm-wire::before{content:"";position:absolute;left:4px;right:5px;top:5px;border-top:1.5px solid currentColor}
.tm-wire::after{content:"";position:absolute;left:-4px;top:2px;width:8px;height:8px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 1.5px currentColor}
.tm-wire svg{position:absolute;right:0;top:0}
.tm-outl>li[data-optin] .tm-wire::before{border-top-style:dashed}
.tm-note{margin:6px 0 0 38px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.tm-note summary{display:inline-block;cursor:pointer;font-size:13px;font-weight:500;color:var(--ink-3);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;list-style:none}
.tm-note summary:hover{color:var(--accent-ink)}
.tm-note summary::-webkit-details-marker{display:none}
.tm-note p{margin-top:8px}
.tm-note code{font-size:13px;background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:1px 5px;overflow-wrap:anywhere}
.ts-fields{list-style:none;padding:0;margin:10px 0 0;border-top:1px solid var(--line)}
.ts-fields li{padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.tm-note .tm-note-h{font-weight:600;color:var(--ink)}
.tm-fine{margin-top:14px;font-size:13px;line-height:1.5;color:var(--ink-3)}
.tm-fine a{color:inherit}
/* "launchpad asks you before": the section's reassurance (owner, 2026-10-02 — "a bit more prominent … yes I won't
   worry about it going crazy on my project"). One tinted panel, the accent's wash fading into the surface (the accent
   is launchpad's own promise), a hairline in the same hue, no shadow and no glow; the four acts as plain cells, then
   the undo sentence on a hairline. Dark mode is its own composition: the dark wash into the dark surface. */
.tm-asks{position:relative;margin-top:36px;padding:26px 28px 24px;border-radius:18px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));background:linear-gradient(112deg,var(--accent-wash) 0%,color-mix(in srgb,var(--accent-wash) 45%,var(--surface)) 46%,var(--surface) 100%)}
.tm-asks h3{display:flex;align-items:center;gap:12px;font-size:20px;line-height:1.25;letter-spacing:-.015em}
.ta-ic{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 24%,var(--line));color:var(--accent-ink);flex:none}
.ta-acts{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 24px;font-size:15px;font-weight:500;color:var(--ink)}
.ta-acts li{display:flex;align-items:center;gap:10px;min-width:0}
.ta-acts svg{flex:none;color:var(--accent-ink)}
.ta-undo{display:flex;align-items:flex-start;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.ta-undo svg{flex:none;margin-top:2px;color:var(--accent-ink)}
.ta-cmd{white-space:nowrap}
@media (max-width:860px){
  .tm{grid-template-columns:minmax(0,1fr)}
  /* Stacked: one wire down from the machine, and an arrowhead on each row. */
  .tm-out{position:relative;padding-top:52px}
  .tm-out::before{content:"";position:absolute;left:9px;top:0;height:38px;border-left:1.5px solid var(--ink-3)}
  .tm-out::after{content:"";position:absolute;left:5px;top:30px;width:8px;height:8px;border:solid var(--ink-3);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
  .tm-wire{display:none}
  .tm-asks{padding:20px 18px;margin-top:28px}
  .tm-asks h3{font-size:18px}
  .ta-acts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .how .tm{margin-top:48px;padding:28px 18px 26px;border-radius:20px}
  .tm-head{margin-bottom:24px}
  .tm .tm-title{font-size:34px;gap:10px}
  .tm-title svg{width:28px;height:28px}
  .tm-head h3{font-size:16.5px}
}
/* ── end the machine ───────────────────────────────────────────────────────────── */

/* ── 2026-10-07: bands, auras, the platform pills, the lock pill ─────────────────────────────────────────────── */
/* Sections alternate (owner, 2026-10-07: "slightly more contrast between sections"): plain ground with a faint aura
   from the top (.aura), then a bg-sub band between hairlines (.how, .stacks, .band). Nothing in an aura moves. */
.aura{position:relative;isolation:isolate}
.aura::before{content:"";position:absolute;inset:0 0 auto;height:min(560px,75%);z-index:-1;pointer-events:none;background:var(--aura)}
.band{background:var(--bg-sub);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* The platforms launchpad ships on: pills drifting left, two copies for a seamless loop, edges faded by a mask. It
   pauses on hover and focus and is a still, wrapped row under reduced motion (the last block of this file). */
.pf{position:relative;max-width:1152px;margin:-32px auto 56px;overflow:hidden;padding:6px 0 10px;-webkit-mask-image:linear-gradient(90deg,transparent,black 9%,black 91%,transparent);mask-image:linear-gradient(90deg,transparent,black 9%,black 91%,transparent)}
/* Under the costs section's head (round 4): the row drifts below the title, inside the head's column. */
.head-left .pf{margin:28px 0 0;max-width:none}
.pf-track{display:flex;width:max-content;animation:pf-drift 64s linear infinite}
.pf:hover .pf-track,.pf:focus-within .pf-track{animation-play-state:paused}
.pf-row{display:flex;gap:10px;list-style:none;margin:0;padding:0 10px 0 0}
.pf-p{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 15px 0 8px;border-radius:999px;background:var(--card-bg);box-shadow:var(--card-shadow);font:500 14px/1 var(--sans);color:var(--ink-2);white-space:nowrap}
.pf-m{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:linear-gradient(160deg,var(--iris-wash),var(--accent-wash))}
.pf-m svg{width:14px;height:14px}
@keyframes pf-drift{to{transform:translateX(-50%)}}
/* "Apple" and "Google" in the costs lede: inline pills, the vendor's mark in one colour on the left. */
.vpill{display:inline-flex;align-items:center;gap:5px;margin:0 1px;padding:0 9px 0 7px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--line-strong),inset 0 1px 0 var(--hi);font-weight:500;line-height:1.55;color:var(--ink);white-space:nowrap;vertical-align:1px}
.vpill-m{display:grid;place-items:center;color:var(--ink)}
.vpill-m svg{width:13px;height:13px}
/* "Your data is secure": a pill with a lit edge and a faint Iris glow below it; its padlock's shackle is held open
   until the pill is in view, then closes once (app.js `lock`). Transform only; closed without JS and under reduced motion. */
.tm-secure.lock-pill{display:inline-flex;gap:8px;margin-bottom:12px;padding:7px 14px 7px 11px;border-radius:999px;font-size:14px;font-weight:600;color:var(--accent-ink);background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--accent-wash) 75%,var(--surface)));box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 24%,var(--line)),0 8px 20px -10px color-mix(in srgb,var(--iris) 60%,transparent),inset 0 1px 0 var(--hi)}
.tm-secure.lock-pill svg{color:var(--accent)}
/* The subscriptions card (round 5; page.mjs `subsCard`, src/plans.mjs): plans small apps often pay for, each crossed
   out in turn — a hairline drawn across (a transform), the price dimmed, the free path's word in its place — and the
   total counts down to $0/mo. The markup is the end state; app.js plays it once (styles: `.subs.pre` is the start). */
.subs{background:var(--card-bg);box-shadow:var(--card-shadow);border-radius:16px;padding:22px 24px 18px}
.subs-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px;font-size:13px;color:var(--ink-3)}
.subs-h b{font-size:15px;font-weight:600;color:var(--ink)}
.subs-l{list-style:none;margin:0;padding:0}
.subs-r{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.subs-r:first-child{border-top:0}
.subs-m{width:32px;height:32px}
.subs-m svg{width:16px;height:16px;color:var(--ink)}
.subs-n{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.subs-n b{font-size:15px;font-weight:600;color:var(--ink)}
.subs-n small{font-size:13px;color:var(--ink-3)}
.subs-p{display:flex;align-items:baseline;justify-content:flex-end;gap:10px;font-variant-numeric:tabular-nums;white-space:nowrap}
.subs-was{position:relative;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;transition:color .4s ease}
.subs-free{font-style:normal;font-size:14px;font-weight:600;color:var(--accent-ink);opacity:0;transform:translateX(-4px);transition:opacity .4s ease .3s,transform .4s var(--ease-out) .3s}
/* The strike: a hairline drawn left to right across the plan's name, then across its price. */
.subs-n b{position:relative;align-self:flex-start;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.subs-n b::after,.subs-was::after{content:"";position:absolute;left:-2px;right:-2px;top:55%;height:1.5px;border-radius:1px;background:var(--ink-3);transform-origin:0 50%;transform:scaleX(0);transition:transform .45s var(--ease-out)}
.subs-was::after{transition-delay:.15s}
.subs-r.x .subs-n b::after,.subs-r.x .subs-was::after{transform:scaleX(1)}
.subs-r.x .subs-n b,.subs-r.x .subs-was{color:var(--ink-3)}
.subs-r.x .subs-free{opacity:1;transform:none}
.subs-t{display:flex;align-items:baseline;justify-content:space-between;margin-top:6px;padding-top:14px;border-top:1px solid var(--line-strong);font-size:15px;font-weight:600;color:var(--ink)}
.subs-t b{font:400 34px/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.subs-rest{margin-top:10px;font-size:13.5px;color:var(--ink-2)}
.subs-note{margin-top:4px;font-size:12.5px;color:var(--ink-3)}
.lp-shackle{transform-box:view-box;transform-origin:16px 11px;transition:transform .8s var(--ease-out) .12s}
.lock-pill.is-open .lp-shackle{transform:translateY(-2.5px) rotate(24deg)}
@media (max-width:640px){
  .pf{margin:-24px auto 36px}
  .pf-p{height:34px;font-size:13.5px}
}

@media (max-width:980px){
  .nav-links{display:none}
  .head-split{grid-template-columns:minmax(0,1fr);gap:32px;margin-bottom:40px}
  .head-split>.head-left{position:static}
  .rq-cols{grid-template-columns:minmax(0,1fr)}
  .rq-col+.rq-col{border-left:0;border-top:1px solid var(--line)}
  .steps{grid-template-columns:minmax(0,1fr);max-width:520px;margin:0 auto}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  /* The plans card on a phone: the plan on its line, the prices on the next, under it. */
  .subs{padding:18px 16px 14px}
  .subs-r{grid-template-columns:32px minmax(0,1fr);row-gap:4px}
  .subs-p{grid-column:2;justify-content:flex-start}
  .hero{padding:40px 0 24px}
  .hero h1{margin-top:0;font-size:42px;line-height:1.02}
  /* The phone's own drawing: lower hills, two rockets at the edges, trees at the sides. */
  .hero{--hero-pad:40px}
  .hero-scene{--hs-ext:120px}
  .hs-wide{display:none}
  .hs-phone{display:block}
  .lede{margin-top:18px;font-size:17px;line-height:1.5}
  .cta-row{flex-direction:column;align-self:stretch;width:100%}
  .cta-row .btn{width:100%}
  /* The nav's buy key keeps its label and loses its glyph: at 375 the brand mark beside it needs the room. */
  .nav .btn-sm .key-g{display:none}
  /* …and the row closes up, so the on-sale key ("Get launchpad — {price}") ends on the page's gutter, not past it. */
  .nav-in{gap:8px}
  .nav-end{gap:4px}
  .nav .btn-sm{padding:0 11px}
  .cta-row{gap:12px}
  .assure{font-size:13px;gap:4px 14px}
  .assure span+span::before{content:none}
  /* Two keys stacked in the hero: closed up, so the line under them stays beside the buy key. */
  .hero .cta-row{gap:8px}
  .hero .cta-row .btn-ghost{height:44px}
  .hero .cta-row+.assure{margin-top:8px}
  .need-pick{width:auto;justify-content:center}
  .np{flex:none;padding:0 12px;height:34px}
  .sum-r{grid-template-columns:minmax(0,1fr);row-gap:10px;padding:18px 18px 20px}
  .sum-fig b,.sum-none{font-size:34px}
  .rq-h{padding:18px 18px 2px}
  .rqs{padding:0 18px 6px}
  .rq{grid-template-columns:30px minmax(0,1fr);gap:4px 12px;align-items:start}
  .rq-logo{width:30px;height:30px}
  .rq-cost{grid-column:2;text-align:left;max-width:none}
  .rq-fig{font-size:20px}
  .usage-l{padding:8px 18px 0}
  .usage-n{padding:12px 18px 0}
  .legend{margin-top:-12px}
  .trust{justify-content:flex-start;display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;font-size:13px}
  .sec{padding:72px 0}
  .sec-head{margin-bottom:32px}
  .sec-head h2,.mission-copy h2,.final h2{font-size:36px}
  .sub{font-size:16px}
  .cov-grid{grid-template-columns:minmax(0,1fr)}
  .mc-does{grid-template-columns:minmax(0,1fr);margin-top:36px;padding-top:24px;gap:20px}
  .tiles{gap:8px;max-width:calc(var(--cols-m,4)*86px - 8px)}
  .tile{width:78px;min-height:80px;padding:12px 3px 9px;gap:7px}
  .tile-name{font-size:11px;-webkit-line-clamp:3}
  .pc-body{padding:24px 20px}
  .qs details p{padding-right:0}
  .final{padding:72px 0}
  .foot{flex-direction:column;align-items:flex-start}
}

/* On a phone narrower than 420px the nav's key says "Get it — {price}" (its name is still the whole label), so the
   wordmark keeps its letters beside it (owner, 2026-10-11; it used to drop them). Under 340px the letters go. */
@media (max-width:419px){
  .nav .bl-long{display:none}
  .nav .bl-short{display:inline}
}
@media (max-width:339px){
  .nav:has([data-buy]) .brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* Phone polish (owner, 2026-10-09: "cramped … the demo is not good … show the background a bit better"; research and
   before/after: harness/ux/2026-10-09/mobile-site/). A smaller type scale, the hero's landscape given its own open band
   between the keys and the demo, the demo one screen tall, and long section lines read from the left. */
@media (max-width:640px){
  .hero{padding:28px 0 20px}
  .hero h1{font-size:clamp(38px,10.4vw,44px);line-height:1.02}
  .lede{margin-top:14px;font-size:16px;line-height:1.55}
  .hero .cta-row{margin-top:28px}
  /* A bolder phone pass (owner, 2026-10-11): the headline, one short promise, the keys and the line under them share
     the first screen with the landscape. */
  .lede{font-size:17px;line-height:1.5;max-width:19em}
  /* The description is four lines on a phone; in the metric-matched fallback it can set in three until Inter arrives,
     and the swap then pushed the run (on the first screen since 2026-10-20) down a line. Its four lines are held. */
  .hero .lede{min-height:6em}
  /* The line under the keys on a phone: a centred short stack, one fact a line. */
  .kf{flex-direction:column;align-items:center;gap:5px;margin-top:16px;font-size:14px}
  .buy-help{flex-direction:column;align-items:center;gap:6px}
  /* The landscape: the scene runs further below the keys, and the demo starts lower, so the hills, the trees and the
     two rockets have a band of their own instead of sitting behind the buttons. */
  .hero-scene{--hs-ext:170px}
  .hero .run-stage{margin-top:104px}
  /* The two near ridges sit in that band, under no words: a step deeper by day, so the hills read as hills. */
  :root:not([data-theme="dark"]) .hs-phone{--hs-r2a:11%;--hs-r2b:14%;--hs-r3a:16%;--hs-r3b:20%}
  /* The four facts: a 2×2 grid, each icon on its text's first line. */
  .trust{align-items:start;gap:14px 14px;margin-top:28px;font-size:13.5px;line-height:1.4}
  .trust li{align-items:flex-start}
  .trust svg{flex:none;margin-top:1px}
  .sec{padding:64px 0}
  .sec-head{margin-bottom:28px}
  .sec-head h2,.mission-copy h2,.final h2{font-size:32px;line-height:1.08}
  .sub{font-size:16px;line-height:1.55}
  /* A centred head over five or six lines of description reads from the left on a phone. */
  .covered .sec-head,.mission-head{text-align:left}
  .covered .sec-head .sub,.mission-head .sub{text-wrap:pretty}
  .covered .legend{justify-content:flex-start}
  /* The stacks' key: one centred run of text, each swatch before its words, wrapping between words, not inside one. */
  .tiles-legend{display:block;text-align:center;line-height:1.6;text-wrap:balance}
  .tiles-legend .lg{vertical-align:-1px;margin-right:6px}
  /* A long command wraps on a phone instead of running off a box that does not look scrollable (2026-10-11: the
     marketplace line was cut at "sidkaria/launch"). */
  .term-b{font-size:12.5px;padding:12px 14px 14px;white-space:pre-wrap;overflow-wrap:anywhere}
  .final{padding:64px 0}
}

/* The phone's buy bar (page.mjs `buyBar`; owner, 2026-10-11): phones only, 52px, at the foot of the screen, clear of
   the edges and the home indicator. app.js shows it after the hero's key has scrolled away and hides it while another
   buy key or the footer is on screen; its close keeps it away for the visit. It slides (transform and opacity only),
   and under reduced motion it simply appears. While it shows, the nav's key steps aside so one key is on screen. */
.buybar{display:none}
@media (max-width:640px){
  .js .buybar{position:fixed;z-index:60;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));height:52px;display:flex;align-items:center;gap:10px;padding:0 6px 0 16px;border-radius:14px;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);box-shadow:0 0 0 1px var(--line-strong),0 10px 28px -10px rgb(var(--drop)/.35);transition:transform .28s var(--ease-out),opacity .2s}
  .js .buybar[hidden]{display:flex;visibility:hidden;opacity:0;transform:translateY(calc(100% + 16px));transition:transform .22s,opacity .2s,visibility 0s .22s}
  .bbar-t{display:flex;align-items:baseline;gap:8px;flex:1;min-width:0;font-size:14px;color:var(--ink-3);white-space:nowrap}
  .bbar-t b{font-size:15px;font-weight:600;color:var(--ink)}
  .bbar-t span::before{content:"·";margin-right:8px;color:var(--line-strong)}
  .buybar .btn-sm{height:38px;padding:0 16px}
  .bbar-x{display:grid;place-items:center;width:40px;height:40px;flex:none;border:0;border-radius:10px;background:none;color:var(--ink-3);cursor:pointer}
  .bbar-x:hover{color:var(--ink)}
  .nav .nav-end .btn-buy{transition:opacity .2s,visibility 0s}
  :root[data-buybar-on] .nav .nav-end .btn-buy{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
}

/* The one nudge (page.mjs `nudge`; owner, 2026-10-11): desktop with a pointer only, a 300px card in the bottom-right
   corner — never an overlay, never over the middle of the page. It fades in (opacity and transform), and under reduced
   motion it simply appears. */
.nudge{display:none}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .js .nudge:not([hidden]){position:fixed;z-index:60;right:24px;bottom:24px;display:block;width:300px;padding:16px 44px 16px 18px;border-radius:14px;background:var(--surface);box-shadow:0 0 0 1px var(--line-strong),var(--shadow-2);animation:ngIn .32s var(--ease-out) both}
  .ng-t{font-size:15px;font-weight:600;color:var(--ink)}
  .ng-l{display:flex;flex-direction:column;gap:6px;margin-top:8px;font-size:14px}
  .ng-l a{font-weight:500}
  .ng-x{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:8px;background:none;color:var(--ink-3);cursor:pointer}
  .ng-x:hover{color:var(--ink)}
}
@keyframes ngIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Pause motion (owner, 2026-10-07, audit E; WCAG 2.2.2): the footer's toggle sets data-motion="paused" on the root,
   remembered per visitor (app.js; head boot script). Every animation holds its frame, every transition is off (a
   transition with a delay still counts as running — see below), and app.js stops the demo's clock and lands anything
   finite. Shown only with JavaScript, and not under reduced motion, where nothing moves to pause. */
.motion-toggle{display:none;align-items:center;gap:7px;padding:4px 0;border:0;background:none;color:var(--ink-3);font:inherit;cursor:pointer}
.motion-toggle:hover{color:var(--ink)}
.js .motion-toggle{display:inline-flex}
.motion-toggle i{display:block;width:8px;height:9px;border-inline:2.5px solid currentColor;box-sizing:border-box}
.motion-toggle[aria-pressed="true"] i{border:0;width:0;height:0;border-block:4.5px solid transparent;border-left:8px solid currentColor}
:root[data-motion="paused"] *,:root[data-motion="paused"] *::before,:root[data-motion="paused"] *::after{animation-play-state:paused!important;transition:none!important}
:root[data-motion="paused"] .dm-replay{display:none}

/* ── The builders card's letter tiles, and the free plans, drawn (owner, 2026-10-20) ───────────────────────────── */
.subs-letter{display:inline-grid;place-items:center;font:600 15px/1 var(--sans);color:var(--ink-2)}
.need-hub{margin:56px 0 48px}
.need-hub>.rq-h{text-align:center;margin-bottom:22px}
.fh{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:0 72px;max-width:960px;margin:0 auto}
.fh-col{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.fh-n{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-1);transition:border-color .5s ease,box-shadow .5s ease}
.fh-m{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--bg-sub);color:var(--ink)}
.fh-t{display:flex;flex-direction:column;min-width:0}
.fh-t b{font-size:15px;font-weight:600;color:var(--ink)}
.fh-t small{font-size:13px;color:var(--ink-3)}
.fh-chip{padding:4px 9px;border-radius:999px;font:600 12px/1 var(--sans);background:var(--ok-wash);color:var(--ok);white-space:nowrap;transition:opacity .4s ease,transform .4s var(--ease-out)}
/* The wires: from each platform to the app, drawn across the gap. */
.fh-n::after{content:"";position:absolute;top:50%;width:72px;border-top:1.5px solid color-mix(in srgb,var(--accent) 45%,var(--line-strong));transition:transform .55s var(--ease-out)}
.fh-l .fh-n::after{left:100%;transform-origin:0 50%}
.fh-r .fh-n::after{right:100%;transform-origin:100% 50%}
.fh-app{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;width:168px;padding:18px 16px 16px;border-radius:18px;background:var(--surface);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));box-shadow:0 18px 40px -22px color-mix(in srgb,var(--accent) 55%,transparent),var(--shadow-1)}
.fh-win{display:flex;gap:4px;align-self:stretch;padding:0 0 10px;border-bottom:1px solid var(--line)}
.fh-win i{width:7px;height:7px;border-radius:50%;background:var(--line-strong)}
.fh-app b{font:400 24px/1.1 var(--display);color:var(--ink)}
.fh-live{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font:600 12.5px/1.4 var(--sans);background:var(--ok-wash);color:var(--ok);transition:opacity .4s ease}
.fh-live i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 25%,transparent)}
/* Before it plays (app.js adds .fh-wait to a picture below the fold): wires undrawn, chips and "Live" hidden. */
.fh-wait .fh-n::after{transform:scaleX(0)}
.fh-wait .fh-chip{opacity:0;transform:translateY(3px)}
.fh-wait .fh-live{opacity:0}
.fh-n::after{transition-delay:calc(var(--i)*.38s)}
.fh-chip{transition-delay:calc(var(--i)*.38s + .35s)}
.fh-live{transition-delay:2.6s}
.fh-wait .fh-n::after,.fh-wait .fh-chip,.fh-wait .fh-live{transition-delay:0s}
@media (max-width:860px){
  .fh{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .fh-app{grid-column:1/-1;order:-1;justify-self:center;margin-bottom:8px}
  .fh-n{grid-template-columns:auto minmax(0,1fr);gap:4px 10px;padding:10px 11px}
  .fh-chip{grid-column:1/-1;justify-self:start}
  .fh-m{width:30px;height:30px}
  .fh-t b{font-size:14px}.fh-t small{font-size:12.5px}
  .fh-n::after{display:none}
  .fh-col{gap:10px}
  .need-hub{margin:40px 0 36px}
}
@media (max-width:640px){.bb-bob{translate:-64% 0}.bb-bob::after{left:64%}}
/* ── The costs section, condensed (owner, 2026-10-20: "way too crowded", "nested stuff"): one strip (the fee | the
   timeline in one plain line), then the accounts in two columns, the optional ones folded. ─────────────────────── */
.need-head{margin-bottom:28px}
.need-hub{margin:0 0 52px}
.need-panel .sum{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);background:none;border-bottom:1px solid var(--line)}
.need-panel .sum-r{display:block;padding:22px 28px 22px}
.need-panel .sum-r+.sum-r{border-top:0;border-left:1px solid var(--line)}
.need-panel .sum-k{padding:0 0 10px}
.need-panel .sum-fig b{font-size:32px}
.need-panel .sum-n{margin-top:6px;font-size:13.5px}
.need-panel .sum-now b{font:600 20px/1.3 var(--sans);letter-spacing:-.01em}
.need-panel .sum-path{display:grid;gap:10px;margin:2px 0 0;grid-template-columns:none}
.need-panel .sum-path li{position:relative;display:block;padding:0 0 0 22px;border:0;border-radius:0;background:none}
.need-panel .sum-path li::before{content:"";position:absolute;left:3px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.need-panel .sum-path li:not(:last-child)::after{content:"";position:absolute;left:6.25px;top:17px;bottom:-9px;border-left:1.5px solid var(--line)}
.need-panel .sum-path [data-who="launchpad"]::before{background:var(--accent)}
.need-panel .sum-path li+li::before{border:0;width:8px;top:6px;left:3px}
.need-panel .sum-path b{font-size:15px;font-weight:600;line-height:1.35;color:var(--ink)}
.need-panel .sum-path [data-who="launchpad"] b{color:var(--accent-ink)}
.need-panel .sp-wait{margin-left:8px;font-size:13px;font-weight:500;color:var(--ink-3)}
.sum-before{margin-top:14px;font-size:13px;line-height:1.5;color:var(--ink-3)}
.sum-before.is-only{margin-top:0;font-size:14.5px;color:var(--ink-2)}
.need-panel>.rq-h{padding:20px 28px 2px}
.need-panel .rqs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:44px;padding:0 28px 8px}
.need-panel .rq+.rq{border-top:0}
.need-panel .rq{border-top:0;padding:12px 0}
.need-panel .rq-cost{max-width:none}
.rq-laters{grid-column:2/-1;margin:-8px 0 0;font-size:12.5px;line-height:1.4;color:var(--ink-3)}
.rq-laters .rq-later{display:inline;margin:0}
.rq-laters .rq-later+.rq-later::before{content:" · "}
.rq-more{border-top:1px solid var(--line);padding:0 28px 10px}
.rq-more summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;padding:16px 0 10px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.rq-more summary::-webkit-details-marker{display:none}
.rq-more summary::after{content:"";width:6px;height:6px;margin-left:2px;border:solid var(--ink-3);border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.rq-more[open] summary::after{transform:rotate(225deg) translateY(-1px)}
.rq-more summary:hover{color:var(--accent-ink)}
.rq-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--bg-sub);font-size:12px;color:var(--ink-2)}
.rq-more .rqs{padding:0 0 4px}
.price-row{display:grid;grid-template-columns:repeat(2,minmax(0,440px));gap:28px;justify-content:center;align-items:start}
.price-row .price-card{max-width:none;margin:0}
@media (max-width:860px){
  .need-panel .sum{grid-template-columns:minmax(0,1fr)}
  .need-panel .sum-r+.sum-r{border-left:0;border-top:1px solid var(--line)}
  .need-panel .sum-r{padding:18px 18px}
  .need-panel .rqs{grid-template-columns:minmax(0,1fr);padding:0 18px 6px}
  .need-panel>.rq-h{padding:18px 18px 2px}
  .rq-more{padding:0 18px 8px}
  .rq-more .rqs{padding:0}
  .need-panel .sp-wait{display:block;margin:2px 0 0}
  .price-row{grid-template-columns:minmax(0,1fr)}
}

.subs-n small:empty{display:none}

/* ── Ship your [stack] app (src/stack-pages.mjs) ─────────────────────────── */
.st-head{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.st-logo{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--card-bg);box-shadow:var(--card-shadow);color:var(--c,var(--ink))}
.st-grid{margin-top:22px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.st-grid .cap-lock{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;color:var(--ink-3)}
.st-need .need-panels{display:grid;gap:12px;margin-top:22px}
.st-path{margin-top:14px;font:600 15px/1.4 var(--sans);color:var(--ink-2)}
.st-need .need-panel .rqs{grid-template-columns:minmax(0,1fr)}
@media (max-width:640px){.hero .cta-row.has-tip{margin-top:44px}}

/* launchpad, once near the top of the checklist (guide-pages.mjs `launchpadLine`, owner 2026-10-23). */
.gd-lpline{margin:20px 0 8px;padding:14px 18px;border-radius:14px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));background:linear-gradient(112deg,var(--accent-wash),var(--surface));font-size:15px;line-height:1.55;color:var(--ink-2)}
.gd-lpline b{color:var(--ink);font-weight:600}
.gd-lpline a{font-weight:600;white-space:nowrap}
.gd-mail .gd-lpline{margin:18px 0 0;padding:14px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;font-size:14.5px}
/* ── The cost calculator (/cost/calculator/, src/costs.mjs, src/calc.js): a form card, then the costs panel's own
   strip and rows, one column so a vendor's sentence reads whole. Rows the selection leaves out are [hidden]. ────── */
.calc-page [hidden]{display:none!important}
.calc{margin-top:32px}
.calc-form{display:grid;gap:0;padding:22px 24px 6px;border-radius:18px;background:var(--card-bg);box-shadow:var(--card-shadow)}
.calc-pick{border:0;margin:0;padding:0 0 18px;min-width:0}
.calc-ask{display:block;margin:0 0 12px;padding:0;font:600 15px/1.4 var(--sans);color:var(--ink)}
.calc-hint{display:block;margin-top:2px;font-weight:400;font-size:13.5px;line-height:1.45;color:var(--ink-3)}
.calc-paths{display:flex;flex-wrap:wrap;gap:8px}
.calc-chip{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2)}
.calc-chip::before{content:"";width:14px;height:14px;margin-right:9px;border:1.5px solid var(--line-strong);border-radius:4px;background:var(--surface);flex:none}
.np-in:checked+.calc-chip{border-color:var(--accent);background:var(--accent-wash);color:var(--accent-ink)}
.np-in:checked+.calc-chip::before{border-color:var(--accent);background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2 6 9.6l4.6-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.calc-q{display:flex;align-items:center;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;padding:16px 0;border-top:1px solid var(--line)}
.calc-q .calc-ask{margin:0;flex:1 1 260px}
.calc-yn{margin:0;width:auto;flex:none}
.calc-yn .np{min-width:64px;justify-content:center}
.calc-yn .np-in:checked+.np{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}
.calc-out{margin-top:24px}
.calc-empty{padding:28px 24px;border:1px dashed var(--line-strong);border-radius:18px;text-align:center;color:var(--ink-2)}
.need-panel.calc-panel .sum{grid-template-columns:repeat(3,minmax(0,1fr))}
.calc-panel .sum-v{min-height:32px}
.need-panel.calc-panel .rqs{grid-template-columns:minmax(0,1fr)}
.need-panel.calc-panel .rq+.rq:not([hidden]){border-top:1px solid var(--line)}
.calc-g+.calc-g{border-top:1px solid var(--line)}
.calc-panel .rq-h{padding:20px 28px 2px}
.calc-src{display:block;margin-top:4px;font-size:12.5px;line-height:1.4;color:var(--ink-3)}
.calc-src a{color:var(--ink-2);text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.calc-panel .rq-cost{white-space:nowrap}
@media (max-width:860px){
  .need-panel.calc-panel .sum{grid-template-columns:minmax(0,1fr)}
  .calc-panel .rq-h{padding:18px 18px 2px}
}
@media (max-width:640px){
  .calc-form{padding:18px 18px 4px}
  .calc-q{align-items:flex-start}
  .calc-panel .rq-cost{white-space:normal}
}

/* ── 2026-10-27 layout: bands, shorter sections, compact grids on phones ─────────────────────────────────────────── */
/* Each section its own band (owner: "clearer separation … with background changes"). Night bands stay dark in both
   themes, like the terminal (--code-bg); the rest follow the theme. */
.band-white{background:var(--bg)}
.band-tint{background:var(--bg-sub)}
.band-night,.band-navy{background:linear-gradient(170deg,color-mix(in srgb,var(--accent) 16%,var(--code-bg)),var(--code-bg) 70%);color:var(--code-ink)}
.band-navy{background:linear-gradient(170deg,color-mix(in srgb,var(--accent) 26%,var(--code-bg)),color-mix(in srgb,var(--accent) 8%,var(--code-bg)))}
.band-night .sec-head h2,.band-navy .sec-head h2{color:#fff}
.band-night .sub,.band-navy .sub{color:color-mix(in srgb,var(--code-ink) 75%,transparent)}
.band-night .acc,.band-navy .acc{color:color-mix(in srgb,var(--accent) 45%,#fff)}
.sec.watch,.sec.covered,.sec.need,.sec.secure,.sec.reviews{padding:80px 0}
@media (max-width:640px){.sec{padding:56px 0}.sec.watch,.sec.covered,.sec.need,.sec.secure,.sec.reviews{padding:48px 0}.sec-head{margin-bottom:28px}.sec-head h2{font-size:32px}}

/* Hero, phone: buying is the main path; emailing the link is folded under it. */
.buy-later,.lap-x{display:none}
@media (hover:none) and (pointer:coarse){
  .buy-later{display:block;margin-top:12px;font-size:14.5px;color:var(--ink-2);text-align:center}
  .lap-x{display:block;max-width:420px;margin:6px auto 0;text-align:center}
  .lap-x>summary{display:inline-block;cursor:pointer;font-size:14px;color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;list-style:none}
  .lap-x>summary::-webkit-details-marker{display:none}
  .lap-x .lap{margin-top:10px}
}

/* Demo band: the video (or the run) and three steps in one row. */
.demo-stage{max-width:960px;margin:0 auto}
.demo-v{display:block;width:100%;border-radius:14px;box-shadow:0 0 0 1px rgb(255 255 255/.08)}
.demo-steps{list-style:none;margin:28px auto 0;padding:0;max-width:960px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.demo-steps li{display:flex;flex-direction:column;gap:4px;font-size:14px;color:color-mix(in srgb,var(--code-ink) 70%,transparent)}
.demo-steps b{color:#fff;font-size:15px;font-weight:600}
.ds-i{color:color-mix(in srgb,var(--accent) 45%,#fff)}
.demo-more{margin-top:18px;text-align:center}
.demo-more a{color:color-mix(in srgb,var(--accent) 45%,#fff);font-weight:600;text-underline-offset:3px}
@media (max-width:640px){.demo-steps{gap:10px}.demo-steps li{font-size:12px}.demo-steps b{font-size:13px}}

/* Reviews: a row a thumb slides, the next card peeking. */
.rv-row{list-style:none;margin:0;padding:0 0 6px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory}
.rv{scroll-snap-align:start;padding:18px;border-radius:14px;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.rv-q{font-size:15px;line-height:1.5;color:var(--ink)}
.rv-who{margin-top:12px;display:flex;flex-direction:column;font-size:13px;color:var(--ink-3)}
.rv-who b{color:var(--ink);font-weight:600}
@media (max-width:640px){.rv-row{grid-auto-columns:82%}}

/* Everything it sets up: category tiles, three across on a phone. */
.cov-tiles{list-style:none;margin:0 auto;padding:0;max-width:960px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cov-tiles>li{display:flex}
.cov-tiles .cov-card{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px;border-radius:14px;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.cov-tiles .cov-ic{color:var(--accent)}
.cov-tiles .cov-card b{font-size:15px;font-weight:600;line-height:1.25;color:var(--ink)}
.cov-tiles .n{font-size:13px;color:var(--ink-3)}
.cov-tiles .n::after{content:" items"}
@media (max-width:640px){.cov-tiles{grid-template-columns:repeat(3,1fr);gap:8px}.cov-tile{padding:10px;gap:6px}.cov-tiles .cov-card b{font-size:12.5px}.cov-tiles .n{font-size:11.5px}}


/* Your data is secure: four facts, two by two on a phone; the full list one tap away. */
.sec-facts{list-style:none;margin:0 auto;padding:0;max-width:960px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sec-facts li{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:14px;background:rgb(255 255 255/.05);box-shadow:inset 0 0 0 1px rgb(255 255 255/.08);font-size:13.5px;color:color-mix(in srgb,var(--code-ink) 72%,transparent)}
.sec-facts li svg{color:color-mix(in srgb,var(--accent) 45%,#fff)}
.sec-facts b{color:#fff;font-size:15px;font-weight:600}
.sec-more{max-width:960px;margin:18px auto 0;color:var(--code-ink)}
.sec-more>summary{cursor:pointer;text-align:center;font-weight:600;color:color-mix(in srgb,var(--accent) 45%,#fff)}
.sec-more[open]{background:var(--bg);color:var(--ink);border-radius:16px;padding:20px}
@media (max-width:640px){.sec-facts{grid-template-columns:repeat(2,1fr);gap:8px}.sec-facts li{padding:12px;font-size:12px}.sec-facts b{font-size:13px}}

/* FAQ: the rest under "More questions". */
.qs-more>summary{cursor:pointer;margin-top:14px;font-weight:600;color:var(--accent-ink)}

/* Compact pass (2026-10-27): costs rows short, optional accounts as chips, the free-plans picture small on phones,
   stacks as a two-row strip on phones, the builders card one line a row. */
.calc-panel .rq-for,.calc-panel .rq-laters,.calc-panel .rq-tag{display:none}
.calc-panel .rq{padding:8px 0}
.need .sec-head .sub{max-width:560px;margin-left:auto;margin-right:auto}
.usage{margin-top:16px}
.usage-l{padding:8px 0 0;justify-content:center}
@media (max-width:640px){
  .usage-l li{font-size:12px}
  .need-pick{gap:4px}
}
@media (max-width:640px){
  .tiles{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:78px;gap:8px;overflow-x:auto;justify-content:start;max-width:none;scroll-snap-type:x proximity;padding-bottom:6px}
  .tile{width:78px;min-height:74px;padding:10px 4px 8px;gap:6px;scroll-snap-align:start}
  .tile span,.tile b{font-size:11px}
  .subs-r{grid-template-columns:28px minmax(0,1fr) auto;padding:8px 0;gap:10px}
  .subs-p{display:flex;flex-direction:column;align-items:flex-end;font-size:12.5px}
  .cov-tiles .cov-card{padding:10px 8px;gap:4px}
  .cov-tiles .cov-ic{padding:0;background:none;box-shadow:none}
}
@media (max-width:640px){
  .usage-l li{padding:4px 8px;gap:6px}
  .usage-l li .rq-logo{width:20px;height:20px}
  .usage-l b{font-size:12px;font-weight:500}
  .subs-free{display:none}
  .subs-p{flex-direction:row}
}
@media (max-width:640px){.demo-steps li>span:last-child{display:none}}

/* Hero, phone (2026-10-27: "so damn crowded"): two quiet lines under the key — buy now or email the link, then the
   ladder and unlimited projects. "Pay once" (the key says "once") and the costs link (two sections down) stay on
   desktop only. */
@media (hover:none) and (pointer:coarse){
  .buy-later{display:block;margin-top:12px;font-size:14px;line-height:1.5;color:var(--ink-2);text-align:center}
  .buy-later>span{display:inline}
  .buy-later .lap-x{display:inline;margin:0}
  .buy-later .lap-x>summary{display:inline;font-size:14px}
  .buy-later .lap-x[open]>summary{display:none}
  .buy-later .lap-x[open] .lap{display:block;margin:10px auto 0}
  .hero .kf{margin-top:10px;gap:4px 14px;font-size:13px}
  .hero .kf li:first-child{display:none}
  .hero .kf li{gap:6px}
}


/* ── 2026-10-27, second pass: keep the charm (owner: "you removed all the charm") ─────────────────────────────── */
/* How it works rises out of the hero (owner, 2026-10-27: "a professional looking smooth transition … we should still see
   the hills coming over the next section"): the section is see-through where the hills fade out, so the scenery runs
   on behind its heading, and the dark product window sits over the horizon like a screen set on the hills. Light to
   light: the page's own background takes over below the hills, so there is no seam. */
.hero{position:relative;z-index:1}
.sec.watch{position:relative;z-index:2;margin-top:0;padding-top:28px;background:linear-gradient(180deg,transparent 0,transparent calc(var(--hs-ext,200px) - 20px),var(--bg) calc(var(--hs-ext,200px) + 140px))}
.sec.watch .sec-head{margin-bottom:22px}
.sec.watch .demo-stage{position:relative;filter:drop-shadow(0 30px 50px rgb(20 26 58/.28))}
/* While the run is full screen on a phone (run.css .run-stage.is-full): the page under it does not scroll, the band's
   shadow goes (a filter would pin the fixed run to the band), and nothing of the page floats over it. */
html.run-full-on,html.run-full-on body{overflow:hidden}
html.run-full-on .sec.watch .demo-stage{filter:none}
html.run-full-on .buybar,html.run-full-on .nudge{visibility:hidden}
.sec.watch .demo-steps li{color:var(--ink-2)}
.sec.watch .demo-steps b{color:var(--ink)}
.sec.watch .ds-i{color:var(--accent)}
.sec.watch .demo-more a{color:var(--accent-ink)}
.sec.watch .eyebrow{color:var(--accent-ink);background:color-mix(in srgb,var(--surface) 80%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent);backdrop-filter:blur(6px)}
.sec.watch .run-note,.sec.watch .run + p{color:var(--ink-3)}
/* A label over each heading, so every section reads as its own part. */
.eyebrow{display:inline-block;margin-bottom:14px;padding:4px 10px;border-radius:999px;font:600 12px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent-wash);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent)}
.band-night .eyebrow,.band-navy .eyebrow{color:#fff;background:rgb(255 255 255/.08);box-shadow:inset 0 0 0 1px rgb(255 255 255/.14)}
.sec-head.head-left{text-align:left;margin-left:0}

/* Each section its own surface. */
.band-checklist{background:radial-gradient(120% 70% at 50% 0%,var(--accent-wash),transparent 60%),var(--bg)}
.sec.need{background:linear-gradient(180deg,var(--bg-sub),var(--bg) 40%)}
.sec.stacks{background:var(--bg);border-top:1px solid var(--line)}
.sec.pricing{background:radial-gradient(90% 60% at 50% 100%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%),var(--bg-sub)}
.band-reviews{background:var(--bg)}
.sec.faq{background:var(--bg-sub);border-top:1px solid var(--line)}

/* The checklist cards, kept, and compact on a phone: two across, the first two items each, the lock and the count. */
@media (max-width:640px){
  .cov-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .cov-card{padding:10px 10px 6px}
  .cov-card h3{font-size:12.5px;gap:6px;padding-bottom:6px;flex-wrap:wrap}
  .cov-card h3 .n{font-size:11px}
  .cov-card .cap{font-size:11.5px;padding:3px 0;gap:6px}
  .cov-card .cap-p{display:none}
  .cov-card .cap-lock{font-size:11px}
  .cov-card .cap-lock .bars{display:none}
  .unlock{grid-column:1/-1;padding:16px;font-size:13.5px}
  .covered .legend{display:none}
}

/* The email strip: open on phones (C3), a quiet row on a computer. */
.lap{display:block;max-width:460px;margin:14px auto 0}
@media (hover:hover) and (pointer:fine){
  .lap{padding:0;background:none;color:var(--ink-2);text-align:center}
  .lap-h{display:none}
  .lap-row{display:flex;gap:8px;justify-content:center;align-items:center;margin:0}
  .lap-row::before{content:"Not ready yet?";font-size:14px;color:var(--ink-3);white-space:nowrap}
  .lap-in{height:36px;padding:0 12px;border-radius:9px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:400 14px var(--sans);width:210px}
  .lap-go{height:36px;padding:0 12px;border-radius:9px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:600 13.5px var(--sans);display:flex;gap:6px;align-items:center;cursor:pointer;white-space:nowrap}
  .lap-done{color:var(--ink)}
}

/* Reviews: quote cards with a big opening mark; sample cards say so. */
.rv{position:relative;padding:22px 20px 18px}
.rv::before{content:"\201C";position:absolute;top:2px;left:14px;font:400 56px/1 var(--display);color:color-mix(in srgb,var(--accent) 35%,transparent)}
.rv-q{position:relative;margin-top:14px}
.rv-sample{outline:1.5px dashed color-mix(in srgb,var(--accent) 40%,transparent);outline-offset:-1.5px}

/* The final section under the sky again: the hero's scene behind it, the words over it. */
.final-sky{position:relative;isolation:isolate;overflow:hidden;background:none;border-top:0;padding:150px 0 170px}
.final-scene{position:absolute;inset:0;z-index:-1}
.final-scene .hero-scene{top:0;bottom:0;-webkit-mask-image:none;mask-image:none}
.final-sky h2{font-size:56px}
@media (max-width:640px){.final-sky{padding:96px 0 120px}.final-sky h2{font-size:38px}}

/* Founder: a face and one line, beside the price. */
.fd{display:flex;gap:16px;align-items:flex-start;max-width:640px;margin:28px auto 0;padding:18px 20px;border-radius:16px;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.fd-ph{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover}
.fd-in{display:grid;place-items:center;font:600 18px/1 var(--sans);color:#fff;background:linear-gradient(150deg,var(--accent),var(--accent-ink))}
.fd-q{font-size:15px;line-height:1.55;color:var(--ink)}
.fd-n{margin-top:6px;display:flex;gap:8px;font-size:13px;color:var(--ink-3)}
.fd-n b{color:var(--ink);font-weight:600}
@media (max-width:640px){
  .cov-card h3{display:grid;grid-template-columns:auto 1fr auto;align-items:center}
  .cov-card h3 .cov-ic{width:24px;height:24px}
  .cov-card h3 .n{justify-self:end}
  .cov-card .cap{align-items:flex-start;min-height:0}
  .cov-card .cap-l{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .cov-card .cap-m{flex:none;width:18px;height:18px;margin-top:1px}
  .cov-card .cap-lock{position:static;display:flex;justify-content:flex-start;margin:4px 0 2px;padding:0}
  .cov-card .cap-lock .lock-t{position:static;font-size:11px;color:var(--ink-3)}
}

/* The email capsule on a computer (2026-10-27: "the most basic html components"): one frosted pill — an icon, the
   address with no box of its own, and a dark key inside it — with a short line beside it. */
.lap-ic{display:none}
@media (hover:hover) and (pointer:fine){
  .lap{max-width:none;margin:18px auto 0;display:flex;justify-content:center}
  .lap-row{position:relative;display:flex;align-items:center;gap:0;padding:5px 5px 5px 14px;border-radius:999px;
    background:color-mix(in srgb,var(--surface) 72%,transparent);backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3);
    box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 9%,transparent),0 8px 24px -12px rgb(20 26 58/.25),inset 0 1px 0 rgb(255 255 255/.6);transition:box-shadow .2s}
  .lap-row:focus-within{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent),0 10px 28px -12px color-mix(in srgb,var(--accent) 45%,transparent)}
  .lap-row::before{content:"Not ready yet?";position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%);font-size:14px;color:var(--ink-3);white-space:nowrap}
  .lap-ic{display:grid;place-items:center;color:var(--ink-3);margin-right:8px}
  .lap-in{width:220px;height:36px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;font:400 14.5px var(--sans);color:var(--ink)}
  .lap-in::placeholder{color:var(--ink-3)}
  .lap-go{height:36px;padding:0 16px;border:0;border-radius:999px;background:var(--ink);color:var(--bg);font:600 13.5px var(--sans);display:flex;gap:6px;align-items:center;cursor:pointer;white-space:nowrap;transition:transform .15s,background .15s}
  .lap-go:hover{transform:translateX(1px);background:color-mix(in srgb,var(--ink) 85%,var(--accent))}
  .lap-go svg{transition:transform .15s}
  .lap-go:hover svg{transform:translateX(2px)}
  .lap-done{text-align:center;margin-top:10px}
}
.lap-go-w{display:none}
@media (hover:hover) and (pointer:fine){.lap-go-s{display:none}.lap-go-w{display:inline}}

/* ── 2026-10-27 plan: one decision per screen in the hero; sections that differ ──────────────────────────────── */
/* The hero's email box is for phones; on a computer it sits in the final section ("Not ready yet?"). */
@media (hover:hover) and (pointer:fine){ .lap-hero{display:none} }
@media (hover:none) and (pointer:coarse){ .lap-final{display:none} }
.final-mail .lap{margin-top:22px}
.final-mail .lap-row::before{color:var(--ink-2)}

/* Distinct surfaces, light and dark alternating. */
.band-checklist{background:linear-gradient(180deg,color-mix(in srgb,var(--accent-wash) 85%,var(--bg)),color-mix(in srgb,var(--accent-wash) 45%,var(--bg)))}
.sec.need{background-color:var(--bg);background-image:radial-gradient(color-mix(in srgb,var(--ink) 9%,transparent) 1px,transparent 1.2px);background-size:22px 22px}
.sec.stacks{background:radial-gradient(80% 60% at 50% 0%,color-mix(in srgb,var(--accent) 22%,var(--code-bg)),var(--code-bg) 70%);color:var(--code-ink);border-top:0}
.sec.stacks .sec-head h2{color:#fff}
.sec.stacks .sub,.sec.stacks .tiles-legend,.sec.stacks .tiles-legend+p{color:color-mix(in srgb,var(--code-ink) 70%,transparent)}
.sec.stacks .tiles-legend+p a{color:#fff}
.sec.stacks .eyebrow{color:#fff;background:rgb(255 255 255/.08);box-shadow:inset 0 0 0 1px rgb(255 255 255/.14)}
.sec.stacks .tile{background:rgb(255 255 255/.06);border-color:rgb(255 255 255/.1);color:var(--c,#e6e7ea)}
.sec.stacks .tile span,.sec.stacks .tile b{color:#e6e7ea}
.sec.stacks .stack-search,.sec.stacks input[type=search],.sec.stacks #stack-q{background:rgb(255 255 255/.06);border-color:rgb(255 255 255/.14);color:#fff}
.sec.pricing{background:radial-gradient(60% 50% at 50% 35%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),linear-gradient(180deg,var(--band-cream-a),var(--band-cream-b))}
:root[data-theme="dark"] .sec.pricing{background:radial-gradient(60% 50% at 50% 35%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%),var(--bg-sub)}
.sec.faq{background:var(--bg);border-top:0}
.band-reviews{background:var(--surface)}
/* Phone hero: the key, one line, the email strip, one facts line — the demo starts right below, so no second key. */
@media (hover:none) and (pointer:coarse){ .hero .cta-row [data-see]{display:none} .hero .lap-hero{margin-top:12px} }
/* Price: the card, and beside it the founder and the builders card in one column (owner, 2026-10-27). */
.price-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.price-side .fd{margin:0;max-width:none}
/* Stack search on the dark band. */
.sec.stacks #stack-q{background:rgb(255 255 255/.07);border:1px solid rgb(255 255 255/.16);color:#fff;box-shadow:none}
.sec.stacks #stack-q::placeholder{color:rgb(255 255 255/.55)}
.sec.stacks #stack-q:focus{border-color:color-mix(in srgb,var(--accent) 60%,#fff);outline:none}
.sec.stacks .finder svg,.sec.stacks .search svg{color:rgb(255 255 255/.6)}
/* Privacy, centred. */
.sec.secure .sec-head{text-align:center;margin-left:auto;margin-right:auto}
/* "Runs in Claude Code on your computer, not in a cloud session" is the phone's line; the ladder stays in the button's tip there. */
.hero .kf [data-runs-on]{display:none}
@media (hover:none) and (pointer:coarse){ .hero .kf [data-runs-on]{display:inline-flex} .hero .kf [data-ladder-fact]{display:none} }
.sec.stacks .finder .field{background:rgb(255 255 255/.07);border-color:rgb(255 255 255/.16);box-shadow:none;color:rgb(255 255 255/.6)}
.sec.stacks .finder .field:focus-within{border-color:color-mix(in srgb,var(--accent) 60%,#fff);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.sec.stacks .finder .field input{background:transparent;color:#fff}
.sec.stacks .answer{background:rgb(255 255 255/.06);color:var(--code-ink);border-color:rgb(255 255 255/.12)}
/* On the dark band every logo sits on a small light chip, so dark marks (Next.js, Express, Rust…) stay visible. */
.sec.stacks .finder .field input,.sec.stacks #stack-q{background:transparent!important;border:0!important;box-shadow:none!important}

/* ── Shorter phone page (2026-10-27): the same content, less scrolling ───────────────────────────────────────── */
@media (max-width:640px){
  /* Checklist: one item per card on a phone; the lock line says the rest. */
  .cov-card ul li:nth-child(n+2){display:none}
  /* FAQ: all questions, tighter rows. */
  .faq details summary{padding:12px 0;font-size:15px}
  .faq .head-split{gap:16px}
  .faq .sec-head .sub{font-size:14px}
  /* Price: tighter card; the builders card's fine print folds away. */
  .price-card .pc-body{padding:18px 18px 16px}
  .price-card .pc-list li{padding:5px 0;font-size:14px}
  .price-card .pc-sub{font-size:13.5px}
  .subs-note,.subs-rest{display:none}
  .fd{padding:14px}
  .fd-q{font-size:14px}
}
/* "+N more" counts what the card does not show: on a phone it shows one item, so the number is one item larger. */
.lk-m{display:none}
@media (max-width:640px){.lk-d{display:none}.lk-m{display:inline}}

/* Builders' own logos. */

/* Dark mode keeps the rhythm (2026-10-27): each band its own tone, a hairline between them, glows instead of tints. */
:root[data-theme="dark"] main>section+section{box-shadow:inset 0 1px 0 rgb(255 255 255/.06)}
:root[data-theme="dark"] .band-reviews{background:var(--bg-sub)}
:root[data-theme="dark"] .band-checklist{background:radial-gradient(80% 60% at 50% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),var(--bg)}
:root[data-theme="dark"] .sec.need{background-color:var(--bg-sub);background-image:radial-gradient(rgb(255 255 255/.07) 1px,transparent 1.2px)}
:root[data-theme="dark"] .sec.stacks{background:radial-gradient(70% 60% at 50% 0%,color-mix(in srgb,var(--accent) 30%,var(--band-night)),var(--band-night) 75%)}
:root[data-theme="dark"] .sec.pricing{background:radial-gradient(60% 50% at 50% 30%,color-mix(in srgb,var(--sc-flame) 14%,transparent),transparent 70%),var(--bg)}
:root[data-theme="dark"] .sec.secure{background:linear-gradient(170deg,color-mix(in srgb,var(--accent) 34%,var(--band-navy)),var(--band-navy))}
:root[data-theme="dark"] .sec.faq{background:var(--bg-sub)}
:root[data-theme="dark"] .eyebrow{color:color-mix(in srgb,var(--accent) 55%,#fff);background:color-mix(in srgb,var(--accent) 16%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}

/* ── Your data is secure, expanded (2026-10-27: "looks terrible … especially expanded") ─────────────────────── */
/* The details open on the navy itself: no white card, no second "Your data is secure" heading, no laptop drawing,
   no repeat of "asks before" (fact four says it). What's left: the three things it sends as one quiet list, the
   things it never reports, and how to undo. */
.sec-more[open]{background:none!important;color:var(--code-ink)!important;padding:0!important;border-radius:0}
.sec-more>summary{list-style:none;display:inline-flex;align-items:center;gap:8px;margin:0 auto;padding:8px 16px;border-radius:999px;box-shadow:inset 0 0 0 1px rgb(255 255 255/.16);font:600 14px var(--sans);color:#fff!important;cursor:pointer}
.sec-more>summary::-webkit-details-marker{display:none}
.sec-more>summary::after{content:"+";font:400 18px/1 var(--sans);opacity:.7}
.sec-more[open]>summary::after{content:"–"}
.sec-more{text-align:center}
.sec-more>.tm,.sec-more>.tm-asks{text-align:left;max-width:760px;margin:22px auto 0}
.sec-more .tm{display:block;padding:0;background:none;box-shadow:none;border:0}
.sec-more .tm-head,.sec-more .tm-laptop,.sec-more .tm-machine>h3,.sec-more .tm-machine>p:not(.tm-stays-h),.sec-more .tm-wire,.sec-more .tm-asks>h3,.sec-more .ta-acts{display:none!important}
.sec-more .tm-machine{order:2;padding:0;border:0;background:none;box-shadow:none;margin-top:18px}
.sec-more .tm-out{padding:0;border:0;background:none}
.sec-more .tm-outl{list-style:none;margin:0;padding:0;border-top:1px solid rgb(255 255 255/.1)}
.sec-more .tm-outl>li{padding:16px 0;border-bottom:1px solid rgb(255 255 255/.1);background:none}
.sec-more .tm-name{display:flex;align-items:center;gap:10px;margin:0;color:#fff;font-size:15px}
.sec-more .tm-name b{color:#fff;font-weight:600}
.sec-more .tm-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:rgb(255 255 255/.07);color:color-mix(in srgb,var(--accent) 45%,#fff)}
.sec-more .tm-chip{margin-left:auto;padding:3px 9px;border-radius:999px;font-size:12px;color:rgb(255 255 255/.8);background:rgb(255 255 255/.07);box-shadow:inset 0 0 0 1px rgb(255 255 255/.12)}
.sec-more .tm-say,.sec-more .tm-full,.sec-more .tm-off,.sec-more .tm-note p,.sec-more .tm-fine{margin:6px 0 0 38px;font-size:14px;line-height:1.55;color:rgb(255 255 255/.68)}
.sec-more .tm-more>summary,.sec-more .tm-note>summary{margin:8px 0 0 38px;font-size:13px;color:color-mix(in srgb,var(--accent) 45%,#fff);cursor:pointer}
.sec-more code{font-size:12.5px;padding:1px 6px;border-radius:5px;background:rgb(255 255 255/.08);color:#fff;border:0}
.sec-more .tm-fine{margin:14px 0 0;font-size:13px;color:rgb(255 255 255/.55)}
.sec-more .tm-fine a,.sec-more a{color:#fff}
.sec-more .tm-stays-h{margin:0 0 8px;font-size:13px;font-weight:600;color:rgb(255 255 255/.8)}
.sec-more .tm-stays{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.sec-more .tm-stays li{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:13px;color:#fff;background:rgb(255 255 255/.07);box-shadow:inset 0 0 0 1px rgb(255 255 255/.12)}
.sec-more .tm-asks{padding:16px 0 0;border:0;border-top:1px solid rgb(255 255 255/.1);background:none;box-shadow:none;border-radius:0}
.sec-more .ta-undo{display:flex;gap:10px;margin:0;font-size:14px;line-height:1.55;color:rgb(255 255 255/.68)}
.sec-more .ta-undo svg{flex:none;margin-top:2px;color:color-mix(in srgb,var(--accent) 45%,#fff)}
.sec-more .ts-fields{color:rgb(255 255 255/.68);margin-left:38px}
@media (max-width:640px){.sec-more .tm-chip{margin-left:0}.sec-more .tm-name{flex-wrap:wrap}.sec-more .tm-say,.sec-more .tm-full,.sec-more .tm-off,.sec-more .tm-note p,.sec-more .tm-more>summary,.sec-more .tm-note>summary{margin-left:0}}
.sec-more .tm{display:flex;flex-direction:column}
.sec-more .tm-out{order:1}
.sec-more .tm-machine{order:2;margin-top:22px}
.sec-more .tm-fine{padding-bottom:0;border:0}
.sec-more .tm-out::after,.sec-more .tm::after{display:none}
.sec-more .tm-asks{margin-top:22px}
.sec-more .tm-outl>li::before,.sec-more .tm-outl>li::after{display:none}
.sec-more .tm-off{margin-left:38px;display:flex;gap:8px}
.sec-more .tm-off svg{flex:none;margin-top:3px}

/* ── Costs (#need), one surface (2026-10-27, owner: "where do you even read or start"; "titles first, always") ───────
   page.mjs `needPanel`: one card read top to bottom: the summary sentence (the fee named before its figure), every
   account in one aligned list (logo · name and one short line · cost), the optional ones under a quiet divider in the
   same list, then the timeline. Each part's small title sits right above it. No card inside the card; the billed-by-use
   card under it is a sibling. One column at a reading width, on every screen. */
.need .need-pick{margin-bottom:24px}
.need .need-panel[data-path],.need .usage{max-width:860px;margin-left:auto;margin-right:auto}
.need-panel[data-path]{border-radius:20px}
.need-panel[data-path] .cp-l{display:block;margin:0;background:none;border:0}
.need-panel[data-path] .cp-r{display:block;padding:28px 36px;border:0;border-top:1px solid var(--line)}
.need-panel[data-path] .cp-r:first-child{border-top:0;padding-top:32px}
.need-panel[data-path] .sum-k{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:0;font:600 12px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.need-panel[data-path] .sum-k svg{color:var(--ink-3)}
.need-panel[data-path] [data-sum-row="fees"] .sum-k{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.need-panel[data-path] .sum-d{margin:0;min-width:0}
/* The summary: what it is, then its figure, then who charges it. */
.need-panel[data-path] .cp-sum{display:block;margin:0;font:400 30px/1.25 var(--display);letter-spacing:-.005em;color:var(--ink)}
.need-panel[data-path] .cp-sum b{font-weight:400}
.need-panel[data-path] .cp-sum .sum-fig,.need-panel[data-path] .cp-sum .sum-fig b{font:inherit;color:inherit;white-space:nowrap}
.need-panel[data-path] .cp-sum .sum-fig.is-free b{color:transparent}
.need-panel[data-path] .cp-note{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.need-panel[data-path] .cp-note .sum-n{margin:0;font-size:inherit;color:inherit}
/* Accounts: one list, every row the same three parts. */
.need-panel[data-path] .rqs{list-style:none;margin:0;padding:0;display:block}
.need-panel[data-path] .rq{display:grid;grid-template-columns:32px minmax(0,1fr) auto;column-gap:14px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.need-panel[data-path] .rqs>.rq:first-child{padding-top:0;border-top:0}
.need-panel[data-path] .rq-logo{width:32px;height:32px;border-radius:9px}
.need-panel[data-path] .rq-logo svg{width:18px;height:18px}
.need-panel[data-path] .rq-main{min-width:0;margin:0}
.need-panel[data-path] .rq-name{display:block;font-size:15px;font-weight:600;line-height:1.35;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.need-panel[data-path] .rq-for{display:block;margin-top:1px;font-size:13.5px;line-height:1.4;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.need-panel[data-path] .rq-cost{grid-column:auto;align-self:center;max-width:320px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.need-panel[data-path] .rq-fig{font:600 15px/1.3 var(--sans);letter-spacing:0}
.need-panel[data-path] .rq-cad,.need-panel[data-path] .rq-note{display:inline;font-size:13.5px;color:var(--ink-2)}
.need-panel[data-path] .rq-tag,.need-panel[data-path] .rq-laters{display:none}
.need-panel[data-path] .cp-div{display:flex;align-items:center;gap:12px;padding:22px 0 10px;font:600 12px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.need-panel[data-path] .cp-div::after{content:"";flex:1;border-top:1px dashed var(--line-strong)}
.need-panel[data-path] .cp-div+.rq{border-top:0;padding-top:4px}
.cp-sub{margin:0;font:600 12px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
/* Timeline: the way to the store as three numbered steps, then the waits before a first release. */
.need-panel[data-path] .sum-path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 20px;counter-reset:sp}
.need-panel[data-path] .sum-path li{position:relative;display:flex;flex-direction:column;gap:2px;padding:40px 0 0;border:0;border-radius:0;background:none;counter-increment:sp}
.need-panel[data-path] .sum-path li::before,.need-panel[data-path] .sum-path li+li::before{content:counter(sp);position:absolute;left:0;top:0;width:26px;height:26px;border:0;border-radius:50%;display:grid;place-items:center;font:600 12.5px/1 var(--sans);background:var(--surface);color:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.need-panel[data-path] .sum-path li:not(:last-child)::after{content:"";position:absolute;left:36px;right:-10px;top:12.5px;bottom:auto;border:0;border-top:1.5px solid var(--line-strong);transform-origin:0 50%;transition:transform .6s var(--ease-out) calc(var(--d,0) * .5s + .2s)}
.need-panel[data-path] .sum-path li:nth-child(2){--d:1}
.need-panel[data-path] .sum-path [data-who="launchpad"]::before{background:var(--accent);color:var(--on-accent,#fff);box-shadow:none}
.need-panel[data-path] .sum-path [data-you]::before{background:var(--accent-wash);color:var(--accent-ink);box-shadow:inset 0 0 0 1.5px var(--accent)}
.need-panel[data-path] .sum-path [data-who="launchpad"]::after{border-top-color:var(--accent)}
.need-panel[data-path] .sum-path.pre li::after{transform:scaleX(0)}
.need-panel[data-path] .sum-path b{font-size:15px;font-weight:600;line-height:1.35;color:var(--ink)}
.need-panel[data-path] .sum-path [data-who="launchpad"] b{color:var(--ink)}
.need-panel[data-path] .sp-wait{display:block;margin:0;font-size:13.5px;font-weight:400;color:var(--ink-3)}
.need-panel[data-path] .cp-gates{margin:0}
.need-panel[data-path] .sum-path+.cp-gates{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.need-panel[data-path] .cp-gates ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.need-panel[data-path] .cp-gates li{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;font-size:14.5px;line-height:1.45;color:var(--ink)}
.need-panel[data-path] .cp-gates li b{font-weight:600}
.need-panel[data-path] .cp-gates li span{font-size:13.5px;color:var(--ink-3)}
.need-panel[data-path] .cp-gates li .cp-days{font-size:13px;font-weight:600;color:var(--warn-ink,var(--ink-2))}
.need-panel[data-path] .cp-now{display:flex;align-items:center;gap:10px;margin:0;font-size:15.5px;font-weight:600;color:var(--ink)}
.need-panel[data-path] .cp-ok{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ok-wash);color:var(--ok)}
@media (prefers-reduced-motion:reduce){.need-panel[data-path] .sum-path li::after{transition:none}}
/* Billed by use: a quiet sibling card, one line of names. */
.need .usage{margin-top:16px;padding:22px 36px 24px;border-radius:20px}
.need .usage>summary{display:flex;align-items:center;gap:8px;padding:0;list-style:none;cursor:default;font:600 12px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.need .usage>summary::-webkit-details-marker{display:none}
.need .usage .usage-n-ct{display:none}
.need .usage-l{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px 22px;margin:0;padding:14px 0 0}
.need .usage-l li{display:inline-flex;align-items:center;gap:8px;height:auto;padding:0;border:0;border-radius:0;background:none}
.need .usage-l .rq-logo{width:20px;height:20px;border:0;background:none}
.need .usage-l .rq-logo svg{width:16px;height:16px}
.need .usage-l b{font-size:14px;font-weight:500;color:var(--ink)}
.need .usage-n{margin:0;padding:12px 0 0;font-size:13.5px;color:var(--ink-3)}
.need .need-foot{margin-top:20px}

@media (max-width:640px){
  .need .need-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:4px}
  .need .need-pick .np{justify-content:center;padding:0 4px;font-size:13.5px;white-space:nowrap}
  .need-panel[data-path]{border-radius:16px}
  .need-panel[data-path] .cp-r{padding:20px 18px}
  .need-panel[data-path] .cp-r:first-child{padding-top:22px}
  .need-panel[data-path] .sum-k{margin-bottom:10px}
  .need-panel[data-path] .cp-sum{font-size:24px;line-height:1.25}
  .need-panel[data-path] .cp-note{font-size:14px;margin-top:8px}
  .need-panel[data-path] .rq{grid-template-columns:28px minmax(0,1fr) auto;column-gap:12px;padding:10px 0}
  .need-panel[data-path] .rq-logo{width:28px;height:28px;border-radius:8px}
  .need-panel[data-path] .rq-logo svg{width:16px;height:16px}
  .need-panel[data-path] .rq-name{font-size:14.5px}
  .need-panel[data-path] .rq-for{font-size:12.5px;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .need-panel[data-path] .rq-cost{max-width:128px;white-space:normal;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .need-panel[data-path] .rq-fig{font-size:14px}
  .need-panel[data-path] .rq-cad,.need-panel[data-path] .rq-note{font-size:12.5px}
  .need-panel[data-path] .cp-div{padding:16px 0 8px;font-size:11px}
  .need-panel[data-path] .sum-path{grid-template-columns:minmax(0,1fr);gap:0}
  .need-panel[data-path] .sum-path li{padding:2px 0 18px 40px}
  .need-panel[data-path] .sum-path li:last-child{padding-bottom:0}
  .need-panel[data-path] .sum-path li:not(:last-child)::after{left:12.5px;right:auto;top:32px;bottom:4px;border-top:0;border-left:1.5px solid var(--line-strong);transform-origin:50% 0}
  .need-panel[data-path] .sum-path [data-who="launchpad"]::after{border-left-color:var(--accent)}
  .need-panel[data-path] .sum-path.pre li::after{transform:scaleY(0)}
  .need-panel[data-path] .sum-path b{font-size:14.5px}
  .need-panel[data-path] .sp-wait{font-size:13px}
  .need-panel[data-path] .cp-gates li{font-size:14px}
  .need .usage{padding:16px 18px;border-radius:16px}
  .need .usage>summary{cursor:pointer;justify-content:space-between}
  .need .usage>summary::after{content:"+";font:400 20px/1 var(--sans);color:var(--ink-3)}
  .need .usage[open]>summary::after{content:"\2013"}
  .need .usage .usage-n-ct{display:inline-grid;place-items:center;min-width:22px;height:20px;margin:0 auto 0 0;padding:0 6px;border-radius:999px;background:var(--bg-sub);font-size:11.5px;letter-spacing:0;color:var(--ink-3)}
  .need .usage-l{gap:10px 16px}
  .need .usage-l b{font-size:13.5px}
  .need .need-foot{font-size:12.5px;margin-top:14px;text-align:left;justify-content:flex-start}
  /* The free plans on a phone: the app, then its six platforms two by two, each lighting "Free plan". */
  .need-hub{margin:0 0 32px}
  .fh{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .fh-app{display:flex;flex-direction:row;grid-column:1/-1;justify-self:center;width:auto;gap:12px;padding:10px 16px;margin-bottom:4px;border-radius:14px}
  .fh-app .fh-win{display:none}
  .fh-app b{font-size:20px}
  .fh-col{display:contents}
  .fh-n{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;padding:10px;border-radius:12px;text-align:left}
  .fh-m{width:28px;height:28px;border-radius:8px;grid-row:1/3}
  .fh-m svg{width:16px;height:16px}
  .fh-t b{font-size:13.5px}
  .fh-t small{display:none}
  .fh-chip{justify-self:start;font-size:11px;padding:2px 7px}
  .fh-n::before,.fh-n::after{display:none}
}

/* The three steps under the demo, centred: each column's icon, title and line centred, the row centred under the
   window (2026-10-27). */
.demo-steps{justify-items:center;text-align:center}
.demo-steps li{align-items:center;max-width:260px}
.demo-steps .ds-i{display:grid;place-items:center;width:40px;height:40px;margin-bottom:4px;border-radius:12px;background:var(--surface);box-shadow:0 0 0 1px var(--line)}

/* ── Owner-side rules (kept after the costs block) ───────────────────────────────────────────────────────────── */
/* Stack logos on the dark band (2026-10-27: white chips "look terrible"): each mark in its own colour on the glass
   tile, and the near-black ones (Next.js, Express, Rust…) drawn in light ink, as dark mode already does. */
.sec.stacks .tile.tone-dark{color:#F2F2F0}
.sec.stacks .tile{background:rgb(255 255 255/.045);border-color:rgb(255 255 255/.09)}
.sec.stacks .tile:hover{background:rgb(255 255 255/.08)}
.sec.stacks .tile.status-recognised{opacity:.6}

/* Your data is secure (2026-10-27: "put the macbook frame … wiring up to the four cards"): the laptop launchpad runs on,
   and a wire from it to each fact, drawn in turn when the section comes into view ([data-reveal], app.js). */
.sec-stage{position:relative;max-width:960px;margin:0 auto}
.sec-laptop{width:260px;margin:0 auto;filter:drop-shadow(0 18px 30px rgb(0 0 0/.35))}
.sec-laptop svg{display:block;width:100%;height:auto}
.sec-wires{display:block;width:100%;height:70px;margin:-4px 0 6px;overflow:visible}
.sec-wires path{fill:none;stroke:color-mix(in srgb,var(--accent) 55%,#fff);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:0;opacity:.7;vector-effect:non-scaling-stroke;transition:stroke-dashoffset 1s cubic-bezier(.2,.7,.2,1) calc(var(--i) * .18s + .2s)}
.sec-stage.pre .sec-wires path{stroke-dashoffset:1}
.sec-stage .sec-facts li{transition:opacity .5s ease calc(var(--i) * .18s + .7s),transform .5s ease calc(var(--i) * .18s + .7s),box-shadow .6s ease calc(var(--i) * .18s + 1s)}
.sec-stage.pre .sec-facts li{opacity:0;transform:translateY(8px)}
.sec-stage:not(.pre) .sec-facts li{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,rgb(255 255 255/.08)),0 0 24px -10px color-mix(in srgb,var(--accent) 70%,transparent)}
@media (prefers-reduced-motion:reduce){.sec-wires path,.sec-stage .sec-facts li{transition:none}}
@media (max-width:640px){.sec-laptop{width:190px}.sec-wires{height:44px}}

/* The three steps under the demo, centred: each column's icon, title and line centred, the row centred under the
   window (2026-10-27). */
.demo-steps{justify-items:center;text-align:center}
.demo-steps li{align-items:center;max-width:260px}
.demo-steps .ds-i{display:grid;place-items:center;width:40px;height:40px;margin-bottom:4px;border-radius:12px;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
/* The navy is painted at a fixed height from the top over a solid base, so opening "See exactly what launchpad sends"
   makes the section longer without stretching (and shifting) its colour. */
.sec.secure{background:linear-gradient(170deg,color-mix(in srgb,var(--accent) 26%,var(--code-bg)),color-mix(in srgb,var(--accent) 8%,var(--code-bg))) top/100% 760px no-repeat,color-mix(in srgb,var(--accent) 8%,var(--code-bg))}
:root[data-theme="dark"] .sec.secure{background:linear-gradient(170deg,color-mix(in srgb,var(--accent) 34%,var(--band-navy)),var(--band-navy)) top/100% 760px no-repeat,var(--band-navy)}
.sec.secure{background:radial-gradient(90% 520px at 30% 0%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 100%) top/100% 900px no-repeat,color-mix(in srgb,var(--accent) 8%,var(--code-bg))}
:root[data-theme="dark"] .sec.secure{background:radial-gradient(90% 520px at 30% 0%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 100%) top/100% 900px no-repeat,var(--band-navy)}

/* Reviews (2026-10-27: "a horizontal scrolling section with each side fading, not edge-to-edge"): inside the page's
   width, a row that drifts sideways on its own and fades out at both ends. The row is a real scroller that app.js
   (`reviewRail`) moves a little each frame, so a finger swipes it natively and it never leaves its box; a CSS
   transform marquee under a mask blanked out, ran outside the rail and stuck paused on iPhones (2026-10-29). The fades
   are two overlays in the band's colour, not a mask, for the same reason. */
.band-reviews{--rv-fade:var(--surface)}
:root[data-theme="dark"] .band-reviews{--rv-fade:var(--bg-sub)}
.rv-rail{position:relative;max-width:1080px;margin:0 auto}
.rv-rail::before,.rv-rail::after{content:"";position:absolute;z-index:1;top:0;bottom:0;width:9%;pointer-events:none}
.rv-rail::before{left:0;background:linear-gradient(90deg,var(--rv-fade),transparent)}
.rv-rail::after{right:0;background:linear-gradient(270deg,var(--rv-fade),transparent)}
.rv-rail .rv-row{display:flex;gap:16px;padding:8px 0 12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:none;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rv-rail .rv-row::-webkit-scrollbar{display:none}
.rv-rail .rv{flex:0 0 320px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:22px 22px 18px;border-radius:16px;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 10px 26px -18px rgb(20 26 58/.35)}
.rv-rail .rv-q{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--ink)}
.rv-who{display:flex;align-items:center;gap:12px}
.rv-who p{margin:0;display:flex;flex-direction:column;font-size:13px;color:var(--ink-3)}
.rv-who b{color:var(--ink);font-weight:600;font-size:14px}
.rv-ph{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover}
.rv-in{display:grid;place-items:center;font:600 14px/1 var(--sans);color:#fff;background:linear-gradient(150deg,var(--accent),var(--accent-ink))}
@media (max-width:640px){.rv-rail .rv{flex-basis:270px;padding:18px}.rv-rail::before,.rv-rail::after{width:6%}}
.rv-rail .rv-who{flex-direction:row!important;align-items:center;justify-content:flex-start;text-align:left;gap:12px}
.rv-rail .rv-who p{align-items:flex-start}

/* Five stars on each review (all are five, owner 2026-10-27). */
.rv-stars{display:flex;gap:2px;margin:0;color:color-mix(in srgb,var(--sc-flame) 88%,var(--ember-deep))}  /* the hero illustration's amber (run.css --warm-2), owner 2026-10-27 */
.rv-rail .rv-q{margin-top:0;flex:1}  /* the quote starts under the stars on every card; the name sits at the bottom */
.rv-rail .rv::before{display:none}

/* How to install: one card holding the tabs, as wide as the demo window. */
.sec.install{background:var(--bg)}
.inst-box{max-width:760px;margin:0 auto;padding:22px;border-radius:18px;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 14px 34px -22px rgb(20 26 58/.35)}
.inst-box .inst-tabs{display:flex;width:max-content;margin:0 auto 16px}
/* A 320px phone: the two tabs share the box's width instead of pushing the page sideways. */
@media (max-width:360px){.inst-box .inst-tabs{width:auto;max-width:100%}.inst-box .inst-tab{flex:1 1 0;min-width:0;padding:0 6px;font-size:12px;letter-spacing:-.01em;white-space:nowrap}}
.inst-box h3{display:none}
.inst-box .inst-panel>p{font-size:14px;color:var(--ink-2);margin-top:12px}
@media (max-width:640px){.inst-box{padding:14px}}
.sec.install .demo-more a{color:var(--accent-ink)}
/* In the home page's install card the desktop tab ends on its steps; the closing line repeats them (/start/ keeps it). */
.inst-box #inst-desk>p{display:none}

/* The hero on a wide phone or a narrow window (owner, 2026-10-27: "the main hero buttons and text are too wide"): the
   stacked keys stop at the phone box's 420px and the lede at a reading width, centred, instead of running gutter to gutter. */
@media (max-width:760px){
  .hero .cta-row{align-self:center;max-width:460px}
  .hero .lede{max-width:30rem;margin-inline:auto}
}

/* Reviews wider and shorter (owner, 2026-10-27): a wider card wraps each quote into fewer lines; tighter spacing. */
.rv-rail .rv{flex-basis:440px;gap:12px;padding:18px 22px 16px}
.rv-rail .rv-q{font-size:15px;line-height:1.5}
@media (max-width:640px){.rv-rail .rv{flex-basis:min(330px,86vw);padding:16px 18px 14px}.rv-rail .rv-q{font-size:14.5px}}
/* The builders card on a phone: name and price on one row (an older rule put the price on a second line), and no
   "a month" label beside a heading that already says it. */
@media (max-width:640px){
  .subs-r{grid-template-columns:28px minmax(0,1fr) auto;row-gap:0}
  .subs-p{grid-column:auto;justify-content:flex-end}
  .subs-h span{display:none}
}

/* Reduced motion — LAST in the file on purpose (PLAYBOOK §7: a later rule would override it). Transitions are off
   outright, delays included: a delayed transition with a 0.01 ms duration still counts as running until its delay
   ends, which a slower machine (CI) caught on the buy key and its sheen (2026-10-02). */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  /* The platform pills stand still: one row a visitor scrolls sideways by hand (RESEARCH.md: Vercel's reduced-motion
     logo row), no copy of it, the edges still faded. */
  .pf-track{animation:none}
  .pf{overflow-x:auto;scrollbar-width:none;padding-inline:16px}
  .pf-row[aria-hidden]{display:none}
  /* The hero scene is one still frame: the trees upright, each rocket mid-climb with its flame lit and its trail. */
  .tw.is-flash,.sheet[open]{animation:none}.tw-copy,.tw-i{transition:none}.hero-scene *{animation:none!important}
  .js .motion-toggle{display:none}
  .hs-puff{opacity:.55;transform:translate(calc(var(--px) * var(--k) * 2.5px),calc(var(--k) * (4px + var(--px) * var(--px) * 6px))) scale(1.5)}
}

/* ── The hero test (page.mjs heroReview / heroDemo; owner, 2026-10-31) ──────────────────────────────────────────────
   Hero `b` only: html[data-hero="b"], set before first paint by the head's HERO_BOOT. Without it (no JavaScript, no
   storage, or arm `a`) none of this shows and the page is as it was. */
html:not([data-hero="b"]) .hb-only{display:none!important}
/* One real review as a pill, between the description and the key. */
.hr-pill{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:6px 16px 6px 6px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 6px 16px -12px rgb(16 17 20/.25);color:var(--ink-2);font-size:14px;line-height:1.4;text-decoration:none;max-width:100%}
.hr-faces{display:inline-flex;flex:none}.hr-faces img{width:28px;height:28px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--surface)}.hr-faces img+img{margin-left:-9px}
.hr-stars{display:inline-flex;gap:1px;flex:none;color:color-mix(in srgb,var(--sc-flame) 88%,var(--ember-deep))}
.hr-t{display:inline-flex;align-items:center;gap:10px;min-width:0}
.hr-q{white-space:nowrap;min-width:0}
html[data-hero="b"] .hero .cta-row.has-tip{margin-top:52px}
/* The demo under the hero's words: the demo section's title, smaller, over the video; the hills stay behind the words. */
.hero-demo{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding-top:64px}
.hd-head{text-align:center;margin-bottom:20px}.hd-head .eyebrow{margin:0 auto}
.hd-head h2{font:400 34px/1.1 var(--display);letter-spacing:-.015em;margin:10px 0 0}
.hd-vid{position:relative;width:min(1040px,100%);margin:0;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--code-bg);box-shadow:0 0 0 1px rgb(16 17 20/.08),0 30px 60px -30px rgb(16 17 20/.35)}
.hd-vid video{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}
.hd-btn{position:absolute;bottom:14px;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:0;border-radius:999px;background:rgb(12 13 18/.72);color:#fff;font:500 14px var(--sans);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 0 1px rgb(255 255 255/.12)}
.hd-snd{left:14px}.hd-again{right:14px}
.hd-vid .hd-full{top:10px;right:10px;bottom:auto;display:none}
@media (max-width:760px),(pointer:coarse) and (max-height:520px){.js .hd-vid .hd-full{display:inline-flex}}
.hd-play{position:absolute;inset:0;margin:auto;width:72px;height:72px;border:0;border-radius:50%;background:rgb(12 13 18/.72);color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 0 0 1px rgb(255 255 255/.14)}
.hd-play[hidden],.hd-btn[hidden]{display:none}
/* With the video in the hero, the demo section keeps only its steps. */
html[data-hero="b"] #watch .sec-head,html[data-hero="b"] #watch .demo-stage{display:none}
html[data-hero="b"] #watch{padding-top:40px}
/* The price section's lines. */
.pc-latest{margin-left:6px;font-size:13px;color:var(--ink-3)}
.fd-stuck{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:var(--bg-sub);font-size:14.5px;line-height:1.45;color:var(--ink-2)}.fd-stuck b{color:var(--ink)}
.fd figcaption>.fd-n:first-child{margin-top:0}.fd-n+.fd-q{margin-top:6px}
.why-claude{margin-top:16px;padding:16px 18px;border-radius:16px;background:var(--surface);box-shadow:0 0 0 1px var(--line);font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.why-claude b{display:block;color:var(--ink);font-size:15.5px;margin-bottom:4px}.why-claude a{color:var(--accent)}
@media (max-width:640px){
  .hr-pill{gap:10px;margin:20px auto 0}
  .hr-faces img{width:26px;height:26px}
  /* The stars stay on a phone: faces and stars on one centred row, the quote under them (owner, 2026-10-31). */
  .hr-pill{flex-wrap:wrap;justify-content:center;row-gap:6px;padding:10px 16px;border-radius:22px}
  .hr-t{display:contents}
  .hr-q{flex-basis:100%;text-align:center}
  .hr-q{white-space:normal;font-size:13px;line-height:1.3}
  html[data-hero="b"] .hero .cta-row.has-tip{margin-top:44px}
  .hero-demo{padding-top:40px}.hd-head{margin-bottom:14px}.hd-head h2{font-size:28px}
  .hd-vid{border-radius:14px}
  .hd-btn{bottom:10px;height:32px;padding:0 12px;font-size:13px}.hd-snd{left:10px}.hd-again{right:10px}
  .hd-play{width:60px;height:60px}
}


/* The builders card names each builder in text: its first letter in a plain tile, never the builder's logo. */
.subs-m b{display:grid;place-items:center;width:20px;height:20px;border-radius:5px;background:var(--line);color:var(--ink-2);font-size:12px;line-height:1}

/* The footer's trademark line. */
.foot-tm{flex-basis:100%;margin:0;font-size:12px;line-height:1.5;color:var(--ink-3)}

/* The free first build: its phone line shows only on a touch screen (the computer has "Start free"). */
.free-later{display:none}
.free-phone{display:none}
@media (hover:none) and (pointer:coarse){ .free-later{display:block} .free-assure{display:none} .free-copy{display:none} .free-phone{display:flex} }
/* Free first build, option B: the free card beside the $49 card; the founder and the two side cards move under them. */
.free-assure{margin-top:14px;color:var(--ink-2)}
.pc-lead{margin-top:14px;font-weight:600;color:var(--ink-2);font-size:15px}
.pc-free li{align-items:flex-start}
.price-side-wide{display:grid;grid-template-columns:repeat(2,minmax(0,440px));gap:20px 28px;justify-content:center;margin-top:28px;align-items:start}
.price-side-wide .fd,.price-side-wide .why-claude{grid-column:1}
.price-side-wide .subs{grid-column:2;grid-row:1 / span 2}
@media (max-width:900px){ .price-side-wide{grid-template-columns:minmax(0,1fr)} .price-side-wide .fd,.price-side-wide .why-claude,.price-side-wide .subs{grid-column:auto;grid-row:auto} }

/* The install window (page.mjs installStep, owner 2026-11-11 "box 1"): a dark terminal window in both themes, the two
   ways in as tabs in its title bar, one copy key per line; the desktop app's steps as a list beside one drawing. */
.inst-box:has(.tw){max-width:820px;padding:0;background:none;box-shadow:none}
.tw{position:relative;border-radius:18px;text-align:left;color:var(--code-ink);background:linear-gradient(180deg,#1E2128,var(--code-bg));box-shadow:0 0 0 1px rgb(255 255 255/.07),inset 0 1px 0 rgb(255 255 255/.08),0 34px 70px -32px rgb(17 24 64/.6),0 12px 24px -12px rgb(0 0 0/.35)}
.tw::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 70%,#FFF),transparent 35%,transparent 70%,color-mix(in srgb,var(--accent) 45%,transparent));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.6}
.tw-bar{display:flex;align-items:center;gap:14px;min-height:48px;padding:0 12px 0 16px;border-bottom:1px solid rgb(255 255 255/.06)}
.tw-dots{display:flex;gap:7px;flex:none}.tw-dots i{width:11px;height:11px;border-radius:50%;background:rgb(255 255 255/.14)}
.tw-tabs{display:flex;gap:2px;padding:3px;border-radius:10px;background:rgb(255 255 255/.05);box-shadow:inset 0 0 0 1px rgb(255 255 255/.07)}
.tw-tab{height:30px;padding:0 12px;border:0;border-radius:7px;background:none;color:rgb(231 232 236/.62);font:500 13px/1 var(--sans);cursor:pointer;white-space:nowrap}
.tw-tab[aria-selected="true"]{background:rgb(255 255 255/.1);color:#FFF;box-shadow:inset 0 0 0 1px rgb(255 255 255/.12)}
.tw-tab:focus-visible,.tw-copy:focus-visible,.dsl-step:focus-visible,.dsl-btn:focus-visible{outline:2px solid var(--accent-dark);outline-offset:2px}
.tw-badge{margin-left:auto;flex:none;padding:6px 10px;border-radius:999px;font:500 12px/1 var(--sans);color:var(--accent-dark);background:color-mix(in srgb,var(--accent) 26%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent);white-space:nowrap}
.tw-body{padding:16px 12px 16px 18px}
.tw[data-ready] .tw-panel[hidden]{display:none}
.tw:not([data-ready]) .tw-panel+.tw-panel{margin-top:22px;padding-top:18px;border-top:1px solid rgb(255 255 255/.06)}
.tw-comment{margin:4px 0 8px;font:400 13px/1.5 var(--mono);color:rgb(231 232 236/.45)}
.tw-rows+.tw-comment{margin-top:16px}
.tw-rows{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tw-row{display:flex;align-items:center;gap:12px;min-width:0}
.tw-n{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;font:600 11.5px/1 var(--mono);color:rgb(231 232 236/.55);background:rgb(255 255 255/.06)}
.tw-code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;scrollbar-width:none;font:450 14px/1.6 var(--mono);letter-spacing:-.01em;color:var(--code-ink)}
.tw-code::-webkit-scrollbar{display:none}
.tw-code .t-cmd{color:var(--accent-dark)}.tw-code .t-ref{color:var(--code-ink)}.tw-code .t-arg{color:rgb(231 232 236/.5)}
.tw-copy{flex:none;display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:9px;border:1px solid rgb(255 255 255/.08);background:rgb(255 255 255/.03);color:rgb(231 232 236/.62);cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .1s}
@media (hover:hover){.tw-copy:hover{color:#FFF;background:rgb(255 255 255/.09);border-color:rgb(255 255 255/.16)}}
.tw-copy:active{transform:scale(.94)}
.tw-copy.is-ok{color:var(--tw-ok);border-color:color-mix(in srgb,var(--tw-ok) 35%,transparent);background:color-mix(in srgb,var(--tw-ok) 8%,transparent)}
.tw-i{grid-area:1/1;display:grid;transition:opacity .18s,transform .18s}.tw-i-ok{opacity:0;transform:scale(.6)}
.tw-copy.is-ok .tw-i-copy{opacity:0;transform:scale(.6)}.tw-copy.is-ok .tw-i-ok{opacity:1;transform:none}
.tw-status{margin:12px 2px 0;min-height:21px;text-align:center;font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.tw-status.is-done{color:var(--ok-ink);font-weight:500}
.tw-node{margin:4px 0 0;text-align:center;font-size:13px;color:var(--ink-3)}
.dsl{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:18px;align-items:start}
.dsl-steps{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.dsl-steps li{display:flex;align-items:center;gap:6px}
.dsl-step{flex:1;min-width:0;display:flex;align-items:flex-start;gap:11px;padding:9px 10px;border:0;border-radius:11px;background:none;color:inherit;text-align:left;font:inherit;cursor:pointer}
@media (hover:hover){.dsl-step:hover{background:rgb(255 255 255/.04)}}
.dsl-step.on{background:rgb(255 255 255/.07);box-shadow:inset 0 0 0 1px rgb(255 255 255/.1)}
.dsl-step.on .tw-n{color:#FFF;background:var(--accent)}
.dsl-t{display:grid;gap:3px;min-width:0}.dsl-t b{font:600 14px/1.3 var(--sans);color:#FFF}
.dsl-sub{font-size:12.5px;line-height:1.45;color:rgb(231 232 236/.62)}
.dsl-sub code{font:500 12px var(--mono);color:var(--accent-dark)}
.tw[data-ready] .dsl-step:not(.on) .dsl-sub{display:none}
.dsl-view{position:sticky;top:90px}
.dsl-art{border-radius:12px;overflow:hidden;background:var(--surface);box-shadow:0 0 0 1px rgb(255 255 255/.08)}
.dsl-art .dsv-frame{border:0;border-radius:0}.dsl-art .dsv-art{border-radius:0}
.dsl-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:10px;font:500 12.5px/1 var(--sans);color:rgb(231 232 236/.6)}
.dsl-btn{width:30px;height:30px;padding:0;border-radius:8px;border:1px solid rgb(255 255 255/.1);background:rgb(255 255 255/.04);color:var(--code-ink);font-size:18px;line-height:1;cursor:pointer}
.dsl-btn:disabled{opacity:.35;cursor:default}
.tw:not([data-ready]) .dsl-nav{display:none}
.tw.is-flash{animation:tw-flash 1.4s ease-out}
@keyframes tw-flash{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 70%,transparent),0 34px 70px -32px rgb(17 24 64/.6)}to{box-shadow:0 0 0 18px transparent,0 34px 70px -32px rgb(17 24 64/.6)}}
@media (max-width:760px){
  .dsl{grid-template-columns:1fr}.dsl-view{position:static;order:-1}
  .tw-badge,.tw-dots{display:none}.tw-bar{padding:0 8px}
  .tw-tabs{flex:1}.tw-tab{flex:1;padding:0 6px}
  .tw-body{padding:12px 8px 12px 12px}
  .tw-code{font-size:12px;white-space:normal;overflow:visible;padding-left:1.2em;text-indent:-1.2em;overflow-wrap:anywhere}
  .tw-row .tw-n{display:none}.tw-copy{width:32px;height:32px}
}
/* /start/'s first step holds the window too. */
.step-install .tw{margin-bottom:6px}

/* The free build's hero key (page.mjs, 2026-11-11): one big Start free with the mark and a down arrow, to How to
   install; on a touch screen the two-line key that opens the sheet takes its place. */
.hero .cta-row .start-free{height:62px;padding:0 30px 0 26px;gap:12px;border-radius:15px;font-size:19px;font-weight:600}
.start-free .key-g{transform:scale(1.2)}
.sf-dn{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgb(255 255 255/.18)}
.sf-dn svg{transform:rotate(90deg)}
.start-phone{display:none}
.nav-free{display:none}
@media (hover:none) and (pointer:coarse){
  .hero .cta-row .start-free{display:none}
  .hero .cta-row .start-phone{display:flex;box-sizing:border-box;width:100%;max-width:420px;height:72px;padding:0 22px;border-radius:16px;gap:14px;justify-content:center;text-align:left;white-space:normal}
  .start-phone .key-g{transform:scale(1.3)}
  .sp-t{display:flex;flex-direction:column;gap:5px;line-height:1}.sp-t b{font-size:20px;font-weight:600}.sp-t small{font-size:13px;font-weight:450;opacity:.88}
  .nav-end:has(.nav-free) .nav-free{display:inline-flex}
  .nav-end:has(.nav-free) [data-buy]{display:none}
  .free-card .free-copy{display:none}
}
/* The sheet (page.mjs freeSheet): a native dialog, docked to the foot of the screen. */
.sheet{position:fixed;inset:auto 0 0;text-align:left;width:100%;max-width:none;max-height:92dvh;margin:0;box-sizing:border-box;padding:10px max(20px,env(safe-area-inset-right,0px)) calc(22px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));border:0;border-radius:22px 22px 0 0;background:var(--surface);color:var(--ink);box-shadow:0 -20px 50px -20px rgb(0 0 0/.35);overflow:auto}
.sheet::backdrop{background:rgb(10 12 20/.45)}
.sheet[open]{animation:sheet-up .34s cubic-bezier(.2,.9,.25,1)}
@keyframes sheet-up{from{transform:translateY(100%)}}
@media (min-width:600px){.sheet{inset:auto 0 0;max-width:460px;margin:0 auto}}
.sheet-grab{width:38px;height:5px;margin:0 auto 14px;border-radius:9px;background:var(--line-strong)}
.sheet-x{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--bg-sub);color:var(--ink-2);cursor:pointer}
.sheet-ic{display:grid;place-items:center;width:44px;height:44px;margin-bottom:14px;border-radius:12px;color:var(--accent);background:color-mix(in srgb,var(--accent) 11%,transparent)}
.sheet h2{margin:0 44px 6px 0;font:600 20px/1.25 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.sheet-p{margin:0 0 18px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.sheet-form{display:grid;gap:10px}
.sheet-field{display:flex;align-items:center;gap:10px;height:52px;padding:0 14px;border-radius:12px;background:var(--bg-sub);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-3)}
.sheet-field:focus-within{box-shadow:inset 0 0 0 2px var(--accent)}
.sheet-field input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;font:400 16px var(--sans);color:var(--ink)}
.sheet-send{height:52px;border:0;border-radius:12px;background:var(--accent);color:var(--on-accent);font:600 16px var(--sans);cursor:pointer}
.sheet-send:disabled{opacity:.7}
.sheet-form .lap-done{font-size:14.5px;text-align:center;color:var(--ok-ink)}.sheet-form .lap-err{color:var(--warn-ink)}
.sheet-form.is-sent .sheet-field,.sheet-form.is-sent .sheet-send{display:none}

/*
 * Mission Control, drawn, in its own section (#dashboard; markup: src/demo.mjs `renderFleet`, the question's panel
 * `askSheet` inside the same window). Since 2026-10-20 the hero shows the run instead (src/hero-run.mjs, src/run.css)
 * and Mission Control is drawn only here.
 *
 * Written in design units: `13u` is 13px on the fleet's 760-wide frame (360-wide on a phone) and scales with the
 * frame's real width — build.mjs expands `Nu` to `calc(var(--u)*N)`.
 *
 * The drawing is Mission Control v4 (plugins/launchpad/src/dashboard/DESIGN.md): its tokens below mirror app.html's
 * :root; it follows the page's theme, and in dark mode it is the dashboard's own composed dark. Nothing here moves.
 */

.dm-world{
  --c-bg:#FBFBF9;--c-side:#F4F4F1;--c-surface:#FFFFFF;--c-sub:#F3F3F0;--c-line:#E7E6E1;--c-line-strong:#D3D1CA;
  --c-ink:#16171A;--c-ink-2:#45484F;--c-ink-3:#6B6E76;--c-accent-ink:#253CAF;--c-accent-wash:#EEF1FD;--c-accent:#2F4BD1;--c-on-accent:#FFFFFF;--c-accent-lip:#1C2E8A;
  --c-ok:#1B7F45;--c-gap:#C5362B;--c-unknown:#9A5B06;--c-na:#D3D1CA;--c-ok-wash:#E9F5EE;--c-unknown-wash:#FBF1DF;
  --c-series:#16171A;--c-series-soft:#E7E6E1;
  --c-frame-ring:rgba(16,17,20,.08);
  --m-sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --m-display:"Instrument Serif",ui-serif,Georgia,"Times New Roman",serif;
  --m-mono:"Geist Mono",ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
:root[data-theme="dark"] .dm-world{
  --c-bg:#111214;--c-side:#0D0E10;--c-surface:#191A1D;--c-sub:#1E1F23;--c-line:#26272C;--c-line-strong:#393A40;
  --c-ink:#F2F2F0;--c-ink-2:#C1C3C8;--c-ink-3:#8E9198;--c-accent-ink:#BFCBFF;--c-accent-wash:#161D3F;--c-accent:#93A6FF;--c-on-accent:#0A1033;--c-accent-lip:#253CAF;
  --c-ok:#5BC98C;--c-gap:#F2786D;--c-unknown:#E2AE4F;--c-na:#393A40;--c-ok-wash:#132A1E;--c-unknown-wash:#2E2412;
  --c-series:#F2F2F0;--c-series-soft:#26272C;
  --c-frame-ring:rgba(255,255,255,.08);
}
.dm-frame{position:relative;container-type:inline-size;isolation:isolate}
.dm-world{--u:calc(100cqw / 760);position:absolute;inset:0;font:400 calc(var(--u)*11)/1.5 var(--m-sans);color:var(--c-ink-2);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
.dm-world p{margin:0}
.dm-world b{font-weight:600;color:var(--c-ink)}
.dm-world small{font-size:inherit}
.dm-i{width:calc(var(--u)*12);height:calc(var(--u)*12);flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* The window: one layered, offset shadow and a hairline ring (site DESIGN §4). */
.dm-mc{position:absolute;inset:0;border-radius:calc(var(--u)*12);overflow:hidden;background:var(--c-bg);box-shadow:var(--shadow-window)}
.dm-mc::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--c-frame-ring);pointer-events:none;z-index:9}

/* App marks: dashboard/icon.ts's appIcon, 22% corners and a hairline ring. */
.dm-ic{display:block;flex:none;border-radius:22%;overflow:hidden;box-shadow:0 0 0 1px color-mix(in srgb,var(--c-ink) 12%,transparent)}
.dm-ic svg{display:block;width:100%;height:100%}
/* By night each demo icon takes its night tones (dashboard/demo-icons.ts `demoIconColours(name, 'dark')`). */
:root[data-theme="dark"] .dm-ic{--icon-ground:var(--icon-ground-d);--icon-ink:var(--icon-ink-d)}
:root[data-theme="dark"] .dm-tile{background:hsl(var(--p) 14% 22%);color:hsl(var(--p) 22% 78%)}
/* An app with no icon of its own: its initial on a calm tile in its hue (app.html `.tile`). */
.dm-tile{display:grid;place-items:center;background:hsl(var(--p) 12% 89%);color:hsl(var(--p) 18% 34%);font-weight:600;font-size:.62em}
.dm-ic.dm-tile.xs{font-size:calc(var(--u)*9)}.dm-ic.dm-tile.sm{font-size:calc(var(--u)*11)}
.dm-ic.xs{width:calc(var(--u)*14);height:calc(var(--u)*14)}.dm-ic.sm{width:calc(var(--u)*20);height:calc(var(--u)*20)}
/* Keys: a face on a lip. `fill` is the accent. */
.dm-btn{display:inline-flex;align-items:center;gap:calc(var(--u)*4);height:calc(var(--u)*21);padding:0 calc(var(--u)*9);border:1px solid var(--c-line-strong);border-radius:calc(var(--u)*5);background:var(--c-surface);font-size:calc(var(--u)*10);font-weight:500;color:var(--c-ink);white-space:nowrap;box-shadow:0 calc(var(--u)*1.5) 0 var(--c-line-strong)}
.dm-btn.fill{border-color:var(--c-accent);background:var(--c-accent);color:var(--c-on-accent);font-weight:600;box-shadow:0 calc(var(--u)*1.5) 0 var(--c-accent-lip)}
/* A skeleton bar: where the product shows detail the drawing does not need (owner, round 3). */
.dm-sk{display:block;height:calc(var(--u)*6);border-radius:calc(var(--u)*3);background:var(--c-sub)}
:root[data-theme="dark"] .dm-sk{background:var(--c-line)}

/* ── Chrome ────────────────────────────────────────────────────────────── */
.dm-wbar{position:relative;display:flex;align-items:center;height:calc(var(--u)*26);padding:0 calc(var(--u)*12);background:var(--c-side);border-bottom:1px solid var(--c-line)}
.dm-dots{display:flex;gap:calc(var(--u)*5.5)}
.dm-dots i{width:calc(var(--u)*8.5);height:calc(var(--u)*8.5);border-radius:50%;background:var(--c-line-strong)}
.dm-wt{position:absolute;left:0;right:0;text-align:center;font:500 calc(var(--u)*10)/1 var(--m-sans);color:var(--c-ink-3);pointer-events:none}
.dm-body{position:absolute;inset:calc(var(--u)*26) 0 0 0;display:grid;grid-template-columns:calc(var(--u)*172) minmax(0,1fr)}

/* ── Sidebar: the brand, the apps by name; the rest is skeleton ───────── */
.dm-side{display:flex;flex-direction:column;min-width:0;background:var(--c-side);border-right:1px solid var(--c-line)}
.dm-brand{display:flex;align-items:center;gap:calc(var(--u)*8);padding:calc(var(--u)*13) calc(var(--u)*12) calc(var(--u)*11)}
.dm-logo{display:grid;place-items:center;width:calc(var(--u)*23);height:calc(var(--u)*23);flex:none;border-radius:calc(var(--u)*6);background:var(--c-ink);color:var(--c-bg)}
.dm-logo .dm-i{width:calc(var(--u)*15);height:calc(var(--u)*15)}
.dm-brand b{display:block;font:400 calc(var(--u)*15.5)/1.05 var(--m-display);letter-spacing:-.005em}
.dm-brand small{display:block;font-size:calc(var(--u)*9);line-height:1.3;color:var(--c-ink-3)}
.dm-navsk{display:flex;flex-direction:column;gap:calc(var(--u)*11);padding:calc(var(--u)*6) calc(var(--u)*14) calc(var(--u)*10)}
.dm-nav{position:relative;display:flex;align-items:center;gap:calc(var(--u)*8);margin:0 calc(var(--u)*6);padding:calc(var(--u)*5) calc(var(--u)*7);border-radius:calc(var(--u)*5);min-width:0}
.dm-nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(var(--u)*4);line-height:1.3}
.dm-nm b{font-size:calc(var(--u)*10.5);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-nm .dm-sk{height:calc(var(--u)*4)}
.dm-side .dm-sk{background:var(--c-line)}
.dm-lbl{padding:calc(var(--u)*4) calc(var(--u)*13) calc(var(--u)*4);font-size:calc(var(--u)*9.5);font-weight:500;color:var(--c-ink-3)}
.dm-projs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(var(--u)*2)}

/* ── Home: the fleet ───────────────────────────────────────────────────── */
.dm-main{position:relative;min-width:0;overflow:hidden}
.dm-view{position:absolute;inset:0;overflow:hidden}
.dm-world .dm-h1{display:block;font:400 calc(var(--u)*30)/1.05 var(--m-display);letter-spacing:-.015em;color:var(--c-ink)}
.dm-ph2{display:flex;align-items:baseline;gap:calc(var(--u)*6)}
.dm-ph2>b{font:400 calc(var(--u)*34)/1 var(--m-display);color:var(--c-ink);letter-spacing:-.02em}
.dm-ph2>span{font-size:calc(var(--u)*12);color:var(--c-ink-3)}
.dm-ph2 .dm-ph-done{margin-left:auto;font-size:calc(var(--u)*10)}
.dm-ph2 .dm-ph-done b{font-weight:600;color:var(--c-ink-2)}
.dm-rows{border:1px solid var(--c-line);border-radius:calc(var(--u)*7);background:var(--c-surface);overflow:hidden}
.dm-row{position:relative;display:grid;align-items:center;border-top:1px solid var(--c-line)}
.dm-row:first-child{border-top:0}
.dm-rt{min-width:0}
.dm-rt>b{display:inline-block;max-width:100%;font-size:calc(var(--u)*10.5);font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-dot{display:inline-block;width:calc(var(--u)*6);height:calc(var(--u)*6);border-radius:50%;flex:none;background:var(--c-na)}
.dm-dot.ok{background:var(--c-ok)}
.dm-frame.fleet-frame{aspect-ratio:760/462;margin:0}
.mission-shot.fleet{margin:0}
.fleet-view{padding:calc(var(--u)*22) calc(var(--u)*20) 0}
.fleet-left{margin-top:calc(var(--u)*12)}
.fleet-rows{margin-top:calc(var(--u)*16)}
.fleet-row{grid-template-columns:calc(var(--u)*20) minmax(0,1fr) calc(var(--u)*78) calc(var(--u)*40) calc(var(--u)*8);gap:calc(var(--u)*10);padding:calc(var(--u)*9) calc(var(--u)*12)}
.fleet-row .dm-rt{display:flex;flex-direction:column;gap:calc(var(--u)*5)}
.fleet-row .dm-sk{height:calc(var(--u)*5)}
.fleet-bar{position:relative;display:block;height:calc(var(--u)*5);border-radius:calc(var(--u)*3);background:var(--c-sub);overflow:hidden}
.fleet-bar i{position:absolute;inset:0;border-radius:inherit;background:var(--c-accent);transform-origin:0 50%;transform:scaleX(var(--f))}
.fleet-n{justify-self:end;font-size:calc(var(--u)*10);color:var(--c-ink-3);white-space:nowrap}
.mission-shot.fleet figcaption{margin-top:14px;font-size:13px;line-height:1.45;color:var(--ink-3);text-align:center}

/* ── The one question, open inside the window (owner, 2026-10-20 "it asks you here, once"; 2026-10-23 "why is this
 * popup … not near the dashboard?") ────────────────────────────────────────────────────────────────────────────────
 * Mission Control's panel as the product opens it (dashboard DESIGN.md §8 Drawer): on a wide screen a side sheet
 * docked beside the page, which narrows to make room (no scrim — the page stays usable); on a phone a sheet from the
 * bottom over the page, which dims. Its anatomy: the decision's glyph and title in the serif, which app and who acts,
 * the brief, the options by number and name with one picked, a foot with the one key, Close in the corner. */
.fleet-mc .dm-body{grid-template-columns:calc(var(--u)*150) minmax(0,1fr);right:calc(var(--u)*252)}
.dm-scrim{display:none}
.dm-sheet{position:absolute;top:calc(var(--u)*26);right:0;bottom:0;width:calc(var(--u)*252);display:flex;flex-direction:column;background:var(--c-surface);border-left:1px solid var(--c-line);box-shadow:calc(var(--u)*-10) 0 calc(var(--u)*28) calc(var(--u)*-18) rgba(22,23,26,.28);z-index:2}
:root[data-theme="dark"] .dm-sheet{box-shadow:calc(var(--u)*-10) 0 calc(var(--u)*28) calc(var(--u)*-16) rgba(0,0,0,.7)}
.dm-ph{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:calc(var(--u)*10);align-items:start;padding:calc(var(--u)*16) calc(var(--u)*14) calc(var(--u)*13) calc(var(--u)*16);border-bottom:1px solid var(--c-line)}
.dm-pq{display:grid;place-items:center;width:calc(var(--u)*26);height:calc(var(--u)*26);border-radius:calc(var(--u)*7);background:var(--c-accent-wash);color:var(--c-accent-ink)}
.dm-pq .dm-i{width:calc(var(--u)*14);height:calc(var(--u)*14)}
.dm-pht{min-width:0}
.dm-pt{display:block;font:400 calc(var(--u)*17)/1.15 var(--m-display);color:var(--c-ink);letter-spacing:-.005em;text-wrap:balance}
.dm-pc{display:flex;align-items:center;gap:calc(var(--u)*5);margin-top:calc(var(--u)*7);font-size:calc(var(--u)*10);color:var(--c-ink-3)}
.dm-pc .dm-ic.xs{width:calc(var(--u)*13);height:calc(var(--u)*13)}
.dm-pchip{margin-left:calc(var(--u)*3);padding:calc(var(--u)*1.5) calc(var(--u)*6);border-radius:calc(var(--u)*4);background:color-mix(in srgb,var(--c-accent) 10%,var(--c-surface));color:var(--c-accent);font-weight:500;white-space:nowrap}
.dm-px{color:var(--c-ink-3)}
.dm-px .dm-i{width:calc(var(--u)*13);height:calc(var(--u)*13)}
.dm-pb{flex:1;padding:calc(var(--u)*13) calc(var(--u)*16)}
.dm-brief{font-size:calc(var(--u)*11.5);line-height:1.45;color:var(--c-ink-2)}
.dm-opts{display:flex;flex-direction:column;gap:calc(var(--u)*6);margin-top:calc(var(--u)*11)}
.dm-opt{display:flex;align-items:center;gap:calc(var(--u)*8);padding:calc(var(--u)*7.5) calc(var(--u)*9);border:1px solid var(--c-line-strong);border-radius:calc(var(--u)*6)}
.dm-opt span{display:grid;place-items:center;width:calc(var(--u)*16);height:calc(var(--u)*16);flex:none;border:1px solid var(--c-line-strong);border-radius:calc(var(--u)*4);font-size:calc(var(--u)*10);font-weight:600;color:var(--c-ink-2)}
.dm-opt b{font-size:calc(var(--u)*11.5);font-weight:500}
.dm-opt.on{border-color:var(--c-accent);background:var(--c-accent-wash)}
.dm-opt.on span{border-color:var(--c-accent);background:var(--c-accent);color:var(--c-on-accent)}
.dm-pf{display:flex;justify-content:flex-end;padding:calc(var(--u)*11) calc(var(--u)*16) calc(var(--u)*13);border-top:1px solid var(--c-line)}
.dm-sheet .dm-btn{height:calc(var(--u)*25);padding:0 calc(var(--u)*12);font-size:calc(var(--u)*11.5);border-radius:calc(var(--u)*5)}

@media (max-width:760px){
  /* 2026-10-09: no blank foot under the rows; the figure spans the column. 2026-10-23: taller, for the sheet. */
  .dm-frame.fleet-frame{aspect-ratio:360/540}
  .fleet-frame .dm-world{--u:calc(100cqw / 360)}
  .fleet-mc .dm-body{grid-template-columns:minmax(0,1fr);right:0}
  .dm-side{display:none}
  .fleet-view{padding:calc(var(--u)*14) calc(var(--u)*14) 0}
  .fleet-row{grid-template-columns:calc(var(--u)*20) minmax(0,1fr) calc(var(--u)*70) calc(var(--u)*8);gap:calc(var(--u)*9)}
  .fleet-n{display:none}
  /* A phone: the panel is a sheet from the bottom, over the page, which dims (dashboard DESIGN.md §8). */
  .dm-scrim{display:block;position:absolute;inset:calc(var(--u)*26) 0 0 0;background:rgba(22,23,26,.28);z-index:1}
  :root[data-theme="dark"] .dm-scrim{background:rgba(0,0,0,.5)}
  .dm-sheet{top:auto;left:0;width:auto;border-left:0;border-top:1px solid var(--c-line);border-radius:calc(var(--u)*12) calc(var(--u)*12) 0 0;box-shadow:0 calc(var(--u)*-10) calc(var(--u)*28) calc(var(--u)*-14) rgba(22,23,26,.3)}
  .dm-pt{font-size:calc(var(--u)*18)}
  .dm-brief,.dm-opt b{font-size:calc(var(--u)*12.5)}
  .dm-sheet .dm-btn{height:calc(var(--u)*27);font-size:calc(var(--u)*12.5)}
}

/*
 * The hero's run (owner, 2026-10-20, Concept B; markup: src/hero-run.mjs, runtime: src/demo.js). ONE window: Claude
 * Code's dark bar over a light sheet in the page's own type and tokens (light by day, the page's dark by night; the bar
 * is dark in both, like every terminal on the page). On the sheet, the "Production checklist" on the left and, on the
 * right, the finished app assembling — a browser and a phone gain one piece per category done, under a slow push-in
 * with a little depth — then a "Live" glow, one light sweep and the three results.
 *
 * The stylesheet's own state is the FINAL frame — every row done, every piece of the app in place, the fee approved,
 * the results up, the link shown — and every unfinished look is scoped to `.run.anim`, the state demo.js sets while it
 * plays. So no JavaScript, reduced motion and a paused visitor all see the end. Motion is transform and opacity only
 * (the washes and glows are pre-drawn layers that fade; the camera is a transform driven by `--k`, the share of the
 * checklist done); the window's box never changes size, so the run shifts no layout.
 */
.run-stage{max-width:1088px;margin:22px auto 0;padding:0 24px}
.run{position:relative}
.run-win{position:relative;border-radius:16px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-window)}
.run p{margin:0}
/* ── Claude Code's bar ─────────────────────────────────────────────────── */
.run-bar{padding:11px 24px 13px;background:var(--code-bg);color:#ECEDEF}
.run-top{display:flex;align-items:center;gap:12px;margin:0 0 12px!important;font:500 12px/1 var(--sans);color:#8C909A}
.run-dots{display:flex;gap:6px}
.run-dots i{width:10px;height:10px;border-radius:50%;background:#3A3C44}
.run-cmd{display:flex;align-items:center;min-height:28px;font:500 21px/1.3 var(--mono);white-space:nowrap}
.run-gt{margin-right:12px;color:#8C909A}
.run-typed{color:#93A6FF}
.run-caret{width:10px;height:23px;margin-left:3px;background:#93A6FF;opacity:0}
.run.anim .run-caret.on{opacity:1;animation:runBlink 1s steps(1) infinite}
.run-reply{margin-top:6px!important;font:400 14px/1.5 var(--mono);color:#B8BBC3;transition:opacity .35s ease,transform .45s var(--ease-out)}
.run.anim .run-reply:not(.on){opacity:0;transform:translateY(4px)}
.run-prog{position:relative;display:block;height:3px;background:var(--line);overflow:hidden}
.run-prog i{position:absolute;inset:0;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--f));transition:transform .5s var(--ease-out)}


/* ── The sheet: the checklist on the left, the app on the right ──────── */
.run-sheet{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 468px;grid-template-rows:auto 1fr;column-gap:20px;padding:12px 16px 14px 14px;transition:opacity .45s ease}
.run-head{grid-column:1;grid-row:1;display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 4px!important;padding:0 8px;font-size:13px;color:var(--ink-3)}
.run-head>b{font-size:15px;font-weight:600;color:var(--ink)}
.run-head span b{display:inline-block;min-width:2ch;text-align:right;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.run-list{grid-column:1;grid-row:2;min-width:0;padding-bottom:30px}
.run-rows{list-style:none;margin:0;padding:0;display:grid;grid-template-rows:repeat(8,26px)}
.run-row{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:10px;height:26px;padding:0 8px;border-radius:7px}
.run-ic{display:none}
/* The washes: launchpad working (the accent's) and waiting for you (amber), pre-drawn and faded in. */
.run-row::before,.run-row::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .3s ease}
.run-row::before{background:var(--accent-wash)}
.run-row::after{background:var(--warn-wash);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 30%,transparent)}
.run.anim .run-row.work::before,.run.anim .run-row.wait::after{opacity:1}
.run-row>*{position:relative;z-index:1}
/* The name and, after it, one public item; on the fee row, the fee and "waiting for your OK" in its place. */
.run-t{display:grid;min-width:0}
.run-say{grid-area:1/1;display:flex;align-items:baseline;gap:8px;min-width:0;transition:opacity .18s ease}
.run-say b{flex:none;font-size:14px;font-weight:500;line-height:1.3;color:var(--ink);white-space:nowrap}
.run-say small{min-width:0;font-size:13px;line-height:1.3;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.run-say.ask{opacity:0}
.run-say.ask b,.run-say.ask small{color:var(--warn-ink)}
.run.anim .run-row.wait .run-say.ask{opacity:1}
.run.anim .run-row.wait .run-say:not(.ask){opacity:0}
/* The count of the category's items in scope, and the fee row's key, in one cell. */
.run-end{position:relative;display:grid;justify-items:end;align-items:center}
.run-n{grid-area:1/1;padding:3px 8px;border-radius:99px;background:var(--ok-wash);font:500 12px/1 var(--sans);font-style:normal;color:var(--ok-ink);font-variant-numeric:tabular-nums;transition:opacity .2s ease}
.run.anim .run-row:not(.done) .run-n{background:var(--bg-sub);color:var(--ink-3)}
.run.anim .run-row.wait .run-n{opacity:0}
.run-key{position:absolute;right:0;top:50%;margin-top:-11px;display:inline-flex;align-items:center;height:22px;padding:0 11px;border-radius:7px;background:var(--accent);font:600 12.5px/1 var(--sans);color:var(--on-accent);white-space:nowrap;box-shadow:0 2px 0 var(--accent-lip);opacity:0;transform:translateY(3px);transition:opacity .2s ease,transform .12s ease}
.run.anim .run-row.wait .run-key{opacity:1;transform:none}
.run.anim .run-row.wait .run-key.press{transform:translateY(2px)}
/* The mark: an empty ring, a spinner while launchpad works, amber while it waits for you, a green check when done. */
.run-mk{position:relative;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.6px var(--line-strong)}
.run-mk::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ok);transition:opacity .2s ease,transform .3s var(--ease-out)}
.run-mk svg{position:relative;z-index:1;width:11px;height:11px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .2s ease,transform .3s var(--ease-out)}
:root[data-theme="dark"] .run-mk svg{stroke:#0B1A12}
.run.anim .run-row:not(.done) .run-mk::after,.run.anim .run-row:not(.done) .run-mk svg{opacity:0;transform:scale(.4)}
.run-spin{position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:var(--accent);border-right-color:var(--accent);opacity:0}
.run.anim .run-row.work .run-spin{opacity:1;animation:runSpin .7s linear infinite}
.run.anim .run-row.wait .run-mk{box-shadow:inset 0 0 0 1.6px var(--warn)}

/* ── The app, assembling ───────────────────────────────────────────────
 * A stage (`ap-cam`, clipped) holds a fixed 460×200 set, centred and scaled: the browser behind (`ap-back`), the
 * phone and the loose pieces in front (`ap-front`). `--k` (0 → 1, the share of the checklist done; 1 when nothing
 * sets it) drives the camera: the set settles from a slight tilt and 90% to flat and full size, the back layer drifts
 * one way and the front the other, so the push-in reads as depth. Each piece (`ap-part`) lands when its category is
 * done; at the end the browser glows green and one band of light crosses the stage. */
.run-app{grid-column:2;grid-row:1/3;display:grid;grid-template-rows:minmax(0,1fr) 56px;gap:8px;min-width:0;transition:opacity .45s ease,transform .6s var(--ease-out)}
.ap-cam{position:relative;overflow:hidden;border-radius:12px;background:radial-gradient(90% 80% at 50% 8%,var(--surface),transparent 70%),radial-gradient(color-mix(in srgb,var(--ink) 8%,transparent) 1px,transparent 1.3px) 0 0/14px 14px,var(--bg-sub);box-shadow:inset 0 0 0 1px var(--line)}
.ap-set{--zoom:1;position:absolute;left:50%;top:50%;width:460px;height:190px;margin:-95px 0 0 -230px;transform:perspective(900px) rotateX(calc((1 - var(--k,1)) * 9deg)) scale(calc(var(--zoom) * (.9 + .1 * var(--k,1))));transition:transform .8s var(--ease-out)}
.ap-back,.ap-front{position:absolute;inset:0;transition:transform .8s var(--ease-out)}
.ap-back{transform:translateX(calc((1 - var(--k,1)) * -10px))}
.ap-front{transform:translate(calc((1 - var(--k,1)) * 18px),calc((1 - var(--k,1)) * 6px))}
.ap-part{position:absolute;transition:opacity .35s ease,transform .5s var(--ease-out)}
.run.anim .ap-part:not(.on){opacity:0;transform:scale(.6)}
/* The browser. */
.ap-web{position:absolute;left:34px;top:5px;width:290px;height:180px;border-radius:10px;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 18px 36px -18px rgba(16,22,48,.35)}
.ap-web::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--ok) 60%,transparent),0 0 28px color-mix(in srgb,var(--ok) 32%,transparent);transition:opacity .8s ease}
.run.anim:not([data-step="end"]) .ap-web::after{opacity:0}
.ap-chrome{display:flex;align-items:center;gap:10px;height:26px;padding:0 10px;border-radius:10px 10px 0 0;background:var(--bg-sub);box-shadow:inset 0 -1px 0 var(--line)}
.ap-dots{display:flex;gap:4px}
.ap-dots i{width:7px;height:7px;border-radius:50%;background:var(--line-strong)}
.ap-url{position:relative;flex:1;height:17px;margin-right:30px;border-radius:99px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.ap-addr{inset:0;display:flex;align-items:center;justify-content:center;gap:4px;font:500 12px/1 var(--mono);color:var(--ink-2)}
.ap-addr svg{width:12px;height:12px;color:var(--ok-ink)}
.run.anim .ap-addr:not(.on){transform:translateY(3px)}
.ap-page{position:relative;height:154px}
.ap-page p,.ap-page .ap-part{position:absolute;margin:0}
.ap-page i,.ap-scr i{display:block}
.ap-nav{left:12px;right:12px;top:10px;display:flex;align-items:center;gap:8px}
.ap-nav i{width:22px;height:5px;border-radius:3px;background:var(--line)}
.ap-nav i:first-child{width:12px;height:12px;margin-right:auto;border-radius:4px;background:var(--line-strong)}
.ap-banner{left:12px;right:12px;top:30px;height:54px;border-radius:8px;background:var(--bg-sub)}
.ap-text{left:12px;top:96px;width:118px;display:grid;gap:6px}
.ap-text i{height:5px;border-radius:3px;background:var(--line)}
.ap-text i:nth-child(2){width:84%}
.ap-text i:nth-child(3){width:62%}
/* The app itself, painted over its outline when Builds and releases is done. */
.ap-paint{background:linear-gradient(118deg,var(--accent),var(--iris));overflow:hidden}
.ap-paint i{position:absolute;left:12px;height:7px;border-radius:4px;background:rgba(255,255,255,.92)}
.ap-paint i:nth-child(1){top:12px;width:46%}
.ap-paint i:nth-child(2){top:25px;width:30%;height:5px;opacity:.7}
.ap-paint i:nth-child(3){top:38px;width:42px;height:11px;border-radius:99px}
.run.anim .ap-paint:not(.on){transform:none}
.ap-chart{right:12px;top:94px;width:122px;height:36px;display:flex;align-items:flex-end;gap:5px;padding:6px 8px;border-radius:7px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.ap-chart i{flex:1;height:calc(var(--h) * 100%);border-radius:2px 2px 0 0;background:color-mix(in srgb,var(--accent) calc(40% + var(--h) * 60%),transparent);transform-origin:50% 100%;transition:transform .5s var(--ease-out) calc(var(--i) * 70ms + .1s)}
.run.anim .ap-chart:not(.on){transform:translateY(4px)}
.run.anim .ap-chart:not(.on) i{transform:scaleY(0)}
.ap-foot{left:12px;right:12px;bottom:6px;display:flex;align-items:center;gap:8px;color:var(--ink-3)}
.ap-foot svg{width:12px;height:12px}
.ap-foot i{width:28px;height:4px;border-radius:2px;background:var(--line-strong)}
.run.anim .ap-foot:not(.on){transform:translateY(4px)}
/* The phone. */
.ap-phone{position:absolute;left:302px;top:18px;width:86px;height:166px;padding:4px;border-radius:17px;background:#17181D;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 22px 34px -16px rgba(16,22,48,.5)}
.ap-scr{position:relative;height:100%;border-radius:13px;background:var(--surface);overflow:hidden}
.ap-scr::before{content:"";position:absolute;left:50%;top:5px;width:24px;height:5px;margin-left:-12px;border-radius:3px;background:#17181D;z-index:2}
.ap-scr .ap-head,.ap-scr .ap-part{position:absolute;left:6px;right:6px;top:16px;height:54px;margin:0;border-radius:8px}
.ap-scr .ap-head:not(.ap-part){background:var(--bg-sub)}
.ap-scr .ap-paint i{left:8px}
.ap-scr .ap-paint i:nth-child(1){top:12px;width:56%}
.ap-scr .ap-paint i:nth-child(2){top:24px;width:36%}
.ap-cells{position:absolute;left:6px;right:6px;top:78px;display:grid;gap:6px;margin:0}
.ap-cells i{height:22px;border-radius:6px;background:var(--bg-sub)}
/* The loose pieces: a badge on the phone, and three tiles that land beside the screens, each with a green check. */
.ap-badge,.ap-chip{display:grid;place-items:center;background:var(--surface);color:var(--accent-ink);box-shadow:0 0 0 1px var(--line),0 10px 22px -10px rgba(16,22,48,.4)}
.ap-badge{right:-14px;top:-10px;width:34px;height:34px;border-radius:50%}
.ap-chip{width:44px;height:44px;border-radius:12px}
.ap-chip[data-part="security"]{left:2px;top:62px}
.ap-chip[data-part="payments"]{left:412px;top:118px}
.ap-chip[data-part="dashboard"]{left:412px;top:22px}
.ap-ok{position:absolute;right:-5px;bottom:-5px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 2px var(--surface)}
.ap-ok svg{width:10px;height:10px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
:root[data-theme="dark"] .ap-ok svg{stroke:#0B1A12}
:root[data-theme="dark"] .ap-phone{box-shadow:0 0 0 1px var(--line-strong),0 22px 34px -16px rgba(0,0,0,.6)}
.ap-badge .ap-ok{right:-4px;bottom:-4px;width:14px;height:14px}
/* Live: a green glow behind the screens, and one band of light across the stage when the results rise. */
.ap-glow{position:absolute;left:50%;top:50%;width:520px;height:300px;margin:-150px 0 0 -260px;background:radial-gradient(closest-side,color-mix(in srgb,var(--ok) 24%,transparent),transparent);transition:opacity .9s ease}
.run.anim:not([data-step="end"]) .ap-glow{opacity:0}
.ap-sweep{position:absolute;top:-30%;bottom:-30%;left:0;width:34%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5) 50%,transparent);transform:translateX(400%) skewX(-14deg);pointer-events:none}
:root[data-theme="dark"] .ap-sweep{background:linear-gradient(100deg,transparent,rgba(255,255,255,.1) 50%,transparent)}
.run.anim:not([data-step="end"]) .ap-sweep{transform:translateX(-140%) skewX(-14deg)}
.run.anim[data-step="end"] .ap-sweep{transition:transform 1.3s var(--ease-io) .15s}

/* ── The results: three tiles that rise under the app, then the way down to Mission Control ── */
.run-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.run-tile{position:relative;min-width:0;height:56px}
.run-slot,.run-face{position:absolute;inset:0;border-radius:12px}
.run-slot{display:flex;align-items:center;gap:10px;padding:0 14px;border:1px dashed var(--line-strong);font-size:14px;color:var(--ink-3);opacity:0;transition:opacity .3s ease}
.run-slot b{font-weight:500}
.run-slot i{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.run.anim .run-tile:not(.on) .run-slot{opacity:1}
.run-face{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-content:center;column-gap:10px;row-gap:1px;padding:0 12px;background:var(--bg-sub);box-shadow:inset 0 0 0 1px var(--line);transition:opacity .4s ease,transform .55s var(--ease-out)}
.run-face>:first-child{grid-row:1/3}
.run-face b{font-size:14.5px;font-weight:600;line-height:1.25;color:var(--ink)}
.run-face>span:last-child{grid-column:2;font-size:13px;line-height:1.3;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.run-tile[data-result="live"] .run-face{background:var(--ok-wash);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 28%,transparent)}
.run-face .run-addr{font:500 12.5px/1.3 var(--mono);color:var(--ok-ink)}
.run-dot{justify-self:center;align-self:center;width:9px;height:9px;margin:0 4px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
.run-ok{display:grid;place-items:center;align-self:center;width:18px;height:18px;border-radius:50%;background:var(--ok)}
.run-ok svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
:root[data-theme="dark"] .run-ok svg{stroke:#0B1A12}
.run.anim .run-tile:not(.on) .run-face{opacity:0;transform:translateY(12px)}
/* On a desktop the link sits under the checklist, where the rows end. */
.run-mc{position:absolute;left:22px;bottom:12px;padding:4px 2px;font-size:14px;font-weight:500;color:var(--accent-ink);text-decoration:none;transition:opacity .4s ease,transform .5s var(--ease-out)}
.run-mc:hover{text-decoration:underline;text-underline-offset:3px}
.run.anim .run-mc:not(.on){opacity:0;transform:translateY(4px)}

/* A narrower window (a laptop at under 1060px): the app sits under the checklist, the link after the results. */
@media (min-width:761px) and (max-width:1060px){
  .run-stage:not(.is-full) .run-sheet{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto}
  .run-stage:not(.is-full) .run-app{grid-column:1;grid-row:3;height:290px;margin-top:12px}
  .run-stage:not(.is-full) .run-out{grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:center}
  .run-stage:not(.is-full) .run-mc{position:static}
}

/* ── Controls, the caption, the loop's fade ───────────────────────────── */
.run-replay{position:absolute;top:12px;right:14px;z-index:3;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border:1px solid rgba(255,255,255,.16);border-radius:99px;background:rgba(255,255,255,.04);font:500 12.5px/1 var(--sans);color:#D9DBE0;cursor:pointer}
.run-replay:hover{background:rgba(255,255,255,.1)}
.run-replay svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.run-replay[hidden]{display:none}
.run.fade .run-cmd,.run.fade .run-reply,.run.fade .run-sheet{opacity:0}
.run-cmd{transition:opacity .45s ease}
.run.snap *,.run.snap *::before,.run.snap *::after{transition:none!important;animation:none!important}
@keyframes runBlink{50%{opacity:0}}
@keyframes runSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.run *,.run *::before,.run *::after{transition:none!important;animation:none!important}}

/* ── Capture mode: ?demo=1 renders only the run, full-bleed ───────────── */
.demo-only body{overflow:hidden;background:var(--bg-sub)}
.demo-only .nav,.demo-only .skip,.demo-only main>section:not(.watch),.demo-only .footer,.demo-only .trust,.demo-only .buybar,.demo-only .nudge{display:none!important}
/* The run lives in the demo band since 2026-10-27: the band shows the run alone — no heading, steps or link, no hills. */
.demo-only .sec.watch{padding:0;margin:0;background:var(--bg-sub)}
.demo-only .sec.watch .wrap>:not(.demo-stage),.demo-only .sec.watch .demo-stage>:not(.run-stage){display:none!important}
.demo-only .sec.watch .wrap{max-width:none;padding:0}
.demo-only .run-stage{max-width:none;margin:0;padding:0;height:100vh;display:grid;place-items:center}
.demo-only .run{width:min(92vw,920px)}


/* ── A phone: the eight categories as a 2×4 grid of icons that light up in turn, then the assembled app ──
 * The grid fills the sheet; each tile is its category's icon and name. While a category is worked on its icon takes
 * the accent, when it is done green; the fee's tile turns amber and a band across the grid's last row asks for the OK.
 * At the end the grid fades and the app stands in its place — the same drawing, scaled to the phone — with the results
 * and the link to Mission Control two by two under it. The box is the same height throughout. */
@media (max-width:760px){
  .run-stage{padding:0 16px;margin-top:32px}
  .run-win{border-radius:14px}
  .run-bar{padding:12px 16px 14px}
  .run-top{gap:10px;margin-bottom:12px!important;font-size:12px}
  .run-dots i{width:8px;height:8px}
  .run-cmd{min-height:24px;font-size:17px}
  .run-caret{height:19px;width:8px}
  .run-gt{margin-right:9px}
  .run-reply{font-size:13px;line-height:1.45}
  .run-replay{top:8px;right:10px;height:26px}
  .run-sheet{display:block;padding:12px 12px 14px}
  .run-head{padding:0 4px;margin-bottom:8px!important;font-size:12.5px}
  .run-head>b{font-size:14.5px}
  .run-list{position:relative;height:270px;transition:opacity .4s ease}
  .run[data-step="end"] .run-list{opacity:0}
  .run-rows{grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,54px);grid-auto-flow:row;gap:6px}
  .run-row{position:static;grid-template-columns:32px minmax(0,1fr);gap:9px;height:54px;padding:0 9px;border-radius:12px;background:var(--bg-sub)}
  .run-row::before,.run-row::after{display:none}
  .run-row>*{position:static;z-index:auto}
  .run.anim .run-row.wait .run-say:not(.ask){opacity:1}
  .run-n,.run-say small{display:none}
  .run-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--ok-wash);color:var(--ok-ink)}
  /* The ring, spinner and check ride on the icon's corner (owner, 2026-10-27: "the loading and check part … is not
     working on mobile for each checklist item": the mark was hidden here, so a tile only changed colour). */
  .run-ic,.run-mk{grid-area:1/1}
  .run-t{grid-column:2}
  .run-mk{position:relative;z-index:2;justify-self:end;align-self:end;width:16px;height:16px;transform:translate(5px,5px);background:var(--surface);box-shadow:0 0 0 2px var(--bg-sub),inset 0 0 0 1.6px var(--line-strong)}
  .run-mk svg{width:9px;height:9px}
  .run.anim .run-row.wait .run-mk{box-shadow:0 0 0 2px var(--bg-sub),inset 0 0 0 1.6px var(--warn)}
  .run-ic svg{width:18px;height:18px}
  .run-say b{font-size:13px;line-height:1.25;white-space:normal;flex:1}
  .run.anim .run-row:not(.done) .run-ic{background:var(--surface);color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line)}
  .run.anim .run-row:not(.done) .run-say b{color:var(--ink-3)}
  .run.anim .run-row.work .run-ic{background:var(--accent-wash);color:var(--accent-ink);box-shadow:inset 0 0 0 1.5px var(--accent)}
  .run.anim .run-row.work .run-say b{color:var(--ink)}
  .run.anim .run-row.wait .run-ic{background:var(--warn-wash);color:var(--warn-ink);box-shadow:inset 0 0 0 1.5px var(--warn)}
  /* The OK, asked across the grid's last row. */
  .run-say.ask{position:absolute;z-index:2;left:0;right:0;top:180px;height:54px;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;padding:0 96px 0 14px;border-radius:12px;background:linear-gradient(var(--warn-wash),var(--warn-wash)),var(--surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 34%,transparent)}
  .run-say.ask b{flex:none;font-size:13.5px}
  .run.anim .run-row.wait .run-say.ask b{color:var(--warn-ink)}
  .run-say.ask small{display:block;font-size:12px}
  .run-end{position:static}
  .run-key{z-index:3;top:195px;right:12px;margin-top:0;height:26px}
  /* The app, in the grid's place. */
  .run-app{position:absolute;left:12px;right:12px;top:46px;height:270px;display:flex;flex-direction:column;gap:8px}
  .run.anim:not([data-step="end"]) .run-app{opacity:0;transform:scale(.96);pointer-events:none}
  .ap-cam{flex:1;min-height:0}
  .ap-set{--zoom:.64}
  .run-out{grid-template-columns:1fr 1fr;grid-template-rows:52px 52px;gap:8px;flex:none}
  .run-tile{height:auto}
  .run-slot{display:none}
  .run-face{padding:0 12px;row-gap:2px}
  .run-face b{font-size:15px}
  .run-mc{position:static;display:flex;align-self:stretch;align-items:center;justify-content:center;gap:4px;margin:0;padding:0 12px;border-radius:12px;background:var(--accent-wash);text-align:center;line-height:1.35}
}

/* The illustration in the rockets' warm colours (owner, 2026-10-27: "not our blue and green, it looks a bit too
   placeholder … a pale orange that we use with our rockets"): one pale flame tone and its deeper shade, nothing else. */
.ap-cam{--warm:color-mix(in srgb,var(--sc-flame) 70%,#fff);--warm-2:color-mix(in srgb,var(--sc-flame) 88%,#7a2e00);--warm-wash:color-mix(in srgb,var(--sc-flame) 12%,var(--surface));
  background:radial-gradient(90% 80% at 50% 8%,var(--surface),transparent 70%),radial-gradient(color-mix(in srgb,var(--sc-flame) 14%,transparent) 1px,transparent 1.3px) 0 0/14px 14px,color-mix(in srgb,var(--sc-flame) 6%,var(--bg-sub))}
.ap-paint{background:linear-gradient(135deg,var(--warm),color-mix(in srgb,var(--warm) 70%,var(--warm-2)))}
.ap-chart i{background:color-mix(in srgb,var(--warm-2) calc(35% + var(--h) * 55%),transparent)}
.ap-badge,.ap-chip{color:var(--warm-2)}
.ap-ok{background:var(--warm-2)}
.ap-ok svg{stroke:#fff}
:root[data-theme="dark"] .ap-ok svg{stroke:#fff}
.ap-addr svg{color:var(--warm-2)}
.ap-web::after{box-shadow:0 0 0 1.5px color-mix(in srgb,var(--warm-2) 45%,transparent),0 0 28px color-mix(in srgb,var(--warm) 40%,transparent)}
.ap-glow{background:radial-gradient(closest-side,color-mix(in srgb,var(--warm) 30%,transparent),transparent)}
.ap-banner,.ap-scr .ap-head:not(.ap-part){background:var(--warm-wash)}

/* Phone (2026-10-27: "put the hero animation on the mobile site too, under the list covering a whole row"): the
   checklist grid stays, and the app it builds sits under it across the window's width, filling in as rows finish;
   the result tiles land under the app at the end. */
@media (max-width:640px){
  .run[data-step="end"] .run-list{opacity:1}
  .run-list{height:auto}
  .run-say.ask{top:auto;bottom:0}
  .run-key{top:auto;bottom:14px}
  .run-app{position:static;height:auto;margin-top:10px;gap:8px}
  .run.anim:not([data-step="end"]) .run-app{opacity:1;transform:none;pointer-events:auto}
  .ap-cam{flex:none;height:190px}
  .ap-set{--zoom:.66}
  .run-out{transition:opacity .4s ease,transform .5s var(--ease-out)}
}
@media (max-width:640px){
  .run-sheet{height:auto!important;min-height:0}
  .run-list{height:auto!important}
  .run-rows{grid-template-rows:repeat(4,54px)}
  .run-app{margin-top:8px}
  /* One row per result, title and words on one line, then the link across the full width
     (owner, 2026-10-27: the 2x2 tiles collapsed and spilled their text). */
  .run-out{grid-template-columns:1fr;grid-template-rows:none;gap:6px}
  .run-tile{height:44px}
  .run-face{grid-template-columns:auto auto minmax(0,1fr);grid-template-rows:auto;align-items:center;column-gap:10px;padding:0 14px}
  .run-face>:first-child{grid-row:auto}
  .run-face b{font-size:14.5px}
  .run-face>span:last-child{grid-column:3;justify-self:end;text-align:right}
  /* While it runs, each result waits as a dashed slot in its own row (as on a computer), so the frame is never empty. */
  .run-slot{display:flex;padding:0 14px;font-size:14.5px}
  .run-mc{height:42px;flex-direction:row;white-space:nowrap}
  .ap-set{--zoom:.6}
}
@media (max-width:360px){
  .ap-set{--zoom:.52}
  .run-head{flex-direction:column;align-items:flex-start;gap:1px;font-size:12px}
  .run-head>b{font-size:13.5px}
  .run-rows{grid-template-rows:repeat(4,58px)}
  .run-row{grid-template-columns:28px minmax(0,1fr);gap:7px;height:58px;padding:0 7px}
  .run-ic{width:28px;height:28px}
  .run-say b{font-size:12.5px;line-height:1.25;white-space:normal}
}
@media (max-width:340px){ .ap-set{--zoom:.46} }

/* ── Full screen on a phone (owner, 2026-11-01: "tap to full screen for the live demo in the mobile landing page") ──
 * A tap on the window (or its "Full screen" key, where Replay sits once the run rests) lifts the stage over the page,
 * the run starts again from the top and is scaled to fit the screen whole — the phone layout upright, the wide one
 * when the phone is turned. The key exists only with JavaScript and only on a phone; the overlay is fixed, so opening
 * it shifts nothing on the page. */
.run-full,.run-close{display:none}
.run-full{position:absolute;top:8px;right:10px;z-index:3;align-items:center;gap:5px;height:26px;padding:0 9px;border:1px solid rgba(255,255,255,.16);border-radius:99px;background:rgba(255,255,255,.04);font:500 12px/1 var(--sans);color:#D9DBE0;cursor:pointer}
.run-full svg,.run-close svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px),(pointer:coarse) and (max-height:520px){
  .js .run-full{display:inline-flex}
  .js .run-top{padding-right:100px}
  .js .run-top>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .js .run:has(.run-replay:not([hidden])) .run-full{display:none}
  .js .run-stage:not(.is-full) .run-win{cursor:pointer}
}
/* The page under it (its scroll, the band's shadow, the buy bar) is styles.css's `html.run-full-on`. */
.run-stage.is-full{position:fixed;inset:0;z-index:200;max-width:none;margin:0;padding:calc(60px + env(safe-area-inset-top,0px)) 12px calc(14px + env(safe-area-inset-bottom,0px));overflow:hidden;background:var(--bg-sub);overscroll-behavior:contain}
/* Laid out at its own width, then scaled (--fit) and set down (--dy) by demo.js so the whole window shows. A turned
   phone gets the computer's layout (the tablet one above stacks, and would be drawn half as big). */
.run-stage.is-full .run{position:absolute;left:50%;top:0;width:calc(100% - 24px);transform:translate(-50%,var(--dy,0px)) scale(var(--fit,1));transform-origin:50% 0}
@media (min-width:761px){.run-stage.is-full .run{width:1040px}}
.run-stage.is-full .run-full{display:none}
.run-stage.is-full .run-close{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:12px;z-index:4;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--line-strong);border-radius:50%;background:var(--surface);color:var(--ink);cursor:pointer}
.run-close svg{width:16px;height:16px}
@media (orientation:landscape) and (max-height:520px){
  .run-stage.is-full{padding:calc(10px + env(safe-area-inset-top,0px)) 64px calc(10px + env(safe-area-inset-bottom,0px))}
}

/* The hero scene's rockets (generated by src/scene.mjs: their paths, depths and timing are computed there). */
@keyframes hs-wide-a{0%{transform:translate(calc(79.86cqw),calc(100cqh + -171px)) rotate(0deg) scale(1);opacity:1}7.39%{transform:translate(calc(79.87cqw),calc(95.16cqh + -165.9px)) rotate(0.3deg) scale(0.99);opacity:1}14.77%{transform:translate(calc(79.9cqw),calc(88.13cqh + -158.5px)) rotate(0.9deg) scale(0.99);opacity:1}22.16%{transform:translate(calc(79.98cqw),calc(78.91cqh + -148.7px)) rotate(1.5deg) scale(0.97);opacity:1}29.55%{transform:translate(calc(80.15cqw),calc(67.5cqh + -136.6px)) rotate(2.3deg) scale(0.96);opacity:1}36.93%{transform:translate(calc(80.45cqw),calc(53.91cqh + -122.3px)) rotate(3.3deg) scale(0.94);opacity:1}44.32%{transform:translate(calc(80.92cqw),calc(38.13cqh + -105.5px)) rotate(4.4deg) scale(0.93);opacity:1}51.7%{transform:translate(calc(81.63cqw),calc(20.16cqh + -86.5px)) rotate(5.7deg) scale(0.9);opacity:0.89}59.09%{transform:translate(calc(82.64cqw),calc(0cqh + -65.2px)) rotate(7.2deg) scale(0.88);opacity:0}100%{transform:translate(calc(82.64cqw),calc(0cqh + -65.2px)) rotate(7.2deg) scale(0.88);opacity:0}}
.hs-rk-wide-a{transform:translate(calc(80.71cqw),calc(44.7cqh + -112.5px));animation:hs-wide-a 22s linear -22s infinite both}
@keyframes hs-wide-a-t{0%{transform:scale(.55,.08);opacity:1}17.73%{transform:scale(1,1);opacity:1}59.09%{transform:scale(1.7,1.12);opacity:.35}100%{transform:scale(1.7,1.12);opacity:0}}
.hs-rk-wide-a .hs-trail{animation:hs-wide-a-t 22s linear -22s infinite both}
@keyframes hs-wide-b{0%{transform:translate(calc(20.83cqw),calc(100cqh + -141.9px)) rotate(0deg) scale(1);opacity:1}6.25%{transform:translate(calc(20.83cqw),calc(95.16cqh + -138.6px)) rotate(-0.4deg) scale(0.99);opacity:1}12.5%{transform:translate(calc(20.79cqw),calc(88.13cqh + -133.7px)) rotate(-1deg) scale(0.99);opacity:1}18.75%{transform:translate(calc(20.69cqw),calc(78.91cqh + -127.3px)) rotate(-1.8deg) scale(0.97);opacity:1}25%{transform:translate(calc(20.5cqw),calc(67.5cqh + -119.4px)) rotate(-2.8deg) scale(0.96);opacity:1}31.25%{transform:translate(calc(20.15cqw),calc(53.91cqh + -110px)) rotate(-3.9deg) scale(0.94);opacity:1}37.5%{transform:translate(calc(19.61cqw),calc(38.13cqh + -99px)) rotate(-5.3deg) scale(0.93);opacity:1}43.75%{transform:translate(calc(18.8cqw),calc(20.16cqh + -86.5px)) rotate(-6.8deg) scale(0.9);opacity:0.89}50%{transform:translate(calc(17.64cqw),calc(0cqh + -72.6px)) rotate(-8.5deg) scale(0.88);opacity:0}100%{transform:translate(calc(17.64cqw),calc(0cqh + -72.6px)) rotate(-8.5deg) scale(0.88);opacity:0}}
.hs-rk-wide-b{transform:translate(calc(20.38cqw),calc(62.33cqh + -115.8px));animation:hs-wide-b 22s linear -14s infinite both}
@keyframes hs-wide-b-t{0%{transform:scale(.55,.08);opacity:1}15%{transform:scale(1,1);opacity:1}50%{transform:scale(1.7,1.12);opacity:.35}100%{transform:scale(1.7,1.12);opacity:0}}
.hs-rk-wide-b .hs-trail{animation:hs-wide-b-t 22s linear -14s infinite both}
@keyframes hs-wide-c{0%{transform:translate(calc(86.39cqw),calc(100cqh + -72.2px)) rotate(0deg) scale(1);opacity:1}5.68%{transform:translate(calc(86.4cqw),calc(95.16cqh + -72.5px)) rotate(0.5deg) scale(0.99);opacity:1}11.36%{transform:translate(calc(86.44cqw),calc(88.13cqh + -73px)) rotate(1.3deg) scale(0.99);opacity:1}17.05%{transform:translate(calc(86.55cqw),calc(78.91cqh + -73.6px)) rotate(2.3deg) scale(0.97);opacity:1}22.73%{transform:translate(calc(86.77cqw),calc(67.5cqh + -74.3px)) rotate(3.5deg) scale(0.96);opacity:1}28.41%{transform:translate(calc(87.16cqw),calc(53.91cqh + -75.3px)) rotate(5deg) scale(0.94);opacity:1}34.09%{transform:translate(calc(87.77cqw),calc(38.13cqh + -76.3px)) rotate(6.7deg) scale(0.93);opacity:1}39.77%{transform:translate(calc(88.69cqw),calc(20.16cqh + -77.5px)) rotate(8.6deg) scale(0.9);opacity:0.89}45.45%{transform:translate(calc(90cqw),calc(0cqh + -78.8px)) rotate(10.7deg) scale(0.88);opacity:0}100%{transform:translate(calc(90cqw),calc(0cqh + -78.8px)) rotate(10.7deg) scale(0.88);opacity:0}}
.hs-rk-wide-c{transform:translate(calc(86.61cqw),calc(75.05cqh + -73.8px));animation:hs-wide-c 22s linear -8.5s infinite both}
@keyframes hs-wide-c-t{0%{transform:scale(.55,.08);opacity:1}13.64%{transform:scale(1,1);opacity:1}45.45%{transform:scale(1.7,1.12);opacity:.35}100%{transform:scale(1.7,1.12);opacity:0}}
.hs-rk-wide-c .hs-trail{animation:hs-wide-c-t 22s linear -8.5s infinite both}
@keyframes hs-wide-d{0%{transform:translate(calc(5.83cqw),calc(100cqh + 24px)) rotate(0deg) scale(1);opacity:1}4.89%{transform:translate(calc(5.84cqw),calc(95.16cqh + 18.6px)) rotate(0.7deg) scale(0.99);opacity:1}9.77%{transform:translate(calc(5.89cqw),calc(88.13cqh + 10.7px)) rotate(1.7deg) scale(0.99);opacity:1}14.66%{transform:translate(calc(6.01cqw),calc(78.91cqh + 0.3px)) rotate(3deg) scale(0.97);opacity:1}19.55%{transform:translate(calc(6.26cqw),calc(67.5cqh + -12.5px)) rotate(4.6deg) scale(0.96);opacity:1}24.43%{transform:translate(calc(6.69cqw),calc(53.91cqh + -27.8px)) rotate(6.6deg) scale(0.94);opacity:1}29.32%{transform:translate(calc(7.38cqw),calc(38.13cqh + -45.5px)) rotate(8.8deg) scale(0.93);opacity:1}34.2%{transform:translate(calc(8.4cqw),calc(20.16cqh + -65.7px)) rotate(11.3deg) scale(0.9);opacity:0.89}39.09%{transform:translate(calc(9.86cqw),calc(0cqh + -88.3px)) rotate(14deg) scale(0.88);opacity:0}100%{transform:translate(calc(9.86cqw),calc(0cqh + -88.3px)) rotate(14deg) scale(0.88);opacity:0}}
.hs-rk-wide-d{transform:translate(calc(6.59cqw),calc(56.8cqh + -24.5px));animation:hs-wide-d 22s linear -4s infinite both}
@keyframes hs-wide-d-t{0%{transform:scale(.55,.08);opacity:1}11.73%{transform:scale(1,1);opacity:1}39.09%{transform:scale(1.7,1.12);opacity:.35}100%{transform:scale(1.7,1.12);opacity:0}}
.hs-rk-wide-d .hs-trail{animation:hs-wide-d-t 22s linear -4s infinite both}
@keyframes hs-phone-a{0%{transform:translate(calc(2.05cqw),calc(100cqh + -101.1px)) rotate(0deg) scale(1);opacity:1}6.82%{transform:translate(calc(2.05cqw),calc(95.16cqh + -99px)) rotate(0deg) scale(0.99);opacity:1}13.64%{transform:translate(calc(2.05cqw),calc(88.13cqh + -96px)) rotate(0deg) scale(0.99);opacity:1}20.45%{transform:translate(calc(2.05cqw),calc(78.91cqh + -92.2px)) rotate(0deg) scale(0.97);opacity:1}27.27%{transform:translate(calc(2.05cqw),calc(67.5cqh + -87.4px)) rotate(0deg) scale(0.96);opacity:1}34.09%{transform:translate(calc(2.05cqw),calc(53.91cqh + -81.6px)) rotate(0deg) scale(0.94);opacity:1}40.91%{transform:translate(calc(2.05cqw),calc(38.13cqh + -75px)) rotate(0deg) scale(0.93);opacity:1}47.73%{transform:translate(calc(2.05cqw),calc(20.16cqh + -67.4px)) rotate(0deg) scale(0.9);opacity:0.89}54.55%{transform:translate(calc(2.05cqw),calc(0cqh + -58.9px)) rotate(0deg) scale(0.88);opacity:0}100%{transform:translate(calc(2.05cqw),calc(0cqh + -58.9px)) rotate(0deg) scale(0.88);opacity:0}}
.hs-rk-phone-a{transform:translate(calc(2.05cqw),calc(72.32cqh + -89.4px));animation:hs-phone-a 22s linear -22s infinite both}
@keyframes hs-phone-a-t{0%{transform:scale(.55,.08);opacity:1}16.36%{transform:scale(1,1);opacity:1}54.55%{transform:scale(1.7,1.12);opacity:.35}100%{transform:scale(1.7,1.12);opacity:0}}
.hs-rk-phone-a .hs-trail{animation:hs-phone-a-t 22s linear -22s infinite both}
@keyframes hs-phone-d{0%{transform:translate(calc(98.21cqw),calc(100cqh + 24px)) rotate(0deg) scale(1);opacity:1}5.11%{transform:translate(calc(98.21cqw),calc(95.16cqh + 19.9px)) rotate(0deg) scale(0.99);opacity:1}10.23%{transform:translate(calc(98.21cqw),calc(88.13cqh + 13.9px)) rotate(0deg) scale(0.99);opacity:1}15.34%{transform:translate(calc(98.21cqw),calc(78.91cqh + 6.1px)) rotate(0deg) scale(0.97);opacity:1}20.45%{transform:translate(calc(98.21cqw),calc(67.5cqh + -3.6px)) rotate(0deg) scale(0.96);opacity:1}25.57%{transform:translate(calc(98.21cqw),calc(53.91cqh + -15.2px)) rotate(0deg) scale(0.94);opacity:1}30.68%{transform:translate(calc(98.21cqw),calc(38.13cqh + -28.6px)) rotate(0deg) scale(0.93);opacity:1}35.8%{transform:translate(calc(98.21cqw),calc(20.16cqh + -43.9px)) rotate(0deg) scale(0.9);opacity:0.89}40.91%{transform:translate(calc(98.21cqw),calc(0cqh + -61px)) rotate(0deg) scale(0.88);opacity:0}100%{transform:translate(calc(98.21cqw),calc(0cqh + -61px)) rotate(0deg) scale(0.88);opacity:0}}
.hs-rk-phone-d{transform:translate(calc(98.21cqw),calc(56.8cqh + -12.7px));animation:hs-phone-d 22s linear -12s infinite both}
@keyframes hs-phone-d-t{0%{transform:scale(.55,.08);opacity:1}12.27%{transform:scale(1,1);opacity:1}40.91%{transform:scale(1.7,1.12);opacity:.35}100%{transform:scale(1.7,1.12);opacity:0}}
.hs-rk-phone-d .hs-trail{animation:hs-phone-d-t 22s linear -12s infinite both}