/* site/styles/tokens.css — THE design tokens. Components (base.css, components.css) use only the
   semantic --color-* / --surface-* / --space-* / --radius-* / --text-* / --font-* names below and
   never a raw colour (test/tokens.test.ts pins that).

   Themes: LIGHT is the :root default. DARK applies when the OS asks for it (prefers-color-scheme)
   unless the visitor picked light, OR when the visitor picked dark (data-theme="dark", stamped by
   src/client/theme.js from localStorage). The two dark blocks below must stay identical — the
   parity test (test/tokens.test.ts) compares them.

   Palette = the logo and the approved mockups (.stitch/designs/reference/landing-{light,dark}.png):
   magenta/violet -> blue -> cyan on near-black or on a cool off-white. Text pairs are
   contrast-tested (WCAG AA, test/contrast.test.ts). */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-latin.ba627ffc66.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-latin-ext.b2c5fe7ba1.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-cyrillic.fca5e53ef0.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin.a30ddcd349.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin-ext.3911b66d9f.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-cyrillic.c268b459a9.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-symbols.a227317a2b.woff2") format("woff2");
  unicode-range: U+2248;
}

:root {
  /* --- raw palette: light --- */
  --light-bg: #f6f6fa;
  --light-bg-deep: #efeff5;
  --light-surface: #ffffff;
  --light-surface-raised: #f0eff6;
  --light-border: #e3e2ee;
  --light-rule: #e6e5ef;
  --light-ink: #121433;
  --light-ink-muted: #4f5170;
  --light-link: #5a22e0;
  --light-link-hover: #3d10b0;
  --light-marker-ink: #8a5a00;
  --light-notice-bg: #f0eaff;
  --light-notice-border: #b9a3f5;
  --light-notice-ink: #2a1a5e;
  --light-accent-ink: #6a2cf0;
  --light-grad-from: #9b3cf5;
  --light-grad-mid: #6a5cff;
  --light-grad-to: #1486c8;
  --light-bubble-in: #eeeef3;
  --light-phone-screen: #f7f7fa;
  --light-phone-bar: #ffffff;
  --light-pill-ink: #ffffff;
  --light-wave-a: #c38af7;
  --light-wave-b: #a3a3ff;
  --light-wave-c: #7fd0f4;
  --light-cta-icon-bg: #ffffff;
  --light-cta-icon-ink: #7a3cff;
  --light-card-hover: #fbfbfe;
  --light-border-hover: #c9bdf5;
  --light-label-a: #a466ff;
  --light-label-b: #8a78ff;
  --light-label-c: #58a8ff;
  --light-label-d: #3fd0f5;
  --light-label-ink: #211a4f;

  /* --- raw palette: dark --- */
  --dark-bg: #09090f;
  --dark-bg-deep: #050508;
  --dark-surface: #111118;
  --dark-surface-raised: #1b1b25;
  --dark-border: #262633;
  --dark-rule: #1d1d28;
  --dark-ink: #f5f4fb;
  --dark-ink-muted: #a9a7bc;
  --dark-link: #7fdbff;
  --dark-link-hover: #c2eeff;
  --dark-marker-ink: #f5c451;
  --dark-notice-bg: #1f1836;
  --dark-notice-border: #5b3fb0;
  --dark-notice-ink: #ece6ff;
  --dark-accent-ink: #45c2ff;
  --dark-grad-from: #b44cff;
  --dark-grad-mid: #6f6bff;
  --dark-grad-to: #22c3ff;
  --dark-bubble-in: #24242e;
  --dark-phone-screen: #0e0e14;
  --dark-phone-bar: #15151d;
  --dark-pill-ink: #f5f4fb;
  --dark-wave-a: #b44cff;
  --dark-wave-b: #5a6cff;
  --dark-wave-c: #22c8ff;
  --dark-cta-icon-bg: #0b0b12;
  --dark-cta-icon-ink: #ffffff;
  --dark-card-hover: #15151e;
  --dark-border-hover: #4a3d86;
  --dark-label-a: #9d4dff;
  --dark-label-b: #7a5cff;
  --dark-label-c: #3f8cff;
  --dark-label-d: #1fc0f5;
  --dark-label-ink: #ffffff;

  /* --- brand (both themes) --- */
  --brand-magenta: #b03cff;
  --brand-violet: #7a3cff;
  --brand-blue: #2e7bff;
  --brand-cyan: #1fc8ff;
  --white: #ffffff;
  --ink-on-white: #121433;
  /* CTA stops carry white text: from/mid >= 4.5:1, to >= 3:1 (the CTA label is large text:
     >= 19px bold, see .button) — pinned by test/contrast.test.ts. */
  --color-cta-from: #9a3cf0;
  --color-cta-mid: #4f5bff;
  --color-cta-to: #0b86c9;
  --color-cta-ink: #ffffff;
  --color-focus: #1fc8ff;
  --gradient-cta: linear-gradient(100deg, var(--color-cta-from), var(--color-cta-mid) 58%, var(--color-cta-to));
  --gradient-cta-safe: linear-gradient(100deg, var(--color-cta-from), var(--color-cta-mid));

  /* record label drawn over the hero photo (per-theme stops live in the raw palettes) */
  --label-ring: rgb(255 255 255 / 0.22);
  --label-shine-a: rgb(255 255 255 / 0.2);
  --label-shine-b: rgb(255 255 255 / 0);
  --label-hole: #050507;

  /* --- semantic layer (light = default) --- */
  color-scheme: light;
  --color-bg: var(--light-bg);
  --color-bg-deep: var(--light-bg-deep);
  --color-surface: var(--light-surface);
  --color-surface-raised: var(--light-surface-raised);
  --color-border: var(--light-border);
  --color-rule: var(--light-rule);
  --color-ink: var(--light-ink);
  --color-ink-muted: var(--light-ink-muted);
  --color-link: var(--light-link);
  --color-link-hover: var(--light-link-hover);
  --color-marker-ink: var(--light-marker-ink);
  --color-notice-bg: var(--light-notice-bg);
  --color-notice-border: var(--light-notice-border);
  --color-notice-ink: var(--light-notice-ink);
  --color-accent-ink: var(--light-accent-ink);
  --color-grad-from: var(--light-grad-from);
  --color-grad-mid: var(--light-grad-mid);
  --color-grad-to: var(--light-grad-to);
  --color-bubble-in: var(--light-bubble-in);
  --color-phone-screen: var(--light-phone-screen);
  --color-phone-bar: var(--light-phone-bar);
  --color-pill-ink: var(--light-pill-ink);
  --color-wave-a: var(--light-wave-a);
  --color-wave-b: var(--light-wave-b);
  --color-wave-c: var(--light-wave-c);
  --color-cta-icon-bg: var(--light-cta-icon-bg);
  --color-cta-icon-ink: var(--light-cta-icon-ink);
  --color-card-hover: var(--light-card-hover);
  --color-border-hover: var(--light-border-hover);
  --surface-header: rgb(246 246 250 / 0.82);
  --shadow-hover: 0 2px 6px rgb(18 20 51 / 0.05), 0 18px 40px rgb(76 50 180 / 0.12);
  --color-label-a: var(--light-label-a);
  --color-label-b: var(--light-label-b);
  --color-label-c: var(--light-label-c);
  --color-label-d: var(--light-label-d);
  --color-label-ink: var(--light-label-ink);
  --surface-pill: linear-gradient(100deg, var(--color-cta-from), var(--color-cta-mid));
  --surface-card: var(--light-surface);
  --display-light: block;
  --display-dark: none;
  --shadow-card: 0 1px 2px rgb(18 20 51 / 0.04), 0 10px 30px rgb(18 20 51 / 0.06);
  --shadow-popular: 0 12px 40px rgb(122 60 255 / 0.12);
  --glow-hero: none;
  --glow-cta: 0 10px 28px rgb(122 60 255 / 0.28);
  --phone-frame: #111114;
  --scrim-noise: none;

  /* --- type --- */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  /* Type scale: fixed on phones, vw-scaled on desktop so 1280 and 1440 keep the mockups' proportions. */
  --text-xs: clamp(0.8125rem, 0.78rem + 0.12vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.15vw, 1.0625rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --text-xl: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
  --text-2xl: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
  --text-h2: clamp(1.875rem, 1.45rem + 1.3vw, 2.5rem);
  --text-h1: clamp(2.25rem, 1.35rem + 2.9vw, 3.875rem);
  --text-price: clamp(2.25rem, 1.8rem + 1.3vw, 3rem);
  --text-num: clamp(1.75rem, 1.45rem + 0.9vw, 2.25rem);
  --text-brand: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  /* Source Serif 4 at a text optical size: the mockups' wide, open serif (not the condensed display cut). */
  --serif-opsz: "opsz" 20;
  --leading-body: 1.6;
  --leading-tight: 1.2;
  --leading-display: 1.08;

  /* --- space / shape / depth --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  /* --- motion (all disabled under prefers-reduced-motion, base.css) --- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur: 260ms;
  --dur-slow: 700ms;
  --lift: -3px;
  --header-h: 68px;
  --mask-solid: linear-gradient(#000 0 0);
  /* an opaque mask stop (masks read alpha only; a colour-agnostic constant, not a theme colour) */
  --mask-opaque: #000;
  --color-star: #f5b301;
  --filter-hero-hover: drop-shadow(0 24px 30px rgb(0 0 0 / 0.14));
  --border-hair: 1px;
  --border-accent: 1.5px;

  /* --- layout --- */
  --width-page: 100%;
  --width-prose: 46rem;
  --gutter: 1rem;
  --tap-min: 44px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 2rem;
  }
}

