/*
  Weekmark — CSS chung của landing (9 trang: en, de/, fr/).
  Theo chuẩn landing của Nextling (nextling/site/public/index.html, ui-audit §2,
  §3.4–3.5): màu lấy đúng token của app (lib/core/theme/dosely_theme.dart,
  DataColors trong tokens.dart), bo góc/khoảng cách/chuyển động theo
  DoselyRadius / DoselySpacing / DoselyMotion, tôn trọng prefers-reduced-motion.

  Quy tắc dùng (giống app):
  - Nút có chữ chỉ dùng cặp đã đo: primary/on-primary (tô màu) hoặc pc/on-pc (tonal).
  - Mỗi khung nhìn một nút tô màu: nút waitlist; nút trên thanh lùi về tonal khi
    form đang hiện (site.js).
  - Hổ phách --dose chỉ đánh dấu D0 (liều), luôn kèm viền --protein; không đặt chữ lên.
  - Màu dữ liệu (protein, fiber, water, pro) đúng vai trò; --error chỉ cho lỗi.
  Contrast (chữ ≥ 4,5:1, icon/viền ≥ 3:1, sáng và tối) khoá bằng
  test/l10n/site_standard_test.dart, đọc bảng cặp `@pair` dưới đây.

  @pair ink / bg text
  @pair ink / surface text
  @pair ink / low text
  @pair ink / s2 text
  @pair ink / art-a text
  @pair ink / art-b text
  @pair muted / bg text
  @pair muted / surface text
  @pair muted / low text
  @pair muted / s2 text
  @pair muted / art-a text
  @pair muted / art-b text
  @pair muted / glow-a text
  @pair muted / glow-b text
  @pair muted / glow-c text
  @pair primary / bg text
  @pair primary / surface text
  @pair primary / low text
  @pair primary / glow-a text
  @pair primary / glow-b text
  @pair primary / glow-c text
  @pair on-primary / primary text
  @pair on-pc / pc text
  @pair on-pc / surface text
  @pair protein / protein-c text
  @pair protein / surface text
  @pair fiber / fiber-c text
  @pair fiber / surface text
  @pair water / water-c text
  @pair pro / pro-c text
  @pair pro / surface text
  @pair outline / bg non-text
  @pair outline / surface non-text
  @pair outline / low non-text
  @pair outline / art-a non-text
  @pair primary / art-a non-text
  @pair primary / pc non-text
  @pair protein / art-a non-text
  @pair fiber / bg non-text
  @pair water / water-c non-text
  @pair water / surface non-text
  @pair fiber / bg text
  @pair error / bg text
  @pair error / surface text
  @pair fiber / glow-a text
  @pair error / glow-a text
*/
@font-face { font-family: "Figtree"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/Figtree-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/Figtree-Bold.ttf") format("truetype"); }

:root {
  /* DoselyTheme.light() + DataColors.light */
  --bg: #fdfaf4; --surface: #ffffff; --low: #f7f3ed; --s2: #f0ece5; --high: #eae6de;
  --ink: #191610; --muted: #524c42; --outline: #80796f; --line: #cfcac1;
  --primary: #364ab5; --on-primary: #ffffff; --pc: #dae4ff; --on-pc: #212f75; --error: #b02a2d;
  --protein: #955816; --protein-c: #ffe2ca; --fiber: #407142; --fiber-c: #d8efd8;
  --water: #236b8f; --water-c: #d4ecfb; --pro: #82417d; --pro-c: #f8dff5;
  --dose: #f6be8e; --night: #141a3d;
  /* Nền hình và quầng sáng: chỉ là nền, đã đo chữ đặt lên. */
  --art-a: #eef2ff; --art-b: #fff1e4;
  --glow-a: #e3eaff; --glow-b: #ffe9d6; --glow-c: #f6e6f3;
  --shadow: 0 1px 2px rgba(25, 22, 16, .06), 0 16px 40px rgba(33, 47, 117, .13);
  --shadow-sm: 0 6px 18px rgba(25, 22, 16, .08);

  /* DoselyRadius / DoselySpacing / DoselyMotion */
  --r-8: 8px; --r-12: 12px; --r-16: 16px; --r-20: 20px; --r-28: 28px; --r-full: 999px;
  --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-24: 24px; --s-32: 32px; --s-48: 48px;
  --ease: cubic-bezier(.33, 1, .68, 1); /* easeOutCubic */
  --fast: 150ms; --medium: 250ms; --sheet-in: 400ms; --sheet-out: 200ms;

  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Segoe UI", system-ui, sans-serif;
  --font-display: "Figtree", -apple-system, BlinkMacSystemFont, "SF Pro Display", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* DoselyTheme.dark() + DataColors.dark */
    --bg: #110f0c; --surface: #221f1b; --low: #1a1814; --s2: #2b2823; --high: #36322d;
    --ink: #ebe7e1; --muted: #c2bdb4; --outline: #8b857c; --line: #46423b;
    --primary: #b1c2f6; --on-primary: #141e63; --pc: #273776; --on-pc: #dae4ff; --error: #f8a49d;
    --protein: #f6be8e; --protein-c: #573410; --fiber: #a4d2a4; --fiber-c: #234024;
    --water: #90cdf1; --water-c: #033d57; --pro: #e2b2dd; --pro-c: #4c2a49;
    --art-a: #171c33; --art-b: #261c13;
    --glow-a: #1b2246; --glow-b: #2b1f14; --glow-c: #281a27;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .45);
    --shadow-sm: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #110f0c; --surface: #221f1b; --low: #1a1814; --s2: #2b2823; --high: #36322d;
  --ink: #ebe7e1; --muted: #c2bdb4; --outline: #8b857c; --line: #46423b;
  --primary: #b1c2f6; --on-primary: #141e63; --pc: #273776; --on-pc: #dae4ff; --error: #f8a49d;
  --protein: #f6be8e; --protein-c: #573410; --fiber: #a4d2a4; --fiber-c: #234024;
  --water: #90cdf1; --water-c: #033d57; --pro: #e2b2dd; --pro-c: #4c2a49;
  --art-a: #171c33; --art-b: #261c13;
  --glow-a: #1b2246; --glow-b: #2b1f14; --glow-c: #281a27;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .45);
  --shadow-sm: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--font-text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--primary); text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: max(var(--s-16), env(safe-area-inset-left)); }
