/* Starkomand landing page.
   The page is a canvas on paper. The hero capture is a selected shape (outline
   and corner handles, the way tldraw shows one); the features are glass
   windows placed on a dot-grid board with sticky notes beside them, the way
   the app itself keeps windows, notes and diagrams together. Every screen is
   a real capture (scripts/capture-landing.mjs). Colour comes from the captures
   and from state: magenta for voice, jade for finished, violet for recaps,
   note yellow for the notes by day, lifted slate for them at night. Display
   type is Archivo set wide (self-hosted,
   OFL); body is the system face, the app's own; Menlo inside the HUD replica
   and the spoken lines; Excalifont only for hand-drawn annotations. */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Excalifont';
  src: url('fonts/Excalifont-Regular.woff2') format('woff2');
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f7f5f1;
  --paper-2: #efece6;
  --white: #fdfcfa;
  --page-bg: var(--paper);
  --ink: #0b0f14;
  --ink-2: #2b333d;
  --muted: #667180;
  --faint: #98a1ab;
  --line: rgba(11, 15, 20, 0.09);
  --line-strong: rgba(11, 15, 20, 0.18);
  --glass-ink: #0b0f14;
  --header-bg: rgba(247, 245, 241, 0.74);
  --btn-bg: #0b0f14;
  --btn-bg-hover: #1c232b;
  --btn-fg: #fdfcfa;
  --tile-edge: transparent;
  --sel: rgba(11, 15, 20, 0.5);
  --sel-strong: rgba(11, 15, 20, 0.7);
  --handle-bg: #fdfcfa;
  --win-edge: rgba(11, 15, 20, 0.14);
  --dots: radial-gradient(rgba(11, 15, 20, 0.17) 1px, transparent 1.2px);
  --said: #c62d9d;
  --note: #fff1a3;
  --note-ink: #1d1a0a;
  --note-muted: #4a4320;
  --note-pin: #0b0f14;
  --note-edge: transparent;
  --note-shadow: 0 18px 36px -16px rgba(60, 45, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  --note-ctl-bg: rgba(255, 255, 255, 0.55);
  --note-ctl-edge: rgba(29, 26, 10, 0.28);
  --toggle-sun: none;
  --toggle-moon: block;
  --jade: #1f8a5e;
  --jade-bright: #4ade9d;
  --cyan: #4dd8ff;
  --voice: #ff6bd6;
  --voice-deep: #c62d9d;
  --violet: #a78bfa;
  --amber: #ffb86b;
  --claude: #d97757;
  --codex: #10a37f;

  --display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', system-ui, sans-serif;
  --ui: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, Menlo, 'SF Mono', Consolas, monospace;
  --hand: 'Excalifont', 'Segoe Print', 'Bradley Hand', cursive;

  --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;
  --gutter: clamp(1.25rem, 4.5vw, 4rem);
  --wrap-max: 1240px;
  --nav-h: 64px;

  --r-window: 14px; --r-control: 10px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

}