/* Desktop: the content column is 88% of the viewport (the mockups' margins), capped. */
@media (min-width: 1000px) {
  :root {
    --width-page: min(calc(88vw + 2 * var(--gutter)), 84rem);
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: var(--dark-bg);
    --color-bg-deep: var(--dark-bg-deep);
    --color-surface: var(--dark-surface);
    --color-surface-raised: var(--dark-surface-raised);
    --color-border: var(--dark-border);
    --color-rule: var(--dark-rule);
    --color-ink: var(--dark-ink);
    --color-ink-muted: var(--dark-ink-muted);
    --color-link: var(--dark-link);
    --color-link-hover: var(--dark-link-hover);
    --color-marker-ink: var(--dark-marker-ink);
    --color-notice-bg: var(--dark-notice-bg);
    --color-notice-border: var(--dark-notice-border);
    --color-notice-ink: var(--dark-notice-ink);
    --color-accent-ink: var(--dark-accent-ink);
    --color-grad-from: var(--dark-grad-from);
    --color-grad-mid: var(--dark-grad-mid);
    --color-grad-to: var(--dark-grad-to);
    --color-bubble-in: var(--dark-bubble-in);
    --color-phone-screen: var(--dark-phone-screen);
    --color-phone-bar: var(--dark-phone-bar);
    --color-pill-ink: var(--dark-pill-ink);
    --color-wave-a: var(--dark-wave-a);
    --color-wave-b: var(--dark-wave-b);
    --color-wave-c: var(--dark-wave-c);
    --color-cta-icon-bg: var(--dark-cta-icon-bg);
    --color-cta-icon-ink: var(--dark-cta-icon-ink);
    --color-card-hover: var(--dark-card-hover);
    --color-border-hover: var(--dark-border-hover);
    --surface-header: rgb(9 9 15 / 0.78);
    --shadow-hover: 0 0 0 1px rgb(122 60 255 / 0.18), 0 18px 44px rgb(0 0 0 / 0.5), 0 0 40px rgb(122 60 255 / 0.12);
    --color-label-a: var(--dark-label-a);
    --color-label-b: var(--dark-label-b);
    --color-label-c: var(--dark-label-c);
    --color-label-d: var(--dark-label-d);
    --color-label-ink: var(--dark-label-ink);
    --surface-pill: linear-gradient(var(--dark-bg), var(--dark-bg));
    --surface-card: var(--dark-surface);
    --display-light: none;
    --display-dark: block;
    --shadow-card: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 12px 32px rgb(0 0 0 / 0.35);
    --shadow-popular: 0 0 36px rgb(122 60 255 / 0.22), 0 0 70px rgb(31 200 255 / 0.08);
    --glow-hero: radial-gradient(closest-side, rgb(140 70 255 / 0.78), rgb(104 64 255 / 0.4) 38%, rgb(60 80 255 / 0.12) 68%, transparent);
    --glow-cta: 0 10px 34px rgb(122 60 255 / 0.45), 0 4px 18px rgb(31 200 255 / 0.22);
    --phone-frame: #2a2a33;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--dark-bg);
  --color-bg-deep: var(--dark-bg-deep);
  --color-surface: var(--dark-surface);
  --color-surface-raised: var(--dark-surface-raised);
  --color-border: var(--dark-border);
  --color-rule: var(--dark-rule);
  --color-ink: var(--dark-ink);
  --color-ink-muted: var(--dark-ink-muted);
  --color-link: var(--dark-link);
  --color-link-hover: var(--dark-link-hover);
  --color-marker-ink: var(--dark-marker-ink);
  --color-notice-bg: var(--dark-notice-bg);
  --color-notice-border: var(--dark-notice-border);
  --color-notice-ink: var(--dark-notice-ink);
  --color-accent-ink: var(--dark-accent-ink);
  --color-grad-from: var(--dark-grad-from);
  --color-grad-mid: var(--dark-grad-mid);
  --color-grad-to: var(--dark-grad-to);
  --color-bubble-in: var(--dark-bubble-in);
  --color-phone-screen: var(--dark-phone-screen);
  --color-phone-bar: var(--dark-phone-bar);
  --color-pill-ink: var(--dark-pill-ink);
  --color-wave-a: var(--dark-wave-a);
  --color-wave-b: var(--dark-wave-b);
  --color-wave-c: var(--dark-wave-c);
  --color-cta-icon-bg: var(--dark-cta-icon-bg);
  --color-cta-icon-ink: var(--dark-cta-icon-ink);
  --color-card-hover: var(--dark-card-hover);
  --color-border-hover: var(--dark-border-hover);
  --surface-header: rgb(9 9 15 / 0.78);
  --shadow-hover: 0 0 0 1px rgb(122 60 255 / 0.18), 0 18px 44px rgb(0 0 0 / 0.5), 0 0 40px rgb(122 60 255 / 0.12);
  --color-label-a: var(--dark-label-a);
  --color-label-b: var(--dark-label-b);
  --color-label-c: var(--dark-label-c);
  --color-label-d: var(--dark-label-d);
  --color-label-ink: var(--dark-label-ink);
  --surface-pill: linear-gradient(var(--dark-bg), var(--dark-bg));
  --surface-card: var(--dark-surface);
  --display-light: none;
  --display-dark: block;
  --shadow-card: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 12px 32px rgb(0 0 0 / 0.35);
  --shadow-popular: 0 0 36px rgb(122 60 255 / 0.22), 0 0 70px rgb(31 200 255 / 0.08);
  --glow-hero: radial-gradient(closest-side, rgb(140 70 255 / 0.78), rgb(104 64 255 / 0.4) 38%, rgb(60 80 255 / 0.12) 68%, transparent);
  --glow-cta: 0 10px 34px rgb(122 60 255 / 0.45), 0 4px 18px rgb(31 200 255 / 0.22);
  --phone-frame: #2a2a33;
}

/* Derived gradients (after the theme blocks so they pick up the active stops). */
:root {
  --gradient-text: linear-gradient(95deg, var(--color-grad-from), var(--color-grad-mid) 55%, var(--color-grad-to));
  --gradient-accent-border: linear-gradient(120deg, var(--brand-magenta), var(--brand-violet) 40%, var(--brand-blue) 70%, var(--brand-cyan));
}

/* site/styles/base.css — reset + element defaults. Tokens only. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--color-bg);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  overflow-wrap: break-word;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  flex: 1 0 auto;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-link);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--color-link-hover);
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

h1,
h2,
h3 {
  line-height: var(--leading-tight);
  margin: 0;
}

p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 20;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-raised);
  color: var(--color-ink);
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  top: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* site/styles/components.css — the ONE component set (one block per component in build/components.ts
   and build/landing.ts). Tokens only: no raw colours here (test/tokens.test.ts). Mobile-first;
   the layout scales up at 640px (tablet) and 1000px (desktop). Motion: 180–300 ms, transform /
   opacity / colour only (no layout shift); base.css switches all of it off under reduced motion. */

/* container */
.container {
  width: 100%;
  max-width: var(--width-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--prose {
  max-width: calc(var(--width-prose) + 2 * var(--gutter));
}

/* brand-gradient accent word in headings */
.accent {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (forced-colors: active) {
  .accent {
    background: none;
    color: CanvasText;
  }
}

/* ---------- header (sticky) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: var(--border-hair) solid transparent;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.site-header.is-scrolled {
  background: var(--surface-header);
  border-bottom-color: var(--color-rule);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-h);
}

.site-header__controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.site-header__cta {
  display: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  color: var(--color-ink);
  font-weight: 800;
  font-size: var(--text-brand);
  letter-spacing: -0.015em;
  text-decoration: none;
  white-space: nowrap;
}

.brand:hover {
  color: var(--color-ink);
}

.brand__mark {
  width: 36px;
  height: 36px;
  transition: transform var(--dur) var(--ease-out);
}

.brand:hover .brand__mark {
  transform: rotate(-6deg) scale(1.04);
}

/* the trailing word of the product name («FUN», was «AI») — the brand text gradient */
.brand__accent {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* section anchors */
.nav {
  display: none;
}

.nav__list,
.menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__list {
  display: flex;
  gap: var(--space-1);
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-3);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 9px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--gradient-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}

.nav__link:hover,
.nav__link[aria-current="true"] {
  color: var(--color-ink);
}

.nav__link:hover::after,
.nav__link[aria-current="true"]::after {
  transform: scaleX(1);
}

@media (min-width: 1000px) {
  .nav {
    display: block;
    margin-inline-start: var(--space-5);
  }

  .site-header__cta {
    display: inline-flex;
  }
}

/* mobile menu sheet */
.menu {
  position: relative;
}

.menu__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}

.menu__toggle::-webkit-details-marker {
  display: none;
}

.menu__icon {
  width: 20px;
  height: 20px;
}

.menu__close,
.menu[open] .menu__bars {
  display: none;
}

.menu[open] .menu__close {
  display: inline;
}

.menu__sheet {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: min(78vw, 300px);
  padding: var(--space-3);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-hover);
  animation: sheet-in var(--dur) var(--ease-out);
}

.menu__list a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: none;
}

.menu__list a:hover,
.menu__list a[aria-current="true"] {
  background: var(--color-surface-raised);
}

@keyframes sheet-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@media (min-width: 1000px) {
  .menu {
    display: none;
  }
}

/* language switch (segmented) */
.lang-switch {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}

.lang-switch__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.lang-switch__item:hover {
  color: var(--color-ink);
}

.lang-switch__item[aria-current="true"] {
  background: var(--color-surface-raised);
  color: var(--color-ink);
}

.lang-switch--plain {
  border: 0;
  background: none;
}

/* phones: the header keeps brand + theme + menu; the language switch lives in the menu sheet */
.site-header__controls > .lang-switch {
  display: none;
}

.menu__sheet .lang-switch {
  align-self: flex-start;
}

@media (min-width: 640px) {
  .site-header__controls > .lang-switch {
    display: inline-flex;
  }

  .menu__sheet .lang-switch {
    display: none;
  }
}

/* theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-out);
}

.theme-toggle[hidden] {
  display: none;
}

.theme-toggle:hover {
  background: var(--color-surface-raised);
  transform: rotate(-12deg);
}

.theme-toggle__icon {
  width: 19px;
  height: 19px;
}

/* the icon shows the theme you switch TO */
.theme-toggle[aria-pressed="false"] .theme-toggle__icon--sun,
.theme-toggle[aria-pressed="true"] .theme-toggle__icon--moon {
  display: none;
}

/* ---------- buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: var(--space-2) var(--space-6);
  border: var(--border-hair) solid transparent;
  border-radius: var(--radius-md);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), filter var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.button--primary {
  background: var(--gradient-cta);
  color: var(--color-cta-ink);
  box-shadow: var(--glow-cta);
}

.button--primary:hover {
  color: var(--color-cta-ink);
  transform: translateY(var(--lift));
  filter: saturate(1.08) brightness(1.05);
}

.button--primary:active {
  transform: translateY(0);
}

.button--ghost {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink);
}

.button--ghost:hover {
  border-color: var(--color-border-hover);
  color: var(--color-ink);
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-hover);
}

/* smaller labels are not "large text": only the AA-safe stops (contrast test) */
.button--sm,
.button--buy.button--primary {
  background: var(--gradient-cta-safe);
}

.button--sm {
  min-height: 40px;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  box-shadow: none;
}

.button--with-icon {
  padding-inline-start: var(--space-2);
}

.button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--color-cta-icon-bg);
  color: var(--color-cta-icon-ink);
  transition: transform var(--dur) var(--ease-out);
}

