/* Layout and components. Every colour, size and radius comes from tokens.css (generated from tokens.json).
   Two surfaces: "night" (hero and privacy band: captions read best on dark) and "paper" (everything else). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: var(--type-body-weight);
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: 74rem; margin-inline: auto; padding-inline: max(var(--screen-margin), 4vw); }
.narrow { max-width: 46rem; }

h1, h2, h3 { margin: 0; text-wrap: balance; }
h2 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); line-height: 1.08; letter-spacing: -0.02em;
}
h3 { font-size: var(--type-title-size); line-height: var(--type-title-line); font-weight: 600; }
p { margin: 0 0 var(--space-4); max-width: 40rem; }
a { color: var(--color-primary); text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; }
a:hover { text-decoration-thickness: 0.14em; }
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; }
.muted { color: var(--color-ink-muted); }
.small { font-size: var(--type-label-size); line-height: var(--type-label-line); }
.mt-4 { margin-top: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.pad-4 { padding: var(--space-4); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-4); top: -4rem; z-index: 50;
  background: var(--color-surface); color: var(--color-ink);
  padding: var(--space-3) var(--space-4); border: 2px solid var(--color-primary); border-radius: var(--radius-chip);
}
.skip-link:focus { top: var(--space-3); }

.eyebrow {
  font-size: var(--type-label-size); line-height: var(--type-label-line); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-muted); margin: 0 0 var(--space-3);
}
.section-lead { font-size: 1.125rem; line-height: 1.7; color: var(--color-ink-muted); margin-top: var(--space-4); }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--touch-min); padding: 0 var(--space-5);
  border-radius: var(--radius-button); border: 2px solid transparent;
  font: 600 var(--type-body-size)/1 var(--font-sans); text-decoration: none; cursor: pointer;
  transition: background-color var(--motion-micro) ease, color var(--motion-micro) ease, border-color var(--motion-micro) ease;
}
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary-on-tint); }
.btn-quiet { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.link-quiet {
  display: inline-flex; align-items: center; min-height: var(--touch-min);
  color: inherit; font-weight: 500; text-decoration: underline; text-decoration-color: currentColor;
  text-decoration-thickness: 1px; text-underline-offset: 0.3em;
}

/* ---------- word states (shape carries meaning, not only colour) ---------- */
.w-new {
  font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0;
  text-decoration: underline double var(--color-gloss); text-decoration-thickness: 2px;
  text-underline-offset: 0.22em; text-decoration-skip-ink: none;
}
button.w-new { cursor: pointer; border-radius: 4px; padding: 0.05em 0.1em; }
.w-learning {
  text-decoration: underline dotted var(--color-primary); text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

/* =========================================================
   NIGHT: hero and privacy band
   ========================================================= */
.night {
  background: var(--night); color: var(--night-ink);
  --color-primary: var(--night-primary);
  --color-gloss: var(--night-gloss);
}
.night a { color: var(--night-primary); }
.night :focus-visible { outline-color: var(--night-primary); }
.night .btn-primary { background: var(--night-primary); color: var(--night-on-primary); }
.night .btn-primary:hover { background: var(--night-ink); }

/* overflow: clip (not hidden) so focusing a button can never scroll the band sideways. */
.hero-band { position: relative; overflow: hidden; overflow: clip; isolation: isolate; }
/* One soft light source behind the caption card, like a phone screen glowing at night. */
.hero-band::before {
  content: ""; position: absolute; z-index: -1; inset: auto 0 0 35%; height: 85%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--night-primary) 18%, transparent), transparent);
  pointer-events: none;
}

header.site { padding-block: var(--space-5); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.brand {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-min);
  font-family: var(--font-serif); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em;
  color: inherit; text-decoration: none;
}
.brand img { width: 1.75rem; height: 1.75rem; border-radius: 8px; }

.hero-band .hero { padding-block: var(--space-6) var(--space-7); }
.hero-grid { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 64rem) {
  .hero-grid { grid-template-columns: 1.05fr 1fr; gap: clamp(3rem, 6vw, 6rem); }
  .hero-band .hero { padding-block: var(--space-7) 6rem; }
}

