/* Pear design tokens — the single source of truth for colour, type, space,
 * radius, elevation and motion. Every component reads these variables; no
 * component should hard-code a brand colour or a display size. Chinese pages
 * swap the type tokens under html:lang(zh) and keep the calm zh scale. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../vendor/fonts/inter-latin.woff2") format("woff2");
}

/* Display: TeX Gyre Adventor Bold (GUST Font License), same letterforms as
 * the previous ITC Avant Garde display face. */
@font-face {
  font-family: "TeX Gyre Adventor";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../vendor/fonts/texgyreadventor-bold.otf") format("opentype");
}

/* Wordmark only: the "Pear" logotype stays in Newsreader (OFL 1.1). It is
 * not part of the web type system and is never used for page text. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../vendor/fonts/newsreader-latin.woff2") format("woff2");
}

/* Chiron Hei HK (OFL 1.1), content subset; see vendor/fonts/chiron-LICENSE.md */
@font-face {
  font-family: "Chiron Hei HK Web";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../vendor/fonts/chiron-hei-hk-subset.woff2") format("woff2");
}

/* Numbers and values: IBM Plex Mono Regular (OFL 1.1, see vendor/fonts/ibm-plex-mono-OFL.txt),
 * Latin subset. The app sets every value in it (1.32 g/L, 5.9 %), so the web does too. */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/fonts/ibm-plex-mono-latin.woff2") format("woff2");
}

