/* murlivo.com - one stylesheet for the landing page and the privacy page (ODE-132, final).
   Colours: ONLY murlivo-brand phone dark tokens (.claude/skills/murlivo-brand/SKILL.md).
   Type: Google Sans Flex, subset for the web (ROND 35, wght 400-600, opsz 14-48, Latin). */

@font-face {
  font-family: "Murlivo Sans";
  src: url("/fonts/google-sans-flex-murlivo.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* murlivo-brand, phone dark theme */
  --background: #13110F;
  --surface-1: #1C1A17;
  --surface-2: #252220;
  --text-primary: #F3EFE7;
  --text-secondary: #ABA59A;
  --text-quiet: #9C968C;
  --outline: #3A3631;
  --coral: #E5654F; /* recording only: the ring around the record disc */

  --font: "Murlivo Sans", system-ui, sans-serif;
  --page-max: 1120px;
  --measure: 68ch;
  --gutter: 24px;
  --section: 88px;

  /* Motion. --ease-spring is the brand spring (murlivo-brand skill: Compose spring, dampingRatio 0.75,
     stiffness MediumLow 400) sampled over its settle time as a linear() curve: 2.8% overshoot. */
  --ease-spring: linear(0, 0.097, 0.298, 0.514, 0.700, 0.839, 0.933, 0.989, 1.017, 1.027, 1.028, 1.023, 1.017, 1.011, 1.006, 1.003, 1.001, 1.000, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-press: 140ms;
  --dur-base: 220ms;
  --dur-reveal: 300ms;
  --dur-breathe: 2.4s; /* brand: the halo breathes on a 2.4 s cycle (RecordRing.kt) */
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--background); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
figure { margin: 0; }
/* Safety net: a heading word wider than its line breaks instead of scrolling the page sideways (ODE-161).
   "anywhere" (not break-word) also lowers min-content, so it works for flex and grid items too; it never
   acts on a word that fits. It breaks with no hyphen, so a known long word gets a ­ in the HTML
   (de privacy H1, fr feature H3). No hyphens: auto: it also splits words that already fit. */
h1, h2, h3 { overflow-wrap: anywhere; }
a {
  color: var(--text-primary);
  text-decoration-line: underline;
  text-decoration-color: var(--text-quiet);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-color: var(--text-primary); }
a:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 4px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: 12px; padding: 8px 14px; background: var(--surface-2); border-radius: 999px; z-index: 1; }
.wrap { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Header ---------- */
.site-header { padding-top: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text-primary); text-decoration: none; }
.brand-icon { width: 32px; height: 32px; }
.wordmark { height: 20px; width: auto; fill: currentColor; }

/* ---------- Language menu (ODE-160): a pill top right, a native <details>, works with no script ---------- */
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.flag { width: 20px; height: 14px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px var(--outline); }
.lang-menu { position: relative; }
.lang-menu summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 12px 0 14px;
  border: 1px solid var(--outline);
  border-radius: 999px;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  list-style: none;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.lang-menu summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .lang-menu summary:hover { border-color: var(--text-quiet); } }
.lang-menu summary:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; }
.lang-menu[open] summary { background: var(--surface-1); border-color: var(--text-quiet); }
.lang-menu .chev { color: var(--text-secondary); transition: transform var(--dur-base) var(--ease-spring); }
.lang-menu[open] .chev { transform: rotate(180deg); }
.lang-menu nav {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10;
  min-width: 232px;
  padding: 6px;
  background: var(--surface-1);
  border: 1px solid var(--outline);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.45);
}
.lang-menu[open] nav { animation: menu-in var(--dur-base) var(--ease-out); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }
.lang-menu ul { margin: 0; padding: 0; list-style: none; }
.lang-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 14px 0 12px;
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 16px;
  text-decoration: none;
}
.lang-menu a:hover { background: var(--surface-2); }
.lang-menu a:focus-visible { outline: 2px solid var(--text-primary); outline-offset: -2px; border-radius: 10px; }
.lang-menu a[aria-current="page"] { background: var(--surface-2); font-weight: 600; }
/* The current language also gets a check mark, so it is not marked by colour alone. */
.lang-menu a[aria-current="page"]::after {
  content: "";
  width: 10px;
  height: 5px;
  margin: -3px 0 0 auto;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(-45deg);
}

