/* Portiva website, v4. Monochrome ink on white (white on black in dark mode), typography first, real product
   screenshots in CSS device frames, one black-and-white photograph. Follows DESIGN.md of the app: color only for data
   (macro dots) and the red logo dot; no gradients, no glow, no decorative shadows, no icon tiles, no emoji.
   No JavaScript anywhere; the CSP allows only same-origin styles and images (no inline styles).
   v4 adds the motion layer (end of file): CSS-only load, scroll and hover animations, off with reduced motion.
   Cache: served with a one-year immutable Cache-Control. Never edit a published version: copy it to site.v5.css,
   change that, and update the <link> in every page and SITE.css in Web/content/blog/i18n.mjs. */

/* ---------- Tokens ---------- */

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.84);
  --bg-2: #f5f5f7;
  --bg-3: #e9e9ed;
  --card: #ffffff;
  --ink: #1d1d1f;
  --on-ink: #ffffff;
  --text: #1d1d1f;
  --text-2: #4f4f53;
  --text-3: #6e6e73;
  --line: #e2e2e6;
  --line-2: #cfcfd4;
  --accent: #c8453b;
  --protein: #cf6a5c;
  --carbs: #d4a045;
  --fat: #5f86c6;
  --band: #0c0c0d;
  --band-text: #f5f5f7;
  --band-text-2: #a7a7ac;
  --band-line: #2c2c2e;
  --device: #0b0b0c;
  --device-rim: #3b3b3e;
  --device-button: #2f2f32;
  --icon-ring: rgba(0, 0, 0, 0);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius: 16px;
  --radius-sm: 12px;
  --wrap: 1180px;
  --read: 43rem;
  --gutter: 24px;
  --header-h: 60px;
  --section: clamp(80px, 11vw, 144px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-glass: rgba(0, 0, 0, 0.78);
    --bg-2: #111112;
    --bg-3: #1d1d1f;
    --card: #161617;
    --ink: #f5f5f7;
    --on-ink: #000000;
    --text: #f5f5f7;
    --text-2: #b4b4b9;
    --text-3: #8e8e93;
    --line: #262628;
    --line-2: #3a3a3c;
    --accent: #e5675d;
    --protein: #e0806f;
    --carbs: #e4b762;
    --fat: #82a3da;
    --band: #111112;
    --band-line: #2c2c2e;
    --device: #000000;
    --device-rim: #48484c;
    --device-button: #3a3a3d;
    --icon-ring: #2c2c2e;
  }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; }
p { margin: 0; }
b, strong { font-weight: 600; }

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

.skip {
  position: absolute; inset-inline-start: 12px; top: -80px; z-index: 50;
  background: var(--ink); color: var(--on-ink); padding: 12px 18px; border-radius: 999px; text-decoration: none; font-weight: 600;
}
.skip:focus { top: 12px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.num { font-variant-numeric: tabular-nums; }

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

.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header {
    background: var(--bg-glass);
    -webkit-backdrop-filter: saturate(1.8) blur(20px);
    backdrop-filter: saturate(1.8) blur(20px);
  }
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--header-h); }

.wordmark {
  display: inline-flex; align-items: center; gap: 9px; flex: none; min-height: 44px;
  text-decoration: none; font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.02em;
}
.wordmark svg { width: 24px; height: 24px; flex: none; }
.wordmark .dot { fill: var(--accent); }

.nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.nav > a:not(.lang):not(.nav-cta) {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--text-2); text-decoration: none; font-size: 0.9375rem; border-radius: 999px;
}
.nav > a:not(.lang):not(.nav-cta):hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text) !important; font-weight: 600; }
.nav .lang {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; margin-inline-start: 8px;
  border: 1px solid var(--line-2); border-radius: 999px; color: var(--text); text-decoration: none; font-size: 0.9375rem;
  white-space: nowrap;
}
.nav .lang:hover { border-color: var(--ink); }
.nav-cta {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; margin-inline-start: 8px;
  border-radius: 999px; background: var(--ink); color: var(--on-ink); text-decoration: none;
  font-size: 0.9375rem; font-weight: 600; white-space: nowrap;
}
.nav-cta:hover { opacity: 0.86; }
/* 44 pt touch targets around the 36 px pills */
.nav .lang, .nav-cta { position: relative; }
.nav .lang::after, .nav-cta::after { content: ""; position: absolute; inset: -4px -2px; }

@media (max-width: 819px) {
  .nav .wide { display: none !important; }
}
@media (max-width: 379px) {
  :root { --gutter: 16px; }
  .wordmark { font-size: 1.125rem; }
  .nav .lang { padding: 0 12px; margin-inline-start: 4px; }
  .nav-cta { padding: 0 14px; margin-inline-start: 6px; }
}