:root {
  /* Shared brand foundation: marketing, web app and native design mapping. */
  --brand-canvas: #f2f4f6;
  --brand-ink: #173c32;
  --brand-text: #14161a;
  --brand-muted: #545a63;
  --brand-attention: #e08a62;
  /* Product night field: low-luminance forest and blue-grey light, never neutral black. */
  --brand-dark-canvas: #11251f;
  --brand-dark-surface: #1a302a;
  --brand-dark-bloom-forest: rgba(45, 99, 78, .36);
  --brand-dark-bloom-sky: rgba(113, 143, 152, .18);
  --brand-dark-bloom-sage: rgba(147, 169, 151, .10);
  --brand-dark-field: radial-gradient(85% 78% at 8% 10%, var(--brand-dark-bloom-forest), transparent 74%), radial-gradient(66% 70% at 96% 26%, var(--brand-dark-bloom-sky), transparent 78%), radial-gradient(74% 56% at 50% 104%, var(--brand-dark-bloom-sage), transparent 78%);
  /* Photo atmosphere: bounded to marketing imagery and adjacent story fields.
   * Never remap App/data text or canvas to these photographic colours. */
  --film-sky: #718f98;
  --film-ivory: #f4f3e8;
  --film-forest-deep: #10291f;
  --film-shade: rgba(16, 41, 31, .46);
  --film-shade-soft: rgba(16, 41, 31, .18);
  --film-caption-shade: rgba(16, 41, 31, .72);
  --film-field-sky: rgba(113, 143, 152, .24);
  --film-field-sage: rgba(147, 169, 151, .20);
  --film-story-field: radial-gradient(72% 68% at 86% 6%, var(--film-field-sky), transparent 78%), radial-gradient(76% 64% at 8% 92%, var(--film-field-sage), transparent 76%);
  --material-card: rgba(255, 255, 255, .55);
  --material-stroke: rgba(255, 255, 255, .70);
  --material-line: rgba(23, 60, 50, .10);
  --material-highlight: rgba(255, 255, 255, .90);
  --material-shadow: 0 8px 28px rgba(23, 60, 50, .08);
  --material-blur: blur(24px);
  --brand-bloom-1: rgba(229, 238, 234, .76);
  --brand-bloom-2: rgba(23, 60, 50, .045);
  --brand-bloom-3: rgba(79, 165, 154, .075);
  --brand-bloom-4: rgba(23, 60, 50, .03);
  --brand-field: radial-gradient(64% 56% at 2% 0%, var(--brand-bloom-1), transparent 72%), radial-gradient(50% 66% at 104% 34%, var(--brand-bloom-2), transparent 74%), radial-gradient(58% 54% at -2% 100%, var(--brand-bloom-3), transparent 74%), radial-gradient(76% 42% at 62% 110%, var(--brand-bloom-4), transparent 70%);
  /* Compatibility aliases keep existing components on the shared material. */
  --bloom-1: var(--brand-bloom-1);
  --bloom-2: var(--brand-bloom-2);
  --bloom-3: var(--brand-bloom-3);
  --bloom-4: var(--brand-bloom-4);
  --page-light: var(--brand-field);
  --jelly-bg: var(--material-card);
  --jelly-bg-hover: rgba(255, 255, 255, .72);
  --jelly-tint: var(--material-line);
  --jelly-ink: var(--brand-ink);
  --jelly-gloss: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 56%);
  --jelly-shadow: inset 0 1px 0 var(--material-highlight), var(--material-shadow);
  --jelly-blur: var(--material-blur);
  --jelly-dark-bg: rgba(255, 255, 255, .12);
  --jelly-dark-bg-hover: rgba(255, 255, 255, .22);
  --jelly-dark-tint: rgba(9, 26, 20, .26);
  --jelly-dark-gloss: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 56%);
  --jelly-dark-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 28px rgba(0, 0, 0, .12);
  /* Brand colour */
  --forest: var(--brand-ink);
  --forest-2: #1f4b3e;      /* hover on forest */
  --forest-3: #2c5a4b;      /* hairlines and quiet shapes on forest */
  --forest-deep: var(--film-forest-deep); /* existing deep-forest compatibility */
  --leaf: #3f7a64;          /* mid green, illustration */
  --mint: #8fc7a8;
  --cream: var(--film-ivory); /* ivory headlines and wordmark on photo / dark */
  --page: var(--brand-canvas); /* Light Pearl page */
  --surface: #ffffff;
  --paper: #fbfaf5;         /* printed report paper */
  --ink: var(--brand-text);
  --ink-2: var(--brand-muted);
  --sage: #e5eeea;          /* soft green panels */
  --sage-2: #d3e2db;        /* borders and tags on sage */
  --line: #e3e8ea;

  /* Semantic */
  --warm: var(--brand-attention); /* attention accent */
  --warm-ink: #a8492a;      /* attention text on light, 5.7:1 on white */
  --warm-soft: #f8e6dc;
  --ok-ink: #2c6b52;        /* steady text on light, 6.3:1 on white */
  --ok-soft: #e1efe7;

  /* App palette (Figma "Pear Health Lab — App"): text and state roles. The web uses these
   * exact values so the site, the web app and the iOS app read as one brand. */
  --text-primary: var(--brand-text);
  --text-secondary: var(--brand-muted);
  --text-muted: #686f79;
  --state-optimal: #3b7864;  /* steady / in the research range */
  /* Chart series: you · family 1 · family 2. Three clearly different hues;
   * warm stays reserved for "worth a look". */
  --series-you: #173c32;
  --series-fam1: #4fa59a;
  --series-fam2: #7b86c2;

  /* Compatibility palette for intentional dark surfaces and local photo veils.
   * The mobile menu still uses the teal bloom; legacy App dark-field treatments may use sage/shade.
   * Landing stage, insight, statement and footer now use the shared light --brand-field. */
  --forest-bloom-teal: rgba(79, 165, 154, 0.36);   /* use between .30 and .45 */
  --forest-bloom-sage: rgba(229, 238, 234, 0.09);  /* use between .06 and .12 */
  --forest-shade: rgba(9, 26, 20, 0.4);            /* the deep shade toward a corner */

  /* Product layout (v4): the page uses the screen, with margins in proportion to it.
   * Shared page edges: 29px at 1440 and 38px at 1920. Reading copy keeps its own measure.
   * The top bar sits on the same edges. 12 columns; column gap and the space between major modules scale with the width. */
  --page-max: 2160px;
  --page-pad: clamp(18px, 2vw, 40px);
  --grid-gap: clamp(24px, 2vw, 40px);       /* the 12-column gap */
  --module-gap: clamp(40px, 4.4vw, 72px);   /* between major modules (56px at 1280, 63px at 1440, 72px from ~1640) */
  --module-inner: 24px;                     /* inside a module: label to content */

  /* Type */
  --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  /* Every number, value and unit in the product: Plex Mono for the Latin digits and symbols; the sans stack follows so a
   * Chinese unit word ("7 小时 12 分", "6月") is set in Chiron, not in a system fallback. */
  --font-num: "IBM Plex Mono", var(--font-sans), "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-display: "TeX Gyre Adventor", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-wordmark: "Newsreader", Georgia, serif; /* logo only */
  /* One wordmark across landing, login and product; the login is the visual baseline. */
  --wordmark-family: var(--font-wordmark);
  --wordmark-size: 22px;
  --wordmark-weight: 500;
  --wordmark-leading: 1;
  --wordmark-tracking: -0.01em;
  --wordmark-on-light: var(--brand-ink);
  --wordmark-on-dark: var(--film-ivory);
  --brand-gutter: clamp(20px, 4vw, 56px);
  --brand-header-top: 28px;
  --brand-header-height: 88px;
  /* English type: the original Pear roles and line heights, with sizes,
   * weights and tracking tuned for a calmer, premium read. Display steps
   * are clearly apart (hero > statement > evidence > lead > section >
   * step); tracking is never tighter than -0.04em. */
  --fs-hero: clamp(64px, min(8.4vw, 17vh), 124px);
  --fs-evidence: clamp(34px, min(5.6vw, 11vh), 84px);
  --fs-stat: clamp(34px, min(4.4vw, 8.5vh), 64px);
  --fs-statement: clamp(52px, 7.2vw, 104px);
  --fs-statement-copy: clamp(24px, 2.5vw, 36px);
  --fs-lead: clamp(44px, 4.6vw, 68px);
  --fs-price-title: clamp(36px, 4.4vw, 64px);
  --fs-price: clamp(34px, 3.9vw, 56px);
  --fs-slogan: clamp(56px, 7.8vw, 112px);
  --fs-h2: clamp(30px, 2.9vw, 42px);     /* chapter headings */
  --fs-h3: 24px;                         /* step headings, one clear step below */
  --fs-close: clamp(30px, 2.8vw, 40px);
  --fs-daily: 24px;
  --fs-feature: 20px;
  --fs-lede: 18px;
  --fs-hero-intro: 18px;
  --fs-lead-copy: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-micro: 12px;
  --fs-label: 12px;                      /* uppercase labels */
  --track-hero: -0.04em;
  --track-statement: -0.04em;
  --track-statement-copy: -0.03em;
  --track-h: -0.025em;
  --track-slogan: -0.04em;
  --track-label: 0.14em;
  /* Line heights: the original values, unchanged */
  --lh-hero: 0.95;
  --lh-statement: 1.02;
  --lh-statement-copy: 1.12;
  --lh-lead: 1.05;
  --lh-h: 1.2;
  --lh-slogan: 1.1;
  --lh-body: 1.75;
  --lh-lede: 1.5;
  --w-display: 700;
  --w-lede: 400;                         /* ledes on light; dark fields keep 500 */
  --w-label: 600;
  /* Card-level scale for the sample report and concept pages */
  --fs-card-h2: clamp(24px, 2.2vw, 30px);
  --fs-card-h3: 20px;
  --fs-card-d1: clamp(52px, 7.4vw, 124px);
  --fs-card-h1: clamp(32px, 3.4vw, 48px);
  --fs-lede-lg: clamp(18px, 1.4vw, 21px);
  --track-display: -0.05em;
  --track-heading: -0.025em;
  --lh-display: 0.95;
  --lh-heading: 1.12;

  /* Space (4px grid) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --gutter: var(--page-pad);
  --container: 1248px;
  --header-h: 72px;
  --pad-stage: 126px 96px 72px;

  /* Radius */
  --r-pill: 999px;
  --r-xl: 32px;   /* chapter sheets */
  --r-lg: 24px;   /* cards, panels, dialogs */
  --r-md: 16px;
  --r-sm: 10px;

  /* Elevation */
  --shadow-card: 0 1px 2px rgba(23, 26, 31, 0.04), 0 14px 28px -18px rgba(23, 26, 31, 0.22);
  --shadow-lift: 0 2px 4px rgba(23, 26, 31, 0.05), 0 22px 40px -20px rgba(23, 26, 31, 0.3);
  --shadow-sheet: 0 -24px 60px -24px rgba(9, 12, 11, 0.5);
  --shadow-phone: 0 40px 80px -40px rgba(16, 41, 31, 0.45), 0 12px 24px -16px rgba(16, 41, 31, 0.3);

  /* Motion: three durations, two curves, used everywhere */
  --dur-1: 160ms;   /* hover, press */
  --dur-2: 320ms;   /* UI changes, screen swaps, dialogs */
  --dur-3: 640ms;   /* entrances */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Focus: one ring per surface */
  --focus-on-light: var(--forest);
  --focus-on-dark: var(--page);

  --z-header: 50;
  --z-sticky-cta: 45;
  --z-dialog: 80;

  /* Brand signature: the ≠ → = → + morph */
  --morph-dur: 700ms;
  --morph-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Chinese: the original calm scale (zh-calm), value for value */
