/*
 * Yada website. One stylesheet for the home page, /privacy and /terms.
 *
 * Written to Episode's import rules (episode-api src/services/designImport):
 * - Tokens are :root custom properties under the names brandTokens.ts reads (--paper,
 *   --ink, --accent, --cta, --muted, --divider, --font-display, --font-body, --radius,
 *   --maxw); the prefers-color-scheme block is read as the dark set (tokens.ts).
 * - Scripts are dropped on import (domPort.ts), so every interaction and motion is CSS.
 * - revealNeutralizerCss forces open any rule that pairs opacity:0 with a transition, so
 *   entrances are keyframes, and scroll reveals run on view() timelines. Where those are
 *   unsupported nothing animates and the content is simply there.
 *
 * Colour from apps/mobile/src/design/palette.ts and brand/README.md. The hero, the Greek
 * band and the closing use the splash ground in both appearances (SP-01 Dark). Chartreuse
 * is never text on chalk (1.19:1): it appears on the night ground, on forest, and as the
 * difference highlighter under ink text (12.7:1).
 */

@font-face {
  font-family: "Literata";
  src: url("/fonts/literata-var.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

/* Gentium Plus, subset to the Greek on this page and renamed: its OFL reserves the name
   "Gentium" for unmodified copies (fonts/OFL-GentiumPlus.txt). */
@font-face {
  font-family: "Yada Greek";
  src: url("/fonts/yada-greek.woff2") format("woff2");
  font-display: swap;
}

:root {
  --paper: #F7F8F0;
  --ink: #16231E;
  --muted: #526D63;
  --divider: #DFE5D7;
  --accent: #183F35;
  --sheet: #FFFFFF;
  --selection: #E7EED8;
  --highlight: #DBEC9A;
  --edge: rgba(22, 35, 30, 0.1);
  --cta: #16231E;
  --cta-text: #F7F8F0;
  --night: #0E1814;
  --night-raised: #16231E;
  --night-ink: #ECF0E4;
  --night-muted: #9AAFA4;
  --night-edge: rgba(236, 240, 228, 0.12);
  --forest: #183F35;
  --chalk: #F7F8F0;
  --chartreuse: #DBEC9A;
  --sage: #526D63;
  --cover-ink: #16231E;
  --status-ink: #16231E;
  --shadow: 0 1px 2px rgba(22, 35, 30, 0.06), 0 12px 32px -12px rgba(22, 35, 30, 0.18);
  --font-display: "Literata", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-greek: "Yada Greek", "Literata", Georgia, serif;
  --radius: 999px;
  --maxw: 1180px;
  --gutter: 20px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0E1814;
    --ink: #ECF0E4;
    --muted: #9AAFA4;
    --divider: #22332C;
    --accent: #DBEC9A;
    --sheet: #16231E;
    --selection: #1A2D25;
    --highlight: #3B4A22;
    --edge: rgba(255, 255, 255, 0.09);
    --cta: #ECF0E4;
    --cta-text: #0E1814;
    --night: #08100D;
    --night-raised: #121D18;
    --cover-ink: #0B120F;
    --status-ink: #ECF0E4;
    --shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  --paper: #0E1814;
  --ink: #ECF0E4;
  --muted: #9AAFA4;
  --divider: #22332C;
  --accent: #DBEC9A;
  --sheet: #16231E;
  --selection: #1A2D25;
  --highlight: #3B4A22;
  --edge: rgba(255, 255, 255, 0.09);
  --cta: #ECF0E4;
  --cta-text: #0E1814;
  --night: #08100D;
  --night-raised: #121D18;
  --cover-ink: #0B120F;
  --status-ink: #ECF0E4;
  --shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 32px -12px rgba(0, 0, 0, 0.6);
}

@media (min-width: 700px) {
  :root { --gutter: 40px; }
}

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

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

ul, ol { list-style: none; margin: 0; padding: 0; }

figure { margin: 0; }

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

.orig { font-family: var(--font-greek); font-weight: 400; }

/* ---------- Header ---------- */

.site-head {
  position: relative;
  z-index: 10;
  background: var(--night);
  color: var(--night-ink);
}

.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  padding: 10px 16px;
  background: var(--chartreuse);
  color: var(--forest);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus { top: 14px; }

.brand { display: inline-flex; align-items: center; min-height: 44px; }

/* The wordmark SVG carries side padding in its viewBox; the margin aligns the letters,
   not the box, with the gutter. */
.brand img { width: 92px; height: auto; margin-left: -4px; }

.site-nav { display: flex; align-items: center; gap: 2px; font-size: 0.9375rem; }

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius);
  color: var(--night-muted);
  text-decoration: none;
  transition: color 160ms ease;
}

.site-nav a:hover { color: var(--night-ink); }

.site-head :focus-visible,
.hero :focus-visible,
.study :focus-visible,
.closing :focus-visible,
.site-foot :focus-visible { outline-color: var(--chartreuse); }

.site-nav .nav-cta {
  margin-left: 8px;
  padding: 0 18px;
  color: var(--night-ink);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--night-edge);
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
}

.site-nav .nav-cta:hover { background: rgba(236, 240, 228, 0.08); }
.site-nav .nav-cta:active { transform: scale(0.97); }

@media (max-width: 759px) {
  .site-nav .nav-hide-sm { display: none; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 30px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
  transition: transform 180ms var(--ease-out), box-shadow 180ms ease;
}

/* Forest on chartreuse, 9.2:1 (brand kit: "use forest text on chartreuse"). */
.btn-lime { background: var(--chartreuse); color: var(--forest); }
.btn-lime:hover { box-shadow: 0 0 0 6px rgba(219, 236, 154, 0.16); }
.btn:active { transform: scale(0.97); }

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
}

/* ---------- Phones ---------- */
/* Real screens from the iPhone 17 Pro simulator, set in Apple's iPhone 17 Pro product bezel
   (Apple Design Resources) as one image each. Apple's marketing guidelines ask for the device
   as is and straight on, so phones are never rotated or restyled here. */

.phone {
  display: block;
  width: var(--pw, 300px);
  height: auto;
  filter: drop-shadow(0 30px 40px rgba(10, 18, 14, 0.22)) drop-shadow(0 4px 8px rgba(10, 18, 14, 0.12));
}

/* ---------- Hero ---------- */
/* Centred, with three phones fanned up from the foot, as on Aave's home (video John shared,
   13 Oct). A chartreuse glow drifts behind them, the hims & hers aura in Yada's colours. */

.hero {
  position: relative;
  background: var(--night);
  color: var(--night-ink);
  padding: 48px 0 0;
  overflow: clip;
  text-align: center;
}

