/* gawkbot.site: shared stylesheet for index.html and download.html.
   (open-source-grok-bot.html carries its own styles and does not load this.)

   Visual language: clean system type, dark first, translucent glass
   surfaces, soft radii, spring-ish motion that switches off under
   prefers-reduced-motion. Every colour is a token on :root. Dark is the
   default; prefers-color-scheme: light redefines the same tokens.

   The bot marks are inline SVG symbols in each page (see the sprite at the
   top of <body>). Their body colours come from web/src/lib/blobAvatar.ts and
   identify a bot, so they are the one deliberate burst of colour here. */

/* ── Tokens ───────────────────────────────────────────────────────── */
:root {
  color-scheme: dark light;

  --bg: #0b0b0e;
  --bg-2: #111115;
  --text: #f5f5f7;
  --text-2: rgba(235, 235, 245, 0.66);
  --text-3: rgba(235, 235, 245, 0.62);
  --hairline: rgba(255, 255, 255, 0.09);
  /* The notch is black in both schemes; its rim is what shows on dark. */
  --notch-body: #000;
  --notch-lip: #16161a;
  --notch-rim: rgba(255, 255, 255, 0.34);
  --notch-rim-side: rgba(255, 255, 255, 0.14);
  --hairline-2: rgba(255, 255, 255, 0.16);
  --fill: rgba(120, 120, 128, 0.24);
  --fill-2: rgba(120, 120, 128, 0.14);

  --glass: rgba(30, 30, 36, 0.52);
  --glass-2: rgba(44, 44, 52, 0.62);
  --glass-solid: rgba(26, 26, 31, 0.94);
  --glass-hi: rgba(255, 255, 255, 0.11);

  /* The primary colour is the ink itself: white on dark, black on light.
     Colour is kept for what it means (status, the bots, the Mac's own
     wallpaper and window controls), not for chrome. */
  --accent: #f5f5f7;
  --accent-ink: #0b0b0e;
  --accent-soft: rgba(255, 255, 255, 0.10);
  --green: #30d158;
  --red: #ff453a;
  --orange: #ff9f0a;
  --blue: #0a84ff;

  --btn-bg: #f5f5f7;
  --btn-ink: #0b0b0e;

  --aurora-1: rgba(255, 255, 255, 0.055);
  --aurora-2: rgba(255, 255, 255, 0.04);
  --aurora-3: rgba(255, 255, 255, 0.03);

  /* Mac mockup wallpaper and menu bar */
  --wall-1: #2a6f8f;
  --wall-2: #5b3d9a;
  --wall-3: #0e1622;
  --menubar: rgba(20, 20, 26, 0.42);
  --menubar-ink: rgba(255, 255, 255, 0.88);
  --bezel: #0c0c0e;
  --bezel-edge: #3a3a40;

  /* The notch is hardware-black in both modes, like the real thing. */
  --notch: #000;
  /* Three of the cast's own colours, for the one coloured word. */
  --pink: #ff6b8b;
  --tangerine: #ffa53d;
  --sky: #5aa9ff;
  /* The brand's sky blue as light in the dark, behind the cast on stage. */
  --night-glow: rgba(90, 169, 255, 0.22);
  --notch-glass: rgba(14, 14, 18, 0.56);
  --notch-card: rgba(255, 255, 255, 0.07);
  --notch-line: rgba(255, 255, 255, 0.09);
  --notch-ink: #f5f5f7;
  --notch-ink-2: rgba(235, 235, 245, 0.62);
  --notch-ink-3: rgba(235, 235, 245, 0.38);


  /* Liquid glass (see .lg) */
  --lg-tint: rgba(40, 40, 48, 0.36);
  --lg-hi: rgba(255, 255, 255, 0.20);
  --lg-lo: rgba(255, 255, 255, 0.06);
  --lg-glow: rgba(255, 255, 255, 0.03);
  --lg-rim: rgba(255, 255, 255, 0.42);
  --lg-rim-2: rgba(255, 255, 255, 0.16);
  --lg-sheen: rgba(255, 255, 255, 0.07);
  --lg-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 10px 30px rgba(0, 0, 0, 0.32);
  --win-tint: rgba(22, 22, 28, 0.42);
  --code-kw: #c49bff;
  --code-str: #7be3d3;
  --code-fn: #ffb86b;
  --wall-4: #1f5f5a;
  --wall-5: #8a3f63;
  --key-top: #2c2c33;
  --key-bot: #1c1c21;
  --key-edge: #0a0a0c;
  --key-ink: #f5f5f7;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 8px rgba(0, 0, 0, 0.20);
  --shadow-md: 0 1px 1px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.28), 0 24px 48px rgba(0, 0, 0, 0.22);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.25), 0 20px 50px rgba(0, 0, 0, 0.40), 0 60px 120px rgba(0, 0, 0, 0.35);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);

  --gutter: 24px;
  --max: 1160px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f5f7;
    --bg-2: #ffffff;
    --text: #1d1d1f;
    --text-2: rgba(60, 60, 67, 0.76);
    --text-3: #6e6e73;
    --hairline: rgba(0, 0, 0, 0.08);
    --hairline-2: rgba(0, 0, 0, 0.14);
    --fill: rgba(120, 120, 128, 0.16);
    --fill-2: rgba(120, 120, 128, 0.09);

    --glass: rgba(255, 255, 255, 0.60);
    --glass-2: rgba(255, 255, 255, 0.74);
    --glass-solid: rgba(255, 255, 255, 0.96);
    --glass-hi: rgba(255, 255, 255, 0.92);

    --accent: #1d1d1f;
    --accent-ink: #ffffff;
    --accent-soft: rgba(0, 0, 0, 0.06);
    --green: #28a745;
    --red: #d70015;
    --orange: #d9800a;
    --blue: #0062cc;

    --btn-bg: #1d1d1f;
    --btn-ink: #ffffff;

    --aurora-1: rgba(120, 128, 145, 0.12);
    --aurora-2: rgba(120, 128, 145, 0.09);
    --aurora-3: rgba(120, 128, 145, 0.07);

    --wall-1: #bfe3e0;
    --wall-2: #d9cdf2;
    --wall-3: #f3e6d6;
    --menubar: rgba(255, 255, 255, 0.46);
    --menubar-ink: rgba(0, 0, 0, 0.84);
    --bezel: #1a1a1d;
    --bezel-edge: #8d8d93;


    --lg-tint: rgba(255, 255, 255, 0.34);
    --lg-hi: rgba(255, 255, 255, 0.95);
    --lg-lo: rgba(255, 255, 255, 0.5);
    --lg-glow: rgba(255, 255, 255, 0.35);
    --lg-rim: rgba(255, 255, 255, 1);
    --lg-rim-2: rgba(255, 255, 255, 0.7);
    --lg-sheen: rgba(255, 255, 255, 0.4);
    --lg-shadow: 0 1px 1px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(30, 40, 60, 0.12);
    --win-tint: rgba(255, 255, 255, 0.46);
    --code-kw: #7a3fd1;
    --code-str: #137a6c;
    --code-fn: #b25d00;
    --wall-4: #a6dcd2;
    --wall-5: #f2b8cf;
    --key-top: #ffffff;
    --key-bot: #ececf0;
    --key-edge: #c9c9cf;
    --key-ink: #1d1d1f;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 1px 1px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.07), 0 24px 48px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.05), 0 20px 50px rgba(0, 0, 0, 0.12), 0 60px 120px rgba(0, 0, 0, 0.10);
  }
}

/* ── Reset and base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}
/* Soft aurora behind everything, so the glass has something to blur. */
body::before {
  content: "";
  position: fixed;
  inset: -20vh -20vw auto;
  height: 120vh;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40vw 32vh at 18% 18%, var(--aurora-1), transparent 70%),
    radial-gradient(36vw 30vh at 82% 12%, var(--aurora-2), transparent 70%),
    radial-gradient(44vw 34vh at 60% 70%, var(--aurora-3), transparent 70%);
  filter: blur(20px);
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent-soft); }
code, kbd { font-family: var(--font-mono); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 200;
  background: var(--btn-bg); color: var(--btn-ink);
  padding: 10px 16px; border-radius: 999px; font-weight: 600; font-size: 14px;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ── Blob marks ───────────────────────────────────────────────────── */
.blob { width: 28px; height: 28px; flex: none; overflow: visible; }
.blob.glow { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.28)); }

/* ── Glass ────────────────────────────────────────────────────────── */
.glass {
  background: var(--lg-tint);
  -webkit-backdrop-filter: blur(24px) saturate(190%) brightness(1.04);
  backdrop-filter: blur(24px) saturate(190%) brightness(1.04);
  border: 1px solid var(--hairline);
  box-shadow:
    inset 0 1px 0 var(--lg-hi),
    inset 0 -1px 1px var(--lg-lo),
    inset 0 0 22px var(--lg-glow),
    var(--shadow-md);
  border-radius: var(--r-xl);
}
.glass.lg { border-color: transparent; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-solid); }
}