html:lang(zh) {
  --font-display: "Chiron Hei HK Web", "Chiron Hei HK", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-sans: "Chiron Hei HK Web", "Chiron Hei HK", "PingFang SC", "Microsoft YaHei", sans-serif;
  --wordmark-family: var(--font-sans);
  --wordmark-size: 19px;
  --wordmark-tracking: 0.12em;
  --fs-hero: clamp(36px, 3.4vw, 48px);
  --fs-evidence: clamp(32px, 2.8vw, 40px);
  --fs-stat: clamp(34px, 2.8vw, 40px);
  --fs-statement: clamp(32px, 3vw, 40px);
  --fs-statement-copy: 22px;
  --fs-lead: clamp(38px, 3.8vw, 60px);
  --fs-price-title: clamp(24px, 2vw, 28px);
  --fs-price: clamp(34px, 3vw, 40px);
  --fs-slogan: clamp(40px, 4.6vw, 64px);
  --fs-h2: 32px;
  --fs-h3: 30px;
  --fs-hero-intro: 16px;
  --track-hero: 0.02em;
  --track-statement: 0;
  --track-statement-copy: 0.01em;
  --track-h: 0;
  --track-slogan: 0;
  --lh-hero: 1.3;
  --lh-statement: 1.3;
  --lh-statement-copy: 1.8;
  --lh-lead: 1.24;
  --lh-h: 1.3;
  --lh-slogan: 1.2;
  --lh-body: 1.8;
  --lh-lede: 1.75;
  --fs-lede: 17px;
  --fs-lead-copy: 16px;
  --fs-h3: 30px;
  --fs-feature: 22px;
  --fs-close: 36px;
  --fs-label: 14px;
  --track-label: 0.06em;
  --w-display: 500;
  --w-lede: 500;
  --w-label: 700;
  --fs-card-h2: clamp(20px, 1.6vw, 24px);
  --fs-card-h3: 18px;
  --fs-card-d1: clamp(32px, 2.8vw, 40px);
  --fs-card-h1: clamp(26px, 2.2vw, 32px);
  --fs-lede-lg: clamp(16px, 1.1vw, 18px);
  --track-display: 0.02em;
  --track-heading: 0.01em;
  --lh-display: 1.25;
  --lh-heading: 1.35;
}