@media (min-width: 600px) { .wrap { padding-inline: var(--s-24); } }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(40px, 6.4vw, 66px); line-height: 1.04; }
h2 { font-size: clamp(30px, 4.4vw, 44px); line-height: 1.1; }
h3 { font-size: 21px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
.muted { color: var(--muted); }
.eyebrow { font: 700 13px/1.4 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: var(--s-8); background: var(--surface); color: var(--primary); padding: var(--s-8) var(--s-16); border-radius: var(--r-12); z-index: 20; font-weight: 600; }
.skip:focus { left: var(--s-8); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: var(--r-8); }

/* ---------- Thanh trên: dính, mờ nền (kính chỉ ở nav), một CTA tô màu ---------- */
.top { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.top .wrap { display: flex; align-items: center; gap: var(--s-12); min-height: 64px; }
.logo { display: inline-flex; align-items: center; gap: var(--s-8); min-height: 48px; font: 700 21px/1 var(--font-display); letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.logo img { width: 32px; height: 32px; border-radius: var(--r-8); }
.top nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-4); }
.top nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-12); border-radius: var(--r-full); color: var(--ink); text-decoration: none; font: 600 15px/1 var(--font-text); transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.top nav a:hover { background: var(--s2); }
.top .lang { display: flex; gap: 2px; margin-left: var(--s-4); padding-left: var(--s-8); border-left: 1px solid var(--line); }
.top .lang a { padding: 0 var(--s-8); min-width: 44px; justify-content: center; font-size: 13px; letter-spacing: .04em; color: var(--muted); }
.top .lang a[aria-current="page"] { color: var(--ink); background: var(--s2); }
.cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--s-16); border-radius: var(--r-full); font: 700 15px/1 var(--font-text); text-decoration: none; white-space: nowrap; transition: background var(--medium) var(--ease), color var(--medium) var(--ease); }
.top nav a.cta { padding: 0 var(--s-16); margin-left: var(--s-4); }
.cta.filled, .top nav a.cta.filled { background: var(--primary); color: var(--on-primary); }
.cta.tonal, .top nav a.cta.tonal { background: var(--pc); color: var(--on-pc); }
.top nav a.cta:hover { background: var(--primary); color: var(--on-primary); }
@media (max-width: 900px) { .top nav .sec { display: none; } }
@media (max-width: 560px) { .top .lang { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto -10%; height: 120%; z-index: -1;
  background: radial-gradient(40% 50% at 16% 28%, var(--glow-a), transparent 70%),
              radial-gradient(34% 44% at 86% 22%, var(--glow-c), transparent 70%),
              radial-gradient(42% 42% at 70% 86%, var(--glow-b), transparent 70%); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s-48); align-items: center; padding-block: var(--s-48) calc(var(--s-48) * 2); }
