/* pregdad.com landing «Một ngày của bố» — handoff v2.2 + handoff-v2.2-fixes.patch
   (docs/feature/public-site/00-QUYET-DINH.md Q8). Generated once from the package;
   blocks below keep the cascade order of the approved page (handoff.json css_order:
   inline base -> pair-demo.css -> journey.css -> device-frames.css, then the page's
   last inline block). Only the vi home page loads this file; every other page keeps
   style.css. The last block styles the header/footer build-site.mjs emits (Q10). */

/* ==== inline <style> #1 ==== */
/* Bố·Đồng·Hành — entry point v2.0. Chỉ @import. */
/* Inter Variable (OFL, tokens/fonts/OFL.txt) — font chốt cho v2 (DESIGN-SYSTEM.md §5). 3 subset: vietnamese, latin-ext, latin. Weight 100–900 (650 dùng cho section/card). */
/* inter-vietnamese-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/inter-vietnamese-wght-normal.woff2?v=5c66f9e07e')
    format('woff2-variations');
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

/* inter-latin-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/inter-latin-ext-wght-normal.woff2?v=34b9c504ca')
    format('woff2-variations');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* inter-latin-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/inter-latin-wght-normal.woff2?v=3100e775e8')
    format('woff2-variations');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@keyframes bdh-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme] *,
  [data-theme] *::before,
  [data-theme] *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Bố·Đồng·Hành — tokens v2.0 (27/09/2026). Nguồn canonical: tokens/preg-dad.tokens.json (DTCG) → export_tokens.py.
   4 mode: data-theme="mother|father" × data-mode="light|dark" trên CÙNG một element (bắt buộc đủ 2 attr).
   data-mode="auto" = theo prefers-color-scheme. Không trộn với token v1 (me/bo/--accent…): xem tokens/bridge.css nếu cần tương thích. */
:root {
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-card: 18px;
  --radius-hero: 22px;
  --radius-sheet: 28px;
  --radius-pill: 999px;
  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --type-display-size: 2rem;
  --type-display-line: 1.1875;
  --type-display-weight: 700;
  --type-display-tracking: -0.05rem;
  --type-greeting-size: 1.5rem;
  --type-greeting-line: 1.25;
  --type-greeting-weight: 700;
  --type-greeting-tracking: -0.0375rem;
  --type-screen-size: 1.25rem;
  --type-screen-line: 1.35;
  --type-screen-weight: 700;
  --type-screen-tracking: -0.021875rem;
  --type-section-size: 1rem;
  --type-section-line: 1.375;
  --type-section-weight: 650;
  --type-section-tracking: -0.0125rem;
  --type-card-size: 0.9375rem;
  --type-card-line: 1.4;
  --type-card-weight: 650;
  --type-card-tracking: -0.009375rem;
  --type-body-size: 0.875rem;
  --type-body-line: 1.5;
  --type-body-weight: 400;
  --type-body-tracking: 0rem;
  --type-support-size: 0.78125rem;
  --type-support-line: 1.48;
  --type-support-weight: 400;
  --type-support-tracking: 0rem;
  --type-caption-size: 0.6875rem;
  --type-caption-line: 1.454545;
  --type-caption-weight: 500;
  --type-caption-tracking: 0rem;
  --type-nav-size: 0.625rem;
  --type-nav-line: 1.4;
  --type-nav-weight: 500;
  --type-nav-tracking: 0rem;
  --type-label-size: 0.8125rem;
  --type-label-line: 1.384615;
  --type-label-weight: 600;
  --type-label-tracking: 0rem;
  --type-metric-size: 1.875rem;
  --type-metric-line: 1.2;
  --type-metric-weight: 700;
  --type-metric-tracking: -0.04375rem;
  --font-sans: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif;
  --hit-min: 44px;
  --nav-min: 68px;
  --border-w: 1px;
  --border-w-control: 1.5px;
  --dur-quick: 120ms; /* @kind other */
  --dur-standard: 180ms; /* @kind other */
  --dur-sheet: 240ms; /* @kind other */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --scrim: rgba(7, 19, 33, 0.5);
}
[data-theme='mother'][data-mode='light'] {
  --c-canvas: #fff8fa;
  --c-canvasTop: #fff2f6;
  --c-surface: #ffffff;
  --c-raised: #fffdfe;
  --c-subtle: #fff0f5;
  --c-border: #f2dde5;
  --c-controlBorder: #a0798b;
  --c-ink: #24222d;
  --c-secondary: #625c6b;
  --c-muted: #7a6a77;
  --c-brand: #ff3974;
  --c-brandText: #cb2759;
  --c-action: #d8215b;
  --c-actionHover: #c81851;
  --c-actionPressed: #b31548;
  --c-onAction: #ffffff;
  --c-focus: #a71249;
  --c-heroStart: #fff0f3;
  --c-heroEnd: #ffd1dc;
  --c-heroBorder: #ffb7ca;
  --c-heroInk: #31212b;
  --c-accentBg: #ffe8ef;
  --c-accentInk: #aa244d;
  --c-successBg: #eaf7ee;
  --c-successInk: #287443;
  --c-warningBg: #fff4dc;
  --c-warningInk: #855406;
  --c-dangerBg: #ffebf0;
  --c-dangerInk: #ab2146;
  --c-navBg: #fffcfd;
  --c-navInk: #766b7c;
  --c-navActive: #c92359;
  --c-track: #f5cbd8;
  --c-disabledBg: #f3e8ed;
  --c-disabledInk: #9d8a97;
  --c-artPad: #ffeaf1;
  --shadow-card: 0px 2px 12px 0px rgba(56, 35, 53, 0.035);
  --shadow-overlay: 0px 14px 42px 0px rgba(56, 35, 53, 0.12);
  color-scheme: light;
}
[data-theme='mother'][data-mode='dark'] {
  --c-canvas: #17131b;
  --c-canvasTop: #241822;
  --c-surface: #231e29;
  --c-raised: #302634;
  --c-subtle: #30222d;
  --c-border: #473442;
  --c-controlBorder: #9f7c93;
  --c-ink: #f9f0f5;
  --c-secondary: #d0bdc9;
  --c-muted: #b7a1b0;
  --c-brand: #ff82a7;
  --c-brandText: #ffa3bf;
  --c-action: #ff8fb1;
  --c-actionHover: #ffa7c2;
  --c-actionPressed: #f47ea2;
  --c-onAction: #391021;
  --c-focus: #ffd0e0;
  --c-heroStart: #3b2332;
  --c-heroEnd: #633047;
  --c-heroBorder: #78425b;
  --c-heroInk: #fff0f6;
  --c-accentBg: #4b2a3d;
  --c-accentInk: #ffb2cc;
  --c-successBg: #173c31;
  --c-successInk: #96ddba;
  --c-warningBg: #443321;
  --c-warningInk: #f2c079;
  --c-dangerBg: #4b2634;
  --c-dangerInk: #ffadb9;
  --c-navBg: #211b25;
  --c-navInk: #b9a4b4;
  --c-navActive: #ff9fbd;
  --c-track: #513046;
  --c-disabledBg: #302934;
  --c-disabledInk: #978b98;
  --c-artPad: #543247;
  --shadow-card: 0px 2px 12px 0px rgba(0, 0, 0, 0.14);
  --shadow-overlay: 0px 14px 42px 0px rgba(0, 0, 0, 0.38);
  color-scheme: dark;
}
[data-theme='father'][data-mode='light'] {
  --c-canvas: #f5f9ff;
  --c-canvasTop: #edf5ff;
  --c-surface: #ffffff;
  --c-raised: #fcfdff;
  --c-subtle: #edf4ff;
  --c-border: #dfe9f6;
  --c-controlBorder: #788daa;
  --c-ink: #172747;
  --c-secondary: #54657f;
  --c-muted: #607087;
  --c-brand: #3d78dc;
  --c-brandText: #245db5;
  --c-action: #275fbd;
  --c-actionHover: #2053a9;
  --c-actionPressed: #18468f;
  --c-onAction: #ffffff;
  --c-focus: #174d9d;
  --c-heroStart: #edf5ff;
  --c-heroEnd: #dceaff;
  --c-heroBorder: #c8ddfb;
  --c-heroInk: #172c50;
  --c-accentBg: #e5f0ff;
  --c-accentInk: #255aa5;
  --c-successBg: #e8f7ef;
  --c-successInk: #237148;
  --c-warningBg: #fff4df;
  --c-warningInk: #81520b;
  --c-dangerBg: #ffedf1;
  --c-dangerInk: #aa2548;
  --c-navBg: #fcfdff;
  --c-navInk: #61718d;
  --c-navActive: #255fbc;
  --c-track: #cee1ff;
  --c-disabledBg: #e9eef5;
  --c-disabledInk: #8390a4;
  --c-artPad: #eaf3ff;
  --shadow-card: 0px 2px 12px 0px rgba(56, 35, 53, 0.035);
  --shadow-overlay: 0px 14px 42px 0px rgba(56, 35, 53, 0.12);
  color-scheme: light;
}
[data-theme='father'][data-mode='dark'] {
  --c-canvas: #101923;
  --c-canvasTop: #142437;
  --c-surface: #1a2636;
  --c-raised: #253247;
  --c-subtle: #20334a;
  --c-border: #34475f;
  --c-controlBorder: #829abc;
  --c-ink: #edf4ff;
  --c-secondary: #c1cee2;
  --c-muted: #a2b6d1;
  --c-brand: #8ab4ff;
  --c-brandText: #acc9ff;
  --c-action: #8cb5ff;
  --c-actionHover: #a4c5ff;
  --c-actionPressed: #719fef;
  --c-onAction: #102443;
  --c-focus: #cedfff;
  --c-heroStart: #1e334d;
  --c-heroEnd: #2a486b;
  --c-heroBorder: #3a597c;
  --c-heroInk: #edf5ff;
  --c-accentBg: #253f62;
  --c-accentInk: #b5d1ff;
  --c-successBg: #163d35;
  --c-successInk: #98dbbd;
  --c-warningBg: #413421;
  --c-warningInk: #f0c581;
  --c-dangerBg: #472b39;
  --c-dangerInk: #ffb0c1;
  --c-navBg: #172332;
  --c-navInk: #a7bad5;
  --c-navActive: #a8c8ff;
  --c-track: #324b70;
  --c-disabledBg: #283445;
  --c-disabledInk: #899ab0;
  --c-artPad: #2b4461;
  --shadow-card: 0px 2px 12px 0px rgba(0, 0, 0, 0.14);
  --shadow-overlay: 0px 14px 42px 0px rgba(0, 0, 0, 0.38);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  [data-theme='mother'][data-mode='auto'] {
    --c-canvas: #fff8fa;
    --c-canvasTop: #fff2f6;
    --c-surface: #ffffff;
    --c-raised: #fffdfe;
    --c-subtle: #fff0f5;
    --c-border: #f2dde5;
    --c-controlBorder: #a0798b;
    --c-ink: #24222d;
    --c-secondary: #625c6b;
    --c-muted: #7a6a77;
    --c-brand: #ff3974;
    --c-brandText: #cb2759;
    --c-action: #d8215b;
    --c-actionHover: #c81851;
    --c-actionPressed: #b31548;
    --c-onAction: #ffffff;
    --c-focus: #a71249;
    --c-heroStart: #fff0f3;
    --c-heroEnd: #ffd1dc;
    --c-heroBorder: #ffb7ca;
    --c-heroInk: #31212b;
    --c-accentBg: #ffe8ef;
    --c-accentInk: #aa244d;
    --c-successBg: #eaf7ee;
    --c-successInk: #287443;
    --c-warningBg: #fff4dc;
    --c-warningInk: #855406;
    --c-dangerBg: #ffebf0;
    --c-dangerInk: #ab2146;
    --c-navBg: #fffcfd;
    --c-navInk: #766b7c;
    --c-navActive: #c92359;
    --c-track: #f5cbd8;
    --c-disabledBg: #f3e8ed;
    --c-disabledInk: #9d8a97;
    --c-artPad: #ffeaf1;
    --shadow-card: 0px 2px 12px 0px rgba(56, 35, 53, 0.035);
    --shadow-overlay: 0px 14px 42px 0px rgba(56, 35, 53, 0.12);
    color-scheme: light;
  }
  [data-theme='father'][data-mode='auto'] {
    --c-canvas: #f5f9ff;
    --c-canvasTop: #edf5ff;
    --c-surface: #ffffff;
    --c-raised: #fcfdff;
    --c-subtle: #edf4ff;
    --c-border: #dfe9f6;
    --c-controlBorder: #788daa;
    --c-ink: #172747;
    --c-secondary: #54657f;
    --c-muted: #607087;
    --c-brand: #3d78dc;
    --c-brandText: #245db5;
    --c-action: #275fbd;
    --c-actionHover: #2053a9;
    --c-actionPressed: #18468f;
    --c-onAction: #ffffff;
    --c-focus: #174d9d;
    --c-heroStart: #edf5ff;
    --c-heroEnd: #dceaff;
    --c-heroBorder: #c8ddfb;
    --c-heroInk: #172c50;
    --c-accentBg: #e5f0ff;
    --c-accentInk: #255aa5;
    --c-successBg: #e8f7ef;
    --c-successInk: #237148;
    --c-warningBg: #fff4df;
    --c-warningInk: #81520b;
    --c-dangerBg: #ffedf1;
    --c-dangerInk: #aa2548;
    --c-navBg: #fcfdff;
    --c-navInk: #61718d;
    --c-navActive: #255fbc;
    --c-track: #cee1ff;
    --c-disabledBg: #e9eef5;
    --c-disabledInk: #8390a4;
    --c-artPad: #eaf3ff;
    --shadow-card: 0px 2px 12px 0px rgba(56, 35, 53, 0.035);
    --shadow-overlay: 0px 14px 42px 0px rgba(56, 35, 53, 0.12);
    color-scheme: light;
  }
}
@media (prefers-color-scheme: dark) {
  [data-theme='mother'][data-mode='auto'] {
    --c-canvas: #17131b;
    --c-canvasTop: #241822;
    --c-surface: #231e29;
    --c-raised: #302634;
    --c-subtle: #30222d;
    --c-border: #473442;
    --c-controlBorder: #9f7c93;
    --c-ink: #f9f0f5;
    --c-secondary: #d0bdc9;
    --c-muted: #b7a1b0;
    --c-brand: #ff82a7;
    --c-brandText: #ffa3bf;
    --c-action: #ff8fb1;
    --c-actionHover: #ffa7c2;
    --c-actionPressed: #f47ea2;
    --c-onAction: #391021;
    --c-focus: #ffd0e0;
    --c-heroStart: #3b2332;
    --c-heroEnd: #633047;
    --c-heroBorder: #78425b;
    --c-heroInk: #fff0f6;
    --c-accentBg: #4b2a3d;
    --c-accentInk: #ffb2cc;
    --c-successBg: #173c31;
    --c-successInk: #96ddba;
    --c-warningBg: #443321;
    --c-warningInk: #f2c079;
    --c-dangerBg: #4b2634;
    --c-dangerInk: #ffadb9;
    --c-navBg: #211b25;
    --c-navInk: #b9a4b4;
    --c-navActive: #ff9fbd;
    --c-track: #513046;
    --c-disabledBg: #302934;
    --c-disabledInk: #978b98;
    --c-artPad: #543247;
    --shadow-card: 0px 2px 12px 0px rgba(0, 0, 0, 0.14);
    --shadow-overlay: 0px 14px 42px 0px rgba(0, 0, 0, 0.38);
    color-scheme: dark;
  }
  [data-theme='father'][data-mode='auto'] {
    --c-canvas: #101923;
    --c-canvasTop: #142437;
    --c-surface: #1a2636;
    --c-raised: #253247;
    --c-subtle: #20334a;
    --c-border: #34475f;
    --c-controlBorder: #829abc;
    --c-ink: #edf4ff;
    --c-secondary: #c1cee2;
    --c-muted: #a2b6d1;
    --c-brand: #8ab4ff;
    --c-brandText: #acc9ff;
    --c-action: #8cb5ff;
    --c-actionHover: #a4c5ff;
    --c-actionPressed: #719fef;
    --c-onAction: #102443;
    --c-focus: #cedfff;
    --c-heroStart: #1e334d;
    --c-heroEnd: #2a486b;
    --c-heroBorder: #3a597c;
    --c-heroInk: #edf5ff;
    --c-accentBg: #253f62;
    --c-accentInk: #b5d1ff;
    --c-successBg: #163d35;
    --c-successInk: #98dbbd;
    --c-warningBg: #413421;
    --c-warningInk: #f0c581;
    --c-dangerBg: #472b39;
    --c-dangerInk: #ffb0c1;
    --c-navBg: #172332;
    --c-navInk: #a7bad5;
    --c-navActive: #a8c8ff;
    --c-track: #324b70;
    --c-disabledBg: #283445;
    --c-disabledInk: #899ab0;
    --c-artPad: #2b4461;
    --shadow-card: 0px 2px 12px 0px rgba(0, 0, 0, 0.14);
    --shadow-overlay: 0px 14px 42px 0px rgba(0, 0, 0, 0.38);
    color-scheme: dark;
  }
}