.status-pill {
  display: inline-flex; align-items: center; gap: var(--space-2); max-width: none;
  padding: 0.35rem 0.85rem 0.35rem 0.65rem; border: 1px solid var(--night-line); border-radius: 999px;
  font-size: var(--type-label-size); line-height: var(--type-label-line); color: var(--night-muted);
  margin-bottom: var(--space-5);
}
.status-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--night-gloss); flex: none; }

.hero-band .hero h1 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: var(--hero-size); line-height: var(--hero-line); letter-spacing: var(--hero-tracking);
  color: var(--night-ink);
}
.hero-band .hero h1 em { display: block; font-style: italic; font-weight: 400; color: var(--night-primary); }
.hero-band .hero .lead { font-size: 1.1875rem; line-height: 1.65; color: var(--night-muted); margin-top: var(--space-5); max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-6); }
.hero-note { margin: var(--space-4) 0 0; font-size: var(--type-label-size); color: var(--night-muted); }

/* ---------- the caption card (signature) ---------- */
.caption-card {
  margin: 0; position: relative;
  background: var(--night-raised); border: 1px solid var(--night-line); border-radius: var(--radius-sheet);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--night-ink) 6%, transparent) inset, 0 40px 80px -30px rgb(0 0 0 / 0.55);
}
.card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.place { font-size: var(--type-label-size); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--night-muted); font-variant-numeric: tabular-nums; }
.listening {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.3rem 0.75rem; border-radius: 999px;
  background: color-mix(in srgb, var(--night-primary) 14%, transparent);
  color: var(--night-primary); font-size: var(--type-caption-size); line-height: var(--type-caption-line); font-weight: 600;
}
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--night-primary); flex: none; }

/* Level meter: gentle while waiting for speech, livelier while a sentence arrives. */
.levels { display: flex; align-items: center; justify-content: space-between; height: 2.5rem; margin-block: var(--space-5) var(--space-4); }
.levels span {
  flex: none; width: 4px; height: 100%; border-radius: 2px;
  background: color-mix(in srgb, var(--night-primary) 55%, transparent);
  transform: scaleY(0.12); transform-origin: center;
}

.caption {
  font-family: var(--font-serif); font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.25rem); line-height: 1.3;
  letter-spacing: -0.01em; color: var(--night-ink); margin: 0; min-height: 2.6em; max-width: none;
}
.caption .word { display: inline-block; }
.caption.typing .word { opacity: 0; transform: translateY(6px); }
.caption .word.in { opacity: 1; transform: none; transition: opacity var(--motion-standard) ease-out, transform var(--motion-standard) ease-out; }

.gloss {
  display: inline-flex; align-items: baseline; gap: var(--space-2); margin: var(--space-4) 0 0;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-chip);
  background: var(--night-gloss-tint); color: var(--night-gloss-on-tint);
  font-size: var(--type-label-size); line-height: var(--type-label-line);
}
.gloss b { font-weight: 700; }
.gloss i { font-family: var(--font-serif); font-size: 1.0625rem; }
/* Keep the chip's space while hidden so the card never changes height. */
.gloss[hidden] { display: inline-flex; visibility: hidden; }

.rescue-line { margin: var(--space-4) 0 0; padding-left: var(--space-4); border-left: 2px solid var(--night-primary); max-width: none; }
.rescue-line[hidden] { display: none; }
.rescue-line .translation { display: block; font-family: var(--font-serif); font-style: italic; font-size: 1.1875rem; line-height: 1.5; color: var(--night-ink); }
.rescue-line .source { display: block; margin-top: var(--space-1); font-size: var(--type-caption-size); letter-spacing: 0.06em; text-transform: uppercase; color: var(--night-muted); }

.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.btn-rescue { background: var(--night-primary); color: var(--night-on-primary); }
.btn-rescue:hover { background: var(--night-ink); }
.btn-keep { background: transparent; color: var(--night-ink); border-color: var(--night-line); }
.btn-keep:hover { border-color: var(--night-primary); }
.btn-keep[aria-pressed="true"] { border-color: var(--night-primary); color: var(--night-primary); }
.kept { font-size: var(--type-label-size); color: var(--night-primary); min-height: 1.25rem; }