@media (max-width: 920px) { .hero .wrap { grid-template-columns: 1fr; padding-block: var(--s-32) var(--s-48); gap: var(--s-32); } }
.hero-copy { display: grid; gap: var(--s-24); align-content: start; }
.hero h1 span { color: var(--primary); }
:lang(de) .hero h1 { font-size: clamp(36px, 5.2vw, 56px); hyphens: manual; }
.lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.5; color: var(--muted); max-width: 34em; }
.pill { justify-self: start; display: inline-flex; align-items: center; gap: var(--s-8); font: 700 14px/1.3 var(--font-text); color: var(--on-pc); background: var(--pc); padding: var(--s-8) var(--s-16); border-radius: var(--r-full); }
.pill i { width: 10px; height: 10px; border-radius: 50%; background: var(--dose); box-shadow: 0 0 0 2px var(--protein); flex: none; }
.badges { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-24); font-size: 15px; color: var(--muted); margin: 0; padding: 0; list-style: none; }
.badges li { display: inline-flex; align-items: center; gap: var(--s-8); }
.badges svg { width: 18px; height: 18px; color: var(--fiber); flex: none; }

/* ---------- Waitlist (Buttondown) ---------- */
.join { display: grid; gap: var(--s-12); max-width: 540px; }
.join .bar { display: flex; gap: var(--s-8); background: var(--surface); border: 1px solid var(--outline); border-radius: var(--r-full); padding: var(--s-4); box-shadow: var(--shadow); }
.join .bar:focus-within { outline: 3px solid var(--primary); outline-offset: 2px; }
.join input[type=email] { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 400 17px var(--font-text); padding: 0 var(--s-16); min-height: 52px; border-radius: var(--r-full); }
.join input[type=email]::placeholder { color: var(--muted); }
.join input[type=email]:focus { outline: none; }
.join button { border: 0; font: 700 16px/1 var(--font-text); background: var(--primary); color: var(--on-primary); border-radius: var(--r-full); padding: 0 var(--s-24); min-height: 52px; cursor: pointer; white-space: nowrap; transition: filter var(--fast) var(--ease); }
.join button:hover { filter: brightness(1.08); }
@media (max-width: 480px) {
  .join .bar { flex-direction: column; border-radius: var(--r-28); padding: var(--s-8); }
  .join input[type=email] { padding: 0 var(--s-12); }
}
.join fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); }
.join legend { float: left; margin-right: var(--s-4); font: 600 14px/44px var(--font-text); color: var(--muted); }
.join .choice { position: relative; display: inline-flex; }
.join .choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.join .choice span { display: inline-flex; align-items: center; gap: var(--s-8); min-height: 44px; padding: 0 var(--s-16); border: 1px solid var(--outline); border-radius: var(--r-full); background: var(--surface); font: 600 15px/1 var(--font-text); color: var(--ink); transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.join .choice span::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--outline); box-sizing: border-box; transition: border var(--fast) var(--ease); }
.join .choice input:checked + span { background: var(--pc); color: var(--on-pc); border-color: var(--primary); }
.join .choice input:checked + span::before { border: 5px solid var(--primary); }
.join .choice input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: 2px; }
.join .note { font-size: 14px; line-height: 1.5; color: var(--muted); }
.join .status { margin: 0; font: 600 15px/1.45 var(--font-text); }
.join .status:empty { display: none; }
.join .status.ok { color: var(--fiber); }
.join .status.err { color: var(--error); }
.join button[disabled] { opacity: .7; cursor: progress; }
@media (max-width: 480px) { .join legend { float: none; width: 100%; line-height: 1.4; margin-bottom: var(--s-4); } }