.button:hover .button__icon {
  transform: translateX(2px) rotate(-8deg);
}

.button__icon svg {
  width: 20px;
  height: 20px;
  margin-inline-start: -2px;
}

@media (min-width: 1000px) {
  .button--hero {
    min-height: 58px;
    padding-inline: var(--space-2) var(--space-6);
  }
}

/* ---------- hero ---------- */
.hero {
  --hero-w: 112vw;
  position: relative;
  overflow-x: clip;
  padding-block: var(--space-5) 0;
}

.hero__inner {
  position: relative;
  z-index: 2;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero__title {
  font-family: var(--font-serif);
  font-variation-settings: var(--serif-opsz);
  font-weight: 400;
  font-size: var(--text-h1);
  line-height: var(--leading-display);
  letter-spacing: -0.018em;
}

.hero__subtitle {
  margin-top: var(--space-4);
  max-width: 27em;
  color: var(--color-ink-muted);
  font-size: var(--text-xl);
  line-height: 1.5;
}

.hero__copy .button {
  margin-top: var(--space-6);
}

.hero__note {
  margin-top: var(--space-4);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  font-weight: 500;
}

.hero__price {
  color: var(--color-accent-ink);
  font-weight: 800;
}

.hero__art {
  position: relative;
  width: var(--hero-w);
  margin-top: var(--space-5);
  margin-inline-start: calc(var(--gutter) * -1 - 0.02 * var(--hero-w));
  aspect-ratio: 4 / 3;
}

.hero__glow {
  position: absolute;
  left: 38%;
  top: 44%;
  width: 100%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: var(--glow-hero);
  opacity: 0.9;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out), scale var(--dur-slow) var(--ease-out);
}

