/* Two Little Ears — twolittleears.com
 *
 * The app's own visual system ("warm paper, pastel pages"; design/visual/README.md, shared/src/theme.ts):
 * the chrome is paper, pastels are surfaces and never text, indigo is the one action colour, berry is a
 * person's voice, mint and teal are the AI voice, gold appears only as good news (the "save" tab).
 * The hero is the child's room from the app's bookshelf: sky wall, bunting, sage carpet.
 * One look on purpose (the brand is light paper), so there is no dark theme; every colour is set explicitly.
 */

:root {
  /* paper and ink */
  --paper: #FBF7F0;
  --card: #FFFFFF;
  --sunken: #F0E8DC;
  --edge: #EADFD0;
  --edge-strong: #D9CEBB;
  --ink: #221E1A;
  --ink-soft: #6B6258;
  --ink-faint: #4A433C;

  /* meaning */
  --indigo: #5A5CA2;
  --indigo-deep: #47488A;
  --berry: #A33B53;
  --blush: #F6D9DF;
  --mint: #D2E6DE;
  --teal: #15534C;
  --butter: #FDF0CF;
  --amber: #8A5A12;
  --gold: #F2B134;

  /* the child's room */
  --wall: #DCE7F5;
  --carpet: #A9B8A3;
  --wood: #C9A571;
  --wood-dark: #A9834F;
  --wood-shelf: #EFE0C8;
  --wood-lip: #D9BC91;
  --wood-deep: #8F6C3F;

  /* the playing screen */
  --night: #0C0A09;
  --night-text: #F7F2E8;
  --night-caption: #8F8578;
  --night-number: #6B6258;
  --night-outline: #9C9083;

  --font-display: "Fraunces", "Noto Serif TC", "Songti TC", Georgia, serif;
  --font-body: "Atkinson Hyperlegible", "PingFang HK", "Noto Sans HK", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.625rem;
  --step-3: clamp(1.875rem, 1.4rem + 2vw, 2.5rem);
  --step-4: clamp(2.25rem, 1.5rem + 3.6vw, 3.75rem);

  --gutter: clamp(16px, 4vw, 40px);
  --measure: 62ch;
  --radius: 20px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 68px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

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

img, svg { max-width: 100%; }

a { color: var(--indigo); text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }

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

.skip { position: absolute; left: -999px; top: 8px; padding: 10px 16px; background: var(--card); border-radius: 10px; z-index: 10; }
.skip:focus { left: 8px; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100;
  font-weight: 700;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0;
}
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); line-height: 1.25; }
p { margin: 0; }

.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); }
.stack { display: flex; flex-direction: column; gap: var(--gap, 16px); }
.lead { font-size: var(--step-1); line-height: 1.5; color: var(--ink-faint); max-width: var(--measure); }
.muted { color: var(--ink-soft); }
.small { font-size: var(--step--1); }

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 5;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--edge);
}
.site-header .wrap { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand img { width: 38px; height: 38px; border-radius: 10px; }
.brand span { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: 1.25rem; }
.site-nav { display: flex; gap: 22px; margin-left: auto; }
.site-nav a { color: var(--ink-faint); text-decoration: none; font-weight: 700; font-size: 0.9375rem; }
.site-nav a:hover { color: var(--indigo); }
.site-header .btn { margin-left: 4px; }
@media (max-width: 860px) { .site-nav { display: none; } .site-header .btn { margin-left: auto; } }
@media (max-width: 420px) { .brand span { font-size: 1.0625rem; } .site-header .btn { padding-inline: 16px; } }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 999px;
  background: var(--indigo); color: #FFFFFF;
  font-weight: 700; font-size: 1.0625rem; text-decoration: none;
  border: 2px solid var(--indigo);
}
.btn:hover { background: var(--indigo-deep); border-color: var(--indigo-deep); color: #FFFFFF; }
.btn-small { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }
.btn svg { flex-shrink: 0; }

/* The stores' badges, both the same height, as Apple and Google ask. Until the iPhone version is in the
   store, the App Store one says "Coming soon to the App Store" and is not a link (a span, with no hover). */
.store-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 14px; }
.badge { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; border-radius: 9px; text-decoration: none; }
.badge img { display: block; height: 52px; width: auto; }
a.badge:hover img { filter: brightness(1.25); }
.badge-soon { cursor: default; }

/* ---------- hero: the child's room ---------- */

.hero { background: var(--wall); position: relative; overflow: hidden; }
/* The bunting: the app's string and colours, drawn bigger for the web (30 Oct, the product owner's
   comment). Full width, a soft shadow, and each flag swings once into place as the page opens, one
   after another along the string; nothing moves after that, and nothing at all with reduced motion. */
.bunting { display: block; width: 100%; height: clamp(60px, 7vw, 100px); filter: drop-shadow(0 3px 2px rgba(34,30,26,0.14)); }
.bunting .flag { transform-box: fill-box; transform-origin: 50% 0; animation: flag-settle 1.4s cubic-bezier(.3,.7,.35,1) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes flag-settle { 0% { transform: rotate(-9deg); } 45% { transform: rotate(5deg); } 75% { transform: rotate(-2deg); } 100% { transform: rotate(0); } }
.hero-grid {
  display: grid; gap: 40px; align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  padding-block: 36px 0;
}
.hero-copy { --gap: 22px; padding-bottom: 76px; }
.hero h1 { font-size: var(--step-4); }
.hero .tagline { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-size: var(--step-2); font-weight: 500; color: var(--berry); }
.hero p.lead { color: var(--ink-faint); }
/* the four promises: one soft strip, four cells with thin dividers, a coloured line icon, a bold title and
   a short line. No circles, so they don't read as more voice bubbles beside the hero's (30 Oct). */
.promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 6px 0 0; padding: 16px 0; border-radius: 18px; background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8); }
.promises li { display: flex; flex-direction: column; gap: 3px; padding: 0 14px; border-left: 1px solid rgba(34, 30, 26, 0.12); }
.promises li:first-child { border-left: 0; }
.promises svg { width: 24px; height: 24px; margin-bottom: 6px; color: var(--k); }
.promises b { font-size: 0.9rem; white-space: nowrap; line-height: 1.25; color: var(--ink); }
.promises small { font-size: 0.8125rem; line-height: 1.35; color: var(--ink-soft); }
@media (max-width: 520px) {
  .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .promises li:nth-child(odd) { border-left: 0; }
}