.hero-glow {
  position: absolute;
  left: 50%;
  bottom: -30%;
  width: min(1200px, 140vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(219, 236, 154, 0.38), rgba(219, 236, 154, 0.12) 45%, transparent 70%),
    radial-gradient(closest-side at 30% 60%, rgba(82, 109, 99, 0.55), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

/* Above the fan, so a rising phone passes behind the call, never over it. */
.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }

.hero h1 {
  margin-top: 28px;
  font-size: clamp(2.75rem, 7vw, 5.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
  max-width: 14ch;
}

.lede {
  margin-top: 24px;
  max-width: 44ch;
  font-size: clamp(1.125rem, 1.8vw, 1.3125rem);
  line-height: 1.5;
  color: var(--night-muted);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}

.hero-fan {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(12px, 3vw, 40px);
  height: clamp(300px, 52vw, 560px);
  margin-top: 64px;
  overflow: hidden;
}

/* Clip only the bottom, where the phones stand on the page; the centre phone rises freely. */
.hero-fan { padding-top: 16px; overflow: visible; clip-path: inset(-100vh -50vw 0 -50vw); }

/* The centre phone shows what the words above show: the reader with John 1:1, then Understand
   with its plain words, on the hero's 16 s loop. */
.fan-live { position: relative; aspect-ratio: 675 / 1380; height: auto; }
.fan-bezel { position: absolute; inset: 0; width: 100%; height: 100%; }
.fan-screens { position: absolute; left: 5.333%; top: 2.5%; width: 89.333%; height: 95%; border-radius: 19% / 8.8%; overflow: hidden; background: var(--paper); }
.fan-screen { position: absolute; inset: 0; width: 100%; height: 100%; }
.fs-2 { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .fs-2 { animation: fan-swap 16s ease-in-out infinite; }
}

@keyframes fan-swap {
  0%, 47% { opacity: 0; }
  50%, 97% { opacity: 1; }
  100% { opacity: 0; }
}

/* Straight on (Apple's guidelines): the fan is in height, not angle. */
.hero-fan .phone { --pw: clamp(150px, 26vw, 300px); flex: none; }
.fan-left, .fan-right { margin-top: 72px; }

@media (max-width: 599px) {
  .fan-left, .fan-right { margin-top: 56px; }
  .hero-fan { margin-left: calc(var(--gutter) * -2); margin-right: calc(var(--gutter) * -2); }
}

.symbol { position: relative; width: 80px; height: 80px; margin: 0 auto 28px; }

/* The splash layers are drawn in a 512 frame with the symbol at its centre; scale the
   frame so the symbol, not the frame, is the size we mean. */
.symbol img,
.symbol .leaf-turn {
  position: absolute;
  inset: -40%;
  width: 180%;
  height: 180%;
  max-width: none;
}

/* Pivot at the join between stem and leaf, as in LaunchOverlay.tsx (canvas SP-04). */
.symbol .leaf-turn,
.symbol .leaf { transform-origin: 54.4% 57%; }

.symbol .leaf { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (prefers-reduced-motion: no-preference) {
  .symbol .leaf { animation: leaf-lift 1500ms var(--ease-out) 500ms 1 both; }
  .symbol .leaf-turn { transition: transform 480ms var(--ease-spring); }
  .symbol:hover .leaf-turn { transform: rotate(-8deg); }

  .hero-copy > * { animation: rise 800ms var(--ease-out) both; }
  .hero-copy > :nth-child(2) { animation-delay: 80ms; }
  .hero-copy > :nth-child(3) { animation-delay: 160ms; }
  .hero-copy > :nth-child(4) { animation-delay: 240ms; }
  .hero-copy > :nth-child(5) { animation-delay: 320ms; }

  /* The phones rise from the foot one after another, centre last and highest. */
  .fan-left { animation: fan-up 1100ms var(--ease-out) 350ms both; }
  .fan-right { animation: fan-up 1100ms var(--ease-out) 450ms both; }
  .fan-centre { animation: fan-up 1200ms var(--ease-out) 250ms both; }

  .hero-glow { animation: glow-drift 14s ease-in-out infinite alternate; }
}

/* As the page scrolls, the side phones sink and the centre one holds: the fan closes. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* As the page scrolls the fan opens: the centre phone rises to show its whole screen and
       the side phones drift down. */
    .fan-left, .fan-right {
      animation: fan-up 1100ms var(--ease-out) 400ms both, fan-sink linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 800px;
    }
    .fan-centre {
      animation: fan-up 1200ms var(--ease-out) 250ms both, fan-rise linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 800px;
    }
  }
}

@keyframes fan-up {
  from { opacity: 0; transform: translateY(160px); }
  to { opacity: 1; transform: none; }
}

@keyframes fan-sink {
  to { translate: 0 70px; }
}

@keyframes fan-rise {
  to { translate: 0 -80px; }
}

@keyframes glow-drift {
  from { transform: translateX(-54%) scale(1); opacity: 0.85; }
  to { transform: translateX(-46%) scale(1.08); opacity: 1; }
}

@keyframes leaf-lift {
  0% { transform: rotate(0deg); }
  28% { transform: rotate(-8deg); }
  58% { transform: rotate(-8deg); }
  100% { transform: rotate(0deg); }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}


/* ---------- Chips and centred intros (Aave) ---------- */


.section-intro { display: flex; flex-direction: column; align-items: center; text-align: center; }
.section-intro h2 { margin: 18px auto 0; }
.section-intro p { margin-left: auto; margin-right: auto; }


.btn-ghost {
  color: var(--night-ink);
  box-shadow: inset 0 0 0 1px var(--night-edge);
}

.btn-ghost:hover { background: rgba(236, 240, 228, 0.08); }

/* ---------- Verse hero (variant) ---------- */
/* The verse is the headline. Two frames in one place take turns every 7 s (a 16 s loop); the
   rail at the far right fills one segment per frame. The first screen holds the frames, the
   caption, the call and the top of the phones at 1280 × 720 and up, and at 390 × 844. */

.vh { padding-top: clamp(24px, 5vh, 56px); }

.vh-frames { display: grid; width: min(100%, 980px); }

/* Both frames share one cell, so the block keeps the taller one's height and never jumps. */
.vh-frame { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.vh-label { font-size: 0.8125rem; font-weight: 600; color: var(--chartreuse); }

.vh-verse {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.875rem, min(4.4vw, 6.4vh), 3.75rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  max-width: 21ch;
  text-wrap: balance;
}

/* Capped so the 17 words wrap into two even lines rather than running edge to edge. */
/* One line on a desktop: at 560px the last clause broke, leaving four words alone. */
.vh-greek { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-top: 18px; max-width: min(100%, 800px); }
.vh-w { display: flex; flex-direction: column; align-items: center; }
.vh-w .orig { font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.2; color: var(--night-muted); }
.vh-w .gl { font-size: 0.6875rem; color: var(--night-muted); opacity: 0.8; }
.vh-w.key .orig, .vh-w.key .gl { color: var(--chartreuse); opacity: 1; }

.hero h1.vh-title {
  margin-top: clamp(20px, 4vh, 36px);
  max-width: 56ch;
  text-wrap: balance;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--night-muted);
}

.vh .btn { margin-top: 24px; }

.vh .hero-fan { margin-top: clamp(20px, 3.5vh, 36px); }

.vh-rail { display: none; }

@media (prefers-reduced-motion: reduce) {
  .vh-frames { gap: 40px; }
  .vh-frame { grid-area: auto; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Words arrive one after another out of a soft blur, hold, then blur away; frame 2 runs the
     same 16 s loop 8 s later. "Word" lights up a beat after it lands, as λόγος does. */
  .f-1 .vh-label, .f-1 .vh-t { animation: vh-word 16s cubic-bezier(0.22, 1, 0.36, 1) infinite both; animation-delay: calc(var(--i, 0) * 45ms); }
  .f-2 .vh-label, .f-2 .vh-t { animation: vh-word 16s cubic-bezier(0.22, 1, 0.36, 1) infinite both; animation-delay: calc(8s + var(--i, 0) * 45ms); }
  .f-2 .vh-w { animation: vh-word 16s cubic-bezier(0.22, 1, 0.36, 1) infinite both; animation-delay: calc(8.7s + var(--i, 0) * 55ms); }
  .f-1 .vh-t.k { animation: vh-word 16s cubic-bezier(0.22, 1, 0.36, 1) infinite both, vh-key 16s linear infinite both; animation-delay: calc(var(--i) * 45ms), 0s; }
  .f-2 .vh-t.k { animation: vh-word 16s cubic-bezier(0.22, 1, 0.36, 1) infinite both, vh-key 16s linear infinite both; animation-delay: calc(8s + var(--i) * 45ms), 8s; }
  .vh-t { display: inline-block; }


  .vh-rail {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: absolute;
    right: clamp(10px, 2vw, 28px);
    top: clamp(96px, 22vh, 220px);
    z-index: 1;
  }

  .vh-rail span {
    width: 3px;
    height: 56px;
    border-radius: 2px;
    background: linear-gradient(var(--chartreuse), var(--chartreuse)) no-repeat 0 0 / 100% 0%, var(--night-edge);
  }

  .r-1 { animation: rail-a 16s linear infinite; }
  .r-2 { animation: rail-b 16s linear infinite; }
}

@keyframes vh-word {
  0% { opacity: 0; transform: translateY(0.35em); filter: blur(8px); }
  4% { opacity: 1; transform: none; filter: blur(0); }
  45% { opacity: 1; transform: none; filter: blur(0); }
  49% { opacity: 0; transform: translateY(-0.15em); filter: blur(6px); }
  100% { opacity: 0; transform: translateY(0.35em); filter: blur(8px); }
}

@keyframes vh-key {
  0%, 9% { color: inherit; }
  13%, 45% { color: var(--chartreuse); }
  49%, 100% { color: inherit; }
}


@media (max-width: 599px) {
  .vh-rail { right: 5px; }
}

@keyframes rail-a {
  0% { background-size: 100% 0%, auto; }
  50% { background-size: 100% 100%, auto; }
  50.01%, 100% { background-size: 100% 0%, auto; }
}

@keyframes rail-b {
  0%, 50% { background-size: 100% 0%, auto; }
  100% { background-size: 100% 100%, auto; }
}

/* ---------- Sections ---------- */

.section { padding: 80px 0; }

@media (min-width: 960px) {
  .section { padding: 112px 0; }
}

/* The first section is the page lifting over the dark ground, as the first screen rises
   over the splash (LaunchOverlay.tsx). */
.start {
  position: relative;
  z-index: 1;
  margin-top: -32px;
  border-radius: 32px 32px 0 0;
  background: var(--paper);
}

.section-head h2,
.feature-copy h2 {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 16ch;
}

.section-head p,
.feature-copy p {
  margin-top: 18px;
  max-width: 42ch;
  font-size: 1.1875rem;
  color: var(--muted);
}

.feature-copy p + p { margin-top: 14px; }

/* ---------- Feature rows: copy beside the app ---------- */

.feature-grid { display: grid; gap: 56px; align-items: center; }

@media (min-width: 960px) {
  .feature-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; }
  .feature-grid.flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .feature-grid.flip .feature-copy { order: 2; }
}

.feature-phones { display: flex; justify-content: center; gap: 28px; }

.feature-phones .phone { --pw: clamp(240px, 60vw, 320px); }

.feature-phones.pair .phone { --pw: 270px; }

@media (min-width: 700px) {
  .feature-phones.pair figure:nth-child(2) { margin-top: 64px; }
}

/* On a phone, a pair becomes a row you swipe, each at a size you can read. */
@media (max-width: 699px) {
  .feature-phones.pair {
    justify-content: flex-start;
    gap: 20px;
    margin: 0 calc(var(--gutter) * -1);
    padding: 8px var(--gutter) 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .feature-phones.pair::-webkit-scrollbar { display: none; }
  .feature-phones.pair figure { flex: none; scroll-snap-align: start; }
  .feature-phones.pair .phone { --pw: 64vw; }
}


/* Phones rise into place as they come into view. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .feature-phones .phone {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}

/* Listen opens with a full-bleed photograph, then the copy and the player overlap its foot. */
.listen { padding-top: 0; }

/* The whole frame, not a strip: at 400 px tall the strip cut off her head and the phone in her hand.
   The app's mini player (canvas AU-02) floats by her phone. */
.listen-photo { position: relative; margin: 0 0 64px; border-radius: 24px; overflow: hidden; }
.listen-photo > img:first-child { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.lp-player { position: absolute; right: 6%; bottom: 8%; width: clamp(220px, 30%, 380px); height: auto; padding: 10px 6px; border-radius: 18px; background: #fff; box-shadow: 0 24px 48px rgba(10, 18, 14, 0.28); }

@media (max-width: 599px) {
  .listen-photo > img:first-child { aspect-ratio: 4 / 5; object-position: 52% 50%; }
  .lp-player { right: 5%; width: 90%; bottom: 5%; }
}

.listen .feature-grid { position: relative; }



/* ---------- Readers differ ---------- */
/* The verse, then each question and its readings, numbered and equal: no reading is marked as
   the answer (IA-08: agreed first, equal parts, no winner). Readings are the source's words. */


.differ-grid { display: grid; gap: 48px; align-items: start; }

@media (min-width: 960px) {
  .differ-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .differ .section-head { position: sticky; top: 48px; }
}

.differ-card {
  padding: 32px 28px;
  border-radius: 28px;
  background: var(--sheet);
  box-shadow: var(--shadow);
}

@media (min-width: 700px) {
  .differ-card { padding: 40px 40px 32px; }
}

.rd-verse { margin: 0; }

.rd-verse p { font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.45; }

.rd-verse footer { margin-top: 10px; font-size: 0.875rem; color: var(--muted); }

.rd-readings { margin-top: 28px; }

.rd-group { padding: 22px 0; border-top: 1px solid var(--divider); }

.rd-about { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; }

.rd-options { list-style: none; margin: 12px 0 0; padding: 0; counter-reset: reading; display: grid; gap: 10px; }

.rd-options li {
  position: relative;
  padding-left: 32px;
  color: var(--muted);
  counter-increment: reading;
}

.rd-options li::before {
  content: counter(reading);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--divider);
}

.rd-credit { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--divider); font-size: 0.75rem; color: var(--muted); }

/* ---------- Statement: a paragraph that lights up as it is read ---------- */
/* Each word goes from dim to full as the paragraph crosses the screen, after the hims & hers
   paragraph. "No AI" and "free" light in chartreuse. Without support, the words are simply lit. */

.statement {
  background: var(--night);
  color: var(--night-ink);
  padding: 96px 0 112px;
}

.manifesto {
  margin-top: 28px;
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.625rem, 4.6vw, 4rem);
  line-height: 1.14;
  letter-spacing: -0.025em;
  view-timeline-name: --manifesto;
}

@media (min-width: 960px) {
  .manifesto { max-width: 26ch; }
}

.manifesto .lit { color: var(--chartreuse); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .manifesto span {
      animation: word-light linear both;
      animation-timeline: --manifesto;
      animation-range: cover calc(18% + var(--i) * 1.2%) cover calc(22% + var(--i) * 1.2%);
    }
  }
}