.scenes { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--night-line); }
.scene {
  min-height: var(--touch-min); padding: 0 var(--space-3); border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--night-line); color: var(--night-ink);
  font: 500 var(--type-label-size)/1 var(--font-sans);
  transition: border-color var(--motion-micro) ease, background-color var(--motion-micro) ease;
}
.scene span { color: var(--night-muted); margin-left: 0.25rem; }
.scene:hover { border-color: var(--night-muted); }
.scene[aria-pressed="true"] { background: var(--night-ink); color: var(--night); border-color: var(--night-ink); }
.scene[aria-pressed="true"] span { color: var(--night-raised); }
.caption-card figcaption { margin-top: var(--space-4); font-size: var(--type-caption-size); line-height: var(--type-caption-line); color: var(--night-muted); }

@media (prefers-reduced-motion: no-preference) {
  .pulse::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--night-primary);
    animation: ping var(--listening-pulse) ease-out infinite;
  }
  @keyframes ping { 0% { transform: scale(1); opacity: 0.7; } 70%, 100% { transform: scale(3); opacity: 0; } }

  .levels span { animation: idle 1.6s ease-in-out infinite; }
  .levels.speaking span { animation: speak 0.55s ease-in-out infinite; }
  .levels span:nth-child(7n+1) { animation-delay: -0.2s; }
  .levels span:nth-child(7n+2) { animation-delay: -0.9s; }
  .levels span:nth-child(7n+3) { animation-delay: -0.4s; }
  .levels span:nth-child(7n+4) { animation-delay: -1.3s; }
  .levels span:nth-child(7n+5) { animation-delay: -0.7s; }
  .levels span:nth-child(7n+6) { animation-delay: -1.1s; }
  .levels span:nth-child(7n+7) { animation-delay: -0.1s; }
  @keyframes idle { 0%, 100% { transform: scaleY(0.1); } 50% { transform: scaleY(0.24); } }
  @keyframes speak { 0%, 100% { transform: scaleY(0.2); } 50% { transform: scaleY(0.95); } }

  .gloss.pop { animation: pop var(--motion-slow) cubic-bezier(.2, .8, .2, 1.2); }
  @keyframes pop { from { opacity: 0; transform: translateY(6px) scale(0.97); } to { opacity: 1; transform: none; } }
}

/* =========================================================
   PAPER: the day, help that fades, price and form, FAQ
   ========================================================= */
.paper-band { background: var(--paper); }
.day, .fade, .faq, .join { padding-block: clamp(4rem, 9vw, 7.5rem); }
.fade { padding-top: 0; }

/* Timeline: real times of day, so the order carries meaning. */
.timeline { list-style: none; margin: var(--space-7) 0 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 0.45rem; top: 0.5rem; bottom: 0.5rem; width: 2px;
  background: linear-gradient(var(--color-line), var(--color-line)) no-repeat;
}
.timeline li { position: relative; display: grid; gap: var(--space-3) var(--space-6); padding: 0 0 var(--space-7) 2.25rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: 0.35rem; width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--color-primary);
}
.timeline li:last-child::before { background: var(--color-primary); }
.when { display: flex; align-items: baseline; gap: var(--space-3); }
.when time { font-family: var(--font-serif); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.when span { font-size: var(--type-label-size); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-muted); }
.moment h3 { margin-bottom: var(--space-2); }
.moment > p { color: var(--color-ink-muted); }
@media (min-width: 52rem) {
  .timeline li { grid-template-columns: 11rem 1fr; }
  .when { flex-direction: column; gap: var(--space-1); }
  .moment { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: var(--space-2) var(--space-6); align-items: start; }
  .moment h3, .moment > p { grid-column: 1; }
  .moment .mini { grid-column: 2; grid-row: 1 / span 2; }
}

.mini {
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card);
  padding: var(--space-5); margin-top: var(--space-3);
}
.mini-caption { font-family: var(--font-serif); font-size: 1.375rem; line-height: 1.6; }
.chip-inline {
  display: inline-flex; gap: var(--space-2); align-items: baseline; margin-left: var(--space-2); vertical-align: 0.15em;
  background: var(--color-gloss-tint); color: var(--color-gloss-on-tint); border-radius: var(--radius-chip);
  padding: 0.15rem 0.6rem; font-family: var(--font-sans); font-size: var(--type-label-size); line-height: var(--type-label-line);
}
.chip-inline i { font-family: var(--font-serif); }
.mini-rescue p { margin: 0; max-width: none; }
.mini-rescue p[lang="es"] { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.45; }
.mini-rescue .translation { margin-top: var(--space-2); padding-left: var(--space-3); border-left: 2px solid var(--color-primary); font-family: var(--font-serif); font-style: italic; color: var(--color-ink-muted); }
.mini-rescue .note-line { margin-top: var(--space-4); font-size: var(--type-label-size); color: var(--color-ink-muted); }
.tag { display: inline-block; padding: 0.05rem 0.5rem; border-radius: var(--radius-chip); background: var(--color-primary-tint); color: var(--color-primary-on-tint); font-weight: 600; font-size: var(--type-caption-size); letter-spacing: 0.04em; text-transform: uppercase; }