/* ---------- Calls to action ---------- */
/* Google Play badge: official artwork, unchanged. Height >= 28px; clear space = 1/4 of its height (the row gap).
   The tap area is the badge itself (48-64px tall, never below the 48dp target), so the gap between the two badges
   is a real gap with no tap area in it (ODE-151). */
.cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; } /* = the Play badge clear space (1/4 of its height) */
.store { position: relative; display: inline-block; border-radius: 12px; text-decoration: none; }
.store img, .wear-badge { height: 56px; width: auto; transition: transform var(--dur-base) var(--ease-spring); }
@media (hover: hover) {
  .store:hover img, .store:hover .wear-badge { transform: translateY(-2px); }
}
.store:active img, .store:active .wear-badge { transform: scale(0.97); transition-duration: var(--dur-press); }

/* Our own Wear OS badge: built like the Play badge (same height, corner radius and outline weight, icon left,
   two lines right) but in brand tokens, with our own watch glyph. No Google or Wear OS logo, no Google colours.
   It links to the "Start from your wrist" section. Radius and outline scale with the height like the Play art
   (8.86 and 1.42 units of a 70.87-unit-high badge). */
.wear-badge {
  --h: 56px;
  display: flex;
  align-items: center;
  gap: calc(var(--h) * 0.2);
  height: var(--h);
  padding: 0 calc(var(--h) * 0.3) 0 calc(var(--h) * 0.24);
  background: var(--background);
  border: calc(var(--h) * 0.02) solid var(--text-secondary);
  border-radius: calc(var(--h) * 0.125);
  color: var(--text-primary);
}
.wear-icon {
  flex: none;
  width: calc(var(--h) * 0.46);
  height: calc(var(--h) * 0.54);
  background: var(--text-primary);
  -webkit-mask: url("/assets/watch-glyph.svg") center / contain no-repeat;
  mask: url("/assets/watch-glyph.svg") center / contain no-repeat;
}
.wear-text { display: flex; flex-direction: column; line-height: 1.05; white-space: nowrap; }
.wear-text span:first-child { font-size: calc(var(--h) * 0.17); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.wear-text span:last-child { font-size: calc(var(--h) * 0.33); font-weight: 500; letter-spacing: -0.01em; }

/* Focus ring that grows in: a pseudo-element ring animated with transform + opacity only. */
.store, .brand, .contact a, .site-footer a { position: relative; }
.store:focus-visible, .brand:focus-visible, .contact a:focus-visible, .site-footer a:focus-visible { outline: none; }
.store::after, .brand::after, .contact a::after, .site-footer a::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--text-primary);
  border-radius: 10px;
  opacity: 0;
  transform: scale(0.94);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring);
}
.store::after { inset: -6px; border-radius: 12px; }
.store:focus-visible::after, .brand:focus-visible::after, .contact a:focus-visible::after, .site-footer a:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}


/* ---------- Hero (variant C) ---------- */
.hero { padding-top: 16px; }
.disc { position: relative; width: 196px; aspect-ratio: 1; margin: 24px auto 36px; }
.disc img { position: relative; width: 100%; height: 100%; border-radius: 50%; }
/* The halo is a filled coral circle behind the disc image. Resting state (also the reduced-motion state):
   halfway through the brand breath. Only the halo moves, never the LCP image. */
.halo {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--coral);
  transform: scale(1.09);
  opacity: 0.24;
}
@media (prefers-reduced-motion: no-preference) {
  .halo { animation: breathe var(--dur-breathe) ease-in-out infinite alternate; }
}
@keyframes breathe {
  from { transform: scale(1); opacity: 0.35; }
  to   { transform: scale(1.18); opacity: 0.12; }
}
.hero h1 { margin: 0; font-size: 48px; line-height: 1.0; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; }
.lede { margin: 24px 0 34px; color: var(--text-secondary); font-size: 18px; line-height: 1.5; max-width: 36ch; }
.lede span { display: block; text-wrap: balance; }
.lede span + span { margin-top: 6px; color: var(--text-primary); }