/* Night: the app's own room (DESIGN.md). Ink base, text #c9d6e2, liquid
   silver for the primary control, a faint Nebula behind the page. The
   window chrome and the listening bar do not change: they are the app's
   objects and look the same in any light. The notes do: yellow paper glares
   against ink, so at night they become lifted slate with a silver pin and a
   hairline edge, still opaque and tilted so they read as notes, not glass.
   The same values sit
   under the system preference (unless the visitor chose light) and under
   the explicit choice, so the toggle wins in both directions. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0b0f14;
    --paper-2: #10161e;
    --white: #121a23;
    --page-bg: radial-gradient(1200px 800px at 15% 180px, rgba(77, 216, 255, 0.12), transparent 60%), radial-gradient(1100px 750px at 85% 1500px, rgba(140, 90, 255, 0.12), transparent 60%), radial-gradient(900px 650px at 30% calc(100% - 900px), rgba(0, 255, 190, 0.07), transparent 60%), #0b0f14;
    --ink: #eef2f6;
    --ink-2: #c9d6e2;
    --muted: #8aa2b5;
    --faint: #55677a;
    --line: rgba(195, 203, 211, 0.12);
    --line-strong: rgba(195, 203, 211, 0.26);
    --header-bg: rgba(11, 15, 20, 0.62);
    --btn-bg: linear-gradient(180deg, #dbe2e9 0%, #b6bfc8 100%);
    --btn-bg-hover: linear-gradient(180deg, #e6ecf1 0%, #c3cbd3 100%);
    --btn-fg: #0b0f14;
    --tile-edge: rgba(195, 203, 211, 0.26);
    --sel: rgba(195, 203, 211, 0.55);
    --sel-strong: rgba(195, 203, 211, 0.85);
    --handle-bg: #0b0f14;
    --win-edge: rgba(195, 203, 211, 0.18);
    --dots: radial-gradient(rgba(195, 203, 211, 0.16) 1px, transparent 1.2px);
    --said: #ff6bd6;
    --note: #1c232d;
    --note-ink: #eef2f6;
    --note-muted: #aab8c6;
    --note-pin: #c3cbd3;
    --note-edge: rgba(195, 203, 211, 0.22);
    --note-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --note-ctl-bg: rgba(255, 255, 255, 0.07);
    --note-ctl-edge: rgba(195, 203, 211, 0.3);
    --toggle-sun: block;
    --toggle-moon: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0b0f14;
  --paper-2: #10161e;
  --white: #121a23;
  --page-bg: radial-gradient(1200px 800px at 15% 180px, rgba(77, 216, 255, 0.12), transparent 60%), radial-gradient(1100px 750px at 85% 1500px, rgba(140, 90, 255, 0.12), transparent 60%), radial-gradient(900px 650px at 30% calc(100% - 900px), rgba(0, 255, 190, 0.07), transparent 60%), #0b0f14;
  --ink: #eef2f6;
  --ink-2: #c9d6e2;
  --muted: #8aa2b5;
  --faint: #55677a;
  --line: rgba(195, 203, 211, 0.12);
  --line-strong: rgba(195, 203, 211, 0.26);
  --header-bg: rgba(11, 15, 20, 0.62);
  --btn-bg: linear-gradient(180deg, #dbe2e9 0%, #b6bfc8 100%);
  --btn-bg-hover: linear-gradient(180deg, #e6ecf1 0%, #c3cbd3 100%);
  --btn-fg: #0b0f14;
  --tile-edge: rgba(195, 203, 211, 0.26);
  --sel: rgba(195, 203, 211, 0.55);
  --sel-strong: rgba(195, 203, 211, 0.85);
  --handle-bg: #0b0f14;
  --win-edge: rgba(195, 203, 211, 0.18);
  --dots: radial-gradient(rgba(195, 203, 211, 0.16) 1px, transparent 1.2px);
  --said: #ff6bd6;
  --note: #1c232d;
  --note-ink: #eef2f6;
  --note-muted: #aab8c6;
  --note-pin: #c3cbd3;
  --note-edge: rgba(195, 203, 211, 0.22);
  --note-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --note-ctl-bg: rgba(255, 255, 255, 0.07);
  --note-ctl-edge: rgba(195, 203, 211, 0.3);
  --toggle-sun: block;
  --toggle-moon: none;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-stretch: 110%; color: var(--ink); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
figure { margin: 0; }
kbd {
  font-family: var(--mono);
  font-size: 0.8125rem;
  padding: 1px 7px 2px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  background: var(--white);
  color: var(--ink);
}
.skip-link { position: absolute; left: var(--s-4); top: -60px; padding: var(--s-2) var(--s-3); background: var(--btn-bg); color: var(--btn-fg); border-radius: var(--r-control); z-index: 100; }
.skip-link:focus { top: var(--s-4); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--r-control); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.wrap { width: min(var(--wrap-max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.nowrap { white-space: nowrap; }
section[id] { scroll-margin-top: calc(var(--nav-h) + var(--s-4)); }

/* ---------- controls ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 22px; border-radius: 12px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--ui); font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.01em;
  text-decoration: none; border: 0; cursor: pointer; white-space: nowrap;
  box-shadow: 0 12px 28px -14px rgba(11, 15, 20, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out), background 150ms var(--ease-out);
}
.button:hover { background: var(--btn-bg-hover); box-shadow: 0 16px 32px -14px rgba(11, 15, 20, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.button:active { transform: translateY(1px); }
.button--large { height: 56px; padding: 0 26px; font-size: 1.0625rem; border-radius: 14px; }
.button--small { height: 44px; padding: 0 16px; font-size: 0.875rem; box-shadow: none; }
.button-label-compact { display: none; }
.button--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); box-shadow: none; }
.button--ghost:hover { background: var(--white); border-color: var(--ink); box-shadow: none; }
.button[aria-disabled="true"] { opacity: 0.5; cursor: default; pointer-events: none; }
.button-icon { width: 18px; height: 18px; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 500; text-decoration-line: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: 5px; transition: text-decoration-color 150ms var(--ease-out), color 150ms var(--ease-out); }
.text-link:hover { text-decoration-color: var(--ink); }
.text-link:active { color: var(--muted); }
.fine { font-size: 0.875rem; color: var(--muted); }

/* A spoken line, in the app's voice colour. */
.said { font-family: var(--mono); font-size: 0.875rem; color: var(--said); letter-spacing: 0.005em; }
.said::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--voice); box-shadow: 0 0 10px var(--voice); margin-right: 10px; vertical-align: 1px; }