.mini-deck { position: relative; background: none; border: 0; padding: var(--space-4) var(--space-4) 0 0; }
.deck-card { border-radius: var(--radius-card); border: 1px solid var(--color-line); background: var(--color-surface); }
.deck-card.back, .deck-card.mid { position: absolute; inset: 0 0 auto auto; width: calc(100% - var(--space-4)); height: calc(100% - var(--space-4)); }
.deck-card.back { transform: translate(0, 0) rotate(3deg); background: var(--color-surface-alt); }
.deck-card.mid { transform: translate(-6px, 6px) rotate(1.2deg); }
.deck-card.front { position: relative; display: grid; gap: var(--space-2); padding: var(--space-5); transform: translate(-12px, 12px); box-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.35); }
.deck-meta { font-size: var(--type-caption-size); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-muted); }
.deck-word { font-family: var(--font-serif); font-size: 2rem; font-weight: 600; letter-spacing: -0.01em; }
.deck-ctx { font-family: var(--font-serif); font-style: italic; color: var(--color-ink-muted); }

/* Help that fades */
.fade-rows { margin-top: var(--space-6); border-top: 1px solid var(--color-line); }
.fade-row { display: grid; gap: var(--space-3); padding-block: var(--space-5); border-bottom: 1px solid var(--color-line); align-items: center; }
.week { font-size: var(--type-label-size); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-muted); }
.fade-sentence { font-family: var(--font-serif); font-size: clamp(1.375rem, 1rem + 1.2vw, 1.75rem); line-height: 1.45; margin: 0; max-width: none; }
.meter { display: grid; gap: var(--space-2); }
.track { display: block; height: 6px; border-radius: 3px; background: var(--color-line); overflow: hidden; }
.fill { display: block; height: 100%; border-radius: 3px; background: var(--color-primary); }
.f-58 { width: 58%; } .f-86 { width: 86%; } .f-100 { width: 100%; }
.meter-label { font-size: var(--type-label-size); color: var(--color-ink-muted); }
@media (min-width: 52rem) {
  .fade-row { grid-template-columns: 8rem 1fr 13rem; gap: var(--space-6); }
}
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; padding: 0; margin: var(--space-5) 0 var(--space-3); font-size: var(--type-label-size); color: var(--color-ink-muted); }
.legend .w-new, .legend .w-learning { color: var(--color-ink); margin-right: var(--space-1); }

/* =========================================================
   Privacy band
   ========================================================= */
