/* AudioBuddy — audiobuddyai.com
   A clothbound book with gilt stamping: deep bookcloth green, the app's amber as gilt,
   Iowan Old Style (the typeface of Apple Books) for the book's voice, and the system font for
   anything the app says. No web fonts, no scripts: the server's CSP allows neither. */

:root {
  --cloth: #163a33;
  --cloth-deep: #0f2b26;
  --cloth-rule: #2c564d;
  --gilt: #eba552;
  --amber: #d9822b;
  --on-cloth: #f4efe4;
  --on-cloth-soft: #b9c8c1;

  --bg: #ffffff;
  --text: #1b2422;
  --text-soft: #4f5c58;
  --accent-text: #9c5414;
  --panel: #eef2ef;
  --rule: #d6ddd9;
  --bubble-listener: #fbe7d1;
  --bubble-companion: #ffffff;
  --shadow: 0 1px 0 rgb(15 43 38 / 6%), 0 18px 40px -24px rgb(15 43 38 / 45%);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --measure: 34em;
  --page: 1160px;
  --gutter: clamp(20px, 5vw, 48px);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10221f;
    --text: #ece8de;
    --text-soft: #a9b8b2;
    --accent-text: #f0b36a;
    --panel: #163a33;
    --rule: #2c4d46;
    --bubble-listener: #5a3a18;
    --bubble-companion: #1d3f38;
    --shadow: 0 1px 0 rgb(0 0 0 / 30%), 0 18px 40px -24px rgb(0 0 0 / 80%);
  }
}

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

html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body { margin: 0; font-size: 1.1875rem; line-height: 1.6; }

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; border-radius: 4px; }

h1, h2, h3 { font-weight: 700; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: -0.015em; }
h3 { font-size: 1.5rem; line-height: 1.25; }
p { margin: 0; max-width: var(--measure); text-wrap: pretty; }
p + p { margin-top: 1em; }

.skip { position: absolute; left: 12px; top: -100px; z-index: 10; background: var(--bg); color: var(--text); padding: 10px 14px; font-family: var(--sans); font-size: 15px; }
.skip:focus { top: 12px; }

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

/* The app's voice: buttons, navigation, captions, prices. */
.ui, .nav, .button, .caption, .fine, .steps h3, .sources dt, .plans th, .plans td, .footer {
  font-family: var(--sans);
}

/* ---------- Cloth: header and hero ---------- */

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

.masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-top: 22px; padding-bottom: 22px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; }
.brand img { width: 40px; height: 40px; border-radius: 10px; }
.nav { display: flex; align-items: center; gap: 26px; font-size: 15px; }
.nav a { text-decoration: none; color: var(--on-cloth-soft); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--on-cloth); }
.nav .button { color: var(--cloth-deep); }

.button {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--gilt); color: var(--cloth-deep);
  font-size: 16px; font-weight: 600; line-height: 1;
  padding: 15px 22px; border-radius: 999px; text-decoration: none;
}
.button:hover { background: #f3b468; }
.button.small { padding: 10px 16px; font-size: 14px; }
.button svg { width: 18px; height: 18px; fill: currentColor; }

.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 6vw, 88px); align-items: center;
  padding-top: clamp(28px, 6vw, 72px); padding-bottom: clamp(56px, 8vw, 112px);
}
.hero h1 { font-size: clamp(2.75rem, 6.4vw, 4.75rem); line-height: 1.02; letter-spacing: -0.025em; color: var(--on-cloth); }
.hero .intro { margin-top: 26px; font-size: 1.3125rem; line-height: 1.55; color: var(--on-cloth-soft); max-width: 30em; }
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 34px; }
.hero .fine { color: var(--on-cloth-soft); }

.fine { font-size: 14px; line-height: 1.5; color: var(--text-soft); }

/* ---------- The moment: a listening session, interrupted ---------- */

