/*
 * bre — marketing site.
 *
 * The tokens below are the app's tokens (src/theme/index.ts, docs/DESIGN_SYSTEM.md)
 * restated in CSS, not a second palette: a white page, warm near-black ink,
 * warm gray for everything secondary, purple for a choice you made, cyan for
 * sound happening now. The four logo colours (yellow, pink, purple, cyan) are
 * LOCKED and appear only as strokes, small glyphs and the two gradients — the
 * ring around the composer and the glow rising from the bottom of a screen.
 * Pink always sits between yellow and cyan so no interpolation passes through
 * green, which must never appear.
 *
 * Nothing here is generated. If a value changes in the app's theme, change it
 * here too — that is cheaper than a build step for eight custom properties.
 */

:root {
  /* Logo colours — gradients and strokes only, never a fill behind text. */
  --yellow: #ffd93d;
  --pink: #ff3eb5;
  --purple: #8b5cff;
  --cyan: #00c6ff;

  --bg: #ffffff;
  --surface: #f7f6f3;
  --surface-pressed: #f0eeea;
  --ink: #111114;
  --ink-pressed: #26262b;
  --on-ink: #ffffff;
  --text-muted: #6b6760;
  --text-faint: #8c8781;
  --border: #e4e1db;
  --border-strong: #d6d2cb;
  --accent: #8b5cff;
  --accent-text: #5b2ed6;
  --live: #00c6ff;
  --live-text: #007099;
  --wordmark: #000000;

  --gutter: 20px;
  --max: 1140px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-float: 0 6px 16px rgba(17, 17, 20, 0.1);
  --shadow-dock: 0 12px 28px rgba(17, 17, 20, 0.16);

  /* Set by scripts/site.js; every scroll-driven rule reads one of these. */
  --p: 0;
  --scroll: 0;
}

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p {
  margin: 0;
}

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

.skip:focus-visible {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 16px;
  clip-path: none;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--on-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.billing button:focus-visible,
.nav__links a:focus-visible,
.footer nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-pill);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── The wordmark ──────────────────────────────────────────────────────────
   Fredoka Bold, lowercase, and only ever the three letters. Its letterfit
   follows the logo rather than the interface, so the tracking opens instead
   of closing (src/theme/index.ts). */
.wordmark {
  font-family: Fredoka, Inter, sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--wordmark);
  text-transform: lowercase;
}

/* ── Type scale ────────────────────────────────────────────────────────── */
.display {
  font-size: clamp(36px, 6.1vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.032em;
  font-weight: 600;
}

.title {
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.026em;
  font-weight: 600;
}

.lede {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.55;
  color: var(--text-muted);
}

.eyebrow {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ── The glow ──────────────────────────────────────────────────────────────
   The app's one ambient gradient: it rises from the bottom of a screen and
   never reads as a fill. Here it sits behind a section and drifts on scroll. */
.glow {
  position: absolute;
  inset: auto 0 -20% 0;
  height: 70%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 70% at 18% 100%, rgba(255, 217, 61, 0.42), transparent 70%),
    radial-gradient(56% 74% at 46% 106%, rgba(255, 62, 181, 0.4), transparent 72%),
    radial-gradient(56% 74% at 72% 100%, rgba(139, 92, 255, 0.38), transparent 72%),
    radial-gradient(60% 68% at 96% 104%, rgba(0, 198, 255, 0.34), transparent 70%);
  filter: blur(18px);
  transform: translate3d(calc(var(--scroll) * -34px), 0, 0);
}

/* ── Buttons ───────────────────────────────────────────────────────────────
   Solid ink, or white with a hairline outline. No gradient fills. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn--ink {
  background: var(--ink);
  color: var(--on-ink);
}

.btn--ink:hover {
  background: var(--ink-pressed);
}

.btn--ghost {
  background: var(--bg);
  border-color: var(--border-strong);
  color: var(--ink);
}

.btn--ghost:hover {
  background: var(--surface);
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── Nav ───────────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}

.nav.is-stuck {
  border-bottom-color: var(--border);
}

.nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 68px;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.nav__brand img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.nav__brand .wordmark {
  font-size: 24px;
}

.nav__links {
  display: none;
  gap: 28px;
  align-items: center;
}

.nav__links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
}

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

.nav .btn {
  min-height: 42px;
  padding: 0 18px;
  font-size: 15px;
}

@media (min-width: 860px) {
  .nav__links {
    display: flex;
  }
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 9vw, 110px) 0 clamp(60px, 8vw, 120px);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}

@media (min-width: 980px) {
  .hero__inner {
    grid-template-columns: 1.08fr 0.92fr;
  }
}

.hero__mark {
  width: 84px;
  height: 84px;
  margin-bottom: 26px;
  border-radius: 21px;
  filter: drop-shadow(0 14px 30px rgba(139, 92, 255, 0.28));
  transform: translate3d(0, calc(var(--scroll) * -18px), 0);
}

.hero h1 {
  max-width: 15ch;
}

.hero__lede {
  max-width: 46ch;
  margin-top: 22px;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero__note {
  margin-top: 18px;
  font-size: 14px;
  color: var(--text-muted);
}

/* The headline reveals a word at a time, from the bottom, clipped. */
.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.word > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 55ms);
}