.hero__object {
  position: absolute;
  inset: 0;
  transform-origin: 40% 60%;
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out);
}

.hero-art {
  position: absolute;
  inset: 0;
}

.hero-art--light {
  display: var(--display-light);
}

.hero-art--dark {
  display: var(--display-dark);
}

.hero-art__img {
  width: 100%;
  height: auto;
}

/* The stable wrapper (.hero__art, plus a small margin via ::before) is the hover target; only the
   inner object moves, so the zone never shifts under the pointer (no edge jitter). The copy column
   above it lets the pointer through except on its own content. */
.hero__inner {
  pointer-events: none;
}

.hero__copy {
  pointer-events: auto;
}

.hero__art::before {
  content: "";
  position: absolute;
  inset: -24px;
}

@media (hover: hover) {
  .hero__art:hover .hero__object {
    transform: perspective(1400px) rotateY(-5deg) rotateX(2deg) rotate(-1deg) translateY(-8px) scale(1.012);
    filter: var(--filter-hero-hover);
  }

  .hero__art:hover .hero__glow {
    opacity: 1;
    scale: 1.08;
  }
}

@media (min-width: 640px) and (max-width: 999px) {
  .hero {
    --hero-w: min(84vw, 720px);
  }

  .hero__art {
    margin-inline-start: calc((100vw - var(--hero-w)) / 2 - var(--gutter));
  }
}

