/* The site's one stylesheet: "Product-first, Liquid Glass" (concept B, chosen 2026-09-29).
   Home page (site/templates/home.html) plus the document layout for /legal/, the policy pages,
   /support/ and the 404 (the "Documents" section near the end). System fonts, no JS, no inline
   styles (CSP). Scroll effects use CSS scroll-driven animations (animation-timeline: view()/scroll())
   inside @supports + prefers-reduced-motion guards; without them every page is complete and static.
   Brand facts (name, icon path, logo) live in site/site.json, not here. */

/* ---------- Wordmark (text until site.json brand.logoPath names an image) ---------- */
.wordmark {
  font-weight: 700;
  letter-spacing: -0.045em;
  text-transform: lowercase;
  line-height: 1;
}
.wordmark-img { display: block; height: 1em; width: auto; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;

  --cream: #FAF4EE;
  --blush: #F3D5CD;
  --peach: #F7E3D3;
  --sage: #D9E4CC;
  --ink: #231E1F;
  --ink-2: #544A48;
  --ink-3: #6B5F5C;
  --rose: #8E4B57;
  --rose-2: #B5616F;
  --rose-soft: #F0C9CC;
  --sage-deep: #3F5A2B;
  --pill: #C8D6A6;
  --on-pill: #231E1F;

  --glass-bg: rgba(255, 251, 247, 0.58);
  --glass-solid: #FFFaF6;
  --glass-line: rgba(255, 255, 255, 0.7);
  --glass-hi: rgba(255, 255, 255, 0.95);
  --glass-spec: rgba(255, 255, 255, 0.95);
  --shadow: 0 1px 2px rgba(60, 35, 30, 0.06), 0 18px 48px -18px rgba(90, 50, 40, 0.28);

  --screen: #FBF6F1;
  --screen-ink: #231E1F;
  --screen-ink-2: #5E5350;
  --screen-card: rgba(255, 255, 255, 0.8);
  --screen-line: rgba(35, 30, 31, 0.08);
  --titanium: linear-gradient(140deg, #E9E3DE 0%, #A99F99 22%, #F4EFEA 46%, #9C928C 70%, #DDD6D0 100%);

  --night: #221A1B;
  --night-ink: #F7EEE9;
  --night-ink-2: #D9C9C4;
  --night-accent: #F2BCC4;

  --bar-h: 52px;

  --doc-bg: rgba(255, 251, 247, 0.86);
  --line: rgba(35, 30, 31, 0.12);
  --sunk: rgba(35, 30, 31, 0.05);
  --todo: #FBE8B0;
  --on-todo: #231E1F;
}
@media (prefers-color-scheme: dark) {
  :root {
    --cream: #15110F;
    --blush: #3A2226;
    --peach: #2A1D19;
    --sage: #1C2518;
    --ink: #F5EEE9;
    --ink-2: #D2C6C1;
    --ink-3: #B3A6A1;
    --rose: #F0B3BE;
    --rose-2: #E596A3;
    --rose-soft: #5A3038;
    --sage-deep: #BCD39E;
    --pill: #C8D6A6;

    --glass-bg: rgba(42, 33, 31, 0.55);
    --glass-solid: #2A2220;
    --glass-line: rgba(255, 255, 255, 0.12);
    --glass-hi: rgba(255, 255, 255, 0.22);
    --glass-spec: rgba(255, 255, 255, 0.35);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 22px 50px -18px rgba(0, 0, 0, 0.7);

    --screen: #1E1917;
    --screen-ink: #F5EEE9;
    --screen-ink-2: #C9BCB7;
    --screen-card: rgba(255, 255, 255, 0.07);
    --screen-line: rgba(255, 255, 255, 0.1);
    --titanium: linear-gradient(140deg, #6E6560 0%, #2F2A28 24%, #7C736D 46%, #28231F 70%, #5D5550 100%);

    --night: #0D0A09;
    --night-ink: #F7EEE9;
    --night-ink-2: #D2C4BF;
    --night-accent: #F2BCC4;

    --doc-bg: rgba(36, 28, 26, 0.86);
    --line: rgba(255, 255, 255, 0.13);
    --sunk: rgba(255, 255, 255, 0.06);
    --todo: #F2D98A;
    --on-todo: #231E1F;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  font: 17px/1.5 var(--sans);
  color: var(--ink);
  background: var(--cream);
  overflow-x: clip;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Atmosphere: blush at the top, cream in the middle, sage at the bottom. */
body::before, body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
body::before {
  background:
    radial-gradient(60vmax 50vmax at 12% 8%, var(--blush), transparent 62%),
    radial-gradient(50vmax 40vmax at 92% 30%, var(--peach), transparent 60%),
    radial-gradient(60vmax 50vmax at 80% 105%, var(--sage), transparent 60%),
    var(--cream);
}
body::after {
  opacity: 0;
  background:
    radial-gradient(60vmax 50vmax at 10% 20%, var(--peach), transparent 60%),
    radial-gradient(70vmax 60vmax at 85% 90%, var(--sage), transparent 62%),
    radial-gradient(50vmax 40vmax at 30% 100%, var(--sage), transparent 60%);
}
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
main, .foot { overflow-x: clip; }   /* scroll effects translate things sideways: never a horizontal scroll */
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
svg { display: block; }
:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; border-radius: 10px; }
.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 999px;
  background: var(--ink); color: var(--cream); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Liquid glass ---------- */
.glass, .bar-inner, .chip, .lang-cloud li, .doc {
  position: relative;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 rgba(255, 255, 255, 0.12), var(--shadow);
}
/* Specular rim: a bright edge at the top-left and bottom-right, like light on a glass lens. */
.glass::before, .bar-inner::before, .chip::before, .lang-cloud li::before, .doc::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--glass-spec), transparent 32%, transparent 68%, var(--glass-spec));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  opacity: 0.8;
}