.is-in .word > span,
.no-motion .word > span {
  transform: translateY(0);
}

/* ── The phone ─────────────────────────────────────────────────────────────
   A CSS model of the real screens rather than a screenshot, so it stays true
   when the app moves and stays sharp at any size. */
.phone {
  --w: 300px;
  position: relative;
  width: var(--w);
  aspect-ratio: 300 / 620;
  margin: 0 auto;
  padding: 10px;
  border-radius: 46px;
  background: #0c0c0f;
  box-shadow: var(--shadow-dock), 0 40px 80px rgba(17, 17, 20, 0.18);
}

@media (min-width: 600px) {
  .phone {
    --w: 330px;
  }
}

.phone__screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 26px 16px 18px;
  border-radius: 37px;
  background: var(--bg);
}

.phone__screen .glow {
  height: 46%;
  opacity: 0.85;
  filter: blur(22px);
}

.phone__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.phone__top .wordmark {
  font-size: 19px;
}

.phone__brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* The plan badge: a hairline outline in the brand gradient, never a fill. */
.plan-badge {
  padding: 1px;
  border-radius: 6px;
  background: conic-gradient(
    from var(--angle),
    var(--yellow),
    var(--pink),
    var(--purple),
    var(--cyan),
    var(--pink),
    var(--yellow)
  );
  animation: spin 9s linear infinite;
  font-size: 0;
}

.plan-badge::after {
  content: "Ultra";
  display: block;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--bg);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
}

.avatar {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

/* The composer, with the rotating gradient stroke. Two elements: a conic
   gradient with 2px of padding, and a white box inside it. */
.composer {
  position: relative;
  z-index: 1;
  padding: 2px;
  border-radius: var(--radius-lg);
  background: conic-gradient(
    from var(--angle),
    var(--yellow),
    var(--pink),
    var(--purple),
    var(--cyan),
    var(--pink),
    var(--yellow)
  );
  animation: spin 7s linear infinite;
}

@keyframes spin {
  to {
    --angle: 360deg;
  }
}

.composer__box {
  border-radius: 20px;
  background: var(--bg);
  padding: 13px 13px 10px;
}

.composer__text {
  min-height: 52px;
  font-size: 14px;
  line-height: 19px;
  color: var(--ink);
}

.composer__text:empty::before,
.composer__text.is-empty::before {
  content: "Ask bre any topic…";
  color: var(--text-faint);
}

.caret {
  display: inline-block;
  width: 1.5px;
  height: 14px;
  margin-left: 1px;
  vertical-align: -2px;
  background: var(--ink);
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.composer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-top: 10px;
}

/* The composer's own row runs tighter than a pill elsewhere on the page: four
   controls have to fit across a 300px phone without the Talk waveform sliding
   out past the gradient stroke. */
.composer__row .pill {
  height: 25px;
  padding: 0 9px;
  font-size: 10.5px;
}

.composer__row .icon-btn {
  width: 26px;
  height: 26px;
}

.composer__row .wave {
  height: 12px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.icon-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--text-muted);
}

.go {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--surface-pressed);
  color: var(--text-faint);
  transition: background-color 260ms ease, color 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.go.is-ready {
  background: var(--ink);
  color: var(--on-ink);
  transform: scale(1.06);
}

