/* Podback's site, in the companion's design: lavender paper and white cards by day, plum by night (the visitor's own
   setting decides), one yellow that means Podback, the face, and every voice in its color. The tokens are the app's,
   from design/system/DESIGN.md; the page is direction C of the Podback Website Directions canvas. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter.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;
}
/* Podkin's voice where SF Pro Rounded is not on the device: Nunito, one weight heavier than the weight asked for, as
   on Android (design/handoff/android, decision 1), so the stack below asks for 500 and draws Nunito 600. */
@font-face {
  font-family: "Podkin Voice";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/nunito-600.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: "Podkin Voice";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/nunito-700.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: "Podkin Voice";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/nunito-800.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: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/dm-mono-400.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: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/dm-mono-500.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;
}

:root {
  color-scheme: light dark;
  --paper: #EEE9FF;
  --card: #FFFFFF;
  --card-border: transparent;
  --ink: #1B1530;
  --muted: #6D6490;
  --soft: #5B5378;
  --faint: #A69DC4;
  --hair: #DAD2F5;
  --tick: #B7ACDD;
  --fill: #1B1530;
  --control: #1B1530;
  --on-control: #EEE9FF;
  --yellow: #FFD60A;
  --on-yellow: #1B1530;
  --s1: #C13A23;
  --s2: #14705F;
  --s3: #2F5FD0;
  --artwork: #FF5A36;
  --shadow: 0 12px 32px -12px rgba(27, 21, 48, 0.35);
  --focus: #1B1530;

  /* The app's faces where the visitor's system has them — SF Pro on Apple's devices, SF Pro Rounded in Safari there —
     and elsewhere open faces served from here: Inter, close to SF Pro, and for Podkin's voice Nunito, one weight
     heavier, the face the Android app speaks in (the builder's choice of 2026-10-15, design/handoff/android; Bricolage
     Grotesque until then). A browser fetches a face only when it draws with it, so Apple's visitors fetch
     neither, and nothing preloads them. */
  --ui: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --voice: ui-rounded, "SF Pro Rounded", "Podkin Voice", -apple-system, sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --exit: cubic-bezier(0.4, 0, 1, 1);
  --pop: cubic-bezier(0.3, 1.5, 0.5, 1);
  --gutter: clamp(20px, 5vw, 72px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16122A;
    --card: #221C3A;
    --card-border: #2E2748;
    --ink: #F1EDFF;
    --muted: #A69DC4;
    --soft: #C4BCE0;
    --faint: #7C73A0;
    --hair: #2E2748;
    --tick: #4A416E;
    --fill: #F1EDFF;
    --control: #EEE9FF;
    --on-control: #16122A;
    --s1: #FF8A6B;
    --s2: #4FD1B8;
    --s3: #7FA6FF;
    --shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.7);
    --focus: #FFD60A;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--ui); -webkit-font-smoothing: antialiased; }
body.home { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
p, h1, h2, h3, ol { margin: 0; }
a { color: var(--ink); }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 10px; }

.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -9999px; top: 12px; z-index: 30; padding: 12px 16px; border-radius: 10px; background: var(--control); color: var(--on-control); font-weight: 700; }
.skip:focus { left: 16px; }
.link-button {
  min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}

/* The face: a yellow disc, two eyes skewed −14° like the mark, and a mouth (Face.swift's proportions). CSS draws it at
   rest; site.js moves it between moods. */