/* ---------- Buttons and App Store badge ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 24px; border-radius: 999px; text-decoration: none; font-weight: 600;
  background: var(--ink); color: var(--on-ink); border: 1px solid var(--ink);
}
.btn:hover { opacity: 0.88; }
.btn-soft { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-soft:hover { opacity: 1; border-color: var(--ink); }

/* PLACEHOLDER App Store badge. Replace with Apple's official badge artwork (see Web/README.md). */
.store-badge {
  display: inline-flex; align-items: center; min-height: 56px; padding: 8px 22px;
  border-radius: 14px; background: var(--ink); color: var(--on-ink); text-decoration: none; line-height: 1.1;
  border: 1px solid var(--ink);
}
.store-badge:hover { opacity: 0.88; }
.store-badge small { display: block; font-size: 0.6875rem; letter-spacing: 0.01em; opacity: 0.86; }
.store-badge strong { display: block; font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.015em; }

/* ---------- Shared section scaffolding ---------- */

.section { padding: var(--section) 0; }
.section + .section { padding-top: 0; }
.section-head { max-width: 46rem; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head.center { margin-inline: auto; text-align: center; }
.kicker { font-size: 0.9375rem; font-weight: 600; color: var(--text-3); margin-bottom: 14px; letter-spacing: 0; }
.section-head h2 {
  font-size: clamp(2.125rem, 1.4rem + 3.2vw, 3.75rem); letter-spacing: -0.035em; line-height: 1.04;
  text-wrap: balance;
}
.section-head p:not(.kicker) {
  margin-top: 18px; color: var(--text-2); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem); line-height: 1.5;
  text-wrap: pretty;
}
.more { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.more a { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.more a::after { content: "\2192"; margin-inline-start: 6px; font-weight: 400; }
[dir="rtl"] .more a::after { content: "\2190"; }
.more a:hover { text-decoration: underline; }
.section-head p.more { margin-top: 28px; font-size: 1rem; color: var(--text); flex-direction: column; gap: 0; }

/* Check marks and chevrons use physical borders on purpose: they are not mirrored in right-to-left layouts. */

/* ---------- Device frames (CSS only) ---------- */

/* iPhone: screenshot 1320 x 2868, 3.2 % bezel. The bezel is the image margin (a percentage of the frame width, since
   the frame has no padding); the radii keep the corners circular at any width. */
.device {
  position: relative; width: 100%;
  border-radius: 16.3% / 7.77%;
  background: var(--device);
  box-shadow: inset 0 0 0 1.5px var(--device-rim);
}
.device img { width: 93.6%; margin: 3.2%; border-radius: 14% / 6.44%; background: #f2f2f7; }
.device::before, .device::after {
  content: ""; position: absolute; width: 1.1%; border-radius: 2px; background: var(--device-button);
}
.device::before { left: -1%; top: 17%; height: 9%; }
.device::after { right: -1%; top: 23%; height: 12%; }

/* Apple Watch: screenshot 422 x 514 */
.watch {
  position: relative; width: 100%;
  border-radius: 27% / 23%;
  background: #000;
  box-shadow: inset 0 0 0 1.5px var(--device-rim), inset 0 0 0 6px #111;
}
.watch img { width: 84%; margin: 8%; border-radius: 19% / 16%; background: #000; }
.watch::after {
  content: ""; position: absolute; right: -3.4%; top: 24%; width: 4.2%; height: 15%;
  border-radius: 3px; background: var(--device-button);
}

/* ---------- Hero ---------- */

.hero { padding: clamp(32px, 4.5vw, 60px) 0 clamp(24px, 3vw, 40px); overflow: clip; }
.hero-copy { max-width: 62rem; margin: 0 auto; text-align: center; }

.app-mark { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--text-2); font-weight: 600; font-size: 0.9375rem; }
.app-icon { width: 52px; height: 52px; border-radius: 23%; box-shadow: 0 0 0 1px var(--icon-ring); flex: none; }

.hero h1 {
  margin-top: 24px;
  font-size: clamp(2.625rem, 1.1rem + 5.6vw, 5.25rem);
  line-height: 0.98; letter-spacing: -0.05em; font-weight: 700;
  text-wrap: balance;
}
.hero h1 span { display: block; }
@media (max-width: 479px) { .hero h1 { letter-spacing: -0.04em; line-height: 1.02; } }
.lede {
  margin: 22px auto 0; max-width: 38rem; color: var(--text-2);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem); line-height: 1.5; text-wrap: pretty;
}
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 36px; }
.hero .hero-cta { justify-content: center; margin-top: 30px; }
.hero-note { font-size: 0.9375rem; color: var(--text-3); max-width: 17rem; line-height: 1.45; text-align: start; }
@media (max-width: 559px) { .hero .hero-note { text-align: center; max-width: 22rem; } }

/* Photo stage: one black-and-white photograph with real screenshots in front of it. */
.hero-stage { position: relative; margin: clamp(40px, 5vw, 64px) auto 0; max-width: 420px; aspect-ratio: 1 / 1.87; }
.hero-photo { display: block; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 5; background: #3a3a3a; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Offsets in % of the stage width (margin-top), so the layout scales without media-query steps. */
.hero-stage .device { position: absolute; width: 52%; left: 24%; top: 0; margin-top: 78%; }
.hero-stage .device-b { display: none; }
@media (min-width: 720px) {
  .hero-stage { max-width: none; aspect-ratio: 1 / 0.6325; }
  .hero-photo { aspect-ratio: 16 / 9; }
  .hero-stage .device { width: 22%; margin-top: 17%; }
  .hero-stage .device-a { left: 5%; }
  .hero-stage .device-b { display: block; left: auto; right: 5%; }
}

.at-a-glance {
  list-style: none; padding: 0; margin: clamp(40px, 5vw, 64px) auto 0; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 28px; font-size: 0.9375rem; color: var(--text-2);
}
.at-a-glance li { display: inline-flex; align-items: center; gap: 9px; }
.at-a-glance li::before {
  content: ""; width: 10px; height: 6px; border-left: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor;
  transform: translateY(-2px) rotate(-45deg); flex: none;
}

/* ---------- How it works ---------- */

.how { list-style: none; margin: 0; padding: 0; display: grid; gap: 56px 32px; counter-reset: how; }
@media (min-width: 640px) { .how { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 20px; } }
@media (min-width: 1040px) { .how { gap: 56px 32px; } }
@media (max-width: 639px) { .how .shot { max-width: 480px; } }
.how li { counter-increment: how; }
.how .shot {
  border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-2);
  box-shadow: 0 0 0 1px var(--line);
}
.how .shot img { width: 100%; }
.how h3 { margin-top: 28px; font-size: 1.375rem; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 12px; }
.how h3::before {
  content: counter(how); flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: 0.9375rem; font-weight: 600;
  font-variant-numeric: tabular-nums; transform: translateY(-3px); letter-spacing: 0;
}
.how p { margin-top: 10px; color: var(--text-2); }

/* ---------- Features (bento) ---------- */

.bento { display: grid; gap: 16px; }
@media (min-width: 720px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tile {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-2); border-radius: var(--radius-xl); padding: clamp(26px, 3vw, 36px);
}
.tile h3 { font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem); letter-spacing: -0.025em; line-height: 1.15; }
.tile p { margin-top: 12px; color: var(--text-2); }
.tier {
  display: block; width: fit-content; margin: 0 0 14px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--text-2); font-size: 0.8125rem; font-weight: 600; line-height: 1.4;
}
.tile .tier { margin-top: 0; }
.tile-phone { padding-bottom: 0; }
.peek { position: relative; margin-top: 32px; aspect-ratio: 1 / 0.92; overflow: hidden; display: flex; justify-content: center; }
.peek .device { width: 72%; max-width: 300px; flex: none; align-self: flex-start; }
.peek.peek-end { align-items: flex-end; }
.peek.peek-end .device { align-self: flex-end; }
/* Flipped tile: the phone hangs from the top edge and shows the bottom of the screen. */
.tile-flip { padding-top: 0; padding-bottom: clamp(26px, 3vw, 36px); }
.tile-flip .peek { order: -1; margin: 0 0 32px; }
/* Two-column bento: the third phone tile spans the row, text on one side and the phone on the other. */
@media (min-width: 720px) and (max-width: 1039px) {
  .tile-phone:nth-child(3) {
    grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr; column-gap: 32px;
  }
  .tile-phone:nth-child(3) > :not(.peek) { grid-column: 1; }
  .tile-phone:nth-child(3) .peek { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; aspect-ratio: 1 / 0.8; }
}