/* ---------- Story hero: ba cảnh UI Weekmark dựng bằng HTML thật ----------
   Trạng thái ở data-state của .story: a (sheet Log dose) → b (Today, tuần sau
   liều) → c (Privacy). Chuyển cảnh ≤ 400 ms (sheet-in), easeOutCubic. */
.story { margin: 0; display: grid; gap: var(--s-16); width: 100%; max-width: 460px; justify-self: center; }
.art { position: relative; display: grid; min-height: 440px; border-radius: var(--r-28); overflow: hidden; background: linear-gradient(160deg, var(--art-a), var(--art-b)); box-shadow: var(--shadow); }
/* Ba cảnh xếp chồng trong cùng một ô grid: khung cao theo cảnh dài nhất (chữ DE/FR dài hơn EN). */
.scene { grid-area: 1 / 1; position: relative; padding: var(--s-16); }
.mini { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-20); padding: var(--s-16); box-shadow: var(--shadow-sm); }
.ov { font: 700 12px/1.3 var(--font-text); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: var(--s-4); font: 600 13px/1 var(--font-text); padding: 6px var(--s-8); border-radius: var(--r-8); background: var(--s2); color: var(--ink); white-space: nowrap; }
.row { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; }

/* Cảnh a: sheet "Log dose" trượt lên trên Today mờ phía sau. */
.sa { display: flex; flex-direction: column; }
.sa .peek { flex: 1 0 auto; align-content: start; margin-bottom: -40px; padding-bottom: 56px; opacity: .5; transform: scale(.95); transform-origin: top center; }
.sheet { position: relative; z-index: 1; margin: 0 calc(var(--s-16) * -1) calc(var(--s-16) * -1); background: var(--bg); border-radius: var(--r-28) var(--r-28) 0 0; padding: var(--s-8) var(--s-16) var(--s-16); box-shadow: 0 -8px 30px rgba(25, 22, 16, .14); display: grid; gap: var(--s-8); }
.grab { width: 32px; height: 4px; border-radius: 2px; background: var(--outline); justify-self: center; margin-bottom: var(--s-4); }
.sheet-head { flex-wrap: nowrap; }
.sheet-head .title { margin-right: auto; min-width: 0; }
.sheet-head .chip { background: var(--s2); }
.sheet .title { font: 700 20px/1.2 var(--font-display); letter-spacing: -.01em; }
.sheet .when { font-size: 14px; color: var(--muted); font-weight: 600; }
.stepper { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: var(--s-8); background: var(--s2); border-radius: var(--r-16); padding: var(--s-8); text-align: center; }
.stepper .sbtn { display: grid; place-items: center; height: 36px; border-radius: var(--r-12); background: var(--surface); color: var(--primary); font: 600 22px/1 var(--font-text); }
.stepper b { display: block; font: 700 24px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.stepper small { display: block; font-size: 12.5px; color: var(--muted); }
.bodymap { display: grid; grid-template-columns: 100px 1fr; gap: var(--s-12); align-items: center; }
.bodymap svg { width: 100px; height: 125px; }
.bodymap .fig { fill: var(--high); }
.bodymap .spot { fill: var(--surface); stroke: var(--outline); stroke-width: 1.5; }
.bodymap .spot.used { fill: url(#hatch); }
.bodymap .hb { fill: var(--surface); }
.bodymap .hl { stroke: var(--outline); stroke-width: 1.6; }
.bodymap .spot.on { fill: var(--pc); stroke: var(--primary); stroke-width: 2.5; }
.bodymap .tick { fill: none; stroke: var(--on-pc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sitechip { display: inline-block; background: var(--pc); color: var(--on-pc); border-radius: var(--r-8); padding: 6px var(--s-12); font: 600 15px/1.2 var(--font-text); }
.bodymap p { margin-top: var(--s-4); font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.fakebtn { display: flex; align-items: center; justify-content: center; gap: var(--s-8); min-height: 48px; border-radius: var(--r-full); background: var(--primary); color: var(--on-primary); font: 700 16px/1 var(--font-text); }
.fakebtn svg { width: 18px; height: 18px; }

/* Cảnh b: thẻ Next dose + dải D0–D6 + vòng cung tuần. */
.hero-card { background: var(--pc); color: var(--on-pc); border-radius: var(--r-20); padding: var(--s-16); display: grid; gap: var(--s-4); }
.hero-card .ov { color: var(--on-pc); }
.hero-card .chip { background: var(--surface); color: var(--on-pc); }
.metric { font: 700 40px/1.1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.metric small { font-size: 22px; letter-spacing: 0; }
.hero-card p { font-size: 14px; line-height: 1.4; color: var(--on-pc); }
.week { margin-top: var(--s-12); display: grid; gap: var(--s-8); }
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-4); }
.days span { display: grid; place-items: center; min-height: 32px; border-radius: var(--r-8); font: 700 13px/1 var(--font-text); background: var(--pc); color: var(--on-pc); }
.days span.future { background: var(--s2); color: var(--muted); }
.days span.today { background: var(--primary); color: var(--on-primary); }
.arc { width: 100%; height: auto; display: block; overflow: visible; }
.arc .line { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 0; }
.arc .ahead { fill: none; stroke: var(--outline); stroke-width: 2; stroke-dasharray: 5 6; }
.arc .d { fill: var(--primary); stroke: var(--surface); stroke-width: 2; }
.arc .d.next { fill: var(--surface); stroke: var(--outline); }
.arc .d0 { fill: var(--dose); stroke: var(--protein); stroke-width: 2.5; }
.arc .now { fill: none; stroke: var(--primary); stroke-width: 2; }
.week .cap { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.floors { margin-top: var(--s-12); padding: var(--s-12) var(--s-16); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); text-align: center; }
.floors .ov { grid-column: 1 / -1; text-align: left; }
.fl { display: grid; justify-items: center; gap: var(--s-4); font: 600 13px/1.2 var(--font-text); }
.ring { --p: 50%; --c: var(--primary); position: relative; width: 40px; height: 40px; border-radius: 50%; background: conic-gradient(var(--c) var(--p), var(--s2) 0); display: grid; place-items: center; font-style: normal; }
.ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface); }
.ring b, .ring svg { position: relative; font: 700 12px/1 var(--font-text); font-variant-numeric: tabular-nums; }
.ring svg { width: 16px; height: 16px; color: var(--fiber); }


/* Cảnh c: màn Privacy. */
.priv { display: grid; gap: var(--s-12); }
.priv .shield { width: 48px; height: 48px; border-radius: var(--r-16); background: var(--fiber-c); color: var(--fiber); display: grid; place-items: center; }
.priv .shield svg { width: 26px; height: 26px; }
.priv .title { font: 700 22px/1.2 var(--font-display); letter-spacing: -.01em; }
.priv p { font-size: 15px; line-height: 1.45; color: var(--muted); }
.priv ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-8); }
.priv li { display: flex; align-items: center; gap: var(--s-12); background: var(--low); border-radius: var(--r-12); padding: var(--s-8) var(--s-12); font: 600 15px/1.3 var(--font-text); }
.priv li i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.priv li i svg { width: 18px; height: 18px; }
.priv li small { display: block; font-weight: 400; font-size: 13px; color: var(--muted); }
.t-water { background: var(--water-c); color: var(--water); }
.t-protein { background: var(--protein-c); color: var(--protein); }
.t-fiber { background: var(--fiber-c); color: var(--fiber); }
.t-pro { background: var(--pro-c); color: var(--pro); }
.t-pc { background: var(--pc); color: var(--on-pc); }

/* Chuyển cảnh */
.scene { transition: opacity var(--medium) var(--ease), transform var(--sheet-in) var(--ease); }
.story .sb, .story .sc { opacity: 0; transform: translateY(16px); }
.story .sheet { transition: transform var(--sheet-in) var(--ease); }
.story[data-state="b"] .sa, .story[data-state="c"] .sa { opacity: 0; }
.story[data-state="b"] .sa .sheet, .story[data-state="c"] .sa .sheet { transform: translateY(105%); transition-duration: var(--sheet-out); }
.story[data-state="b"] .sb { opacity: 1; transform: none; }
.story[data-state="c"] .sc { opacity: 1; transform: none; }
.story[data-state="c"] .sb { opacity: 0; transform: translateY(-12px); }
/* Tuần mở ra: đường cong vẽ dần, các chấm D1–D3 hiện theo thứ tự. */
.story .arc .line { transition: stroke-dashoffset 800ms var(--ease) 150ms; }
.story:not([data-state="b"]) .arc .line { stroke-dashoffset: 420; }
.story .arc .d, .story .arc .now { transition: opacity var(--medium) var(--ease), transform var(--medium) var(--ease); transform-box: fill-box; transform-origin: center; }
.story:not([data-state="b"]) .arc .k { opacity: 0; transform: scale(.4); }
.story .arc .k1 { transition-delay: 300ms; } .story .arc .k2 { transition-delay: 450ms; } .story .arc .k3 { transition-delay: 600ms; }

.caps { display: grid; }
.capn { grid-area: 1 / 1; display: grid; gap: var(--s-4); opacity: 0; transform: translateY(6px); transition: opacity var(--medium) var(--ease), transform var(--medium) var(--ease); }
.capn strong { font: 700 23px/1.2 var(--font-display); letter-spacing: -.015em; }
.capn span { color: var(--muted); font-size: 16px; line-height: 1.5; }
.story[data-state="a"] .capn[data-cap="a"], .story[data-state="b"] .capn[data-cap="b"], .story[data-state="c"] .capn[data-cap="c"] { opacity: 1; transform: none; }
.tabs { display: flex; gap: var(--s-8); flex-wrap: wrap; }
.tabs button { border: 1px solid var(--outline); background: var(--surface); color: var(--ink); font: 600 14px/1 var(--font-text); border-radius: var(--r-full); padding: 0 var(--s-16); min-height: 44px; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s-8); transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.tabs button i { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--outline); transition: width var(--medium) var(--ease), background var(--medium) var(--ease); }
.tabs button[aria-pressed="true"] { background: var(--pc); border-color: transparent; color: var(--on-pc); }
.tabs button[aria-pressed="true"] i { width: 20px; background: var(--primary); }
@media (max-width: 420px) {
  .tabs { gap: var(--s-4); }
  .tabs button { flex: 1 1 auto; justify-content: center; padding: 0 var(--s-8); gap: 6px; font-size: 13px; white-space: nowrap; }
  .tabs button i { width: 6px; height: 6px; }
  .tabs button[aria-pressed="true"] i { width: 14px; }
  .metric { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .story *, .story *::before, .story *::after { transition: none !important; animation: none !important; }
}

/* ---------- Section chung ---------- */
section.block { padding-block: calc(var(--s-48) * 2); }
section.block.alt { background: var(--low); }
section.block .head { display: grid; gap: var(--s-12); max-width: 760px; margin-bottom: var(--s-48); }
section.block .head p { font-size: 19px; line-height: 1.55; color: var(--muted); }
@media (max-width: 720px) { section.block { padding-block: var(--s-48) calc(var(--s-48) + var(--s-16)); } section.block .head { margin-bottom: var(--s-32); } }

/* Nghe quen không */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-16); }
@media (max-width: 860px) { .quotes { grid-template-columns: 1fr; } }
.quote { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-20); padding: var(--s-24); display: grid; gap: var(--s-12); align-content: start; }
.quote p { font: 600 20px/1.4 var(--font-text); letter-spacing: -.01em; }
.quote small { color: var(--muted); font-size: 15px; line-height: 1.5; }