/* ---------- In your pocket (variant B) ---------- */
.pocket { margin-top: var(--section); }
.pocket h2, .faq h2, .closing h2 { margin: 0; font-size: 34px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.pocket-copy p { margin: 16px 0 0; color: var(--text-secondary); font-size: 18px; max-width: 34ch; }
.stage {
  position: relative;
  margin-top: 36px;
  padding: 36px 0;
  background: var(--surface-1);
  border: 1px solid var(--outline);
  border-radius: 28px;
  overflow: hidden;
}
.phone { border-radius: 26px; overflow: hidden; outline: 2px solid var(--outline); background: var(--background); }
.phone img { width: 100%; height: auto; }
.stage .phone { width: 62%; margin: 0 8% 0 auto; }
.watch { aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 4px solid var(--outline); }
.watch img { width: 100%; height: 100%; }
.stage .watch { position: absolute; left: 6%; bottom: 9%; width: 34%; outline: 8px solid var(--surface-1); }

/* ---------- Features ---------- */
.features { margin-top: var(--section); display: grid; gap: var(--section); }
.feature { display: grid; gap: 28px; }
.feature h3 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
.feature p { margin: 12px 0 0; color: var(--text-secondary); font-size: 18px; line-height: 1.55; max-width: 36ch; }
.shot-phone .phone { width: 64%; max-width: 280px; margin: 0 auto; }
.shot-watch { display: flex; justify-content: center; align-items: flex-start; }
.shot-watch .watch { width: 46%; max-width: 220px; }
.shot-watch .watch + .watch { margin-left: -6%; margin-top: 18%; outline: 8px solid var(--background); }

/* ---------- Questions (FAQ) ---------- */
/* Native <details>: every answer is real text in the HTML and works with no script. */
.faq { margin-top: var(--section); display: grid; gap: 28px; }
.faq-list { border-top: 1px solid var(--outline); }
.faq details { border-bottom: 1px solid var(--outline); }
.faq summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-size: 19px; line-height: 1.3; font-weight: 600; text-wrap: balance;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; color: var(--text-quiet); font-size: 26px; line-height: 1; font-weight: 400;
  transition: transform var(--dur-base) var(--ease-spring);
}
.faq details[open] > summary::after { transform: rotate(45deg); }
.faq summary:hover::after { color: var(--text-primary); }
.faq summary:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 4px; border-radius: 4px; }
.faq details p { margin: -4px 0 0; padding-bottom: 22px; color: var(--text-secondary); font-size: 18px; line-height: 1.55; max-width: 60ch; }

/* ---------- Closing call to action ---------- */
.closing { margin-top: var(--section); }
.closing-band {
  display: grid;
  gap: 28px;
  padding: 36px 28px;
  background: var(--surface-1);
  border: 1px solid var(--outline);
  border-radius: 28px;
}
.contact { margin: 32px 0 0; font-size: 17px; }

/* ---------- Footer ---------- */
/* Footer (2026-10-20): brand and tagline, two link groups, then a row with "Made in [EU flag] with love".
   No language list: the header menu switches language. */