/* ── Type ─────────────────────────────────────────────────────────── */
.eyebrow {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent);
  margin-bottom: 14px;
}
.h1 {
  font-family: var(--font-display);
  font-size: clamp(46px, 7.6vw, 104px);
  line-height: 1.0;
  font-weight: 700;
  letter-spacing: -0.048em;
}
.h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.2vw, 66px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.h3 {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -0.025em;
}
.lead {
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.45;
  letter-spacing: -0.017em;
  color: var(--text-2);
  text-wrap: pretty;
}
.muted { color: var(--text-2); }
/* The one coloured word on the page: the agents' own colours. */
.grad {
  color: var(--pink);
  background: linear-gradient(100deg, var(--pink), var(--tangerine) 45%, var(--sky));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* "hanging" hangs from its top left corner and swings when the page moves. */
/* The padding gives the clipped gradient room for the descenders (the
   title's line-height is 1); the margin takes the same room back. */
.dangle {
  display: inline-block; transform-origin: 6% 8%; will-change: transform;
  padding: 0.08em 0.06em 0.24em; margin: -0.08em -0.06em -0.24em;
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border-radius: 999px;
  font-size: 16px; font-weight: 600; letter-spacing: -0.015em;
  white-space: nowrap;
  transition: transform 0.35s var(--ease-spring), box-shadow 0.3s var(--ease-out), background-color 0.2s;
}
.btn:hover { transform: translateY(-1px) scale(1.015); }
.btn:active { transform: scale(0.97); transition-duration: 0.12s; }
.btn-primary { background: var(--btn-bg); color: var(--btn-ink); box-shadow: var(--shadow-sm); }
.btn-glass {
  --lg-blur: 14px;
  background: var(--lg-tint);
  -webkit-backdrop-filter: blur(14px) saturate(190%) brightness(1.06);
  backdrop-filter: blur(14px) saturate(190%) brightness(1.06);
  box-shadow: inset 0 1px 0 var(--lg-hi), inset 0 -1px 1px var(--lg-lo), var(--shadow-sm);
  color: var(--text);
}
.btn svg { width: 18px; height: 18px; }
/* A platform that is not out yet: reads as a button, does nothing. */
.btn-soon { cursor: default; color: var(--text-2); }
.btn-soon:hover, .btn-soon:active { transform: none; }
.soon-pill {
  font-size: 0.72em; font-weight: 600; letter-spacing: 0.02em;
  padding: 2px 8px; border-radius: 999px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* The copyable install command */
.cmd {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 0 8px 0 20px;
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 15.5px; font-weight: 500; letter-spacing: 0;
  background: var(--btn-bg); color: var(--btn-ink);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease-spring);
}
.cmd:hover { transform: translateY(-1px) scale(1.015); }
.cmd:active { transform: scale(0.97); transition-duration: 0.12s; }
.cmd .prompt { opacity: 0.45; user-select: none; }
.cmd .copy {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px; border-radius: 999px;
  font-family: var(--font); font-size: 13px; font-weight: 600;
  background: color-mix(in srgb, var(--btn-ink) 12%, transparent);
}
.cmd .copy svg { width: 14px; height: 14px; }
.cmd.copied .copy { background: var(--green); color: #fff; }

/* ── Nav ──────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 46%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(200%) brightness(1.04);
  backdrop-filter: blur(22px) saturate(200%) brightness(1.04);
  box-shadow: inset 0 -1px 0 var(--hairline), inset 0 1px 0 var(--lg-hi);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 18px; letter-spacing: -0.03em; }
.brand .blob { width: 24px; height: 24px; }
.nav-links { display: flex; align-items: center; gap: 26px; font-size: 14px; color: var(--text-2); }
.nav-links a { transition: color 0.2s; }
.nav-links a:hover { color: var(--text); }
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav .btn { min-height: 34px; padding: 0 14px; font-size: 14px; gap: 7px; }
.nav .btn svg { width: 15px; height: 15px; }
.stars { font-variant-numeric: tabular-nums; color: var(--text-2); font-weight: 500; }
.stars:empty { display: none; }
@media (max-width: 900px) { .nav-links { display: none; } }

/* ── Sections ─────────────────────────────────────────────────────── */
section { position: relative; }
.section { padding: clamp(88px, 12vw, 160px) 0; }
.section-head { max-width: 800px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .lead { margin-top: 20px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.split.flip > :first-child { order: 2; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split.flip > :first-child { order: 0; }
}
.points { list-style: none; margin-top: 32px; display: grid; gap: 18px; }
.points li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; color: var(--text-2); }
.points li strong { color: var(--text); font-weight: 600; }
.points .tick {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  margin-top: 1px;
}
.points .tick svg { width: 13px; height: 13px; }

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero { padding: 0 0 0; text-align: center; }
/* The opening wallpaper: a full-screen layer, the same wallpaper as the
   MacBook's display, that the script shrinks onto that display as the
   page scrolls (--w on .hero, 0 at the top to 1 when the MacBook pins).
   The copy sits on it in white, then fades as it scrolls off it; the
   MacBook's body and what is on its screen fade in as it arrives. */
.hero-wall { display: none; }
.scene-live .hero { --w: 0; position: relative; }
.scene-live .hero-wall {
  display: block; position: fixed; z-index: 0; inset: 0;
  transform-origin: 0 0; pointer-events: none; will-change: transform, clip-path;
}
.scene-live .hero-copy {
  position: relative; z-index: 2;
  --text: #fff; --text-2: rgba(255, 255, 255, 0.84); --text-3: rgba(255, 255, 255, 0.66);
  --hairline-2: rgba(255, 255, 255, 0.4);
  color: var(--text);
  opacity: calc(1 - clamp(0, (var(--w) - 0.3) * 3.2, 1));
}
.scene-live .hero .scene { z-index: 1; }
.scene-live .hero .mac-lid { background: none; box-shadow: none; }
.scene-live .hero .mac-lid::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: var(--mac-lid); box-shadow: var(--mac-lid-shadow);
  opacity: clamp(0, (var(--w) - 0.55) * 2.4, 1);
}
.scene-live .hero :is(.mac-base, .scene-steps, .sound-toggle) { opacity: clamp(0, (var(--w) - 0.7) * 3.4, 1); }
.scene-live .hero .mac-screen > :not(.wall) { opacity: clamp(0, (var(--w) - 0.6) * 2.6, 1); }
/* The display's own wallpaper takes over the instant the shrinking one
   lands on it; until then it would show as a second, smaller wallpaper. */
.scene-live .hero .mac-screen { background: none; }
.scene-live .hero .mac-screen > .wall { opacity: clamp(0, (var(--w) - 0.999) * 1000, 1); }
/* The brow: the gang piled on a little notch, above the title. */
/* It sits flush under the menu bar, so it reads as the notch of the page. */
.hero-brow { display: flex; justify-content: center; height: 62px; margin-bottom: clamp(28px, 4.4vw, 56px); }
.hero .h1 { max-width: 13ch; margin: 0 auto; }
.hero .lead { max-width: 660px; margin: 26px auto 0; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 40px; }
.cta-note { margin-top: 18px; font-size: 14px; color: var(--text-3); }
.cta-note a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--hairline-2); text-underline-offset: 3px; }
.cta-note a:hover { color: var(--text); }

/* ── Liquid glass ─────────────────────────────────────────────────── */
/* One material for every floating surface. A tinted, saturated blur; a
   specular rim that is bright where light would catch the top-left and
   bottom-right edges; a soft sheen across the top; and, where the browser
   supports SVG filters on the backdrop, real edge refraction (html.lg-refract,
   set by the page script). */