@media (min-width: 1000px) {
  .hero {
    --hero-w: min(52vw, 820px);
    min-height: calc(var(--hero-w) * 0.7);
    padding-block: calc(var(--hero-w) * 0.1) var(--space-7);
  }

  .hero__copy {
    max-width: min(34rem, calc(100vw - var(--hero-w) * 0.78 - var(--gutter) - 1.5rem));
  }

  .hero__art {
    position: absolute;
    right: calc(var(--hero-w) * -0.14);
    top: calc(var(--hero-w) * -0.06);
    margin: 0;
    z-index: 1;
  }
}

/* ---------- sections ---------- */
.section {
  position: relative;
  padding-block: var(--space-7);
  border-top: var(--border-hair) solid var(--color-rule);
  scroll-margin-top: var(--header-h);
}

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-block-end: var(--space-6);
}

.section__head .section__title {
  margin: 0;
}

.section__title {
  font-family: var(--font-serif);
  font-variation-settings: var(--serif-opsz);
  font-weight: 400;
  font-size: var(--text-h2);
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin-block-end: var(--space-6);
}

@media (min-width: 1000px) {
  .section {
    padding-block: var(--space-8);
  }
}

/* scroll reveal (ui.js adds .reveal-on only when motion is allowed) */
.reveal-on [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

.reveal-on [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

.reveal-on [data-reveal] [data-reveal-item] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

.reveal-on [data-reveal].is-in [data-reveal-item] {
  opacity: 1;
  transform: none;
}

.reveal-on [data-reveal].is-in [data-reveal-item]:nth-child(2) {
  transition-delay: 80ms;
}

.reveal-on [data-reveal].is-in [data-reveal-item]:nth-child(3) {
  transition-delay: 160ms;
}

/* shared small elements */
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 var(--space-3);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-raised);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.tag--new {
  min-height: 20px;
  padding: 0 var(--space-2);
  border: 0;
  background: var(--gradient-cta-safe);
  color: var(--color-cta-ink);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tag--quiet {
  background: none;
  color: var(--color-ink-muted);
  font-weight: 500;
}

/* the footer's 18+ line: plain muted text (founder 2026-09-24) */
.chip {
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
}

/* shared card hover (examples, packs, FAQ rows) */
.sample,
.faq__item {
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

@media (hover: hover) {
  .sample:hover {
    transform: translateY(var(--lift));
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow-hover);
  }
}

.sample:focus-within {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-hover);
}

/* ---------- examples ---------- */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.wave-stop--a {
  stop-color: var(--color-wave-a);
}

.wave-stop--b {
  stop-color: var(--color-wave-b);
}

.wave-stop--c {
  stop-color: var(--color-wave-c);
}

.samples {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* BL-11 carousel: ONE row of cards that scrolls inside its own track (never the page). WHOLE cards only (founder
   2026-09-28: no cut-off preview of the next card): 1 per view on phones, 2 from 640 px, 3 from 1000 px, 4 from 1280 px
   (where a card is wide enough for "value + NEW") — n cards + (n - 1) gaps = the track's content width exactly. The 8
   subgrid rows keep every card's rows aligned across the row.
   No box behind the cards (founder 2026-09-29): the region and the track paint nothing. A scroll container clips
   BOTH axes, so the track carries its own room for the card shadow / hover lift + glow (padding, cancelled by an
   equal negative margin: no layout cost) and fades whatever reaches its edge through a mask — a shadow that ended in
   a hard clipped line read as a grey box. Inline, the bleed is exactly one gap, so at rest the neighbour card starts
   at the edge where the mask is already transparent: it never shows. */
.carousel {
  position: relative;
}

.samples--carousel {
  --per-view-gap: var(--space-4);
  --carousel-bleed: var(--per-view-gap);
  --carousel-pad-top: var(--space-6);
  --carousel-pad-bottom: var(--space-7);
  /* the block-axis fade stays inside the padding: a lifted (hover) card is fully opaque */
  --carousel-fade: var(--space-4);
  /* the containing block of the cards' absolutely positioned (visually hidden) headings: without it they escape the
     scroll clip and widen the PAGE (measured 2026-09-28: scrollWidth 1807 at a 1280 viewport) */
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  grid-template-rows: repeat(8, auto);
  column-gap: var(--per-view-gap);
  row-gap: 0;
  margin: calc(-1 * var(--carousel-pad-top)) calc(-1 * var(--carousel-bleed)) calc(-1 * var(--carousel-pad-bottom));
  padding: var(--carousel-pad-top) var(--carousel-bleed) var(--carousel-pad-bottom);
  -webkit-mask-image: linear-gradient(to right, transparent, var(--mask-opaque) var(--carousel-bleed), var(--mask-opaque) calc(100% - var(--carousel-bleed)), transparent), linear-gradient(to bottom, transparent, var(--mask-opaque) var(--carousel-fade), var(--mask-opaque) calc(100% - var(--carousel-fade)), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, var(--mask-opaque) var(--carousel-bleed), var(--mask-opaque) calc(100% - var(--carousel-bleed)), transparent), linear-gradient(to bottom, transparent, var(--mask-opaque) var(--carousel-fade), var(--mask-opaque) calc(100% - var(--carousel-fade)), transparent);
  mask-composite: intersect;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--carousel-bleed);
  scroll-behavior: smooth;
}

.samples--carousel > .sample {
  scroll-snap-align: start;
}

/* with the arrows wired, the native scrollbar is redundant (without JS it stays: the mouse-only fallback) */
.carousel.is-enhanced .samples--carousel {
  scrollbar-width: none;
}

.carousel.is-enhanced .samples--carousel::-webkit-scrollbar {
  display: none;
}

@media (min-width: 640px) {
  .samples--carousel {
    grid-auto-columns: calc((100% - var(--per-view-gap)) / 2);
  }
}

@media (min-width: 1000px) {
  .samples--carousel {
    grid-auto-columns: calc((100% - 2 * var(--per-view-gap)) / 3);
  }
}

@media (min-width: 1280px) {
  .samples--carousel {
    grid-auto-columns: calc((100% - 3 * var(--per-view-gap)) / 4);
  }

  .samples--carousel .sample {
    padding-inline: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .samples--carousel {
    scroll-behavior: auto;
  }
}

/* The arrows: a pair in the heading row, right-aligned after the title (.section__head is a space-between flex row;
   founder 2026-09-29, as before the row-edge overlay). The row never wraps here: on a phone the title wraps inside its
   own box and the pair stays on the right of it. Dimmed + disabled at the start / end. */
.section--samples .section__head {
  flex-wrap: nowrap;
}

.carousel__controls {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.carousel__controls[hidden] {
  display: none;
}

.carousel__btn {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.carousel__btn svg {
  width: 22px;
  height: 22px;
}

.carousel__btn:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-pill);
}

@media (hover: hover) {
  .carousel__btn:not(:disabled):hover {
    border-color: var(--color-border-hover);
  }
}

.carousel__btn:disabled {
  opacity: 0.38;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .carousel__btn {
    transition: none;
  }
}

/* Cards share one row grid (subgrid): 5 answer rows · description · duration · player, so every
   answer row, the description and the player line up across cards (a row that wraps — e.g. a
   value with a NEW badge — grows the same row in every card). */
.sample {
  --progress: 0;
  display: grid;
  grid-row: span 8;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  padding: var(--space-5);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}

.answers {
  display: contents;
}

.answers__row {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-2);
  padding-block: 6px;
  border-bottom: var(--border-hair) dashed var(--color-rule);
}

.answers__row:first-child {
  padding-top: 0;
}

.answers dt {
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
}

.answers dd {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* value + NEW badge always stay on ONE line; narrow cards get a compact badge (container query) */
.answers dd {
  container: answer / inline-size;
}

.answers__value {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.answers__new {
  min-height: 17px;
  padding: 0 6px;
  font-size: 0.625rem;
  letter-spacing: 0.05em;
  line-height: 1;
}

@container answer (max-width: 11rem) {
  .answers__new {
    min-height: 15px;
    padding: 0 4px;
    font-size: 0.5625rem;
    letter-spacing: 0.02em;
  }
}

.sample__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-2);
}

.sample__time {
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.sample__time--soon {
  font-style: italic;
}

.sample__desc {
  margin-top: var(--space-4);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
  flex: 1 1 auto;
}

.player__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border-hair) solid var(--color-rule);
}