/* Tính năng: chữ + ảnh app thật trong khung máy, nền tông màu dữ liệu */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--s-32) * 2); align-items: center; }
.feature + .feature { margin-top: calc(var(--s-48) * 2); }
.feature.flip .shot { order: -1; }
@media (max-width: 860px) { .feature, .feature.flip { grid-template-columns: 1fr; gap: var(--s-24); } .feature.flip .shot { order: 0; } .feature + .feature { margin-top: var(--s-48); } }
.feature .copy { display: grid; gap: var(--s-16); }
.feature h3 { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
.feature .copy p { font-size: 18px; line-height: 1.55; color: var(--muted); max-width: 32em; }
.check { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-8); }
.check li { display: grid; grid-template-columns: 24px 1fr; gap: var(--s-8); font-size: 16px; line-height: 1.5; }
.check li svg { width: 20px; height: 20px; color: var(--primary); margin-top: 2px; }
.shot { display: grid; place-items: center; padding: var(--s-32) var(--s-24); border-radius: var(--r-28); background: var(--s2); position: relative; overflow: hidden; }
.shot.pc { background: var(--pc); }
.shot.protein { background: var(--protein-c); }
.shot.fiber { background: var(--fiber-c); }
.shot.water { background: var(--water-c); }
.shot.pro { background: var(--pro-c); }
/* Khung máy giữ hình học iPhone thật, không thuộc thang bo góc của UI. */
.phone { position: relative; width: min(270px, 68vw); aspect-ratio: 590 / 1283; border-radius: 46px; padding: 9px; background: var(--night); box-shadow: var(--shadow), inset 0 0 0 1.5px #2c3466; }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 37px; background: var(--low); }
.tag-pro { display: inline-block; font: 700 13px/1.4 var(--font-text); color: var(--pro); background: var(--pro-c); border-radius: var(--r-full); padding: 2px var(--s-8); vertical-align: middle; margin-left: var(--s-4); letter-spacing: 0; }

/* Nguyên tắc riêng tư */
.principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-16); }
@media (max-width: 960px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .principles { grid-template-columns: 1fr; } }
.principle { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-20); padding: var(--s-24); display: grid; gap: var(--s-8); align-content: start; }
.ico { width: 48px; height: 48px; border-radius: var(--r-12); display: grid; place-items: center; flex: none; }
.ico svg { width: 24px; height: 24px; }
.principle .ico { margin-bottom: var(--s-4); }
.principle p { color: var(--muted); font-size: 16px; line-height: 1.5; }
.more { margin-top: var(--s-24); font-weight: 600; }
.more a { display: inline-flex; align-items: center; min-height: 44px; }