@keyframes word-light {
  from { opacity: 0.16; }
  to { opacity: 1; }
}

/* ---------- One fact, made human: 57 of 100 ---------- */

.fact { padding: clamp(80px, 10vw, 128px) 0; }

.fact-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) {
  .fact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 96px; }
}

.fact-number {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(5.5rem, 13vw, 10rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.fact-number .pct { font-size: 0.4em; letter-spacing: 0; margin-left: 6px; vertical-align: 0.95em; }

.fact-line { margin-top: 20px; font-family: var(--font-display); font-size: clamp(1.5rem, 2.8vw, 2.25rem); line-height: 1.2; max-width: 22ch; }
.fact-answer { margin-top: 20px; font-size: 1.25rem; font-weight: 600; color: var(--accent); }
.fact-source { margin-top: 24px; font-size: 0.875rem; color: var(--muted); }

.fact-dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: clamp(8px, 1.1vw, 14px); width: min(100%, 420px); justify-self: center; }
.fact-dots i { aspect-ratio: 1; border-radius: 50%; background: var(--divider); }
.fact-dots i.on { background: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  .fact-dots i.on { transition: background-color 240ms ease calc(var(--i) * 16ms), scale 420ms var(--ease-spring) calc(var(--i) * 16ms); }
  .js-moments .fact:not(.is-in) .fact-dots i.on { background: var(--divider); scale: 0.6; }
}

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

/* ---------- Original Greek: a night band ---------- */
/* The card follows the app's word card (evidence/word.tsx), itself drawn from
   Vocabulary's word sheet (mobbin.com/screens/935d4833-e999-4cb0-92df-033c996fc00d). */

.greek { background: var(--paper); color: var(--ink); }

.greek .section-head p { color: var(--muted); }

/* One card: the verse's words, then the chosen word's details beneath a hairline. */
.study {
  margin-top: 56px;
  padding: 28px 20px 32px;
  border-radius: 28px;
  background: var(--night);
  color: var(--night-ink);
  box-shadow: var(--shadow);
}

@media (min-width: 700px) {
  .study { padding: 40px 40px 44px; }
}

.study-detail {
  margin-top: 28px;
  padding-top: 32px;
  border-top: 1px solid var(--night-edge);
}

.words { display: flex; flex-wrap: wrap; gap: 6px 4px; }

.word {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--night-ink);
  cursor: pointer;
  transition: background-color 160ms ease, transform 200ms var(--ease-out);
}