.lg {
  position: relative;
  isolation: isolate;
  background: var(--lg-tint);
  -webkit-backdrop-filter: blur(var(--lg-blur, 18px)) saturate(var(--lg-sat, 190%)) brightness(var(--lg-bright, 1.04));
  backdrop-filter: blur(var(--lg-blur, 18px)) saturate(var(--lg-sat, 190%)) brightness(var(--lg-bright, 1.04));
  box-shadow:
    inset 0 1px 0 var(--lg-hi),
    inset 0 -1px 1px var(--lg-lo),
    inset 0 0 18px var(--lg-glow),
    var(--lg-shadow);
}
.lg::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, var(--lg-rim) 0%, transparent 32%, transparent 62%, var(--lg-rim-2) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.lg::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, var(--lg-sheen) 0%, transparent 46%);
}
.lg-refract .lg.lg-lens {
  -webkit-backdrop-filter: url(#lg-refract) blur(var(--lg-blur, 18px)) saturate(var(--lg-sat, 190%));
  backdrop-filter: url(#lg-refract) blur(var(--lg-blur, 18px)) saturate(var(--lg-sat, 190%));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lg { background: var(--glass-solid); }
}

/* ── The scroll scene ─────────────────────────────────────────────── */
/* With JavaScript and motion allowed (html.scene-live) the scene is tall and
   its inner block pins, and the script drives three 0..1 values from the
   scroll position: --n (agents pile onto the notch), --c (the pointer goes
   up to it) and --o (the inbox pulls down). Everywhere else they stay at 1,
   so the inbox is simply shown open. */
.scene { --n: 1; --c: 1; --o: 1; --scene-rest: 120px; position: relative; margin-top: clamp(44px, 6vw, 72px); }
.scene-live .scene { height: 260vh; }
.scene-pin { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 0 var(--gutter); }
.scene-live .scene-pin { position: sticky; top: 56px; height: calc(100vh - 56px); justify-content: center; }

/* ── A MacBook ────────────────────────────────────────────────────── */
/* Lid, display, notch cut into the bezel, and the base seen edge-on. */
.mac { position: relative; width: min(1120px, 100%); }
/* While pinned, the laptop must fit under the menu bar: sized from the
   height left over, or its notch slides behind the bar. */
.scene-live .mac { width: min(1120px, 100%, calc((100vh - 56px - var(--scene-rest)) * 1.52)); }
.mac-lid {
  position: relative;
  padding: 12px 12px 14px;
  border-radius: 26px;
  --mac-lid: linear-gradient(180deg, #2b2b30, #141417 8%, #0d0d10);
  --mac-lid-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 40px 90px rgba(0, 0, 0, 0.5),
    0 12px 28px rgba(0, 0, 0, 0.35);
  background: var(--mac-lid);
  box-shadow: var(--mac-lid-shadow);
  isolation: isolate;
}
.mac-screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  background: #0b1020;
  isolation: isolate;
}
.mac-base {
  position: relative;
  height: 16px;
  margin: 0 -28px;
  border-radius: 0 0 18px 18px / 0 0 14px 14px;
  background: linear-gradient(180deg, #46464c, #2a2a2f 55%, #1a1a1e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 24px 60px rgba(0, 0, 0, 0.45);
}
.mac-base span {
  position: absolute; left: 50%; top: 0; width: 16%; height: 7px;
  transform: translateX(-50%);
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #121215, #26262b);
}

/* A dusk sky for the wallpaper: smooth bands, no blur. */
.wall {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 70% at 50% 108%, #f2a96d 0%, #d7738a 22%, rgba(120, 70, 140, 0) 55%),
    radial-gradient(90% 60% at 20% 0%, #1c3f6f 0%, rgba(28, 63, 111, 0) 60%),
    linear-gradient(180deg, #0f1b36 0%, #22365f 35%, #5a4a7a 62%, #c47c7c 82%, #f0b07a 100%);
}
.wall::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 40% at 50% 100%, rgba(255, 220, 180, 0.35), transparent 70%);
}

.menubar {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  height: 30px; padding: 0 16px;
  font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, 0.92);
  background: rgba(16, 18, 30, 0.38);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.menubar-left, .menubar-right { display: flex; align-items: center; gap: 16px; }
.menubar-left b { font-weight: 700; margin-left: -4px; }
.apple { width: 13px; height: 15px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 170'><path d='M150 130c-3 8-6 15-11 22-7 10-14 18-25 18-10 0-13-6-25-6s-15 6-25 6c-11 0-20-10-27-20C22 128 12 100 12 73c0-32 21-49 42-49 11 0 20 7 27 7 6 0 17-9 30-8 5 0 20 2 30 16-26 15-22 50 4 60zM112 7c2 9-3 19-9 26-7 7-16 12-25 11-1-9 3-18 9-25 7-7 17-12 25-12z'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 170'><path d='M150 130c-3 8-6 15-11 22-7 10-14 18-25 18-10 0-13-6-25-6s-15 6-25 6c-11 0-20-10-27-20C22 128 12 100 12 73c0-32 21-49 42-49 11 0 20 7 27 7 6 0 17-9 30-8 5 0 20 2 30 16-26 15-22 50 4 60zM112 7c2 9-3 19-9 26-7 7-16 12-25 11-1-9 3-18 9-25 7-7 17-12 25-12z'/></svg>") center / contain no-repeat; }
.menubar .ic { width: 15px; height: 15px; }
.menubar .batt { width: 23px; height: 11px; border: 1.2px solid currentColor; border-radius: 3.5px; position: relative; padding: 1.5px; opacity: 0.95; }
.menubar .batt::before { content: ""; display: block; height: 100%; width: 74%; background: currentColor; border-radius: 1.5px; }
.menubar .batt::after { content: ""; position: absolute; right: -3.5px; top: 3px; width: 2px; height: 4px; background: currentColor; border-radius: 0 1px 1px 0; }

/* Two terminals, the agents at work. */
.term {
  position: absolute; z-index: 1;
  width: 46%;
  border-radius: 12px;
  background: rgba(14, 14, 18, 0.86);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 60px rgba(0, 0, 0, 0.45);
  text-align: left;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.75; color: rgba(255, 255, 255, 0.78);
}
.t1 { left: 5%; top: 13%; }
.t2 { right: 6%; top: 38%; }
.term-bar { position: relative; display: flex; align-items: center; height: 30px; padding: 0 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.term-bar i,
.appwin-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; margin-right: 7px; }
.term-bar i:nth-child(2),
.appwin-bar i:nth-child(2) { background: #febc2e; }
.term-bar i:nth-child(3),
.appwin-bar i:nth-child(3) { background: #28c840; }
.term-bar span { position: absolute; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; font-family: var(--font); font-size: 11.5px; color: rgba(255, 255, 255, 0.6); white-space: nowrap; }
.term-bar .blob { width: 15px; height: 15px; }
.term-body { padding: 24px 16px 14px; }
.term-body p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.term-body .cmd-line { color: #fff; font-weight: 600; }
.term-body .dim { color: rgba(255, 255, 255, 0.5); }
.term-body .warn { color: #f4a261; }
.term-body .prompt-box { margin-top: 10px; padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.5); }

/* The dock: Terminal and the gawkbot app. The agents live in the notch, not here. */
.dock {
  position: absolute; z-index: 1; left: 50%; bottom: 10px; transform: translateX(-50%);
  display: flex; gap: 8px; padding: 7px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 10px 30px rgba(0, 0, 0, 0.25);
}
.dock-app { position: relative; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12), 0 2px 6px rgba(0, 0, 0, 0.25); }
/* The gawkbot app: its icon is the brand orb on the dusk tile (build/appicon.png). */
.dock-app.dk-gawk { background: linear-gradient(180deg, #1d2340, #0b0e1c); overflow: hidden; }
.dock-app.dk-gawk::after { content: ""; position: absolute; inset: 40% -20% -30%; background: radial-gradient(circle at 50% 100%, rgba(69, 207, 160, 0.4), rgba(69, 207, 160, 0) 60%); }
.dock-app.dk-gawk .blob { position: relative; z-index: 1; width: 34px; height: 34px; margin-top: 1px; }
.dock-app.dk-term { background: linear-gradient(180deg, #2a2a30, #0f0f12); }
.dock-app.dk-term::before { content: ">_"; font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: #fff; }
.dock-app .dot { position: absolute; bottom: -6px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); }
.dock-app .dot.on { background: rgba(255, 255, 255, 0.9); }

/* The pointer travels from the terminal up to the notch. */
.cursor {
  position: absolute; z-index: 5; width: 20px; height: 20px;
  left: calc(74% - (74% - 50%) * var(--c) + 8px * var(--c));
  top: calc(70% - (70% - 2%) * var(--c));
  opacity: calc(var(--n) * 4 - 1);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}
.cursor svg { width: 100%; height: 100%; fill: #000; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }
.scene:not(.is-live) .cursor { display: none; }

/* ── The notch ────────────────────────────────────────────────────── */
/* The camera housing is part of the bezel: the same black, cut into the
   display. The ears extend it sideways; the inbox hangs from it in glass. */
.island {
  --strip-h: 30px;
  --w-rest: 820px;
  --w-note: 480px;
  --w-open: 540px;
  position: absolute; z-index: 4; top: 0; left: 50%;
  /* Widest at rest, carrying the announcement; narrower once the agents
     arrive and the announcement has gone; wider again for the inbox. */
  width: calc(var(--w-rest) + (var(--w-note) - var(--w-rest)) * var(--n) + (var(--w-open) - var(--w-note)) * var(--o));
  max-width: calc(100% - 24px);
  transform: translateX(-50%);
  color: var(--notch-ink);
  border-radius: 0 0 calc(16px + 10px * var(--o)) calc(16px + 10px * var(--o));
  background:
    linear-gradient(180deg, #0d0d10 0, #0d0d10 var(--strip-h), rgba(18, 18, 24, calc(0.62 + 0.2 * (1 - var(--o)))) calc(var(--strip-h) + 60px));
  -webkit-backdrop-filter: blur(36px) saturate(190%);
  backdrop-filter: blur(36px) saturate(190%);
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, calc(0.12 * var(--o))),
    inset 1px 0 0 rgba(255, 255, 255, calc(0.06 * var(--o))),
    inset -1px 0 0 rgba(255, 255, 255, calc(0.06 * var(--o))),
    0 calc(30px * var(--o)) calc(70px * var(--o)) rgba(0, 0, 0, calc(0.55 * var(--o)));
}
/* Concave shoulders where the housing meets the display edge. */
.island::before {
  content: ""; position: absolute; top: 0; left: -12px; right: -12px; height: 12px; pointer-events: none;
  background:
    radial-gradient(circle at 0 100%, transparent 11.5px, #0d0d10 12px) left / 12px 12px no-repeat,
    radial-gradient(circle at 100% 100%, transparent 11.5px, #0d0d10 12px) right / 12px 12px no-repeat;
}
.strip { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; height: var(--strip-h); padding: 0 12px; }
.notch-hw { width: 150px; height: var(--strip-h); display: grid; place-items: center; }
.notch-hw::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2b3550, #07080b 70%); box-shadow: 0 0 0 1.5px #16161a; }
.ear { display: flex; align-items: center; gap: 7px; min-width: 0; height: 100%; overflow: hidden; }
.ear-r { justify-content: flex-end; }
.ear .blob { width: 22px; height: 22px; flex: none; }
/* The announcement lives in the left ear until the agents arrive. */
.announce {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; color: var(--notch-ink);
  opacity: calc(1 - var(--n) * 1.4);
  transform: translateX(calc(var(--n) * -8px));
}
.announce b { font-size: 10.5px; font-weight: 700; color: var(--accent-ink); background: var(--accent); padding: 2px 7px; border-radius: 999px; }
.ear-gang { display: flex; align-items: center; }
.ear-gang .blob { transform: translateY(calc((1 - var(--n)) * 30px)); }
.ear-gang .g2 { margin-left: -7px; transform: translateY(calc((1 - var(--n)) * 38px)); }
.count {
  margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; color: #fff; background: var(--red);
  transform: scale(var(--n));
}

/* The inbox. Its height follows --o; its rows arrive one after another. */
.drop { overflow: hidden; }
.scene-live .drop { height: calc(var(--o) * var(--ph, 380px)); }
.drop-inner { padding: 8px 12px 12px; text-align: left; }
.stg {
  opacity: clamp(0, calc(var(--o) * 5 - var(--i) * 0.6 - 1.2), 1);
  transform: translateY(calc(clamp(0, 1 - (var(--o) * 5 - var(--i) * 0.6 - 1.2), 1) * -8px));
}
.nhead { display: flex; align-items: center; gap: 10px; padding: 6px 4px 12px; }
.nhead > .blob { width: 30px; height: 30px; }
.nhead-text { flex: 1; min-width: 0; font-size: 15px; font-weight: 650; letter-spacing: -0.015em; }
.nhead-text small { display: block; font-size: 11.5px; font-weight: 500; color: var(--notch-ink-3); }
.nq {
  display: flex; gap: 10px; padding: 12px; margin-bottom: 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.nq.sel { background: rgba(255, 255, 255, 0.09); box-shadow: inset 0 0 0 1.5px rgba(123, 227, 211, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.nq > .blob { width: 28px; height: 28px; margin-top: 1px; flex: none; }
.nq-body { min-width: 0; flex: 1; }
.nq-from { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 13px; }
.nq-from b { font-weight: 650; }
.ntag { font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; color: var(--notch-ink-2); background: rgba(255, 255, 255, 0.1); }
.nq-text { font-size: 13.5px; line-height: 1.4; margin: 4px 0 0; color: var(--notch-ink); letter-spacing: -0.01em; }
.nq-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.nbtn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.nbtn.quiet { background: transparent; box-shadow: none; color: var(--notch-ink-3); text-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nbtn.quiet::before { content: none; }
.nhead .nbtn { margin-left: auto; }
.drop kbd {
  font-family: var(--font); font-size: 10.5px; font-weight: 700;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 5px;
  display: inline-grid; place-items: center;
  background: rgba(255, 255, 255, 0.14); color: inherit;
}
.nask { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 38px; padding: 0 8px 0 14px; margin-top: 4px; border-radius: 999px; font-size: 13px; color: var(--notch-ink-3); background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.nask-keys { display: flex; gap: 4px; }
.nkeys { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 13px; margin-top: 10px; font-size: 11px; color: var(--notch-ink-3); }
.nkeys span { display: inline-flex; align-items: center; gap: 4px; }

/* The three beats, under the Mac. The current one lights up. */
.scene-steps { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.scene-steps li { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 6px; border-radius: 999px; font-size: 13.5px; color: var(--text-2); background: var(--fill-2); transition: color 0.3s, background-color 0.3s; }
.scene-steps b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: var(--text); background: var(--fill); }
.scene[data-step="1"] [data-s="1"], .scene[data-step="2"] [data-s="2"], .scene[data-step="3"] [data-s="3"] { color: var(--text); background: var(--accent-soft); }
.scene[data-step="1"] [data-s="1"] b, .scene[data-step="2"] [data-s="2"] b, .scene[data-step="3"] [data-s="3"] b { background: var(--accent); color: var(--accent-ink); }

@media (max-width: 760px) {
  .mac-lid { padding: 7px 7px 9px; border-radius: 18px; }
  .mac-screen { border-radius: 10px; aspect-ratio: 4 / 3; }
  .mac-base { margin: 0 -12px; height: 10px; }
  .menubar { padding: 0 10px; height: 26px; font-size: 11px; }
  .menubar-left span, .menubar .ic { display: none; }
  .term { width: 62%; font-size: 10px; }
  .t1 { left: 4%; top: 12%; }
  .t2 { right: 4%; top: 46%; }
  .term-body { padding: 14px 10px 8px; }
  .dock { display: none; }
  .island { --w-rest: 100%; --w-note: 100%; --w-open: 100%; --strip-h: 24px; }
  /* A phone has no room for the whole inbox: the header and the selected
     question tell the story. */
  .drop .nq:not(.sel), .nask, .nbtn.quiet { display: none; }
  .drop { zoom: 0.82; }
  .notch-hw { width: 80px; }
  .announce { font-size: 11px; }
  .ear .blob { width: 18px; height: 18px; }
  .nkeys { display: none; }
  .drop-inner { padding: 6px 8px 8px; }
}

/* ── The iPhone (the hero on a phone) ────────────────────────────────
   Shown instead of the MacBook at phone widths. --n puts the count in the
   Dynamic Island as a Live Activity, --c drops a notification in under
   it, and --o opens the island with the question while the notification
   settles into the lock screen's list. Without the script all three are
   1: the island open, the notification in the list. */
/* Not shown. A phone gets the same hero as a desktop: the MacBook and the
   notch interaction, sized down by the rules above. This iPhone used to
   replace it at phone widths. */
.iph { display: none; }
.on-phone { display: none; }
.iph-screen {
  position: relative; height: 100%; overflow: hidden;
  border-radius: 40px; color: var(--notch-ink);
  text-align: left;
}
/* The status glyphs make way when the island opens over them. */
.iph-status { position: relative; display: flex; justify-content: flex-end; padding: 15px 18px 0; height: 40px; font-size: 13px; opacity: calc(1 - var(--o) * 3); }
.iph-status .glyphs { display: flex; gap: 5px; align-items: center; }
.iph-status .bars { display: flex; gap: 1.5px; align-items: flex-end; height: 10px; }
.iph-status .bars i { width: 3px; background: currentColor; border-radius: 1px; }
.iph-status .bars i:nth-child(1) { height: 4px; } .iph-status .bars i:nth-child(2) { height: 6px; }
.iph-status .bars i:nth-child(3) { height: 8px; } .iph-status .bars i:nth-child(4) { height: 10px; }
.iph-status .batt { width: 22px; height: 11px; border: 1.2px solid currentColor; border-radius: 3.5px; padding: 1.5px; }
.iph-status .batt::before { content: ""; display: block; width: 80%; height: 100%; background: currentColor; border-radius: 1.5px; }
.iph-clock {
  position: relative; margin-top: 14px; text-align: center;
  font-family: var(--font-display); font-size: 74px; font-weight: 650;
  letter-spacing: -0.04em; line-height: 1;
}
.iph-clock small { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }

/* The Dynamic Island: a 86x25 pill at rest, a wider pill with the
   Live Activity's two ends, then open as a rounded card. */
.dyn {
  position: absolute; z-index: 3; top: 9px; left: 50%;
  width: calc(86px + var(--n) * 40px + var(--o) * 110px);
  height: calc(25px + var(--o) * 128px);
  border-radius: calc(12.5px + var(--o) * 21.5px);
  transform: translateX(-50%);
  background: var(--notch); overflow: hidden;
  box-shadow: 0 calc(var(--o) * 12px) calc(var(--o) * 30px) rgba(0, 0, 0, 0.45);
}
.dyn .blob { flex: none; }
.dyn-compact {
  position: absolute; inset: 0 8px; height: 25px;
  display: flex; align-items: center; justify-content: space-between;
  opacity: calc(var(--n) - var(--o) * 3);
}
.dyn-compact > .blob { width: 17px; height: 17px; }
.dyn-right { display: flex; align-items: center; gap: 4px; }
.dyn-gang { display: flex; }
.dyn-gang .blob { width: 15px; height: 15px; }
.dyn-gang .blob + .blob { margin-left: -5px; }
.dyn .count {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  display: inline-grid; place-items: center;
  font-size: 10px; font-weight: 700; color: var(--accent-ink); background: var(--accent);
}
.dyn-open {
  position: absolute; inset: 0; padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 8px;
  opacity: calc(var(--o) * 2 - 1);
}
.dyn-head { display: flex; align-items: center; gap: 8px; }
.dyn-head .blob { width: 26px; height: 26px; }
.dyn-head div { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.2; }
.dyn-head b { display: block; letter-spacing: -0.01em; }
.dyn-head small { font-size: 10.5px; color: var(--notch-ink-2); }
.dyn-open p { margin: 0; font-size: 12.5px; line-height: 1.32; color: var(--notch-ink); letter-spacing: -0.01em; }
.dyn-acts { display: flex; gap: 6px; margin-top: auto; }
.dyn-acts span {
  flex: 1; height: 28px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 650;
}

/* The notification: drops in under the island, then settles into the
   lock screen's list as the island opens. */
.iph-note {
  position: absolute; z-index: 2; left: 8px; right: 8px;
  top: calc(44px + var(--o) * 138px);
  transform: translateY(calc((1 - var(--c)) * -26px)) scale(calc(0.94 + var(--c) * 0.06));
  opacity: var(--c);
  display: flex; gap: 9px; padding: 10px 11px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--notch) 62%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  box-shadow: inset 0 0 0 0.5px var(--lg-rim-2), var(--shadow-sm);
}
.iph-icon {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #1d2340, #0b0e1c);
}
.iph-icon .blob { width: 27px; height: 27px; }
.iph-note-body { min-width: 0; font-size: 12.5px; line-height: 1.3; letter-spacing: -0.01em; }
.iph-note-top { display: flex; justify-content: space-between; font-size: 11px; color: var(--notch-ink-2); text-transform: uppercase; letter-spacing: 0.02em; }
.iph-note-top b { font-weight: 600; }
.iph-note-body p { margin: 0; color: var(--notch-ink); }

.iph-corner {
  position: absolute; bottom: 34px; width: 42px; height: 42px; border-radius: 50%;
  background: var(--lg-tint);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.iph-corner.l { left: 34px; }
.iph-corner.r { right: 34px; }
.iph-home { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 104px; height: 4px; border-radius: 999px; background: var(--notch-ink); }

/* Question cards, chips and key hints shared by the feature sections. */
.q-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.q-head .blob { width: 26px; height: 26px; }
.q-who { font-size: 13.5px; font-weight: 650; letter-spacing: -0.015em; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.tag {
  font-size: 11px; font-weight: 600; letter-spacing: 0;
  padding: 1px 7px; border-radius: 999px;
  color: var(--notch-ink-2); background: rgba(255, 255, 255, 0.08);
}
.tag.cloud { color: #9fc6ff; background: rgba(10, 132, 255, 0.18); }
.q-text { font-size: 14px; line-height: 1.38; color: var(--notch-ink); margin-bottom: 10px; letter-spacing: -0.012em; }
.q-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.wave { display: flex; align-items: center; gap: 2.5px; height: 20px; flex: none; }
.wave i { display: block; width: 3px; height: 30%; border-radius: 2px; background: currentColor; animation: wave 1.1s var(--ease-out) infinite; }
.wave i:nth-child(2) { animation-delay: 0.1s; } .wave i:nth-child(3) { animation-delay: 0.25s; }
.wave i:nth-child(4) { animation-delay: 0.05s; } .wave i:nth-child(5) { animation-delay: 0.32s; }
.wave i:nth-child(6) { animation-delay: 0.18s; } .wave i:nth-child(7) { animation-delay: 0.4s; }
@keyframes wave { 0%, 100% { height: 25%; } 40% { height: 95%; } 70% { height: 45%; } }
.send { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.14); color: var(--notch-ink); }
.send svg { width: 15px; height: 15px; }
.hints { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 11.5px; color: var(--notch-ink-3); }
.hint { display: inline-flex; align-items: center; gap: 5px; }
.hint kbd { background: rgba(255, 255, 255, 0.1); color: var(--notch-ink-2); }
.chip-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
}
.chip-btn kbd, .hint kbd {
  font-family: var(--font); font-size: 10.5px; font-weight: 700;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 5px;
  display: inline-grid; place-items: center;
  background: rgba(0, 0, 0, 0.18); color: inherit;
}

/* ── Feature visuals ──────────────────────────────────────────────── */
.stack { position: relative; display: grid; gap: 14px; }
.card { padding: 20px; border-radius: var(--r-lg); }
.card .q-head .blob { width: 30px; height: 30px; }
.card .q-who { font-size: 15px; }
.card .q-text { color: var(--text); font-size: 16px; }
.kind { font-size: 12px; font-weight: 600; color: var(--text-3); margin-left: auto; align-self: flex-start; }
.card .tag { color: var(--text-2); background: var(--fill-2); }
.card .tag.cloud { color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, transparent); }
.card .chip-btn { height: 34px; padding: 0 14px; font-size: 14px; }
.card .reply {
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 6px 0 14px;
  border-radius: 999px; background: var(--fill-2); border: 1px solid var(--hairline);
  font-size: 14.5px; color: var(--text-2);
}
.card .reply > span:first-child { flex: 1; }
.card .reply .send { width: 30px; height: 30px; }
.stack .card:nth-child(2) { margin-left: 28px; }
.stack .card:nth-child(3) { margin-left: 56px; }
@media (max-width: 560px) { .stack .card:nth-child(n) { margin-left: 0; } }

.stack::before, .phone-wrap::before, .keys::before, .fun::before, #voice .split::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 8% 4%; border-radius: 50%;
  background:
    radial-gradient(closest-side at 30% 40%, var(--aurora-1), transparent),
    radial-gradient(closest-side at 70% 60%, var(--aurora-2), transparent);
  filter: blur(36px);
}
.phone-wrap, .keys, .fun, #voice .split { position: relative; }
#voice .split::before { inset: 0 52% 0 0; }
@media (max-width: 900px) { #voice .split::before { inset: 50% 0 0 0; } }

/* Voice */
.voice-card { padding: clamp(24px, 4vw, 40px); text-align: center; }
.orb {
  width: 132px; height: 132px; margin: 8px auto 28px; border-radius: 50%;
  position: relative; display: grid; place-items: center; color: var(--accent-ink);
  background: radial-gradient(circle at 34% 26%, color-mix(in srgb, var(--accent) 100%, #fff 0%), color-mix(in srgb, var(--accent) 82%, transparent) 55%, color-mix(in srgb, var(--accent) 62%, transparent) 85%);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -10px 24px rgba(0, 0, 0, 0.18), var(--shadow-md);
}
.orb svg { width: 46px; height: 46px; }
.orb::before, .orb::after {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
  animation: ring 2.6s var(--ease-out) infinite;
}
.orb::after { animation-delay: 1.3s; }
@keyframes ring { from { transform: scale(0.86); opacity: 0.9; } to { transform: scale(1.35); opacity: 0; } }
.voice-card .wave { justify-content: center; height: 36px; gap: 4px; margin-bottom: 22px; }
.voice-card .wave i { width: 4px; background: var(--accent); }
.transcript { font-size: clamp(19px, 2.2vw, 24px); line-height: 1.35; letter-spacing: -0.022em; font-weight: 600; max-width: 30ch; margin: 0 auto; }
.transcript .live { color: var(--text-3); }
.voice-foot { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: 14px; color: var(--text-2); }
.voice-foot .hint kbd, .keys kbd, kbd.k {
  font-family: var(--font); font-weight: 600;
  display: inline-grid; place-items: center;
  min-width: 26px; height: 26px; padding: 0 7px;
  border-radius: 7px; font-size: 13px;
  color: var(--key-ink);
  background: linear-gradient(180deg, var(--key-top), var(--key-bot));
  border: 1px solid var(--key-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 1.5px 0 var(--key-edge);
}

/* iPhone */
.phone-wrap { display: grid; place-items: center; }
.phone {
  position: relative;
  width: 300px; max-width: 100%; aspect-ratio: 300 / 620;
  padding: 11px; border-radius: 52px;
  background: linear-gradient(145deg, #4a4a50, #1a1a1d 30%, #2a2a2f 70%, #5a5a60);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.phone-screen {
  position: relative; height: 100%; overflow: hidden;
  border-radius: 42px;
  background: var(--bg-2);
  display: flex; flex-direction: column;
  text-align: left;
}
.island-ip { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 92px; height: 27px; border-radius: 999px; background: #000; z-index: 2; }
.status { display: flex; justify-content: space-between; align-items: center; padding: 15px 26px 0 30px; height: 46px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.status .glyphs { display: flex; gap: 5px; align-items: center; }
.status .bars { display: flex; gap: 1.5px; align-items: flex-end; height: 10px; }
.status .bars i { width: 3px; background: currentColor; border-radius: 1px; }
.status .bars i:nth-child(1) { height: 4px; } .status .bars i:nth-child(2) { height: 6px; }
.status .bars i:nth-child(3) { height: 8px; } .status .bars i:nth-child(4) { height: 10px; }
.status .batt { width: 22px; height: 11px; border: 1.2px solid currentColor; border-radius: 3.5px; padding: 1.5px; opacity: 0.9; }
.status .batt::before { content: ""; display: block; width: 80%; height: 100%; background: currentColor; border-radius: 1.5px; }
.ip-title { padding: 10px 18px 8px; font-size: 30px; font-weight: 750; letter-spacing: -0.035em; }
.ip-sub { padding: 0 18px 10px; font-size: 13px; color: var(--text-3); margin-top: -6px; }
.ip-list { list-style: none; padding: 0 10px; }
.ip-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 8px 8px; border-radius: 14px; }
.ip-row + .ip-row { border-top: 1px solid var(--hairline); border-radius: 0; }
.ip-row .blob { width: 34px; height: 34px; }
.ip-name { font-size: 14px; font-weight: 650; letter-spacing: -0.015em; display: flex; gap: 6px; align-items: center; }
.ip-prev { font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-time { font-size: 11.5px; color: var(--text-3); align-self: start; padding-top: 3px; text-align: right; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); display: inline-block; }
.ip-card {
  margin: 10px 12px 0; padding: 14px; border-radius: 20px;
  background: var(--glass-2);
  border: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-sm);
}
.ip-card .q-head { margin-bottom: 6px; }
.ip-card .q-head .blob { width: 26px; height: 26px; }
.ip-card .q-who { font-size: 13.5px; }
.ip-card .tag { color: var(--text-2); background: var(--fill-2); }
.ip-card .tag.cloud { color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, transparent); }
.ip-card .q-text { font-size: 14px; color: var(--text); margin-bottom: 10px; }
.ip-card .q-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ip-card .chip-btn { justify-content: center; height: 34px; font-size: 13.5px; }
.ip-bottom { margin-top: auto; padding: 12px 16px 26px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ip-mic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; }
.ip-mic svg { width: 26px; height: 26px; }
.ip-hold { font-size: 12px; color: var(--text-3); }
.ip-home { width: 120px; height: 5px; border-radius: 3px; background: var(--text); opacity: 0.85; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); }
.fineprint { margin-top: 26px; font-size: 14px; color: var(--text-3); }
.fineprint code { font-size: 13px; color: var(--text-2); background: var(--fill-2); padding: 2px 6px; border-radius: 6px; }

/* Keyboard grid */
.keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.key-tile { padding: 24px 22px 22px; border-radius: var(--r-lg); min-height: 168px; display: flex; flex-direction: column; }
.key-tile.wide { grid-column: span 2; }
.key-tile .caps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: auto; padding-bottom: 22px; color: var(--text-3); font-size: 14px; }
.keys kbd { min-width: 44px; height: 44px; font-size: 19px; border-radius: 11px; padding: 0 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 2.5px 0 var(--key-edge), 0 6px 14px rgba(0, 0, 0, 0.12); transition: transform 0.15s var(--ease-out), box-shadow 0.15s; }
.key-tile:hover kbd { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 0.5px 0 var(--key-edge), 0 2px 6px rgba(0, 0, 0, 0.12); }
.keys kbd.long { min-width: 96px; }
.key-tile h3 { font-size: 18px; font-weight: 650; letter-spacing: -0.02em; margin-bottom: 4px; }
.key-tile p { font-size: 15px; color: var(--text-2); line-height: 1.4; }
@media (max-width: 960px) { .keys { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .keys { grid-template-columns: 1fr; } .key-tile.wide { grid-column: auto; } .key-tile { min-height: 0; } }

/* Agent chips */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; margin: 0 auto; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 18px 0 14px; border-radius: 999px;
  font-size: 16px; font-weight: 600; letter-spacing: -0.015em;
  transition: transform 0.4s var(--ease-spring);
}
.chip:hover { transform: translateY(-2px); }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent); }
.chips-note { text-align: center; margin-top: 28px; font-size: 15px; color: var(--text-3); }

/* Fun */
.fun { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fun-card { padding: 28px; border-radius: var(--r-xl); overflow: hidden; }
.fun-card h3 { margin-bottom: 8px; }
.fun-card p { color: var(--text-2); font-size: 16px; }
.stage {
  position: relative; height: 150px; margin: -28px -28px 24px;
  display: flex; justify-content: center;
  background: radial-gradient(80% 120% at 50% 0%, var(--fill-2), transparent 70%);
}
.mini-notch { position: relative; width: 180px; height: 30px; border-radius: 0 0 16px 16px; }
.mini-notch::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--notch-body) 55%, var(--notch-lip));
  /* A lit rim along the sides and the bottom lip, so the black notch still
     has an edge on a black page. */
  box-shadow:
    inset 0 -1px 0 var(--notch-rim),
    inset 1px 0 0 var(--notch-rim-side),
    inset -1px 0 0 var(--notch-rim-side),
    0 10px 24px rgba(0, 0, 0, 0.35);
}
.mini-notch .blob { position: absolute; z-index: 1; width: 34px; height: 34px; top: 6px; }
.peeker { left: 20px; animation: peek 4.2s var(--ease-spring) infinite; }
@keyframes peek {
  0%, 18% { transform: translateY(-14px); }
  30%, 62% { transform: translateY(16px); }
  44% { transform: translateY(16px) rotate(-8deg); }
  54% { transform: translateY(16px) rotate(8deg); }
  76%, 100% { transform: translateY(-14px); }
}
.gang .blob { animation: hop 1.4s var(--ease-out) infinite; }
.gang .blob:nth-child(1) { left: 6px; animation-delay: 0s; }
.gang .blob:nth-child(2) { left: 40px; animation-delay: 0.15s; }
.gang .blob:nth-child(3) { left: 74px; animation-delay: 0.3s; }
.gang .blob:nth-child(4) { left: 108px; animation-delay: 0.45s; }
.gang .blob:nth-child(5) { left: 142px; animation-delay: 0.6s; }
@keyframes hop { 0%, 60%, 100% { transform: translateY(12px); } 30% { transform: translateY(20px); } }
.talk .blob:nth-child(1) { left: 16px; transform: translateY(14px) rotate(8deg); }
.talk .blob:nth-child(2) { right: 16px; transform: translateY(14px) rotate(-8deg); }
.bubble {
  position: absolute; top: 58px; font-size: 13px; font-weight: 600; line-height: 1.3;
  padding: 7px 11px; border-radius: 14px; max-width: 170px;
  background: var(--glass-2); border: 1px solid var(--hairline); box-shadow: var(--shadow-sm);
  opacity: 0; animation: chat 6s var(--ease-out) infinite;
}
.bubble.a { left: calc(50% - 170px); border-top-left-radius: 4px; }
.bubble.b { right: calc(50% - 170px); top: 92px; border-top-right-radius: 4px; animation-delay: 1.4s; }
@keyframes chat { 0% { opacity: 0; transform: translateY(6px) scale(0.96); } 8%, 70% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: translateY(-4px); } }
@media (max-width: 900px) { .fun { grid-template-columns: 1fr; } }

/* ── Characters (orb.js / orb.css, the app's own code) ─────────────────
   A character replaces the drawing in a spot once the script has mounted
   it (.has-char); without it, the drawing stays. */
.has-char > .blob { display: none; }

/* Under the notch, behind it: the asker pops in here and swoops up into
   the right ear. As wide as the island, so the ear is where it aims. */
.fly-stage {
  position: absolute; z-index: 3; top: 0; left: 50%; height: 120px;
  width: calc(var(--w-rest) + (var(--w-note) - var(--w-rest)) * var(--n) + (var(--w-open) - var(--w-note)) * var(--o));
  max-width: calc(100% - 24px);
  transform: translateX(-50%);
  pointer-events: none;
  --w-rest: 820px; --w-note: 480px; --w-open: 540px;
}
/* The first of the gang waits for the flier, then lands with a bounce. */
.awaits-flier:not(.is-landed) .ear-gang .g1 { opacity: 0; }
.is-landed .ear-gang .g1 { animation: gang-land 0.5s var(--ease-spring) both; }
@keyframes gang-land {
  0% { scale: 0.4 1.3; opacity: 0; }
  55% { scale: 1.25 0.8; opacity: 1; }
  100% { scale: 1; }
}

/* The inbox's lead stands on a strip of night sky, as in the app. */
.drop .nhead { position: relative; z-index: 0; }
.nhero-sky {
  position: absolute; z-index: -1; inset: -8px -12px -4px; pointer-events: none;
  background: radial-gradient(90px 60px at 30px 45%, var(--notch-card), transparent 70%);
  mask-image: linear-gradient(180deg, transparent, var(--notch) 25%, var(--notch) 70%, transparent);
}
.nhero-lead { position: relative; width: 40px; height: 40px; flex: none; }
.nhero-lead > .blob { width: 100%; height: 100%; }
.dyn-lead { position: relative; width: 26px; height: 26px; flex: none; }
.dyn-lead > .blob { width: 100%; height: 100%; }

/* Sound is opt-in on the site: a small switch where the moments are. */
.sound-toggle {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px 0 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--text-2); background: var(--fill-2);
  transition: background-color 0.2s, color 0.2s;
}
.sound-toggle:hover { color: var(--text); background: var(--fill); }
.sound-toggle[hidden] { display: none; }
.sound-toggle svg { width: 16px; height: 16px; }
.sound-toggle .sw-on { display: none; }
.sound-toggle[aria-pressed="true"] { color: var(--text); background: var(--fill); }
.sound-toggle[aria-pressed="true"] .sw-on { display: inline; }
.sound-toggle[aria-pressed="true"] .sw-off { display: none; }
.scene-pin > .sound-toggle:not([hidden]) { display: flex; margin: -8px auto 0; }

/* Pricing */
.plan { max-width: 560px; margin: 0 auto; padding: clamp(28px, 5vw, 44px); text-align: left; position: relative; overflow: hidden; }
.plan::before { content: ""; position: absolute; inset: -40% -20% auto; height: 70%; background: radial-gradient(closest-side, var(--accent-soft), transparent); pointer-events: none; }
.plan-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.plan-name { font-size: 17px; font-weight: 650; color: var(--text-2); }
.plan-price { font-family: var(--font-display); font-size: clamp(64px, 9vw, 92px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; margin-top: 8px; }
.plan-price small { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-3); margin-left: 6px; }
.plan .blob { width: 64px; height: 64px; }
.plan ul { position: relative; list-style: none; margin: 28px 0; display: grid; gap: 12px; }
.plan li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.plan li svg { width: 20px; height: 20px; flex: none; color: var(--accent); margin-top: 2px; }
.plan .cta-row { justify-content: flex-start; margin-top: 0; position: relative; }
.terms { position: relative; max-width: 640px; margin: 28px auto 0; text-align: center; font-size: 14.5px; line-height: 1.6; color: var(--text-3); }
.terms a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--hairline-2); text-underline-offset: 3px; }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { border-radius: var(--r-lg); padding: 0; overflow: hidden; }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev {
  width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--fill-2); color: var(--text-2);
  transition: transform 0.45s var(--ease-spring), background-color 0.2s;
}
.faq summary .chev svg { width: 14px; height: 14px; }
.faq details[open] summary .chev { transform: rotate(45deg); background: var(--accent-soft); color: var(--accent); }
.faq .answer { padding: 0 22px 22px; color: var(--text-2); font-size: 16px; line-height: 1.6; max-width: 70ch; }
.faq details[open] .answer { animation: drop 0.45s var(--ease-out); }
.faq .answer code { font-size: 14px; background: var(--fill-2); padding: 2px 6px; border-radius: 6px; color: var(--text); }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Final CTA */
.closer { text-align: center; }
.closer .blob-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 32px; }
@media (max-width: 560px) { .closer .blob-row { gap: 6px; } .closer .blob-row .blob { width: 34px; height: 34px; } }
.closer .blob-row .blob { width: 44px; height: 44px; animation: bob 3.2s ease-in-out infinite; }
.closer .blob-row .blob:nth-child(2n) { animation-delay: -1.1s; }
.closer .blob-row .blob:nth-child(3n) { animation-delay: -2.1s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ── Footer ───────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--hairline); padding: 48px 0 56px; font-size: 14px; color: var(--text-2); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px; }
.footer-sub { margin-top: 8px; color: var(--text-3); }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; }
.footer-links a:hover { color: var(--text); }
.footer-legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--hairline); font-size: 12.5px; line-height: 1.7; color: var(--text-3); max-width: 90ch; }

/* ── Scroll reveal ────────────────────────────────────────────────── */
.js .reveal { opacity: 0; transform: translateY(28px) scale(0.985); transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-spring); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: 0.08s; }
.js .reveal.d2 { transition-delay: 0.16s; }
.js .reveal.d3 { transition-delay: 0.24s; }

/* ── Download page ────────────────────────────────────────────────── */
.dl-hero { text-align: center; padding: clamp(64px, 9vw, 112px) 0 clamp(40px, 6vw, 64px); }
.dl-hero .blob { width: 76px; height: 76px; margin: 0 auto 26px; }
.dl-hero .lead { max-width: 620px; margin: 22px auto 34px; }
.dl-sub { display: block; margin-top: 14px; font-size: 14px; color: var(--text-3); }
.dl-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .dl-cards { grid-template-columns: 1fr; } }
.dl-card { padding: 28px; display: flex; flex-direction: column; }
.dl-card.detected { box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 2px var(--accent), var(--shadow-md); }
.dl-card h2 { display: flex; align-items: center; gap: 10px; font-size: 26px; letter-spacing: -0.03em; font-weight: 700; }
.badge-you { font-size: 12px; font-weight: 700; color: var(--accent-ink); background: var(--accent); padding: 3px 9px; border-radius: 999px; letter-spacing: 0; }
.dl-meta { font-size: 14px; color: var(--text-3); margin: 6px 0 20px; }
.dl-card .btn { align-self: flex-start; }
.steps { list-style: none; counter-reset: s; margin: 22px 0 0; display: grid; gap: 10px; }
.steps li { counter-increment: s; position: relative; padding-left: 36px; font-size: 15.5px; color: var(--text-2); }
.steps li strong { color: var(--text); }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 0;
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700; background: var(--fill); color: var(--text);
}
.steps code, .dl-alt code, .callout code { font-size: 13.5px; background: var(--fill-2); padding: 2px 6px; border-radius: 6px; color: var(--text); }
.callout { margin-top: 22px; padding: 16px 18px; border-radius: var(--r-md); background: var(--fill-2); font-size: 14.5px; color: var(--text-2); line-height: 1.55; }
.callout .ct { display: block; font-weight: 650; color: var(--text); margin-bottom: 4px; }
.callout ol { margin: 8px 0 0 18px; }
.callout li { margin: 3px 0; }
.dl-all { text-align: center; margin-top: 28px; font-size: 15px; }
.dl-all a { color: var(--accent); }
.dl-all a:hover { text-decoration: underline; }
.dl-alt { margin-top: 48px; padding: 28px; }
.dl-alt h3 { margin-bottom: 8px; }
.dl-alt p { color: var(--text-2); font-size: 15.5px; }
.dl-alt .cmd { margin: 18px 0; }
.dl-notch { display: flex; gap: 18px; align-items: center; margin-top: 18px; padding: 18px 20px; }
.dl-notch .blob { width: 40px; height: 40px; }
.dl-notch p { font-size: 15px; color: var(--text-2); }
.dl-notch strong { color: var(--text); }

/* ── Small screens ────────────────────────────────────────────────── */
@media (max-width: 560px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .cmd { font-size: 14.5px; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn, .cta-row .cmd { justify-content: center; }
  .plan .cta-row { align-items: stretch; }
  .bubble.a { left: 8px; }
  .bubble.b { right: 8px; }
  .faq summary { font-size: 16.5px; padding: 18px; }
  .faq .answer { padding: 0 18px 18px; }
}

/* ── Reduced motion: everything holds still ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .peeker { transform: translateY(16px); }
  .bubble { opacity: 1; }
}

/* ── The app window (Team) ────────────────────────────────────────────
   A screenshot of the current build in a plain Mac window: the three
   window controls and nothing else, since the image carries the app's
   own chrome. The <picture> picks the light or dark shot to match. */
.appwin {
  margin: 0 auto clamp(40px, 6vw, 64px);
  max-width: 1080px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--hairline-2);
  background: var(--glass-solid);
  box-shadow: var(--shadow-md);
}
.appwin-bar {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-bottom: 1px solid var(--hairline);
}
.appwin img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Liquid glass buttons ─────────────────────────────────────────────
   Every answer button on the page (the notch's, the Dynamic Island's,
   the inbox cards' and the iPhone's) is a lens, not a paint chip:
     · a body of the tint at low opacity, so what is behind shows through,
       blurred and saturated by the backdrop filter;
     · a gloss where light enters at the top left, and a caustic where it
       gathers at the bottom, in the tint's own light;
     · a rim that is bright where light enters and leaves (top left,
       bottom right) and clear in between (the ::before ring);
     · a hairline, a darker lower edge and a soft bloom in the tint.
   Neutral glass is clear; the recommended answer is tinted glass; a
   refusal is clear glass with red ink. The tokens below are the dark
   glass the notch always uses; light cards redefine them further down.
   Only scalars live in tokens: a var() inside a custom property resolves
   where it is declared, so the composite stacks are in the rules. */
:root {
  --gb-t: 255 255 255;      /* body tint */
  --gb-l: 255 255 255;      /* caustic light */
  --gb-a1: 0.16;            /* body opacity, top */
  --gb-a2: 0.05;            /* body opacity, bottom */
  --gb-gloss: 0.38;
  --gb-spec: 0.75;          /* the top specular line */
  --gb-hair: 255 255 255;
  --gb-hair-a: 0.22;
  --gb-edge: 0 0 0;         /* the lower edge's shade */
  --gb-edge-a: 0.22;
  --gb-bloom: 0.6;
  --gb-ink: var(--notch-ink);
  --gb-ink-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.28);
  --gb-rim: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.12) 30%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.55));
  --gb-filter: blur(10px) saturate(200%) brightness(1.1);
  /* Prominent glass is the ink colour: white glass with black ink on dark,
     black glass with white ink on light. */
  --gb-prom: 245 245 247;
  --gb-prom-l: 255 255 255;
  --gb-prom-edge: 0 0 0;
  --gb-prom-ink: #0b0b0e;
  --gb-prom-ink-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  --gb-prom-kbd: rgba(0, 0, 0, 0.12);
  --gb-red-ink: #ff9a90;
  --gb-red-l: 255 120 110;
  --gb-kbd: rgba(255, 255, 255, 0.16);
}
.nbtn, .chip-btn, .dyn-acts span, .send, .ip-mic {
  position: relative; isolation: isolate;
  color: var(--gb-ink);
  background:
    radial-gradient(90% 70% at 30% 0%, rgba(255, 255, 255, var(--gb-gloss)), rgba(255, 255, 255, 0) 70%),
    radial-gradient(80% 60% at 50% 115%, rgb(var(--gb-l) / 0.55), rgb(var(--gb-l) / 0) 70%),
    linear-gradient(180deg, rgb(var(--gb-t) / var(--gb-a1)), rgb(var(--gb-t) / var(--gb-a2)));
  -webkit-backdrop-filter: var(--gb-filter);
  backdrop-filter: var(--gb-filter);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, var(--gb-spec)),
    inset 0 0 0 0.5px rgb(var(--gb-hair) / var(--gb-hair-a)),
    inset 0 -1.5px 2px rgb(var(--gb-edge) / var(--gb-edge-a)),
    0 8px 20px -8px rgb(var(--gb-t) / var(--gb-bloom)),
    0 1px 2px rgba(0, 0, 0, 0.2);
  text-shadow: var(--gb-ink-shadow);
}
.nbtn::before, .chip-btn::before, .dyn-acts span::before, .send::before, .ip-mic::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--gb-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
/* The recommended answer: tinted glass. */
/* The recommended answer, the picked option, send and the mic:
   prominent glass in the ink colour. */