/* So sánh */
.tablewrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-28); overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 16px; }
th, td { text-align: left; vertical-align: top; padding: var(--s-16); border-bottom: 1px solid var(--line); line-height: 1.45; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
thead th { font: 700 13px/1.3 var(--font-text); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
tbody th { font-weight: 600; width: 24%; }
td { color: var(--muted); }
td.us, th.us { color: var(--ink); background: color-mix(in srgb, var(--pc) 45%, var(--surface)); }
thead th.us { color: var(--on-pc); }
.tag { display: inline-block; font: 700 12px/1.4 var(--font-text); border-radius: var(--r-full); padding: 2px var(--s-8); margin: 0 var(--s-8) var(--s-4) 0; }
.tag.yes { background: var(--fiber-c); color: var(--fiber); }
.tag.no { background: var(--s2); color: var(--muted); }
.note-card { margin-top: var(--s-16); display: grid; grid-template-columns: 48px 1fr; gap: var(--s-16); align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-20); padding: var(--s-24); max-width: 940px; }
.note-card p { color: var(--muted); font-size: 16px; line-height: 1.5; margin-top: var(--s-4); }
.note-card a { font-weight: 600; }

/* Giá */
.prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-24); max-width: 940px; }
@media (max-width: 760px) { .prices { grid-template-columns: 1fr; } }
.price { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-28); padding: var(--s-32) var(--s-24); display: grid; gap: var(--s-16); align-content: start; }
.price.pro { border: 2px solid var(--pro); }
.price .amount { font: 700 44px/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price .amount small { font: 600 16px/1.4 var(--font-text); color: var(--muted); letter-spacing: 0; }
.price .check li svg { color: var(--fiber); }
.price.pro .check li svg { color: var(--pro); }
.price .sub { font: 600 15px/1.45 var(--font-text); color: var(--pro); margin-top: calc(var(--s-8) * -1); }
.price .fine { font-size: 14px; line-height: 1.5; color: var(--muted); }

/* FAQ */
.faq { display: grid; gap: var(--s-8); max-width: 820px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-20); padding: 0 var(--s-24); }
.faq summary { cursor: pointer; font: 700 18px/1.4 var(--font-text); padding: var(--s-16) 0; min-height: 56px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-16); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--primary); font-size: 26px; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: var(--s-24); color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 64ch; }