/* Provider names carry their glyph, the way the launcher does. */
.prov { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.prov svg { width: 1.05em; height: 1.05em; flex: none; }
.prov--claude svg { color: var(--claude); }
.prov--codex svg { color: var(--codex); }

/* An annotation in an agent's hand. */
.annot { position: absolute; z-index: 3; font-family: var(--hand); font-size: clamp(1rem, 1.5vw, 1.35rem); line-height: 1.2; color: var(--ink); pointer-events: none; white-space: nowrap; }
.annot svg { display: block; width: 72px; height: 34px; margin-top: 2px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40; height: var(--nav-h);
  background: var(--header-bg); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); }
.brand { display: inline-flex; align-items: center; min-height: 44px; gap: 10px; font-family: var(--display); font-stretch: 108%; font-weight: 620; font-size: 1.0625rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.brand-tile { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--glass-ink); box-shadow: 0 0 0 1px var(--tile-edge); flex: none; }
.brand-tile img { width: 22px; height: 22px; }
.brand-tile--large { width: 72px; height: 72px; border-radius: 18px; margin: 0 auto var(--s-6); }
.brand-tile--large img { width: 46px; height: 46px; }
.primary-nav { display: flex; gap: clamp(1rem, 2.5vw, 2rem); }
.primary-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.primary-nav a:hover { color: var(--ink); }
.primary-nav a:active { color: var(--muted); }
.header-end { display: flex; align-items: center; gap: var(--s-3); }
.theme-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; transition: border-color 150ms var(--ease-out), background 150ms var(--ease-out); }
.theme-toggle:hover { border-color: var(--ink); background: var(--white); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: var(--toggle-sun); }
.theme-toggle .icon-moon { display: var(--toggle-moon); }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--dots); background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 80%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 80%, transparent);
}
.hero-copy { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--s-6) clamp(2rem, 5vw, 5rem); align-items: end; }
.hero h1 {
  grid-column: 1 / -1;
  font-size: clamp(2.5rem, 1.2rem + 4.6vw, 5.25rem);
  font-weight: 640; font-stretch: 112%;
  line-height: 0.95; letter-spacing: -0.035em;
  max-width: 15ch;
}
.h1-line { display: block; }
.hero-intro { display: grid; gap: var(--s-4); align-self: end; }
.hero-lede { font-size: clamp(1.0625rem, 0.98rem + 0.45vw, 1.25rem); line-height: 1.55; color: var(--ink-2); max-width: 39ch; }
.hero-lede strong { display: block; margin-bottom: 3px; color: var(--ink); font-weight: 650; }
.hero-providers {
  display: flex; flex-wrap: wrap; gap: 9px 18px;
  max-width: 40rem; margin: 0; padding: 0; list-style: none;
  font-size: 0.875rem; line-height: 1.25;
}
.hero-providers .prov { color: var(--muted); font-weight: 560; }
.hero-providers .prov svg { color: var(--faint); }
.hero-providers .prov--claude svg { color: var(--claude); }
.hero-providers .prov--codex svg { color: var(--codex); }
.hero-side { display: grid; gap: var(--s-4); justify-items: start; }
.hero-actions { display: flex; align-items: center; gap: var(--s-4) var(--s-6); flex-wrap: wrap; }
.hero-hint { font-size: 0.875rem; color: var(--muted); }