.player__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--gradient-cta);
  color: var(--color-cta-ink);
  box-shadow: var(--glow-cta);
  cursor: pointer;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.player__btn:hover:not(:disabled) {
  transform: scale(1.06);
}

.player__btn svg {
  width: 22px;
  height: 22px;
}

.player__btn .icon-pause,
.player.is-playing .player__btn .icon-play {
  display: none;
}

.player.is-playing .player__btn .icon-pause {
  display: block;
}

.player.is-playing .player__btn {
  animation: pulse 1.8s var(--ease-out) infinite;
}

@keyframes pulse {
  50% {
    transform: scale(1.05);
  }
}

.player__btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  box-shadow: none;
}

.wave {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
}

.wave[data-player-seek] {
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.wave svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.wave__base {
  transition: opacity var(--dur) var(--ease-out);
}

.wave__played {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc((1 - var(--progress)) * 100%) 0 0);
}

.player.is-active .wave__base {
  opacity: 0.3;
}

.player:not(.is-active) .wave__played {
  display: none;
}

.player--soon .wave {
  opacity: 0.4;
}

/* ---------- what you choose ---------- */
.options {
  display: grid;
  gap: var(--space-6);
}

.options__lead {
  max-width: 26rem;
  color: var(--color-ink-muted);
  font-size: var(--text-base);
}

.options__intro .section__title {
  margin-block-end: var(--space-3);
}

.options__groups {
  display: grid;
  gap: var(--space-6);
}

.options__label {
  margin-block-end: var(--space-3);
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.choices,
.pills,
.tags {
  list-style: none;
  margin: 0;
  padding: 0;
}

.choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.choice {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.choice:hover {
  border-color: var(--color-border-hover);
  transform: translateY(-2px);
}

.choice {
  position: relative;
}

.choice__name {
  font-weight: 700;
}

/* in the option cards the NEW badge sits in the corner, so it never competes with the name */
.choice .answers__new {
  position: absolute;
  top: -8px;
  right: var(--space-3);
}

.choice__text {
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.pills,
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-4);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  font-weight: 600;
}

@media (min-width: 1000px) {
  .choices {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .options {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
    gap: var(--space-8);
  }
}

/* ---------- how it works ---------- */
.section--how {
  overflow: hidden;
  padding-bottom: 0;
}

.how {
  display: grid;
  gap: var(--space-6);
}

.how__steps {
  padding-bottom: var(--space-2);
}

.steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-6);
  display: grid;
  gap: var(--space-4);
}

.steps::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.9em;
  bottom: 0.9em;
  width: 1px;
  background: linear-gradient(180deg, var(--color-grad-from), var(--color-grad-to));
  opacity: 0.5;
}

.step {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 52px;
}