.face { position: relative; display: inline-block; flex-shrink: 0; width: var(--s); height: var(--s); }
.face-30 { --s: 30px; } .face-40 { --s: 40px; } .face-44 { --s: 44px; } .face-72 { --s: 72px; }
.face-stage { --s: 112px; } .face-cta { --s: 88px; }
.face-glow { position: absolute; left: -22%; top: -22%; width: 144%; height: 144%; border-radius: 50%; background: rgba(255, 214, 10, 0.32); opacity: 0; transition: opacity 240ms; }
.face-body { position: absolute; inset: 0; transition: transform 240ms var(--ease); }
.face-disc { position: absolute; inset: 0; border-radius: 50%; background: var(--yellow); }
.face-look { position: absolute; inset: 0; transition: transform 320ms var(--ease); }
.face-eye { position: absolute; top: 27.85%; width: 10.8%; height: 30%; }
.face-eye-l { left: 32.7%; }
.face-eye-r { left: 56.5%; }
.face-eye i { display: block; width: 100%; height: 100%; border-radius: 999px; background: var(--on-yellow); transform: skewX(-14deg); transition: transform 240ms var(--ease); }
.face-mouth { position: absolute; left: 50%; top: 67.35%; width: 21%; margin-left: -10.5%; height: max(2px, 4.8%); border-radius: 999px; background: var(--on-yellow); transition: width 90ms linear, margin-left 90ms linear, opacity 240ms; }
.face.glowing .face-glow { opacity: 1; animation: glow 1.3s ease-in-out infinite; }
.face.bob { animation: bob 3s ease-in-out infinite; }
.face.bob-s { animation: bob-s 3s ease-in-out infinite; }
.face.bob-xs { animation: bob-xs 3s ease-in-out infinite; }
.face.blink .face-eye { animation: blink 4.2s infinite; }
.face.seed1 .face-eye { animation-delay: 1.3s; } .face.seed2 .face-eye { animation-delay: 2.4s; } .face.seed3 .face-eye { animation-delay: 0.6s; } .face.seed4 .face-eye { animation-delay: 3.1s; }

/* The bar across the top */
.nav { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--voice); font-size: 24px; line-height: 28px; font-weight: 600; }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.sound {
  height: 44px; min-width: 44px; padding: 0; border-radius: 999px; border: 1px solid var(--card-border); background: var(--card);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-size: 15px; font-weight: 600;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.sound svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sound .sound-body { fill: currentColor; }
.sound .sound-wave { opacity: 0; transition: opacity 200ms; }
.sound[aria-pressed="true"] { background: var(--control); color: var(--on-control); }
.sound[aria-pressed="true"] .sound-wave { opacity: 1; }
.sound-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pill {
  height: 44px; padding: 0 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--voice); font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.pill-control { background: var(--control); color: var(--on-control); }
.pill-ink { background: #1B1530; color: #FFD60A; }
.pill-large { height: 60px; padding: 0 28px; font-size: 19px; }
.wide-only { display: none; }

/* The opening */
.hero { padding-block: 24px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.hero-title { font-family: var(--voice); font-size: clamp(46px, 7vw, 92px); line-height: 1.04; font-weight: 600; }
.hero-sub { max-width: 720px; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.42; font-weight: 500; color: var(--soft); text-wrap: pretty; }

/* The stage: the episode, Podback, and you. On a phone they stack like the app's Now Playing: the words over the face
   and Ask, and a conversation takes the words' place while it lasts, as it takes over the app's first page. */
.stage { margin-top: 28px; }
.stage-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 330px auto; grid-template-areas: "label" "screen" "middle"; }
.episode { display: contents; }
.stage-label { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--muted); }
.stage-label-episode { grid-area: label; }
.stage-label-talk { display: none; }
.episode-words { grid-area: screen; align-self: end; display: flex; flex-direction: column; gap: 8px; min-height: 0; transition: opacity 240ms; }
.episode-words.dim { opacity: 0.45; }
.conversing .episode-words { opacity: 0; }
.prev-line { margin-bottom: 6px; font-size: 18px; line-height: 25px; font-weight: 500; color: var(--faint); }
.speaker { display: flex; align-items: center; gap: 8px; }
.speaker .dot { order: -1; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--s2); transition: background-color 240ms; }
.dot.s1 { background: var(--s1); } .dot.s2 { background: var(--s2); } .dot.s3 { background: var(--s3); }
.speaker-name { font-size: 15px; line-height: 19px; font-weight: 700; color: var(--s2); transition: color 240ms; }
.live-line { font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.015em; text-wrap: pretty; }
.w { transition: opacity 140ms; }
.w.dim { opacity: 0.25; }
.w.faint { opacity: 0.3; }
.w.hide { display: none; }
.talk { grid-area: screen; align-self: end; min-height: 0; }
.convo { display: flex; flex-direction: column; gap: 10px; }
/* On a phone the conversation takes the words' place, as it takes over the app's first page: the line it stopped on
   at half, then the conversation. */