/* CTA cuối */
.final .card { text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-28); padding: clamp(32px, 6vw, 64px) var(--s-24); display: grid; gap: var(--s-16); justify-items: center; position: relative; overflow: hidden; isolation: isolate; }
.final .card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 60% at 18% 0%, var(--glow-a), transparent 70%), radial-gradient(45% 60% at 90% 100%, var(--glow-b), transparent 70%); }
.final .mark { width: 72px; height: 72px; border-radius: 18px; box-shadow: var(--shadow-sm); }
.final .join { width: 100%; justify-items: center; }
.final .join .bar { width: 100%; }

/* Chuyển động nhẹ: thẻ nổi lên khi cuộn tới (chỉ khi có JS và không giảm chuyển động). */
@media (prefers-reduced-motion: no-preference) {
  /* .rise-on do chính site.js gắn: nếu site.js không tải được thì thẻ vẫn hiện. */
  .rise-on .rise { opacity: 0; transform: translateY(16px); transition: opacity var(--medium) var(--ease), transform var(--sheet-in) var(--ease); }
  .rise-on .rise.in { opacity: 1; transform: none; }
  .bob { animation: bob 2.8s ease-in-out infinite alternate; }
}
@keyframes bob { from { translate: 0 0; } to { translate: 0 -5px; } }