/* Bridge v1→v2: alias tên token cũ (--accent, --bg-*, --r-*) sang role v2 (--c-*, --radius-*). CHỈ để code cũ không vỡ;
   code mới dùng thẳng --c-* / --radius-* / --space-* / --type-*. Không định nghĩa giá trị mới ở đây. */
[data-theme] {
  --bg-surface: var(--c-canvas);
  --bg-screen: linear-gradient(
    180deg,
    var(--c-canvasTop) 0%,
    var(--c-canvas) 38%
  );
  --bg-raised: var(--c-surface);
  --bg-tint: var(--c-subtle);
  --bg-tint-2: var(--c-subtle);
  --input-bg: var(--c-surface);
  --border-default: var(--c-border);
  --border-strong: var(--c-controlBorder);
  --text-primary: var(--c-ink);
  --text-secondary: var(--c-secondary);
  --text-muted: var(--c-muted);
  --accent: var(--c-brand);
  --accent-strong: var(--c-brandText);
  --accent-pressed: var(--c-actionPressed);
  --accent-grad: linear-gradient(135deg, var(--c-brand), var(--c-action));
  --text-on-accent: var(--c-onAction);
  --hero-grad: linear-gradient(
    160deg,
    var(--c-heroStart),
    var(--c-heroEnd)
  ); /* @kind color */
  --hero-glow: none; /* @kind other */
  --hero-border: var(--c-heroBorder);
  --hero-ink: var(--c-heroInk);
  --success: var(--c-successInk);
  --success-tint: var(--c-successBg);
  --warning: var(--c-warningInk);
  --warning-tint: var(--c-warningBg);
  --error: var(--c-dangerInk);
  --error-tint: var(--c-dangerBg);
  --danger: var(--c-dangerInk);
  --danger-tint: var(--c-dangerBg);
  --info: var(--c-accentInk);
  --info-tint: var(--c-accentBg);
  --disabled-bg: var(--c-disabledBg);
  --disabled-tx: var(--c-disabledInk);
  --shadow-btn: var(--shadow-button);
  --shadow-sheet: var(--shadow-overlay);
  --shadow-dialog: var(
    --shadow-overlay
  ); /* nav/hero/fab: xem tokens/elevation.css */
  --overlay: var(--scrim);
  --toast-bg: var(--c-raised);
  --toast-tx: var(--c-ink);
  --glass-blur: none; /* @kind other */
  --be-ring: none; /* @kind other */
  --be-glow: none; /* @kind other */
  --blob: linear-gradient(160deg, var(--c-heroStart), var(--c-heroEnd));
  --be-tint: var(--c-subtle);
  --be-accent: var(--c-brand);
  --be-strong: var(--c-brandText);
  --be-on-accent: var(--c-onAction);
  --be-muted: var(--c-muted);
  --be-border: var(--c-border);
  --be-grad: var(--accent-grad);
  --be-hero: var(--hero-grad);
  --r-xs: var(--radius-xs);
  --r-sm: var(--radius-sm);
  --r-md: 14px;
  --r-lg: var(--radius-card);
  --r-xl: var(--radius-hero);
  --r-sheet: var(--radius-sheet);
  --r-full: var(--radius-pill);
  --tabbar-h: var(--nav-min);
  --fab: 44px;
  --text-display: 2rem;
  --leading-display: 1.1875;
  --text-title: 1.5rem;
  --leading-title: 1.25;
  --text-heading: 1.25rem;
  --leading-heading: 1.35;
  --text-body-lg: 0.9375rem;
  --leading-body-lg: 1.4;
  --text-body: 0.875rem;
  --leading-body: 1.5;
  --text-caption: 0.78125rem;
  --leading-caption: 1.48;
  --dur-instant: var(--dur-quick);
  --dur-fast: var(--dur-quick);
  --dur-base: var(--dur-standard);
  --dur-gentle: var(--dur-sheet);
  --ease-out: var(--ease-standard);
  --press-scale: 1; /* @kind other */
}

/* Bố·Đồng·Hành — elevation & surface detail v2.2 (02/10/2026). Tuân STYLE-GUIDE.md §9–10 (canonical): card shadow light RẤT nhẹ và tô màu vai;
   dark dựa vào độ sáng surface + border trước bóng; ROW TRONG CARD KHÔNG có bóng riêng (dùng subtle bg / divider); KHÔNG outer glow quanh asset;
   không lồng quá 2 lớp card. Chi tiết được phép: sheen trắng trên hero + nút primary, bóng màu vai cho nút/FAB, ring checkbox, inset cho input/track.
   Mỗi theme × mode chỉ đổi 7 primitive --sh-*; mọi token bóng còn lại được suy ra. */