.nbtn.primary, .chip-btn.yes, .dyn-acts .yes, .chip-btn.pick, .card .reply .send, .ip-mic {
  --gb-t: var(--gb-prom); --gb-l: var(--gb-prom-l); --gb-edge: var(--gb-prom-edge);
  --gb-a1: 0.82; --gb-a2: 0.62; --gb-bloom: 0.25;
  --gb-ink: var(--gb-prom-ink); --gb-ink-shadow: var(--gb-prom-ink-shadow);
}
/* A refusal: clear glass, red ink, a faint red caustic. */
.chip-btn.no, .dyn-acts .no { --gb-ink: var(--gb-red-ink); --gb-l: var(--gb-red-l); }
.nbtn kbd, .chip-btn kbd { background: var(--gb-kbd); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.35); text-shadow: none; }
.nbtn.primary kbd, .chip-btn.yes kbd, .chip-btn.pick kbd { background: var(--gb-prom-kbd); box-shadow: none; }

/* Light cards (the inbox stack and the iPhone section follow the page):
   clear glass is drawn by its edges rather than a fill, and prominent
   glass turns to black glass with white ink. */
@media (prefers-color-scheme: light) {
  .card, .ip-card {
    --gb-a1: 0.3; --gb-a2: 0.02;
    --gb-gloss: 0.5;
    --gb-hair: 0 0 0; --gb-hair-a: 0.12;
    --gb-edge-a: 0.1;
    --gb-bloom: 0.3;
    --gb-ink: var(--text);
    --gb-ink-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
    --gb-rim: linear-gradient(160deg, #fff, rgba(255, 255, 255, 0.3) 30%, rgba(0, 0, 0, 0.1) 62%, rgba(255, 255, 255, 0.95));
    --gb-filter: blur(8px) saturate(220%) brightness(1.04);
    --gb-prom: 28 28 30;
    --gb-prom-l: 140 140 150;
    --gb-prom-ink: #ffffff;
    --gb-prom-ink-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    --gb-prom-kbd: rgba(255, 255, 255, 0.18);
    --gb-red-ink: var(--red);
    --gb-red-l: 255 255 255;
    --gb-kbd: rgba(0, 0, 0, 0.06);
  }
  .card .chip-btn.yes, .ip-card .chip-btn.yes, .card .chip-btn.pick, .card .reply .send, .ip-mic {
    --gb-a1: 0.9; --gb-a2: 0.74; --gb-edge-a: 0.3; --gb-bloom: 0.35;
    --gb-ink: var(--gb-prom-ink); --gb-ink-shadow: var(--gb-prom-ink-shadow);
  }
}

/* Inline links in body copy: the ink colour with an underline, since the
   primary colour is the text colour itself. */
.ink-link { color: var(--text); text-decoration: underline; text-decoration-color: var(--hairline-2); text-underline-offset: 3px; }
.ink-link:hover { text-decoration-color: currentColor; }

/* ── Scroll scenes ────────────────────────────────────────────────────
   The tracks the script scrubs (see SCROLL SCENES in index.html). A track
   is tall only while the script runs; its .scrub-pin sticks to the top of
   the screen while the track scrolls past. Every beat variable defaults
   to 1, so without the script each scene simply shows its finished state.
   In a split section the copy column sticks alongside the pinned visual. */
[data-scrub] { --a: 1; --b: 1; --c: 1; --d: 1; --e: 1; --f: 1; --g: 1; position: relative; }
.scrub-live [data-scrub] { height: var(--scrub-h, 230vh); }
.scrub-live .scrub-pin {
  position: sticky; top: 56px;
  min-height: calc(100vh - 56px);
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
}
@media (min-width: 901px) {
  .scrub-live .split.has-scrub { align-items: start; }
  .scrub-live .split.has-scrub > .split-copy { position: sticky; top: calc(50vh - 180px); }
}
/* A beat that has not started yet: f(--x) is 0 → hidden, 1 → shown. */
.scrub-steps { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.scrub-steps li {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 13px 0 5px;
  border-radius: 999px; font-size: 13.5px; color: var(--text-2); background: var(--fill-2);
  transition: color 0.3s, background-color 0.3s;
}
.scrub-steps b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: var(--text); background: var(--fill); }
.scrub-live [data-scrub] .scrub-steps li.on { color: var(--text); background: var(--accent-soft); }
.scrub-live [data-scrub] .scrub-steps li.on b { background: var(--accent); color: var(--accent-ink); }

/* Inbox: the questions land one after another (--a, --b, --c), then the
   first one is approved in place (--d) and says what happens next. */
.inbox-scene .card { transform-origin: 50% 0; }
.scrub-live .inbox-scene .q1 { opacity: var(--a); transform: translateY(calc((1 - var(--a)) * 46px)) scale(calc(0.95 + var(--a) * 0.05)); }
.scrub-live .inbox-scene .q2 { opacity: var(--b); transform: translateY(calc((1 - var(--b)) * 46px)) scale(calc(0.95 + var(--b) * 0.05)); }
.scrub-live .inbox-scene .q3 { opacity: var(--c); transform: translateY(calc((1 - var(--c)) * 46px)) scale(calc(0.95 + var(--c) * 0.05)); }
/* Each card's tags light up as it lands: who asked, with what, and where. */
.scrub-live .inbox-scene .q1 .tag { box-shadow: 0 0 0 calc((1 - var(--b)) * 1.5px) var(--text-3); }
.scrub-live .inbox-scene .q2 .tag { box-shadow: 0 0 0 calc(var(--b) * (1 - var(--c)) * 1.5px) var(--text-3); }
.scrub-live .inbox-scene .q3 .tag { box-shadow: 0 0 0 calc(var(--c) * (1 - var(--d)) * 1.5px) var(--text-3); }
/* Approve is pressed, then the card turns into its outcome. */
.inbox-scene .q1 { position: relative; overflow: hidden; }
.q-done { display: none; }
.scrub-live .q-done {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 24px; font-size: 16px; color: var(--text); text-align: left;
  background: var(--glass-2);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  opacity: calc(var(--d) * 2.2 - 1.2);
  transform: scale(calc(0.98 + var(--d) * 0.02));
}
.q-done svg { width: 22px; height: 22px; flex: none; }
/* The press: a dip to 0.94 and back over the first fifth of the beat. */
.scrub-live .inbox-scene .q1 .chip-btn.yes { --t: min(var(--d) * 5, 1); transform: scale(calc(1 - 0.24 * var(--t) * (1 - var(--t)))); }

/* Voice: hold V (--a) and the mic opens; the words arrive as they are
   said (--b); let go (--c) and the draft is yours to read; Return (--d)
   sends it. --held is 1 while V is down. */
.voice-scene { position: relative; }
.voice-key { display: none; }
.scrub-live .voice-scene { --held: calc(var(--a) * (1 - var(--c))); }
.scrub-live .voice-key {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: -6px 0 18px; font-size: 14px; color: var(--text-2);
}
.scrub-live .voice-key kbd {
  font-family: var(--font); font-weight: 650; font-size: 14px;
  min-width: 34px; height: 34px; border-radius: 9px; display: inline-grid; place-items: center;
  color: var(--key-ink); background: linear-gradient(180deg, var(--key-top), var(--key-bot));
  box-shadow: 0 calc(3px - var(--held) * 2px) 0 var(--key-edge), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(calc(var(--held) * 2px));
}
.scrub-live .voice-key .vk-hold { opacity: var(--held); }
.voice-key .vk-lab { display: grid; text-align: left; }
.voice-key .vk-lab > span { grid-area: 1 / 1; }
.scrub-live .voice-key .vk-let { opacity: calc(var(--c) * (1 - var(--d))); }
.scrub-live .voice-scene .orb { transform: scale(calc(0.92 + var(--held) * 0.12)); opacity: calc(0.55 + var(--a) * 0.45); }
.scrub-live .voice-scene .orb::before, .scrub-live .voice-scene .orb::after { opacity: var(--held); }
.scrub-live .voice-scene .wave i { transform: scaleY(calc(0.2 + var(--held) * 0.8)); }
/* Word by word: word i shows once --b has passed i / n of the way. */
.scrub-live .voice-scene .transcript .w { opacity: clamp(0.08, var(--b) * var(--n) - var(--i), 1); }
.scrub-live .voice-scene .transcript .live { color: color-mix(in srgb, var(--text) calc(var(--c) * 100%), var(--text-3)); }
.scrub-live .voice-scene .vf-send kbd { box-shadow: 0 0 0 calc(var(--c) * (1 - var(--d)) * 2px) var(--text); }
.voice-sent { display: none; }
.scrub-live .voice-sent {
  position: absolute; inset: auto 18px 18px; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 16px; font-size: 14.5px; text-align: left; color: var(--text);
  background: var(--glass-2); box-shadow: var(--shadow-sm), inset 0 0 0 0.5px var(--hairline-2);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: var(--d); transform: translateY(calc((1 - var(--d)) * 14px));
}
.voice-sent .blob { width: 26px; height: 26px; flex: none; }

/* iPhone: the inbox fills, top first (--a, staggered by --r); a tap on
   Approve (--b) resolves the card (--c); then the mic is held (--d). */
.scrub-live .iphone-scene :is(.ip-card, .ip-row) {
  --in: clamp(0, var(--a) * 4 - var(--r), 1);
  opacity: var(--in); transform: translateY(calc((1 - var(--in)) * 18px));
}
/* On a short screen the phone shrinks whole, so it still fits pinned
   under the menu bar. */
@media (max-height: 780px) { .scrub-live .iphone-scene .phone { zoom: 0.88; } }
@media (max-height: 680px) { .scrub-live .iphone-scene .phone { zoom: 0.76; } }
@media (max-height: 600px) { .scrub-live .iphone-scene .phone { zoom: 0.64; } }
.iphone-scene .ip-card { position: relative; overflow: hidden; }
.ip-tap { display: none; }
.scrub-live .ip-tap {
  display: block; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.12) 60%, transparent 70%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
  opacity: calc(var(--b) * (1 - var(--c)) * 1.6);
  transform: scale(calc(0.6 + var(--b) * 0.5));
}
.scrub-live .iphone-scene .chip-btn.yes { --t: min(var(--b) * 3, 1); transform: scale(calc(1 - 0.2 * var(--t) * (1 - var(--t)))); }
.ip-done { display: none; }
.scrub-live .ip-done {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; color: var(--text); background: var(--glass-2);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: calc(var(--c) * 2 - 0.8);
}
.ip-done svg { width: 18px; height: 18px; }
.scrub-live .iphone-scene .ip-mic { transform: scale(calc(1 + var(--d) * 0.12)); box-shadow: 0 0 0 calc(var(--d) * 10px) color-mix(in srgb, var(--text) 10%, transparent); }
.iphone-scene .ip-hold { display: grid; }
.iphone-scene .ip-hold > span { grid-area: 1 / 1; text-align: center; }
.iphone-scene .ih-live { opacity: 0; }
.scrub-live .iphone-scene .ih-idle { opacity: calc(1 - var(--d)); }
.scrub-live .iphone-scene .ih-live { opacity: var(--d); color: var(--text); }