.hero-art { position: relative; align-self: end; display: flex; justify-content: center; }
.carpet { height: 64px; background: var(--carpet); border-top: 7px solid var(--paper); margin-top: -40px; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hero-copy { padding-bottom: 8px; }
}

/* The scene: an open picture book on the carpet, three voices above it, and the phone beside it asking who
   should read. Square, so the voices fill the sky; every size inside follows its width (cqw). */
.scene { position: relative; width: min(100%, 560px); aspect-ratio: 4 / 5; z-index: 1; container-type: inline-size; }
.scene > .book { position: absolute; left: -2%; bottom: 0; width: 84%; height: auto; filter: drop-shadow(0 18px 18px rgba(34,30,26,0.22)); }
.scene .phone { position: absolute; right: 0; bottom: 7%; width: 26%; padding: 1.2cqw; border-radius: 5cqw; transform: rotate(5deg); }
.scene .phone .screen { border-radius: 4cqw; }
/* a voice: a white bubble with a face, a name and a language, its tail pointing down at the book */
.vb { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 2.2cqw; padding: 1.4cqw 3.4cqw 1.4cqw 1.4cqw; border-radius: 999px; background: var(--card); box-shadow: 0 2.4cqw 4.4cqw -2.6cqw rgba(34, 30, 26, 0.55);
  animation: vb-in 0.7s cubic-bezier(.3,.7,.35,1) both, vb-bob 5.5s ease-in-out infinite; animation-delay: calc(0.35s + var(--i) * 0.45s), calc(var(--i) * -1.8s); }
.vb::after { content: ""; position: absolute; bottom: -1.3cqw; left: 6cqw; width: 3cqw; height: 3cqw; border-radius: 0.6cqw; background: var(--card); transform: rotate(45deg); }
.vb-face { flex-shrink: 0; width: 9.8cqw; height: 9.8cqw; border-radius: 50%; object-fit: cover; border: 0.5cqw solid var(--card); box-shadow: 0 0 0 0.4cqw var(--berry); }
.vb-ai { display: flex; align-items: center; justify-content: center; background: var(--mint); color: var(--teal); box-shadow: 0 0 0 0.4cqw var(--teal); }
.vb-ai svg { width: 55%; height: 55%; }
.vb-initial { display: flex; align-items: center; justify-content: center; background: var(--blush); color: var(--berry); font-weight: 700; font-size: 4.2cqw; }
.vb-text { display: flex; flex-direction: column; line-height: 1.2; }
.vb-text b { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-size: 4.3cqw; color: var(--ink); white-space: nowrap; }
.vb-text small { font-size: 3.2cqw; color: var(--ink-soft); white-space: nowrap; }
@keyframes vb-in { from { opacity: 0; translate: 0 3cqw; scale: 0.92; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes vb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2cqw); } }

/* ---------- phones ---------- */

.phone {
  aspect-ratio: 9 / 19;
  border-radius: 28px;
  background: #1B1816;
  padding: 7px;
  box-shadow: 0 24px 40px -18px rgba(34,30,26,0.55);
}
.phone .screen { width: 100%; height: 100%; border-radius: 22px; overflow: hidden; position: relative; }
/* The playing screen (4), drawn to the v0.12 board at the phone's own proportions: every size is the
   board's 390-wide size as a share of the screen's width (cqw), so the hero's small phone and the dark
   section's bigger one are the same screen at two sizes. */
