/* Weight Wisdom — landing page styles */
/* ============================================================
   Weight Wisdom — Design Tokens
   Grounded in production code: Weight-Wisdom-App@main
   - app/assets/css/color.css
   - app/assets/css/typography.css
   - app/assets/css/main.css
   ============================================================ */

/* ─── Fonts (production) ───────────────────────────────── */
@font-face { font-family: "Satoshi";  src: url("assets/fonts/satoshi.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins";  src: url("assets/fonts/poppins-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins";  src: url("assets/fonts/poppins-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins";  src: url("assets/fonts/poppins-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Sukhumvit"; src: url("assets/fonts/sukhumvit-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sukhumvit"; src: url("assets/fonts/sukhumvit-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Sukhumvit"; src: url("assets/fonts/sukhumvit-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {

  /* ─── COLOR (mirrors app/assets/css/color.css) ─── */

  /* Orange — Tailwind "orange-*" overridden in production to match brand */
  --color-orange-50:  #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #e36600;   /* PRIMARY */
  --color-orange-700: #c2410c;
  --color-orange-800: #d15146;
  --color-orange-900: #7c2d12;   /* selected / pressed / loading */
  --color-orange-950: #431407;

  /* Gray */
  --color-gray-100: #f8f9fa;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #6c757d;     /* inactive icon / nav */
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529;

  /* Blue */
  --color-blue-600:  #e7eef5;
  --color-blue-700:  #87c0fb;
  --color-blue-800:  #63a4e8;
  --color-blue-900:  #0063e1;    /* primary blue */
  --color-blue-1000: #1e3a66;    /* deep navy */

  /* Yellow */
  --color-yellow-600: #fef9ee;
  --color-yellow-700: #fdf8ec;
  --color-yellow-800: #f7f0df;

  /* Status */
  --color-status-error:   #dc3545;
  --color-status-warning: #c69915;
  --color-status-success: #198754;

  /* UI semantic aliases (mirrors @theme block) */
  --ui-primary:           var(--color-orange-600);
  --ui-primary-blue:      var(--color-blue-900);
  --ui-error:             var(--color-status-error);
  --ui-secondary-gray:    var(--color-gray-300);
  --ui-secondary-light-gray: var(--color-gray-100);
  --ui-secondary-white:   #ffffff;
  --ui-text:              #000000;

  /* Brand-friendly aliases used across this design system */
  --ww-orange:        var(--color-orange-600);
  --ww-orange-press:  var(--color-orange-900);
  --ww-orange-soft:   var(--color-orange-100);
  --ww-navy:          var(--color-blue-1000);
  --ww-blue:          var(--color-blue-900);
  --ww-blue-soft:     var(--color-blue-600);
  --ww-cream:         var(--color-yellow-800);
  --ww-cream-soft:    var(--color-yellow-700);
  --ww-cream-bg:      var(--color-yellow-600);
  --ww-white:         #ffffff;
  --ww-ink:           var(--color-gray-900);
  --ww-ink-2:         var(--color-gray-700);
  --ww-ink-3:         var(--color-gray-600);
  --ww-line:          var(--color-gray-200);
  --ww-line-cool:     var(--color-gray-300);
  --ww-success:       var(--color-status-success);
  --ww-warning:       var(--color-status-warning);
  --ww-error:         var(--color-status-error);

  /* Legacy aliases — kept so older preview cards keep rendering.
     These are name-only aliases; production calls them differently. */
  --ww-orange-hover:  #c2410c;                       /* maps to orange-700 */
  --ww-orange-tint:   #ffedd5;                       /* maps to orange-100 */
  --ww-navy-hover:    #142e54;
  --ww-navy-press:    #0d2042;
  --ww-navy-soft:     var(--color-blue-600);          /* #e7eef5 */
  --ww-cream-deep:    var(--color-yellow-700);        /* #fdf8ec */
  --ww-danger:        var(--color-status-error);
  --ww-info:          var(--color-blue-900);
  --ww-success-soft:  #def1e2;
  --ww-warning-soft:  #faefd2;
  --ww-danger-soft:   #fadcd8;
  --ww-info-soft:     #e3eaf5;
  --font-sans:        var(--font-default);
  --font-mono:        ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ─── Eater-Type accent palette (decorative — mascots only) ─── */
  --eater-olive:      #9ca34f;
  --eater-sky:        #7fa8c9;
  --eater-blush:      #f0b8c0;
  --eater-vermillion: #e85a2c;
  --eater-clover:     #3e8e5a;
  --eater-brick:      #b8392a;
  --eater-mustard:    #e5a53a;
  --eater-purple:     #8b6ba8;

  /* ─── TYPOGRAPHY (mirrors typography.css) ─── */

  --font-satoshi:   "Satoshi", system-ui, sans-serif;
  --font-poppins:   "Poppins", system-ui, sans-serif;
  --font-sukhumvit: "Sukhumvit", system-ui, sans-serif;

  /* DEFAULT FAMILY: Satoshi (per main.css `--default-font-family`) */
  --font-default: var(--font-satoshi);

  /* Weights (only 3 used in production) */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* Responsive sizes — exact clamp() values from typography.css */
  --size-32: clamp(30px, 5vw,   34px);
  --size-24: clamp(22px, 3vw,   26px);
  --size-20: clamp(20px, 2.5vw, 22px);
  --size-18: clamp(18px, 2.2vw, 20px);
  --size-16: clamp(16px, 2vw,   18px);
  --size-14: clamp(14px, 1.8vw, 16px);
  --size-12: clamp(12px, 1.6vw, 14px);
  --size-10: clamp(10px, 1.4vw, 12px);

  /* Tailwind-equivalent text-base scale (from main.css @theme) */
  --text-base: clamp(0.875rem, 2.5vw, 1.125rem);
  --text-lg:   calc(var(--text-base) * 1.125);
  --text-xl:   calc(var(--text-base) * 1.25);
  --text-2xl:  calc(var(--text-base) * 1.5);
  --text-3xl:  calc(var(--text-base) * 1.875);
  --text-4xl:  calc(var(--text-base) * 2.25);
  --text-5xl:  calc(var(--text-base) * 3);

  /* ─── SPACING / RADII / SHADOWS ─── */
  /* Tailwind defaults are used in production. Documenting the band here. */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;       /* default — Nuxt UI buttons */
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-pill: 9999px;

  --sh-xs:  0 1px 2px rgba(15,23,42,0.04);
  --sh-sm:  0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --sh-md:  0 4px 12px rgba(15,23,42,0.08);
  --sh-lg:  0 12px 24px rgba(15,23,42,0.10);
  --sh-xl:  0 24px 48px rgba(15,23,42,0.14);
  --sh-tabbar: 0 -2px 8px rgba(15,23,42,0.06);  /* shadow-md flipped for bottom nav */

  /* ─── MOTION ─── */
  --ease-out:   cubic-bezier(.2, .7, .2, 1);
  --ease-tab:   cubic-bezier(.4, 0, .2, 1);     /* ease-in-out, used for tab indicator */
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-tab:    300ms;
  --dur-large:  520ms;
}

/* ─── Utilities ─── */

body { font-family: var(--font-default); color: var(--ww-ink); }

.font-satoshi   { font-family: var(--font-satoshi)   !important; }
.font-poppins   { font-family: var(--font-poppins)   !important; }
.font-sukhumvit { font-family: var(--font-sukhumvit) !important; }

.font-weight-regular { font-weight: var(--weight-regular); }
.font-weight-medium  { font-weight: var(--weight-medium);  }
.font-weight-bold    { font-weight: var(--weight-bold);    }

.text-size-32 { font-size: var(--size-32); line-height: 1.25;  }
.text-size-24 { font-size: var(--size-24); line-height: 1.167; }
.text-size-20 { font-size: var(--size-20); line-height: 1.2;   }
.text-size-18 { font-size: var(--size-18); line-height: 1.112; }
.text-size-16 { font-size: var(--size-16); line-height: 1.25;  }
.text-size-14 { font-size: var(--size-14); line-height: 1.286; }
.text-size-12 { font-size: var(--size-12); line-height: 1.34;  }
.text-size-10 { font-size: var(--size-10); line-height: 1.2;   }

.t-mixed em { font-style: normal; color: var(--ww-orange); }


* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-satoshi);
  color: var(--ww-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

:root {
  --max: 1280px;
  --pad: 32px;
  --soft-shadow: 0 12px 40px rgba(15,23,42,0.08);
}

/* lang */
.lang-th body, body[data-lang="th"] { font-family: var(--font-sukhumvit); }
/* Thai mode: one font everywhere, headings included */
body[data-lang="th"] :is(h1, h2, h3, h4, h5, h6, p, a, button, span, div, li, em, small, input) { font-family: var(--font-sukhumvit); }
body[data-lang="th"] :is(.step h3, .app-store-btn .big, .app-feature h4, .phone-card-title, .phone-greeting .name, .phone-meal-text .t, .tier-name-accent, .press-logo em) { font-family: var(--font-sukhumvit); }
body[data-lang="th"] .en { display: none; }
body[data-lang="en"] .th { display: none; }

/* ─── Type ─── */
.eyebrow {
  font-family: var(--font-satoshi);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ww-orange);
}
.eyebrow.on-dark { color: rgba(255,255,255,0.9); }
.eyebrow.muted { color: var(--ww-ink-3); }

h1, h2, h3 { margin: 0; color: var(--ww-navy); font-family: var(--font-poppins); font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.t-mixed em, .t-mixed .em { font-style: normal; color: var(--ww-orange); font-weight: 600; }

h1.display { font-size: clamp(48px, 7vw, 104px); line-height: 0.98; letter-spacing: -0.03em; font-weight: 600; }
h2.section-title { font-size: clamp(38px, 5vw, 72px); line-height: 1.02; font-weight: 600; }
h3.card-title { font-size: clamp(22px, 2.2vw, 32px); line-height: 1.1; font-weight: 600; }

p.lede { font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; color: var(--ww-ink-2); max-width: 52ch; }
p.body { font-size: 16px; line-height: 1.55; color: var(--ww-ink-2); }

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  font-family: var(--font-satoshi); font-weight: 500; font-size: 15px;
  border: none; cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--ww-orange); color: #fff; }
.btn-primary:hover { background: var(--ww-orange-press); }
.btn-secondary { background: var(--ww-navy); color: #fff; }
.btn-secondary:hover { background: #142e54; }
.btn-outline { background: transparent; color: var(--ww-navy); box-shadow: inset 0 0 0 1.5px var(--ww-navy); }
.btn-outline:hover { background: var(--ww-navy); color: #fff; }
.btn-link { background: transparent; color: var(--ww-orange); padding: 0; font-weight: 500; }
.btn-link::after { content: "→"; transition: transform var(--dur-base) var(--ease-out); }
.btn-link:hover::after { transform: translateX(4px); }

.btn-glass {
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.32);
  font-weight: 500;
  padding: 16px 24px;
}
.btn-glass:hover { background: rgba(255,255,255,0.24); }

/* ─── Nav ─── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 18px var(--pad);
  display: flex; align-items: center; justify-content: space-between;
  transition: background var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  color: #fff;
}
.nav.scrolled { background: rgba(255,255,255,0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--ww-ink); box-shadow: 0 1px 0 rgba(15,23,42,0.06); }
.nav-inner { width: 100%; max-width: var(--max); margin: 0 auto; display: flex; align-items: center; gap: 36px; position: relative; }
.nav-links {
  display: flex; align-items: center; gap: 28px; font-size: 14.5px; font-weight: 500;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.nav-brand { display: flex; align-items: center; gap: 12px; }
.nav-logo { height: 36px; width: auto; }
.nav-wordmark {
  font-family: var(--font-poppins);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: inherit;
}
.nav-links a { opacity: 0.95; transition: opacity var(--dur-base); position: relative; padding: 6px 0; }
.nav-links a:hover { opacity: 1; }
.nav-links a.has-caret::after { content: "⌄"; margin-left: 4px; font-size: 11px; opacity: 0.6; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 14.5px; font-weight: 500; }
.lang-toggle { display: flex; align-items: center; gap: 0; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px currentColor; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; }
.lang-toggle button { background: transparent; color: inherit; border: none; padding: 5px 12px; border-radius: 999px; cursor: pointer; opacity: 0.65; }
.lang-toggle button.active { background: currentColor; opacity: 1; }
.lang-toggle button.active span { color: var(--ww-navy); mix-blend-mode: difference; filter: invert(1); }
.nav.scrolled .lang-toggle button.active { background: var(--ww-navy); }
.nav.scrolled .lang-toggle button.active span { color: #fff; mix-blend-mode: normal; filter: none; }
.nav:not(.scrolled) .lang-toggle button.active { background: #fff; }
.nav:not(.scrolled) .lang-toggle button.active span { color: var(--ww-navy); mix-blend-mode: normal; filter: none; }
.nav-login { opacity: 0.92; }
.nav-login:hover { opacity: 1; }

/* ─── HERO ─── */
.hero {
  position: relative; height: 100vh; min-height: 760px; max-height: 1000px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; color: #fff;
  margin: 8px 8px 0; border-radius: 32px;
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero-scrim { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(30,58,102,0.55) 0%, rgba(30,58,102,0.20) 35%, rgba(30,58,102,0.55) 100%);
}
.hero-inner {
  position: relative; z-index: 2;
  max-width: var(--max); width: 100%;
  padding: 0 var(--pad);
  display: flex; flex-direction: column; align-items: center; gap: 36px; text-align: center;
}
.hero h1 {
  color: #fff;
}
.hero h1 em, .hero h1 .em { color: #FFB37A; }   /* warm tinted accent that reads on dark photography */
.hero-sub {
  font-size: clamp(16px, 1.3vw, 20px); line-height: 1.5; max-width: 52ch; opacity: 0.95;
  font-family: var(--font-satoshi); color: #fff;
}
.hero-eyebrow { color: rgba(255,255,255,0.9); }
/* Was three inline styles on the <h1>, which no media query could override —
   the .hero-title rule further down was dead code as a result. */
.hero-title { font-family: var(--font-sukhumvit); line-height: 0.99; font-size: clamp(40px, 6.5vw, 90px); }
.hero-pills { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero-pills-label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; margin-bottom: 4px; width: 100%; text-align: center; }
.hero-bottom { position: absolute; bottom: 24px; left: 24px; right: 24px; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; font-size: 12.5px; }
.hero-credits { display: flex; gap: 8px; align-items: center; opacity: 0.88; }
.hero-credits span:not(:last-child)::after { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 99px; background: currentColor; margin-left: 8px; vertical-align: middle; }
.hero-scroll { display: flex; align-items: center; gap: 10px; opacity: 0.85; }
.hero-scroll-line { width: 1px; height: 22px; background: rgba(255,255,255,0.6); display: inline-block; animation: scrolldown 1.6s ease-in-out infinite; transform-origin: top; }
@keyframes scrolldown { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ─── Section base ─── */
section { padding: clamp(80px, 8vw, 140px) var(--pad); }
.container { max-width: var(--max); margin: 0 auto; }
.surface-cream { background: var(--ww-cream); }
.surface-navy { background: var(--ww-navy); color: #fff; }
.surface-navy h2, .surface-navy h3 { color: #fff; }

/* ─── Category cards (under hero) ─── */
.cats {
  position: relative; z-index: 3;
  max-width: var(--max); margin: -120px auto 0; padding: 0 var(--pad);
}
.cats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  background: #fff; padding: 24px; border-radius: 28px; box-shadow: var(--soft-shadow);
}
.cat-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px; border-radius: 20px;
  background: var(--ww-cream-soft);
  position: relative; overflow: hidden;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
  min-height: 180px;
  text-align: left;
}
.cat-card:hover { transform: translateY(-2px); background: var(--ww-cream); }
.cat-card.featured { background: var(--ww-orange); color: #fff; }
.cat-card.featured .cat-sub, .cat-card.featured .cat-title { color: #fff; }
.cat-card.featured:hover { background: var(--ww-orange-press); }
.cat-title { font-family: var(--font-poppins); font-size: 24px; font-weight: 600; color: var(--ww-navy); letter-spacing: -0.01em; }
.cat-sub { font-size: 14px; line-height: 1.45; color: var(--ww-ink-2); flex: 1; }
.cat-tag { display: inline-flex; align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.5); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; color: var(--ww-navy); }
.cat-card.featured .cat-tag { background: rgba(255,255,255,0.22); color: #fff; margin-right: 52px; }
.cat-arrow { position: absolute; top: 28px; right: 28px; width: 36px; height: 36px; border-radius: 999px; background: var(--ww-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: transform var(--dur-base) var(--ease-out); }
.cat-card:hover .cat-arrow { transform: translate(2px, -2px) rotate(-12deg); }
.cat-card.featured .cat-arrow { background: #fff; color: var(--ww-orange); }

/* ─── Section heading composition ─── */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 60px; flex-wrap: wrap; }
.sec-head .left { max-width: 720px; }
.sec-head .left h2 { margin-top: 14px; }
.sec-head .right { max-width: 380px; }

/* ─── Steps ─── */
.steps-sec { background: var(--ww-cream); }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.step {
  background: #fff;
  border-radius: 24px;
  padding: 24px 24px 28px;
  display: flex; flex-direction: column;
  outline: 1px solid var(--ww-line);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.step-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 4px; }
.step-num {
  font-family: var(--font-poppins); font-weight: 700;
  font-size: 18px; color: #fff;
  background: var(--ww-orange);
  width: 36px; height: 36px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 0;
}
.step-icon { width: 96px; height: 76px; flex-shrink: 0; }
.step-icon svg { width: 100%; height: 100%; }
.step-tag {
  display: inline-flex;
  align-self: flex-start;
  margin: 18px 0 12px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--ww-orange);
  color: #fff;
  font-family: var(--font-satoshi);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.step h3 {
  font-family: var(--font-poppins);
  font-size: 22px; font-weight: 700;
  line-height: 1.15;
  color: var(--ww-navy);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.step p {
  margin: 0;
  font-size: 14px; line-height: 1.55; color: var(--ww-ink-2);
}

@media (max-width: 1100px) {
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .steps-grid { grid-template-columns: 1fr; }
}
/* ─── Proof / charts ─── */
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.proof-card {
  padding: 40px; border-radius: 28px;
  background: #fff;
  outline: 1px solid var(--ww-line);
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 480px;
  position: relative; overflow: hidden;
}
.proof-card.cream { background: var(--ww-cream); outline: none; }
.proof-card.navy { background: var(--ww-navy); color: #fff; outline: none; }
.proof-card.navy .proof-eyebrow { color: rgba(255,255,255,0.7); }
.proof-card.navy .proof-stat { color: #fff; }
.proof-card.navy .proof-copy { color: rgba(255,255,255,0.85); }
.proof-eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ww-ink-3); font-weight: 500; }
.proof-stat { font-family: var(--font-poppins); font-size: clamp(72px, 7vw, 120px); line-height: 0.95; color: var(--ww-orange); font-weight: 600; letter-spacing: -0.04em; }
.proof-copy { font-size: 17px; line-height: 1.45; color: var(--ww-ink-2); max-width: 32ch; }
.proof-asterisk { font-size: 11px; color: var(--ww-ink-3); margin-top: 16px; line-height: 1.4; }
.proof-card.navy .proof-asterisk { color: rgba(255,255,255,0.55); }

/* simple bar viz for proof card */
.bar-viz { display: flex; align-items: flex-end; gap: 12px; height: 120px; margin: 24px 0 40px; }
.bar { flex: 1; background: var(--ww-orange); border-radius: 6px 6px 0 0; position: relative; transition: height var(--dur-large) var(--ease-out); }
.bar.muted { background: var(--ww-line-cool); }
/* Anchored with top:100% rather than a negative `bottom`: with `bottom` the
   box grows UPWARD when the label wraps, so a two-line label printed itself
   over the bar. This always grows downward instead. */
.bar-label { position: absolute; top: 100%; margin-top: 8px; left: 0; right: 0; text-align: center; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ww-ink-3); line-height: 1.3; }
.bar-val { position: absolute; top: -22px; left: 0; right: 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--ww-navy); }

/* Circular progress */
.dial-wrap { position: relative; width: 200px; height: 200px; margin: 12px 0 24px; }
.dial-wrap svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.dial-track { stroke: rgba(255,255,255,0.15); }
.dial-fill { stroke: var(--ww-orange); stroke-linecap: round; transition: stroke-dashoffset 1.4s var(--ease-out); }
.dial-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dial-num { font-family: var(--font-poppins); font-size: 60px; font-weight: 600; line-height: 1; color: #fff; }
.dial-pct { font-size: 18px; color: rgba(255,255,255,0.7); margin-top: 4px; }

/* Press logos strip */
.press-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; padding: 36px 0 0; margin-top: 48px; border-top: 1px solid var(--ww-line); }
.press-strip .label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ww-ink-3); font-weight: 500; }
.press-logo { font-family: var(--font-poppins); font-weight: 600; font-size: 18px; color: var(--ww-ink-3); letter-spacing: -0.01em; opacity: 0.8; }
.press-logo em { font-style: italic; font-weight: 400; }

/* ─── Product carousel ─── */
.product-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ─── Tiered program pricing (real MOUNJAWise tiers) ─── */
.tier-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 56px;
  align-items: stretch;
}
.tier-card {
  background: #fff; border-radius: 28px; overflow: hidden;
  display: flex; flex-direction: column;
  outline: 1px solid var(--ww-line);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), outline-color var(--dur-base) var(--ease-out);
  position: relative;
}
.tier-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.tier-card.featured {
  background: linear-gradient(180deg, #fff 0%, #fff 70%, var(--ww-cream) 100%);
  outline: 2px solid var(--ww-orange);
  transform: translateY(-12px);
  box-shadow: 0 30px 60px -28px rgba(227,102,0,0.35);
}
.tier-card.featured:hover { transform: translateY(-16px); }
.tier-img {
  aspect-ratio: 4 / 3;
  background: #fff;
  position: relative;
  overflow: hidden;
}
.tier-card.featured .tier-img { background: linear-gradient(180deg, #fff 0%, var(--ww-cream) 100%); }
.tier-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.tier-tag {
  position: absolute; top: 16px; left: 16px;
  padding: 6px 14px; border-radius: 999px;
  background: #fff; color: var(--ww-ink);
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  box-shadow: var(--sh-xs);
}
.tier-tag.orange { background: var(--ww-orange); color: #fff; }
.tier-body {
  padding: 28px 28px 32px;
  display: flex; flex-direction: column; gap: 12px;
  flex: 1;
}
.tier-kicker {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ww-ink-3); font-weight: 500;
}
.tier-card.featured .tier-kicker { color: var(--ww-orange); }
.tier-name {
  font-family: var(--font-poppins);
  font-size: clamp(28px, 2.4vw, 36px);
  font-weight: 600; color: var(--ww-navy);
  letter-spacing: -0.02em; line-height: 1;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
}
.tier-name-accent {
  font-family: var(--font-poppins);
  font-style: italic;
  font-weight: 600;
  color: var(--ww-orange);
  font-size: 0.78em;
}
.tier-desc { font-size: 14.5px; line-height: 1.5; color: var(--ww-ink-2); margin-bottom: 4px; }
.tier-includes {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--ww-line);
  padding-top: 16px;
}
.tier-includes li {
  font-size: 14px; line-height: 1.4; color: var(--ww-ink);
  padding-left: 26px; position: relative;
}
.tier-includes li::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 18px; height: 18px; border-radius: 999px;
  background: var(--ww-success);
  background-image: linear-gradient(135deg, transparent 36%, #fff 38%, #fff 44%, transparent 46%, transparent 52%, #fff 54%, #fff 70%, transparent 72%);
  background-size: 70% 70%;
  background-repeat: no-repeat;
  background-position: center;
}
.tier-card.featured .tier-includes li::before { background-color: var(--ww-orange); }
.tier-foot {
  margin-top: auto; padding-top: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.tier-price-block {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: baseline;
  column-gap: 12px;
}
.tier-was {
  grid-column: 1 / 2; grid-row: 1 / 2;
  font-family: var(--font-poppins);
  font-size: 18px;
  color: var(--ww-ink-3);
  text-decoration: line-through;
  text-decoration-color: var(--ww-orange);
  text-decoration-thickness: 2px;
  align-self: end;
}
.tier-price {
  grid-column: 1 / 2; grid-row: 2 / 3;
  font-family: var(--font-poppins);
  font-size: clamp(34px, 3vw, 44px);
  font-weight: 600; color: var(--ww-navy);
  letter-spacing: -0.02em;
  line-height: 1;
}
.tier-card.featured .tier-price { color: var(--ww-navy); }
.tier-price-sub {
  grid-column: 2 / 3; grid-row: 2 / 3;
  font-size: 13px; color: var(--ww-ink-3); font-weight: 500;
  align-self: end; padding-bottom: 4px;
}
.tier-foot .btn { justify-content: center; }

@media (max-width: 1100px) {
  .tier-row { grid-template-columns: 1fr; gap: 20px; }
  .tier-card.featured { transform: none; }
  .tier-img { aspect-ratio: 16 / 9; }
  .tier-card.featured:hover { transform: translateY(-4px); }
}

.product-card {
  background: #fff;
  border-radius: 24px; overflow: hidden;
  outline: 1px solid var(--ww-line);
  display: flex; flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  cursor: pointer;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.product-img { background: var(--ww-cream-soft); aspect-ratio: 4 / 5; position: relative; overflow: hidden; }
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease-out); }
.product-card:hover .product-img img { transform: scale(1.05); }
.product-tag { position: absolute; top: 16px; left: 16px; padding: 5px 12px; border-radius: 999px; background: #fff; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ww-navy); }
.product-tag.orange { background: var(--ww-orange); color: #fff; }
.product-body { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 10px; }
.product-kicker { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ww-ink-3); font-weight: 500; }
.product-name { font-family: var(--font-poppins); font-size: 24px; font-weight: 600; color: var(--ww-navy); letter-spacing: -0.01em; line-height: 1.15; }
.product-desc { font-size: 14.5px; color: var(--ww-ink-2); line-height: 1.5; }
.product-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.product-price { font-family: var(--font-poppins); font-size: 22px; font-weight: 600; color: var(--ww-navy); }
.product-price small { font-size: 13px; font-weight: 400; color: var(--ww-ink-3); }

/* ─── Companion app section ─── */
.app-sec { background: var(--ww-cream); padding: clamp(80px, 8vw, 140px) var(--pad); border-radius: 36px; margin: 0 8px; }
.app-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center; max-width: var(--max); margin: 0 auto; }
.app-feature-list { display: flex; flex-direction: column; gap: 18px; margin-top: 32px; }
.app-feature { display: flex; gap: 16px; align-items: flex-start; }
.app-feature-bullet { width: 36px; height: 36px; min-width: 36px; border-radius: 999px; background: var(--ww-orange); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.app-feature h4 { margin: 0 0 4px; font-family: var(--font-poppins); font-size: 18px; font-weight: 600; color: var(--ww-navy); }
.app-feature p { margin: 0; font-size: 14.5px; color: var(--ww-ink-2); line-height: 1.5; }
.app-phone { position: relative; width: 100%; aspect-ratio: 9/16; max-width: 420px; margin: 0 auto; }
.app-phone-bezel { position: absolute; inset: 0; background: #1d1d1f; border-radius: 48px; padding: 12px; box-shadow: 0 30px 60px rgba(15,23,42,0.18), inset 0 0 0 1.5px rgba(255,255,255,0.08); }
.app-phone-screen { width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: #fff; position: relative; display: flex; flex-direction: column; }
.app-phone-notch { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 100px; height: 26px; background: #1d1d1f; border-radius: 999px; z-index: 5; }
.app-store-row { display: flex; gap: 12px; margin-top: 32px; }
.app-store-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 14px; background: var(--ww-navy); color: #fff; font-size: 13px; }
.app-store-btn .small { font-size: 10px; letter-spacing: 0.04em; opacity: 0.7; line-height: 1; }
.app-store-btn .big { font-size: 16px; font-weight: 600; line-height: 1.1; font-family: var(--font-poppins); }

/* In-phone mock content */
.phone-status { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px 0; font-family: var(--font-satoshi); font-weight: 600; font-size: 13px; color: var(--ww-ink); }
.phone-pad { padding: 50px 22px 22px; flex: 1; display: flex; flex-direction: column; gap: 16px; }
.phone-greeting { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.phone-avatar { width: 36px; height: 36px; border-radius: 999px; background: var(--ww-orange); }
.phone-greeting .hi { font-size: 13px; color: var(--ww-ink-3); }
.phone-greeting .name { font-family: var(--font-poppins); font-weight: 600; color: var(--ww-navy); font-size: 16px; line-height: 1; margin-top: 2px; }
.phone-card { background: #fff; border-radius: 20px; padding: 16px; outline: 1px solid var(--ww-line); display: flex; flex-direction: column; gap: 10px; }
.phone-card-row { display: flex; justify-content: space-between; align-items: center; }
.phone-card-title { font-family: var(--font-poppins); font-size: 15px; font-weight: 600; color: var(--ww-navy); }
.phone-card-meta { font-size: 11px; color: var(--ww-ink-3); }
.phone-ring { width: 90px; height: 90px; margin: 8px auto 4px; position: relative; }
.phone-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.phone-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-poppins); }
.phone-ring-num { font-size: 22px; font-weight: 600; color: var(--ww-navy); line-height: 1; }
.phone-ring-lbl { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ww-ink-3); margin-top: 2px; }
.phone-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.phone-stat { background: #f8f6f0; border-radius: 8px; padding: 6px 8px; text-align: center; }
.phone-stat .v { font-family: var(--font-poppins); font-weight: 600; font-size: 13px; color: var(--ww-navy); }
.phone-stat .l { font-size: 9px; color: var(--ww-ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.phone-meal { background: #fff; border-radius: 18px; padding: 12px; outline: 1px solid var(--ww-line); display: flex; gap: 12px; align-items: center; }
.phone-meal-img { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #f7b67a, #e36600); }
.phone-meal-text { flex: 1; }
.phone-meal-text .t { font-family: var(--font-poppins); font-weight: 600; font-size: 13px; color: var(--ww-navy); line-height: 1.1; }
.phone-meal-text .s { font-size: 11px; color: var(--ww-ink-3); margin-top: 2px; }
.phone-meal-cal { font-family: var(--font-poppins); font-weight: 600; color: var(--ww-orange); font-size: 14px; }
.phone-tabs { margin-top: auto; padding: 12px 22px 18px; display: flex; justify-content: space-around; align-items: center; border-top: 1px solid var(--ww-line); background: #fff; }
.phone-tab { font-size: 9px; color: var(--ww-ink-3); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.phone-tab.active { color: var(--ww-orange); }
.phone-tab-dot { width: 18px; height: 18px; border-radius: 5px; background: currentColor; opacity: 0.8; }
.phone-tab.fab .phone-tab-dot { width: 40px; height: 40px; border-radius: 999px; background: var(--ww-orange); opacity: 1; margin: -16px 0 -2px; box-shadow: 0 6px 12px rgba(227,102,0,0.4); }

/* ─── Doctors / experts swiper ─── */
.doctor-card {
  background: #fff; border-radius: 28px; padding: 32px;
  display: grid; grid-template-columns: 240px 1fr; gap: 36px; align-items: center;
  outline: 1px solid var(--ww-line);
}
.doctor-photo { width: 240px; height: 320px; border-radius: 20px; overflow: hidden; background: var(--ww-cream-soft); }
.doctor-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.doctor-info { display: flex; flex-direction: column; gap: 14px; }
.doctor-name { font-family: var(--font-poppins); font-size: 32px; font-weight: 600; color: var(--ww-navy); letter-spacing: -0.02em; }
.doctor-role { font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ww-orange); font-weight: 500; }
.doctor-bio { font-size: 16px; line-height: 1.6; color: var(--ww-ink-2); }
.doctor-creds { display: flex; flex-wrap: wrap; gap: 8px; }
.doctor-creds span { padding: 4px 12px; border-radius: 999px; background: var(--ww-cream); font-size: 12px; color: var(--ww-navy); font-weight: 500; }
.doctor-nav { display: flex; gap: 8px; margin-top: 32px; justify-content: center; }
.doctor-nav button { width: 44px; height: 44px; border-radius: 999px; background: #fff; outline: 1px solid var(--ww-line); border: none; cursor: pointer; color: var(--ww-navy); font-size: 18px; transition: background var(--dur-base) var(--ease-out); display: flex; align-items: center; justify-content: center; }
.doctor-nav button:hover { background: var(--ww-cream); }
.doctor-dots { display: flex; gap: 6px; margin: 0 12px; align-self: center; }
.doctor-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ww-line-cool); transition: width var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.doctor-dot.active { width: 24px; background: var(--ww-orange); }

/* ─── Final CTA ─── */
.cta-block {
  position: relative; overflow: hidden;
  border-radius: 36px;
  padding: clamp(60px, 6vw, 100px) clamp(36px, 5vw, 80px);
  background: var(--ww-navy);
  color: #fff;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center;
}
.cta-block::before {
  content: ""; position: absolute; right: -20%; top: -30%; width: 60%; height: 160%;
  background: radial-gradient(circle at center, var(--ww-orange) 0%, transparent 65%);
  opacity: 0.35; filter: blur(40px);
}
.cta-block > * { position: relative; z-index: 1; }
.cta-block h2 { color: #fff; max-width: 14ch; }
.cta-block p { color: rgba(255,255,255,0.85); margin-top: 18px; max-width: 44ch; font-size: 17px; line-height: 1.5; }
.cta-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.cta-block .btn-primary { background: var(--ww-orange); }
.cta-block .btn-primary:hover { background: var(--ww-orange-press); }
.cta-block .btn-secondary { background: rgba(255,255,255,0.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); }
.cta-block .btn-secondary:hover { background: rgba(255,255,255,0.22); }
.cta-photo { aspect-ratio: 4/5; border-radius: 24px; overflow: hidden; max-height: 480px; }
.cta-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ─── Footer ─── */
.footer { background: #fff; padding: 80px var(--pad) 40px; border-top: 1px solid var(--ww-line); }
.footer-inner { max-width: var(--max); margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; padding-bottom: 60px; }
.footer-lockup { display: flex; align-items: center; gap: 12px; }
.footer-lockup img { height: 40px; width: auto; }
.footer-lockup span {
  font-family: var(--font-poppins);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--ww-navy);
}
.footer-brand p { margin-top: 20px; font-size: 14px; line-height: 1.5; color: var(--ww-ink-2); max-width: 280px; }
.footer-col h5 { font-family: var(--font-poppins); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ww-navy); margin: 0 0 16px; }
.footer-col a { display: block; font-size: 14px; color: var(--ww-ink-2); margin-bottom: 10px; transition: color var(--dur-base); }
.footer-col a:hover { color: var(--ww-orange); }
/* Business contact block — one detail per line, not italicised like a
   default <address>. Required to be visible for Google Ads review. */
.footer-contact { display: flex; flex-direction: column; gap: 10px; font-style: normal; }
.footer-contact span { font-size: 14px; line-height: 1.45; color: var(--ww-ink-2); }
.footer-contact span:first-child { font-weight: 500; color: var(--ww-navy); }
.footer-contact a { margin-bottom: 0; }
.footer-bot { border-top: 1px solid var(--ww-line); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--ww-ink-3); }
.footer-legal { display: flex; gap: 22px; }
.footer-legal a:hover { color: var(--ww-orange); }

/* ─── Food AI section ─── */
.foodai-sec { background: #fff; padding-top: clamp(80px, 8vw, 140px); padding-bottom: clamp(80px, 8vw, 140px); }
.foodai-head {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: end;
  max-width: var(--max); margin: 0 auto 64px;
}
.foodai-head .lede { margin: 0; }
.foodai-grid {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center;
  max-width: var(--max); margin: 0 auto;
}
.foodai-photo {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--ww-cream) 0%, var(--ww-cream-soft) 60%, #fff 100%);
  aspect-ratio: 4 / 5;
  display: flex; align-items: center; justify-content: center;
}
.foodai-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* animated demo: source is 1920x1080 with a 608px-wide phone panel centered — zoom so the panel fills the frame */
.foodai-photo img.foodai-gif, .foodai-photo video.foodai-gif { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 316%; height: auto; object-fit: unset; }
.foodai-tag {
  position: absolute;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ww-orange);
  color: #fff;
  font-family: var(--font-poppins);
  font-weight: 500;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(124,45,18,0.2);
  white-space: nowrap;
}
.foodai-tag-1 { top: 28px; left: -8px; transform: rotate(-3deg); }
.foodai-tag-2 { top: 46%; right: -16px; transform: rotate(2deg); background: var(--ww-navy); }

.foodai-steps { display: flex; flex-direction: column; gap: 28px; }
.foodai-step { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; }
.foodai-step-num {
  width: 48px; height: 48px; border-radius: 999px;
  background: var(--ww-orange); color: #fff;
  font-family: var(--font-poppins); font-weight: 600;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.foodai-step h4 {
  margin: 6px 0 6px;
  font-family: var(--font-poppins); font-weight: 600;
  font-size: 22px; color: var(--ww-navy); letter-spacing: -0.01em;
}
.foodai-step p {
  margin: 0;
  font-size: 15px; line-height: 1.55; color: var(--ww-ink-2);
}
.foodai-chips {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 8px; padding-top: 24px;
  border-top: 1px solid var(--ww-line);
}
.foodai-chip {
  font-size: 13px; font-weight: 500; padding: 8px 14px;
  border-radius: 999px;
  background: var(--ww-cream); color: var(--ww-navy);
}

/* ─── Eater Type section ─── */
.eater-sec {
  background: var(--ww-cream);
  padding-top: clamp(80px, 8vw, 140px);
  padding-bottom: clamp(80px, 8vw, 140px);
}
.eater-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-top: 12px;
}
.eater-card {
  border-radius: 24px;
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  margin: 0;
  box-shadow: 0 6px 18px -10px rgba(15,23,42,0.15);
}
.eater-card:hover { transform: translateY(-6px) rotate(-0.5deg); box-shadow: 0 16px 36px -12px rgba(15,23,42,0.25); }
.eater-card:nth-child(2n):hover { transform: translateY(-6px) rotate(0.5deg); }
.eater-img-slot {
  width: 100%;
  /* New source images are pre-centered 1:1 squares — show them full. */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
}
.eater-img-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.eater-card figcaption {
  background: rgba(255,255,255,0.96);
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 84px;
}
.eater-name {
  font-family: var(--font-poppins); font-weight: 600;
  font-size: 17px; color: var(--ww-navy); letter-spacing: -0.01em;
}
.eater-desc {
  font-size: 13px; line-height: 1.4; color: var(--ww-ink-2);
}
.eater-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  margin-top: 56px; padding-top: 36px;
  border-top: 1px solid rgba(0,0,0,0.08);
  flex-wrap: wrap;
}
.eater-total { display: flex; align-items: baseline; gap: 16px; }
.eater-total-num {
  font-family: var(--font-poppins); font-weight: 600;
  font-size: 72px; line-height: 1; color: var(--ww-orange);
  letter-spacing: -0.04em;
}
.eater-total-lbl {
  font-size: 16px; color: var(--ww-ink-2); max-width: 280px;
}

@media (max-width: 1100px) {
  .foodai-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
  .foodai-grid { grid-template-columns: 1fr; gap: 40px; }
  .foodai-photo { aspect-ratio: 1 / 1; max-height: 560px; }
  .eater-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

/* ─── Video hero (full-bleed) ─── */
.video-hero { position: relative; min-height: 640px; height: min(860px, 92vh); display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 0 0 24px 24px; color: #fff; text-align: center; background: #0d2042; }
.video-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.video-hero-shade { position: absolute; inset: 0; background: linear-gradient(rgba(13,32,66,0.28), rgba(13,32,66,0.46)); z-index: 1; }
.video-hero-texts { position: relative; z-index: 2; max-width: 860px; padding: 0 24px; display: flex; flex-direction: column; align-items: center; }
.video-hero-title { font-size: clamp(44px, 6vw, 84px); line-height: 1.04; letter-spacing: -0.02em; font-weight: 600; color: #fff; }
.video-hero-para { margin-top: 22px; font-size: 18px; line-height: 1.5; color: rgba(255,255,255,0.92); max-width: 560px; text-wrap: pretty; }
.video-hero-ctas { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.btn-glass { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border-radius: 999px; background: rgba(255,255,255,0.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.35); color: #fff; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; transition: background var(--dur-base); }
.btn-glass:hover { background: rgba(255,255,255,0.3); color: #fff; }
.video-hero-mute { position: absolute; top: 18px; right: 18px; z-index: 2; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.35); background: rgba(13,32,66,0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--dur-base); }
.video-hero-mute:hover { background: rgba(13,32,66,0.75); }
.video-hero-player { position: absolute; inset: 0; z-index: 3; background: #0d2042; }
.video-hero-player iframe { width: 100%; height: 100%; border: 0; }
.video-hero-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.35); background: rgba(13,32,66,0.6); backdrop-filter: blur(8px); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.video-hero-close:hover { background: rgba(13,32,66,0.85); }
@media (max-width: 700px) { .video-hero { min-height: 520px; } .video-hero-title { font-size: 40px; } }

/* ─── Video explainer section (legacy) ─── */
.video-sec { border-radius: 36px; margin: 0 8px; }
.video-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; }
.video-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: #0d2042; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.45); }
.video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; background: none; display: block; }
.video-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-out); }
.video-poster:hover img { transform: scale(1.03); }
.video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 999px; background: var(--ww-orange); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 32px rgba(0,0,0,0.35); transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.video-poster:hover .video-play { transform: translate(-50%, -50%) scale(1.08); background: var(--ww-orange-press); }
.video-play-tri { width: 0; height: 0; border-style: solid; border-width: 14px 0 14px 24px; border-color: transparent transparent transparent #fff; margin-left: 6px; }
.video-play-label { position: absolute; bottom: 18px; left: 18px; padding: 8px 16px; border-radius: 999px; background: rgba(13,32,66,0.72); backdrop-filter: blur(8px); color: #fff; font-size: 13px; font-weight: 500; font-family: var(--font-satoshi); }
.video-sub { margin-top: 16px; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.85); }
.video-beats { margin-top: 24px; display: flex; flex-direction: column; gap: 0; border-top: 1px solid rgba(255,255,255,0.14); }
.video-beat { display: flex; gap: 14px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.14); }
.video-ts { font-family: var(--font-poppins); font-weight: 600; font-size: 12px; color: var(--ww-orange); background: rgba(255,255,255,0.08); border-radius: 999px; padding: 3px 10px; flex-shrink: 0; letter-spacing: 0.04em; }
.video-beat-txt { font-size: 14px; line-height: 1.45; color: rgba(255,255,255,0.92); }
.video-caption { margin-top: 18px; font-size: 14px; font-style: italic; color: rgba(255,255,255,0.65); }
@media (max-width: 1100px) { .video-grid { grid-template-columns: 1fr; gap: 36px; } }

/* ─── Training section ─── */
.train-demo { position: relative; margin-top: 24px; border-radius: 28px; overflow: hidden; box-shadow: var(--sh-lg); background: #faf3ea; }
.train-demo img, .train-demo video { width: 100%; display: block; }
.train-demo-tag { position: absolute; top: 18px; left: 18px; padding: 10px 16px; border-radius: 999px; background: var(--ww-orange); color: #fff; font-family: var(--font-poppins); font-weight: 500; font-size: 13px; box-shadow: var(--sh-md); }
.train-grid { display: grid; grid-template-columns: 1.1fr 2fr; gap: 24px; align-items: stretch; }
.train-stat { background: var(--ww-navy); color: #fff; border-radius: 28px; padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.train-stat-num { font-family: var(--font-poppins); font-size: clamp(64px, 7vw, 110px); font-weight: 600; line-height: 0.95; color: var(--ww-orange); letter-spacing: -0.03em; margin-top: 8px; }
.train-stat-copy { margin-top: 16px; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,0.85); }
.train-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.train-card { background: #fff; border-radius: 20px; padding: 24px 24px 26px; outline: 1px solid var(--ww-line); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.train-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.train-card-ico { font-size: 24px; }
.train-card h4 { margin: 10px 0 6px; font-family: var(--font-poppins); font-size: 18px; font-weight: 600; color: var(--ww-navy); }
.train-card p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ww-ink-2); }
@media (max-width: 980px) { .train-grid { grid-template-columns: 1fr; } .train-cards { grid-template-columns: 1fr; } }

/* ─── Tweak themes ─── */
body[data-theme="warm"] { background: var(--ww-cream-soft); }
body[data-theme="warm"] section:not(.surface-navy):not(.app-sec) { background: transparent; }
body[data-theme="warm"] .footer { background: var(--ww-cream-soft); }
body[data-theme="warm"] .step { background: #fff; }

body[data-theme="clinical"] .hero-scrim {
  background: linear-gradient(180deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.1) 60%, rgba(255,255,255,0.85) 100%);
}
body[data-theme="clinical"] .cats-grid { background: #fff; }

body[data-theme="editorial"] { background: #fff; }
body[data-theme="editorial"] h1.display { font-family: var(--font-poppins); font-weight: 600; letter-spacing: -0.04em; }
body[data-theme="editorial"] section { padding-block: clamp(100px, 10vw, 180px); }

/* responsive */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .cats-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-grid { grid-template-columns: 1fr; }
  .product-row { grid-template-columns: 1fr; }
  .product-img { aspect-ratio: 16 / 10; }
  .cta-photo { max-height: 420px; width: 100%; }
  .app-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cta-block { grid-template-columns: 1fr; }
  .doctor-card { grid-template-columns: 1fr; }
  .doctor-photo { width: 100%; height: 320px; }
  .kit-grid { grid-template-columns: 1fr; }
  .eater-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
  .container { padding-left: 20px; padding-right: 20px; }
  .hero { min-height: 640px; height: 100svh; }
  .video-hero { height: min(860px, 92svh); }
  .hero-title { font-size: clamp(34px, 9vw, 44px); }
  .section-title { font-size: clamp(28px, 7.5vw, 36px); }
  .footer-grid { grid-template-columns: 1fr; }
  .video-hero-ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .hero-pills { flex-wrap: wrap; }
  .foodai-callouts { flex-wrap: wrap; }
  .train-demo-tag { font-size: 11px; padding: 8px 12px; }
  .app-phone { max-width: 340px; }
  .product-img { aspect-ratio: 4 / 3; }
  .foodai-photo { aspect-ratio: 4 / 5; max-height: 460px; }
  .cta-photo { max-height: 360px; }
  .doctor-photo { height: 280px; }
  .eater-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .eater-card figcaption { padding: 10px 12px 12px; min-height: 0; }
  .eater-name { font-size: 14px; }
  .eater-desc { font-size: 11.5px; }
  .eater-total-num { font-size: 52px; }
}

/* ═══════════════════════════════════════════════════════════════
   Mobile corrections — MUST STAY LAST IN THIS FILE

   Earlier in the file, `@media (max-width: 640px) { .steps-grid:
   1fr }` was defined before `@media (max-width: 980px) {
   .steps-grid: repeat(2, 1fr) }`. Both match on a phone and they
   have equal specificity, so the later one won and the steps
   section rendered two columns at 360px. The second column sat
   ~110px past the right edge, and because nothing scrolls
   horizontally it was simply unreachable.

   Anything added below overrides the blocks above by source
   order. Keep it at the bottom.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* ── the actual cut-off bug ── */
  .steps-grid { grid-template-columns: 1fr; gap: 28px; }
  .step { display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; align-items: start; }
  /* Icon column spans the whole card so the tag, heading and body text flow
     continuously beside it instead of each starting a new grid row. */
  .step-top { grid-column: 1; grid-row: 1 / -1; align-self: start;
              flex-direction: column; align-items: center; gap: 8px; margin-bottom: 0; }
  .step-icon { width: 64px; height: 52px; }
  .step-tag, .step h3, .step p { grid-column: 2; }
  .step-tag { justify-self: start; margin-bottom: 6px; }

  /* ── readable text: nothing informational below 12px ── */
  .eyebrow, .proof-eyebrow, .cat-tag, .product-kicker,
  .tier-price-sub, .app-store-btn .small { font-size: 12px; }
  .bar-label { font-size: 11px; }
  .hero-pills-label, .hero-credits { font-size: 12px; }
  /* Running footnote text, as opposed to the uppercase micro-labels above,
     which stay at 11px — that is a normal size for wide-tracked all-caps. */
  .proof-asterisk, .train-demo-tag { font-size: 12px; line-height: 1.5; }
  /* Text inside .app-phone deliberately stays tiny: it is an illustration of
     a phone screen, not content to read. */

  /* ── tap targets: 44px is the accessibility floor ── */
  .lang-toggle button { padding: 10px 16px; min-height: 44px; display: flex; align-items: center; }
  .nav-brand { min-height: 44px; display: flex; align-items: center; }
  .footer-col a, .footer-legal a, .footer-contact a {
    min-height: 44px; display: flex; align-items: center; margin-bottom: 0;
  }
  .btn, .btn-glass { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

  /* ── breathing room ── */
  /* .sec-head is a wrapping flex row; on a phone it stacks, so the 40px gap
     and 60px margin compound into ~100px of dead space before the cards. */
  .sec-head { gap: 18px; margin-bottom: 32px; }
  .footer-grid { gap: 28px; }
  .footer { padding-top: 56px; }
  .cta-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .cta-actions .btn { width: 100%; }
}

/* ── Hero on a phone ────────────────────────────────────────────
   Three separate faults, all visible at the top of the page:

   1. .hero centres its content and the nav is position:fixed, so the
      eyebrow rendered *underneath* the 88px nav bar — it read as the
      EN/TH toggle overlapping the text.
   2. .hero-bottom is absolutely positioned at bottom:24px, and nothing
      reserved space for it, so the last pill sat on top of the credits.
   3. .hero is height:100svh with overflow:hidden. Anything that didn't
      fit was clipped with no way to scroll to it — which is why the
      "Choose where to start" pills were half missing.

   Fixed by anchoring content to the top, padding past the nav, reserving
   room for .hero-bottom, and letting the hero grow instead of clip.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .hero {
    height: auto;
    min-height: 100svh;
    max-height: none;
    align-items: flex-start;
  }
  .hero-inner {
    padding-top: 108px;    /* 88px nav + 20px breathing room */
    padding-bottom: 96px;  /* clears .hero-bottom */
    gap: 20px;
  }
  .hero-title { font-size: clamp(30px, 8.2vw, 40px); }
  .hero-sub { font-size: 15px; line-height: 1.55; }

  /* Two even columns beat four full-width rows: same tap size, less than
     half the height, and no collision with the credits below. */
  .hero-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero-pills-label { grid-column: 1 / -1; margin-bottom: 0; }
  .hero-pills .btn-glass { width: 100%; padding-inline: 10px; font-size: 13px; text-align: center; }

  /* Stack the credits above the scroll hint so neither is squeezed. */
  .hero-bottom { flex-direction: column; align-items: center; gap: 8px; bottom: 18px; }
  .hero-credits { flex-wrap: wrap; justify-content: center; row-gap: 2px; }
}

/* Very short screens (landscape phones): let the hero be as tall as its
   content rather than forcing it into the viewport and clipping. */
@media (max-width: 760px) and (max-height: 700px) {
  .hero { min-height: 0; }
}

/* .cats is pulled up 120px to overlap the hero image. That works on a wide
   screen where the cards sit inboard of the hero credits, but once the grid
   collapses to one full-width column the cards land on top of "Cert. by Thai
   FDA · Real prescribers · Bangkok". Matches the 980px grid breakpoint. */
@media (max-width: 980px) {
  .cats { margin-top: 24px; }
}

@media (max-width: 760px) {
  /* 72px is oversized on a 390px screen and collided with the chart labels. */
  .proof-stat { font-size: clamp(42px, 11vw, 68px); }
  .proof-copy { font-size: 15.5px; }

  /* The mockup is locked to a 9/16 box, so once it shrinks below roughly
     400px wide its simulated screen no longer fits and the lower rows were
     cut off. Let it grow to its content instead — it keeps a phone
     silhouette and nothing is clipped. */
  .app-phone { aspect-ratio: auto; }
  .app-phone-bezel { position: relative; inset: auto; }
  .app-phone-screen { height: auto; }
  .phone-pad { padding: 38px 16px 18px; gap: 10px; }
}

/* Long unbroken strings (emails, @handles, URLs) must never force the
   page wider than the screen. */
@media (max-width: 760px) {
  .footer-contact a, .footer-contact span, .app-store-btn .big {
    overflow-wrap: anywhere;
  }
}

/* The nav is position:fixed and 88px tall on a phone. Without this, every
   in-page link (nav menu, hero pills, footer) scrolls the target heading
   underneath the nav bar and it reads as cut in half. Applies on all sizes
   because the nav is fixed on desktop too. */
#top, #treat, #how, #watch, #doctors, #foodai,
#science, #programs, #training, #start {
  scroll-margin-top: 96px;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}