.tools {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.tools .pill {
  height: 32px;
}

/* Recent: the quiet list of the last few episodes, with the thin progress
   bar that says how much is left. */
.phone__label {
  position: relative;
  z-index: 1;
  margin: 20px 0 8px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.recent {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1px;
}

.recent__row {
  display: grid;
  gap: 4px;
  padding: 10px 0 11px;
  border-top: 1px solid var(--border);
}

.recent__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.recent__play {
  flex: none;
  color: var(--text-faint);
  line-height: 0;
}

.badge {
  padding: 1px 5px;
  margin-right: 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 8.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.recent__title {
  font-size: 12px;
  font-weight: 500;
  line-height: 15px;
  color: var(--ink);
}

.recent__meta {
  font-size: 10px;
  color: var(--text-faint);
}

/* A track that is visible next to its fill reads as a progress bar; an almost
   invisible one makes a finished episode's full fill read as a rule. */
.recent__bar {
  height: 3px;
  margin-top: 5px;
  border-radius: 3px;
  background: var(--surface-pressed);
}

.recent__bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--ink);
}

/* The Library / Downloads tiles: a white squircle with a brand halo that
   blends into the page rather than outlining itself. */
.tiles {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 22px;
}

.tile {
  position: relative;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow-float);
}

.tile::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 26px;
  background: conic-gradient(
    from var(--angle),
    var(--yellow),
    var(--pink),
    var(--purple),
    var(--cyan),
    var(--pink),
    var(--yellow)
  );
  filter: blur(9px);
  opacity: 0.55;
  z-index: -1;
  animation: spin 9s linear infinite;
}

/* Only the lit tile wears the travelling halo; the other is a plain white
   squircle with a hairline edge, and both carry their label underneath. */
.tile::before {
  opacity: 0;
}

.tile--lit::before {
  opacity: 0.55;
}

.tile:not(.tile--lit) {
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-float);
}

.tool {
  display: grid;
  justify-items: center;
  gap: 5px;
}

.tool__label {
  font-size: 9.5px;
  font-weight: 500;
  color: var(--text-muted);
}

/* ── Scroll scenes ─────────────────────────────────────────────────────────
   A tall section whose stage is sticky for its whole height. site.js writes
   --p (0 at the top of the run, 1 at the bottom) on the section. */
/* The scroll run a scene gets. The stage is pinned for this whole height, so
   the number is "how much scrolling the scene is worth" — long enough for a
   sentence to type out, short enough that a phone reader never feels stuck. */
.scene {
  position: relative;
  min-height: 260svh;
}

.scene--short {
  min-height: 190svh;
}

.scene__stage {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 88px 0 32px;
  overflow: hidden;
}

.scene__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
  width: 100%;
}

@media (min-width: 980px) {
  .scene__grid {
    grid-template-columns: 1fr 1fr;
  }

  .scene--flip .scene__grid > :first-child {
    order: 2;
  }
}

.scene__copy h2 {
  max-width: 15ch;
}

.scene__copy .lede {
  max-width: 44ch;
  margin-top: 18px;
}

/* The three beats under a scene's copy light up as the scene advances. */
.beats {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}

.beat {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 13px 0;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  transition: color 320ms ease;
}

.beat__dot {
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background-color 320ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.beat.is-on {
  color: var(--ink);
}

.beat.is-on .beat__dot {
  background: var(--accent);
  transform: scale(1.35);
}

.beat strong {
  font-weight: 600;
}

.beat span {
  display: block;
  font-size: 14.5px;
  color: var(--text-muted);
}

/* ── The conversation ──────────────────────────────────────────────────── */
.talk {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  align-content: end;
  height: 100%;
  padding-top: 8px;
}

.line {
  display: flex;
  gap: 9px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.line.is-on {
  opacity: 1;
  transform: none;
}

.line__who {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--on-ink);
}

.line__who--a {
  background: var(--purple);
}

.line__who--b {
  background: var(--pink);
}

.line__who--you {
  background: var(--ink);
}

.line__body {
  font-size: 12.5px;
  line-height: 17px;
  color: var(--text-muted);
}

.line__body b {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 2px;
}

.line.is-you .line__body {
  color: var(--ink);
  padding: 9px 11px;
  border-radius: 13px;
  background: var(--surface);
}

.line.is-live .line__body {
  box-shadow: inset 0 0 0 1.5px var(--live);
  background: var(--bg);
}

/* The Talk control: a waveform in the logo's colours. */
.wave {
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
  height: 14px;
}

.wave i {
  width: 2.5px;
  border-radius: 2px;
  background: currentColor;
  animation: bounce 1.15s ease-in-out infinite;
}

.wave i:nth-child(1) { height: 6px; color: var(--yellow); animation-delay: 0ms; }
.wave i:nth-child(2) { height: 11px; color: var(--pink); animation-delay: 110ms; }
.wave i:nth-child(3) { height: 14px; color: var(--purple); animation-delay: 220ms; }
.wave i:nth-child(4) { height: 9px; color: var(--cyan); animation-delay: 330ms; }
.wave i:nth-child(5) { height: 5px; color: var(--pink); animation-delay: 440ms; }

@keyframes bounce {
  0%, 100% { transform: scaleY(0.55); }
  50% { transform: scaleY(1); }
}

/* ── Generic section ───────────────────────────────────────────────────── */
.section {
  position: relative;
  padding: clamp(72px, 11vw, 148px) 0;
}

.section--tint {
  background: var(--surface);
}

.section__head {
  max-width: 56ch;
  margin-bottom: clamp(34px, 5vw, 60px);
}

.section__head .lede {
  margin-top: 16px;
}

/* Reveal on enter. */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 640ms ease, transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.reveal.is-in,
.no-motion .reveal {
  opacity: 1;
  transform: none;
}

/* ── Modes ─────────────────────────────────────────────────────────────── */
.modes {
  display: grid;
  gap: 16px;
}

@media (min-width: 720px) {
  .modes {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1040px) {
  .modes {
    grid-template-columns: repeat(4, 1fr);
  }
}

.mode {
  position: relative;
  padding: 24px 22px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  overflow: hidden;
}

.mode::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--tint, var(--purple));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 70ms + 180ms);
}