.feature-list { display: grid; gap: 48px; margin-top: clamp(56px, 7vw, 96px); }
@media (min-width: 820px) { .feature-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; } }
.feature-list article { position: relative; padding-top: 24px; }
/* The top rule is a pseudo-element so the motion layer can draw it across. */
.feature-list article::before {
  content: ""; position: absolute; top: 0; inset-inline: 0; height: 1px; background: var(--ink);
  transform-origin: left center;
}
[dir="rtl"] .feature-list article::before { transform-origin: right center; }
.feature-list h3 { font-size: 1.375rem; letter-spacing: -0.02em; padding-inline-end: 56px; }
.feature-list p { margin-top: 10px; color: var(--text-2); }
.feature-list .tier { position: absolute; top: 24px; inset-inline-end: 0; margin: 0; }

.portions { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.portions li {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line); font-size: 0.9375rem; color: var(--text);
  font-variant-numeric: tabular-nums;
}

.tile-wide { grid-column: 1 / -1; display: grid; gap: 32px; align-items: center; }
@media (min-width: 820px) { .tile-wide { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); padding: 48px; } }
.watches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 3vw, 32px); align-items: center; padding: 8px 4px; }
.watches .watch { max-width: 190px; justify-self: center; }

/* ---------- Privacy band ---------- */