/* The recording as a selected shape: outline, four handles, a label in an
   agent's hand. The listening bar sits inside, where the app draws it. The
   stage is 16:9 because the recording is; the board windows stay 16:10. */
.hero-stage { margin-top: clamp(3rem, 7vw, 5.5rem); }
.canvas-object { position: relative; }
.canvas-object::before { content: ''; position: absolute; inset: -10px; border: 1.5px solid var(--sel); border-radius: 6px; pointer-events: none; }
.handle { position: absolute; width: 12px; height: 12px; background: var(--handle-bg); border: 1.5px solid var(--sel-strong); border-radius: 3px; z-index: 2; }
.handle--tl { left: -16px; top: -16px; }
.handle--tr { right: -16px; top: -16px; }
.handle--bl { left: -16px; bottom: -16px; }
.handle--br { right: -16px; bottom: -16px; }
.hero-shot {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-window); overflow: hidden;
  background: var(--glass-ink);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--win-edge);
}
.hero-shot img, .hero-shot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.annot--hero { right: 4%; top: -58px; rotate: -2deg; }
.annot--hero svg { margin-left: auto; scale: -1 1; }

/* The listening bar, rebuilt from the app's chrome rules (DESIGN.md). */
.hud {
  position: absolute; z-index: 3; left: 50%; bottom: 5.5%; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 14px; height: 46px; max-width: calc(100% - 2rem);
  padding: 0 18px 0 16px; border-radius: 999px;
  background: rgba(11, 15, 20, 0.86); border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--voice);
  animation: rise-in 700ms var(--ease-out) both; animation-delay: 500ms;
}
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hud-bars { display: inline-flex; gap: 3px; align-items: center; height: 18px; flex: none; }
.hud-bars i { width: 3px; height: 12px; border-radius: 2px; background: var(--voice); box-shadow: 0 0 8px rgba(255, 107, 214, 0.7); animation: hud-bar 900ms ease-in-out infinite alternate; animation-delay: calc(var(--i) * 90ms); }
@keyframes hud-bar { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
.hud-sep { width: 1px; height: 22px; background: rgba(255, 255, 255, 0.16); flex: none; }
.hud-said { color: #eef2f6; letter-spacing: 0; font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-caret { display: inline-block; width: 7px; height: 14px; background: var(--voice); flex: none; animation: caret 1s steps(2) infinite; }
@keyframes caret { to { opacity: 0; } }

/* ---------- the board ---------- */
/* Windows and notes on a 12-column canvas. Each item names its row, its
   columns and a small tilt inline, so the placement reads from the markup;
   below 900px everything stacks in source order and the tilt goes. */
.board-wrap { position: relative; padding: clamp(2rem, 5vw, 4rem) 0 clamp(4rem, 8vw, 7rem); }
.board-wrap::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--dots); background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
}
.board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 2vw, 1.5rem); align-items: center; }
.board > * { grid-row: var(--row); grid-column: var(--col); rotate: var(--tilt, 0deg); }

/* A glass window, from the app's chrome rules: 14px radius, 34px header,
   silver dot, name in the squad hue, state badge. */