.step::before {
  content: "";
  position: absolute;
  left: calc(var(--space-6) * -1);
  top: 50%;
  width: 9px;
  height: 9px;
  translate: 0 -50%;
  border-radius: var(--radius-pill);
  background: var(--gradient-text);
}

.step__num {
  flex: none;
  width: 2.2ch;
  font-family: var(--font-serif);
  font-variation-settings: var(--serif-opsz);
  font-size: var(--text-num);
  line-height: 1;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.step__text {
  font-size: var(--text-lg);
  color: var(--color-ink);
}

@media (min-width: 1000px) {
  .how {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-8);
  }

  .how__steps {
    padding-bottom: var(--space-8);
  }
}

/* phone (Telegram chat illustration) */
.phone {
  justify-self: center;
  width: min(100%, 440px);
  margin: 0;
  padding: 10px 10px 0;
  border-radius: 42px 42px 0 0;
  background: var(--phone-frame);
  box-shadow: var(--shadow-card);
}

.phone__screen {
  overflow: hidden;
  height: 340px;
  border-radius: 33px 33px 0 0;
  background: var(--color-phone-screen);
}

@media (min-width: 1000px) {
  .phone {
    justify-self: end;
    width: min(100%, 34vw, 480px);
    margin-inline-end: 6%;
  }

  .phone__screen {
    height: calc(min(34vw, 480px) * 0.8);
  }
}

.phone__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-4);
  background: var(--color-phone-bar);
  border-bottom: var(--border-hair) solid var(--color-border);
}

.phone__icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: var(--color-ink);
}

.phone__icon svg {
  width: 22px;
  height: 22px;
}

.phone__icon--end {
  margin-inline-start: auto;
}

.phone__avatar {
  width: 38px;
  height: 38px;
}

.phone__who {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.phone__name {
  font-weight: 700;
  font-size: var(--text-lg);
}

.phone__status {
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.phone__chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-4);
}

.bubble {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  max-width: 88%;
  padding: var(--space-3) var(--space-4);
  border-radius: 18px;
  font-size: var(--text-base);
}

.bubble--in {
  align-self: flex-start;
  border-bottom-left-radius: 6px;
  background: var(--color-bubble-in);
  color: var(--color-ink);
}

.bubble--out {
  align-self: flex-end;
  align-items: center;
  gap: var(--space-4);
  min-width: 70%;
  padding: var(--space-3) var(--space-4);
  border-bottom-right-radius: 6px;
  background: var(--gradient-cta);
  color: var(--color-cta-ink);
}

.bubble__time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
  font-size: var(--text-xs);
  opacity: 0.75;
  white-space: nowrap;
  align-self: flex-end;
}

.bubble__ticks {
  width: 16px;
  height: 10px;
}

.bubble__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink-on-white);
}

.bubble__play svg {
  width: 22px;
  height: 22px;
}

.bubble__text {
  font-weight: 600;
  font-size: var(--text-lg);
}

/* ---------- pricing ---------- */
.packs {
  list-style: none;
  margin: 0;
  padding: var(--space-3) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--space-6);
}

/* stacked cards (phones): the space between cards sits on the card, not in the shared row grid */
.pack + .pack {
  margin-top: var(--space-6);
}

@media (min-width: 640px) {
  .pack + .pack {
    margin-top: 0;
  }
}

@media (min-width: 640px) {
  .packs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

@media (min-width: 1000px) {
  .packs {
    gap: var(--space-6);
  }
}

/* Cards share one row grid (subgrid): tier · title · price · per-song · Stars · rule · perks · CTA,
   so prices, perks and buttons line up across cards (the 1-song card keeps an empty per-song row). */
.pack {
  position: relative;
  display: grid;
  grid-row: span 8;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: var(--space-6) var(--space-5) var(--space-5);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
  text-align: start;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

/* The accent frame: a gradient ring drawn by ::before so it can fade (backgrounds cannot).
   It sits on the recommended pack and follows hover / keyboard focus to any card. */
.pack::before {
  content: "";
  position: absolute;
  inset: calc(var(--border-accent) * -1);
  padding: var(--border-accent);
  border-radius: inherit;
  background: var(--gradient-accent-border);
  -webkit-mask: var(--mask-solid) content-box, var(--mask-solid);
  -webkit-mask-composite: xor;
  mask: var(--mask-solid) content-box exclude, var(--mask-solid);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out);
}

.pack--popular::before,
.pack:hover::before,
.pack:focus-within::before {
  opacity: 1;
}

.pack--popular,
.pack:hover,
.pack:focus-within {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-popular);
}

/* something else is hovered/focused: the recommended card hands the frame over */
.packs:has(.pack:hover, .pack:focus-within) .pack--popular:not(:hover, :focus-within)::before {
  opacity: 0;
}

.packs:has(.pack:hover, .pack:focus-within) .pack--popular:not(:hover, :focus-within) {
  transform: none;
  box-shadow: var(--shadow-card);
}