[data-theme] {
  --shadow-row: none; /* §10: row trong card không bóng riêng — phân lớp bằng subtle bg + border */
  --shadow-icon: 0 1px 2px var(--sh-ink-1); /* icon-button nổi trên canvas (không dùng cho khay art/avatar — §9 không glow quanh asset) */
  --shadow-hero:
    0 8px 24px var(--sh-hero), inset 0 1px 0 var(--sh-line); /* JourneyHero: bóng màu vai nhẹ + đường sáng cạnh trên (vùng minh họa lớn duy nhất của viewport) */
  --shadow-button:
    0 6px 16px var(--sh-action), inset 0 1px 0 var(--sh-line); /* primary button */
  --shadow-button-pressed: 0 2px 6px var(--sh-action);
  --shadow-fab:
    0 8px 22px var(--sh-action), 0 0 0 5px var(--c-navBg),
    inset 0 1px 0 var(--sh-line);
  --shadow-nav: 0 -8px 28px var(--sh-nav); /* nav nổi trên vùng cuộn */
  --shadow-check: 0 2px 6px var(--sh-action); /* checkbox đã chọn */
  --shadow-thumb:
    0 1px 3px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.1); /* thumb switch */
  --shadow-inset: inset 0 1px 2px var(--sh-ink-1); /* input, track progress */
  --glow-progress: none; /* @kind other */ /* §10/§12: tiến độ không phát sáng */
  --gradient-action: linear-gradient(
    180deg,
    var(--sh-sheen-top),
    rgba(255, 255, 255, 0)
  ); /* @kind color */ /* phủ trên --c-action */
  --gradient-progress: linear-gradient(
    90deg,
    var(--c-brand),
    var(--c-action)
  ); /* @kind color */
  --hero-sheen: radial-gradient(
    120% 90% at 16% 0%,
    var(--sh-sheen-hero) 0%,
    rgba(255, 255, 255, 0) 58%
  ); /* @kind color */ /* phủ trên gradient hero */
  --surface-gradient: linear-gradient(
    180deg,
    var(--c-surface),
    var(--c-raised)
  ); /* @kind color */ /* mini-card */
  --c-ring: var(
    --c-brand
  ); /* viền checkbox/radio chưa chọn (≥3:1 trên surface) */
}
[data-theme='mother'][data-mode='light'] {
  --sh-ink-1: rgba(56, 35, 53, 0.05);
  --sh-tint: rgba(203, 39, 89, 0.08);
  --sh-hero: rgba(255, 57, 116, 0.16);
  --sh-action: rgba(216, 33, 91, 0.3);
  --sh-nav: rgba(56, 35, 53, 0.09);
  --sh-line: rgba(255, 255, 255, 0.55);
  --sh-sheen-top: rgba(255, 255, 255, 0.14);
  --sh-sheen-hero: rgba(255, 255, 255, 0.7);
  --shadow-card: 0 1px 2px var(--sh-ink-1), 0 6px 18px var(--sh-tint);
}
[data-theme='mother'][data-mode='dark'] {
  --sh-ink-1: rgba(0, 0, 0, 0.28);
  --sh-tint: rgba(0, 0, 0, 0.3);
  --sh-hero: rgba(255, 130, 167, 0.12);
  --sh-action: rgba(255, 143, 177, 0.28);
  --sh-nav: rgba(0, 0, 0, 0.45);
  --sh-line: rgba(255, 255, 255, 0.1);
  --sh-sheen-top: rgba(255, 255, 255, 0.1);
  --sh-sheen-hero: rgba(255, 255, 255, 0.07);
  --shadow-card: 0 1px 2px var(--sh-ink-1), 0 6px 18px var(--sh-tint);
}
[data-theme='father'][data-mode='light'] {
  --sh-ink-1: rgba(23, 39, 71, 0.05);
  --sh-tint: rgba(39, 95, 189, 0.08);
  --sh-hero: rgba(61, 120, 220, 0.15);
  --sh-action: rgba(39, 95, 189, 0.3);
  --sh-nav: rgba(23, 39, 71, 0.09);
  --sh-line: rgba(255, 255, 255, 0.55);
  --sh-sheen-top: rgba(255, 255, 255, 0.14);
  --sh-sheen-hero: rgba(255, 255, 255, 0.7);
  --shadow-card: 0 1px 2px var(--sh-ink-1), 0 6px 18px var(--sh-tint);
}
[data-theme='father'][data-mode='dark'] {
  --sh-ink-1: rgba(0, 0, 0, 0.28);
  --sh-tint: rgba(0, 0, 0, 0.3);
  --sh-hero: rgba(138, 180, 255, 0.12);
  --sh-action: rgba(140, 181, 255, 0.28);
  --sh-nav: rgba(0, 0, 0, 0.45);
  --sh-line: rgba(255, 255, 255, 0.1);
  --sh-sheen-top: rgba(255, 255, 255, 0.1);
  --sh-sheen-hero: rgba(255, 255, 255, 0.07);
  --shadow-card: 0 1px 2px var(--sh-ink-1), 0 6px 18px var(--sh-tint);
}
@media (prefers-color-scheme: light) {
  [data-theme='mother'][data-mode='auto'] {
    --sh-ink-1: rgba(56, 35, 53, 0.05);
    --sh-tint: rgba(203, 39, 89, 0.08);
    --sh-hero: rgba(255, 57, 116, 0.16);
    --sh-action: rgba(216, 33, 91, 0.3);
    --sh-nav: rgba(56, 35, 53, 0.09);
    --sh-line: rgba(255, 255, 255, 0.55);
    --sh-sheen-top: rgba(255, 255, 255, 0.14);
    --sh-sheen-hero: rgba(255, 255, 255, 0.7);
    --shadow-card: 0 1px 2px var(--sh-ink-1), 0 6px 18px var(--sh-tint);
  }
  [data-theme='father'][data-mode='auto'] {
    --sh-ink-1: rgba(23, 39, 71, 0.05);
    --sh-tint: rgba(39, 95, 189, 0.08);
    --sh-hero: rgba(61, 120, 220, 0.15);
    --sh-action: rgba(39, 95, 189, 0.3);
    --sh-nav: rgba(23, 39, 71, 0.09);
    --sh-line: rgba(255, 255, 255, 0.55);
    --sh-sheen-top: rgba(255, 255, 255, 0.14);
    --sh-sheen-hero: rgba(255, 255, 255, 0.7);
    --shadow-card: 0 1px 2px var(--sh-ink-1), 0 6px 18px var(--sh-tint);
  }
}
@media (prefers-color-scheme: dark) {
  [data-theme='mother'][data-mode='auto'] {
    --sh-ink-1: rgba(0, 0, 0, 0.28);
    --sh-tint: rgba(0, 0, 0, 0.3);
    --sh-hero: rgba(255, 130, 167, 0.12);
    --sh-action: rgba(255, 143, 177, 0.28);
    --sh-nav: rgba(0, 0, 0, 0.45);
    --sh-line: rgba(255, 255, 255, 0.1);
    --sh-sheen-top: rgba(255, 255, 255, 0.1);
    --sh-sheen-hero: rgba(255, 255, 255, 0.07);
    --shadow-card: 0 1px 2px var(--sh-ink-1), 0 6px 18px var(--sh-tint);
  }
  [data-theme='father'][data-mode='auto'] {
    --sh-ink-1: rgba(0, 0, 0, 0.28);
    --sh-tint: rgba(0, 0, 0, 0.3);
    --sh-hero: rgba(138, 180, 255, 0.12);
    --sh-action: rgba(140, 181, 255, 0.28);
    --sh-nav: rgba(0, 0, 0, 0.45);
    --sh-line: rgba(255, 255, 255, 0.1);
    --sh-sheen-top: rgba(255, 255, 255, 0.1);
    --sh-sheen-hero: rgba(255, 255, 255, 0.07);
    --shadow-card: 0 1px 2px var(--sh-ink-1), 0 6px 18px var(--sh-tint);
  }
}

/* Bố·Đồng·Hành — motion tokens v3.1 (16/09/2026)
   Nguyên tắc "êm như hơi thở": mọi chuyển động là ease-out hữu cơ (bắt đầu nhanh, hạ cánh mềm),
   KHÔNG bounce lặp, KHÔNG parallax, spring chỉ dành cho khoảnh khắc hoàn thành (tick).
   RN/Reanimated: map dur → withTiming(ms), spring → withSpring(damping 14, stiffness 180). */