.band {
  background: var(--band); color: var(--band-text); padding: var(--section) 0;
  border-block: 1px solid var(--band-line);
}
.band .kicker { color: var(--band-text-2); }
.band .section-head p:not(.kicker) { color: var(--band-text-2); }
.band .section-head p.statement {
  margin-top: 22px; max-width: 36rem; color: var(--band-text); font-weight: 600;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.375rem); line-height: 1.22; letter-spacing: -0.025em; text-wrap: balance;
}
.band :focus-visible { outline-color: var(--band-text); }
.points { display: grid; gap: 0 48px; border-top: 1px solid var(--band-line); }
@media (min-width: 760px) { .points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.points > div { padding: 28px 0; border-bottom: 1px solid var(--band-line); }
.points h3 { font-size: 1.1875rem; letter-spacing: -0.015em; }
.points p { margin-top: 8px; color: var(--band-text-2); }
.band .more a { color: var(--band-text); }

/* ---------- Pricing ---------- */

.plans { display: grid; gap: 16px; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan {
  display: flex; flex-direction: column; padding: 32px 28px 28px; border-radius: var(--radius-xl);
  background: var(--card); border: 1px solid var(--line);
}
.plan.featured { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.plan h3 { font-size: 1.5rem; letter-spacing: -0.025em; }
.plan .for { color: var(--text-3); font-size: 0.9375rem; margin-top: 6px; }
.price { margin-top: 24px; border-top: 1px solid var(--line); }
.price-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.price-line b { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; white-space: nowrap; line-height: 1.1; }
.price-line span { color: var(--text-3); font-size: 0.875rem; text-align: end; line-height: 1.35; }
.plan ul { list-style: none; padding: 0; margin: 22px 0 0; }
.plan li { position: relative; padding: 7px 0; padding-inline-start: 26px; font-size: 0.9375rem; line-height: 1.45; }
.plan li::before {
  content: ""; position: absolute; inset-inline-start: 2px; top: 13px; width: 11px; height: 6px;
  border-left: 1.75px solid var(--text); border-bottom: 1.75px solid var(--text); transform: rotate(-45deg);
}
.fineprint { margin-top: 32px; color: var(--text-3); font-size: 0.875rem; max-width: 52rem; }
.fineprint ul { padding-inline-start: 1.1em; margin: 0; }
.fineprint li + li { margin-top: 6px; }

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

.faq-grid { display: grid; gap: 40px 64px; }
@media (min-width: 960px) {
  .faq-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); align-items: start; }
  .faq-grid .section-head { position: sticky; top: calc(var(--header-h) + 32px); margin-bottom: 0; }
}
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  min-height: 64px; padding: 18px 0; font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-inline-end: 6px;
  border-right: 1.75px solid var(--text-3); border-bottom: 1.75px solid var(--text-3);
  transform: translateY(-3px) rotate(45deg);
}
.faq details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.faq summary:hover::after { border-color: var(--text); }
.faq .answer { padding: 0 0 24px; color: var(--text-2); max-width: 40rem; }
.faq .answer p + p, .faq .answer p + ul, .faq .answer ul + p { margin-top: 10px; }
.faq .answer ul, .faq .answer ol { margin: 10px 0 0; padding-inline-start: 1.2em; }

/* ---------- Closing call to action ---------- */

.closing { padding: var(--section) 0; text-align: center; border-top: 1px solid var(--line); }
.closing .app-icon { width: 88px; height: 88px; margin: 0 auto; }
.closing h2 { margin-top: 28px; font-size: clamp(2.125rem, 1.4rem + 3.2vw, 3.75rem); letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
.closing p { margin: 16px auto 0; max-width: 32rem; color: var(--text-2); font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); }
.closing .hero-cta { justify-content: center; margin-top: 32px; }

/* ---------- Documents (legal, support) ---------- */

.page { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(80px, 10vw, 128px); }
.doc { max-width: var(--read); margin-inline: auto; }
.doc h1 { font-size: clamp(2.375rem, 1.6rem + 3.4vw, 4rem); letter-spacing: -0.04em; line-height: 1.02; text-wrap: balance; }
.doc .meta { color: var(--text-3); margin-top: 16px; font-size: 0.9375rem; }
.doc .intro { font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem); line-height: 1.5; color: var(--text-2); margin-top: 22px; text-wrap: pretty; }
.doc h2 {
  font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem); letter-spacing: -0.025em; line-height: 1.18;
  margin-top: 72px; scroll-margin-top: calc(var(--header-h) + 20px);
}
.doc h3 { font-size: 1.1875rem; letter-spacing: -0.015em; margin-top: 36px; }
.doc p, .doc ul, .doc ol, .doc dl { margin-top: 16px; }
.doc ul, .doc ol { padding-inline-start: 1.3em; }
.doc li + li { margin-top: 8px; }
.doc li > ul, .doc li > ol { margin-top: 8px; }
.doc li::marker { color: var(--text-3); }
.doc .muted { color: var(--text-2); }
.doc code { font: 0.88em var(--mono); background: var(--bg-2); padding: 2px 6px; border-radius: 6px; }
.doc a { text-decoration-color: var(--line-2); }
.doc a:hover { text-decoration-color: currentColor; }

.card { background: var(--bg-2); border-radius: var(--radius-lg); padding: 24px; }
.doc .card > :first-child { margin-top: 0; }
.doc .card > :last-child { margin-bottom: 0; }