.promise-band { padding-block: clamp(4.5rem, 10vw, 8rem) clamp(3.5rem, 8vw, 6rem); }
.promise-band h2 { font-size: clamp(2.4rem, 1.4rem + 4.2vw, 4.75rem); line-height: 1.02; letter-spacing: -0.025em; color: var(--night-ink); max-width: 16ch; }
.promise-lead { font-size: 1.1875rem; color: var(--night-muted); margin-top: var(--space-5); }
.rules { list-style: none; margin: var(--space-7) 0 var(--space-6); padding: 0; display: grid; gap: var(--space-6); }
.rules li { display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-4); align-items: start; }
.rules svg { width: 2rem; height: 2rem; fill: none; stroke: var(--night-primary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rules p { margin: 0; color: var(--night-ink); }
@media (min-width: 52rem) { .rules { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-7); } }
.promise-foot { color: var(--night-muted); }

/* =========================================================
   Price and form
   ========================================================= */
/* The sign-up closes the dark privacy band: one final section, not a pasted-in box. */
.join { padding-top: 0; }
.join .wrap { border-top: 1px solid var(--night-line); padding-top: clamp(3.5rem, 8vw, 6rem); }
.night .eyebrow, .night .muted { color: var(--night-muted); }
.night .join-intro { color: var(--night-muted); }
.night h2 { color: var(--night-ink); }
.join-grid { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 64rem) {
  .join-grid { grid-template-columns: 0.8fr 1.2fr; gap: clamp(3rem, 6vw, 6rem); }
  .price { position: sticky; top: var(--space-6); }
}
.plans { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
.plan { border: 1px solid var(--night-line); border-radius: var(--radius-card); padding: var(--space-5); }
.plan-plus { background: var(--night-raised); border-color: color-mix(in srgb, var(--night-primary) 45%, var(--night-line)); }
.plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.plan h3 { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; }
.plan-price { margin: 0; font-family: var(--font-serif); font-size: 2.25rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.plan-plus .plan-price { color: var(--night-primary); }
.plan-price .per { font-family: var(--font-sans); font-size: var(--type-label-size); font-weight: 400; letter-spacing: 0; color: var(--night-muted); margin-left: var(--space-1); }
.plan ul { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); color: var(--night-ink); }
.plan li { padding-left: 1.25rem; position: relative; }
.plan li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.5rem; height: 2px; background: var(--night-muted); }
.plan-plus li::before { background: var(--night-primary); }
.amount { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin: 0 0 var(--space-5); }
.amount [data-price] { font-family: var(--font-serif); font-size: clamp(3.5rem, 2.4rem + 4vw, 5.5rem); font-weight: 600; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.amount .per { font-size: 1.125rem; color: var(--color-ink-muted); }
.price-notes { list-style: none; padding: 0; margin: 0 0 var(--space-5); border-top: 1px solid var(--color-line); }
.price-notes li { padding-block: var(--space-3); border-bottom: 1px solid var(--color-line); }

.join-heading { margin-bottom: var(--space-3); }
.join-intro { color: var(--color-ink-muted); }
.night .form-frame { background: var(--color-surface); color: var(--color-ink); }
.form-frame { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); padding: var(--space-2); margin-top: var(--space-5); }
.form-frame iframe { display: block; width: 100%; border: 0; min-height: 40rem; }
@media (max-width: 46rem) { .form-frame iframe { height: 1500px; } }
/* When the real Brevo form is embedded it brings its own title, intro and card. */
.has-embed .join-heading {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.has-embed .join-intro { display: none; }
.has-embed .form-frame { background: none; border: 0; padding: 0; margin-top: 0; }

.mock-note { background: var(--color-gloss-tint); color: var(--color-gloss-on-tint); border-radius: var(--radius-chip); padding: var(--space-3); margin: 0 0 var(--space-4); font-size: var(--type-label-size); line-height: var(--type-label-line); max-width: none; }
.mock-form { padding: var(--space-4); }
.mock-form fieldset { border: 0; margin: 0 0 var(--space-5); padding: 0; }
.mock-form legend, .mock-form label.field { display: block; font-weight: 600; margin-bottom: var(--space-2); }
.mock-form input[type="email"] {
  width: 100%; min-height: var(--touch-min); padding: 0 var(--space-3);
  font: inherit; color: var(--color-ink); background: var(--color-background);
  border: 2px solid var(--color-line); border-radius: var(--radius-chip);
}
.mock-form .choice { display: flex; gap: var(--space-3); align-items: center; min-height: var(--touch-min); }
.mock-form .choice input { width: 1.5rem; height: 1.5rem; accent-color: var(--color-primary); flex: none; }
.mock-form .consent { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-5); }
.mock-form .consent input { width: 1.5rem; height: 1.5rem; margin-top: 0.2rem; accent-color: var(--color-primary); flex: none; }
.mock-form .status-line { margin: var(--space-3) 0 0; min-height: 1.5rem; color: var(--color-ink-muted); }

/* =========================================================
   FAQ and footer
   ========================================================= */
.faq { border-top: 1px solid var(--color-line); }
.faq h2 { margin-bottom: var(--space-5); }
details { border-bottom: 1px solid var(--color-line); }
details:first-of-type { border-top: 1px solid var(--color-line); }
summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 3.75rem; padding-block: var(--space-3); cursor: pointer; list-style: none;
  font-size: 1.125rem; font-weight: 600;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; flex: none; width: 0.75rem; height: 0.75rem; margin-right: var(--space-2);
  border-right: 2px solid var(--color-ink-muted); border-bottom: 2px solid var(--color-ink-muted);
  transform: rotate(45deg) translateY(-2px); transition: transform var(--motion-standard) ease;
}
details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
details .answer { padding: 0 0 var(--space-5); color: var(--color-ink-muted); }
details .answer p:last-child { margin-bottom: 0; }