/* Below 1000px the zh product titles step down to 24 (original) */
@media (max-width: 999.98px) {
  html:lang(zh) { --fs-h2: 24px; --fs-h3: 24px; }
}
/* Below 900px the promise title takes the original small-screen size and leading */
@media (max-width: 899.98px) {
  :root { --lh-lead: 1.08; }
  html:lang(zh) { --fs-lead: clamp(36px, 10vw, 44px); --lh-lead: 1.3; }
}
@media (max-width: 360px) {
  :root, html:lang(zh) { --fs-lead: 36px; }
}

/* Phones: the original small-screen values */
@media (max-width: 767.98px) {
  :root {
    --fs-hero: clamp(44px, 12vw, 60px);
    --fs-evidence: clamp(28px, 8.4vw, 44px);
    --fs-stat: clamp(36px, 10.5vw, 48px);
    --fs-statement: clamp(40px, 11.5vw, 56px);
    --fs-statement-copy: clamp(24px, 6.6vw, 30px);
    --fs-lead: clamp(34px, 10vw, 48px);
    --fs-h2: 28px;
    --fs-h3: 20px;
  }
  html:lang(zh) {
    --fs-hero: 36px;
    --fs-evidence: 32px;
    --fs-stat: 34px;
    --fs-statement: 32px;
    --fs-statement-copy: 18px;
    --fs-price-title: 24px;
    --fs-price: 34px;
    --fs-slogan: clamp(32px, 10vw, 40px);
    --fs-h2: 24px;
    --fs-h3: 24px;
    --fs-close: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
    --morph-dur: 0ms;
  }
}