.site-footer { margin-top: auto; padding: 64px 0 32px; color: var(--text-quiet); font-size: 14px; line-height: 1.5; }
.site-footer .foot { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; padding-top: 32px; border-top: 1px solid var(--outline); }
.site-footer p { margin: 0; }
.foot-brand { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.foot-brand p { color: var(--text-secondary); font-size: 15px; }
.foot-group > p { margin: 0 0 8px; color: var(--text-primary); font-weight: 600; }
.foot-group ul { margin: 0; padding: 0; list-style: none; }
.foot-group a { display: inline-block; padding: 6px 0; color: var(--text-secondary); text-decoration: none; }
.foot-group a[aria-current="page"] { color: var(--text-primary); }
@media (hover: hover) { .foot-group a:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; } }
.foot-legal { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--outline); font-size: 13px; }
.made { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.made .flag { width: 21px; height: 14px; }

/* ---------- Cookie banner and footer "Cookie settings" (MUR-258, built by /assets/analytics.js) ---------- */
.consent {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 10;
  max-width: 560px; margin: 0 auto; padding: 16px;
  background: var(--surface-2); border: 1px solid var(--outline); border-radius: 16px;
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.45);
  font-size: 15px; line-height: 1.5;
}
.consent p { margin: 0; color: var(--text-secondary); }
.consent a { color: var(--text-primary); text-underline-offset: 3px; }
.consent-actions { display: flex; gap: 8px; margin-top: 12px; }
.consent-actions button {
  flex: 1 1 0; min-height: 48px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--outline); background: var(--surface-1); color: var(--text-primary);
  font: inherit; font-weight: 500; cursor: pointer;
}
.consent-settings {
  display: inline-block; min-height: 48px; margin-left: 16px; padding: 0;
  border: 0; background: none; color: var(--text-secondary); font: inherit; cursor: pointer;
}
.consent-actions button:focus-visible, .consent-settings:focus-visible, .consent a:focus-visible {
  outline: 2px solid var(--text-primary); outline-offset: 3px;
}
@media (hover: hover) {
  .consent-actions button:hover { background: var(--outline); }
  .consent-settings:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
}