.mode.is-in::after,
.no-motion .mode::after {
  transform: scaleX(1);
}

.mode__glyph {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--tint, var(--purple));
}

.mode h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.mode p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 22px;
  color: var(--text-muted);
}

/* ── Long-form ─────────────────────────────────────────────────────────── */
.runtime {
  margin-top: 40px;
}

.runtime__bar {
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-pressed);
  overflow: hidden;
}

.runtime__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p) * 100%);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--yellow), var(--pink), var(--purple), var(--cyan));
}

.runtime__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-faint);
}

.runtime__now {
  margin-top: 26px;
  font-size: clamp(34px, 6vw, 58px);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* ── Plans ─────────────────────────────────────────────────────────────── */
.billing {
  display: inline-flex;
  padding: 4px;
  margin-bottom: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg);
}

.billing button {
  min-height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.billing button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--on-ink);
}

.plans {
  display: grid;
  gap: 16px;
  align-items: start;
}

@media (min-width: 860px) {
  .plans {
    grid-template-columns: repeat(3, 1fr);
  }
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px 24px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.plan:hover {
  border-color: var(--border-strong);
}

.plan[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.plan:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.plan__tag {
  position: absolute;
  top: 18px;
  right: 20px;
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--surface);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.plan h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 14px;
}

.plan__amount {
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.plan__per {
  font-size: 14px;
  color: var(--text-faint);
}

.plan__blurb {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 21px;
  color: var(--text-muted);
}

.plan ul {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  font-size: 14.5px;
}

.plan li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: var(--text-muted);
}

.plan li svg {
  flex: none;
  margin-top: 4px;
  color: var(--accent);
}

.plan__pick {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-faint);
}

.plan__pick svg {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 180ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.plan[aria-pressed="true"] .plan__pick {
  color: var(--accent-text);
}

.plan[aria-pressed="true"] .plan__pick svg {
  opacity: 1;
  transform: none;
}

.plans__foot {
  margin-top: 26px;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 62ch;
}

/* ── Get the app ───────────────────────────────────────────────────────── */
.get {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(80px, 12vw, 160px) 0;
}

.get__inner {
  position: relative;
  z-index: 1;
}

.get img {
  width: 92px;
  height: 92px;
  margin: 0 auto 26px;
  border-radius: 23px;
  filter: drop-shadow(0 16px 34px rgba(139, 92, 255, 0.26));
}

.get h2 {
  margin: 0 auto;
  max-width: 17ch;
}

.get .lede {
  margin: 20px auto 0;
  max-width: 44ch;
}

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 34px;
}

.store {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 56px;
  padding: 0 24px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--on-ink);
  text-decoration: none;
  transition: background-color 160ms ease, transform 140ms ease;
}

.store:hover {
  background: var(--ink-pressed);
}

.store:active {
  transform: scale(0.985);
}

.store[aria-disabled="true"] {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  color: var(--ink);
  cursor: default;
  pointer-events: none;
}

.store[aria-disabled="true"] .store__lines small {
  opacity: 1;
  color: var(--text-faint);
}