.win {
  position: relative; border-radius: var(--r-window); overflow: hidden; background: var(--glass-ink); color: #eef2f6;
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.65), 0 0 0 1px var(--win-edge), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.win-hd { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: rgba(255, 255, 255, 0.035); border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.75rem; font-weight: 500; color: #eef2f6; white-space: nowrap; overflow: hidden; }
.win-dot { width: 8px; height: 8px; border-radius: 999px; background: #c3cbd3; flex: none; }
.win-dot--voice { background: var(--voice); box-shadow: 0 0 8px rgba(255, 107, 214, 0.8); }
.win-dot--live { background: var(--jade-bright); box-shadow: 0 0 8px rgba(74, 222, 157, 0.7); }
.win-dot--recap { background: var(--violet); box-shadow: 0 0 8px rgba(167, 139, 250, 0.7); }
.win-name { font-weight: 600; }
.win-name--jade { color: var(--jade-bright); }
.win-prov, .win-sub { color: #8aa2b5; font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.win-title { font-family: var(--mono); font-weight: 500; letter-spacing: 0.02em; }
.win-state { margin-left: auto; font-size: 0.625rem; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(195, 203, 211, 0.3); color: #c3cbd3; flex: none; }
.win-state--done { border-color: rgba(74, 222, 157, 0.6); color: var(--jade-bright); }
.win-state--voice { border-color: rgba(255, 107, 214, 0.6); color: var(--voice); }
.win-state--needs { border-color: rgba(255, 184, 107, 0.6); color: var(--amber); }
.win-bd { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.win-bd img, .win-bd video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transform: scale(var(--zoom, 1)); transform-origin: var(--pos, 50% 50%); }
/* Screen recordings use their native 16:9 frame so canvas chrome and edge
   states stay visible without cropping. */
.win-bd--video { aspect-ratio: 16 / 9; background: #070a0e; }
.annot--win { right: 5%; top: 44px; color: #eef2f6; rotate: -3deg; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7); }
.win-ft { display: flex; align-items: center; justify-content: center; padding: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.035); }
.stage img { transition: opacity 500ms var(--ease-out); }
.stage img[data-active="false"] { opacity: 0; }
.swatches { display: inline-flex; gap: 4px; }
.swatches button { display: grid; place-items: center; width: 46px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; transition: background 150ms var(--ease-out), transform 150ms var(--ease-out); }
.swatches button:hover { background: rgba(255, 255, 255, 0.08); }
.swatches button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.16); }
.swatches button:active { transform: scale(0.96); }
.swatch { display: block; width: 32px; height: 20px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.swatch--dusk { background: linear-gradient(180deg, #1b2a4d 0%, #e8894a 52%, #0f1b36 58%, #070d1f 100%); }
.swatch--orbit { background: #04060a url('assets/orbit.jpg') center / cover no-repeat; }
.swatches button:focus-visible { outline-color: #eef2f6; }

/* A sticky note, tldraw's own shape, for the words. */
.note {
  position: relative; z-index: 2; justify-self: center; max-width: 380px; width: 100%;
  padding: 24px 26px 26px; background: var(--note); color: var(--note-ink);
  box-shadow: var(--note-shadow), 0 0 0 1px var(--note-edge);
  display: grid; gap: var(--s-3); align-content: start;
}
.note::before { content: ''; position: absolute; left: 50%; top: -7px; width: 14px; height: 14px; border-radius: 999px; background: var(--note-pin); translate: -50% 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); }
.note h2 { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem); font-weight: 640; font-stretch: 106%; line-height: 1.05; letter-spacing: -0.03em; color: var(--note-ink); }
.note p { font-size: 1rem; line-height: 1.45; color: var(--note-muted); }
.note .said { color: var(--said); }
.note kbd { background: var(--note-ctl-bg); border-color: var(--note-ctl-edge); color: var(--note-ink); }
.note--under { align-self: start; justify-self: start; margin-top: calc(-1 * clamp(2.5rem, 6vw, 5rem) - 18px); margin-left: 6%; max-width: 340px; }
.sound-button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid var(--note-ctl-edge); background: var(--note-ctl-bg); color: var(--note-ink); font: 500 0.9rem var(--ui); cursor: pointer; transition: border-color 150ms var(--ease-out), background 150ms var(--ease-out), transform 150ms var(--ease-out); }
.sound-button:hover { border-color: var(--note-ink); background: color-mix(in oklch, var(--note-ctl-bg), var(--note-ink) 7%); }
.sound-button:active { transform: translateY(1px); }
.sound-button svg { width: 18px; height: 18px; }
.sound-button[data-playing="true"] svg { color: var(--jade); }

/* ---------- say it ---------- */
.say { padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6rem); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-12); align-items: start; border-top: 1px solid var(--line); }
.say-head { display: grid; gap: var(--s-4); }
.say-head h2 { font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); font-weight: 640; font-stretch: 112%; letter-spacing: -0.035em; line-height: 0.95; }
.say-head p { color: var(--ink-2); max-width: 36ch; }
.say-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.say-list li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s-6); align-items: baseline; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.say-list .said { font-size: 0.9375rem; }
.say-list li > span:last-child { color: var(--muted); font-size: 0.9375rem; }

/* ---------- stays local ---------- */
/* The board again, in miniature. The proof is a terminal window with real
   output (the server bound to loopback, two unkeyed requests refused); the
   words sit on notes beside and under it, the way the features do above. */
.local { position: relative; padding: clamp(2rem, 5vw, 4rem) 0 clamp(4rem, 8vw, 7rem); }
.local::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--dots); background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
}
.local-head { display: grid; gap: var(--s-4); max-width: 58ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.local-head h2 { font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); font-weight: 640; font-stretch: 112%; letter-spacing: -0.035em; line-height: 0.95; }
.local-head p { color: var(--ink-2); font-size: 1.125rem; }
.local-board { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
.local-board .win, .local-board .note { rotate: var(--tilt, 0deg); }
.local-main { display: grid; }
.local-main .note--under { margin-top: -18px; margin-left: 8%; max-width: 360px; }
.local-notes { display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem); justify-items: center; }
/* The terminal body, in the app's own colours: jade prompt, amber refusals,
   a blinking block for the cursor. Long lines scroll inside the window. */