/* ---------- Privacy (long-form) ---------- */
.doc { max-width: var(--measure); padding: 48px 0 0; }
.doc h1 { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.doc .effective { margin: 10px 0 0; color: var(--text-quiet); font-size: 16px; }
.doc h1 + .effective + p, .doc .ref-note + p { margin-top: 32px; }
.doc h1 + .effective + .ref-note { margin-top: 6px; color: var(--text-quiet); font-size: 16px; }
.doc h2 {
  margin: 48px 0 0; padding-top: 28px; border-top: 1px solid var(--outline);
  font-size: 23px; line-height: 1.25; font-weight: 600; letter-spacing: -0.005em;
}
.doc h3 { margin: 32px 0 0; font-size: 19px; line-height: 1.3; font-weight: 600; }
.doc h2 + p, .doc h2 + ul, .doc h3 + p, .doc h3 + ul { margin-top: 14px; }
.doc p, .doc ul { margin: 18px 0 0; }
.doc ul { padding-left: 1.25em; }
.doc li { padding-left: 4px; }
.doc li + li { margin-top: 10px; }
.doc li::marker { color: var(--text-quiet); }
.doc strong { font-weight: 600; }
.doc code {
  font-family: var(--font); font-feature-settings: "tnum", "zero"; font-size: 0.94em;
  padding: 1px 7px; border-radius: 6px; background: var(--surface-2);
}
.doc a { overflow-wrap: anywhere; }

/* ---------- Product facts (ODE-162) ---------- */
/* One two-column table of facts; below 560 px each row stacks, label above value. */
.facts { width: 100%; margin: 14px 0 0; border-collapse: collapse; font-size: 17px; line-height: 1.5; }
.facts caption { text-align: left; color: var(--text-quiet); font-size: 15px; padding-bottom: 10px; }
.facts th, .facts td { text-align: left; vertical-align: top; padding: 14px 0; border-bottom: 1px solid var(--outline); }
.facts th { width: 13ch; padding-right: 20px; color: var(--text-secondary); font-weight: 600; }
@media (max-width: 559.98px) {
  .facts, .facts tbody, .facts tr, .facts th, .facts td { display: block; }
  .facts caption { display: block; }
  .facts th { width: auto; padding: 14px 0 0; border: 0; }
  .facts td { padding: 4px 0 14px; }
}

/* ---------- Article (comparison guides, ODE-163) ---------- */
/* Builds on .doc: same measure and headings. One "Quick answer" box, one install card, a comparison table
   that becomes one card per row below 720 px (each cell shows its column name from data-label), the FAQ rows
   from the home page, and a numbered references list. No script. */
.crumbs { margin: 0; padding: 48px 0 0; font-size: 15px; color: var(--text-quiet); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--outline); }
.crumbs a { color: var(--text-secondary); }
.article.doc { padding-top: 20px; }
.article .checked { margin: 12px 0 0; color: var(--text-quiet); font-size: 16px; }
.article .checked + .ref-note { margin: 6px 0 0; color: var(--text-quiet); font-size: 16px; }
.answer {
  margin: 32px 0 0; padding: 22px 24px; border-radius: 20px;
  background: var(--surface-1); border: 1px solid var(--outline);
}
.answer .label { margin: 0; color: var(--text-quiet); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.answer p + p { margin-top: 8px; }
.answer p:last-child { font-size: 19px; line-height: 1.5; }
.install {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
  margin: 24px 0 0; padding: 20px 24px; border-radius: 20px; border: 1px solid var(--outline);
}
.install p { margin: 0; flex: 1 1 22ch; color: var(--text-secondary); font-size: 16px; line-height: 1.5; }
.install p strong { display: block; color: var(--text-primary); font-size: 17px; }
.install .store img { height: 48px; }
.article sup { font-size: 0.7em; line-height: 0; }
.article sup a { color: var(--text-quiet); text-decoration: none; padding: 0 1px; }
.article sup a:hover { color: var(--text-primary); }
.best-for { color: var(--text-secondary); }
.best-for strong { color: var(--text-primary); }
/* Use-case pages (ODE-203): numbered steps, and a sample of the Markdown note Murlivo writes. */
.doc ol.steps { margin: 18px 0 0; padding-left: 1.4em; }
.doc h2 + ol.steps { margin-top: 14px; }
.doc ol.steps li::marker { color: var(--text-quiet); font-feature-settings: "tnum"; }
.note-sample { margin: 18px 0 0; padding: 16px 20px; border-radius: 12px; background: var(--surface-2); }
.note-sample code { padding: 0; background: none; white-space: pre-wrap; font-size: 16px; line-height: 1.5; }

.compare { width: 100%; margin: 24px 0 0; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.compare caption { padding-left: 14px; text-align: left; color: var(--text-quiet); font-size: 15px; padding-bottom: 10px; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--outline); }
.compare thead th { color: var(--text-quiet); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.compare tbody th { font-weight: 600; }
.compare .ours th { color: var(--text-primary); }
.compare .ours > * { background: var(--surface-1); }
.compare tr > :first-child { padding-left: 14px; }
.compare .ours > :first-child { border-radius: 12px 0 0 12px; }
.compare .ours > :last-child { border-radius: 0 12px 12px 0; }
@media (max-width: 719.98px) {
  /* One card per option; the column name comes from data-label, so nothing is lost without the header. */
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; }
  .compare tr { margin-top: 12px; padding: 16px 20px; border: 1px solid var(--outline); border-radius: 18px; }
  .compare .ours { background: var(--surface-1); }
  .compare .ours > * { background: none; border-radius: 0; }
  .compare tr > :first-child { padding-left: 0; }
  .compare caption { display: block; padding-left: 0; }
  .compare tbody th { padding: 0 0 6px; border: 0; font-size: 18px; }
  .compare td { display: grid; grid-template-columns: minmax(0, 10ch) minmax(0, 1fr); gap: 12px; padding: 8px 0 0; border: 0; }
  .compare td::before { content: attr(data-label); color: var(--text-quiet); font-size: 14px; }
}

.article .faq { margin-top: 0; display: block; }
.article .faq .faq-list { margin-top: 14px; }
.article .faq summary { font-size: 18px; }
.article .faq details p { font-size: 17px; }

.refs { margin: 14px 0 0; padding-left: 1.6em; color: var(--text-secondary); font-size: 15px; line-height: 1.5; }
.refs li + li { margin-top: 8px; }
.refs li::marker { color: var(--text-quiet); font-feature-settings: "tnum"; }
.refs a { color: var(--text-secondary); }
.refs li:target { color: var(--text-primary); }
/* Research articles (ODE-185): reviewer quotes and numbered method steps. */
.article blockquote { margin: 18px 0 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--outline); }
.article blockquote p { margin: 0; }
.article blockquote footer { margin-top: 6px; color: var(--text-quiet); font-size: 15px; }
.article ol:not(.refs) { margin: 18px 0 0; padding-left: 1.4em; }