/* Keyboard: a small notch that does what each key says, one key per beat,
   while the key's tile lights. data-step picks the state (1 open, 2 move,
   3 pick, 4 recommend, 5 talk, 6 reply, 7 close); the states cross-fade. */
.kdemo { width: min(560px, 100%); margin: 0 auto clamp(18px, 3vw, 28px); color: var(--notch-ink); text-align: left; }
.kd-strip { height: 30px; margin: 0 auto; width: 46%; border-radius: 0 0 16px 16px; background: var(--notch); display: grid; place-items: center; }
.kd-hw { width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2b3550, #07080b 70%); }
.kd-panel {
  margin-top: -6px; padding: 14px 12px 12px; border-radius: 0 0 26px 26px;
  /* Near-opaque black, like the real notch, so it reads on a light page too. */
  background: color-mix(in srgb, var(--notch) 90%, transparent); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  box-shadow: inset 0 0 0 0.5px var(--notch-line), var(--shadow-md);
  display: grid; gap: 6px;
  transition: clip-path 0.45s var(--ease-out), opacity 0.35s var(--ease-out), transform 0.45s var(--ease-out);
}
.kd-row { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 9px 10px; border-radius: 14px; transition: background-color 0.25s, box-shadow 0.25s; }
.kd-row .blob { width: 26px; height: 26px; }
.kd-body b { font-size: 13px; font-weight: 650; }
.kd-body p { margin: 1px 0 0; font-size: 13px; color: var(--notch-ink-2); }
.kd-acts { display: flex; gap: 6px; margin-top: 7px; transition: opacity 0.25s; }
.kd-btn {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; background: var(--notch-card); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.2);
  transition: background-color 0.2s, color 0.2s, transform 0.2s;
}
.kd-btn kbd { font: 700 10px var(--font); min-width: 15px; height: 15px; border-radius: 4px; display: inline-grid; place-items: center; background: rgba(255, 255, 255, 0.14); }
.kd-btn.rec { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.kd-done, .kd-reply { display: none; margin-top: 7px; font-size: 12.5px; align-items: center; gap: 6px; }
.kd-ck { width: 14px; height: 14px; }
.kd-reply { padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.kd-caret { display: inline-block; width: 1.5px; height: 13px; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.kd-ask { display: grid; height: 34px; padding: 0 12px; border-radius: 999px; align-items: center; font-size: 12.5px; color: var(--notch-ink-3); background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.kd-ask > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 8px; transition: opacity 0.25s; }
.kd-ask-live { opacity: 0; color: var(--notch-ink); }
.kd-ask .wave { height: 16px; }
.key-caption { display: none; }

/* Without the script: open, the first question selected. */
.keys-scene:not([data-step]) .kr1,
.keys-scene[data-step="1"] .kr1, .keys-scene[data-step="2"] .kr2, .keys-scene[data-step="3"] .kr3,
.keys-scene[data-step="4"] .kr1, .keys-scene[data-step="5"] .kr1, .keys-scene[data-step="6"] .kr1 {
  background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.scrub-live .keys-scene:is([data-step="0"], [data-step="7"]) .kd-panel { clip-path: inset(0 0 100% 0 round 0 0 26px 26px); opacity: 0; transform: translateY(-8px); }
.scrub-live .keys-scene .kd-panel { clip-path: inset(0 0 0 0 round 0 0 26px 26px); }
/* 3: "2" picks the second fix, then the row shows the answer. */
.keys-scene[data-step="3"] .kr2 .pick { background: rgba(255, 255, 255, 0.85); color: #0b0b0e; transform: scale(0.95); }
.keys-scene:is([data-step="3"], [data-step="4"], [data-step="5"], [data-step="6"], [data-step="7"]) .kr2 .kd-acts { display: none; }
.keys-scene:is([data-step="3"], [data-step="4"], [data-step="5"], [data-step="6"], [data-step="7"]) .kr2 .kd-done { display: flex; animation: kd-in 0.4s var(--ease-out) both; }
/* 4: Return takes landing-copy's recommendation. */
.keys-scene:is([data-step="4"], [data-step="5"], [data-step="6"], [data-step="7"]) .kr3 .kd-acts { display: none; }
.keys-scene:is([data-step="4"], [data-step="5"], [data-step="6"], [data-step="7"]) .kr3 .kd-done { display: flex; animation: kd-in 0.4s var(--ease-out) both; }
/* 5: holding V talks to the Chief of Staff. */
.keys-scene[data-step="5"] .kd-ask-idle { opacity: 0; }
.keys-scene[data-step="5"] .kd-ask-live { opacity: 1; }
.keys-scene[data-step="5"] .kd-ask { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
/* 6: R opens a reply to the selected question. */
.keys-scene:is([data-step="6"], [data-step="7"]) .kr1 .kd-acts { display: none; }
.keys-scene:is([data-step="6"], [data-step="7"]) .kr1 .kd-reply { display: flex; animation: kd-in 0.4s var(--ease-out) both; }
@keyframes kd-in { from { opacity: 0; transform: translateY(4px); } }
/* The key tiles: the current key's tile lights, the rest wait. */
.scrub-live .keys-scene .key-tile { opacity: 0.42; transition: opacity 0.3s, box-shadow 0.3s, transform 0.3s; }
.keys-scene[data-step="1"] .kt1, .keys-scene[data-step="2"] .kt2, .keys-scene[data-step="3"] .kt3, .keys-scene[data-step="4"] .kt4,
.keys-scene[data-step="5"] .kt5, .keys-scene[data-step="6"] .kt6, .keys-scene[data-step="7"] .kt7 {
  opacity: 1; transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--text), var(--shadow-md);
}
/* Wide screens: the notch and its keys sit side by side, the keys as a
   compact two-column pad, so the whole scene fits one screen while pinned.
   Only the lit key spells out what it does. */
@media (min-width: 901px) {
  .scrub-live .keys-scene .scrub-pin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; align-content: center; gap: clamp(20px, 3vw, 44px); }
  .scrub-live .keys-scene .kdemo { margin: 0 0 0 auto; }
  .scrub-live .keys-scene .keys { grid-template-columns: 1fr 1fr; gap: 10px; }
  .scrub-live .keys-scene .key-tile { min-height: 0; padding: 12px 14px; }
  .scrub-live .keys-scene .key-tile .caps { margin-bottom: 0; padding-bottom: 10px; }
  .scrub-live .keys-scene .keys kbd { min-width: 34px; height: 34px; font-size: 15px; border-radius: 9px; padding: 0 9px; }
  .scrub-live .keys-scene .keys kbd.long { min-width: 72px; }
  .scrub-live .keys-scene .key-tile h3 { font-size: 16px; margin-bottom: 0; }
  .scrub-live .keys-scene .key-tile p { display: none; font-size: 13.5px; margin-top: 4px; }
  .keys-scene[data-step="1"] .kt1 p, .keys-scene[data-step="2"] .kt2 p, .keys-scene[data-step="3"] .kt3 p, .keys-scene[data-step="4"] .kt4 p,
  .keys-scene[data-step="5"] .kt5 p, .keys-scene[data-step="6"] .kt6 p, .keys-scene[data-step="7"] .kt7 p { display: block; }
}
/* Narrower: the tiles do not fit beside the notch, so a caption says the key. */
@media (max-width: 900px) {
  .scrub-live .keys-scene .keys { display: none; }
  .scrub-live .key-caption { display: grid; list-style: none; min-height: 40px; }
  .scrub-live .key-caption li { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; color: var(--text); opacity: 0; transition: opacity 0.25s; }
  .scrub-live .key-caption kbd { font: 600 12px var(--font); min-width: 24px; height: 24px; padding: 0 6px; border-radius: 6px; display: inline-grid; place-items: center; background: var(--fill); }
  .keys-scene[data-step="1"] .kc1, .keys-scene[data-step="2"] .kc2, .keys-scene[data-step="3"] .kc3, .keys-scene[data-step="4"] .kc4,
  .keys-scene[data-step="5"] .kc5, .keys-scene[data-step="6"] .kc6, .keys-scene[data-step="7"] .kc7 { opacity: 1; }
}

/* Detection: a scan runs across this Mac (--a), each agent lights as it
   is found (--b, staggered by its --k), then "Adopt all" (--c) takes them
   all into the team and each chip gets its check. */
.scan-head { display: none; }
.chip-ck { display: none; }
.scrub-live .agents-scene .scan-head {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: min(900px, 100%); margin: 0 auto 4px; padding: 0 4px 12px; font-size: 15px; color: var(--text-2);
}
.scan-label { display: grid; }
.scan-label > span:not(.scan-dot) { grid-area: 1 / 2; }
.scan-label { grid-template-columns: 18px auto; align-items: center; }
.scan-dot { grid-area: 1 / 1; width: 8px; height: 8px; border-radius: 50%; background: var(--text); animation: scan-pulse 1.1s ease-in-out infinite; }
@keyframes scan-pulse { 50% { opacity: 0.25; } }
.scrub-live .agents-scene .sl-scan { opacity: calc(1 - min(var(--b) * 4, 1)); }
.scrub-live .agents-scene .sl-found { opacity: calc(min(var(--b) * 4, 1) * (1 - var(--c))); }
.scrub-live .agents-scene .sl-done { opacity: var(--c); color: var(--text); }
.scan-btn {
  --t: min(var(--c) * 4, 1);
  display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--btn-ink); background: var(--btn-bg);
  opacity: calc(0.35 + min(var(--b) * 2, 1) * 0.65);
  transform: scale(calc(1 - 0.2 * var(--t) * (1 - var(--t))));
}
.scan-bar { position: absolute; left: 4px; right: 4px; bottom: 0; height: 2px; border-radius: 2px; background: var(--fill); overflow: hidden; }
.scan-bar::after { content: ""; position: absolute; inset: 0; background: var(--text); transform-origin: 0 50%; transform: scaleX(var(--a)); opacity: calc(1 - var(--c)); }
.scrub-live .agents-scene .chip {
  --found: clamp(0, var(--b) * 15 - var(--k), 1);
  opacity: calc(0.2 + var(--found) * 0.8);
  transform: scale(calc(0.94 + var(--found) * 0.06));
}
.scrub-live .agents-scene .chip::before { transform: scale(calc(var(--found) * (1 - var(--c)))); }
.scrub-live .agents-scene .chip { position: relative; }
.scrub-live .agents-scene .chip-ck {
  display: block; position: absolute; left: 10px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px;
  opacity: var(--c); transform: scale(calc(0.4 + var(--c) * 0.6));
}
.scrub-live .agents-scene .chip { box-shadow: inset 0 0 0 calc(var(--c) * 1.5px) color-mix(in srgb, var(--text) 50%, transparent); }

/* Team: the real app, one screen per beat (data-step 1..7), each shown
   full size in the same window. The screens are stacked and cross-fade,
   each easing in from slightly large so the change reads as opening that
   part of the app. Beats 1-2 belong to the first card, 3-4 to the second,
   5-6 to the third and 7 to the last; only the current card shows, as the
   caption under the window. Without the script, or with reduced motion,
   the window shows the first screen and all four cards sit beside it. */
.appwin { position: relative; }
.frames { position: relative; overflow: hidden; }
.frame { display: block; }
.frame + .frame { display: none; }
.scrub-live .team-scene .team-grid { display: grid; justify-items: center; gap: 14px; }
.scrub-live .team-scene .appwin { margin: 0; width: min(1080px, 100%, calc((100vh - 56px - var(--team-rest)) * 1.5)); }
.scrub-live .team-scene { --team-rest: 230px; }
.scrub-live .team-scene .frame + .frame { display: block; position: absolute; inset: 0; }
/* A screen opens whole, for bearings, then scrolling zooms into the part
   that matters (its beat's variable, 0 to 1): the roster and the chat for
   the first, the main pane for the rest, so the words are readable. */
.scrub-live .team-scene .frame {
  --z: 0; opacity: 0;
  transform-origin: 100% 20%;
  transform: scale(calc(1 + var(--z) * 0.36));
  transition: opacity 0.45s var(--ease-out);
  will-change: transform, opacity;
}
.scrub-live .team-scene .f1 { --z: var(--a); transform-origin: 0% 12%; transform: scale(calc(1 + var(--z) * 0.22)); }
.scrub-live .team-scene .f2 { --z: var(--b); }
.scrub-live .team-scene .f3 { --z: var(--c); }
.scrub-live .team-scene .f4 { --z: var(--d); }
.scrub-live .team-scene .f5 { --z: var(--e); }
.scrub-live .team-scene .f6 { --z: var(--f); }
.scrub-live .team-scene .f7 { --z: var(--g); }
.team-scene:is([data-step="0"], [data-step="1"]) .f1,
.team-scene[data-step="2"] .f2, .team-scene[data-step="3"] .f3, .team-scene[data-step="4"] .f4,
.team-scene[data-step="5"] .f5, .team-scene[data-step="6"] .f6, .team-scene[data-step="7"] .f7 { opacity: 1; }
.scrub-live .team-scene .keys { display: grid; grid-template-columns: 1fr; width: min(720px, 100%); min-height: 96px; }
.scrub-live .team-scene .key-tile {
  grid-area: 1 / 1; min-height: 0; padding: 14px 18px; text-align: center;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.scrub-live .team-scene .key-tile .caps { display: none; }
.scrub-live .team-scene .key-tile p { font-size: 14.5px; }
.team-scene:is([data-step="0"], [data-step="1"], [data-step="2"]) .tt1,
.team-scene:is([data-step="3"], [data-step="4"]) .tt2,
.team-scene:is([data-step="5"], [data-step="6"]) .tt3,
.team-scene[data-step="7"] .tt4 { opacity: 1; transform: none; pointer-events: auto; }


/* Team, on a phone. A 1280px screenshot squeezed into a phone's width is
   unreadable, and the desktop zoom (up to 1.36) does not change that. So
   the window is square, each screen still opens whole for bearings, and
   scrolling zooms much further, onto the one part of that screen that
   carries the point: about a third of its width, which brings the app's
   own text close to its real size.

   Each screen sets --s (how far it zooms) and --fx, --fy (the point of
   the screenshot that ends up in the middle of the window, as fractions
   of its width and height). The transform origin is worked out from
   those: the frame is the square window, and the screenshot sits in its
   middle band, 62.5% of its height (800 / 1280). */
@media (max-width: 760px) {
  .scrub-live .team-scene { --team-rest: 250px; }
  .scrub-live .team-scene .appwin { width: min(100%, calc(100vh - 56px - var(--team-rest))); }
  .scrub-live .team-scene .frames { aspect-ratio: 1 / 1; }
  .scrub-live .team-scene .frame,
  .scrub-live .team-scene .frame + .frame {
    position: absolute; inset: 0; display: block;
    /* No defaults for --s, --fx or --fy are set here: this selector
       outranks the per-screen ones below, so a default set here would win
       over them and every screen would zoom on its middle. */
    --cy: calc(0.1875 + var(--fy, 0.5) * 0.625);
    transform-origin:
      calc((var(--fx, 0.5) - 0.5 / var(--s, 3)) / (1 - 1 / var(--s, 3)) * 100%)
      calc((var(--cy) - 0.5 / var(--s, 3)) / (1 - 1 / var(--s, 3)) * 100%);
    transform: scale(calc(1 + var(--z) * (var(--s, 3) - 1)));
  }
  /* The screenshot is placed, not centred by a layout rule, so it sits
     exactly where the sums above assume: (1 - 0.625) / 2 from the top. */
  .scrub-live .team-scene .frame img { position: absolute; left: 0; top: 18.75%; width: 100%; height: auto; }
  /* The roster: the Chief of Staff and the bots that report to it, each
     with what it is doing. */
  .scrub-live .team-scene .f1 { --s: 3.3; --fx: 0.165; --fy: 0.27; }
  /* The board: the task that is running and the one that needs you. */
  .scrub-live .team-scene .f2 { --s: 2.5; --fx: 0.745; --fy: 0.27; }
  /* The routines: what runs, when, and whose it is. */
  .scrub-live .team-scene .f3 { --s: 2.6; --fx: 0.475; --fy: 0.33; }
  /* One routine: its last run and what it did. */
  .scrub-live .team-scene .f4 { --s: 2.9; --fx: 0.475; --fy: 0.60; }
  /* The wiki: what the bots wrote down most recently. */
  .scrub-live .team-scene .f5 { --s: 2.9; --fx: 0.705; --fy: 0.50; }
  /* A wiki page: its title, its summary, and the table of who owns what. */
  .scrub-live .team-scene .f6 { --s: 2.4; --fx: 0.545; --fy: 0.52; }
  /* A bot-built app: its headline numbers and the first rows. */
  .scrub-live .team-scene .f7 { --s: 2.3; --fx: 0.52; --fy: 0.62; }
}