.summary-box { margin-top: 40px; padding: 28px; }
.doc .summary-box h2 { margin: 0; font-size: 1.1875rem; letter-spacing: -0.015em; }
.summary-box ul { margin-top: 14px; }

.toc { margin-top: 40px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.doc .toc h2 { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--text-3); letter-spacing: 0.04em; text-transform: uppercase; }
.doc .toc ol { margin-top: 10px; padding-inline-start: 1.5em; columns: 1; }
@media (min-width: 720px) { .doc .toc ol { columns: 2; column-gap: 40px; } }
.doc .toc li { break-inside: avoid; margin: 0; padding: 5px 0; font-size: 0.9375rem; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

.facts { margin-top: 20px; border-top: 1px solid var(--line); }
.facts > div { padding: 16px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-weight: 600; }
.facts dd { margin: 4px 0 0; color: var(--text-2); }
@media (min-width: 720px) {
  .facts > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 24px; }
  .facts dd { margin: 0; }
}

.doc .steps { counter-reset: step; list-style: none; padding-inline-start: 0; }
.steps li { counter-increment: step; position: relative; padding-inline-start: 44px; min-height: 30px; }
.doc .steps li + li { margin-top: 14px; }
.steps li::before {
  content: counter(step); position: absolute; inset-inline-start: 0; top: -1px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink); color: var(--on-ink); display: grid; place-items: center; font-size: 0.875rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.path { font-weight: 600; }

.contact-card { margin-top: 40px; padding: 28px; }
.contact-card .btn { margin-top: 20px; }
.doc .faq { margin-top: 24px; }
.doc .faq summary { font-size: 1.0625rem; min-height: 60px; }

.consent { margin-top: 28px; }
.consent h3 { margin-top: 0; }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--line); padding: 56px 0 40px; font-size: 0.9375rem; background: var(--bg); }
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 820px) { .footer-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: start; } }
.footer-tag { color: var(--text-2); margin-top: 8px; max-width: 24rem; }
.footer-tag a { color: var(--text); }
.footer-nav {
  display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0 40px; margin: -10px 0;
}
@media (min-width: 560px) { .footer-nav { grid-template-columns: repeat(3, max-content); } }
@media (min-width: 820px) { .footer-nav { grid-auto-flow: column; grid-template-rows: repeat(3, auto); grid-template-columns: none; gap: 0 56px; } }
.footer-nav a {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: none;
}
.footer-nav a:hover { color: var(--text); text-decoration: underline; }
.footer-nav a[aria-current="page"] { color: var(--text); font-weight: 600; }
.footer-fine {
  grid-column: 1 / -1; color: var(--text-3); font-size: 0.8125rem; line-height: 1.5;
  border-top: 1px solid var(--line); padding-top: 24px;
}
.footer-fine p + p { margin-top: 6px; }
.footer-fine a { color: inherit; }

/* ---------- 404 ---------- */

.notfound { padding-top: clamp(72px, 12vw, 160px); padding-bottom: clamp(72px, 12vw, 160px); max-width: 46rem; }
.notfound .code { font-size: 0.9375rem; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.notfound h1 { margin-top: 12px; font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem); letter-spacing: -0.045em; line-height: 1; }
.notfound p { color: var(--text-2); margin-top: 16px; font-size: 1.1875rem; }
.notfound .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.notfound .notfound-tr { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); letter-spacing: -0.035em; margin-top: 80px; padding-top: 40px; border-top: 1px solid var(--line); }

/* ---------- Small screens ---------- */

@media (max-width: 479px) {
  .hero-cta { gap: 14px; }
  .hero-note { max-width: none; }
  .tile { border-radius: 24px; }
  .peek .device { width: 76%; }
  .plan { padding: 28px 22px 22px; }
  .card, .summary-box, .contact-card { padding: 22px; }
  .toc { padding: 18px 20px; }
}

/* ---------- Motion ----------
   CSS only (the CSP allows no scripts), and only with prefers-reduced-motion: no-preference.
   1. Load: the home hero builds up once: headline lines rise out of a mask, the photo opens, the phones slide in and
      one scan line passes over the live-scan screen twice, then stops.
   2. Scroll: scroll-driven animations (Safari 26+, Chrome 115+) behind @supports; other browsers show the static page,
      so nothing is ever hidden. Scenes:
      - hero: the headline sinks behind the photo, the photo opens to the full window width, the phones fan out;
      - how it works: the three steps become sticky cards that stack, earlier cards step back;
      - features: tiles grow into place and their phones float up through them as you pass;
      - privacy: the dark band opens to full width and its statement fills in as you read;
      - pricing: the plans fan in; closing: the app icon grows in; a reading line runs under the header;
      - everything else rises into place.
   3. Hover and navigation: small lifts, FAQ answers open smoothly, pages cross-fade (view transitions).
   No bounce and nothing loops (DESIGN.md).
   Property split, so animations never fight each other: scroll entrances and drifts use `translate` / `scale` /
   `rotate`, load entrances of the phones and photo, the stacking cards and every hover use `transform`. No inline
   styles, so staggering is done with :nth-child. Scroll ranges are px from `entry` where an element can sit near the
   page bottom, so it always finishes. */