.phone { container-type: inline-size; }
.screen.dark { background: var(--night); color: var(--night-text); display: flex; flex-direction: column; justify-content: space-between; padding: 12cqw 5cqw 9cqw; text-align: center; }
.screen.dark .top { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; }
.screen.dark .top svg { width: 6.7cqw; height: 6.7cqw; flex-shrink: 0; color: var(--night-text); }
.screen.dark .who { font-size: 3.6cqw; color: var(--night-caption); white-space: nowrap; }
.screen.dark .mid { display: flex; flex-direction: column; align-items: center; gap: 5.5cqw; }
.screen.dark .title { font-family: var(--font-display); font-weight: 700; color: var(--night-number); font-size: 10.8cqw; line-height: 1; white-space: nowrap; }
.screen.dark .page { font-size: 3.8cqw; color: var(--night-caption); }
.screen.dark .dots { display: flex; flex-wrap: wrap; gap: 1.8cqw; justify-content: center; max-width: 69cqw; }
.screen.dark .dots i { width: 2.3cqw; height: 2.3cqw; border-radius: 50%; background: #3A342E; }
.screen.dark .dots i.on { background: var(--night-text); }
.screen.dark .controls { display: flex; align-items: flex-start; justify-content: center; gap: 6.7cqw; }
.screen.dark .ctl { display: flex; flex-direction: column; align-items: center; gap: 2.3cqw; }
.screen.dark .pbtn { width: 20.5cqw; aspect-ratio: 1; border-radius: 50%; border: max(1px, 0.5cqw) solid var(--night-outline); display: flex; align-items: center; justify-content: center; color: var(--night-text); }
.screen.dark .pbtn.big { width: 26.7cqw; }
.screen.dark .pbtn svg { width: 40%; height: 40%; }
.screen.dark .ctl i { font-style: normal; font-size: 3.6cqw; color: var(--night-caption); }

/* ---------- sections ---------- */

.section { padding-block: clamp(56px, 8vw, 104px); }
.section-head { --gap: 14px; max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head.center { margin-inline: auto; text-align: center; align-items: center; }

/* the maker's story: a heading, the three moments in their own words, and the sign-off */
/* Butter, papered like a child's room: little open books, hearts and dots (assets/wallpaper.svg). The
   words never sit on the pattern: the cards are white, and the heading and the sign-off have plain
   butter behind them. */
.letter-section { background: var(--butter) url("assets/wallpaper.svg") repeat; background-size: 240px 240px; }
.story-head { width: fit-content; max-width: 100%; margin-inline: auto; text-align: center; align-items: center; padding: 16px 28px; border-radius: var(--radius); background: var(--butter); }
.moments { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.moment { --gap: 10px; padding: 26px 24px; border-radius: var(--radius); background: var(--card); }
.moment h3 { color: var(--berry); }
.moment p { font-size: 1.0625rem; line-height: 1.65; color: var(--ink); }
@media (max-width: 860px) { .moments { grid-template-columns: minmax(0, 1fr); } }
.letter-end { --gap: 12px; max-width: 680px; margin: clamp(28px, 4vw, 44px) auto 0; padding: 18px 24px; border-radius: var(--radius); background: var(--butter); text-align: center; }
.letter-end p { font-size: 1.1875rem; line-height: 1.65; }
.letter-end .sign { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-style: italic; font-weight: 500; font-size: 1.0625rem; color: var(--ink-faint); }

/* eyes on the book: the one dark section, as the playing screen is the one dark screen */
.dark-section { background: var(--night); color: var(--night-text); }
.dark-section .eyebrow { color: var(--night-caption); }
.dark-section .lead { color: #D9D1C4; }
.split { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split.reverse > :first-child { order: 2; }
@media (max-width: 860px) { .split, .split.reverse { grid-template-columns: minmax(0, 1fr); } .split.reverse > :first-child { order: 0; } }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.facts li { display: flex; gap: 12px; align-items: flex-start; }
.facts svg { flex-shrink: 0; margin-top: 3px; }
.dark-section .facts li { color: #E6DFD3; }
.dark-tiles { list-style: none; margin-top: clamp(40px, 6vw, 64px); margin-bottom: 0; display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dark-tiles li { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; border-radius: var(--radius); background: #1A1715; border: 1px solid #2A2522; }
.dark-tiles h3 { font-size: 1.125rem; color: var(--night-text); }
.dark-tiles p { font-size: 0.9375rem; line-height: 1.55; color: #CFC6B8; }
.tile-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--mint); border: 1.5px solid #3F5F59; }
@media (max-width: 960px) { .dark-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .dark-tiles { grid-template-columns: minmax(0, 1fr); } }
.dark-art { display: flex; justify-content: center; align-items: flex-start; gap: clamp(16px, 3vw, 32px); }
.dark-phone { margin: 0; width: min(210px, 46%); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dark-phone .phone { width: 100%; box-shadow: 0 0 0 1px #2A2522, 0 30px 60px -20px rgba(0,0,0,0.8); }
.lock-phone { margin-top: 48px; }
.dark-phone figcaption { font-size: 0.875rem; font-weight: 700; color: var(--night-caption); }

/* The lock screen while a book plays (5): Android's own media notification, drawn to the v0.12 board
   LockScreen in the same cqw units as the playing screen. */
.screen.lock { background: linear-gradient(170deg, #2B2D4A 0%, #16171F 55%, #121417 100%); color: #FFFFFF; display: flex; flex-direction: column; justify-content: space-between; padding: 16.4cqw 4.1cqw 9cqw; }
.screen.lock .clock { display: flex; flex-direction: column; align-items: center; color: rgba(255,255,255,0.92); }
.screen.lock .date { font-size: 3.85cqw; letter-spacing: 0.02em; }
.screen.lock .time { font-size: 16.4cqw; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.screen.lock .media { display: flex; flex-direction: column; gap: 3.6cqw; padding: 3.6cqw; border-radius: 5.6cqw; background: rgba(255,255,255,0.12); }
.screen.lock .media-row { display: flex; align-items: center; gap: 3.1cqw; }
.screen.lock .media-cover { flex-shrink: 0; width: 11.8cqw; height: 11.8cqw; border-radius: 2cqw; overflow: hidden; }
.screen.lock .media-cover svg { display: block; width: 100%; height: 100%; }
.screen.lock .media-text { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.5cqw; }
.screen.lock .media-text b { font-size: 3.85cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.screen.lock .media-text span { font-size: 3.3cqw; color: rgba(255,255,255,0.72); }
.screen.lock .media-app { flex-shrink: 0; width: 5.6cqw; height: 5.6cqw; border-radius: 1.3cqw; }
.screen.lock .media-controls { display: flex; align-items: center; justify-content: center; gap: 7.7cqw; }
.screen.lock .media-controls > span { width: 13.3cqw; height: 13.3cqw; display: flex; align-items: center; justify-content: center; color: #FFFFFF; }
.screen.lock .media-controls svg { width: 7.2cqw; height: 7.2cqw; }
.screen.lock .media-controls .lplay { width: 15.4cqw; height: 15.4cqw; border-radius: 50%; background: #FFFFFF; color: #121417; }
.screen.lock .media-controls .lplay svg { width: 6.7cqw; height: 6.7cqw; }

/* How it works: three steps, each under the app's own screen for it. The camera and the recorder are
   screenshots of the v0.12 boards with our own book in place of real ones (assets/screens/); the
   bookshelf is drawn (below). Three across, one under another on a phone. */
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 4vw, 40px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.how-steps li { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.how-phone { width: min(260px, 100%); }
.how-text { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; max-width: 320px; }
.how-n { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; background: var(--indigo); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.0625rem; }
.how-text p { color: var(--ink-faint); }
@media (max-width: 860px) { .how-steps { grid-template-columns: minmax(0, 1fr); } .how-phone { width: min(240px, 72%); } }

/* A screenshot in a phone frame fills the screen exactly. */
.phone img.screen { display: block; width: 100%; height: 100%; object-fit: cover; }

/* "Simple enough for little hands": the child's screen beside three points, each with a pastel icon.
   Separate from privacy since 30 Oct (the product owner: two topics in one section). */
.kids-grid { display: grid; gap: clamp(32px, 5vw, 72px); grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: center; }
.safe-phone { width: 100%; }
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.features li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: center; }
.features h3 { margin-bottom: 4px; }
.features p { color: var(--ink-faint); }
.feature-icon { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.mini-face { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
@media (max-width: 860px) { .kids-grid { grid-template-columns: minmax(0, 1fr); } .safe-phone { width: min(240px, 72%); margin-inline: auto; } }

/* "Your family's voices stay with your family": mint, the colour of the app doing something for you. */
.privacy-section { background: radial-gradient(ellipse 60% 70% at 50% 40%, rgba(255, 255, 255, 0.45), transparent 70%), url("assets/home-wallpaper.svg") repeat, var(--mint); background-size: auto, 220px 220px, auto; }
.privacy-section .eyebrow { color: var(--teal); }
.privacy-section h2 { color: var(--teal); }
/* the words never sit on the wallpaper: plain mint behind the heading and the link */
.privacy-section .section-head { width: fit-content; max-width: 100%; margin-left: -20px; padding: 16px 20px; border-radius: var(--radius); background: var(--mint); }
.priv-more a { display: inline-block; margin-left: -12px; padding: 6px 12px; border-radius: 12px; background: var(--mint); }
.priv-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.priv-tiles li { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; border-radius: var(--radius); background: var(--card); }
.priv-tiles h3 { font-size: 1.125rem; }
.priv-tiles p { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-faint); }
.priv-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--mint); color: var(--teal); display: flex; align-items: center; justify-content: center; }
.priv-icon svg { width: 26px; height: 26px; }
.priv-more { margin-top: 22px; font-weight: 700; }
.priv-more a { color: var(--teal); }
@media (max-width: 960px) { .priv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .priv-tiles { grid-template-columns: minmax(0, 1fr); } .privacy-section .section-head { margin-left: -10px; padding: 12px 10px; } .priv-more a { margin-left: -10px; padding-inline: 10px; } }

/* The child's bookshelf (1), drawn to the v0.12 board: every size is the board's, in its own 390-wide
   pixels (--u), so the drawing is the screen in the app at a smaller size. The covers are our own
   drawings: the board's are real books, which the website can't show. */
.screen.shelf { --u: calc(100cqw / 390); background: var(--wall); display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(52 * var(--u)) calc(12 * var(--u)) calc(16 * var(--u)); }
.shelf-top { display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--u)); }
.shelf-top svg { display: block; width: calc(330 * var(--u)); height: calc(20 * var(--u)); }
.shelf-name { font-family: var(--font-display); font-weight: 700; font-size: calc(31 * var(--u)); line-height: 1.15; text-align: center; }
.case { position: relative; z-index: 1; filter: drop-shadow(0 calc(10 * var(--u)) calc(16 * var(--u)) rgba(34,30,26,0.18)); }
.case-top { height: calc(15 * var(--u)); margin: 0 calc(-4 * var(--u)); border-radius: calc(9 * var(--u)) calc(9 * var(--u)) calc(3 * var(--u)) calc(3 * var(--u)); background: var(--wood); border-bottom: calc(2 * var(--u)) solid var(--wood-dark); }
.case-body { background: #B8945F; padding: 0 calc(11 * var(--u)); }
.case-shelf { background: var(--wood-shelf); padding: calc(14 * var(--u)) calc(12 * var(--u)) 0; display: flex; align-items: flex-end; gap: calc(12 * var(--u)); box-shadow: inset 0 calc(9 * var(--u)) calc(11 * var(--u)) calc(-9 * var(--u)) rgba(34,30,26,0.75); }
.case-lip { height: calc(14 * var(--u)); background: var(--wood-lip); border-top: 1px solid #EBD6B2; }
.case-edge { height: calc(8 * var(--u)); background: var(--wood-dark); }
.case-base { height: calc(13 * var(--u)); margin: 0 calc(-4 * var(--u)); border-radius: calc(3 * var(--u)) calc(3 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)); background: var(--wood); border-top: calc(2 * var(--u)) solid var(--wood-deep); }
.case-feet { display: flex; justify-content: space-between; padding: 0 calc(22 * var(--u)); }
.case-feet i { width: calc(24 * var(--u)); height: calc(10 * var(--u)); border-radius: 0 0 calc(5 * var(--u)) calc(5 * var(--u)); background: var(--wood-dark); }
.book { position: relative; flex-shrink: 0; width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }
.book .cv { position: absolute; inset: 0; overflow: hidden; border-radius: calc(3 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)) calc(3 * var(--u)); box-shadow: 0 calc(9 * var(--u)) calc(12 * var(--u)) calc(-9 * var(--u)) rgba(34,30,26,0.9); padding: calc(14 * var(--u)) calc(12 * var(--u)) 0 calc(18 * var(--u)); }
.book .cv::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(6 * var(--u)); background: rgba(34,30,26,0.24); z-index: 1; }
.book .cv b { position: relative; z-index: 1; display: block; font-family: var(--font-display); font-weight: 700; font-size: calc(17 * var(--u)); line-height: 1.05; color: var(--ink); }
.book .cv svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 64%; }
.faces { position: absolute; right: calc(-6 * var(--u)); bottom: calc(7 * var(--u)); display: flex; }
.faces span { width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; border: calc(3 * var(--u)) solid #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: calc(13 * var(--u)); font-weight: 700; }
.faces span + span { margin-left: calc(-11 * var(--u)); }
.faces .p { background: var(--blush); color: var(--berry); box-shadow: inset 0 0 0 calc(1.5 * var(--u)) var(--berry); }
.faces .ai { background: var(--mint); color: var(--teal); box-shadow: inset 0 0 0 calc(1.5 * var(--u)) var(--teal); }
.faces .ai svg { width: 55%; height: 55%; }
.faces .more { width: auto; min-width: calc(32 * var(--u)); padding: 0 calc(7 * var(--u)); border-radius: calc(16 * var(--u)); background: var(--sunken); color: var(--ink-soft); font-size: calc(12 * var(--u)); }
.spine { position: relative; flex-shrink: 0; width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); margin-left: calc(-7 * var(--u)); border-radius: calc(2 * var(--u)) calc(5 * var(--u)) calc(5 * var(--u)) calc(2 * var(--u)); box-shadow: 0 calc(7 * var(--u)) calc(10 * var(--u)) calc(-8 * var(--u)) rgba(34,30,26,0.8); }
.spine::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(4 * var(--u)); background: rgba(34,30,26,0.22); }
.spine::after { content: ""; position: absolute; left: calc(7 * var(--u)); right: calc(4 * var(--u)); top: calc(16 * var(--u)); height: calc(3 * var(--u)); border-radius: 2px; background: rgba(255,255,255,0.45); }
.book + .spine { margin-left: 0; }
.shelf-carpet { flex-grow: 1; margin: calc(-24 * var(--u)) calc(-12 * var(--u)) calc(-16 * var(--u)); padding: 0 calc(12 * var(--u)) calc(16 * var(--u)); background: var(--carpet); border-top: calc(6 * var(--u)) solid var(--paper); display: flex; align-items: flex-end; justify-content: center; }
.parents { display: flex; align-items: center; gap: calc(7 * var(--u)); min-height: calc(44 * var(--u)); padding: 0 calc(18 * var(--u)); border-radius: calc(22 * var(--u)); background: var(--paper); color: var(--ink-soft); font-size: calc(14 * var(--u)); }
.parents svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }

/* language of home */
/* who reads which books: a person (blush and berry) or the AI voice (mint and teal) */
.voice-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 820px; list-style: none; margin: clamp(40px, 5vw, 56px) auto 0; padding: 0; }
.voice-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px 24px 26px; border-radius: 24px; box-shadow: 0 16px 30px -24px rgba(34, 30, 26, 0.5); }
.voice-card.person { background: var(--card); }
.voice-card.ai { background: var(--mint); }
.voice-card h3 { font-size: var(--step-1); }
.voice-card p { color: var(--ink-faint); }
.voice-card p strong { color: var(--ink); }
.voice-card.person h3 { color: var(--berry); }
.voice-card.ai h3, .voice-card.ai p, .voice-card.ai p strong { color: var(--teal); }
.vc-icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.person .vc-icon { background: var(--blush); color: var(--berry); box-shadow: inset 0 0 0 2px var(--berry); }
.ai .vc-icon { background: var(--card); color: var(--teal); box-shadow: inset 0 0 0 2px var(--teal); }
/* Wherever Premium is named, it looks like the Premium card (the product owner, 30 Oct): its deep teal,
   a mint sparkle, a soft glow. A pill for a line of its own; a smaller one for the word in running text. */
.premium-pill, .premium-word { display: inline-flex; align-items: center; color: #FFFFFF; font-weight: 700; background: linear-gradient(135deg, #1F7066 0%, #15534C 50%, #0D3632 100%); box-shadow: 0 6px 14px -8px rgba(13, 54, 50, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.premium-pill { margin-top: 6px; gap: 8px; padding: 6px 14px 6px 11px; border-radius: 999px; font-size: 0.875rem; }
.premium-word { gap: 5px; padding: 1px 9px 1px 7px; border-radius: 999px; font-size: 0.875em; vertical-align: 1px; }
.premium-pill i, .premium-word i { flex-shrink: 0; width: 13px; height: 13px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0l2.2 7.8L20 10l-7.8 2.2L10 20l-2.2-7.8L0 10l7.8-2.2z' fill='%23D2E6DE'/%3E%3C/svg%3E") center / contain no-repeat; }
.premium-word i { width: 11px; height: 11px; }
@media (max-width: 640px) { .voice-cards { grid-template-columns: minmax(0, 1fr); } }


/* The section's background: soft pastel patches on the sunken paper, and "hello" in the languages of
   home as speech bubbles that bob gently, each at its own pace (still for reduced motion). */
.lang-section {
  background:
    radial-gradient(ellipse 46% 70% at 2% 12%, #F6D9DF 0%, rgba(246, 217, 223, 0) 100%),
    radial-gradient(ellipse 44% 70% at 100% 100%, #D2E6DE 0%, rgba(210, 230, 222, 0) 100%),
    radial-gradient(ellipse 42% 60% at 82% 0%, #DCE7F5 0%, rgba(220, 231, 245, 0) 100%),
    radial-gradient(ellipse 40% 55% at 28% 100%, #FDF0CF 0%, rgba(253, 240, 207, 0) 100%),
    var(--sunken);
}
.hellos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 18px; list-style: none; margin: 0 auto; padding: 0 0 8px; max-width: 860px; }
.hellos li { position: relative; padding: 10px 20px 11px; border-radius: 22px; background: var(--b); color: var(--ink); font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); line-height: 1.3; box-shadow: 0 8px 16px -12px rgba(34, 30, 26, 0.55); animation: bob 5s ease-in-out infinite; }
.hellos li::after { content: ""; position: absolute; bottom: -5px; left: 18px; width: 12px; height: 12px; border-radius: 2px; background: var(--b); transform: rotate(45deg); }
.hellos li[dir="rtl"]::after { left: auto; right: 18px; }
.hellos li:nth-child(3n+1) { --tilt: -3deg; }
.hellos li:nth-child(3n+2) { --tilt: 2deg; animation-delay: -1.7s; }
.hellos li:nth-child(3n) { --tilt: -1deg; animation-delay: -3.3s; }
.hellos li:nth-child(4n) { font-size: clamp(1.0625rem, 0.9rem + 0.6vw, 1.3125rem); }
.hellos li:nth-child(5n) { font-size: clamp(1.4375rem, 1.1rem + 1.4vw, 1.9375rem); }
.hellos li.yours { --b: transparent; border: 2px dashed var(--ink-soft); box-shadow: none; color: var(--ink-faint); font-style: italic; }
.hellos li.yours::after { content: none; }
.hellos li { transform: rotate(var(--tilt, 0deg)); }
@keyframes bob { 0%, 100% { transform: rotate(var(--tilt, 0deg)) translateY(0); } 50% { transform: rotate(var(--tilt, 0deg)) translateY(-5px); } }

/* Hear it before you download: the same page, three voices; shown once the recordings exist. */
.listen-card { max-width: 860px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: clamp(24px, 4vw, 40px); border-radius: var(--radius); background: var(--card); border: 1px solid var(--edge); text-align: center; }
.listen-card .page-words { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.35; max-width: 30ch; text-wrap: balance; }
.listen-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.play {
  display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 22px 0 8px;
  border-radius: 999px; border: 1.5px solid var(--edge-strong); background: var(--card);
  font: inherit; color: var(--ink); cursor: pointer; text-align: left;
}
.play:hover { border-color: var(--ink-soft); }
.play .circle { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; object-fit: cover; border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px var(--edge); }
.play .who-line { display: flex; flex-direction: column; line-height: 1.25; }
.play .who-line small { font-size: 0.8125rem; color: var(--ink-soft); }
.play[aria-pressed="true"] { border-color: var(--berry); box-shadow: 0 0 0 2px var(--blush); }
.play-status { min-height: 1.4em; }

/* made for little ones + privacy: two quiet lists side by side */
.two-lists { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel { --gap: 16px; padding: clamp(22px, 3vw, 32px); border-radius: var(--radius); }
.panel.sunken { background: var(--sunken); }
.panel.mint { background: var(--mint); }
.panel.mint h3, .panel.mint li { color: var(--teal); }
.panel .facts li { color: var(--ink-faint); }
@media (max-width: 860px) { .two-lists { grid-template-columns: minmax(0, 1fr); } }

/* what families say: examples only, until real ones are collected */
/* Each quote a speech bubble in a person's pastel, its tail pointing down at who said it; the middle one
   sits lower, so the three read as a conversation. */
.quotes { display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.quote { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.quote:nth-child(2) { margin-top: 36px; }
.quote .bubble { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 30px 26px 28px; border-radius: 26px; background: var(--q); box-shadow: 0 18px 32px -24px rgba(34, 30, 26, 0.55); }
.quote .bubble::before { content: "\201C"; position: absolute; top: -6px; right: 18px; font-family: var(--font-display); font-weight: 700; font-size: 7rem; line-height: 1; color: rgba(34, 30, 26, 0.08); pointer-events: none; }
.quote .bubble::after { content: ""; position: absolute; bottom: -12px; left: 34px; width: 26px; height: 26px; border-radius: 4px; background: var(--q); transform: rotate(45deg); }
.quote-voice { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border-radius: 999px; background: var(--card); font-size: 0.9375rem; color: var(--ink-faint); }
.quote-voice strong { color: var(--ink); }
.quote-voice .face { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--blush); color: var(--berry); box-shadow: inset 0 0 0 2px var(--berry); font-weight: 700; font-size: 0.875rem; }
.quote blockquote { position: relative; margin: 0; font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-size: 1.25rem; line-height: 1.5; color: var(--ink); }
.quote figcaption { padding-left: 26px; color: var(--ink-soft); font-size: var(--step--1); font-weight: 700; }
.example-tag { position: absolute; top: -12px; left: 22px; padding: 2px 10px; border-radius: 999px; background: var(--card); color: var(--amber); border: 1.5px solid var(--amber); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 860px) { .quotes { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; } .quote:nth-child(2) { margin-top: 0; } }

/* pricing: two plans side by side, Plus raised; each card opens on a little bookshelf */
.price-head { margin-inline: auto; text-align: center; align-items: center; }
.plans { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: stretch; max-width: 940px; margin-inline: auto; }
.plan { position: relative; display: flex; flex-direction: column; border-radius: 24px; background: var(--paper); border: 1.5px solid var(--edge-strong); overflow: hidden; }
.plan.plus { background: var(--card); border: 2.5px solid var(--indigo); overflow: visible; box-shadow: 0 24px 48px -24px rgba(71, 72, 138, 0.45); }
.plan-body { --gap: 14px; display: flex; flex-direction: column; gap: var(--gap); flex-grow: 1; padding: 24px 26px 28px; }
.plan-body .btn { margin-top: auto; align-self: stretch; }
.plan-body .btn + .small { margin-top: -4px; text-align: center; }
.plan h3 { font-size: var(--step-2); }
.plan .price { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 2rem + 2vw, 3.25rem); line-height: 1; letter-spacing: -0.01em; }
.plan .price small { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 400; letter-spacing: 0; color: var(--ink-soft); }
.plan-line { color: var(--ink-soft); }
.ticks { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 30px; color: var(--ink-faint); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--indigo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.free .ticks li::before { background-color: var(--ink-soft); }
.ticks strong { color: var(--ink); }
.btn-outline { background: transparent; color: var(--indigo); }
.btn-outline:hover { background: var(--indigo); color: #FFFFFF; }
.ribbon { position: absolute; z-index: 1; top: -15px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 5px 16px; border-radius: 999px; background: var(--indigo); color: #FFFFFF; font-size: 0.875rem; font-weight: 700; }

/* the bookshelf at the top of each card */
.mini-case { padding: 22px 22px 5px; background: var(--wall); }
.plus .mini-case { border-radius: 21px 21px 0 0; padding-top: 30px; }
.mini-shelf { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 92px; padding: 0 16px; overflow: hidden; border-radius: 10px 10px 0 0; background: var(--wood-shelf); box-shadow: inset 0 10px 12px -10px rgba(34, 30, 26, 0.7); }
.mini-shelf i { position: relative; flex-shrink: 0; width: var(--w); height: var(--h); border-radius: 2px 4px 4px 2px; background: var(--c); box-shadow: 0 6px 8px -6px rgba(34, 30, 26, 0.8); }
.mini-shelf i::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: rgba(34, 30, 26, 0.22); }
.mini-shelf i::after { content: ""; position: absolute; left: 6px; right: 3px; top: 12px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.5); }
.mini-shelf i.ghost { margin-left: 6px; background: transparent; border: 2px dashed var(--wood-dark); box-shadow: none; }
.mini-shelf i.ghost::before, .mini-shelf i.ghost::after { content: none; }
.shelf-note { align-self: center; margin-left: 12px; padding: 4px 10px; border-radius: 999px; background: var(--card); color: var(--wood-deep); font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }
.mini-lip { height: 12px; margin: 0 -6px; border-radius: 3px 3px 0 0; background: var(--wood-lip); border-top: 1px solid #EBD6B2; box-shadow: 0 5px 0 var(--wood-dark); }

/* Plus's two prices side by side, so the saving has the monthly price beside it; yearly is the one
   picked out, in butter with the indigo edge and the gold "save" tab. */
.plus-prices { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; list-style: none; margin: 6px 0 0; padding: 0; }
.plus-prices li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 16px 16px 14px; border-radius: 16px; background: var(--paper); border: 1.5px solid var(--edge-strong); }
.plus-prices li.best { background: var(--butter); border: 2px solid var(--indigo); }
.pp-label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.pp-price { margin-top: 4px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); line-height: 1; letter-spacing: -0.01em; color: var(--ink); }
.pp-per { font-size: 0.9375rem; color: var(--ink-soft); }
.pp-note { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--edge); font-size: 0.875rem; font-weight: 700; color: var(--ink-faint); }
.best .pp-note { border-top-color: #EBD9A8; color: var(--ink); }
.plus-prices .save-tab { position: absolute; top: -12px; right: 12px; }
.save-tab { padding: 3px 10px; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: 0.8125rem; font-weight: 700; }

/* Premium, coming soon: the AI voice's teal at its deepest, because Premium adds to the AI voice. A
   large faint sound-wave mark on the right and a few sparkles; mint and white on the teal (6.8:1 and
   up). Gold stays the "save" tab's alone. */
.premium-strip {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: 24px; max-width: 940px; margin: 26px auto 0; padding: 30px 34px;
  border-radius: 24px; color: #EAF4F0;
  background:
    radial-gradient(ellipse 60% 120% at 88% 0%, rgba(210, 230, 222, 0.22), transparent 60%),
    linear-gradient(135deg, #1F7066 0%, #15534C 48%, #0D3632 100%);
  box-shadow: 0 28px 50px -30px rgba(13, 54, 50, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.premium-strip::before { content: ""; position: absolute; z-index: -1; right: -40px; top: 50%; width: 300px; height: 300px; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-opacity='0.08' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='6' cy='12' r='1.9' fill='white' fill-opacity='0.08' stroke='none'/%3E%3Cpath d='M11 8a6 6 0 0 1 0 8'/%3E%3Cpath d='M15.5 5a11 11 0 0 1 0 14'/%3E%3Cpath d='M20 2a16 16 0 0 1 0 20'/%3E%3C/svg%3E") center / contain no-repeat; }
.premium-strip::after { content: ""; position: absolute; z-index: -1; inset: 0; background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0l2.2 7.8L20 10l-7.8 2.2L10 20l-2.2-7.8L0 10l7.8-2.2z' fill='%23D2E6DE'/%3E%3C/svg%3E") 62% 22% / 14px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0l2.2 7.8L20 10l-7.8 2.2L10 20l-2.2-7.8L0 10l7.8-2.2z' fill='%23D2E6DE' fill-opacity='0.7'/%3E%3C/svg%3E") 70% 72% / 9px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0l2.2 7.8L20 10l-7.8 2.2L10 20l-2.2-7.8L0 10l7.8-2.2z' fill='%23FFFFFF' fill-opacity='0.55'/%3E%3C/svg%3E") 54% 64% / 7px no-repeat; }
.premium-icon { flex-shrink: 0; width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--mint); background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 2px var(--mint), 0 0 0 8px rgba(210, 230, 222, 0.1), 0 0 30px rgba(210, 230, 222, 0.25); }
.premium-text { display: flex; flex-direction: column; gap: 6px; }
.premium-strip h3 { color: #FFFFFF; font-size: var(--step-2); }
.premium-strip ul { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 2px 0 0; padding: 0; }
.premium-strip li { position: relative; padding-left: 22px; color: #D9ECE5; font-weight: 700; }
.premium-strip li::before { content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0l2.2 7.8L20 10l-7.8 2.2L10 20l-2.2-7.8L0 10l7.8-2.2z' fill='%23D2E6DE'/%3E%3C/svg%3E") center / contain no-repeat; }
.badge-later { display: inline-block; padding: 3px 12px; border-radius: 999px; border: 1.5px solid rgba(210, 230, 222, 0.6); color: var(--mint); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

.price-promises { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; list-style: none; margin: 30px auto 0; padding: 0; }
.price-promises li { display: flex; align-items: center; gap: 8px; color: var(--ink-faint); font-weight: 700; font-size: 0.9375rem; }
.price-promises svg { color: var(--indigo); }
.price-print { margin-top: 14px; text-align: center; }

@media (max-width: 860px) {
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; gap: 34px; }
  .premium-strip { max-width: 520px; align-items: flex-start; }
}

/* questions */
.faq { max-width: 820px; display: grid; gap: 10px; }
.faq details { border-radius: 16px; background: var(--card); border: 1px solid var(--edge); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 54px 18px 20px; font-weight: 700; font-size: 1.0625rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--ink-soft); }
.faq details[open] summary::after { content: "–"; }
.faq .answer { padding: 0 20px 20px; color: var(--ink-faint); display: grid; gap: 10px; max-width: var(--measure); }

/* last call */
.final { background: var(--wall); text-align: center; }
.final .stack { align-items: center; --gap: 20px; }
.final .store-row { justify-content: center; }
.final .carpet { margin-top: clamp(40px, 6vw, 64px); }

/* footer */
.site-footer { padding-block: 40px 48px; border-top: 1px solid var(--edge); font-size: var(--step--1); color: var(--ink-soft); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: flex-start; justify-content: space-between; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-footer a { color: var(--ink-faint); font-weight: 700; text-decoration: none; }
.site-footer a:hover { color: var(--indigo); text-decoration: underline; }

/* ---------- the plain pages: privacy, terms, support ---------- */

.doc { padding-block: 48px 80px; }
.doc .wrap { max-width: 780px; }
.doc h1 { font-size: var(--step-4); margin-bottom: 10px; }
.doc h2 { font-size: var(--step-2); margin-top: 40px; margin-bottom: 12px; }
.doc h3 { margin-top: 24px; margin-bottom: 8px; }
.doc p, .doc li { color: var(--ink-faint); max-width: var(--measure); }
.doc p + p { margin-top: 12px; }
.doc ul { padding-left: 1.2em; display: grid; gap: 8px; }
.draft-banner { margin-block: 18px 28px; padding: 14px 18px; border-radius: 14px; background: var(--butter); color: var(--amber); font-weight: 700; font-size: 0.9375rem; }
.fill { background: var(--butter); color: var(--amber); padding: 0 4px; border-radius: 4px; font-weight: 700; }
@media (max-width: 420px) {
  .plan-body { padding-inline: 20px; }
  .plus-prices { gap: 10px; }
  .plus-prices li { padding: 14px 12px 12px; }
  .pp-price { font-size: 1.625rem; }
}
@media (max-width: 560px) {
  .premium-strip { flex-direction: column; align-items: flex-start; gap: 18px; padding: 26px 24px; }
  .premium-strip::after { background-position: 90% 14%, 94% 58%, 82% 88%; }
}

/* The last section's mark: 0a's disc and welcome animation, looping (Welcome.dc.html, `loop` on; the
   keyframes are the board's). The reader rises from behind the disc's lower edge, so the disc clips it. */
.mark-disc { width: 132px; height: 132px; border-radius: 50%; background: var(--butter); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mark-disc svg { display: block; width: 99px; height: 99px; margin-top: 5px; overflow: visible; }
@keyframes tlxReader{0%{opacity:0;transform:translateY(26px);animation-timing-function:linear}2.5%{opacity:0;transform:translateY(26px);animation-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1)}12.5%{opacity:1;transform:none}90%{opacity:1;transform:none;animation-timing-function:linear}98.333%{opacity:0;transform:none}100%{opacity:0;transform:none}}
.tlx-reader{transform-box:fill-box;transform-origin:50% 100%;animation:tlxReader 6000ms linear infinite}
@keyframes tlxHug{0%{transform:none;animation-timing-function:linear}32.5%{transform:none;animation-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1)}34.5%{transform:scale(1.07);animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1)}37.667%{transform:none;animation-timing-function:linear}38.667%{transform:none;animation-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1)}40.5%{transform:scale(1.045);animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1)}45%{transform:none}100%{transform:none}}
.tlx-hug{transform-box:view-box;transform-origin:60px 64px;animation:tlxHug 6000ms linear infinite}
@keyframes tlxEarL{0%{transform:none;animation-timing-function:linear}24.5%{transform:none;animation-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1)}25.833%{transform:rotate(-20deg);animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1)}28.333%{transform:rotate(5deg);animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1)}30%{transform:none}100%{transform:none}}
.tlx-ear-l{transform-box:view-box;transform-origin:36px 33px;animation:tlxEarL 6000ms linear infinite}
@keyframes tlxEarR{0%{transform:none;animation-timing-function:linear}27%{transform:none;animation-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1)}28.333%{transform:rotate(20deg);animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1)}30.833%{transform:rotate(-5deg);animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1)}32.5%{transform:none}100%{transform:none}}
.tlx-ear-r{transform-box:view-box;transform-origin:84px 33px;animation:tlxEarR 6000ms linear infinite}
@keyframes tlxBook{0%{transform:none;animation-timing-function:linear}21.667%{transform:none;animation-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1)}23.667%{transform:translateY(-4px);animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1)}27%{transform:translateY(0.8px);animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1)}29.667%{transform:none}100%{transform:none}}
.tlx-book{transform-box:view-box;transform-origin:60px 98px;animation:tlxBook 6000ms linear infinite}
@keyframes tlxPageL{0%{transform:none;animation-timing-function:linear}14.167%{transform:none;animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1)}20%{transform:scaleX(0.45);animation-timing-function:linear}21.667%{transform:scaleX(0.45);animation-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1)}23.667%{transform:scaleX(1.1);animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1)}26.667%{transform:scaleX(0.96);animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1)}29.333%{transform:none}100%{transform:none}}
.tlx-page-l{transform-box:fill-box;transform-origin:100% 50%;animation:tlxPageL 6000ms linear infinite}
@keyframes tlxPageR{0%{transform:none;animation-timing-function:linear}14.167%{transform:none;animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1)}20%{transform:scaleX(0.45);animation-timing-function:linear}21.667%{transform:scaleX(0.45);animation-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1)}23.667%{transform:scaleX(1.1);animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1)}26.667%{transform:scaleX(0.96);animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1)}29.333%{transform:none}100%{transform:none}}
.tlx-page-r{transform-box:fill-box;transform-origin:0% 50%;animation:tlxPageR 6000ms linear infinite}
@keyframes tlxLeafL1{0%{transform:none;animation-timing-function:linear}21.667%{transform:none;animation-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1)}23.667%{transform:scaleX(0.5);animation-timing-function:linear}24.333%{transform:scaleX(0.5);animation-timing-function:cubic-bezier(0.55, 0, 0.85, 0.35)}28%{transform:none;animation-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1)}29%{transform:scaleX(0.95);animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1)}30.333%{transform:none}100%{transform:none}}
.tlx-leaf-l1{transform-box:fill-box;transform-origin:100% 50%;animation:tlxLeafL1 6000ms linear infinite}
@keyframes tlxLeafL2{0%{transform:none;animation-timing-function:linear}21.667%{transform:none;animation-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1)}24%{transform:scaleX(0.26);animation-timing-function:linear}24.667%{transform:scaleX(0.26);animation-timing-function:cubic-bezier(0.55, 0, 0.85, 0.35)}29.667%{transform:none;animation-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1)}30.667%{transform:scaleX(0.95);animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1)}32%{transform:none}100%{transform:none}}
.tlx-leaf-l2{transform-box:fill-box;transform-origin:100% 50%;animation:tlxLeafL2 6000ms linear infinite}
@keyframes tlxLeafR1{0%{transform:none;animation-timing-function:linear}21.667%{transform:none;animation-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1)}23.667%{transform:scaleX(0.5);animation-timing-function:linear}24.333%{transform:scaleX(0.5);animation-timing-function:cubic-bezier(0.55, 0, 0.85, 0.35)}28%{transform:none;animation-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1)}29%{transform:scaleX(0.95);animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1)}30.333%{transform:none}100%{transform:none}}
.tlx-leaf-r1{transform-box:fill-box;transform-origin:0% 50%;animation:tlxLeafR1 6000ms linear infinite}
@keyframes tlxLeafR2{0%{transform:none;animation-timing-function:linear}21.667%{transform:none;animation-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1)}24%{transform:scaleX(0.26);animation-timing-function:linear}24.667%{transform:scaleX(0.26);animation-timing-function:cubic-bezier(0.55, 0, 0.85, 0.35)}29.667%{transform:none;animation-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1)}30.667%{transform:scaleX(0.95);animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1)}32%{transform:none}100%{transform:none}}
.tlx-leaf-r2{transform-box:fill-box;transform-origin:0% 50%;animation:tlxLeafR2 6000ms linear infinite}
@keyframes tlxPawL{0%{transform:none;animation-timing-function:linear}14.167%{transform:none;animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1)}20%{transform:translateX(17px);animation-timing-function:linear}21.667%{transform:translateX(17px);animation-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1)}23.667%{transform:translateX(-3px);animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1)}26.667%{transform:translateX(1px);animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1)}29.333%{transform:none;animation-timing-function:linear}32.5%{transform:none;animation-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1)}34.5%{transform:translateX(2.5px);animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1)}37.667%{transform:none;animation-timing-function:linear}38.667%{transform:none;animation-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1)}40.5%{transform:translateX(1.6px);animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1)}45%{transform:none}100%{transform:none}}
.tlx-paw-l{animation:tlxPawL 6000ms linear infinite}
@keyframes tlxPawR{0%{transform:none;animation-timing-function:linear}14.167%{transform:none;animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1)}20%{transform:translateX(-17px);animation-timing-function:linear}21.667%{transform:translateX(-17px);animation-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1)}23.667%{transform:translateX(3px);animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1)}26.667%{transform:translateX(-1px);animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1)}29.333%{transform:none;animation-timing-function:linear}32.5%{transform:none;animation-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1)}34.5%{transform:translateX(-2.5px);animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1)}37.667%{transform:none;animation-timing-function:linear}38.667%{transform:none;animation-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1)}40.5%{transform:translateX(-1.6px);animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1)}45%{transform:none}100%{transform:none}}
.tlx-paw-r{animation:tlxPawR 6000ms linear infinite}
@keyframes tlxText{0%{opacity:0;transform:translateY(12px);animation-timing-function:linear}33.333%{opacity:0;transform:translateY(12px);animation-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1)}41.667%{opacity:1;transform:none}90%{opacity:1;transform:none;animation-timing-function:linear}98.333%{opacity:0;transform:none}100%{opacity:0;transform:none}}
.tlx-text{animation:tlxText 6000ms linear infinite}