:root {
  /* thời lượng — 6 bậc */
  --dur-instant: 100ms; /* @kind other */ /* press feedback, ripple màu */
  --dur-fast: 150ms; /* @kind other */ /* toggle, hover, đổi màu control */
  --dur-base: 250ms; /* @kind other */ /* fade nội dung, chevron xoay, tab đổi */
  --dur-gentle: 350ms; /* @kind other */ /* card vào màn, sheet/dialog lên, toast vào */
  --dur-slow: 550ms; /* @kind other */ /* pop tick hoàn thành, hero bé cập nhật tuần */
  --dur-breathe: 1400ms; /* @kind other */ /* skeleton pulse, blob "thở" */
  /* easing — 4 đường cong */
  --ease-out: cubic-bezier(
    0.16,
    1,
    0.3,
    1
  ); /* @kind other */ /* mặc định mọi thứ vào/đổi trạng thái */
  --ease-in-out: cubic-bezier(
    0.65,
    0,
    0.35,
    1
  ); /* @kind other */ /* thứ đi RA khỏi màn (sheet đóng, toast ẩn) */
  --ease-spring: cubic-bezier(
    0.34,
    1.56,
    0.64,
    1
  ); /* @kind other */ /* CHỈ tick hoàn thành & FAB pop — quá đà 1 nhịp rồi đậu */
  --ease-linear: linear; /* @kind other */ /* chỉ progress bar chạy số */
  /* press — chuẩn toàn hệ */
  --press-scale: 0.985; /* @kind other */
  /* combo hay dùng */
  --motion-press:
    transform var(--dur-instant) var(--ease-out),
    background var(--dur-fast) var(--ease-out); /* @kind other */
  --motion-control:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out); /* @kind other */
  --motion-enter: bdh-fade-up var(--dur-gentle) var(--ease-out) both; /* @kind other */
  --motion-pop: bdh-pop var(--dur-slow) var(--ease-spring) both; /* @kind other */
}
/* keyframes toàn hệ */
@keyframes bdh-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes bdh-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes bdh-pop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  60% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bdh-sheet-up {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes bdh-toast-in {
  from {
    transform: translateY(12px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes bdh-sk {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
@keyframes bdh-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}
/* reduced-motion: tắt chuyển động, giữ trạng thái cuối — không tắt đổi màu */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms; /* @kind other */
    --dur-fast: 0ms; /* @kind other */
    --dur-base: 0ms; /* @kind other */
    --dur-gentle: 0ms; /* @kind other */
    --dur-slow: 0ms; /* @kind other */
    --press-scale: 1; /* @kind other */
    --motion-enter: none; /* @kind other */
    --motion-pop: none; /* @kind other */
  }
}

/* ==== fonts/fonts.css ==== */
/* inter-vietnamese-wght-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/inter-vietnamese-wght-normal.woff2?v=5c66f9e07e')
    format('woff2-variations');
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

/* inter-latin-ext-wght-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/inter-latin-ext-wght-normal.woff2?v=34b9c504ca')
    format('woff2-variations');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* inter-latin-wght-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/inter-latin-wght-normal.woff2?v=3100e775e8')
    format('woff2-variations');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* ==== inline <style> #2 ==== */
body {
  margin: 0;
}
a {
  color: var(--c-brandText);
}
a:hover {
  color: var(--c-action);
}
.lp {
  container-type: inline-size;
  container-name: lp;
  font-family: var(--font-sans);
  color: var(--c-ink);
  background: var(--day);
  -webkit-font-smoothing: antialiased;
  --dawn: #fff5e6;
  --day: #f5f9ff;
  --dusk: #fbe9e8;
  --night: #101923;
  --sun: #f0a23b;
  --sunset: #e8735a;
  --moon: #d7e3f7;
  --mom: #cb2759;
  --momSoft: #ffe8ef;
}
.lp[data-mode='dark'] {
  --dawn: #1c1a1f;
  --day: #101923;
  --dusk: #1e1824;
  --night: #0a1120;
  --momSoft: #4b2a3d;
  --mom: #ffa3bf;
}
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}
.hdr {
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: color-mix(in srgb, var(--day) 78%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--c-border) 70%, transparent);
}
.hdr .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
}
.navlinks {
  display: flex;
  gap: 4px;
}
.navlinks a {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-secondary);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
}
.navlinks a:hover {
  color: var(--c-ink);
  background: color-mix(in srgb, var(--c-ink) 6%, transparent);
}
.lang {
  display: inline-flex;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 3px;
  background: var(--c-surface);
}
.lang a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  min-width: 38px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--c-secondary);
}
.lang a.on {
  background: var(--c-ink);
  color: var(--c-canvas);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--c-ink);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.03em;
  min-height: 44px;
}
.brand img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: block;
}
.textlink {
  font-size: 16px;
  font-weight: 650;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.kicker {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-brandText);
  margin: 0;
}
.lede {
  font-size: 20px;
  line-height: 1.5;
  color: var(--c-secondary);
  margin: 0;
}
.body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-secondary);
  margin: 0;
}
.note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-muted);
  margin: 0;
}
.h1 {
  font-size: 88px;
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 800;
  margin: 0;
  text-wrap: balance;
}
.h2 {
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0;
  text-wrap: balance;
}
.h3 {
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0;
}
.num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.06em;
  font-weight: 800;
  line-height: 0.9;
}
/* dawn hero */
.dawn {
  background: linear-gradient(
    180deg,
    var(--dawn) 0%,
    var(--dawn) 55%,
    var(--day) 100%
  );
}
.herogrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 56px;
  padding: 72px 0 0;
  align-items: end;
}
.herogrid .t {
  grid-column: 1 / span 7;
  grid-row: 1;
}
.herogrid .art {
  grid-column: 8 / span 5;
  grid-row: 1;
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  min-height: 360px;
}
.herogrid .art img.couple {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  height: auto;
}
.herogrid .art .bigsun {
  position: absolute;
  right: 40px;
  top: -20px;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--sun) 55%, #fff) 0%,
    color-mix(in srgb, var(--sun) 28%, transparent) 58%,
    transparent 72%
  );
}
.herogrid .art img.hearts {
  position: absolute;
  left: -10px;
  top: 30px;
  width: 120px;
  height: auto;
  opacity: 0.9;
}
.herogrid .s {
  grid-column: 1 / span 6;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-bottom: 10px;
}
.orb {
  display: none;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .orb {
      display: block;
      position: fixed;
      right: 5vw;
      top: 10vh;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      background: var(--sun);
      box-shadow: 0 0 0 10px color-mix(in srgb, var(--sun) 16%, transparent);
      z-index: 4;
      pointer-events: none;
      animation: orbit linear both;
      animation-timeline: scroll(root);
    }
    @keyframes orbit {
      0% {
        top: 10vh;
        background: var(--sun);
        box-shadow: 0 0 0 10px color-mix(in srgb, var(--sun) 16%, transparent);
      }
      40% {
        top: 42vh;
        background: var(--sun);
      }
      56% {
        top: 78vh;
        background: var(--sunset);
        box-shadow: 0 0 0 10px
          color-mix(in srgb, var(--sunset) 16%, transparent);
      }
      62% {
        top: 96vh;
        background: #7a5a74;
        opacity: 0;
      }
      64% {
        top: -8vh;
        background: var(--moon);
        opacity: 0;
      }
      68% {
        top: 12vh;
        background: var(--moon);
        opacity: 1;
        box-shadow: 0 0 0 10px rgba(215, 227, 247, 0.14);
      }
      88% {
        top: 40vh;
        background: var(--moon);
        box-shadow: 0 0 0 10px rgba(215, 227, 247, 0.14);
      }
      94% {
        top: 90vh;
        background: var(--moon);
        opacity: 0;
      }
      96% {
        top: -8vh;
        background: var(--sun);
        opacity: 0;
      }
      100% {
        top: 12vh;
        background: var(--sun);
        opacity: 1;
        box-shadow: 0 0 0 10px color-mix(in srgb, var(--sun) 16%, transparent);
      }
    }
  }
}
.sunrow {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sun {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--sun);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--sun) 18%, transparent);
}
.stage {
  grid-column: 1/-1;
  grid-row: 3;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  padding: 24px 0 0;
  min-height: 600px;
}
.dph {
  width: 252px;
  border-radius: 42px;
  background: #0a0f1b;
  padding: 9px;
  box-shadow:
    0 2px 3px rgba(10, 20, 40, 0.12),
    0 24px 40px -14px rgba(23, 39, 71, 0.3),
    0 60px 100px -30px rgba(23, 39, 71, 0.36);
  position: relative;
  z-index: 2;
}
.dsc {
  border-radius: 33px;
  height: 476px;
  overflow: hidden;
  background: var(--c-canvas);
  padding: 24px 14px 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--c-ink);
}
.dlabel {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.hers {
  margin-left: 120px;
  margin-top: 88px;
}
.acard {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow-card);
}
.cb {
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1.5px solid var(--c-brand);
  margin: 0;
  position: relative;
  flex-shrink: 0;
  background: var(--c-surface);
  cursor: pointer;
}
.cb:checked {
  background: var(--c-action);
  border-color: var(--c-action);
}
.cb:checked::after {
  content: '';
  position: absolute;
  left: 9px;
  top: 4px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.cb:focus-visible {
  outline: 2px solid var(--c-action);
  outline-offset: 3px;
}
.trow {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}
.tl {
  font-size: 15px;
  line-height: 1.35;
  cursor: pointer;
}
.cb:checked + .tl {
  text-decoration: line-through;
  color: var(--c-muted);
}
.mtick {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--c-action);
  position: relative;
  flex-shrink: 0;
}
.mtick::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.link {
  position: absolute;
  left: 50%;
  top: 150px;
  transform: translateX(-50%);
  width: 420px;
  height: 160px;
  z-index: 1;
  pointer-events: none;
}
.linklbl {
  position: absolute;
  left: 50%;
  top: 132px;
  transform: translateX(-50%);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 650;
  color: var(--c-secondary);
  z-index: 3;
  white-space: nowrap;
}
/* ruler */
.ruler {
  margin-top: 72px;
  padding: 28px 0 40px;
  border-top: 1px solid var(--c-border);
}
.ticks {
  display: flex;
  align-items: flex-end;
  gap: 0;
  height: 64px;
  position: relative;
}
.tick {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  position: relative;
  min-width: 0;
}
.tick i {
  display: block;
  width: 1.5px;
  height: 14px;
  background: var(--c-controlBorder);
  border-radius: 1px;
}
.tick.lab i {
  height: 24px;
  background: var(--c-secondary);
}
.tick span {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.tick.now i {
  height: 40px;
  width: 3px;
  background: var(--c-action);
  border-radius: 2px;
}
.tick.now span {
  color: var(--c-brandText);
  font-weight: 800;
}
.flag {
  position: absolute;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-ink);
  color: var(--c-canvas);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: var(--shadow-overlay);
}
.flag::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: var(--c-ink);
  transform: translateX(-50%) rotate(45deg);
}
.tris {
  display: flex;
  margin-top: 14px;
  gap: 4px;
}
.tris div {
  height: 6px;
  border-radius: 999px;
  background: var(--c-border);
}
.tris div.on {
  background: color-mix(in srgb, var(--c-action) 35%, var(--c-border));
}
.trilab {
  display: flex;
  margin-top: 10px;
}
.trilab span {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-muted);
}
/* day timeline */
.day {
  padding: 120px 0 0;
}
.scene {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) auto;
  column-gap: 48px;
  align-items: start;
  padding: 0 0 160px;
}
.rail {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rail img {
  width: 170px;
  height: auto;
  margin-top: 16px;
  align-self: flex-start;
}
.tray {
  display: inline-flex;
  padding: 16px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--c-surface) 70%, transparent);
  border: 1px solid var(--c-border);
  margin-top: 16px;
  align-self: flex-start;
}
.tray img {
  margin: 0;
  width: 150px;
}
.ruler .babyline {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ruler .babyline img {
  width: 72px;
  height: auto;
}
.ruleshead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 32px;
  align-items: end;
}
.ruleshead img {
  width: 200px;
  height: auto;
  justify-self: end;
}
.morninghead {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  align-items: center;
}
.morninghead img {
  width: 100%;
  max-width: 360px;
  height: auto;
  justify-self: end;
}
.time {
  font-size: 104px;
  color: var(--c-ink);
}
.time small {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-brandText);
  margin-top: 14px;
}
.sky {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sky b {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  display: inline-block;
}
.sky span {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-muted);
}
.copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 460px;
  padding-top: 14px;
}
.shots {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.shots .phone:nth-child(2) {
  margin-top: 64px;
}
.phone {
  margin: 0;
  width: 236px;
  border-radius: 36px;
  background: #0a0f1b;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 2px 3px rgba(10, 20, 40, 0.1),
    0 18px 30px -10px rgba(23, 39, 71, 0.28),
    0 46px 80px -24px rgba(23, 39, 71, 0.34);
}
.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 29px;
}
.mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.mini .acard {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dish {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 6px 0;
  border-top: 1px solid var(--c-border);
}
.dish em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-brandText);
  text-transform: uppercase;
}
.dusk {
  height: 320px;
  background: linear-gradient(
    180deg,
    var(--day) 0%,
    var(--dusk) 45%,
    #5a4660 78%,
    var(--night) 100%
  );
}
.lp[data-mode='dark'] .dusk {
  background: linear-gradient(
    180deg,
    var(--day) 0%,
    var(--dusk) 50%,
    var(--night) 100%
  );
}
.night {
  background: var(--night);
  color: var(--c-ink);
  padding: 40px 0 0;
}
.night .time {
  color: var(--c-ink);
}
.wgrid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: 48px;
  margin-top: 64px;
  align-items: start;
}
.wcol {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}
.wrow {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.wrow img {
  display: block;
  height: auto;
  border-radius: 22px;
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.55);
}
.rules {
  display: flex;
  flex-direction: column;
  margin-top: 56px;
  border-top: 1px solid var(--c-border);
}
.rule {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  padding: 36px 0;
  border-bottom: 1px solid var(--c-border);
  align-items: baseline;
}
.rule .big {
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0;
}
.rule .big s {
  color: var(--c-muted);
  text-decoration-thickness: 3px;
  text-decoration-color: var(--sunset);
}
.dawn2 {
  background: linear-gradient(
    180deg,
    var(--night) 0%,
    #5a4660 18%,
    var(--dusk) 42%,
    var(--dawn) 100%
  );
  height: 360px;
}
.lp[data-mode='dark'] .dawn2 {
  background: linear-gradient(
    180deg,
    var(--night) 0%,
    var(--dusk) 50%,
    var(--dawn) 100%
  );
}
.morning {
  background: var(--dawn);
  padding: 0 0 120px;
}
.gal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  justify-items: center;
  margin-top: 56px;
}
.gal figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.gal figcaption {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-secondary);
}
.cta {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: center;
  margin-top: 120px;
  padding: 64px;
  border-radius: 32px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-card);
}
.about {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 48px;
  padding-top: 96px;
}
.dl {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 12px 24px;
  margin: 24px 0 0;
  font-size: 16px;
}
.dl dt {
  color: var(--c-muted);
  font-weight: 600;
}
.dl dd {
  margin: 0;
}
.foot {
  border-top: 1px solid var(--c-border);
  padding: 40px 0 56px;
  background: var(--dawn);
}
.foot .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.foot .links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.foot .links a {
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--c-secondary);
  padding: 0 10px;
}
/* motion: scroll-driven, no JS; stays static where unsupported or reduced */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rise {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
    .shots .phone:nth-child(2).rise {
      animation-range: entry 10% entry 60%;
    }
    @keyframes rise {
      from {
        opacity: 0;
        transform: translateY(48px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
  }
}
@container lp (max-width: 1080px) {
  .h1 {
    font-size: 64px;
  }
  .herogrid .t,
  .herogrid .art,
  .herogrid .s {
    grid-column: 1/-1;
    grid-row: auto;
  }
  .herogrid .art {
    justify-content: center;
    min-height: 0;
  }
  .herogrid .art img.couple {
    max-width: 420px;
  }
  .herogrid .s {
    max-width: 560px;
  }
  .stage {
    grid-row: auto;
  }
  .rail img,
  .tray img {
    width: 96px;
    margin-top: 0;
  }
  .tray {
    padding: 8px;
    margin-top: 0;
  }
  .ruleshead,
  .morninghead {
    grid-template-columns: 1fr;
  }
  .ruleshead img,
  .morninghead img {
    justify-self: start;
    max-width: 220px;
  }
  .scene {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
    padding-bottom: 112px;
  }
  .rail {
    position: static;
    flex-direction: row;
    align-items: baseline;
    gap: 20px;
  }
  .time {
    font-size: 64px;
  }
  .shots {
    flex-wrap: wrap;
  }
  .wgrid,
  .cta,
  .about {
    grid-template-columns: 1fr;
  }
  .rule {
    grid-template-columns: 80px minmax(0, 1fr);
    row-gap: 8px;
  }
  .rule .body {
    grid-column: 2;
  }
  .navlinks {
    display: none;
  }
  .gal {
    grid-template-columns: repeat(3, 236px);
    justify-content: start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 16px;
  }
  .gal figure {
    scroll-snap-align: center;
  }
}
@container lp (max-width: 640px) {
  .wrap {
    padding: 0 20px;
  }
  .h1 {
    font-size: 44px;
  }
  .h2 {
    font-size: 32px;
  }
  .h3 {
    font-size: 22px;
  }
  .lede {
    font-size: 17px;
  }
  .herogrid {
    padding-top: 40px;
    row-gap: 36px;
  }
  .stage {
    flex-direction: column;
    align-items: center;
    min-height: 0;
    gap: 72px;
    padding-top: 56px;
  }
  .hers {
    margin: 0;
  }
  .link,
  .linklbl {
    display: none;
  }
  .dph {
    width: 236px;
  }
  .dsc {
    height: 430px;
  }
  .ticks {
    height: 56px;
  }
  .tick span {
    font-size: 10px;
  }
  .tick:not(.lab):not(.now) span {
    display: none;
  }
  .flag {
    font-size: 12px;
    white-space: normal;
    width: 150px;
    text-align: center;
  }
  .day {
    padding-top: 72px;
  }
  .time {
    font-size: 52px;
  }
  .shots .phone {
    width: 160px;
  }
  .shots .phone:nth-child(2) {
    margin-top: 28px;
  }
  .mini {
    grid-template-columns: 1fr;
  }
  .rule .big {
    font-size: 28px;
  }
  .cta {
    padding: 32px 24px;
    margin-top: 72px;
  }
  .dl {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }
  .dl dd {
    margin-bottom: 10px;
  }
  .gal {
    grid-template-columns: repeat(3, 180px);
  }
  .dusk,
  .dawn2 {
    height: 200px;
  }
}

/* ==== inline <style> #3 ==== */
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
button {
  font: inherit;
  cursor: pointer;
}
img {
  max-width: 100%;
}
.native-button {
  border: 0;
  border-radius: 999px;
  background: var(--c-action, #3266b8);
  color: white;
  padding: 13px 22px;
  font-weight: 650;
  min-height: 44px;
}
.native-button:hover {
  filter: brightness(0.94);
}
[hidden] {
  display: none !important;
}
.previewbar {
  position: sticky;
  top: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fdfcf9;
  border-bottom: 1px solid #dddcd6;
  color: #525560;
  font: 13px/1.4 system-ui;
}
.previewbar button {
  border: 1px solid #d9dce3;
  border-radius: 999px;
  padding: 7px 14px;
  background: white;
  color: #313a4b;
}
.previewbar button.active {
  background: #233750;
  color: white;
  border-color: #233750;
}
.previewbar span {
  margin-right: 12px;
}
.hdr {
  top: 56px;
}
.lp {
  max-width: 100%;
  margin: auto;
  transition: max-width 0.2s;
}
.lp.mobile-preview {
  max-width: 390px;
}
.herogrid .art {
  align-self: stretch;
  align-items: center;
}
.hero-scene {
  width: 130%;
  max-width: none !important;
  margin-left: -12%;
  mask-image: radial-gradient(
    ellipse 64% 67% at 52% 48%,
    #000 50%,
    transparent 81%
  );
}
.herogrid .art .bigsun,
.herogrid .art .hearts {
  display: none;
}
.rail img.story-art {
  width: 238px !important;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  align-self: center;
  margin-top: 6px;
}
.rail .tray {
  display: contents;
}
.morninghead img.story-art {
  max-width: 460px;
}
.ruler .babyline img {
  border-radius: 50%;
  mask-image: radial-gradient(ellipse, #000 52%, transparent 73%);
}
.story-art {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.night .rail img.story-art {
  width: 260px !important;
}
.wrap.day {
  padding-left: 32px;
  padding-right: 32px;
}
.scene {
  grid-template-columns: 220px minmax(0, 1fr) auto;
  column-gap: 30px;
}
.phone {
  width: 210px;
}
.shots {
  gap: 16px;
}
.wgrid {
  grid-template-columns: 1fr 1fr;
}
.wrow img {
  max-width: 100%;
}
.wrow img[width='638'] {
  width: 100% !important;
}
.orb {
  display: none;
}
@container lp (max-width:1080px) {
  .scene {
    grid-template-columns: 1fr;
  }
  .rail {
    align-items: center;
    justify-content: space-between;
  }
  .rail img.story-art,
  .night .rail img.story-art {
    width: 160px !important;
    max-height: 190px;
  }
  .hero-scene {
    width: 100%;
    max-width: 560px !important;
    margin: 0;
  }
  .morninghead img.story-art {
    max-width: 340px;
  }
  .hdr {
    top: 56px;
  }
  .wrap.day {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@container lp (max-width:640px) {
  .herogrid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .rail img.story-art,
  .night .rail img.story-art {
    width: 138px !important;
  }
  .scene {
    padding-bottom: 88px;
  }
  .shots {
    flex-wrap: nowrap;
  }
  .shots .phone {
    width: calc(50% - 8px);
    flex-shrink: 0;
  }
  .shots .phone:only-child {
    width: 190px;
  }
  .wgrid {
    grid-template-columns: 1fr;
  }
  .previewbar span {
    display: none;
  }
  .rail {
    gap: 10px;
  }
  .morninghead img.story-art {
    max-width: 100%;
  }
  .h1 {
    font-size: 43px;
  }
  .lang {
    display: none;
  }
  .hdr .wrap {
    gap: 12px;
  }
}

/* ==== inline <style> #4 ==== */
.time {
  margin: 0;
  font-size: 84px;
}
.lp {
  transition: none;
}
.scene {
  scroll-margin-top: 140px;
}
#day,
#night,
#rules,
#about {
  scroll-margin-top: 120px;
}
@container lp (max-width:640px) {
  .time {
    font-size: 52px;
  }
}

/* ==== pair-demo.css ==== */
.pair-demo {
  position: relative;
  background: linear-gradient(150deg, var(--cream) 20%, var(--bg) 95%);
  border-radius: 25px;
  padding: 25px 32px 22px;
  isolation: isolate;
}
.pair-instruction {
  font-size: 10px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pair-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 108px;
  padding: 30px 0 10px;
  max-width: 790px;
  margin: auto;
}
.pair-device {
  position: relative;
  z-index: 2;
  width: 238px;
  flex-shrink: 0;
}
.pair-mother {
  margin-top: 82px;
}
.pair-label {
  font-size: 11px;
  letter-spacing: 0.13em;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: var(--blue);
  margin: 0 0 13px;
}
.pair-mother .pair-label {
  color: var(--pink);
}
.pair-phone {
  background: #0b1422;
  padding: 7px;
  border-radius: 36px;
  box-shadow:
    0 3px 5px #0a162126,
    0 25px 36px -14px #15294066;
  overflow: hidden;
}
.pair-screen {
  height: 448px;
  overflow-y: auto;
  scrollbar-width: none;
  border-radius: 29px;
  background: #f4f8ff;
  color: #20334e;
  padding: 24px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  --surface: #fff;
  --blue: #2b61b7;
  --on-blue: #fff;
  --faint: #859abd;
  --muted: #64768e;
}
.pair-screen::-webkit-scrollbar {
  display: none;
}
.pair-mother .pair-screen {
  background: #fff8fb;
  color: #392e3c;
  --surface: #fff;
  --blue: #d63271;
  --on-blue: #fff;
  --pink: #d63271;
  --faint: #ba8da6;
  --muted: #877288;
}
.pair-greeting h3 {
  font-size: 19px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin-bottom: 3px;
}
.pair-greeting p {
  font-size: 10px;
  line-height: 1.5;
  color: var(--muted);
}
.pair-card {
  padding: 12px;
  border: 1px solid #dce7f8;
  border-radius: 15px;
  background: var(--surface);
  box-shadow: 0 3px 9px -4px #5278b526;
  flex-shrink: 0;
}
.pair-mother .pair-card {
  border-color: #f4dce8;
  box-shadow: 0 3px 9px -4px #a34c7b1c;
}
.pair-card h4 {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 650;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.pair-phone .task {
  font-size: 11px;
  line-height: 1.4;
  min-height: 44px;
  gap: 8px;
}
.pair-phone .task input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.pair-phone .task input:checked + span {
  text-decoration: line-through;
  text-decoration-color: var(--muted);
}
.pair-add {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 11px;
  font-weight: 600;
  color: var(--blue);
  border: 0;
  background: transparent;
  padding: 0;
  width: 100%;
  text-align: left;
}
.pair-add > span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px dashed var(--faint);
  border-radius: 50%;
  font-size: 13px;
}
.pair-upcoming p {
  font-size: 9px;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 3px;
}
.pair-upcoming strong {
  display: block;
  font-size: 11px;
  line-height: 1.45;
  font-weight: 600;
}
.pair-phone .shared {
  min-height: 30px;
  gap: 8px;
  justify-content: flex-start;
}
.pair-phone .shared-item {
  font-size: 11px;
  line-height: 1.5;
  gap: 8px;
}
.pair-phone .shared-item:before {
  background: var(--pink);
  color: white;
  width: 18px;
  height: 18px;
}
.pair-phone .shared .note {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.7;
}
.pair-own-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  font-size: 11px;
  line-height: 1.5;
}
.pair-own-row i {
  width: 20px;
  height: 20px;
  border: 1px solid var(--pink);
  border-radius: 50%;
  flex-shrink: 0;
}
.pair-link {
  position: absolute;
  z-index: 0;
  left: 50%;
  transform: translateX(-50%);
  top: 135px;
  width: 400px;
  height: 150px;
  color: color-mix(in srgb, var(--blue) 35%, var(--border));
}
.pair-link-label {
  position: absolute;
  z-index: 3;
  top: 143px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  color: var(--blue);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 7px 11px;
  font-size: 9px;
  font-weight: 550;
  white-space: nowrap;
  pointer-events: none;
}
.pair-footnote {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.7;
  text-align: center;
  margin-top: 15px;
}
.lp[data-mode='dark'] .pair-phone {
  background: #050d18;
  box-shadow:
    0 3px 5px #0004,
    0 25px 36px -14px #0008;
}
.lp[data-mode='dark'] .pair-screen {
  background: #122136;
  color: #e6effd;
  --surface: #20324b;
  --blue: #a3c5ff;
  --on-blue: #172c49;
  --faint: #829bbd;
  --muted: #a5b8d3;
}
.lp[data-mode='dark'] .pair-mother .pair-screen {
  background: #281e2b;
  color: #fbe8f3;
  --surface: #3a2a3d;
  --blue: #ffa8ca;
  --on-blue: #3b1830;
  --pink: #ffa8ca;
  --faint: #b993ad;
  --muted: #ceb0c5;
}
.lp[data-mode='dark'] .pair-card {
  border-color: #344d70;
  box-shadow: 0 3px 9px -4px #0003;
}
.lp[data-mode='dark'] .pair-mother .pair-card {
  border-color: #614059;
}
.lp[data-mode='dark'] .pair-mother .shared-item:before {
  color: #3b1830;
}
@container lp (max-width:850px) {
  .pair-stage {
    gap: 60px;
  }
  .pair-demo {
    padding-inline: 22px;
  }
  .pair-device {
    width: 223px;
  }
  .pair-screen {
    padding-inline: 11px;
  }
  .pair-link-label {
    font-size: 8px;
    padding: 6px 9px;
  }
}
@container lp (max-width:640px) {
  .pair-demo {
    padding: 18px 10px 16px;
    border-radius: 20px;
    margin-inline: -10px;
  }
  .pair-instruction {
    font-size: 8px;
    letter-spacing: 0.07em;
    text-align: center;
    max-width: 285px;
    margin: auto;
  }
  .pair-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    padding: 28px 0 4px;
    max-width: 355px;
  }
  .pair-device {
    width: 100%;
    min-width: 0;
  }
  .pair-mother {
    margin-top: 58px;
  }
  .pair-label {
    font-size: 9px;
    margin-bottom: 9px;
  }
  .pair-phone {
    padding: 5px;
    border-radius: 25px;
    box-shadow:
      0 2px 4px #0002,
      0 19px 28px -15px #15294070;
  }
  .pair-screen {
    height: 366px;
    border-radius: 20px;
    padding: 17px 8px 10px;
    gap: 10px;
  }
  .pair-greeting h3 {
    font-size: 14px;
    line-height: 1.3;
  }
  .pair-greeting p {
    font-size: 8px;
    line-height: 1.5;
  }
  .pair-card {
    padding: 9px 7px;
    border-radius: 12px;
  }
  .pair-card h4 {
    font-size: 10px;
    margin-bottom: 5px;
    line-height: 1.4;
  }
  .pair-phone .task {
    font-size: 9px;
    line-height: 1.5;
    gap: 6px;
    min-height: 44px;
  }
  .pair-phone .task input {
    width: 17px;
    height: 17px;
  }
  .pair-phone .task input:checked:after {
    font-size: 11px;
  }
  .pair-add {
    font-size: 9px;
    gap: 6px;
    min-height: 36px;
  }
  .pair-add > span {
    width: 17px;
    height: 17px;
    font-size: 11px;
  }
  .pair-upcoming p {
    font-size: 8px;
  }
  .pair-upcoming strong {
    font-size: 9px;
    line-height: 1.45;
  }
  .pair-phone .shared {
    min-height: 24px;
    gap: 7px;
  }
  .pair-phone .shared-item {
    font-size: 9px;
    gap: 6px;
    line-height: 1.6;
  }
  .pair-phone .shared-item:before {
    width: 15px;
    height: 15px;
    font-size: 9px;
  }
  .pair-phone .shared .note {
    font-size: 9px;
  }
  .pair-own-row {
    font-size: 9px;
    gap: 6px;
    min-height: 36px;
  }
  .pair-own-row i {
    width: 17px;
    height: 17px;
  }
  .pair-link {
    width: 165px;
    height: 100px;
    top: 114px;
  }
  .pair-link-label {
    top: 120px;
    font-size: 7px;
    padding: 5px 7px;
    max-width: 132px;
    white-space: normal;
    text-align: center;
    line-height: 1.5;
  }
  .pair-footnote {
    font-size: 9px;
    line-height: 1.7;
    margin: 12px auto 0;
    max-width: 270px;
  }
}
.pair-screen p {
  margin: 0;
}
.pair-phone .task {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.pair-phone .task input {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 1.3px solid var(--faint);
  border-radius: 50%;
  background: var(--surface);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.pair-phone .task input:checked {
  background: var(--blue);
  border-color: var(--blue);
}
.pair-phone .task input:checked:after {
  content: '✓';
  font-size: 13px;
  font-weight: 650;
  color: var(--on-blue);
}
.pair-phone .shared {
  display: flex;
  flex-direction: column;
}
.pair-phone .shared-item {
  display: flex;
  align-items: center;
  animation: pair-arrive 0.2s ease;
}
.pair-phone .shared-item:before {
  content: '✓';
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 10px;
}
.pair-phone .task input:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
@keyframes pair-arrive {
  from {
    opacity: 0.2;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@container lp (max-width:640px) {
  .pair-phone .task,
  .pair-phone .shared-item,
  .pair-own-row {
    font-size: 10.5px;
    line-height: 1.45;
  }
  .pair-card h4 {
    font-size: 11px;
  }
  .pair-add {
    font-size: 10px;
  }
  .pair-upcoming strong {
    font-size: 10px;
  }
  .pair-link-label {
    max-width: 125px;
  }
}

/* ==== journey.css ==== */
.reviewbar {
  height: 52px;
  position: sticky;
  top: 0;
  z-index: 40;
  background: #f8fafc;
  border-bottom: 1px solid #dce5ef;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  color: #5c6d7f;
}
.reviewbar span {
  margin-right: 18px;
}
.reviewbar button {
  min-height: 34px;
  border: 0;
  border-radius: 99px;
  background: transparent;
  padding: 7px 12px;
}
.reviewbar button[aria-pressed='true'] {
  background: #203b56;
  color: white;
}
.reviewbar .theme-control {
  margin-left: 10px;
  border: 1px solid #dce5ef;
  background: white;
  min-width: 68px;
}
.carousel {
  background: var(--soft);
  border-radius: 22px;
  padding: 20px;
  min-width: 0;
  position: relative;
}
.tabs {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.tab {
  border: 1px solid transparent;
  min-height: 44px;
  font-size: 11px;
  padding: 9px 13px;
  border-radius: 99px;
  background: transparent;
  color: var(--muted);
  font-weight: 550;
}
.tab[aria-selected='true'] {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
  box-shadow: 0 2px 4px #00000005;
}
.screen-stage {
  display: flex;
  justify-content: center;
  gap: 12px;
  align-items: center;
}
.screen-zoom {
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 29px;
  position: relative;
  max-width: 100%;
  cursor: zoom-in;
}
.screen-device {
  width: 215px;
  background: #101a29;
  padding: 7px;
  border-radius: 30px;
  box-shadow: 0 14px 30px -15px #0c1b3070;
}
.screen-device img {
  width: 100%;
  border-radius: 23px;
  aspect-ratio: 780/1688;
  object-fit: cover;
}
.carousel [role='tabpanel'] {
  width: 100%;
}
.carousel figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
}
.carousel figcaption {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  text-align: center;
  max-width: 300px;
}
.zoom-hint {
  margin-top: 14px;
  text-align: center;
  font-size: 10px;
  color: var(--faint);
}
.carousel-nav {
  position: absolute;
  top: 50%;
  width: 32px;
  height: 44px;
  border: 0;
  background: var(--surface);
  border-radius: 99px;
  color: var(--muted);
  font-size: 20px;
}
.carousel-nav.prev {
  left: 13px;
}
.carousel-nav.next {
  right: 13px;
}
dialog {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 28px;
  max-width: min(470px, calc(100vw - 32px));
  width: 100%;
  box-shadow: 0 24px 100px #0003;
}
dialog::backdrop {
  background: #071321b5;
  backdrop-filter: blur(6px);
}
.dialog-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.dialog-top h2 {
  font-size: 25px;
}
.close-dialog {
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: var(--soft);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  flex-shrink: 0;
}
dialog label {
  font-size: 13px;
  font-weight: 600;
  display: block;
  margin: 20px 0 8px;
}
dialog input {
  display: block;
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
}
dialog form .button {
  width: 100%;
  margin-top: 16px;
}
dialog .note {
  margin-top: 12px;
}
dialog .body-text {
  font-size: 13px;
}
dialog .email-fallback {
  padding-top: 16px;
  margin-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
}
.email-fallback button {
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 12px;
  text-decoration: underline;
  padding: 5px 0;
  min-height: 36px;
}
.copy-status {
  font-size: 11px;
  display: block;
  min-height: 18px;
}
.zoom-dialog {
  max-width: 94vw;
  width: auto;
  background: var(--bg);
  padding: 15px;
}
.zoom-dialog .dialog-top {
  margin-bottom: 12px;
}
.zoom-dialog .dialog-top p {
  font-size: 12px;
  line-height: 1.5;
  max-width: 420px;
  color: var(--muted);
}
.zoom-dialog > img {
  max-height: 76vh;
  width: auto;
  max-width: 88vw;
  margin: auto;
  object-fit: contain;
  border-radius: 10px;
}
.zoom-dialog .close-dialog {
  width: 36px;
  height: 36px;
}
.jump-mobile {
  display: none;
}
.lp,
.night {
  --ink: var(--c-ink);
  --muted: var(--c-secondary);
  --faint: var(--c-muted);
  --surface: var(--c-surface);
  --bg: var(--day);
  --soft: var(--c-subtle);
  --border: var(--c-border);
  --blue: var(--c-brandText);
  --on-blue: var(--c-onAction);
}
body {
  background: #e9edf3;
}
.lp {
  font-family: Inter, system-ui, sans-serif;
  container-name: lp;
}
.lp[data-view='mobile'] {
  max-width: 390px;
}
.lp[data-view='se'] {
  max-width: 375px;
}
.hdr {
  top: 52px;
}
.herogrid .pair-demo {
  grid-column: 1/-1;
  grid-row: 3;
  background: transparent;
  padding-inline: 25px;
  padding-bottom: 20px;
  border-radius: 0;
}
.herogrid .pair-stage {
  padding-top: 30px;
}
.herogrid .art .hero-scene {
  mask-image: none;
  width: 100%;
  max-width: 440px !important;
  margin: 0;
  max-height: 410px;
  object-fit: contain;
}
.herogrid .s {
  gap: 18px;
}
.herogrid .art .bigsun,
.herogrid .art .hearts {
  display: none;
}
.herogrid .pair-footnote {
  max-width: none;
}
.pair-demo {
  --cream: var(--dawn);
}
.pair-device {
  --surface: var(--c-surface);
  --border: var(--c-border);
  --blue: var(--c-brandText);
  --pink: #d63271;
}
.lp[data-mode='dark'] .pair-device {
  --pink: #ffa8ca;
}
.native-button,
.button {
  color: var(--c-onAction);
  background: var(--c-action);
  border: 0;
  border-radius: 99px;
  font:
    600 14px/1.4 Inter,
    system-ui,
    sans-serif;
  min-height: 48px;
  padding: 13px 21px;
  cursor: pointer;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
}
.scene {
  grid-template-columns: 220px minmax(0, 1fr) 284px;
  gap: 30px;
  align-items: start;
  padding-bottom: 115px;
}
.scene .time {
  font-size: 84px;
  margin: 0;
}
.scene .rail {
  top: 145px;
  gap: 17px;
}
.scene .rail img.story-art {
  width: 210px !important;
  align-self: center;
}
.journey-carousel {
  width: 284px;
  max-width: 100%;
  background: color-mix(in srgb, var(--c-surface) 65%, transparent);
  border: 1px solid var(--c-border);
  border-radius: 24px;
  padding: 15px 23px;
  --border: var(--c-border);
  --surface: var(--c-surface);
  --ink: var(--c-ink);
  --muted: var(--c-secondary);
  --faint: var(--c-muted);
  --soft: var(--c-subtle);
}
.tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 14px;
}
.tab {
  border: 1px solid transparent;
  background: transparent;
  color: var(--c-secondary);
  font:
    550 11px/1.4 Inter,
    system-ui,
    sans-serif;
  padding: 8px 10px;
  min-height: 44px;
  border-radius: 99px;
  cursor: pointer;
}
.tab[aria-selected='true'] {
  background: var(--c-surface);
  color: var(--c-ink);
  border-color: var(--c-border);
}
.screen-zoom {
  cursor: zoom-in;
}
.journey-carousel .screen-device {
  width: 218px;
  max-width: 100%;
  background: #0a1321;
  padding: 7px;
  border-radius: 31px;
  box-shadow: 0 14px 30px -15px #0c1b3070;
}
.journey-carousel .screen-device img {
  border-radius: 24px;
  width: 100%;
  height: auto;
}
.journey-carousel .carousel-nav {
  width: 26px;
  height: 42px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  z-index: 2;
}
.journey-carousel .prev {
  left: 4px;
}
.journey-carousel .next {
  right: 4px;
}
.journey-carousel figcaption {
  font-size: 12px;
  color: var(--c-secondary);
  text-align: center;
}
.journey-carousel .zoom-hint {
  font-size: 10px;
  line-height: 1.5;
  color: var(--c-muted);
}
.screen-zoom {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 100%;
  display: block;
}
.screen-zoom img {
  max-width: 100%;
}
.wrow .screen-zoom {
  width: 100%;
  max-width: 372px;
}
.wrow img {
  box-shadow: none;
  max-width: 100%;
  height: auto;
}
.wgrid {
  grid-template-columns: 1fr 1fr;
}
.morning .gal {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gal .phone {
  max-width: 100%;
  width: 228px;
}
.gal .screen-zoom {
  width: 100%;
}
.journey-cta {
  scroll-margin-top: 150px;
}
.journey-cta .closing-copy {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
}
.journey-cta h2 {
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -0.04em;
}
.journey-cta img {
  max-height: 220px;
  object-fit: contain;
}
.journey-cta .body-text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-secondary);
}
dialog {
  font-family: Inter, system-ui, sans-serif;
}
.dialog-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 18px;
}
.dialog-top h2 {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin: 0;
}
dialog .body-text {
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-secondary);
}
dialog form .button {
  margin-top: 15px;
  width: 100%;
}
.email-fallback {
  color: var(--c-secondary);
}
dialog:not(.zoom-dialog) {
  width: calc(100cqw - 32px);
}
.scene .copy {
  min-width: 0;
}
.lp #day,
.lp #night,
.lp #rules,
.lp #about {
  scroll-margin-top: 140px;
}
.lp .orb {
  display: none;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--c-action);
  outline-offset: 4px;
}
.herogrid .pair-demo .pair-stage {
  gap: 108px;
}
.herogrid .pair-device {
  width: 238px;
}
.herogrid .pair-label {
  font-size: 11px;
}
.herogrid .pair-instruction {
  font-size: 10px;
  color: var(--c-secondary);
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .lp[data-view='desktop'] .orb {
      display: block;
      right: 3vw;
      width: 20px;
      height: 20px;
      z-index: 4;
    }
  }
}
@container lp (max-width:1080px) {
  .herogrid .pair-demo {
    grid-row: auto;
  }
  .scene {
    grid-template-columns: 160px minmax(0, 1fr) 270px;
    column-gap: 22px;
  }
  .scene .time {
    font-size: 64px;
  }
  .scene .rail {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .scene .rail img.story-art {
    width: 150px !important;
  }
  .journey-carousel {
    width: 270px;
    padding-inline: 18px;
  }
  .scene .copy {
    grid-column: auto;
  }
  .herogrid .art .hero-scene {
    max-height: 340px;
  }
  .herogrid .s {
    max-width: 600px;
  }
  .herogrid {
    row-gap: 30px;
  }
  .scene > div[style*='grid-column'] {
    grid-column: 2/-1 !important;
  }
  .wgrid {
    gap: 25px;
  }
}
@container lp (max-width:800px) {
  .scene {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 25px;
    padding-bottom: 84px;
  }
  .scene .rail {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .scene .rail .sky {
    flex-basis: 100%;
  }
  .scene .rail img.story-art {
    max-height: 145px;
    width: 130px !important;
  }
  .scene .copy {
    max-width: 100%;
    padding-top: 0;
  }
  .scene .rail .time {
    font-size: 64px;
  }
  .journey-carousel {
    width: 100%;
    max-width: 400px;
    justify-self: center;
    padding: 16px 30px;
  }
  .journey-carousel .screen-device {
    width: 236px;
  }
  .journey-carousel .prev {
    left: 15px;
  }
  .journey-carousel .next {
    right: 15px;
  }
  .scene > div[style*='grid-column'] {
    grid-column: 1/-1 !important;
  }
  .herogrid .pair-demo .pair-stage {
    gap: 50px;
  }
  .herogrid .pair-device {
    width: 220px;
  }
  .ruleshead {
    gap: 22px;
  }
  .ruleshead img {
    display: none;
  }
  .wgrid {
    grid-template-columns: 1fr;
  }
  .wrow {
    gap: 14px;
  }
  .gal {
    gap: 18px !important;
  }
  .journey-cta {
    grid-template-columns: 1fr;
    padding: 30px;
  }
  .journey-cta img {
    max-height: 170px;
    max-width: 260px;
  }
  .morninghead {
    gap: 25px;
  }
  .morninghead img.story-art {
    max-width: 280px;
  }
  .day > div:first-child {
    padding-bottom: 50px !important;
  }
}
@container lp (max-width:640px) {
  .wrap {
    padding-inline: 22px;
  }
  .herogrid {
    padding: 32px 22px 0;
    row-gap: 20px;
  }
  .herogrid .t {
    gap: 17px !important;
  }
  .herogrid .h1 {
    font-size: 40px;
    line-height: 1.08;
  }
  .herogrid .art {
    display: none;
  }
  .herogrid .s {
    gap: 14px;
  }
  .herogrid .s .lede {
    font-size: 15px;
    line-height: 1.75;
  }
  .herogrid .s > div {
    gap: 10px 16px !important;
  }
  .herogrid .s .textlink {
    font-size: 13px;
  }
  .herogrid .s .note {
    font-size: 11px;
  }
  .herogrid .pair-demo {
    padding: 15px 0 0;
    margin: 0 -8px;
  }
  .herogrid .pair-demo .pair-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    max-width: 355px;
    padding-top: 25px;
  }
  .herogrid .pair-device {
    width: 100%;
  }
  .herogrid .pair-label {
    font-size: 9px;
  }
  .herogrid .pair-instruction {
    font-size: 8px;
    line-height: 1.7;
    max-width: 300px;
    margin: auto;
  }
  .pair-footnote {
    font-size: 9px !important;
  }
  .ruler {
    margin-top: 20px;
    padding: 20px 0 25px;
  }
  .ruler .babyline {
    gap: 10px;
  }
  .ruler .babyline img {
    width: 48px;
  }
  .ruler .kicker {
    font-size: 9px;
  }
  .ruler .note {
    font-size: 11px;
  }
  .ruler > div:first-child {
    gap: 12px !important;
  }
  .flag {
    bottom: 65px;
    font-size: 10px;
    min-width: 130px;
    padding: 8px 9px;
  }
  .ticks {
    margin-top: 65px !important;
  }
  .ruler .tris {
    margin-top: 8px;
  }
  .trilab span {
    font-size: 9px;
  }
  .day {
    padding-top: 55px !important;
  }
  .day > div:first-child {
    padding-bottom: 40px !important;
  }
  .h2 {
    font-size: 29px;
    line-height: 1.15;
  }
  .h3 {
    font-size: 22px;
    line-height: 1.25;
  }
  .lede {
    font-size: 15px;
  }
  .body {
    font-size: 14px;
    line-height: 1.8;
  }
  .note {
    font-size: 11px;
  }
  .scene {
    padding-bottom: 75px;
    row-gap: 20px;
  }
  .scene .rail .time {
    font-size: 56px;
  }
  .scene .time small {
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  .scene .rail {
    gap: 11px;
  }
  .scene .rail img.story-art {
    width: 130px !important;
    max-height: 155px;
  }
  .scene .rail .sky {
    font-size: 11px;
  }
  .sky span {
    font-size: 11px;
  }
  .journey-carousel {
    padding: 15px 30px;
    border-radius: 22px;
  }
  .journey-carousel .screen-device {
    width: 226px;
  }
  .journey-carousel .prev {
    left: 10px;
  }
  .journey-carousel .next {
    right: 10px;
  }
  .journey-carousel .tab {
    font-size: 10px;
  }
  .mini {
    grid-template-columns: 1fr 1fr;
  }
  .mini .acard {
    padding: 13px 10px;
    min-height: 160px;
  }
  .mini .native-button {
    padding: 10px 12px;
    font-size: 11px;
  }
  .mini .dish {
    font-size: 11px;
    flex-wrap: wrap;
    gap: 2px;
  }
  .mini .dish em {
    font-size: 9px;
  }
  .mini .kicker {
    font-size: 10px;
  }
  .dusk,
  .dawn2 {
    height: 170px;
  }
  .night {
    padding-top: 0;
  }
  .night .scene {
    padding-top: 28px !important;
  }
  .night .scene > div[style*='grid-column'] {
    min-width: 0;
  }
  .wgrid {
    margin-top: 20px !important;
    gap: 22px;
  }
  .wrow .screen-zoom {
    width: 100%;
  }
  .wrow img {
    width: 100% !important;
  }
  .wrow img[width='291'] {
    max-width: 170px;
  }
  .wcol {
    gap: 10px;
  }
  .wcol .kicker {
    font-size: 10px;
  }
  .ruleshead .h2 {
    font-size: 27px;
  }
  .rules {
    margin-top: 28px;
  }
  .rule {
    grid-template-columns: 35px minmax(0, 1fr);
    column-gap: 15px;
    padding-block: 23px;
  }
  .rule .big {
    font-size: 25px;
  }
  .rule > span.num {
    font-size: 23px !important;
  }
  .rule .body {
    grid-column: 2;
  }
  .night #rules {
    padding-bottom: 55px !important;
  }
  .night .scene[style*='padding-bottom'] {
    padding-bottom: 65px !important;
  }
  .morning {
    padding-bottom: 55px;
  }
  .morninghead img.story-art {
    display: none;
  }
  .morninghead .h2 {
    font-size: 28px;
  }
  .morning .gal {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px !important;
    padding-bottom: 18px;
    margin-top: 30px;
  }
  .morning .gal > figure {
    min-width: 225px;
    scroll-snap-align: center;
  }
  .gal .phone {
    width: 225px;
  }
  .gal figcaption {
    font-size: 12px;
  }
  .journey-cta {
    margin-top: 45px;
    gap: 24px;
    padding: 25px 20px;
    scroll-margin-top: 130px;
  }
  .journey-cta h2 {
    font-size: 29px;
  }
  .journey-cta .body-text {
    font-size: 14px;
  }
  .about {
    padding-top: 45px;
    gap: 22px;
  }
  .about .body {
    font-size: 13px;
  }
  .about > h2 {
    font-size: 26px !important;
  }
  .dl {
    font-size: 13px;
    margin-top: 18px;
  }
  .foot {
    padding-block: 25px;
  }
  .foot .brand {
    font-size: 17px;
  }
  .foot .links a {
    font-size: 12px;
  }
  .foot .note {
    font-size: 10px;
  }
  .native-button,
  .button {
    font-size: 12px;
    padding: 12px 16px;
  }
  .brand {
    font-size: 18px;
  }
  .hdr .wrap {
    gap: 12px;
  }
  .hdr .textlink {
    font-size: 12px;
    white-space: nowrap;
  }
  .kicker {
    font-size: 10px;
  }
  .sunrow {
    gap: 12px;
  }
  .lp .orb {
    display: none !important;
  }
}
@media (max-width: 640px) {
  .reviewbar span {
    display: none;
  }
  .reviewbar button {
    padding-inline: 10px;
  }
  .reviewbar {
    gap: 4px;
  }
}
/* gallery strip: no raw scrollbar — a right-edge fade, a peeking card and dots say "scrollable" */
.gal {
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-padding-inline: 22px;
}
.gal::-webkit-scrollbar {
  display: none;
}
.gal:not(.at-end) {
  mask-image: linear-gradient(
    90deg,
    #000 0,
    #000 calc(100% - 64px),
    transparent
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0,
    #000 calc(100% - 64px),
    transparent
  );
}
.gal-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}
.gal-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: var(--c-border);
  cursor: pointer;
  min-height: 0;
  transition:
    width 0.18s ease,
    background 0.18s ease;
}
.gal-dots button[aria-current='true'] {
  background: var(--c-action);
  width: 22px;
}
.gal-dots button:focus-visible {
  outline: 2px solid var(--c-action);
  outline-offset: 4px;
}
.gal-dots[hidden] {
  display: none;
}
/* zoom dialog: the image is centred whatever the caption width (inline img + margin:auto never centred it) */
.zoom-dialog[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.zoom-dialog .dialog-top {
  width: 100%;
  align-self: stretch;
}
.zoom-dialog > img {
  display: block;
  margin: 0 auto;
}
/* enlarged app screenshots keep the same graphite phone frame as on the page */
.zoom-frame {
  display: block;
  margin: 0 auto;
  max-width: 88vw;
}
.zoom-frame img {
  display: block;
  max-height: 76vh;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 10px;
}
.zoom-frame.phone {
  padding: var(--device-inset, 4px);
  border: 1px solid var(--device-edge, #617188);
  border-radius: var(--device-radius, 30px);
  background: var(--device-shell, #344154);
  box-shadow: var(--device-shadow);
}
.zoom-frame.phone img {
  border-radius: var(--device-screen-radius, 25px);
  max-height: calc(76vh - 10px);
}
/* the enlarged view is the picture alone: no caption, just the close button (alt text stays on the img) */
.zoom-dialog #zoom-caption {
  display: none;
}
.zoom-dialog .dialog-top {
  justify-content: flex-end;
  margin-bottom: 8px;
}

/* ==== device-frames.css ==== */
/* Shared frame geometry for live demos and captured app screens. */
.lp {
  --device-shell: #344154;
  --device-edge: #617188;
  --device-radius: 30px;
  --device-inset: 4px;
  --device-screen-radius: 25px;
  --device-shadow: 0 2px 5px #172b4514, 0 18px 30px -21px #172b456b;
}
.lp[data-mode='dark'],
.night {
  --device-shell: #27364a;
  --device-edge: #53647a;
  --device-shadow: 0 2px 5px #0003, 0 18px 30px -21px #0009;
}
.lp .pair-phone,
.lp[data-mode='dark'] .pair-phone,
.lp .journey-carousel .screen-device,
.lp .gal .phone {
  position: relative;
  padding: var(--device-inset);
  border: 1px solid var(--device-edge);
  border-radius: var(--device-radius);
  background: var(--device-shell);
  box-shadow:
    var(--device-shadow),
    inset 0 0 0 0.5px #ffffff1a;
  overflow: hidden;
  isolation: isolate;
}
.lp .pair-screen,
.lp .journey-carousel .screen-device img,
.lp .gal .phone img {
  border-radius: var(--device-screen-radius);
}
.lp .pair-phone:before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 25px;
  height: 2px;
  border-radius: 99px;
  background: #60758f40;
  z-index: 2;
  pointer-events: none;
}
.lp .pair-phone:after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 3px;
  border-radius: 99px;
  background: #6d7f9952;
  z-index: 2;
  pointer-events: none;
}
.lp .pair-screen {
  padding-top: 24px;
  padding-bottom: 20px;
}
.lp .pair-card {
  box-shadow: 0 2px 5px -3px #5278b51a;
}
.lp[data-mode='dark'] .pair-card,
.lp[data-mode='dark'] .pair-mother .pair-card {
  box-shadow: none;
}
.lp .wrow img[aria-hidden='true'] {
  width: 56px !important;
  max-width: 56px !important;
  height: auto !important;
  flex: 0 0 56px;
  object-fit: contain;
  box-shadow: none;
  border-radius: 0;
}
@container lp (max-width:640px) {
  .lp .pair-phone,
  .lp .journey-carousel .screen-device,
  .lp .gal .phone {
    --device-radius: 25px;
    --device-screen-radius: 21px;
    --device-inset: 3px;
  }
  .lp .pair-screen {
    padding-top: 19px;
    padding-bottom: 17px;
  }
  .lp .pair-phone:before {
    width: 20px;
    height: 2px;
    top: 8px;
  }
  .lp .pair-phone:after {
    width: 33px;
    height: 2px;
    bottom: 8px;
  }
  .lp .wrow img[aria-hidden='true'] {
    width: 44px !important;
    max-width: 44px !important;
    flex-basis: 44px;
  }
}