@media (min-width: 720px) {
  .crumbs { padding-top: 80px; }
  .article.doc { padding-top: 24px; }
  .answer { padding: 28px 32px; }
  .answer p:last-child { font-size: 20px; }
  .install { padding: 22px 28px; }
}

/* ---------- Scroll reveal: the feature sections only ---------- */
/* Scroll-driven, no JS. Where view() is unsupported (Firefox today) or motion is reduced, the content is
   simply there. Transform + opacity only, so it causes no layout shift. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .feature-copy, .feature .shot {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
    .feature .shot { animation-range: entry 10% entry 100%; }
  }
}
@keyframes reveal {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Landing <-> Privacy: a short cross-document fade ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-base); animation-timing-function: var(--ease-out); }

/* ---------- Reduced motion: no movement at all, everything fully visible ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Wider screens ---------- */
@media (min-width: 720px) {
  :root { --gutter: 40px; --section: 144px; }
  body { font-size: 18px; }
  .site-header { padding-top: 40px; }
  .store img { height: 64px; }
  .wear-badge { --h: 64px; }
  .cta-row { gap: 16px; }

  /* The breathing halo grows past the disc (scale up to 1.18); clip keeps it from scrolling the page
     sideways when the hero fills the screen (720-1120px), without making a scroll container (ODE-161). */
  .hero { overflow-x: clip; padding-top: 96px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
  .hero-copy { order: -1; container-type: inline-size; }
  /* The size follows the 7fr column (20cqi = 104px at a 520px column, from ~1020px), so the longest
     French and German words fit whole on tablets; wider screens are unchanged (ODE-161). */
  .hero h1 { font-size: min(104px, 20cqi); line-height: 0.94; letter-spacing: -0.045em; }
  .lede { font-size: 20px; margin: 36px 0 40px; max-width: 46ch; }
  .disc { width: min(420px, 100%); margin: 0 auto; }

  .pocket { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; }
  .pocket h2 { font-size: 56px; letter-spacing: -0.025em; max-width: 12ch; }
  .pocket-copy p { font-size: 20px; margin-top: 24px; }
  .stage { margin: 0; padding: 48px 0 0; height: 640px; }
  .stage .phone { width: 300px; margin: 0 40px 0 auto; border-radius: 32px; }
  .stage .watch { width: 156px; left: 28px; bottom: 48px; }

  .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
  .feature:nth-child(even) .feature-copy { order: 2; }
  .feature h3 { font-size: 44px; letter-spacing: -0.025em; }
  .feature p { font-size: 20px; margin-top: 18px; }
  .shot-phone .phone { width: 300px; max-width: none; border-radius: 32px; }
  .shot-watch .watch { width: 240px; max-width: none; }
  .shot-watch .watch + .watch { margin-left: -36px; margin-top: 120px; }

  .faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
  .faq h2 { font-size: 44px; letter-spacing: -0.025em; max-width: 9ch; position: sticky; top: 48px; }
  .faq summary { font-size: 22px; padding: 24px 0; }
  .faq details p { font-size: 19px; padding-bottom: 26px; }

  /* Heading left, badges right; when the heading has less than 12ch left beside the badges, the badges
     wrap below it instead of squeezing it to a sliver (ODE-161). */
  .closing-band { display: flex; flex-wrap: wrap; align-items: center; padding: 56px; gap: 28px 40px; }
  .closing h2 { flex: 1 1 12ch; font-size: 44px; letter-spacing: -0.025em; }
  .contact { font-size: 18px; margin-top: 40px; }

  .site-footer { padding-top: 96px; }
  .site-footer .foot { grid-template-columns: 2fr 1fr 1fr; gap: 32px 40px; }
  .foot-brand { grid-column: auto; }

  .doc { padding-top: 80px; }
  .doc h1 { font-size: 44px; }
  .doc h2 { font-size: 26px; margin-top: 56px; }
  .doc h3 { font-size: 20px; }
}

/* ---------- Phone shot inside an article ---------- */
.article .article-shot { margin: 24px 0 0; }
.article .article-shot .phone { width: 100%; max-width: 260px; margin: 0; }
.article .article-shot figcaption { margin-top: 10px; color: var(--text-quiet); font-size: 15px; }