.moment {
  margin: 0; position: relative;
  padding: clamp(26px, 3.4vw, 40px);
  border-radius: 28px;
  background: var(--cloth-deep);
  box-shadow: inset 0 0 0 1px var(--cloth-rule);
}
.moment .narration {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.5; color: var(--on-cloth);
  max-width: none;
}
.moment .narration .heard { color: var(--on-cloth); }
.moment .playhead {
  display: inline-block; width: 3px; height: 1.05em; margin-left: 4px; vertical-align: -0.12em;
  background: var(--gilt); border-radius: 2px;
}
.moment .exchange { display: grid; gap: 12px; margin-top: 22px; font-family: var(--sans); font-size: 16px; line-height: 1.45; }
.bubble { max-width: 34em; padding: 12px 16px; border-radius: 18px; }
.bubble.listener { justify-self: end; background: var(--gilt); color: var(--cloth-deep); border-bottom-right-radius: 6px; font-weight: 500; }
.bubble.companion { justify-self: start; background: #f8f4ea; color: #1b2422; border-bottom-left-radius: 6px; }
.bubble .who { display: block; font-size: 12px; font-weight: 600; opacity: 0.66; margin-bottom: 2px; }
.voice { display: inline-flex; gap: 3px; align-items: center; height: 12px; margin-right: 6px; vertical-align: -1px; }
.voice i { display: block; width: 3px; height: 100%; border-radius: 2px; background: var(--amber); transform-origin: center; }
.voice i:nth-child(1) { transform: scaleY(0.45); }
.voice i:nth-child(2) { transform: scaleY(0.95); }
.voice i:nth-child(3) { transform: scaleY(0.6); }
.voice i:nth-child(4) { transform: scaleY(0.8); }
.moment .resume {
  display: flex; gap: 10px; align-items: baseline; margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--cloth-rule); font-size: 1.0625rem; color: var(--on-cloth-soft); max-width: none;
}
.moment .resume b { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--gilt); white-space: nowrap; }
.moment figcaption { margin-top: 18px; font-family: var(--sans); font-size: 13px; color: var(--on-cloth-soft); opacity: 0.8; }

/* One orchestrated moment on load: the book plays, ducks for the question, the answer is
   spoken, and the book comes back. Reduced motion shows the finished scene. */
@media (prefers-reduced-motion: no-preference) {
  .moment .narration { animation: duck 9s ease-in-out 0.4s both; }
  .moment .playhead { animation: blink 1s steps(2, start) 6 0.4s, duck 9s ease-in-out 0.4s both; }
  .moment .listener { animation: arrive 0.5s cubic-bezier(.2,.8,.2,1) 2.2s both; }
  .moment .companion { animation: arrive 0.5s cubic-bezier(.2,.8,.2,1) 3.6s both; }
  .moment .companion .text { animation: speak 1.6s ease-out 3.9s both; }
  .moment .voice i { animation: talk 0.6s ease-in-out 3.9s 6 alternate both; }
  .moment .voice i:nth-child(2) { animation-delay: 4.05s; }
  .moment .voice i:nth-child(3) { animation-delay: 4.2s; }
  .moment .voice i:nth-child(4) { animation-delay: 3.95s; }
  .moment .resume { animation: arrive 0.6s cubic-bezier(.2,.8,.2,1) 7.6s both; }
}
@keyframes duck { 0%, 18% { opacity: 1; } 24%, 82% { opacity: 0.38; } 92%, 100% { opacity: 1; } }
@keyframes blink { to { visibility: hidden; } }
@keyframes arrive { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes speak { from { opacity: 0; } to { opacity: 1; } }
@keyframes talk { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }

/* ---------- Sections on paper ---------- */

.section { padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(64px, 9vw, 120px); }
.section + .section { border-top: 1px solid var(--rule); }
.section-head { display: grid; gap: 20px; max-width: 46rem; }
.section-head p { color: var(--text-soft); font-size: 1.25rem; }

.panel { background: var(--panel); }
.panel + .section, .section + .panel { border-top: 0; }

/* Screens from the app. */
.screens {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px);
  margin: clamp(40px, 6vw, 72px) 0 0; padding: 0; list-style: none;
}
.screens li { display: grid; gap: 18px; align-content: start; }
.device {
  border-radius: 13% / 6%; overflow: hidden; background: #000;
  padding: 2.2%; box-shadow: var(--shadow);
}
.device img { border-radius: 11.4% / 5.25%; width: 100%; }
.caption { font-size: 15px; line-height: 1.5; color: var(--text-soft); max-width: 22em; }
.caption strong { display: block; color: var(--text); font-size: 17px; font-weight: 600; margin-bottom: 2px; }