:root {
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* The scan line exists only while it animates. */
.scan { display: none; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* Fanning cards and sliding chips never cause a sideways scroll (clip keeps sticky working, unlike hidden). */
  main { overflow-x: clip; }

  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; }

  /* --- Keyframes --- */
  @keyframes rise { from { opacity: 0; translate: 0 40px; } }
  @keyframes rise-far { from { opacity: 0; translate: 0 96px; } }
  @keyframes chip-in { from { opacity: 0; translate: 28px 0; } }
  @keyframes line-up { from { translate: 0 112%; } }
  @keyframes phone-in { from { opacity: 0; transform: translateY(80px); } }
  @keyframes photo-open {
    from { clip-path: inset(6% 5% round 48px); }
    to { clip-path: inset(0 round var(--radius-xl)); }
  }
  @keyframes photo-in { from { opacity: 0; scale: 0.94; } }
  @keyframes settle { from { transform: scale(1.16); } }
  @keyframes scan {
    0% { top: 13%; opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { top: 58%; opacity: 0; }
  }
  @keyframes ring-draw { from { stroke-dashoffset: 56; } }
  @keyframes pop { from { opacity: 0; transform: scale(0); } }
  @keyframes fade { from { opacity: 0; } }
  @keyframes draw-x { from { scale: 0 1; } }
  @keyframes zoom-in { from { scale: 1.12; } }
  @keyframes icon-in { from { opacity: 0; scale: 0.4; } }
  @keyframes header-line { from { border-bottom-color: transparent; } }
  @keyframes progress { from { scale: 0 1; } }
  @keyframes copy-out { to { opacity: 0; scale: 0.92; translate: 0 18vh; } }
  @keyframes bleed {
    from { clip-path: inset(0 0 round var(--radius-xl)); }
    to { clip-path: inset(0 var(--bleed) round 0); }
  }
  @keyframes drift-photo { to { scale: 1.08; } }
  @keyframes fan-a { to { translate: -12% -80px; rotate: -6deg; } }
  @keyframes fan-b { to { translate: 12% -170px; rotate: 6deg; } }
  @keyframes stack-back { to { transform: scale(0.88); } }
  @keyframes tile-in { from { opacity: 0; translate: 0 80px; scale: 0.92; } }
  @keyframes float-up { 0% { translate: 0 34%; } 55% { translate: 0 0; } 100% { translate: 0 -10%; } }
  @keyframes float-down { 0% { translate: 0 -34%; } 55% { translate: 0 0; } 100% { translate: 0 10%; } }
  @keyframes band-open {
    from { clip-path: inset(0 max(12px, calc(50% - 600px)) round 40px); }
    to { clip-path: inset(0 0 round 0); }
  }
  @keyframes fill-text { to { background-size: 100% 100%, 100% 100%; } }
  @keyframes plan-up { from { opacity: 0; translate: 0 160px; } }
  @keyframes fan-in-l { from { opacity: 0; translate: 0 120px; rotate: -5deg; } }
  @keyframes fan-in-r { from { opacity: 0; translate: 0 120px; rotate: 5deg; } }

  /* --- 1. Home hero, on load --- */
  .hero .app-mark { animation: rise 0.9s var(--ease) backwards; }
  .hero h1 > span { overflow: clip; padding-block: 0.08em 0.14em; margin-block: -0.08em -0.14em; }
  .hero h1 > span > span { display: inline-block; animation: line-up 1.1s var(--ease) 0.1s backwards; }
  .hero h1 > span:nth-child(2) > span { animation-delay: 0.2s; }
  .hero h1 > span:nth-child(3) > span { animation-delay: 0.3s; }
  .hero .lede { animation: rise 1s var(--ease) 0.45s backwards; }
  .hero .hero-cta { animation: rise 1s var(--ease) 0.55s backwards; }
  .hero-photo { animation: photo-open 1.5s var(--ease) 0.35s backwards; }
  .hero-photo img { animation: settle 2.2s var(--ease) 0.35s backwards; }
  .hero-stage .device-a { animation: phone-in 1.3s var(--ease) 0.75s backwards; }
  .hero-stage .device-b { animation: phone-in 1.3s var(--ease) 0.9s backwards; }
  /* One white line in difference mode: dark over the white plate, light over the food, never a color. */
  .hero-stage .scan {
    display: block; position: absolute; left: 3.2%; right: 3.2%; height: 2px; border-radius: 1px;
    background: #fff; mix-blend-mode: difference; pointer-events: none;
    opacity: 0; animation: scan 2.4s var(--ease-in-out) 1.9s 2 both;
  }

  /* Logo: on the home page the ring draws itself, then the red dot lands. */
  body:has(.hero) .site-header .wordmark path:nth-of-type(1) { animation: fade 0.8s ease 0.6s backwards; }
  body:has(.hero) .site-header .wordmark path:nth-of-type(2) {
    stroke-dasharray: 56; animation: ring-draw 1.2s var(--ease-in-out) 0.1s backwards;
  }
  body:has(.hero) .site-header .wordmark circle {
    transform-box: fill-box; transform-origin: center; animation: pop 0.6s var(--ease) 1.15s backwards;
  }

  /* --- 3. Hover, focus, disclosure --- */
  .btn, .store-badge, .nav-cta { transition: opacity 0.15s ease, transform 0.4s var(--ease); }
  .btn:hover, .store-badge:hover { transform: translateY(-2px); }
  .faq summary::after { transition: transform 0.3s var(--ease); }
  .tile .peek .device, .watches .watch { transition: transform 0.7s var(--ease); }
  .tile:hover .peek .device { transform: translateY(-10px); }
  .tile-flip:hover .peek .device { transform: translateY(10px); }
  .tile-wide:hover .watch { transform: translateY(-6px); }
  .tile-wide:hover .watch:nth-child(2) { transform: translateY(-12px); }
  .plan { transition: border-color 0.3s ease, transform 0.6s var(--ease); }
  .plan:hover { border-color: var(--line-2); transform: translateY(-4px); }
  .portions li { transition: border-color 0.2s ease; }
  .portions li:hover { border-color: var(--ink); }
  .how .shot img { transition: transform 0.9s var(--ease); }
  .how li:hover .shot img { transform: scale(1.03); }

  @supports (interpolate-size: allow-keywords) {
    .faq details { interpolate-size: allow-keywords; }
    .faq details::details-content {
      block-size: 0; overflow: clip;
      transition: block-size 0.45s var(--ease), content-visibility 0.45s allow-discrete;
    }
    .faq details[open]::details-content { block-size: auto; }
  }

  /* --- 2. Scroll --- */
  @supports (animation-timeline: scroll()) {
    /* Header: the hairline appears once the page moves, and a reading line fills as you go down. */
    .site-header { animation: header-line linear both; animation-timeline: scroll(root); animation-range: 0 64px; }
    .site-header::after {
      content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--ink);
      transform-origin: left center; animation: progress linear both; animation-timeline: scroll(root);
    }
    [dir="rtl"] .site-header::after { transform-origin: right center; }

    /* Hero, while you scroll away from it: the headline sinks behind the photo, the photo opens to the window width
       (the image is laid out wider than its frame and the frame's clip grows), the phones fan out. The load
       entrance stays first in each animation list. */
    .hero-copy { animation: copy-out linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
    .hero-photo {
      --bleed: calc(50% - min(50vw, 900px));
      overflow: visible; border-radius: 0;
      animation: photo-in 1.4s var(--ease) 0.35s backwards, bleed linear both;
      animation-timeline: auto, scroll(root); animation-range: normal, 0 70vh;
    }
    .hero-photo img {
      width: min(100vw, 1800px); max-width: none; margin-inline-start: calc(50% - min(50vw, 900px));
      animation: settle 2.2s var(--ease) 0.35s backwards, drift-photo linear both;
      animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh;
    }
    .hero-stage .device-a {
      animation: phone-in 1.3s var(--ease) 0.75s backwards, fan-a linear both;
      animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh;
    }
    .hero-stage .device-b {
      animation: phone-in 1.3s var(--ease) 0.9s backwards, fan-b linear both;
      animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh;
    }
  }

  @supports (animation-timeline: view()) {
    /* Everything that rises into place. */
    .at-a-glance li,
    .section .section-head > *,
    .band .section-head > *,
    .how li,
    .tile,
    .feature-list article,
    .portions li,
    .points > div,
    .band .more,
    .plan,
    .fineprint,
    .faq details,
    .closing .wrap > *,
    .post-card {
      animation: rise ease-out both;
      animation-timeline: view();
      animation-range: entry 0% entry 220px;
    }
    /* Stagger: later siblings start a little later on the same scroll. */
    .section-head > :nth-child(2), .how li:nth-child(2), .tile:nth-child(2), .plan:nth-child(2),
    .feature-list article:nth-child(2), .points > div:nth-child(2n), .at-a-glance li:nth-child(2),
    .portions li:nth-child(2), .faq details:nth-child(2), .closing .wrap > :nth-child(2) {
      animation-range: entry 40px entry 260px;
    }
    .section-head > :nth-child(3), .how li:nth-child(3), .tile:nth-child(3), .plan:nth-child(3),
    .feature-list article:nth-child(3), .at-a-glance li:nth-child(3), .portions li:nth-child(3),
    .faq details:nth-child(3), .closing .wrap > :nth-child(3) {
      animation-range: entry 80px entry 300px;
    }
    .section-head > :nth-child(4), .at-a-glance li:nth-child(4), .portions li:nth-child(4),
    .closing .wrap > :nth-child(4) {
      animation-range: entry 120px entry 340px;
    }
    .portions li:nth-child(5) { animation-range: entry 160px entry 380px; }

    /* Headings travel further than body text. */
    .section-head h2, .closing h2 { animation-name: rise-far; }
    .portions li { animation-name: chip-in; }

    /* How it works: screenshots settle inside their frames. */
    .how li { view-timeline: --step block; }
    .how .shot img { animation: zoom-in ease-out both; animation-timeline: --step; animation-range: entry 0% cover 45%; }

    /* How it works on screens tall enough: the steps are sticky cards that stack up; each earlier card steps back
       while the next ones arrive. Ranges are on the list's timeline (--how): card 2 lands near 27 %, card 3 near
       60 % of exit-crossing for any card height, because the cards are about the same size. */
    @media (min-height: 640px) {
      .how { grid-template-columns: none; gap: 24px; padding-bottom: 10vh; view-timeline: --how block; }
      .how li {
        position: sticky; top: calc(var(--header-h) + 24px);
        display: grid; gap: 0 clamp(24px, 4vw, 64px); align-content: center;
        padding: clamp(16px, 2.4vw, 32px); border-radius: var(--radius-xl);
        background: var(--bg-2); box-shadow: 0 0 0 1px var(--line);
        transform-origin: 50% 0;
        animation: stack-back linear both; animation-timeline: --how;
        animation-range: exit-crossing 0% exit-crossing 60%;
      }
      .how li:nth-child(2) { top: calc(var(--header-h) + 40px); animation-range: exit-crossing 27% exit-crossing 60%; }
      .how li:nth-child(3) { top: calc(var(--header-h) + 56px); animation: none; }
      .how h3 { margin-top: 22px; }
      @media (min-width: 820px) {
        .how li {
          grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: 1fr auto auto 1fr;
          padding: 32px 32px 32px clamp(32px, 4vw, 56px);
        }
        .how li > .shot { grid-column: 2; grid-row: 1 / -1; }
        .how li > h3 { grid-column: 1; grid-row: 2; margin-top: 0; font-size: clamp(1.75rem, 1.2rem + 1.2vw, 2.5rem); letter-spacing: -0.03em; }
        .how li > p { grid-column: 1; grid-row: 3; margin-top: 14px; font-size: 1.1875rem; max-width: 26rem; }
      }
    }

    /* Features: tiles grow into place; their phones float up through the tile for as long as it is on screen. */
    .tile { animation-name: tile-in; animation-range: entry 0% entry 320px; view-timeline: --tile block; }
    .tile:nth-child(2) { animation-range: entry 60px entry 380px; }
    .tile:nth-child(3) { animation-range: entry 120px entry 440px; }
    .peek .device { animation: float-up linear both; animation-timeline: --tile; }
    .tile-flip .peek .device { animation-name: float-down; }
    .watches .watch { animation: rise ease-out both; animation-timeline: --tile; animation-range: entry 20% cover 50%; }
    .watches .watch:nth-child(2) { animation-range: entry 30% cover 56%; }
    .watches .watch:nth-child(3) { animation-range: entry 40% cover 62%; }

    /* Feature rules draw across, then the text follows. */
    .feature-list article { view-timeline: --feature block; }
    .feature-list article::before { animation: draw-x ease-out both; animation-timeline: --feature; animation-range: entry 0% entry 260px; }

    /* Privacy: the band opens from a card to the full width; the statement fills in from dim to bright, line by
       line (one solid fill grows across the inline text, clipped to the letters). */
    .band { animation: band-open linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    @supports ((background-clip: text) or (-webkit-background-clip: text)) {
      .statement { view-timeline: --statement block; }
      .statement span {
        color: transparent;
        background-image: linear-gradient(var(--band-text), var(--band-text)), linear-gradient(#4a4a4e, #4a4a4e);
        background-repeat: no-repeat; background-size: 0% 100%, 100% 100%;
        -webkit-background-clip: text; background-clip: text;
        -webkit-box-decoration-break: slice; box-decoration-break: slice;
        animation: fill-text linear both; animation-timeline: --statement; animation-range: cover 18% cover 52%;
      }
    }

    /* Pricing: the middle plan comes up first, the outer ones swing in beside it. */
    .plan { animation-name: plan-up; animation-range: entry 0% entry 360px; }
    @media (min-width: 900px) {
      .plan:nth-child(1) { animation-name: fan-in-l; transform-origin: 100% 100%; animation-range: entry 60px entry 420px; }
      .plan:nth-child(2) { animation-range: entry 0% entry 360px; }
      .plan:nth-child(3) { animation-name: fan-in-r; transform-origin: 0 100%; animation-range: entry 60px entry 420px; }
    }

    .closing .app-icon { animation-name: icon-in; animation-range: entry 0% entry 320px; }
  }
}

/* ---------- Print ---------- */

@media print {
  .site-header, .site-footer, .skip, .toc, .nav-cta { display: none; }
  .site-header { position: static; }
  body { background: #fff; color: #000; }
  .band { background: #fff; color: #000; }
}