.pack__pill {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  z-index: 1;
  padding: 2px var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--gradient-cta-safe);
  color: var(--color-cta-ink);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pack__tier {
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pack--popular .pack__tier {
  color: var(--color-accent-ink);
}

.pack__title {
  margin-top: var(--space-2);
  font-family: var(--font-serif);
  font-variation-settings: var(--serif-opsz);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: 1.15;
}

.pack__price {
  display: flex;
  margin-top: var(--space-4);
  font-family: var(--font-serif);
  font-variation-settings: var(--serif-opsz);
  font-size: var(--text-price);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.price {
  display: inline-flex;
  align-items: flex-start;
}

.price__cur {
  margin-top: 0.16em;
  margin-inline-end: 0.04em;
  font-size: 0.52em;
}

.price__num + .price__cur {
  align-self: flex-end;
  margin: 0 0 0.14em 0.14em;
  font-size: 0.48em;
}

.pack__per {
  margin-top: var(--space-1);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.pack__save {
  color: var(--color-accent-ink);
  font-weight: 700;
}

.pack__alt {
  margin-top: var(--space-2);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.stars-price {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-inline: 0.25em;
  color: var(--color-ink);
  font-weight: 700;
}

.stars-price__cur {
  display: inline-flex;
}

.stars-price .star {
  width: 1em;
  height: 1em;
  color: var(--color-star);
}

.pack__rule {
  width: 100%;
  height: 0;
  margin: var(--space-5) 0 var(--space-4);
  border: 0;
  border-top: var(--border-hair) solid var(--color-rule);
}

.pack__features {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.pack__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.pack__check {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--color-accent-ink);
}

.button--buy {
  align-self: end;
  width: 100%;
  min-height: 48px;
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
}

.pricing__note,
.pricing__demo {
  margin-top: var(--space-6);
  text-align: center;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.pricing__note--licence {
  margin-top: var(--space-1);
}

.pricing__demo {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
}

/* ---------- FAQ ---------- */
.faq {
  display: grid;
  gap: var(--space-3);
}

.faq__item {
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  interpolate-size: allow-keywords;
}

.faq__item:hover,
.faq__item[open] {
  border-color: var(--color-border-hover);
}

.faq__item[open] {
  box-shadow: var(--shadow-card);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 60px;
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.35;
  border-radius: var(--radius-md);
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__chevron {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--color-ink-muted);
  transition: rotate var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.faq__item:hover .faq__chevron {
  color: var(--color-ink);
}

.faq__item[open] .faq__chevron {
  rotate: 180deg;
}

.faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size var(--dur) var(--ease-out), content-visibility var(--dur) allow-discrete;
}

.faq__item[open]::details-content {
  block-size: auto;
}

.faq__a {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--color-ink-muted);
  line-height: 1.65;
  max-width: 48rem;
}

@media (min-width: 1000px) {
  .faq__q {
    padding-inline: var(--space-6);
  }

  .faq__a {
    padding-inline: var(--space-6);
  }
}

/* ---------- Telegram band ---------- */
.tg-band {
  padding-block: var(--space-6) var(--space-8);
}

.tg-band__box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-6);
  border: var(--border-accent) solid transparent;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
    var(--gradient-accent-border) border-box;
}

.tg-band__title {
  flex: 1 1 auto;
  font-family: var(--font-serif);
  font-variation-settings: var(--serif-opsz);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.button--band {
  flex: none;
  white-space: nowrap;
}

@media (min-width: 760px) {
  .tg-band__box {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-7) var(--space-8);
  }
}

/* ---------- footer (columns) ---------- */
.site-footer {
  padding-block: var(--space-7) var(--space-5);
  border-top: var(--border-hair) solid var(--color-rule);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-4);
}

/* phones: brand and documents take the full width; support + menu sit side by side */
.site-footer__grid > .footer-col:nth-child(-n + 2) {
  grid-column: 1 / -1;
}

@media (min-width: 1000px) {
  .site-footer__grid > .footer-col:nth-child(-n + 2) {
    grid-column: auto;
  }
}

@media (min-width: 1000px) {
  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 0.8fr;
    gap: var(--space-7);
  }
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-col__tagline {
  max-width: 22rem;
}

.footer-col__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-col__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}

.footer-col__list li {
  display: flex;
  align-items: center;
  min-height: 32px;
}

.footer-col__list .is-muted {
  opacity: 0.8;
  font-size: var(--text-xs);
}

.footer-col__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-ink-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.footer-col__list a:hover,
.footer-col__list a[aria-current="page"] {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: var(--border-hair) solid var(--color-rule);
  font-size: var(--text-xs);
}

/* ---------- doc article (rendered legal markdown) ---------- */
.doc {
  padding-block: var(--space-5) var(--space-7);
}

.doc h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-h2);
  margin-block-end: var(--space-4);
}

.doc h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-2xl);
  margin-block: var(--space-6) var(--space-3);
}

.doc h3 {
  font-size: var(--text-lg);
  margin-block: var(--space-5) var(--space-2);
}

.doc p,
.doc ul,
.doc ol {
  margin-block: 0 var(--space-4);
}

.doc ul,
.doc ol {
  padding-inline-start: var(--space-5);
}

.doc li + li {
  margin-block-start: var(--space-1);
}

.doc strong {
  color: var(--color-ink);
}

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  margin-block: 0 var(--space-5);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-md);
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.doc th,
.doc td {
  overflow-wrap: normal;
  padding: var(--space-3) var(--space-4);
  text-align: start;
  border-bottom: var(--border-hair) solid var(--color-border);
  vertical-align: top;
}

.doc th:first-child,
.doc td:first-child {
  white-space: nowrap;
}

.doc tr:last-child td {
  border-bottom: 0;
}

.doc th {
  background: var(--color-surface-raised);
}

.marker {
  color: var(--color-marker-ink);
  font-style: italic;
}

/* notice */
.notice {
  margin-block: 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: var(--border-hair) solid var(--color-notice-border);
  border-radius: var(--radius-md);
  background: var(--color-notice-bg);
  color: var(--color-notice-ink);
}

/* breadcrumb back link */
.back-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--text-sm);
}

/* root language chooser */
.chooser {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-8);
  text-align: center;
}

.chooser h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-h2);
}

.chooser__options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

/* reduced motion: no lifts, tilts or pulses (base.css already removes transitions/animations) */
@media (prefers-reduced-motion: reduce) {
  .hero__art:hover .hero__object,
  .sample:hover,
  .pack,
  .pack:hover,
  .pack:focus-within,
  .choice:hover,
  .button:hover,
  .button:hover .button__icon,
  .theme-toggle:hover,
  .brand:hover .brand__mark,
  .player__btn:hover:not(:disabled) {
    transform: none;
  }
}

/* BL-11: a genre tag carrying the NEW badge (the badge sits inside the quiet tag) */
.tag--has-new {
  gap: var(--space-2);
  padding-inline-end: var(--space-1);
}