.convo-context { display: flex; flex-direction: column; gap: 4px; }
.convo-last { font-size: 18px; line-height: 24px; font-weight: 700; opacity: 0.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

.convo.arriving { animation: fade-in 240ms var(--ease) both; }
.convo.leaving { animation: fold 360ms var(--exit) both; transform-origin: 50% 100%; }
.bubble-you { align-self: flex-end; max-width: 88%; padding: 12px 16px; border-radius: 20px 20px 5px 20px; background: var(--control); color: var(--on-control); font-size: 17px; line-height: 23px; font-weight: 500; }
.bubble-keep { animation: pop 320ms var(--pop) both; transform-origin: 100% 100%; }
.answer { padding: 14px 18px 16px; border-radius: 20px; background: var(--yellow); color: var(--on-yellow); display: flex; flex-direction: column; gap: 4px; animation: fade-in 240ms var(--ease) both; }
.answer-label { font-size: 13px; font-weight: 700; }
.answer-words { font-family: var(--voice); font-size: 22px; line-height: 28px; font-weight: 600; }
.middle { grid-area: middle; display: flex; align-items: center; gap: 20px; padding-top: 18px; }
.companion-slot { min-height: 60px; display: flex; align-items: center; }
/* The slot beside the face, as the app draws it: a line in the voice face over a smaller one, never a pill. */
.slot-words { display: flex; flex-direction: column; gap: 3px; }
.slot-words p { margin: 0; }
.slot-line { font-family: var(--voice); font-size: 18px; line-height: 23px; font-weight: 500; color: var(--soft); }
.slot-meta { font-family: var(--ui); font-size: 13px; line-height: 17px; color: var(--muted); }
.slot-words.listening .slot-line { color: var(--ink); font-weight: 600; }
.hint { max-width: 230px; font-family: var(--voice); font-size: 17px; line-height: 22px; font-weight: 500; color: var(--soft); animation: fade-in 240ms var(--ease) both; }
.saved { padding: 10px 14px; border-radius: 20px 20px 20px 5px; background: var(--card); border: 1px solid var(--card-border); font-family: var(--voice); font-size: 16px; line-height: 20px; font-weight: 500; animation: pop 320ms var(--pop) both; transform-origin: 0 100%; }
.timeline { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 22px; }
.time { width: 44px; font-size: 13px; color: var(--muted); }
.time-right { width: 52px; text-align: right; }
.track { position: relative; flex: 1; min-width: 120px; height: 14px; }
.track-bg { position: absolute; left: 0; right: 0; top: 4px; height: 6px; border-radius: 3px; background: var(--hair); }
.track-fill { position: absolute; left: 0; top: 4px; height: 6px; border-radius: 3px; background: var(--fill); width: 35%; }
.tick { position: absolute; top: 1px; width: 2px; height: 12px; border-radius: 1px; background: var(--tick); }
.kept { position: absolute; top: 1px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--yellow); transition: opacity 240ms; }
.timeline .link-button { flex-basis: 100%; text-align: left; }