/* ---------- App icon ---------- */
.app-icon {
  display: inline-block;
  flex: none;
  background: #2A2224;
  object-fit: cover;
  border-radius: 22.5%;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.12);
}
.app-icon-sm { width: 30px; height: 30px; }
.app-icon-lg {
  width: clamp(104px, 26vw, 148px); height: clamp(104px, 26vw, 148px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 30px 60px -20px rgba(90, 50, 40, 0.45);
}

/* ---------- Top bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 50;
  padding: 10px 12px 0;
}
.bar-inner {
  max-width: 1100px; margin: 0 auto;
  height: var(--bar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 8px 0 12px;
  border-radius: 999px;
}
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); border-radius: 999px; }
.brand .wordmark { font-size: 1.45rem; padding-bottom: 2px; }
.bar-links { display: none; }
.cta {
  margin-left: auto;
  display: inline-flex; align-items: center;
  height: 38px; padding: 0 16px;
  border-radius: 999px;
  background: var(--ink); color: var(--cream);
  font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 16px -6px rgba(35, 30, 31, 0.45);
}
a.cta:hover { background: var(--rose); }
.cta-long { display: none; }
@media (min-width: 440px) { .cta-long { display: inline; } }
@media (min-width: 820px) {
  .bar-links { display: flex; gap: 4px; margin-left: auto; }
  .bar-links a {
    display: block; padding: 8px 14px; border-radius: 999px;
    font-size: 0.9rem; font-weight: 500; color: var(--ink-2); text-decoration: none;
  }
  .bar-links a:hover { color: var(--ink); background: var(--glass-bg); }
  .cta { margin-left: 8px; }
}

/* ---------- Type ---------- */
.eyebrow {
  font-size: 0.95rem; font-weight: 600; letter-spacing: 0.005em;
  color: var(--rose);
  margin-bottom: 14px;
}
h1 {
  font-size: clamp(3.1rem, 15vw, 8.75rem);
  font-weight: 700; line-height: 0.95; letter-spacing: -0.05em;
}
h2 {
  font-size: clamp(2.6rem, 11vw, 5.75rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.045em;
  text-wrap: balance;
}
h3 { font-size: 1.2rem; font-weight: 650; letter-spacing: -0.02em; }
.lede {
  margin-top: 20px;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem); line-height: 1.45; letter-spacing: -0.012em;
  color: var(--ink-2);
  max-width: 34ch;
  text-wrap: pretty;
}
.muted { color: var(--ink-3); }
.grad {
  background: linear-gradient(100deg, var(--rose) 5%, #A8584A 45%, var(--sage-deep) 95%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  padding-bottom: 0.06em;
}
@media (prefers-color-scheme: dark) {
  .grad { background-image: linear-gradient(100deg, #F2BCC4 5%, #F3CDB2 45%, #C8DDAA 95%); }
}

/* ---------- Hero ---------- */
.hero {
  padding: clamp(40px, 8vh, 88px) 16px 24px;
  text-align: center;
}
.hero-copy { max-width: 980px; margin: 0 auto; }
.hero-lead {
  margin: 22px auto 0;
  max-width: 26ch;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem); line-height: 1.4; letter-spacing: -0.015em;
  color: var(--ink-2);
  text-wrap: balance;
}
.hero-stage {
  --pw: clamp(250px, 70vw, 390px);
  position: relative;
  margin: clamp(36px, 6vh, 64px) auto 0;
  display: grid; place-items: center;
  padding: 10px 0 30px;
}
.hero-stage::before {
  content: "";
  position: absolute;
  width: calc(var(--pw) * 2.1); aspect-ratio: 1;
  top: 50%; left: 50%; translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--rose-soft) 80%, transparent), color-mix(in oklab, var(--sage) 60%, transparent) 60%, transparent);
  filter: blur(10px);
  z-index: -1;
}
.phone-hero { width: var(--pw); }
.chip {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  font-size: clamp(0.9rem, 2.6vw, 1.1rem); font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}
.chip-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--rose-2);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--rose-2) 22%, transparent);
}
.chip-a { top: 16%; right: min(calc(50% + var(--pw) * 0.3), calc(100% - 7rem)); }
.chip-b { top: 70%; left: min(calc(50% + var(--pw) * 0.32), calc(100% - 9.6rem)); }
.chip-c { bottom: 44%; right: min(calc(50% + var(--pw) * 0.34), calc(100% - 6.5rem)); }

/* ---------- iPhone frame ---------- */
.phone {
  position: relative;
  aspect-ratio: 9 / 19.5;
  border-radius: 17% / 7.9%;
  background: var(--titanium);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.35),
    inset 0 0 0 4px rgba(0, 0, 0, 0.1),
    0 2px 4px rgba(40, 25, 20, 0.12),
    0 50px 100px -30px rgba(90, 50, 40, 0.45),
    0 30px 60px -40px rgba(40, 25, 20, 0.5);
  container-type: inline-size;
}
.phone::before, .phone::after {        /* side buttons */
  content: ""; position: absolute; width: 1.2%; border-radius: 2px;
  background: var(--titanium);
}
.phone::before { left: -1%; top: 22%; height: 7%; box-shadow: 0 9cqw 0 0 #A59C96; }
.phone::after { right: -1%; top: 28%; height: 11%; }
.phone-screen {
  position: absolute;
  inset: 1.43% 3.1%;          /* equal bezel: 3.1% of width on every side (height is 19.5/9 of width) */
  border-radius: 14% / 6.5%;
  background:
    radial-gradient(120% 50% at 100% 0%, color-mix(in oklab, var(--rose-soft) 55%, transparent), transparent 70%),
    radial-gradient(120% 45% at 0% 100%, color-mix(in oklab, var(--sage) 70%, transparent), transparent 70%),
    var(--screen);
  color: var(--screen-ink);
  overflow: hidden;
  box-shadow: 0 0 0 1.6cqw #0B0908;
  font-size: 3.9cqw;
  line-height: 1.35;
}
.island {
  position: absolute; top: 2.6cqw; left: 50%; translate: -50% 0;
  width: 29cqw; height: 8.4cqw; border-radius: 99px; background: #050404;
  z-index: 3;
}
.status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4.2cqw 7.5cqw 0 9cqw;
  font-size: 3.9cqw; font-weight: 650; letter-spacing: -0.01em;
}
.status-icons { display: flex; gap: 1.2cqw; align-items: flex-end; }
.status-icons i { display: block; width: 1.1cqw; background: currentColor; border-radius: 1px; }
.status-icons i:nth-child(1) { height: 1.6cqw; }
.status-icons i:nth-child(2) { height: 2.4cqw; }
.status-icons i:nth-child(3) { height: 3.2cqw; width: 6cqw; border-radius: 1cqw; }
.home-ind {
  position: absolute; bottom: 2.2cqw; left: 50%; translate: -50% 0;
  width: 36cqw; height: 1.3cqw; border-radius: 99px; background: var(--screen-ink); opacity: 0.85;
}