.word .orig { font-size: clamp(1.625rem, 3.4vw, 2.25rem); line-height: 1.2; }
.word .gl { font-size: 0.8125rem; color: var(--night-muted); }

.word:hover,
.word:focus-visible { background: rgba(219, 236, 154, 0.12); }

.word:hover .orig,
.word:focus-visible .orig { color: var(--chartreuse); }

@media (prefers-reduced-motion: no-preference) {
  .word:hover { transform: translateY(-2px); }
}

/* With nothing chosen, the card and the word it describes both show: λόγος. */
.study-jn:not(:has(.word:is(:hover, :focus-visible))) .w-4 { background: rgba(219, 236, 154, 0.12); }
.study-jn:not(:has(.word:is(:hover, :focus-visible))) .w-4 .orig { color: var(--chartreuse); }

/* Headword and transliteration on the left; form, dictionary entry and counts on the right. */
.wc {
  display: none;
  --muted: var(--night-muted);
  --divider: var(--night-edge);
}

@media (min-width: 760px) {
  .wc { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: 48px; align-items: center; }
  .wc-detail > .wc-line:first-child { margin-top: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .wc { animation: card-in 260ms var(--ease-out); }
}

@keyframes card-in {
  from { opacity: 0.4; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.study:not(:has(.word:is(:hover, :focus-visible))) .wc[data-default] { display: grid; }

/* With site.js a click or tap picks a word: its card becomes the default and it keeps the highlight. */
.study-jn:has(.word.is-picked):not(:has(.word:is(:hover, :focus-visible))) .w-4:not(.is-picked) { background: none; }
.study-jn:has(.word.is-picked):not(:has(.word:is(:hover, :focus-visible))) .w-4:not(.is-picked) .orig { color: inherit; }
.study-jn:not(:has(.word:is(:hover, :focus-visible))) .word.is-picked { background: rgba(219, 236, 154, 0.12); }
.study-jn:not(:has(.word:is(:hover, :focus-visible))) .word.is-picked .orig { color: var(--chartreuse); }

/* data:study-rules */
.study-jn:has(.w-0:is(:hover, :focus-visible)) #jn-0,
.study-jn:has(.w-1:is(:hover, :focus-visible)) #jn-1,
.study-jn:has(.w-2:is(:hover, :focus-visible)) #jn-2,
.study-jn:has(.w-3:is(:hover, :focus-visible)) #jn-3,
.study-jn:has(.w-4:is(:hover, :focus-visible)) #jn-4,
.study-jn:has(.w-5:is(:hover, :focus-visible)) #jn-5,
.study-jn:has(.w-6:is(:hover, :focus-visible)) #jn-6,
.study-jn:has(.w-7:is(:hover, :focus-visible)) #jn-7,
.study-jn:has(.w-8:is(:hover, :focus-visible)) #jn-8,
.study-jn:has(.w-9:is(:hover, :focus-visible)) #jn-9,
.study-jn:has(.w-10:is(:hover, :focus-visible)) #jn-10,
.study-jn:has(.w-11:is(:hover, :focus-visible)) #jn-11,
.study-jn:has(.w-12:is(:hover, :focus-visible)) #jn-12,
.study-jn:has(.w-13:is(:hover, :focus-visible)) #jn-13,
.study-jn:has(.w-14:is(:hover, :focus-visible)) #jn-14,
.study-jn:has(.w-15:is(:hover, :focus-visible)) #jn-15,
.study-jn:has(.w-16:is(:hover, :focus-visible)) #jn-16 { display: grid; }
/* /data:study-rules */

.wc-head { font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1.1; color: var(--chartreuse); }
.wc-sub { margin-top: 4px; color: var(--muted); font-size: 1.0625rem; }



.wc-muted { color: var(--muted); }

.wc-line { margin-top: 10px; font-size: 1.0625rem; }
.wc-line .orig { font-size: 1.15em; }
.wc-detail { margin-top: 20px; }

@media (min-width: 760px) {
  .wc-detail { margin-top: 0; }
}






/* ---------- Search and translations: copy and covers left, two phones right ---------- */

.further-grid { display: grid; gap: 48px; align-items: center; }

@media (min-width: 960px) {
  .further-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
}

.further .covers { margin-top: 36px; }
/* The results in front of you, the profile they lead to stepping forward from behind. */

.search-demo { display: grid; justify-items: center; }

.sd-phone { position: relative; width: clamp(240px, 24vw, 310px); aspect-ratio: 675 / 1380; filter: drop-shadow(0 30px 40px rgba(10, 18, 14, 0.22)) drop-shadow(0 4px 8px rgba(10, 18, 14, 0.12)); }
.sd-bezel { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The screen hole of Apple's bezel, as in .yw-screens. */
.sd-screen { position: absolute; left: 5.333%; top: 2.5%; width: 89.333%; height: 95%; border-radius: 19% / 8.8%; overflow: hidden; background: #fff; container-type: inline-size; }
.sd-shot { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.sd-shot.is-on { opacity: 1; }

/* Over the frame's own field text (x 75–470, y 128–178 of 603 × 1311) and its results (from y 195). */
.sd-field, .sd-cover { display: none; }
.search-demo.is-live .sd-field { display: flex; align-items: center; position: absolute; left: 12.4%; top: 9.76%; width: 64%; height: 3.81%; background: rgb(242, 243, 240); font: 400 5.2cqw/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; color: #16231E; }
.sd-caret { width: 0.5cqw; height: 1.15em; margin-left: 0.4cqw; background: #2f6fde; border-radius: 1px; }
.search-demo.is-live .sd-cover { display: block; position: absolute; left: 0; right: 0; top: 14.9%; bottom: 0; background: #fff; clip-path: inset(0 0 0 0); }
.search-demo.is-live .sd-cover.is-open { clip-path: inset(100% 0 0 0); }

@media (prefers-reduced-motion: no-preference) {
  .sd-caret { animation: sd-blink 1s steps(1) infinite; }
  .sd-cover.is-open { transition: clip-path 900ms var(--ease-out); }
}
@keyframes sd-blink { 50% { opacity: 0; } }

/* ---------- Translations: covers and Compare ---------- */
/* Portrait covers in five fixed brand tones, one per version (docs/more-translations-plan.md,
   canvas MT-02–06), drawn at book size. */


@media (min-width: 1040px) {
  }

.cov-bsb { --cov-bg: var(--forest); --cov-fg: var(--chalk); }
.cov-asv { --cov-bg: var(--sage); --cov-fg: var(--chalk); }
.cov-web, .cov-ylt { --cov-bg: var(--chalk); --cov-fg: var(--forest); }
.cov-kjv { --cov-bg: var(--cover-ink); --cov-fg: var(--chartreuse); }
.cov-lsv, .cov-msb { --cov-bg: var(--chartreuse); --cov-fg: var(--forest); }



.covers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 14px;
  margin-top: 40px;
}

@media (min-width: 600px) {
  .covers { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

.covers li { display: flex; flex-direction: column; gap: 12px; }

.cov {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 5 / 7;
  border-radius: 3px 8px 8px 3px;
  background: var(--cov-bg);
  color: var(--cov-fg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 14px 28px -12px rgba(22, 35, 30, 0.35), inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  transform-origin: 0 100%;
  transition: transform 360ms var(--ease-spring), box-shadow 360ms var(--ease-out);
}

.cov::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 8%; background: rgba(0, 0, 0, 0.14); }
.cov::after { content: ""; position: absolute; inset: 0 auto 0 8%; width: 1px; background: rgba(255, 255, 255, 0.22); }

.cov b {
  margin-left: 8%;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.9375rem, 1.4vw, 1.125rem);
  letter-spacing: 0.04em;
}

.cov i { display: block; margin-left: 8%; width: 28%; height: 1.5px; background: currentColor; opacity: 0.5; }

.cov-name { font-family: var(--font-display); font-size: 0.8125rem; line-height: 1.3; color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .covers li:hover .cov {
    transform: translateY(-6px) rotate(-2deg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 24px 36px -14px rgba(22, 35, 30, 0.45), inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cov { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 14px 28px -12px rgba(0, 0, 0, 0.7); }
}


/* ---------- FAQ ---------- */

.faq { padding-top: 0; }

.faq .wrap { max-width: 860px; }

.faq-list { margin-top: 40px; border-top: 1px solid var(--divider); }

.faq-list details { border-bottom: 1px solid var(--divider); }

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 260ms var(--ease-out);
}

.faq-list details[open] summary::after { transform: translateY(2px) rotate(-135deg); }

.faq-list .answer { padding: 0 0 26px; color: var(--muted); max-width: 62ch; }

.faq-list .answer p + p { margin-top: 12px; }

.faq-list .answer a { color: var(--ink); text-underline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .faq-list details[open] .answer { animation: rise 320ms var(--ease-out); }
}

/* ---------- Closing: a wall of real screens, the call on top ---------- */
/* Five columns of screens drift at different speeds as the section scrolls, after the hims &
   hers card wall. Straight on, never rotated. */

.closing {
  position: relative;
  background: var(--night);
  color: var(--night-ink);
  text-align: center;
  overflow: hidden;
  border-radius: 32px 32px 0 0;
}

/* Small screens, many of them, and dim: a texture behind the call, never competing with it. */
.wall {
  display: grid;
  grid-template-columns: repeat(9, 132px);
  justify-content: center;
  gap: 14px;
  height: 640px;
  overflow: hidden;
  opacity: 0.28;
  mask-image: radial-gradient(70% 70% at 50% 50%, transparent 30%, #000 75%);
}

.wall-col { display: flex; flex-direction: column; gap: 14px; }
.wall-col img { width: 100%; height: auto; border-radius: 9% / 4.2%; }
.c-2, .c-4, .c-6, .c-8 { margin-top: -120px; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .wall { view-timeline-name: --wall; }
    .wall-col { animation: wall-down linear both; animation-timeline: --wall; }
    .c-2, .c-4, .c-6, .c-8 { animation-name: wall-up; }
    .c-3, .c-7 { animation-name: wall-up-slow; }
  }
}

@keyframes wall-down { from { transform: translateY(-80px); } to { transform: translateY(80px); } }
@keyframes wall-up { from { transform: translateY(100px); } to { transform: translateY(-100px); } }
@keyframes wall-up-slow { from { transform: translateY(40px); } to { transform: translateY(-40px); } }

.closing-card {
  position: absolute;
  inset: 0;
  margin: auto;
  height: fit-content;
  max-width: 520px;
  padding: 40px 32px;
  border-radius: 28px;
  background: rgba(14, 24, 20, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px var(--night-edge);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.closing-card h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.08; letter-spacing: -0.02em; max-width: 16ch; }

.closing-card p { margin-top: 14px; max-width: 36ch; color: var(--night-muted); font-size: 1.0625rem; }

/* The app icon at iOS's corner shape (about 22.4% of the side), with the system's hairline. */
.app-icon {
  width: 72px;
  height: 72px;
  margin-bottom: 20px;
  border-radius: 22.4%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 24px -8px rgba(0, 0, 0, 0.6);
}

@media (max-width: 599px) {
  .closing-card { width: calc(100% - 2 * var(--gutter)); padding: 36px 20px; }
}

/* ---------- Footer ---------- */
/* Plain text columns, no social row: Telegram's footer
   (mobbin.com/screens/383ffba0-296e-4542-87e7-9a7ababdae88). */

.site-foot {
  background: var(--night);
  color: var(--night-muted);
  padding: 0;
  font-size: 0.9375rem;
}

.site-foot .wrap {
  position: relative;
  display: grid;
  gap: 24px;
  padding-top: 40px;
  padding-bottom: 56px;
}

/* The rule spans the text column, not the gutters. */
.site-foot .wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  border-top: 1px solid var(--night-edge);
}

@media (min-width: 720px) {
  .site-foot .wrap { grid-template-columns: 1fr auto; align-items: start; }
}

.foot-mark { width: 80px; margin-left: -4px; }

.foot-note { margin-top: 12px; max-width: 46ch; }

.foot-credits { margin-top: 12px; max-width: 72ch; font-size: 0.8125rem; line-height: 1.5; opacity: 0.85; }

.foot-links { display: flex; flex-wrap: wrap; gap: 0 8px; margin-left: -8px; }

.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  color: var(--night-ink);
  text-decoration: none;
}

.foot-links a:hover { text-decoration: underline; text-underline-offset: 4px; }


/* ---------- Brand pattern: the Yada symbol, repeated (after pocketapp.com's patterned blocks) ---------- */
/* A staggered grid of the page-turn mark in chartreuse at low opacity on forest. It drifts slowly,
   and a little faster under the pointer. */

.pattern {
  background-color: var(--forest);
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22 viewBox=%220 0 120 120%22%3E%3Cg fill=%22%23DBEC9A%22 fill-opacity=%220.16%22%3E%3Cpath transform=%22translate%288 8%29 scale%280.17%29%22 d=%22M 34 42 C 62 40 80 44 94 64 C 104 79 115 101 131 133 L 144 161 C 146 139 146 119 151 101 C 158 77 181 53 221 40 L 221 94 C 191 94 174 103 164 119 C 157 131 154 152 150 172 C 145 198 128 221 99 227 C 75 232 49 226 42 208 C 34 190 43 171 61 169 C 80 167 94 179 91 196 C 90 204 86 210 81 214 C 97 214 108 205 112 191 C 115 180 112 169 105 155 L 60 76 C 50 57 43 47 34 42 Z%22/%3E%3Cpath transform=%22translate%2868 68%29 scale%280.17%29%22 d=%22M 34 42 C 62 40 80 44 94 64 C 104 79 115 101 131 133 L 144 161 C 146 139 146 119 151 101 C 158 77 181 53 221 40 L 221 94 C 191 94 174 103 164 119 C 157 131 154 152 150 172 C 145 198 128 221 99 227 C 75 232 49 226 42 208 C 34 190 43 171 61 169 C 80 167 94 179 91 196 C 90 204 86 210 81 214 C 97 214 108 205 112 191 C 115 180 112 169 105 155 L 60 76 C 50 57 43 47 34 42 Z%22/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
}

@media (prefers-reduced-motion: no-preference) {
  .pattern { animation: pattern-drift 40s linear infinite; }
  .pattern:hover { animation-duration: 12s; }
}

@keyframes pattern-drift { to { background-position: 120px 120px; } }

/* ---------- Today on its patterned panel ---------- */

.today-panel {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  min-height: 560px;
  padding: 48px 24px 0;
  border-radius: 32px;
  overflow: hidden;
}

.today-panel .phone { --pw: clamp(190px, 22vw, 270px); flex: none; transition: translate 400ms var(--ease-out); }
.today-back { margin-right: -40px; margin-bottom: -120px; opacity: 0.95; }
.today-front { position: relative; margin-bottom: -60px; }
.today-panel:hover .today-front { translate: 0 -12px; }
.today-panel:hover .today-back { translate: 0 -6px; }

/* ---------- Read it your way ---------- */
/* Five cases, 6 s each, in a 30 s loop. Within a case its two or three screens share the 6 s.
   Each screen is shown by one keyframe run (d2 for 3 s, d3 for 2 s), delayed to its slot. */

.yw-grid { display: grid; gap: 40px; align-items: center; }

@media (min-width: 1000px) {
  .yw-grid { grid-template-columns: minmax(0, 0.9fr) auto minmax(0, 1fr); gap: 56px; }
}

.yw-title { font-size: clamp(2.5rem, 5.5vw, 4.5rem); line-height: 1; letter-spacing: -0.03em; max-width: 8ch; }

.yw-stage { position: relative; display: grid; place-items: center; padding: 40px clamp(32px, 6vw, 72px); }

.yw-backdrop { position: absolute; inset: 12% 0; border-radius: 40px; }

.yw-phone { position: relative; width: clamp(230px, 22vw, 290px); aspect-ratio: 675 / 1380; filter: drop-shadow(0 30px 40px rgba(10, 18, 14, 0.35)); }
.yw-bezel { position: absolute; inset: 0; width: 100%; height: 100%; }
.yw-screens { position: absolute; left: 5.333%; top: 2.5%; width: 89.333%; height: 95%; border-radius: 19% / 8.8%; overflow: hidden; background: var(--paper); }
.yw-screen { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.yw-screen.ys-1[style*="--k: 0"] { opacity: 1; }

.yw-cases { display: grid; gap: 6px; }

.yw-case {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px 12px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.yw-case:hover, .yw-case:focus-visible { background: var(--selection); }

.yw-icon { position: relative; flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--muted); box-shadow: inset 0 0 0 1px var(--divider); }
.yw-icon > svg:first-child { width: 22px; height: 22px; }
.yw-ring { position: absolute; inset: 0; width: 48px; height: 48px; transform: rotate(-90deg); fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 138.2; stroke-dashoffset: 138.2; }

.yw-text { display: grid; gap: 2px; }
.yw-name { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.625rem); color: var(--muted); transition: color 200ms ease; }
.yw-line { font-size: 0.9375rem; color: var(--muted); max-height: 0; overflow: hidden; opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .yw-screen { animation-duration: 30s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: linear; }
  .yw-screen.d3 { animation-name: yw-d3; animation-delay: calc(var(--c) * 6s - var(--yw-o, 0s) + var(--k) * 2s); }
  .yw-screen.d2 { animation-name: yw-d2; animation-delay: calc(var(--c) * 6s - var(--yw-o, 0s) + var(--k) * 3s); }
  .yw-screen.ys-1[style*="--k: 0"] { opacity: 0; }
  .yw-ring { animation: yw-ring 30s linear infinite both; animation-delay: calc(var(--c) * 6s - var(--yw-o, 0s)); }
  .yw-case .yw-name { animation: yw-on 30s linear infinite both; animation-delay: calc(var(--c) * 6s - var(--yw-o, 0s)); }
  .yw-case .yw-icon { animation: yw-icon 30s linear infinite both; animation-delay: calc(var(--c) * 6s - var(--yw-o, 0s)); }
  .yw-case .yw-line { animation: yw-line 30s ease infinite both; animation-delay: calc(var(--c) * 6s - var(--yw-o, 0s)); }
}

/* Without motion, every case shows its line and the first screen stays up. */
@media (prefers-reduced-motion: reduce) {
  .yw-line { max-height: none; opacity: 1; }
}

@keyframes yw-d3 { 0% { opacity: 0; } 1% { opacity: 1; } 6.67% { opacity: 1; } 7.67% { opacity: 0; } 100% { opacity: 0; } }
@keyframes yw-d2 { 0% { opacity: 0; } 1% { opacity: 1; } 10% { opacity: 1; } 11% { opacity: 0; } 100% { opacity: 0; } }
@keyframes yw-ring { 0% { stroke-dashoffset: 138.2; opacity: 1; } 20% { stroke-dashoffset: 0; opacity: 1; } 21%, 100% { stroke-dashoffset: 138.2; opacity: 0; } }
@keyframes yw-on { 0%, 20% { color: var(--ink); } 21%, 100% { color: var(--muted); } }
@keyframes yw-icon { 0%, 20% { color: var(--accent); } 21%, 100% { color: var(--muted); } }
@keyframes yw-line { 0% { max-height: 0; opacity: 0; } 2%, 19% { max-height: 3em; opacity: 1; } 21%, 100% { max-height: 0; opacity: 0; } }

/* With site.js: the loop waits until the section is on screen, and a chosen case restarts it
   there by shifting every delay by --yw-o. */
.yw.yw-wait :is(.yw-screen, .yw-ring, .yw-name, .yw-icon, .yw-line) { animation-name: none; }
.yw.yw-wait .ys-1[style*="--k: 0"] { opacity: 1; }
.yw.yw-reset :is(.yw-screen, .yw-ring, .yw-name, .yw-icon, .yw-line) { animation-name: none; }

/* Hover or focus a case to hold its first screen. */
.yw:has(.yw-case:is(:hover, :focus-visible)) .yw-screen { animation: none; opacity: 0; }
.yw:has(.yc-1:is(:hover, :focus-visible)) .ys-1[style*="--k: 0"],
.yw:has(.yc-2:is(:hover, :focus-visible)) .ys-2[style*="--k: 0"],
.yw:has(.yc-3:is(:hover, :focus-visible)) .ys-3[style*="--k: 0"],
.yw:has(.yc-4:is(:hover, :focus-visible)) .ys-4[style*="--k: 0"],
.yw:has(.yc-5:is(:hover, :focus-visible)) .ys-5[style*="--k: 0"] { opacity: 1; }

@media (max-width: 999px) {
  .yw-title { max-width: none; text-align: center; }
  .yw-cases { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); scrollbar-width: none; }
  .yw-line { display: none; }
  .yw-name { font-size: 1.0625rem; }
  .yw-case { gap: 10px; padding: 8px 14px 8px 8px; }
  .yw-icon { width: 40px; height: 40px; }
  .yw-ring { width: 40px; height: 40px; }
  .today-panel { min-height: 460px; }
}

/* ---------- Read-along in Listen ---------- */
/* The word being read sits in a dark pill, as in the app's player (canvas AU-02). */

.readalong { margin-top: 32px; display: grid; gap: 14px; justify-items: start; }
.ra-play { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px 0 14px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font: inherit; font-weight: 600; cursor: pointer; }
.ra-play svg { width: 20px; height: 20px; fill: currentColor; }
.ra-play .ra-icon-pause, .ra-play[aria-pressed="true"] .ra-icon-play { display: none; }
.ra-play[aria-pressed="true"] .ra-icon-pause { display: block; }
.ra-text { margin: 0; font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.6; max-width: 30ch; }
.ra-text sup { font-family: var(--font-body); font-size: 0.6em; color: var(--muted); }
.ra-text span { padding: 0.08em 0.2em; margin: 0 -0.2em; border-radius: 0.4em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ra-text span.ra-on { background: var(--ink); color: var(--paper); }
.readalong figcaption { font-size: 0.875rem; color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .ra-text span { transition: background-color 120ms ease, color 120ms ease; }
}

/* ---------- Made for every day: the bento ---------- */
/* John's card rule (15 Oct 2026): one card per thing, a soft fill, one 24 px radius, no shadow,
   never nested. The app pieces inside float on a shadow of their own, as they do on a phone. */

.bento-title { font-size: clamp(2.25rem, 4.5vw, 3.5rem); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 40px; }
.bento { display: grid; gap: 16px; list-style: none; padding: 0; margin: 0; }

@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bc-plans, .bc-size { grid-column: span 2; }
}

.bc { display: flex; flex-direction: column; padding: 12px 12px 28px; border-radius: 24px; background: var(--selection); }
.bc h3 { margin: 22px 16px 0; font-size: 1.375rem; line-height: 1.2; }
.bc > p { margin: 6px 16px 0; color: var(--muted); max-width: 46ch; }

.bc-art { position: relative; height: clamp(220px, 24vw, 300px); border-radius: 16px; overflow: hidden; display: grid; place-items: center; }

.bc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.bc-rows { position: relative; display: grid; gap: 8px; width: min(86%, 380px); }
.bc-rows p { display: grid; gap: 2px; padding: 14px 18px; border-radius: 14px; background: var(--sheet); color: var(--ink); box-shadow: var(--shadow); font-size: 0.875rem; }
.bc-rows b { font-weight: 500; font-size: 1rem; }
.bc-rows span { color: var(--muted); }

.bc-ui { width: min(88%, 420px); height: auto; padding: 14px 16px 10px; border-radius: 18px; background: #fff; box-shadow: 0 18px 40px rgba(10, 18, 14, 0.3); }

.bc-toggle { position: relative; display: flex; align-items: center; justify-content: space-between; width: min(84%, 300px); padding: 16px 18px; border-radius: 14px; background: var(--sheet); box-shadow: var(--shadow); font-size: 1.0625rem; color: var(--ink); }
.bc-toggle i { position: relative; width: 51px; height: 31px; border-radius: 999px; background: var(--accent); }
.bc-toggle i::after { content: ""; position: absolute; top: 2px; right: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }

.bc-size .bc-art { background: var(--forest); place-items: end center; }
.bc-shot { position: absolute; bottom: -24px; width: clamp(120px, 15vw, 190px); height: auto; border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
.bc-shot.s-1 { left: 50%; translate: -165% 0; rotate: 0deg; }
.bc-shot.s-2 { left: 50%; translate: -50% -14px; z-index: 1; }
.bc-shot.s-3 { left: 50%; translate: 65% 0; }

@media (max-width: 599px) {
  .bc-shot { width: 29%; }
}

@media (prefers-reduced-motion: no-preference) {
  .bc-ui, .bc-rows, .bc-toggle { transition: transform 500ms var(--ease-out); }
  .bc:hover .bc-ui, .bc:hover .bc-rows, .bc:hover .bc-toggle { transform: translateY(-6px); }
  .bc-photo { transition: scale 900ms var(--ease-out); }
  .bc:hover .bc-photo { scale: 1.04; }
}

/* ---------- Depth: things that float move at their own pace ---------- */
/* As a card or the photo crosses the screen, what floats on it drifts against it, so it reads as a
   layer above. Scroll-driven, so it costs no script and simply stays put where unsupported. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bc-rows, .bc-ui, .bc-toggle, .lp-player { animation: float-up linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .bc-photo, .listen-photo > img:first-child { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  }
}
@keyframes float-up { from { translate: 0 28px; } to { translate: 0 -28px; } }
@keyframes settle { from { scale: 1.12; } to { scale: 1; } }

/* Moments when a card arrives (site.js adds .is-in): the iCloud switch turns on, the three reader
   screens fan out from a stack, the plan rows come in one after the other. */
.bc-toggle i { transition: background-color 300ms ease 450ms; }
.bc-toggle i::after { transition: translate 350ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) 450ms; }
.js-moments .bc-cloud:not(.is-in) .bc-toggle i { background: #c9cfc4; }
.js-moments .bc-cloud:not(.is-in) .bc-toggle i::after { translate: -20px 0; }
.bc-shot { transition: translate 900ms var(--ease-out) 200ms, rotate 900ms var(--ease-out) 200ms, transform 600ms var(--ease-out); }
.js-moments .bc-size:not(.is-in) .bc-shot { translate: -50% 40px; }
.bc-size.is-in .bc-shot.s-1 { rotate: -4deg; }
.bc-size.is-in .bc-shot.s-3 { rotate: 4deg; }
/* Hover: the three screens straighten and rise together, one move, no stagger. */
.bc-size.is-in:hover .bc-shot { rotate: 0deg; transform: translateY(-6px); transition: rotate 600ms var(--ease-out), transform 600ms var(--ease-out), translate 900ms var(--ease-out); }
.bc-rows p { transition: opacity 500ms ease, transform 600ms var(--ease-out); }
.bc-rows p:nth-child(2) { transition-delay: 150ms; }
.js-moments .bc-plans:not(.is-in) .bc-rows p { opacity: 0; transform: translateY(16px); }

@media (prefers-reduced-motion: reduce) {
  .bc-toggle i, .bc-toggle i::after, .bc-shot, .bc-rows p { transition: none; }
}

/* ---------- Scroll reveal ---------- */

/* Headings rise out of a mask as they come into view. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section-head h2, .feature-copy h2, .yw-title, .closing-card h2 {
      animation: heading-rise linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 70%;
    }
  }
}

@keyframes heading-rise {
  from { clip-path: inset(0 0 100% 0); transform: translateY(0.5em); }
  to { clip-path: inset(0 0 -0.2em 0); transform: none; }
}


@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Legal pages ---------- */

/* Privacy, terms and support: the summary on a night band continuing the header, then the text
   with a sticky list of its sections (MasterClass's Privacy Center, cited in the pages). */

.doc-hero { background: var(--night); color: var(--night-ink); padding: 24px 0 clamp(56px, 8vw, 88px); }

.doc-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: clamp(40px, 6vw, 64px); border-radius: 999px; background: var(--night-raised); }
.doc-tabs a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px; color: var(--night-muted); text-decoration: none; font-size: 0.9375rem; font-weight: 500; }
.doc-tabs a:hover { color: var(--night-ink); }
.doc-tabs a[aria-current="page"] { background: var(--chartreuse); color: var(--night); }

.doc-hero h1 { font-size: clamp(2.75rem, 7vw, 4.5rem); line-height: 1; letter-spacing: -0.03em; }
.doc-summary { margin-top: 24px; max-width: 36ch; font-family: var(--font-display); font-size: clamp(1.25rem, 2.4vw, 1.625rem); line-height: 1.4; color: var(--night-ink); }
.doc-date { margin-top: 20px; font-size: 0.9375rem; color: var(--night-muted); }

.doc { display: grid; gap: 48px; padding-top: clamp(48px, 7vw, 80px); padding-bottom: 112px; }
@media (min-width: 900px) {
  .doc { grid-template-columns: 220px minmax(0, 68ch); gap: 80px; }
}

.doc-toc { display: none; }
@media (min-width: 900px) {
  .doc-toc { display: block; position: sticky; top: 32px; align-self: start; }
}
.doc-toc > p { font-size: 0.8125rem; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.doc-toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--divider); }
.doc-toc a { display: block; padding: 6px 0 6px 16px; margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; font-size: 0.9375rem; line-height: 1.35; }
.doc-toc a:hover { color: var(--ink); }
.doc-toc a[aria-current="true"] { color: var(--ink); border-left-color: var(--accent); font-weight: 500; }

.doc-body h2 { font-size: 1.375rem; line-height: 1.25; margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--divider); scroll-margin-top: 24px; }
.doc-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc-body p, .doc-body ul { margin-top: 14px; font-size: 1.0625rem; line-height: 1.65; }
.doc-body ul { list-style: disc; padding-left: 1.25em; }
.doc-body li + li { margin-top: 8px; }
.doc-body a, .doc-summary a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.doc-summary a { text-decoration-color: var(--chartreuse); }

/* Support: two ways to reach us, then the common questions. One card per thing you tap (John's card rule). */
.support { padding-top: clamp(40px, 6vw, 64px); padding-bottom: 112px; }
.help-cards { display: grid; gap: 16px; list-style: none; padding: 0; margin: 0; }
@media (min-width: 720px) { .help-cards { grid-template-columns: 1fr 1fr; } }
.help-card { display: grid; gap: 8px; height: 100%; padding: 28px; border-radius: 24px; background: var(--selection); color: var(--ink); text-decoration: none; transition: background-color 200ms ease; }
.help-card:hover { background: var(--highlight); }
.help-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 50%; background: var(--accent); color: var(--paper); }
.help-icon svg { width: 22px; height: 22px; }
.help-title { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; }
.help-line { color: var(--muted); }

.doc-faq { display: grid; gap: 24px; margin-top: clamp(64px, 9vw, 112px); }
@media (min-width: 900px) { .doc-faq { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; } }
.doc-faq h2 { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.05; letter-spacing: -0.02em; }
.doc-faq .faq-list { margin-top: 0; }