/* How it works: a real sequence, so it's numbered. */
.steps { display: grid; gap: 0; margin: 10px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 18px 0 20px; border-top: 1px solid var(--rule); }
.steps li::before { content: counter(step); grid-row: span 2; font-family: var(--serif); font-size: 2rem; line-height: 1; font-weight: 700; color: var(--accent-text); }
.steps h3 { font-size: 18px; font-weight: 650; }
.steps p { font-size: 1.0625rem; line-height: 1.55; color: var(--text-soft); }

.device-figure { margin: 0; max-width: 380px; justify-self: center; width: 100%; }
.sr, .skip-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Two columns: text and a figure. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.split.flip > :first-child { order: 2; }
.split .body { display: grid; gap: 22px; align-content: start; }
.split .body > p { color: var(--text-soft); }
.split.top { align-items: start; }
.body > p + p, .section-head > p + p { margin-top: 0; }

/* What it knows: the book's timeline, split at the playhead. */
.horizon { margin: 0; display: grid; gap: 14px; font-family: var(--sans); }
.horizon .track { position: relative; display: grid; grid-template-columns: 78fr 22fr; height: 56px; border-radius: 14px; overflow: hidden; }
.horizon .heard { background: var(--amber); }
.horizon .ahead { background: repeating-linear-gradient(135deg, transparent 0 7px, var(--text-soft) 7px 8px); opacity: 0.55; border-radius: 0 14px 14px 0; box-shadow: inset 0 0 0 1px var(--text-soft); }
.horizon .track::after { content: ""; position: absolute; top: -6px; bottom: -6px; left: 78%; width: 3px; margin-left: -1.5px; background: var(--text); border-radius: 2px; }
.horizon .labels { display: grid; grid-template-columns: 78fr 22fr; font-size: 14px; line-height: 1.4; color: var(--text-soft); }
.horizon .labels span:last-child { text-align: right; }
.horizon .labels b { display: block; color: var(--text); font-weight: 600; }
.horizon figcaption { font-size: 14px; color: var(--text-soft); }

/* The guide. */
.guide-screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); align-items: start; }
.guide-screens .device:last-child { margin-top: 12%; }
.facets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-family: var(--sans); font-size: 15px; }
.facets li { padding: 7px 13px; border-radius: 999px; background: var(--panel); color: var(--text); }

/* Where books come from. */
.sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); margin: clamp(36px, 5vw, 56px) 0 0; }
.sources div { padding: 22px 0 26px; border-top: 1px solid var(--rule); }
.sources dt { font-size: 18px; font-weight: 650; margin-bottom: 6px; }
.sources dd { margin: 0; color: var(--text-soft); font-size: 1.0625rem; line-height: 1.55; max-width: 30em; }

.brains { display: grid; gap: 0; margin: 0; }
.brains div { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 8px 28px; padding: 18px 0; border-top: 1px solid var(--rule); }
.brains dt { font-family: var(--sans); font-weight: 650; font-size: 17px; }
.brains dd { margin: 0; color: var(--text-soft); font-size: 1.0625rem; line-height: 1.55; }