/* Hero screen: conversation */
.app-head { padding: 9cqw 6cqw 0; display: flex; flex-direction: column; gap: 0.6cqw; }
.app-title { font-family: var(--serif); font-size: 9cqw; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.app-sub { font-size: 3.6cqw; color: var(--screen-ink-2); font-weight: 500; }
.chat { display: flex; flex-direction: column; gap: 2.2cqw; padding: 5cqw 4.8cqw 0; }
.bubble {
  max-width: 80%;
  padding: 2.6cqw 3.8cqw;
  border-radius: 5cqw;
  font-size: 3.9cqw; line-height: 1.33;
}
.bubble.me {
  align-self: flex-end;
  background: var(--pill); color: var(--on-pill);
  border-bottom-right-radius: 1.6cqw;
}
.bubble.saura {
  align-self: flex-start;
  background: var(--screen-card);
  border: 1px solid var(--screen-line);
  border-bottom-left-radius: 1.6cqw;
  box-shadow: 0 1cqw 3cqw -1cqw rgba(60, 35, 30, 0.12);
}
.typing { display: flex; gap: 1.3cqw; padding: 3.6cqw 4.2cqw; }
.typing span { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: var(--screen-ink-2); opacity: 0.5; }
.listen {
  position: absolute; left: 4.4cqw; right: 4.4cqw; bottom: 7cqw;
  padding: 4cqw 4.4cqw 4.4cqw;
  border-radius: 8cqw;
  background: var(--screen-card);
  border: 1px solid var(--screen-line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 2cqw 6cqw -2cqw rgba(60, 35, 30, 0.22);
}
.wave { display: flex; align-items: center; justify-content: center; gap: 1.25cqw; height: 11cqw; }
.wave i {
  display: block; width: 1.5cqw; height: 100%;
  border-radius: 99px;
  background: linear-gradient(var(--rose-2), var(--rose));
  transform: scaleY(var(--h, 0.4));
}
.wave i:nth-child(1), .wave i:nth-child(17) { --h: 0.14; }
.wave i:nth-child(2), .wave i:nth-child(16) { --h: 0.24; }
.wave i:nth-child(3), .wave i:nth-child(15) { --h: 0.4; }
.wave i:nth-child(4), .wave i:nth-child(14) { --h: 0.3; }
.wave i:nth-child(5), .wave i:nth-child(13) { --h: 0.62; }
.wave i:nth-child(6), .wave i:nth-child(12) { --h: 0.8; }
.wave i:nth-child(7), .wave i:nth-child(11) { --h: 0.5; }
.wave i:nth-child(8), .wave i:nth-child(10) { --h: 0.95; }
.wave i:nth-child(9) { --h: 0.7; }
.listen-row { display: flex; align-items: center; gap: 3.2cqw; margin-top: 3cqw; }
.mic {
  flex: none; display: grid; place-items: center;
  width: 12cqw; height: 12cqw; border-radius: 50%;
  background: var(--rose); color: #fff;
  box-shadow: 0 0 0 1.6cqw color-mix(in oklab, var(--rose) 20%, transparent);
}
@media (prefers-color-scheme: dark) { .mic { color: #2A1519; } }
.mic svg, .pane-ico svg, .lock svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.listen-text { display: flex; flex-direction: column; font-size: 3.4cqw; color: var(--screen-ink-2); line-height: 1.3; }
.listen-text b { font-size: 4.1cqw; color: var(--screen-ink); font-weight: 650; }

/* Routine screen */
.steps-dots { display: flex; gap: 1.6cqw; justify-content: center; margin-top: 10cqw; }
.steps-dots i { display: block; width: 7cqw; height: 1.3cqw; border-radius: 99px; background: var(--screen-line); }
.steps-dots i.done { background: var(--sage-deep); }
.steps-dots i.now { background: var(--rose); width: 12cqw; }
.step-count { margin-top: 7cqw; text-align: center; font-size: 3.6cqw; font-weight: 600; color: var(--screen-ink-2); text-transform: uppercase; letter-spacing: 0.08em; }
.step-name { text-align: center; font-family: var(--serif); font-size: 13cqw; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; margin-top: 1cqw; }
.step-how { text-align: center; margin: 2.4cqw auto 0; max-width: 70cqw; color: var(--screen-ink-2); font-size: 4cqw; }
.ring { position: relative; width: 56cqw; aspect-ratio: 1; margin: 8cqw auto 0; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.ring circle { fill: none; stroke-width: 7; }
.ring-track { stroke: var(--screen-line); }
.ring-fill {
  stroke: var(--rose);
  stroke-linecap: round;
  stroke-dasharray: 326.73;
  stroke-dashoffset: 65.35;
}
.ring-time { position: relative; font-size: 12cqw; font-weight: 650; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; margin-top: -3cqw; }
.ring-label { position: absolute; top: 62%; font-size: 3.6cqw; color: var(--screen-ink-2); font-weight: 500; }
.step-actions { display: flex; justify-content: center; gap: 2.4cqw; margin-top: 8cqw; }
.step-actions span {
  padding: 2.6cqw 4.6cqw; border-radius: 99px;
  background: var(--screen-card); border: 1px solid var(--screen-line);
  font-size: 3.8cqw; font-weight: 600;
}
.step-actions .primary { background: var(--screen-ink); color: var(--screen); border-color: transparent; }
.step-hint { text-align: center; margin-top: 4cqw; font-size: 3.5cqw; color: var(--screen-ink-2); }
.up-next {
  position: absolute; left: 5cqw; right: 5cqw; bottom: 8cqw;
  display: flex; align-items: center; gap: 3cqw;
  padding: 3.4cqw 4cqw; border-radius: 6cqw;
  background: var(--screen-card); border: 1px solid var(--screen-line);
  font-size: 3.9cqw; font-weight: 600;
}
.up-next b { display: block; font-size: 3.2cqw; font-weight: 600; color: var(--screen-ink-2); text-transform: uppercase; letter-spacing: 0.06em; }
.up-dot {
  flex: none; width: 9cqw; height: 9cqw; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in oklab, var(--sage-deep) 18%, transparent); color: var(--sage-deep); font-weight: 700;
}

/* Check-in screen */
.seg {
  display: flex; margin: 11cqw 5cqw 0; padding: 1cqw;
  border-radius: 99px; background: var(--screen-line);
}
.seg span { flex: 1; text-align: center; padding: 1.8cqw 0; border-radius: 99px; font-size: 3.6cqw; font-weight: 600; color: var(--screen-ink-2); }
.seg .on { background: var(--screen); color: var(--screen-ink); box-shadow: 0 0.6cqw 2cqw -0.6cqw rgba(0, 0, 0, 0.25); }
.photo {
  position: relative;
  margin: 4cqw 5cqw 0;
  aspect-ratio: 200 / 220;
  border-radius: 7cqw;
  overflow: hidden;
  background: radial-gradient(80% 70% at 50% 35%, #F7EDE6, #E6D6CC);
}
@media (prefers-color-scheme: dark) { .photo { background: radial-gradient(80% 70% at 50% 35%, #3B302C, #231C1A); } }
.photo .face, .duo-photo .face { width: 100%; height: 100%; }
.face-line { fill: none; stroke: #6A4234; stroke-width: 2.6; stroke-linecap: round; }
.face-line.soft { stroke-width: 2; opacity: 0.45; }
.tag {
  display: inline-block;
  padding: 0.25em 0.7em; border-radius: 99px;
  font-size: 0.75em; font-weight: 650; letter-spacing: 0.02em;
  background: var(--ink); color: var(--cream);
}
.photo .tag { position: absolute; top: 3cqw; left: 3cqw; z-index: 2; font-size: 3cqw; background: rgba(35, 30, 31, 0.78); color: #FAF4EE; }
.marker {
  position: absolute; z-index: 2;
  width: 8cqw; height: 8cqw; translate: -50% -50%;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #8E4B57; color: #fff;
  font-size: 4cqw; font-weight: 700;
  box-shadow: 0 0 0 0.8cqw rgba(255, 255, 255, 0.9), 0 1cqw 3cqw rgba(0, 0, 0, 0.3);
}
.marker::after {
  content: ""; position: absolute; inset: -1.6cqw; border-radius: 50%;
  border: 0.5cqw solid rgba(255, 255, 255, 0.85);
  opacity: 0;
}
.m1 { left: 33%; top: 66%; }
.m2 { left: 57%; top: 39%; }
.m3 { left: 50%; top: 79%; }
.notes { margin: 4cqw 5cqw 0; display: flex; flex-direction: column; gap: 1.6cqw; }
.notes li {
  display: flex; align-items: center; gap: 2.6cqw;
  padding: 2cqw 3cqw; border-radius: 4cqw;
  background: var(--screen-card); border: 1px solid var(--screen-line);
  font-size: 3.7cqw; font-weight: 600;
}
.notes b {
  flex: none; width: 5.6cqw; height: 5.6cqw; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--rose); color: var(--screen); font-size: 3.2cqw;
}
.notes em { margin-left: auto; font-style: normal; font-weight: 500; color: var(--screen-ink-2); font-size: 3.4cqw; }
.fine { text-align: center; margin-top: 3cqw; font-size: 3.2cqw; color: var(--screen-ink-2); }

/* ---------- Chapters ---------- */
.chapter {
  max-width: 1180px; margin: 0 auto;
  padding: clamp(88px, 14vh, 160px) 20px;
}
.chapter-copy { max-width: 900px; margin: 0 auto; text-align: center; }
.chapter-copy .lede { margin-left: auto; margin-right: auto; }

/* Voice */
.voice { text-align: center; }
.words {
  display: flex; flex-direction: column; align-items: center;
  margin: clamp(40px, 8vh, 80px) 0 clamp(40px, 8vh, 80px);
}
.word {
  display: block;
  font-size: clamp(4rem, 22vw, 12.5rem);
  font-weight: 800; letter-spacing: -0.06em; line-height: 0.92;
  color: var(--ink);
}
.w2 { color: var(--rose); }
.w3 { color: var(--sage-deep); }
.glass-row { display: grid; gap: 14px; text-align: left; max-width: 1040px; margin: 0 auto; }
.pane { padding: 24px 24px 26px; border-radius: 30px; }
.pane h3 { margin-top: 16px; }
.pane p { margin-top: 6px; color: var(--ink-2); line-height: 1.45; }
.pane-ico {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: color-mix(in oklab, var(--rose) 14%, transparent); color: var(--rose);
}
.pane-ico svg { width: 24px; height: 24px; }
@media (min-width: 760px) {
  .glass-row { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .words { flex-direction: row; justify-content: center; column-gap: 0.28em; flex-wrap: wrap; font-size: clamp(4rem, 11vw, 10rem); }
  .word { font-size: 1em; }
}

/* Split chapters: large iPhone beside the story. */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.split-media { display: grid; place-items: center; }
.phone-sticky { width: clamp(250px, 74vw, 330px); }
.split-copy { display: flex; flex-direction: column; gap: 36px; text-align: center; align-items: center; }
.split-copy .lede { margin-left: auto; margin-right: auto; }
.list-steps { width: min(100%, 380px); padding: 10px; border-radius: 28px; text-align: left; }
.list-steps li {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 18px;
  font-size: 1.1rem; font-weight: 600; color: var(--ink-2);
}
.list-steps b {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border-radius: 50%; font-size: 0.9rem; background: color-mix(in oklab, var(--ink) 8%, transparent); color: var(--ink);
}
.list-steps li.on { background: var(--ink); color: var(--cream); }
.list-steps li.on b { background: var(--rose-soft); color: #231E1F; }
.list-steps em { margin-left: auto; font-style: normal; font-size: 0.85rem; font-weight: 600; color: var(--rose-soft); }
@media (prefers-color-scheme: dark) {
  .list-steps li.on em { color: #8E4B57; }
  .list-steps li.on b { background: #8E4B57; color: #fff; }
}

.angles { width: min(100%, 440px); padding: clamp(16px, 5vw, 22px); border-radius: 30px; text-align: left; }
.angles-title { font-weight: 650; letter-spacing: -0.01em; }
.angles ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.angles li { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; color: var(--ink-2); text-align: center; }
.ang { width: clamp(44px, 13vw, 56px); height: auto; aspect-ratio: 60 / 70; overflow: visible; }
.ang-hair { fill: #4A312A; }
.ang-skin { fill: #EBC4AE; }
.ang-line { fill: none; stroke: #6A4234; stroke-width: 1.8; stroke-linecap: round; }
.ang-arc { fill: none; stroke: var(--rose); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.angles-foot { margin-top: 16px; font-size: 0.95rem; color: var(--ink-2); }

@media (min-width: 960px) {
  .split { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; padding-top: 60px; padding-bottom: 60px; }
  .split-media { position: sticky; top: max(84px, calc(50svh - 330px)); height: fit-content; }
  .phone-sticky { width: min(310px, calc((100svh - 140px) * 9 / 19.5)); }
  .split-copy { text-align: left; align-items: flex-start; gap: 0; }
  .split-copy > * { min-height: min(72svh, 640px); display: flex; flex-direction: column; justify-content: center; }
  .split-copy .lede { margin-left: 0; }
  .split-copy > .glass { min-height: 0; margin-bottom: 18svh; }
  .flip .split-media { order: 2; }
}

/* Shelf */
.shelf { text-align: center; }
.quote { font-size: clamp(2.3rem, 9.5vw, 5.25rem); }
.shelf-stage { position: relative; max-width: 720px; margin: 56px auto 0; padding: 0 8px; }
.bottles { display: flex; align-items: flex-end; justify-content: center; gap: clamp(8px, 3vw, 28px); height: clamp(190px, 44vw, 300px); position: relative; z-index: 1; }
.bottle {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px 16px 12px 12px;
  box-shadow: inset 6px 0 10px rgba(255, 255, 255, 0.55), inset -8px 0 14px rgba(80, 40, 30, 0.12), 0 14px 24px -12px rgba(80, 40, 30, 0.4);
}
.bottle::before { content: ""; position: absolute; left: 50%; translate: -50% 0; border-radius: 6px 6px 3px 3px; }
.bottle::after { content: ""; position: absolute; left: 18%; top: 10%; width: 12%; height: 60%; border-radius: 99px; background: rgba(255, 255, 255, 0.55); }
.b4::after { display: none; }
.bottle em {
  position: relative; z-index: 1;
  writing-mode: vertical-rl; rotate: 180deg;
  font-style: normal; font-size: clamp(0.66rem, 2.2vw, 0.85rem); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
  color: #3A2D2B;
}
.b1 { width: clamp(44px, 12vw, 74px); height: 78%; background: linear-gradient(90deg, #F2D0C8, #F7E1DA); }
.b1::before { width: 34%; height: 16%; top: -15%; background: #CFA89C; box-shadow: 0 -1px 0 #BF978B; }
.b2 { width: clamp(38px, 10vw, 60px); height: 92%; background: linear-gradient(90deg, #DCE7CD, #EDF3E3); border-radius: 12px; }
.b2::before { width: 60%; height: 9%; top: -8%; background: #7F9669; }
.b3 { width: clamp(40px, 11vw, 64px); height: 52%; background: linear-gradient(90deg, #C98A7C, #E0AFA2); border-radius: 12px 12px 10px 10px; }
.b3::before { width: 40%; height: 26%; top: -24%; background: #3F2E2B; border-radius: 99px 99px 4px 4px; }
.b3 em { color: #2A1D1B; }
.b4 { width: clamp(64px, 17vw, 108px); height: 36%; background: linear-gradient(90deg, #F6EEE6, #FFFaF5); border-radius: 12px; }
.b4::before { width: 106%; height: 22%; top: -18%; background: #D9C9BB; border-radius: 8px; }
.b4 em { writing-mode: horizontal-tb; rotate: none; }
.b5 { width: clamp(42px, 11vw, 66px); height: 68%; background: linear-gradient(90deg, #F4E0B8, #FAEED6); border-radius: 22px 22px 6px 6px; }
.b5::before { width: 70%; height: 10%; top: auto; bottom: -1%; background: #D8B77A; border-radius: 4px; }
.shelf-board {
  height: 18px; margin: 0 -8px; border-radius: 10px;
  background: linear-gradient(var(--glass-hi), var(--glass-bg));
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow);
}
.built {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  width: fit-content; max-width: 100%;
  margin: 28px auto 0; padding: 10px; border-radius: 999px;
}
.built li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 8px; border-radius: 999px;
  font-weight: 600; font-size: 0.98rem;
  background: color-mix(in oklab, var(--cream) 60%, transparent);
}
.built b {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: var(--ink); color: var(--cream); font-size: 0.8rem;
}
@media (max-width: 520px) { .built { border-radius: 28px; } }

/* Dermatologist */
.derm { text-align: center; }
.note {
  max-width: 620px; margin: 56px auto 0;
  padding: 26px clamp(22px, 5vw, 40px) 28px;
  border-radius: 34px;
  text-align: left;
}
.note-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.note-title { font-weight: 650; color: var(--ink-2); font-size: 0.95rem; }
.lock {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 9px; border-radius: 999px;
  background: color-mix(in oklab, var(--sage-deep) 16%, transparent); color: var(--sage-deep);
  font-size: 0.85rem; font-weight: 650;
}
.lock svg { width: 17px; height: 17px; }
.note-body { margin: 18px 0 0; }
.note-body p {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 4.4vw, 2.1rem); line-height: 1.3; letter-spacing: -0.015em;
}
.note-foot { margin-top: 18px; display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: var(--ink-2); flex-wrap: wrap; }

/* iPhone Duo */
.duo { text-align: center; }
.duo-stage { margin: 56px auto 0; perspective: 1800px; max-width: 820px; }
.duo-device {
  position: relative;
  display: flex;
  width: 100%;
  aspect-ratio: 1.36;
  padding: 1.6%;
  border-radius: 6.4% / 8.7%;
  background: var(--titanium);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35), 0 60px 120px -40px rgba(90, 50, 40, 0.5);
  transform-style: preserve-3d;
  container-type: inline-size;
}
.duo-half {
  position: relative;
  flex: 1;
  background: var(--screen);
  color: var(--screen-ink);
  overflow: hidden;
}
.duo-left {
  border-radius: 4.6cqw 0 0 4.6cqw;
  background: radial-gradient(90% 70% at 50% 40%, #F7EDE6, #E4D2C6);
  transform-origin: 100% 50%;
  display: grid; place-items: center;
}
@media (prefers-color-scheme: dark) { .duo-left { background: radial-gradient(90% 70% at 50% 40%, #3B302C, #211A18); } }
.duo-right {
  border-radius: 0 4.6cqw 4.6cqw 0;
  background:
    radial-gradient(90% 60% at 100% 0%, color-mix(in oklab, var(--rose-soft) 50%, transparent), transparent 70%),
    var(--screen);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 2cqw;
}
.duo-photo { position: relative; width: 70%; aspect-ratio: 200 / 220; }
.dm1 { left: 33%; top: 66%; }
.dm2 { left: 57%; top: 39%; }
.duo .marker { width: 4.2cqw; height: 4.2cqw; font-size: 2.1cqw; box-shadow: 0 0 0 0.4cqw rgba(255, 255, 255, 0.9), 0 0.5cqw 1.5cqw rgba(0, 0, 0, 0.3); }
.duo .marker::after { inset: -0.8cqw; border-width: 0.3cqw; }
.duo-right .step-count { margin: 0; font-size: 1.7cqw; }
.duo-right .step-name { font-size: 5.6cqw; }
.ring-sm { width: 22cqw; margin-top: 2.6cqw; }
.ring-sm .ring-time { font-size: 4.6cqw; margin: 0; }
.duo-right .step-actions { margin-top: 3cqw; gap: 1cqw; }
.duo-right .step-actions span { font-size: 1.7cqw; padding: 1.1cqw 2.1cqw; }
.duo-crease {
  position: absolute; top: 1.6%; bottom: 1.6%; left: 50%; width: 1.4cqw; translate: -50% 0;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.12) 45%, rgba(255, 255, 255, 0.25) 55%, transparent);
  pointer-events: none;
}

/* Languages */
.langs { text-align: center; }
.lang-cloud {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px;
  max-width: 900px; margin: 48px auto 0;
}
.lang-cloud li {
  padding: 12px 22px; border-radius: 999px;
  font-size: clamp(1.25rem, 4.6vw, 2.2rem); font-weight: 650; letter-spacing: -0.02em;
}
.lang-cloud li:nth-child(3n + 2) { color: var(--rose); }
.lang-cloud li:nth-child(3n) { color: var(--sage-deep); }

/* Privacy: a night panel for contrast. */
.privacy { padding: 0 12px; }
.privacy-inner {
  max-width: 1180px; margin: clamp(40px, 8vh, 96px) auto;
  padding: clamp(64px, 12vh, 128px) clamp(24px, 6vw, 96px);
  border-radius: clamp(32px, 5vw, 56px);
  background:
    radial-gradient(70% 60% at 0% 0%, rgba(181, 97, 111, 0.45), transparent 70%),
    radial-gradient(60% 60% at 100% 100%, rgba(63, 90, 43, 0.5), transparent 70%),
    var(--night);
  color: var(--night-ink);
  box-shadow: 0 50px 100px -40px rgba(40, 20, 20, 0.6);
  position: relative; overflow: hidden;
}
.privacy .eyebrow { color: var(--night-accent); }
.privacy h2 { font-size: clamp(2.8rem, 12vw, 6.5rem); }
.vows { margin-top: clamp(36px, 6vh, 64px); display: grid; gap: 0; }
.vows li {
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: clamp(1.3rem, 3.6vw, 2.3rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.2;
  color: var(--night-ink-2);
}
.vows b { color: var(--night-ink); font-weight: 700; }
.link-arrow {
  display: inline-flex; gap: 8px; margin-top: 36px;
  padding: 14px 20px; white-space: nowrap; font-size: clamp(0.92rem, 4vw, 1rem); border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--night-ink); font-weight: 600; text-decoration: none;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.link-arrow:hover { background: rgba(255, 255, 255, 0.18); }
.privacy :focus-visible { outline-color: var(--night-accent); }
@media (min-width: 900px) {
  .vows { grid-template-columns: 1fr 1fr; column-gap: 56px; }
}

/* Closing */
.closing {
  text-align: center;
  padding: clamp(72px, 12vh, 140px) 20px clamp(80px, 12vh, 140px);
  display: flex; flex-direction: column; align-items: center;
}
.closing h2 { margin-top: 28px; }
.wordmark-lg { font-size: clamp(4rem, 17vw, 8rem); display: inline-block; }
.closing-lead { margin-top: 18px; font-size: clamp(1.15rem, 2.6vw, 1.5rem); line-height: 1.4; color: var(--ink-2); letter-spacing: -0.015em; }

/* Footer */
.foot { padding: 0 16px 40px; }
.foot-inner {
  max-width: 1100px; margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  font-size: 0.9rem; color: var(--ink-2);
}
.foot-note { max-width: 60ch; line-height: 1.5; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 18px; }
.foot-links a, .foot-contact a { color: var(--ink); text-decoration: none; font-weight: 500; display: inline-block; padding: 6px 0; }
.foot-links a:hover, .foot-contact a:hover { text-decoration: underline; }
.foot-contact { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cta-closing { margin: 28px 0 0; height: 48px; padding: 0 24px; font-size: 1rem; }
.brand .wordmark-img { height: 24px; }

/* ---------- Documents: /legal/, policies, /support/, 404 ---------- */
/* A glass reading panel on the same atmosphere, ~70ch column, B's type at reading sizes. */
.doc-main { padding: clamp(20px, 4vh, 44px) 12px clamp(56px, 10vh, 104px); }
.doc-wrap { max-width: 49rem; margin: 0 auto; }   /* panel padding + a ~70ch reading column */
.doc-tools {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 4px 14px;
}
.doc-back, .lang-switch summary {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px 0 10px;
  border-radius: 999px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 6px 18px -10px rgba(90, 50, 40, 0.35);
  color: var(--ink); font-size: 0.92rem; font-weight: 600; text-decoration: none;
}
.doc-back svg, .lang-switch summary svg { width: 18px; height: 18px; flex: none; }
.doc-back:hover, .lang-switch summary:hover { background: var(--glass-solid); }
.lang-switch { position: relative; margin-left: auto; }
.lang-switch summary { list-style: none; cursor: pointer; padding: 0 10px 0 12px; }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch[open] summary svg:last-child { rotate: 180deg; }
.lang-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
  width: min(18rem, calc(100vw - 32px));
  padding: 10px;
  border-radius: 22px;
  background: var(--glass-solid);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow);
  font-size: 0.95rem;
}
.lang-panel li > * { display: block; padding: 8px 12px; border-radius: 12px; color: var(--ink-2); }
.lang-panel a { color: var(--ink); font-weight: 650; text-decoration: none; background: var(--sunk); }
.lang-panel p { padding: 8px 12px 4px; font-size: 0.85rem; line-height: 1.45; color: var(--ink-2); }

.doc {
  background: var(--doc-bg);
  border-radius: clamp(26px, 4vw, 40px);
  padding: clamp(24px, 6vw, 60px) clamp(20px, 6vw, 64px) clamp(32px, 6vw, 64px);
  line-height: 1.62;
}
.doc h1 {
  margin-top: 18px;
  font-size: clamp(2.1rem, 7vw, 3.5rem); line-height: 1.04; letter-spacing: -0.04em;
  text-wrap: balance;
}
.doc h2 {
  margin-top: 2.2em; scroll-margin-top: 90px;
  font-size: clamp(1.45rem, 4vw, 1.95rem); line-height: 1.15; letter-spacing: -0.03em;
}
.doc h3 { margin-top: 1.6em; font-size: 1.15rem; line-height: 1.3; scroll-margin-top: 90px; }
.doc p, .doc ul, .doc .doc-table, .doc .doc-callout { margin-top: 0.9em; }
.doc h2 + p, .doc h3 + p { margin-top: 0.5em; }
.doc ul { padding-left: 1.3em; list-style: disc; }
.doc li + li { margin-top: 0.45em; }
.doc li::marker { color: var(--rose); }
.doc strong { font-weight: 650; }
.doc a { color: var(--rose); text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.doc a:hover { text-decoration-thickness: 2px; }
.doc code { font: 0.88em/1.4 ui-monospace, "SF Mono", Menlo, monospace; background: var(--sunk); padding: 1px 6px; border-radius: 6px; }
.doc-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font-size: 0.92rem; line-height: 1.4; color: var(--ink-2);
}
.doc-pill {
  padding: 3px 10px; border-radius: 999px;
  background: color-mix(in oklab, var(--rose) 14%, transparent); color: var(--rose);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.doc-callout {
  padding: 14px 18px;
  border-radius: 20px;
  background: color-mix(in oklab, var(--rose) 7%, transparent);
  border: 1px solid color-mix(in oklab, var(--rose) 22%, transparent);
  font-size: 0.95rem; line-height: 1.55; color: var(--ink-2);
}
.doc-callout strong { color: var(--ink); }
.doc-meta { padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--ink-2); }
.doc-lead { font-size: clamp(1.1rem, 2.4vw, 1.3rem); line-height: 1.45; letter-spacing: -0.012em; color: var(--ink-2); }
.doc-small { font-size: 0.9rem; color: var(--ink-2); }

/* [TO FILL] / [LAWYER] / [OWNER] marks: must stay impossible to miss. */
mark.todo {
  background: var(--todo); color: var(--on-todo);
  padding: 1px 5px; border-radius: 5px;
  box-shadow: inset 0 -2px 0 rgba(142, 75, 87, 0.45);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Tables scroll inside their own box, never the page. */
.doc-table {
  max-width: 100%;
  overflow-x: auto;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--glass-solid) 55%, transparent);
  overscroll-behavior-x: contain;
}
.doc-table:focus-visible { outline-offset: 2px; }
.doc-table table { width: 100%; border-collapse: collapse; font-size: 0.9rem; line-height: 1.5; }
.doc-table.wide table { min-width: 46rem; }
.doc-table th, .doc-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.doc-table tr:last-child > * { border-bottom: 0; }
.doc-table thead th { font-weight: 650; background: var(--sunk); white-space: nowrap; }
.doc-table tbody th { font-weight: 650; width: min(9.5rem, 36%); }

/* "On this page" */
.doc-toc {
  margin-top: 1.6em; padding: 18px 22px;
  border-radius: 22px;
  background: var(--sunk);
  border: 1px solid var(--line);
}
.doc-toc-title { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rose); }
.doc .doc-toc ol { margin-top: 8px; padding-left: 1.4em; list-style: decimal; columns: 2 15em; column-gap: 32px; font-size: 0.95rem; }
.doc .doc-toc ol.own-numbers { list-style: none; padding-left: 0; }
.doc-toc li { break-inside: avoid; padding: 3px 0; }
.doc .doc-toc a { color: var(--ink); text-decoration: none; }
.doc .doc-toc a:hover { color: var(--rose); text-decoration: underline; }

/* /legal/ hub */
.doc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 12px; margin-top: 1.4em; }
.doc-card { padding: 18px 20px; border-radius: 22px; background: var(--sunk); border: 1px solid var(--line); }
.doc .doc-card h2 { margin: 0; font-size: 1.1rem; letter-spacing: -0.02em; }
.doc .doc-card p { margin-top: 6px; font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); }
.doc .doc-links { list-style: none; padding: 0; display: grid; gap: 8px; }
.doc .doc-links li { margin: 0; }
.doc .doc-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-radius: 18px;
  background: var(--sunk); border: 1px solid var(--line);
  color: var(--ink); font-weight: 600; text-decoration: none;
}
.doc .doc-links a::after { content: "→"; color: var(--rose); }
.doc .doc-links a:hover { border-color: color-mix(in oklab, var(--rose) 45%, transparent); }

/* 404 */
.doc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.doc .doc-button {
  display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border-radius: 999px;
  background: var(--ink); color: var(--cream); font-weight: 600; text-decoration: none;
}
.doc .doc-button-quiet { background: var(--sunk); color: var(--ink); border: 1px solid var(--line); }

/* ---------- Motion: time-based loops (hero phone life) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .phone-hero { animation: arrive 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both 0.1s; }
  .hero-copy { animation: fade-up 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .chip { animation: fade-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .chip-a { animation-delay: 0.6s; }
  .chip-b { animation-delay: 0.8s; }
  .chip-c { animation-delay: 1s; }
  .wave i { animation: talk 1.1s ease-in-out infinite alternate; }
  .wave i:nth-child(odd) { animation-duration: 0.8s; }
  .wave i:nth-child(3n) { animation-duration: 1.4s; animation-delay: -0.3s; }
  .wave i:nth-child(4n) { animation-delay: -0.6s; }
  .typing span { animation: dot 1.2s ease-in-out infinite; }
  .typing span:nth-child(2) { animation-delay: 0.15s; }
  .typing span:nth-child(3) { animation-delay: 0.3s; }
  .ring-fill { animation: ring 24s linear infinite; }
  .marker::after { animation: ping 2.4s ease-out infinite; }
  .m2::after, .dm2::after { animation-delay: 0.8s; }
  .m3::after { animation-delay: 1.6s; }
}
@property --sec { syntax: "<integer>"; inherits: false; initial-value: 24; }
@media (prefers-reduced-motion: no-preference) {
  .ring-time { counter-reset: s var(--sec); animation: countdown 24s linear infinite; }
  .ring-time::after { content: "0:" counter(s, decimal-leading-zero); }
  .ring-time .ring-static { display: none; }
}
@keyframes arrive { from { opacity: 0; transform: translateY(60px) scale(0.96); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes talk { from { transform: scaleY(calc(var(--h) * 0.35)); } to { transform: scaleY(var(--h)); } }
@keyframes dot { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 0.9; transform: translateY(-0.8cqw); } }
@keyframes ring { from { stroke-dashoffset: 65.35; } to { stroke-dashoffset: 326.73; } }
@keyframes countdown { from { --sec: 24; } to { --sec: 0; } }
@keyframes ping { 0% { opacity: 0.9; transform: scale(0.7); } 80%, 100% { opacity: 0; transform: scale(1.6); } }

/* ---------- Motion: scroll-driven (progressive enhancement) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Atmosphere drifts from blush to sage as you read. */
    body::after { animation: to-sage linear both; animation-timeline: scroll(root); }

    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }

    /* Hero: copy lifts away, phone rises to meet the next chapter, chips drift at their own pace. */
    .hero-copy { animation: fade-up 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both, hero-out linear both; animation-timeline: auto, view(); animation-range: normal, exit 0% exit 100%; }
    .hero-stage { animation: stage-out linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .chip-a { animation: fade-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both 0.6s, drift-1 linear both; animation-timeline: auto, view(); animation-range: normal, cover 30% exit 100%; }
    .chip-b { animation: fade-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both 0.8s, drift-2 linear both; animation-timeline: auto, view(); animation-range: normal, cover 30% exit 100%; }
    .chip-c { animation: fade-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both 1s, drift-3 linear both; animation-timeline: auto, view(); animation-range: normal, cover 30% exit 100%; }

    /* Voice: each word lights up as it crosses the middle of the screen. */
    .word { animation: light linear both; animation-timeline: view(); animation-range: cover 20% cover 48%; }

    /* Chapters with a phone: the phone settles in as the chapter arrives. */
    .split { view-timeline: --chapter block; }
    .split .phone-sticky { animation: settle linear both; animation-timeline: --chapter; animation-range: entry 0% entry 70%; }

    /* Shelf: bottles rise one after another. */
    .bottle { animation: shelf-in linear both; animation-timeline: view(); }
    .b1 { animation-range: entry 10% cover 30%; }
    .b2 { animation-range: entry 20% cover 34%; }
    .b3 { animation-range: entry 30% cover 38%; }
    .b4 { animation-range: entry 40% cover 42%; }
    .b5 { animation-range: entry 50% cover 46%; }

    /* iPhone Duo: the left half unfolds as it scrolls into view. */
    .duo-stage { view-timeline: --duo block; }
    .duo-left { animation: unfold linear both; animation-timeline: --duo; animation-range: entry 10% cover 40%; }
    .duo-device { animation: duo-tilt linear both; animation-timeline: --duo; animation-range: entry 10% cover 50%; }

    /* Languages drift in from alternating sides. */
    .lang-cloud li { animation: lang-l linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    .lang-cloud li:nth-child(even) { animation-name: lang-r; }
  }
}
@keyframes to-sage { 0%, 35% { opacity: 0; } 100% { opacity: 1; } }
@keyframes reveal { from { opacity: 0; transform: translateY(56px) scale(0.98); } }
@keyframes hero-out { to { opacity: 0; transform: translateY(-60px) scale(0.96); } }
@keyframes stage-out { to { transform: translateY(-8%) scale(0.94); opacity: 0.4; } }
@keyframes drift-1 { to { translate: -30px -140px; } }
@keyframes drift-2 { to { translate: 30px -220px; } }
@keyframes drift-3 { to { translate: -20px -300px; } }
@keyframes light { from { opacity: 0.16; transform: scale(0.94); filter: blur(2px); } }
@keyframes settle { from { opacity: 0; transform: translateY(80px) rotateX(18deg) scale(0.9); } }
@keyframes shelf-in { from { opacity: 0; transform: translateY(70px); } }
@keyframes unfold { from { transform: rotateY(-100deg); filter: brightness(0.7); } }
@keyframes duo-tilt { from { transform: rotateX(22deg) scale(0.88); } }
@keyframes lang-l { from { opacity: 0; transform: translateX(-60px); } }
@keyframes lang-r { from { opacity: 0; transform: translateX(60px); } }

/* ---------- Accessibility preferences ---------- */
@media (prefers-reduced-transparency: reduce) {
  .glass, .bar-inner, .chip, .lang-cloud li, .listen, .link-arrow, .doc, .doc-back, .lang-switch summary {
    background: var(--glass-solid);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .link-arrow { background: #3A2E2E; }
  .glass::before, .bar-inner::before, .chip::before, .lang-cloud li::before, .doc::before { display: none; }
  .built li { background: var(--cream); }
}
@media (forced-colors: active) {
  .app-icon { forced-color-adjust: none; }
  .grad { color: CanvasText; background: none; }
  .glass, .bar-inner, .chip, .lang-cloud li, .doc, .doc-table, .lang-panel { border: 1px solid CanvasText; }
  mark.todo { background: Mark; color: MarkText; border: 1px solid CanvasText; }
}
@media print {
  body::before, body::after, .bar, .hero-stage, .shelf-stage, .duo-stage, .doc-tools { display: none; }
  .doc { background: none; box-shadow: none; border: 0; padding: 0; }
}