footer.site { border-top: 1px solid var(--color-line); padding-block: var(--space-6); color: var(--color-ink-muted); font-size: var(--type-label-size); line-height: var(--type-label-line); }
footer.site a { color: var(--color-ink-muted); }
footer.site ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-4); padding: 0; margin: 0 0 var(--space-3); }
footer.site li a { display: inline-flex; align-items: center; min-height: var(--touch-min); }

/* =========================================================
   Privacy notice and thank-you page (paper only)
   ========================================================= */
.page-plain header.site { border-bottom: 1px solid var(--color-line); }
.page-plain .hero { padding-block: var(--space-7); }
.page-plain .hero h1 { font-family: var(--font-serif); font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); line-height: 1.08; letter-spacing: -0.02em; margin-bottom: var(--space-4); }
.page-plain .lead { font-size: 1.1875rem; line-height: 1.65; color: var(--color-ink-muted); }
.promise { background: var(--color-primary-tint); color: var(--color-primary-on-tint); border-radius: var(--radius-card); padding: var(--space-5); margin-top: var(--space-5); }
.promise h3, .promise p, .promise li { color: var(--color-primary-on-tint); }
.promise ul { margin: var(--space-3) 0 0; padding-left: var(--space-5); }
.promise li { margin-bottom: var(--space-2); }
.prose h1 { font-family: var(--font-serif); font-size: clamp(2.25rem, 1.5rem + 3vw, 3.25rem); line-height: 1.08; letter-spacing: -0.02em; margin-bottom: var(--space-4); }
.prose h2 { margin: var(--space-6) 0 var(--space-3); font-family: var(--font-sans); font-size: var(--type-title-size); line-height: var(--type-title-line); font-weight: 600; letter-spacing: 0; }
.prose ul { padding-left: var(--space-5); max-width: 42rem; }
.prose li { margin-bottom: var(--space-2); }
.prose table { border-collapse: collapse; width: 100%; max-width: 42rem; margin-bottom: var(--space-4); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: var(--space-3); border: 1px solid var(--color-line); }
.prose th { background: var(--color-surface-alt); }
.page-plain section { padding-block: var(--space-7); }

@media (max-width: 30rem) {
  .hero-actions .btn { width: 100%; }
}

/* =========================================================
   MOTION (landing only). Armed by motion.js, which adds html.motion
   unless the visitor prefers reduced motion. Without it, every element
   below is already in its final, visible state.
   ========================================================= */
.hero-band .hero h1 .line { display: block; }

/* Final states that motion animates *towards*. */
.fades { text-decoration-color: transparent; }
.fill { transform-origin: left center; }

html.motion [data-enter] {
  opacity: 0; transform: translateY(var(--reveal-distance));
  animation: enter var(--reveal-duration) var(--ease-out-expo) forwards;
}
html.motion [data-enter="1"] { animation-delay: 80ms; }
html.motion [data-enter="2"] { animation-delay: calc(80ms + var(--reveal-stagger) * 1); }
html.motion [data-enter="3"] { animation-delay: calc(80ms + var(--reveal-stagger) * 2); }
html.motion [data-enter="4"] { animation-delay: calc(80ms + var(--reveal-stagger) * 3); }
html.motion [data-enter="5"] { animation-delay: calc(80ms + var(--reveal-stagger) * 4); }
html.motion [data-enter="6"] { animation-delay: calc(80ms + var(--reveal-stagger) * 5); }
html.motion .caption-card[data-enter] { transform: translateY(28px) scale(0.985); animation-duration: 1000ms; }
@keyframes enter { to { opacity: 1; transform: none; } }