.store__lines {
  display: grid;
  text-align: left;
  line-height: 1.15;
}

.store__lines small {
  font-size: 11px;
  opacity: 0.72;
}

.store__lines strong {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.get__status {
  margin-top: 20px;
  min-height: 22px;
  font-size: 14.5px;
  color: var(--text-muted);
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.footer {
  padding: 56px 0 44px;
  border-top: 1px solid var(--border);
}

.footer__row {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  justify-content: space-between;
}

.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.footer__brand img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.footer__brand .wordmark {
  font-size: 21px;
}

.footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.footer nav a {
  font-size: 14.5px;
  color: var(--text-muted);
  text-decoration: none;
}

.footer nav a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.footer__fine {
  margin-top: 26px;
  font-size: 13px;
  color: var(--text-muted);
}

/* ── Reduced motion ────────────────────────────────────────────────────────
   Decorative movement is the whole point of this page, so it is switched off
   wholesale rather than shortened: everything resolves to its final state. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .glow,
  .hero__mark {
    transform: none !important;
  }
}

/* ── Legal documents ───────────────────────────────────────────────────────
   Generated by web/build.mjs from docs/legal/*.md. One narrow measure, real
   line height and nothing decorative: these pages are read by a reviewer with
   a checklist, not scrolled through. */
.doc {
  padding: clamp(44px, 7vw, 84px) 0 clamp(64px, 9vw, 110px);
}

.doc__body {
  max-width: 44rem;
}

.doc__body h1 {
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.028em;
  font-weight: 600;
}

.doc__body h2 {
  margin: 48px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: -0.016em;
  font-weight: 600;
}

.doc__body h3 {
  margin: 32px 0 0;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
}

.doc__body p {
  margin: 14px 0 0;
  color: var(--text-muted);
}

.doc__body h1 + p {
  margin-top: 18px;
  font-size: 18px;
  color: var(--text-faint);
}

.doc__body ul,
.doc__body ol {
  margin: 14px 0 0;
  padding-left: 22px;
  color: var(--text-muted);
}

.doc__body li {
  margin-top: 8px;
}

.doc__body strong {
  color: var(--ink);
  font-weight: 600;
}

.doc__body a {
  color: var(--accent-text);
  text-underline-offset: 2px;
}

.doc__body code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
}

.doc__body hr {
  margin: 44px 0 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.doc__body table {
  width: 100%;
  margin: 20px 0 0;
  border-collapse: collapse;
  font-size: 15px;
  text-align: left;
}

.doc__body th,
.doc__body td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text-muted);
}

.doc__body th {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

.doc__body table {
  display: block;
  overflow-x: auto;
}

/* ── The player, inside the phone ──────────────────────────────────────── */
.player__title {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.player__meta {
  position: relative;
  z-index: 1;
  margin-top: 5px;
  font-size: 10.5px;
  color: var(--text-faint);
}

.player__dock {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 16px;
}

.player__bar {
  display: block;
  height: 3px;
  border-radius: 3px;
  background: var(--surface-pressed);
}

.player__bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--ink);
}

.player__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

.icon-btn {
  font-size: 11px;
  font-weight: 600;
}

.player__play {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: var(--shadow-float);
}

.player__talk {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 13px;
  border-radius: var(--radius-pill);
  background: var(--bg);
  box-shadow: var(--shadow-dock);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
}

/* The transcript behaves like the player's: the newest line sits at the
   bottom and older ones run off the top. The mask is what makes that read as
   scrolled rather than clipped, which matters because the four lines do not
   fit a phone once they wrap. */
.talk {
  flex: 1;
  min-height: 0;
  margin-top: 14px;
  align-content: end;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0, #000 34px);
}

/* ── Chapters ──────────────────────────────────────────────────────────────
   The right half of the long-form scene: a two-hour episode is a stack of
   chapters, and they arrive one at a time as the runtime bar fills. */
.chapters {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  counter-reset: chapter;
}

.chapter {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  opacity: 0.22;
  transform: translateY(10px);
  transition: opacity 420ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.chapter.is-on,
.no-motion .chapter {
  opacity: 1;
  transform: none;
}

.chapter__n {
  flex: none;
  width: 26px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
  padding-top: 2px;
}

.chapter strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

.chapter span span {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  line-height: 19px;
  color: var(--text-muted);
}

/* An anchored jump must not land under the sticky nav. */
:target,
[id] {
  scroll-margin-top: 84px;
}