.win--term { display: grid; }
.term { margin: 0; padding: 20px 22px 18px; overflow-x: auto; background: #070a0e; color: #c9d6e2; font: 500 0.8125rem / 1.75 var(--mono); letter-spacing: 0.005em; white-space: pre; }
.term-prompt { color: var(--jade-bright); }
.term-out { color: #eef2f6; }
.term-no { color: var(--amber); }
.term-caret { display: inline-block; width: 7px; height: 14px; vertical-align: -2px; background: var(--jade-bright); animation: caret 1s steps(2) infinite; }
.annot--term { right: 7%; bottom: 11%; rotate: 2deg; color: #eef2f6; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7); display: flex; flex-direction: column-reverse; align-items: flex-start; }
.annot--term svg { scale: -1 -1; margin: 0 0 2px; }
@media (max-width: 900px) {
  .local-board { grid-template-columns: 1fr; gap: 0; }
  .local-board .win, .local-board .note { rotate: none; }
  .local-notes { gap: 0; }
}
@media (max-width: 640px) {
  .term { font-size: 0.75rem; padding: 16px; }
  .annot--term { display: none; }
}

/* ---------- pricing ---------- */
.pricing { padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6rem); border-top: 1px solid var(--line); }
.pricing-head { display: grid; gap: var(--s-3); margin-bottom: clamp(2rem, 4vw, 3rem); }
.pricing-head h2 { font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); font-weight: 640; font-stretch: 112%; letter-spacing: -0.035em; line-height: 0.95; }
.pricing-head p { color: var(--ink-2); font-size: 1.125rem; }
.plans { background: var(--white); border-radius: 20px; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(0, 0, 0, 0.35); overflow: hidden; }
.plan { padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.plan-summary { display: grid; gap: var(--s-6); }
.plan-launch { display: grid; gap: var(--s-4); }
.plan-launch-label { color: var(--ink); font-size: 0.9375rem; font-weight: 600; }
.price-timeline { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.price-tier { position: relative; display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-2) 0 0; color: var(--muted); }
.price-tier::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line-strong); }
.price-tier::after { content: ''; position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.price-tier:last-child::before { right: calc(100% - 1px); }
.price-tier span { font-size: 0.8125rem; line-height: 1.4; }
.price-tier strong { font-family: var(--display); font-size: 1.75rem; font-weight: 640; letter-spacing: -0.03em; line-height: 1; }
.price-tier--current { color: var(--ink); }
.price-tier--current::after { background: var(--jade); }
.plan-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.plan h3 { display: flex; align-items: center; gap: 10px; font-size: 1.375rem; font-weight: 640; font-stretch: 106%; letter-spacing: -0.02em; }
.pro-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--jade-bright); box-shadow: 0 0 10px rgba(74, 222, 157, 0.8); }
.plan-intro { max-width: 38ch; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
.plan-features { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
.plan-features li { display: flex; gap: 12px; align-items: baseline; font-size: 0.9375rem; line-height: 1.45; }
.plan-features li::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 999px; background: var(--faint); transform: translateY(-2px); }
.plan--pro .plan-features li::before { background: var(--jade); }
.plan-action { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-2); }
.pricing-foot { margin-top: var(--s-8); }
.pricing-foot a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .plan { grid-template-columns: 1fr; }
}