/* ---------- Trang tài liệu (privacy, free-stays-free) ---------- */
.doc { padding-block: var(--s-48) calc(var(--s-48) * 2); position: relative; isolation: isolate; }
.doc::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 360px; z-index: -1; background: radial-gradient(40% 70% at 10% 0%, var(--glow-a), transparent 70%), radial-gradient(35% 60% at 90% 10%, var(--glow-b), transparent 70%); }
.doc .wrap { max-width: 820px; display: grid; gap: var(--s-24); }
.doc h1 { font-size: clamp(38px, 6vw, 56px); }
.doc h2 { font-size: clamp(24px, 3.2vw, 30px); margin-top: var(--s-16); }
.doc h3 { margin-top: var(--s-8); }
.doc .card > h2:first-child { margin-top: 0; }
.doc .lede { max-width: none; }
.doc .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-20); padding: var(--s-24); display: grid; gap: var(--s-16); }
.doc .card p { color: var(--muted); font-size: 16px; line-height: 1.6; }
.doc .promise { background: var(--pc); color: var(--on-pc); border-radius: var(--r-20); padding: var(--s-24); font: 600 19px/1.5 var(--font-text); }
.doc .promise small { display: block; font: 700 13px/1.4 var(--font-text); letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--s-8); }
.doc .check li b { font-weight: 600; }
.doc .check.pro li svg { color: var(--pro); }
.doc .check.ok li svg { color: var(--fiber); }
.doc .fine { font-size: 14px; line-height: 1.5; color: var(--muted); }
.doc .actions { display: flex; flex-wrap: wrap; gap: var(--s-12); margin-top: var(--s-8); }
.doc .actions .cta { min-height: 52px; padding: 0 var(--s-24); font-size: 16px; }

/* ---------- Footer ---------- */
footer { padding-block: var(--s-32) var(--s-48); color: var(--muted); font-size: 14px; line-height: 1.55; border-top: 1px solid var(--line); }
footer .wrap { display: grid; gap: var(--s-12); }
footer nav { display: flex; flex-wrap: wrap; gap: 0 var(--s-16); }
footer nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: none; }
footer nav a:hover { text-decoration: underline; }
footer p a { color: var(--muted); }