/* Scroll reveals: script.js adds .in once, when the element is about a fifth on screen. */
html.motion [data-reveal]:not(.timeline):not(.mini-deck):not(.fade-row) {
  opacity: 0; transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-duration) var(--ease-out-expo), transform var(--reveal-duration) var(--ease-out-expo);
  transition-delay: var(--delay, 0ms);
}
html.motion [data-reveal].in:not(.timeline):not(.mini-deck):not(.fade-row) { opacity: 1; transform: none; }
html.motion [data-reveal-group] > * {
  opacity: 0; transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-duration) var(--ease-out-expo), transform var(--reveal-duration) var(--ease-out-expo);
  transition-delay: var(--delay, 0ms);
}
html.motion [data-reveal-group].in > * { opacity: 1; transform: none; }

/* Help that fades: learned words lose their marks as each week comes into view. */
html.motion .fade-row { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease-out-expo), transform 600ms var(--ease-out-expo); transition-delay: var(--delay, 0ms); }
html.motion .fade-row.in { opacity: 1; transform: none; }
html.motion .fade-row .w-new.fades { text-decoration-color: var(--color-gloss); }
html.motion .fade-row .w-learning.fades { text-decoration-color: var(--color-primary); }
html.motion .fade-row .fades { transition: text-decoration-color 900ms ease; }
html.motion .fade-row.in .fades { text-decoration-color: transparent; transition-delay: calc(var(--delay, 0ms) + 650ms); }
html.motion .fade-row .fill { transform: scaleX(0); transition: transform 1100ms var(--ease-out-expo); }
html.motion .fade-row.in .fill { transform: scaleX(1); transition-delay: calc(var(--delay, 0ms) + 350ms); }

/* Tonight's cards fan out. */
html.motion .mini-deck .deck-card { transition: transform 900ms var(--ease-out-expo); }
html.motion .mini-deck:not(.in) .deck-card.back,
html.motion .mini-deck:not(.in) .deck-card.mid { transform: none; }
html.motion .mini-deck:not(.in) .deck-card.front { transform: translate(0, 0); }
html.motion .mini-deck.in .deck-card.mid { transition-delay: 120ms; }
html.motion .mini-deck.in .deck-card.front { transition-delay: 220ms; }

/* The timeline draws itself as you scroll (scroll-driven where supported, a single reveal otherwise). */
html.motion .timeline::before { transform-origin: top; transform: scaleY(0); transition: transform 1600ms var(--ease-out-expo); }
html.motion .timeline.in::before { transform: scaleY(1); }
@supports (animation-timeline: view()) {
  html.motion .timeline::before {
    transition: none; transform: scaleY(0);
    animation: draw linear both; animation-timeline: view(); animation-range: entry 10% cover 55%;
  }
  @keyframes draw { to { transform: scaleY(1); } }
}

/* Light that follows the pointer across the caption card (precise pointers only). */
@media (hover: hover) and (pointer: fine) {
  html.motion .caption-card::after {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--night-primary) 12%, transparent), transparent 65%);
    opacity: 0; transition: opacity var(--motion-slow) ease;
  }
  html.motion .caption-card:hover::after { opacity: 1; }
}

/* Small, honest hover feedback. Transforms only, so nothing shifts the layout. */
html.motion .btn { transition: background-color var(--motion-micro) ease, color var(--motion-micro) ease, border-color var(--motion-micro) ease, transform var(--motion-standard) var(--ease-out-expo), box-shadow var(--motion-standard) ease; }
html.motion .btn:hover { transform: translateY(-1px); }
html.motion .btn-primary:hover, html.motion .btn-rescue:hover { box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--color-primary) 70%, transparent); }
html.motion .btn:active { transform: translateY(0) scale(0.98); }
html.motion .plan { transition: border-color var(--motion-standard) ease, transform var(--reveal-duration) var(--ease-out-expo), opacity var(--reveal-duration) var(--ease-out-expo); }
html.motion .plan:hover { border-color: var(--night-muted); }
html.motion details[open] .answer { animation: answer var(--motion-slow) var(--ease-out-expo); }
@keyframes answer { from { opacity: 0; transform: translateY(-4px); } }

/* Keep the sentence hidden until the live demo takes over, so it does not show, vanish and re-type.
   Fallback: if script.js never runs, it appears anyway after 2.5s. */
html.motion .caption-card:not(.live) .caption,
html.motion .caption-card:not(.live) .gloss { visibility: hidden; animation: unhide 0s 2.5s forwards; }
@keyframes unhide { to { visibility: visible; } }