/* Plans. */
.plans { width: 100%; border-collapse: collapse; margin-top: clamp(36px, 5vw, 56px); font-size: 16px; line-height: 1.45; }
.plans th, .plans td { text-align: left; vertical-align: top; padding: 16px 18px 16px 0; border-top: 1px solid var(--rule); }
.plans thead th { border-top: 0; padding-bottom: 20px; }
.plans thead th:first-child { width: 22%; }
.plans .plan { display: block; font-family: var(--serif); font-size: 1.75rem; font-weight: 700; color: var(--text); }
.plans .price { display: block; margin-top: 4px; font-size: 16px; font-weight: 600; color: var(--accent-text); }
.plans tbody th { font-weight: 600; color: var(--text); }
.plans td { color: var(--text-soft); }
.plans .featured { background: var(--panel); }
.plans thead .featured { border-radius: 16px 16px 0 0; }
.plans .featured, .plans .featured + * { padding-left: 18px; }
.plans tbody tr:last-child .featured { border-radius: 0 0 16px 16px; }

/* Closing call. */
.closing { text-align: left; }
.closing .body { display: grid; gap: 22px; justify-items: start; }
.closing .button { margin-top: 6px; }

/* ---------- Documents: support and privacy ---------- */

.document { max-width: 46rem; padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(64px, 9vw, 112px); }
.document h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1.05; letter-spacing: -0.02em; }
.document .lede { margin-top: 18px; font-size: 1.25rem; color: var(--text-soft); }
.document section { margin-top: 44px; }
.document section h2 { font-size: 1.625rem; line-height: 1.25; margin-bottom: 12px; }
.document p, .document li { color: var(--text-soft); }
.document p a, .document li a { color: var(--text); }
.document .updated { font-family: var(--sans); font-size: 14px; color: var(--text-soft); margin-bottom: 14px; }
.faq { margin-top: 36px; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; font-size: 1.25rem; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); font-weight: 400; color: var(--accent-text); font-size: 1.5rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 24px; display: grid; gap: 0.8em; }
.faq ul { margin: 0; padding-left: 1.2em; }
.faq li + li { margin-top: 0.35em; }
.contact { margin-top: 56px; padding: 28px; border-radius: 20px; background: var(--panel); }
.contact h2 { font-size: 1.5rem; margin-bottom: 8px; }

/* Documents use a light masthead on paper. */
.masthead-paper { border-bottom: 1px solid var(--rule); }
.masthead-paper .nav a { color: var(--text-soft); }
.masthead-paper .nav a:hover, .masthead-paper .nav a[aria-current="page"] { color: var(--text); }
.masthead-paper .nav .button { color: var(--cloth-deep); }

/* ---------- Footer ---------- */

.footer { background: var(--cloth); color: var(--on-cloth-soft); font-size: 14px; line-height: 1.5; border-top: 1px solid var(--cloth-rule); }
.footer .page { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 32px; padding-top: 34px; padding-bottom: 40px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.footer a { color: var(--on-cloth); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* ---------- Not found ---------- */

.lost { min-height: 60vh; display: grid; align-content: center; gap: 18px; padding-top: 64px; padding-bottom: 96px; }
.lost h1 { font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.05; }

/* ---------- Smaller screens ---------- */

@media (max-width: 980px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .split, .split.flip { grid-template-columns: minmax(0, 1fr); }
  .split.flip > :first-child { order: 0; }
  .guide-screens { max-width: 640px; }
}

@media (max-width: 720px) {
  body { font-size: 1.125rem; }
  .nav .hide-small { display: none; }
  .nav { gap: 18px; }
  .screens { grid-template-columns: minmax(0, 1fr); max-width: 360px; margin-left: auto; margin-right: auto; }
  .sources { grid-template-columns: minmax(0, 1fr); }
  .brains div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .plans thead { display: none; }
  .plans, .plans tbody, .plans tr, .plans th, .plans td { display: block; width: 100%; }
  .plans tr { padding: 18px 0; border-top: 1px solid var(--rule); }
  .plans th, .plans td { border: 0; padding: 4px 0; }
  .plans td::before { content: attr(data-plan) ": "; font-weight: 600; color: var(--text); }
  .plans .featured, .plans .featured + * { padding-left: 0; background: none; }
}

@media (max-width: 520px) {
  .masthead { flex-wrap: wrap; }
  .moment { border-radius: 22px; }
  .horizon .labels { font-size: 13px; }
}