/* ---------- faq ---------- */
.faq { padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6rem); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-12); border-top: 1px solid var(--line); }
.faq h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); font-weight: 640; letter-spacing: -0.03em; line-height: 1.02; }
.faq-list { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: var(--s-4) 0; font-weight: 600; font-size: 1.0625rem; color: var(--ink); display: flex; justify-content: space-between; gap: var(--s-4); align-items: center; transition: color 150ms var(--ease-out); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--mono); color: var(--muted); font-size: 1.25rem; transition: transform 200ms var(--ease-out); }
.faq summary:hover { color: var(--muted); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 var(--s-4); color: var(--ink-2); max-width: 62ch; }

/* ---------- closing + footer ---------- */
.closing { text-align: center; padding: clamp(3rem, 8vw, 6rem) 0 clamp(4rem, 10vw, 8rem); display: grid; justify-items: center; gap: var(--s-6); border-top: 1px solid var(--line); }
.closing h2 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem); font-weight: 640; font-stretch: 112%; letter-spacing: -0.035em; line-height: 0.95; max-width: 14ch; }
.site-footer { border-top: 1px solid var(--line); padding: var(--s-8) 0 var(--s-12); display: flex; justify-content: space-between; align-items: center; gap: var(--s-6); flex-wrap: wrap; font-size: 0.875rem; color: var(--muted); }

/* ---------- motion ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease-expo), transform 700ms var(--ease-expo); }
.reveal.in { opacity: 1; transform: none; }
.hero .reveal { transition-delay: calc(var(--i, 0) * 90ms); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .stage img { transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .note { max-width: 340px; padding: 20px 22px 22px; }
}
@media (max-width: 900px) {
  .primary-nav { display: none; }
  .hero-copy { grid-template-columns: 1fr; align-items: start; }
  .annot--hero { display: none; }
  .board { grid-template-columns: 1fr; gap: var(--s-6) 0; }
  .board > * { grid-row: auto; grid-column: auto; rotate: none; }
  .note, .note--under { justify-self: stretch; max-width: none; width: auto; margin: -14px var(--s-4) var(--s-8); }
  .note::before { display: none; }
  .say, .faq { grid-template-columns: 1fr; }
  .say, .faq { gap: var(--s-6); }
}
@media (max-width: 640px) {
  .hero { padding-top: 2rem; }
  .hero-copy { gap: var(--s-8); }
  .hero h1 { font-size: clamp(2.5rem, 11vw, 3rem); line-height: 0.96; max-width: 15ch; }
  .hero-intro { gap: var(--s-3); }
  .hero-lede { font-size: 1.0625rem; line-height: 1.5; }
  .hero-providers { gap: 10px 16px; font-size: 0.875rem; }
  .hero-actions { width: 100%; }
  .hero-actions .button { width: 100%; }
  .canvas-object::before, .handle { display: none; }
  .hero-shot { border-radius: 12px; }
  .hud { height: 40px; gap: 10px; padding: 0 14px 0 12px; bottom: 4%; }
  .hud-label { display: none; }
  .win-sub { display: none; }
  .annot--win { display: none; }
  .swatches { flex-wrap: wrap; justify-content: center; max-width: 196px; }
  .say-list li { grid-template-columns: 1fr; gap: var(--s-2); }
  .site-footer { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
  .header-inner { gap: var(--s-3); }
  .brand { gap: var(--s-2); font-size: 0.9375rem; }
  .brand-tile { width: 32px; height: 32px; border-radius: 8px; }
  .header-end { gap: var(--s-2); }
  .theme-toggle { width: 44px; height: 44px; }
  .button--small { height: 44px; padding-inline: 14px; }
  .button-label-wide { display: none; }
  .button-label-compact { display: inline; }
}