/* ==== inline <style> #5 ==== */
.production .hdr {
  top: 0;
}
.production .lp {
  max-width: 100%;
}
.production #day,
.production #night,
.production #rules,
.production #about,
.production #beta {
  scroll-margin-top: 90px;
}

/* ==== build-site.mjs header + footer (public-site Q10) ====
   Not in the handoff. The handoff dropped the VI/EN switch and the legal
   links; the build keeps both and dresses them in the handoff's own classes
   (.hdr .brand .navlinks .lang .textlink · .foot .row .links .note). Block #3
   hides .lang at <=640px because the handoff had no switch to keep; here it
   stays, and the header's beta link gives way instead (the hero's beta
   button is right under it). */
.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 20;
  padding: 12px 16px;
  border-radius: 12px;
  background: #ffffff;
  color: #172747;
  font:
    600 15px/1.2 'Inter',
    system-ui,
    sans-serif;
}
.skip:focus {
  left: 16px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.production .hdr .hdr-end {
  display: flex;
  align-items: center;
  gap: 16px;
}
.production .hdr .lang {
  display: inline-flex;
}
.production .hdr .lang a.on:hover {
  color: var(--c-canvas);
}
.production .foot > .wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.production .foot .links a:hover {
  color: var(--c-ink);
}
@container lp (max-width:640px) {
  .production .hdr .hdr-end .textlink {
    display: none;
  }
}

/* ==== LP-UX-17 (31/10): the week flag on the 40-week ruler ====
   `.tick.now span` (0,2,1) out-ranks `.flag` (0,1,0), so the flag took the
   brand blue on its ink background: 2.33:1 at 10px, measured at 390 light.
   The flag's own colour is the one meant. */
.tick.now .flag {
  color: var(--c-canvas);
}

/* ==== LP-UX-18 (31/10): muted text inside the light phone mock-ups ====
   The handoff's --muted measured 4.36:1 (father, #64768e on #f4f8ff) and
   4.19:1 (mother, #877288 on #fff8fb) for the 8–10px «Tuần 24, ngày 1»
   line. Same hue, a step darker: 4.61 and 4.67. Dark mode is untouched
   (its rule out-ranks these). */
.pair-screen {
  --muted: #617289;
}
.pair-mother .pair-screen {
  --muted: #7e6b7f;
}

/* ==== LP-UX-19 (31/10): the week flag overlapped the ruler's note ====
   The flag rises 72px above the ticks, but the markup puts the ticks 20px
   under the note (inline style), so at 1280 the flag covered «Việc và thực
   đơn đổi theo vạch này…». The flag's own height, at every width (the
   ≤640px rule's 65px is out-ranked on purpose). */
.ruler .ticks {
  margin-top: 72px !important;
}