/* ============================================================
   Pear Health — cinematic intro styles
   Intro (hero · evidence · statement) lives in #cinemaTrack:
   three red #64251d scenes with cream #f4f3e8 text, then a
   light #lead on the page field. Default CSS keeps all scenes
   in normal document flow, fully readable without JS. JS adds
   .cinema-ready (550vh track, sticky 100svh stage) or
   .cinema-reduced (natural flow).
   Lower sections (decode → footer) keep the page rhythm.
   Display type: Avant Garde Bold · tracking -0.055em · lh 0.95.
   ============================================================ */

/* --- Fonts: local files (Avant Garde bold is the only weight) --- */
@font-face {
  font-family: "Newsreader";
  src: url("vendor/fonts/newsreader-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("vendor/fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TeX Gyre Adventor";
  src: url("vendor/fonts/texgyreadventor-bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens --- */
:root {
  --page: #f2f4f6;      /* bg-page / text-inverse */
  --surface: #ffffff;   /* bg-surface */
  --forest: #173c32;    /* bg-brand / border-brand / text-brand */
  --ink: #14161a;       /* text-primary */
  --ink-2: #545a63;     /* text-secondary */
  --dark: #15100e;      /* bg-dark legacy field */
  --pale: #e2ebe8;      /* bg-pale */
  --cinema-black: #090c0b;   /* legacy dark field */
  --intro-red: var(--forest);      /* hero · evidence · statement field · brand ink green */
  --cream: #f4f3e8;          /* intro scene text */
  --bar-1: #6b2a1d;
  --bar-2: #8e3824;
  --bar-3: #b4442a;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --display: "TeX Gyre Adventor", "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Display scale — Avant Garde bold; vw caps ease with vh so every
     scene fits a 100svh stage without a height kill-switch */
  --d-hero: clamp(70px, min(12vw, 24vh), 178px);
  --d-lead: clamp(44px, min(10.5vw, 20vh), 148px);
  --d-evidence: clamp(34px, min(6.5vw, 13vh), 104px);
  --d-stat: clamp(34px, min(5.5vw, 10vh), 76px);
  --d-80: clamp(40px, 5.56vw, 80px);
  --d-68: clamp(38px, 4.72vw, 68px);
  --d-42: clamp(28px, 2.92vw, 42px);

  /* Primary copy: Inter 500, 20–24px desktop / 16–18px small screens */
  --body-lg: clamp(16px, 0.8vw + 13px, 24px);

  --gutter: clamp(20px, 6.67vw, 96px);   /* 96px side margin at 1440 */
}

/* --- Base --- */
html:lang(zh) {
  --sans: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --display: "TeX Gyre Adventor", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --serif: "Newsreader", "PingFang SC", "Hiragino Sans GB", Georgia, serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--bar-3); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--pale); color: var(--forest); }

/* Full-bleed field backgrounds; content column kept to 1248px */
.stage {
  max-width: none; margin-inline: auto;
  padding-inline: max(var(--gutter), calc((100vw - 1248px) / 2));
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  padding: 10px 18px; border-radius: 999px; background: var(--forest);
  color: var(--page); font: 500 14px/1 var(--sans); text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

/* Display voice — one shared rule so every large heading and large
   number uses the bold display cut with the same tracking and lift */
.hero-row, .evidence-word, .evidence-phrase, .statement-title, .lead-title,
.pricing-title, .stat-value, .pricing-price {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.95;
}

/* --- CTAs (component 85:10 · pill, 24/16 padding, 999 radius) --- */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 24px; border-radius: 999px;
  font: 500 16px/22px var(--sans); letter-spacing: 0.01em;
  min-height: 54px; text-decoration: none; white-space: nowrap;
  transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
.cta:active { transform: translateY(1px); }
.cta--primary, .cta--upload { background: var(--forest); color: var(--page); }
.cta--upload { background: var(--bar-1); }               /* 95:22 uses data-bar-1 */
.cta--inverse { background: var(--page); color: var(--forest); }
.cta--secondary { border: 1px solid var(--forest); color: var(--forest); }
.cta--primary:hover, .cta--upload:hover { background: #1f4b3e; }
.cta--upload:hover { background: #7d3323; }
.cta--inverse:hover { background: #ffffff; }
.cta--secondary:hover { background: rgba(23, 60, 50, 0.08); }

/* ============================================================
   Header 86:1 — fixed full-width bar. Wordmark left, plain
   frameless nav centered, Login right. Light text over the dark
   intro by default; dark text once JS adds .is-light-surface.
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  min-height: 72px; padding: 8px clamp(20px, 3.33vw, 48px);
  color: var(--cream);
  transition: color 0.2s ease;
}
.site-header.is-light-surface { color: var(--forest); }
.wordmark { font: 500 30px/36px var(--serif); color: inherit; text-decoration: none; }
.site-nav {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; gap: 20px;
}
.nav-link {
  font: 500 14px/20px var(--sans); color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
  transition: opacity 0.18s ease;
}
.nav-link--muted { opacity: 0.66; }
.nav-link--muted:hover { opacity: 1; }
.nav-dots { display: inline-flex; align-items: center; gap: 10px; }
.nav-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 44px; text-decoration: none;
}
/* Dot assets are fixed-color SVGs (forest active / pale idle) —
   recolor for whichever surface the bar currently sits on */
.nav-dot img { filter: brightness(0) invert(0.955); }        /* cream on black */
.nav-dot img[src*="imgProgressDot2"] { opacity: 0.5; }       /* idle dimmed */
.site-header.is-light-surface .nav-dot img { filter: brightness(0); }  /* ink on light */
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.header-login {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 24px; border-radius: 999px;
  border: 1px solid currentColor;
  font: 500 15px/20px var(--sans); color: inherit;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.site-header:not(.is-light-surface) .header-login:hover { background: var(--cream); color: var(--cinema-black); }
.site-header.is-light-surface .header-login:hover { background: var(--forest); color: var(--page); }
/* Language pill — compact and unframed, carried in .header-actions next to
   Login. Color inherits whichever surface the bar sits on (cream over the
   red intro, forest on light); active anchor holds full weight, the rest
   dim until hover/focus. Anchors keep 44px targets. */
.language-switch {
  display: inline-flex; align-items: center; height: 44px;
  font: 500 14px/20px var(--sans); color: inherit;
}
.language-switch a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 4px;
  color: inherit; text-decoration: none; opacity: 0.8;
  transition: opacity 0.18s ease;
}
.language-switch a:hover { opacity: 1; }
.language-switch a[aria-current="page"] { opacity: 1; font-weight: 700; }
.language-switch span { opacity: 0.55; }
.menu-toggle {
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; width: 44px; height: 44px; border-radius: 8px; color: inherit;
}
.menu-line {
  width: 20px; height: 2px; border-radius: 1px; background: currentColor;
  transition: transform 0.18s ease;
}
.site-header.menu-open .menu-line:first-child { transform: translateY(3.5px) rotate(45deg); }
.site-header.menu-open .menu-line:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ============================================================
   Scroll cinema — #cinemaTrack (DOM contract with cinema.js).
   Default: plain flow, media layer hidden, nothing overlaps.
   ============================================================ */
.cinema-track { background: var(--intro-red); }
.cinema-media { display: none; }
.cinema-progress { display: none; }

.cinema-panel {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 100svh;
  padding: clamp(96px, 14vh, 168px) var(--gutter) clamp(48px, 8vh, 88px);
  background: var(--intro-red); color: var(--cream);
  text-align: center;
}

/* .cinema-ready (JS): pin one 100svh stage, scenes stack over the
   shared media field. Panel opacity/transform/visibility/inert are
   set inline by JS — CSS only positions. */
.cinema-track.cinema-ready { height: 550vh; }
.cinema-ready .cinema-sticky {
  position: sticky; top: 0; height: 100svh;
  overflow: clip;
}
.cinema-ready .cinema-media {
  display: block; position: absolute; inset: 0; z-index: 0;
  background: var(--intro-red);   /* plain brand ink green until a genuine clip exists */
}
.cinema-media video, .cinema-media canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
#cinemaCanvas { opacity: 0; transition: opacity 0.4s ease; }
.cinema-track.has-frame #cinemaCanvas,
.cinema-media.has-frame #cinemaCanvas { opacity: 1; }
.cinema-scrim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.5);   /* legibility over any future video */
}
.cinema-ready .cinema-panels { position: absolute; inset: 0; z-index: 1; }
.cinema-ready .cinema-panel {
  position: absolute; inset: 0; min-height: 0;
  background: transparent;
  will-change: opacity, transform;
}
.cinema-ready .cinema-progress {
  display: block; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: 2px; background: rgba(244, 243, 232, 0.16);
}
.cinema-progress span {
  display: block; height: 100%; width: 100%;
  background: var(--cream); transform: scaleX(0); transform-origin: left center;
}

/* .cinema-reduced (JS: reduced motion / small screens): the four
   scenes return to natural flow, nothing stays hidden */
.cinema-track.cinema-reduced { height: auto; }
.cinema-reduced .cinema-sticky { position: static; height: auto; overflow: visible; }
.cinema-reduced .cinema-media { display: none; }
.cinema-reduced .cinema-panel {
  position: relative; min-height: 100svh;
  background: var(--intro-red);
}
.cinema-reduced .cinema-progress { display: none; }

/* ============================================================
   Hero 84:4 · scene 0 — black field, cream display centered;
   intro + small scroll CTA settle at the bottom
   ============================================================ */
.hero-display {
  display: flex; flex-direction: column; align-items: center;
  margin-block: auto;   /* centers the display, pushes intro/CTA down */
}
.hero-row {
  font-size: var(--d-hero); color: var(--cream); white-space: nowrap;
}
.not-equal {
  width: clamp(26px, 4vw, 60px); height: auto;
  margin: clamp(10px, 2.2vh, 22px) auto;
  filter: brightness(0) invert(0.955);   /* forest asset recolored to cream */
}
.hero-intro {
  max-width: 36ch; margin: clamp(28px, 5vh, 56px) auto 16px;
  font: 500 16px/1.5 var(--sans);
  color: var(--cream);
}
/* Desktop: the full sentence sits on one line, never below 16px */
@media (min-width: 1000px) {
  .hero-intro { max-width: none; white-space: nowrap; }
}
@media (min-width: 1440px) {
  .hero-intro { font-size: 18px; }
}
.hero-scroll {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding-inline: 8px;
  font: 500 14px/20px var(--sans); letter-spacing: 0.02em;
  color: rgba(244, 243, 232, 0.8); text-decoration: none;
  transition: color 0.18s ease;
}
.hero-scroll:hover { color: var(--cream); }
.hero-arrow { width: 14px; height: auto; transform: rotate(90deg); filter: brightness(0) invert(0.955); }

/* ============================================================
   Evidence 84:5 · scene 1 — compact heading, three unboxed
   metrics: number above one hanging proportional column, the
   caption beneath. The plot reserves the space; the scene may
   run taller than the viewport and is never clipped.
   ============================================================ */
.evidence-title {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; column-gap: clamp(14px, 2vw, 28px); row-gap: 4px;
}
.evidence-word, .evidence-phrase { font-size: var(--d-evidence); color: var(--cream); }
.not-equal--evidence {
  width: clamp(20px, 3vw, 44px); height: auto; margin: 0;
  filter: none;   /* warm mark reads on the dark field as drawn */
}
.stat-field {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(18px, 4vw, 56px);
  width: min(1080px, 100%);
  margin-top: clamp(28px, 5vh, 56px);
}
.stat { display: flex; flex-direction: column; min-width: 0; }
.stat-bar { display: flex; flex-direction: column; align-items: center; }
.stat-value { font-size: var(--d-stat); color: var(--cream); white-space: nowrap; }
/* One hanging column per metric — the only physical element. The plot
   reserves the room (number above, caption below); the column hangs
   from the top edge at its --pct height, no baseline rule, no width
   cap. The full-height rest state ships in CSS — JS only scales it in. */
.stat-plot {
  width: 100%; height: clamp(260px, 36vh, 360px);
  display: flex; align-items: flex-start; justify-content: center;
  margin-top: 16px;
}
.stat-column {
  width: 86%; height: calc(var(--pct) * 1%);
  border-radius: 2px 2px 0 0;
}
.stat-bar--1 .stat-column { background: #cf6b45; }
.stat-bar--2 .stat-column { background: #de8a5f; }
.stat-bar--3 .stat-column { background: #eda87f; }
.stat-caption {
  margin-top: 14px; max-width: 36ch;
  font: 400 14px/1.45 var(--sans); color: rgba(244, 243, 232, 0.75);
}
.evidence-notes { margin-top: clamp(20px, 4vh, 40px); max-width: 620px; }
.evidence-note { font: 500 15px/1.45 var(--sans); color: rgba(244, 243, 232, 0.85); }
/* ≥1100: the full note sentence sits on one line at 15–16px */
@media (min-width: 1100px) {
  .evidence-notes { max-width: none; }
  .evidence-note { max-width: none; white-space: nowrap; font-size: 16px; }
}

/* ============================================================
   Statement 94:56 · scene 2 — full-viewport two-line heading
   (JS pins it briefly), then one continuous large centered
   paragraph in natural flow. No default opacity hiding.
   ============================================================ */
#statement { z-index: 1; padding-block: 0; align-items: stretch; justify-content: flex-start; }
.statement-stage { display: block; width: 100%; }
.statement-heading {
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding-block: clamp(72px, 12vh, 140px);
}
.statement-title {
  max-width: 1100px;
  font-size: clamp(64px, 11.1vw, 160px);
  line-height: 1.02;          /* comfortable gap between the two lines */
  letter-spacing: -0.04em;
  color: var(--cream);
}
.reading-copy {
  max-width: 1100px; margin-inline: auto;
  padding-block: 12vh 22vh;
  text-align: center;
}
.reading-copy p {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(32px, 4.3vw, 68px);
  letter-spacing: -0.045em; line-height: 1.12;
  color: var(--cream);
}

/* ============================================================
   Lead 94:51 · scene 3 — centered display, copy + two CTAs
   ============================================================ */
.lead-stage {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 1028px;
}
.lead-title { font-size: var(--d-lead); color: var(--cream); }
.lead-copy {
  max-width: 36ch; margin-top: clamp(28px, 5vh, 56px);
  font: 500 16px/1.5 var(--sans);
}
/* Desktop: same one-line principle as the hero intro */
@media (min-width: 1000px) {
  .lead-copy { max-width: none; white-space: nowrap; }
}
@media (min-width: 1440px) {
  .lead-copy { font-size: 18px; }
}
.lead-actions {
  margin-top: clamp(28px, 5vh, 48px);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;
}
/* Lead sits on the page field like the sections below the intro:
   forest text, green primary + outlined green secondary. The ID
   selector keeps .cinema-panel from re-darkening it in any mode. */
/* z-index only — position keeps coming from .cinema-panel (relative in
   flow, absolute under .cinema-ready), so the light lead can rise over
   the outgoing statement without any CSS transform. */
#lead { z-index: 3; background: var(--page); color: var(--forest); }
#lead .lead-title { color: var(--forest); }
#lead .cta--upload { background: var(--forest); color: var(--page); }
#lead .cta--upload:hover { background: #1f4b3e; }
#lead .cta--inverse { background: transparent; border: 1px solid var(--forest); color: var(--forest); }
#lead .cta--inverse:hover { background: rgba(23, 60, 50, 0.08); }

/* ============================================================
   Pills / badge — quiet status labels the product demos reuse
   (the decode · act · protect scenes are replaced by the four
   product steps; their styles live in product.css)
   ============================================================ */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--pale); color: var(--forest);
  font: 600 13px/18px var(--sans); padding: 10px 0; min-height: 38px;
}
.pill--lab { width: 104px; }
.pill--range { width: 144px; min-height: 42px; }
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: clamp(16px, 1.4vw, 20px);
  background: var(--pale); color: var(--forest); border-radius: 999px;
  padding: 12px 0; width: 236px; min-height: 42px;
  font: 600 12px/18px var(--sans); letter-spacing: 0.05em;
}

/* ============================================================
   Action rows — the shared demo control app.js drives
   (aria-pressed + .action-check opacity). The daily timeline in
   product.css layers its grid onto .action-button.
   ============================================================ */
.action-list { margin-top: 44px; display: flex; flex-direction: column; gap: 28px; }
.action-button {
  display: flex; align-items: center; gap: 16px; width: 100%;
  min-height: 56px; padding: 15px 16px; border-radius: 12px;
  background: var(--surface); text-align: left;
}
.action-button:hover { background: var(--page); }
.action-check { flex: none; width: 26px; height: 26px; display: inline-flex; border-radius: 999px; }
.action-check img { width: 100%; height: 100%; }
.action-check[hidden] { opacity: 0; }
.action-button[aria-pressed="true"] .action-check { background: var(--forest); }
.action-button[aria-pressed="true"] .action-label { color: var(--ink-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.action-label { flex: 1; font: 500 17px/24px var(--sans); }


/* ============================================================
   Pricing 84:10 — natural height · title x96 y80 · summary x820
   · table rules y430+ · CTA x1030 y824 (below last visible row)
   ============================================================ */
.pricing { padding-block: clamp(64px, 5.6vw, 80px) clamp(56px, 5vw, 72px); }
.pricing-head {
  display: grid; grid-template-columns: minmax(0, 580fr) minmax(0, 480fr);
  gap: clamp(32px, 6vw, 86px); align-items: start;
}
.pricing-title { font-size: var(--d-80); }
.pricing-kicker { font: 700 14px/20px var(--sans); letter-spacing: 0.06em; color: var(--forest); }
.pricing-price { margin-top: 22px; font-size: var(--d-68); }
.pricing-billing { margin-top: 32px; font: 400 16px/24px var(--sans); color: var(--ink-2); }
.pricing-pair { margin-top: 48px; max-width: 480px; font: 500 16px/24px var(--sans); }
.pricing-tbd { margin-top: 22px; font: 600 14px/20px var(--sans); color: var(--forest); }
.plan-table {
  width: 100%; margin-top: clamp(36px, 3.3vw, 48px);
  border-collapse: collapse; table-layout: fixed;
}
.plan-table th, .plan-table td {
  padding: 18px 0; font-size: 16px; line-height: 22px; text-align: center;
}
.plan-table thead th {
  border-top: 1px solid var(--forest);
  padding-top: 28px; padding-bottom: 28px;
  font: 700 14px/20px var(--sans); letter-spacing: 0.06em;
}
.plan-table thead th:first-child { border-top: 0; }
.plan-free { color: var(--ink-2); }
.plan-pear { color: var(--forest); }
.plan-table thead th:first-child,
.plan-table tbody th:first-child { width: auto; text-align: left; }
.plan-table tbody tr { border-top: 1px solid var(--forest); }
.plan-table tbody tr:last-child { border-bottom: 1px solid var(--forest); }
.plan-table tbody th { font: 500 16px/22px var(--sans); max-width: 360px; }
.cell-free { color: var(--ink-2); font-weight: 400; }
.cell-pear { color: var(--forest); font-weight: 600; }
.pricing-actions { margin-top: 40px; display: flex; justify-content: flex-end; }

/* ============================================================
   Footer 95:46 — forest field. One full-bleed slogan marquee
   (JS translates the scroller only while the page scrolls — no
   autoplay here), a quiet mission line + upload CTA, compact
   links, disclaimer base.
   ============================================================ */
.footer {
  background: var(--forest); color: var(--page);
  padding-block: clamp(36px, 4.2vw, 56px) 36px;
}
.footer-marquee {
  /* full bleed: cancels the .stage side padding */
  margin-inline: calc(-1 * max(var(--gutter), calc((100vw - 1248px) / 2)));
  overflow: hidden;
}
.footer-slogan,
.footer-marquee h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(64px, 10vw, 156px);
  line-height: 1.1; letter-spacing: -0.04em;
  color: var(--page); white-space: nowrap;
}
.footer-scroller {
  display: flex; flex-wrap: nowrap;
  width: max-content; min-width: 100%;
}
.footer-slogan { flex: none; }   /* repeated spans never shrink */
.footer-mission-row {
  margin-top: clamp(24px, 3vw, 40px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px;
}
.mission { font: 500 clamp(17px, 1.25vw, 20px)/1.4 var(--serif); }
.footer-rule { margin-top: clamp(24px, 3vw, 36px); height: 1px; background: #2c5a4b; }
.footer-nav {
  margin-top: clamp(20px, 2vw, 28px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px;
  font: 500 14px/20px var(--sans);
}
.footer-nav a, .footer-nav button {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; color: var(--page);
}
.footer-nav a:hover, .footer-nav button:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-base {
  margin-top: clamp(24px, 2.5vw, 32px);
  display: flex; flex-wrap: wrap; align-items: end; gap: 24px 40px;
}
.footer-disclaimer { max-width: 900px; font: 400 14px/20px var(--sans); }
.footer-wordmark { margin-left: auto; font: 500 28px/34px var(--serif); text-align: right; }

/* ============================================================
   Dialog #previewDialog — pill buttons, no forms
   ============================================================ */
dialog#previewDialog { padding: 0; border: 0; }
dialog#previewDialog::backdrop { background: rgba(21, 16, 14, 0.62); }
.dialog-card {
  background: var(--surface); border: 1px solid var(--forest); border-radius: 24px;
  padding: 36px 32px 32px; max-width: min(520px, calc(100vw - 40px));
}
.dialog-card h2 { font: 500 28px/34px var(--serif); }
.dialog-card p { margin-top: 14px; font: 400 16px/24px var(--sans); color: var(--ink-2); }
.dialog-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; }

/* ============================================================
   Motion hooks (JS worker owns timelines and scene states).
   Base state is fully visible — no default opacity:0 anywhere
   except the closed dialog above.
   ============================================================ */
html[data-motion-state="off"] .reveal,
html[data-motion-state="off"] * { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .hero-arrow { transform: none; }
  /* Footer: one readable static slogan instead of the scrolling strip */
  .footer-scroller { display: none; }
  .footer-marquee h2.visually-hidden {
    position: static; width: auto; height: auto; margin: 0;
    clip-path: none; overflow: visible; white-space: normal;
    text-align: center;
  }
}

/* ============================================================
   Responsive — 1024 / 900 / 768 / 600 / 480 + short viewports
   ============================================================ */

@media (max-width: 1024px) {
  .pricing-head { grid-template-columns: 1fr; }
  .pricing-summary { max-width: 560px; }
  .pricing-actions { justify-content: flex-start; }
}

/* ≤1200: with Blog and the language pill added, the centered nav is wide
   enough to crowd the wordmark, so from here down the bar carries
   wordmark + pill + login + menu; nav becomes a simple dark backplate
   that only exists while the menu is open. Desktop controls are never
   display:none'd above this breakpoint. */
@media (max-width: 1200px) {
  .menu-toggle { display: flex; }
  .site-nav {
    position: fixed; inset: 0; z-index: -1; transform: none;
    flex-direction: column; justify-content: center; gap: 4px;
    padding: 96px 24px 48px;
    background: rgba(9, 12, 11, 0.96);
    color: var(--cream);
    opacity: 0; visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
  .site-header.menu-open .site-nav { opacity: 1; visibility: visible; }
  .site-header.menu-open { color: var(--cream); }
  .site-header.menu-open .nav-dot img { filter: brightness(0) invert(0.955); }
  .site-header.menu-open .header-login:hover { background: var(--cream); color: var(--cinema-black); }
  .nav-link { font-size: 16px; line-height: 24px; min-height: 52px; }
  .nav-dots { gap: 14px; }
}

/* ≤768: tablets/large phones — single column rhythm */
@media (max-width: 768px) {
  .stat-caption { font-size: 13px; }
  .evidence-note { font-size: 14px; }
  .plan-table thead th:first-child,
  .plan-table tbody th:first-child { width: auto; }
  .plan-table th, .plan-table td { padding: 14px 4px; font-size: 14px; }
  .pricing-price { margin-top: 14px; }
  .pricing-billing { margin-top: 18px; }
  .pricing-pair { margin-top: 24px; }
  .pricing-tbd { margin-top: 14px; }
}

/* ≤600: metrics stack (JS also natural-flows the track here). Header
   tightens so wordmark + language pill + login + menu all fit 390. */
@media (max-width: 600px) {
  .site-header { gap: 10px; padding-inline: 14px; }
  .header-actions { gap: 8px; }
  .header-login { padding-inline: 16px; font-size: 14px; }
  .stat-field { grid-template-columns: 1fr; width: min(440px, 100%); row-gap: 26px; }
  .stat-plot { height: 220px; }   /* column keeps its 86% width, uncapped */
  .reading-copy p { font-size: 32px; }
}

/* ≤480: phones — balanced type, generous touch areas, no overflow */
@media (max-width: 480px) {
  :root {
    --d-hero: clamp(44px, 13vw, 70px);
    --d-lead: clamp(34px, 11vw, 56px);
    --d-evidence: clamp(28px, 9vw, 48px);
    --d-stat: clamp(40px, 12vw, 56px);
  }
  .statement-title { font-size: clamp(50px, 13vw, 60px); }
  .wordmark { font-size: 24px; }
  .nav-dots { gap: 6px; }
  .nav-dots img[width="8"] { width: 6px; height: 6px; }
  .nav-dots img[width="20"] { width: 14px; height: 6px; }
  .lead-actions { gap: 14px; }
  .cta { white-space: normal; text-align: center; }
  .action-list { gap: 14px; }
  .badge { width: 100%; }
  .footer-base { align-items: flex-start; flex-direction: column; }
  .footer-wordmark { margin-left: 0; text-align: left; }
.dialog-actions .cta { width: 100%; }
}

/* ≤360: tightest phones — everything stays on the bar, nothing is hidden */
@media (max-width: 360px) {
  .wordmark { font-size: 20px; }
  .site-header { gap: 6px; padding-inline: 10px; }
  .header-actions { gap: 2px; }
  .header-login { padding-inline: 10px; }
  .language-switch a { min-width: 40px; } /* near-full target kept */
}

/* Short viewports: cinematic mode stays on — display caps and
   spacing ease so every scene still fits 100svh with all notes
   visible. The statement heading drops its full-viewport pin so
   the copy keeps comfortable room. (≤560h landscape is
   natural-flowed by JS.) */
@media (max-height: 700px) {
  :root {
    --d-lead: clamp(34px, min(10.5vw, 16vh), 120px);
  }
  .cinema-panel { padding-top: clamp(84px, 12vh, 120px); padding-bottom: 40px; }
  .statement-title { font-size: clamp(56px, min(11.1vw, 20vh), 160px); }
  .reading-copy { padding-block: 8vh 14vh; }
}

/* Shorter viewports (below the JS pin threshold): relax the heading pin. */
@media (max-height: 599px) {
  .statement-heading { min-height: 0; padding-block: clamp(84px, 12vh, 120px) 40px; }
}

/* ============================================================
   Chinese pages (html lang zh*) — same composition, CJK voice.
   No fonts are fetched: Hanzi simply fall through each stack to the
   system CJK faces (PingFang SC / Noto Sans SC / Microsoft YaHei),
   Latin glyphs still render from the originals. CJK glyphs are
   denser than Latin, so display tracking eases to -0.02em, headings
   take real leading (1.12 scene display / 1.18 section titles), and
   long copy holds a 22–26em measure at 1.35 for comfortable reading.
   Everything else — sizes, effects, timing — is shared with /.
   ============================================================ */
html:lang(zh) {
  --sans: "Inter", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", Georgia, serif;
  --display: "TeX Gyre Adventor", "Inter", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}
html:lang(zh) .hero-row, html:lang(zh) .evidence-word, html:lang(zh) .evidence-phrase,
html:lang(zh) .statement-title, html:lang(zh) .lead-title, html:lang(zh) .footer-slogan,
html:lang(zh) .stat-value, html:lang(zh) .report-value, html:lang(zh) .pricing-price {
  letter-spacing: -0.02em;
  line-height: 1.12;
}
html:lang(zh) .pricing-title { line-height: 1.18; }
/* Reading copy: shared pixel measure with the English build; no fixed
   heights beyond what already ships. */
html:lang(zh) .reading-copy { width: 100%; max-width: 1100px; }
html:lang(zh) .reading-copy p { letter-spacing: 0; line-height: 1.35; }
/* A few long CJK titles: ease the small-screen clamps so 320–390 never
   overflows (desktop display sizes are untouched). */
@media (max-width: 480px) {
  html:lang(zh) .statement-title { font-size: clamp(44px, 12vw, 60px); }
  html:lang(zh) .reading-copy p { font-size: 30px; }
}