/* The speakers */
.asking { margin-top: 96px; }
.speakers { margin-top: 20px; }
.sketches { margin-top: 20px; }
.big-card { padding: 30px 22px; border-radius: 32px; background: var(--card); border: 1px solid var(--card-border); display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.big-copy { display: flex; flex-direction: column; gap: 16px; }
.eyebrow { font-size: 16px; line-height: 20px; font-weight: 600; color: var(--muted); }
.section-title { font-family: var(--voice); font-size: clamp(38px, 4vw, 54px); line-height: 1.06; font-weight: 600; text-wrap: balance; }
.body { font-size: 17px; line-height: 1.55; font-weight: 500; color: var(--soft); text-wrap: pretty; }
.try { margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--muted); }
.phrases { display: flex; flex-wrap: wrap; gap: 10px; }
.phrase { min-height: 44px; padding: 12px 18px; border: 0; border-radius: 22px 22px 6px 22px; background: var(--control); color: var(--on-control); cursor: pointer; font-size: 17px; line-height: 20px; font-weight: 500; transition: transform 120ms var(--ease); }
.phrase:active { transform: scale(0.97); }
.speakers-demo { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.key { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.key-item { display: flex; align-items: center; gap: 7px; }
.key-name { font-size: 15px; font-weight: 700; }
.key-name.s1 { color: var(--s1); } .key-name.s2 { color: var(--s2); } .key-name.s3 { color: var(--s3); }
.key-role { font-size: 14px; font-weight: 500; color: var(--muted); }
.band { position: relative; height: 44px; }
.turn { position: absolute; top: 7px; height: 30px; border-radius: 7px; transition: opacity 240ms; }
.turn.s1 { background: var(--s1); } .turn.s2 { background: var(--s2); } .turn.s3 { background: var(--s3); }
.turn.ahead { opacity: 0.45; }
.band-head { position: absolute; top: 0; left: 2.67%; width: 4px; height: 44px; margin-left: -2px; border-radius: 2px; background: var(--ink); }
.band-head.jump { transition: left 360ms var(--ease); }
.band-times { display: flex; justify-content: space-between; margin-top: -12px; font-size: 12px; color: var(--muted); }
.sp-line { display: flex; align-items: flex-end; gap: 14px; min-height: 160px; }
.sp-line .face { --s: 52px; }
.sp-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sp-text .speaker-name { color: var(--s1); }
.sp-text .dot { background: var(--s1); }
.sp-words { font-size: 22px; line-height: 29px; font-weight: 700; text-wrap: pretty; }
.sp-said-slot { min-height: 48px; display: flex; justify-content: flex-end; }
.sp-said { animation: pop 320ms var(--pop) both; transform-origin: 100% 100%; }
.ask-demo { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ask-heard { display: flex; flex-direction: column; gap: 6px; }
.ask-heard .speaker-name { color: var(--s2); }
.ask-heard-line { font-size: 20px; line-height: 27px; font-weight: 700; opacity: 0.45; text-wrap: pretty; }
.ask-q-slot { min-height: 70px; display: flex; flex-direction: column; justify-content: flex-start; }
.ask-a-row { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 210px; }
.ask-a-row .face { --s: 40px; }
.ask-a .answer-words { font-size: 19px; line-height: 25px; }
.ask-a { align-self: stretch; }
.ask-q-slot .bubble-you { animation: pop 320ms var(--pop) both; transform-origin: 100% 100%; }
/* A sketch beside an answer, as the app draws it: the question, the drawing on the card's own ground, then the
   answer beside the face. The drawing is the app's own, cut from its light and dark screenshots. */
.sketch-demo { margin: 0; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sketch-img { display: block; width: 100%; max-width: 480px; height: auto; margin-inline: auto; }
.sketch-caption { display: flex; align-items: center; gap: 14px; font-family: var(--voice); font-size: 18px; line-height: 24px; font-weight: 500; color: var(--soft); text-wrap: pretty; }
.sketch-caption .face { flex-shrink: 0; }

/* Between questions */
.features { margin-top: 96px; display: flex; flex-direction: column; gap: 12px; }
.feature-grid { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.feature { padding: 24px; border-radius: 26px; background: var(--card); border: 1px solid var(--card-border); display: flex; flex-direction: column; gap: 12px; }
.feature-top { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.feature h3 { margin-top: 6px; font-family: var(--voice); font-size: 25px; line-height: 30px; font-weight: 600; }
.feature p { font-size: 17px; line-height: 26px; font-weight: 500; color: var(--soft); }
/* The speed sheet's stepper, as a picture: − · 1.5× · + */
.speed { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.speed i { width: 34px; height: 34px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; font-style: normal; font-size: 20px; font-weight: 600; line-height: 1; }
.speed .mono { min-width: 48px; text-align: center; font-size: 18px; font-weight: 500; }
/* A thought in Podback's bubble, as a picture */
.thought-pic { max-width: 62%; padding: 10px 14px; border-radius: 18px 18px 18px 5px; background: var(--paper); color: var(--ink); font-family: var(--voice); font-size: 17px; line-height: 21px; font-weight: 600; }

/* The end */
.cta { margin-top: 96px; }
.cta-card { padding: 36px 24px; border-radius: 36px; background: var(--yellow); color: var(--on-yellow); display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.cta-words { display: flex; align-items: center; gap: 20px; }
.cta-title { font-family: var(--voice); font-size: clamp(40px, 5vw, 64px); line-height: 1.06; font-weight: 600; }
.footer { padding-block: 40px 32px; }
.footer-links { display: flex; flex-wrap: wrap; column-gap: 24px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--muted); }
.footer-links > * { min-height: 44px; display: inline-flex; align-items: center; }
.footer-links a { color: var(--muted); }
.footer-links a[aria-current="page"] { color: var(--ink); }

/* The live bar: the app's own, floating at the foot of the window as the way to get the app */
.live-bar {
  position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 20; max-width: 760px; margin-inline: auto;
  padding: 10px; border-radius: 26px; background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 12px;
  transition: background-color 400ms var(--ease), transform 360ms var(--ease), opacity 240ms var(--ease), visibility 0s;
}
/* As in the app, the live bar stands everywhere but over the player itself: it arrives once the stage has scrolled away. */
.live-bar.away { transform: translateY(calc(100% + 24px)); opacity: 0; visibility: hidden; transition: transform 200ms var(--exit), opacity 200ms var(--exit), visibility 0s 200ms; }
.live-art { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--artwork); }
.live-face { display: flex; }
.live-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.live-meta { display: flex; align-items: center; gap: 7px; }
.live-meta .dot { width: 9px; height: 9px; }
.live-name { font-size: 14px; font-weight: 700; color: var(--s2); }
.live-time { font-size: 12px; color: var(--muted); }
.bar-line { font-size: 14px; line-height: 18px; font-weight: 600; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.live-get { height: 48px; padding: 0 20px; flex-shrink: 0; }
.live-bar.flood { background: var(--yellow); color: var(--on-yellow); border-color: transparent; }
.live-bar.flood .live-name, .live-bar.flood .live-time { color: var(--on-yellow); }
.live-bar.flood .dot { background: var(--on-yellow); }
.live-bar.flood .live-get { background: #1B1530; color: #FFD60A; }

/* The reading pages (privacy, support) and the page for an address that isn't here */
.doc-head { display: flex; flex-direction: column; gap: 16px; padding-block: 24px 36px; }
.label { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--muted); }
.doc-title { font-family: var(--voice); font-size: clamp(46px, 7vw, 96px); line-height: 1; font-weight: 600; text-wrap: balance; }
.doc-lead { max-width: 760px; font-size: clamp(18px, 1.7vw, 23px); line-height: 1.45; font-weight: 500; color: var(--soft); text-wrap: pretty; }
.doc-paper { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }
.doc.wrap { max-width: none; padding: 28px 22px; border-radius: 32px; background: var(--card); border: 1px solid var(--card-border); display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
.doc-nav { padding-bottom: 24px; border-bottom: 1px solid var(--hair); }
.doc-nav ol { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.doc-nav a { display: flex; align-items: center; min-height: 44px; padding-block: 10px; font-size: 16px; line-height: 20px; font-weight: 600; color: var(--muted); text-decoration: none; }
.doc-nav a:hover { color: var(--ink); }
.doc-body { max-width: 680px; min-width: 0; }
.doc-body section { scroll-margin-top: 24px; }
.doc-body section + section { margin-top: 52px; }
.doc-body h2 { margin-bottom: 14px; font-family: var(--voice); font-size: clamp(26px, 2.4vw, 32px); line-height: 1.12; font-weight: 600; text-wrap: balance; }
.doc-body p, .doc-body li { font-size: 17px; line-height: 1.65; font-weight: 500; text-wrap: pretty; }
.doc-body p + p { margin-top: 16px; }
.doc-body ul { margin: 16px 0; padding-left: 22px; }
.doc-body li + li { margin-top: 10px; }
.doc-body li::marker { color: var(--muted); }
.doc-body a { text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.doc-body a:hover { text-decoration-thickness: 2px; }
.doc-body code { padding: 1px 5px; border-radius: 5px; background: var(--paper); font-family: var(--mono); font-size: 0.86em; overflow-wrap: anywhere; }
.footer-doc { padding-block: 32px 40px; }
.lost { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; padding-block: 12vh 16vh; }
.lost .cta-title { font-size: clamp(52px, 9vw, 120px); line-height: 1; text-wrap: balance; }

/* The smallest phones: the chimes' switch steps aside so the header fits, and the last button says less. */
.tight-only { display: none; }
@media (max-width: 359px) {
  .sound { display: none; }
  .roomy-only { display: none; }
  .tight-only { display: inline; }
  .stage-grid { grid-template-rows: auto 360px auto; }
}

@media (min-width: 720px) {
  .sound { padding: 0 18px; }
  .sound-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .wide-only { display: inline; }
  .narrow-only { display: none; }
  .pill { padding: 0 22px; font-size: 17px; }
  .stage-grid { grid-template-rows: auto 330px auto; }
  .ask-a-row { flex-direction: row; align-items: flex-end; gap: 14px; min-height: 180px; }
  .ask-a { flex: 1; min-width: 0; align-self: flex-start; }
  .ask-a-row .face { --s: 72px; }
  .ask-a .answer-words { font-size: 24px; line-height: 31px; }
  .live-line { font-size: 38px; line-height: 45px; }
  .answer-words { font-size: 27px; line-height: 34px; }
  .bubble-you { font-size: 20px; line-height: 27px; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-card { flex-direction: row; align-items: center; justify-content: space-between; }
  .big-card { padding: 40px; }
  .sp-words { font-size: 26px; line-height: 33px; }
  .sp-line { gap: 16px; }
  .sp-line .face { --s: 72px; }
  .sketch-caption { font-size: 20px; line-height: 26px; }
}

@media (min-width: 1080px) {
  .nav { height: 104px; }
  .brand { gap: 14px; font-size: 30px; line-height: 32px; }
  .nav-actions { gap: 12px; }
  .pill { height: 48px; }
  .hero { padding-top: 16px; gap: 18px; }

  .stage { margin-top: 40px; }
  .stage-grid { grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "episode middle talk"; column-gap: 48px; height: 480px; }
  .episode { display: block; grid-area: episode; position: relative; }
  .stage-label-episode { position: absolute; top: 0; right: 0; padding-top: 0; font-size: 16px; }
  .stage-label-talk { display: block; position: absolute; top: 0; left: 0; font-size: 16px; }
  .convo-context { display: none; }
  .episode-words { position: absolute; right: 0; bottom: 60px; width: 100%; align-items: flex-end; text-align: right; gap: 12px; }
  .episode-words.dim, .conversing .episode-words { opacity: 0.4; }
  .speaker .dot { order: 0; }
  .speaker-left .dot { order: -1; }
  .prev-line { margin-bottom: 10px; font-size: 22px; line-height: 30px; }
  .speaker-name { font-size: 18px; line-height: 22px; }
  .dot { width: 12px; height: 12px; }
  .live-line { font-size: 46px; line-height: 54px; }
  .talk { grid-area: talk; position: relative; align-self: stretch; }
  .convo { position: absolute; left: 0; bottom: 60px; width: 100%; gap: 18px; padding-top: 0; }
  .convo.leaving { transform-origin: 0 100%; }
  .bubble-you { align-self: flex-start; padding: 16px 22px; border-radius: 24px 24px 24px 6px; font-size: 24px; line-height: 31px; }
  .bubble-keep { transform-origin: 0 100%; }
  .answer { padding: 20px 24px 22px; border-radius: 24px; }
  .answer-label { font-size: 15px; }
  .answer-words { font-size: 34px; line-height: 41px; }
  .middle { flex-direction: column; justify-content: flex-end; gap: 34px; padding: 0 0 60px; }
  .face-stage { --s: 240px; }
  .companion-slot { min-height: 64px; justify-content: center; }
  .slot-words { align-items: center; text-align: center; }
  .slot-line { font-size: 21px; line-height: 26px; }
  .slot-meta { font-size: 14px; line-height: 18px; }
  .hint { font-size: 19px; line-height: 24px; text-align: center; }
  .saved { font-size: 17px; line-height: 21px; padding: 12px 18px; border-radius: 22px 22px 22px 6px; }
  .timeline { flex-wrap: nowrap; gap: 22px; margin-top: 0; }
  .time { width: 64px; font-size: 16px; }
  .time-right { width: 70px; }
  .timeline .link-button { flex-basis: auto; margin-left: 12px; }

  .asking { margin-top: 120px; }
  .speakers { margin-top: 28px; }
  .sketches { margin-top: 28px; }
  .ask-heard-line { font-size: 24px; line-height: 31px; }
  .ask-q-slot { min-height: 84px; }
  .ask-a-row { min-height: 200px; }
  .big-card { grid-template-columns: 430px minmax(0, 1fr); column-gap: 72px; padding: 56px; align-items: center; }
  .big-copy { gap: 18px; }
  .eyebrow { font-size: 18px; line-height: 22px; }
  .body { font-size: 19px; line-height: 29px; }
  .try { font-size: 16px; }
  .phrase { padding: 13px 20px; font-size: 18px; }
  .speakers-demo { gap: 26px; }
  .band { height: 48px; }
  .turn { top: 8px; height: 32px; border-radius: 8px; }
  .band-head { height: 48px; }
  .sp-words { font-size: 30px; line-height: 37px; }

  .features { margin-top: 130px; gap: 14px; }
  .feature-grid { margin-top: 32px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .feature { min-height: 300px; padding: 28px; gap: 14px; }
  .feature h3 { font-size: 27px; line-height: 31px; }
  .feature p { font-size: 18px; line-height: 27px; }

  .cta { margin-top: 120px; }
  .cta-card { padding: 60px 72px; border-radius: 40px; gap: 48px; }
  .cta-words { gap: 36px; }
  .face-cta { --s: 130px; }
  .pill-large { height: 64px; padding: 0 30px; font-size: 21px; }

  .live-bar { padding: 12px; gap: 16px; border-radius: 28px; bottom: max(24px, env(safe-area-inset-bottom)); }
  .live-art { width: 52px; height: 52px; border-radius: 13px; }
  .live-name { font-size: 15px; }
  .live-time { font-size: 13px; }
  .bar-line { font-size: 18px; line-height: 22px; }
  .live-get { height: 56px; padding: 0 26px; font-size: 18px; }

  .doc-head { padding-block: 48px 72px; gap: 22px; }
  .doc.wrap { grid-template-columns: 240px minmax(0, 680px); column-gap: clamp(56px, 7vw, 112px); padding: 56px; }
  .doc-nav { position: sticky; top: 24px; align-self: start; padding-bottom: 0; border-bottom: 0; }
  .doc-nav a { min-height: 0; padding-block: 7px; font-size: 15px; }
  .doc-body p, .doc-body li { font-size: 18px; }
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fold { to { opacity: 0; transform: scale(0.96); } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { transform: translateY(-3.5%); } 50% { transform: translateY(3.5%); } }
@keyframes bob-s { 0%, 100% { transform: translateY(-1.8%); } 50% { transform: translateY(1.8%); } }
@keyframes bob-xs { 0%, 100% { transform: translateY(-1%); } 50% { transform: translateY(1%); } }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.1); } }
@keyframes glow { 0%, 100% { transform: scale(0.9); } 50% { transform: scale(1.04); } }
@keyframes pulse { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }

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