/* ============================================================
   Nutritionist Sapna — design pass (frontend-design skill)
   Tokens from the subject's world: the market stall — fresh
   produce on a white counter.
     paper  #FFFFFF  white counter — page ground (client brief)
     methi  #2E7D50  leafy green — actions / health
     fruit  #E05E2E  ripe persimmon — brand accents (large/decorative)
     fruit-deep #A93A12 — persimmon for small text (4.5:1+)
     mirchi #C6402B  chilli red — conversion (WhatsApp CTAs)
   Type: Gloock (display) + Work Sans (body) + Space Mono (labels)
   Signature: the hero "Nutrition Facts" panel.
   ============================================================ */

:root {
  /* Palette — premium nutrition brand (brief 2026-08) */
  --paper: #FFFFFF;        /* white — page ground */
  --paper-soft: #F2F8F4;   /* light green — alt bands */
  --cream: #FCFAF6;        /* soft cream — card surface */
  --ink: #17231D;          /* main text */
  --muted: #66736B;        /* secondary text */
  --green: #218653;        /* primary green — brand, trust, headings, secondary CTA */
  --green-deep: #176B45;   /* deep green */
  --green-soft: #E9F4EC;   /* light green tint — chips, small fills */
  --fruit: #E85C45;        /* warm coral — accents (large/decorative) */
  --fruit-deep: #B53B24;   /* coral deep — small coral text (5.8:1) */
  --mirchi: #CE3A24;       /* coral red — PRIMARY CTA (4.9:1 with white) */
  --mirchi-deep: #A92F1D;
  --line: #E3EAE5;         /* border */
  --white: #FFFFFF;
  --gold: #000000;         /* focus ring — max contrast on every surface */

  /* Type — Apple system fonts (SF Pro on Apple devices; Segoe UI / Roboto elsewhere) */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Metrics */
  --container: 1180px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(23, 35, 29, 0.05), 0 4px 12px rgba(23, 35, 29, 0.05);
  --shadow-md: 0 8px 28px rgba(23, 35, 29, 0.10);
  --shadow-lg: 0 24px 60px rgba(23, 67, 45, 0.16);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 240ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-deep); }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1, h2 { letter-spacing: -0.01em; }
h3, h4 { letter-spacing: -0.005em; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
svg { flex: none; }
/* kill residual tap delay on touch browsers (UI/UX pro-max: touch-action rule) */
a, button, [role="button"] { touch-action: manipulation; }

/* ---------- Utilities ---------- */
section[id] { scroll-margin-top: 92px; }
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--green);
  color: var(--white);
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.section-kicker {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fruit-deep);
  margin: 0 0 10px;
}
.section-kicker::before {
  content: "◆ ";
  color: var(--fruit);
  font-size: 0.7rem;
  letter-spacing: 0;
}
.section-title {
  font-size: clamp(2.1rem, 3.8vw, 2.9rem);
  color: var(--ink);
  margin-bottom: 0.55em;
  line-height: 1.18;
}
.section-intro {
  color: var(--muted);
  max-width: 46rem;
  margin: 0 auto 1.4em;
  text-align: center;
  font-size: 1.1rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.btn-primary {
  background: var(--green);
  color: var(--white);
}
.btn-primary:hover { background: var(--green-deep); color: var(--white); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-accent {
  background: var(--mirchi);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(198, 64, 43, 0.32);
}
.btn-accent:hover { background: var(--mirchi-deep); color: var(--white); transform: translateY(-1px); }
.btn-outline {
  background: transparent;
  color: var(--green-deep);
  border-color: var(--green);
}
.btn-outline:hover { background: var(--green-soft); }
.btn-light {
  background: var(--white);
  color: var(--green-deep);
}
.btn-light:hover { background: var(--paper-soft); color: var(--green-deep); }
.btn-light-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.55);
}
.btn-light-outline:hover { background: rgba(255, 255, 255, 0.12); color: var(--white); }

/* ---------- Topbar (leaf frame) ---------- */
.topbar {
  background: var(--green-deep);
  color: var(--white);
  font-size: 0.85rem;
  padding: 8px 0;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.topbar-brand { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.04em; }
.topbar-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.topbar-link { color: var(--white); display: inline-flex; align-items: center; gap: 6px; }
.topbar-link:hover { color: var(--paper); }
.topbar-social { display: inline-flex; gap: 10px; margin-left: 4px; }
.topbar-social a {
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.topbar-social a:hover { background: rgba(255, 255, 255, 0.18); color: var(--white); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253, 248, 236, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 2px 14px rgba(20, 40, 31, 0.07);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand { display: inline-flex; }
.brand-logo { width: 200px; height: auto; }
.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav-list { display: flex; align-items: center; gap: 22px; }
.nav-link {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.96rem;
  position: relative;
  padding: 4px 0;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: var(--fruit);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav-link:hover { color: var(--green-deep); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active { color: var(--green-deep); }
.nav-link.active::after { transform: scaleX(1); }
.nav-cta { min-height: 42px; padding: 9px 18px; font-size: 0.9rem; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 12px 9px;
  cursor: pointer;
}
.nav-toggle-bar {
  width: 26px; height: 3px;
  background: var(--ink);
  border-radius: 3px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.nav-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 64px;
  min-height: 720px;
  display: flex;
  align-items: center;
  background: var(--paper); /* fallback while the photo loads */
}
/* Hero photo layer — woman right, green negative space left (see layer map in docs) */
.hero-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("assets/hero-sapna.webp");
  background-size: cover;
  background-position: 40% center;
  background-repeat: no-repeat;
}
/* Light cream scrim over the left copy zone so the dark ink text always reads
   over the photo (same treatment as the mobile hero). The woman stays visible
   on the right — the scrim fades out by ~78% of the hero width. */
.hero-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(252, 250, 246, 0.92) 0%, rgba(252, 250, 246, 0.78) 40%, rgba(252, 250, 246, 0.42) 60%, rgba(252, 250, 246, 0) 78%);
}
.hero-copy > * {
  opacity: 0;
  animation: rise 700ms var(--ease) forwards;
}
.hero-copy > *:nth-child(1) { animation-delay: 40ms; }
.hero-copy > *:nth-child(2) { animation-delay: 130ms; }
.hero-copy > *:nth-child(3) { animation-delay: 220ms; }
.hero-copy > *:nth-child(4) { animation-delay: 310ms; }
.hero-copy > *:nth-child(5) { animation-delay: 400ms; }
.hero-copy > *:nth-child(6) { animation-delay: 480ms; }
.hero-visual {
  opacity: 0;
  animation: rise 800ms var(--ease) 220ms forwards;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
.btn-icon { width: 18px; height: 18px; }
.hero-grid {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
}
.hero-copy { max-width: 540px; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fruit-deep);
  margin: 0 0 18px;
}
.hero-title {
  font-size: clamp(2.4rem, 5vw, 3.9rem);
  line-height: 1.1;
  margin-bottom: 22px;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero-title em {
  font-style: italic;
  color: var(--green);
}
.hero-diff {
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--green-deep);
  margin: -10px 0 16px;
  padding-left: 14px;
  border-left: 4px solid var(--fruit);
  max-width: 34rem;
}
.hero-sub {
  font-size: 1.14rem;
  color: #3E4C44; /* darker than --muted so it stays ≥4.5:1 over the cream scrim */
  max-width: 36rem;
  margin-bottom: 28px;
  line-height: 1.6;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-lg { min-height: 54px; padding: 15px 30px; font-size: 1.02rem; }
.hero-trust {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 22px 0 0;
  font-size: 0.95rem;
  color: #3E4C44; /* darker than --muted for ≥4.5:1 over the cream scrim */
}
.hero-trust-item { display: inline-flex; align-items: baseline; gap: 4px; }
.hero-stars { color: #A16207; letter-spacing: 0.06em; }
.hero-trust-sep { color: var(--line); }
.hero-trust strong { color: var(--ink); font-weight: 700; }
.reel-caption strong { display: block; font-size: 0.98rem; line-height: 1.25; margin-bottom: 3px; }
.reel-caption small { display: block; font-size: 0.76rem; font-weight: 500; line-height: 1.35; opacity: 0.92; }

/* App store badges — icon tiles (the store glyphs, no text) */
.app-badges { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.app-badges-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-deep);
  background: var(--green-soft);
  border: 1px solid rgba(26, 58, 42, 0.18);
  border-radius: 999px;
  padding: 8px 13px;
  white-space: nowrap;
}
.app-badges-icon { flex: none; }
.app-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: #10130F;
  color: var(--white);
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.app-badge:hover { background: #22261F; color: var(--white); transform: translateY(-2px); }
.app-badge:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.app-badge-icon { width: 24px; height: 24px; }

/* Right column: intro video top-right, Nutrition Facts bottom-right.
   Both anchor to the hero itself so they never overlap (the facts panel
   previously sat on top of the video and hid it). */
.hero-visual {
  position: absolute;
  top: 36px;
  bottom: 28px;
  right: 28px;
  width: 200px;
  z-index: 3;
}
.hero-visual .hero-reel {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
}
.hero-visual .facts {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 210px;
}
.dp-roundel {
  position: absolute;
  left: -18px;
  bottom: -18px;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  border: 5px solid var(--white);
  box-shadow: var(--shadow-md);
  object-fit: cover;
  animation: floaty 5.5s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* Signature: the Nutrition Facts panel (overlays the hero video's bottom-right) */
.facts {
  position: absolute;
  right: -24px;
  bottom: 0;
  width: 230px;
  z-index: 4;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 14px 16px 12px;
  box-shadow: var(--shadow-md);
  font-family: var(--font-mono);
  color: var(--ink);
  transform: rotate(-1.5deg);
  transition: transform var(--dur) var(--ease);
}
.facts:hover { transform: rotate(0deg) translateY(-3px); }
.facts-head {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  margin: 0 0 2px;
  border-bottom: 6px solid var(--ink);
  padding-bottom: 3px;
}
.facts-serving {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 7px 0 8px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 6px;
}
.facts-rows { margin: 0 0 8px; border-bottom: 1px solid var(--ink); }
.facts-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.78rem;
  padding: 4px 0;
}
.facts-row dt { font-weight: 500; }
.facts-row dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.facts-plus { color: var(--fruit-deep); }
.facts-foot {
  font-size: 0.75rem;
  line-height: 1.45;
  margin: 0;
  color: var(--muted);
}

/* ---------- Featured In ---------- */
.featured {
  padding: 44px 0 52px;
  border-top: 1px solid var(--line);
}
.featured-title {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 26px;
}
.press-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  flex-wrap: wrap;
}
.press-list li {
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.press-list li:hover { filter: grayscale(0); opacity: 1; transform: translateY(-2px); }
.press-list img { max-height: 46px; width: auto; }

/* ---------- Services (replaced by problem/how/offer) ---------- */
/* ---------- About ---------- */
.about {
  padding: 80px 0;
  background: var(--cream);
  scroll-margin-top: 90px;
}
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: start;
}.about-visual { position: relative; }
.about-img {
  width: 100%;
  max-width: 420px;
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.about-visual::after {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 2px solid var(--fruit);
  border-radius: 20px;
  z-index: -1;
}
.about-copy p { color: var(--muted); }
.about-quote {
  margin: 24px 0;
  padding: 18px 22px;
  border-left: 4px solid var(--fruit);
  background: var(--paper);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.06rem;
}
.about-contact { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green-soft);
  color: var(--green-deep);
  font-weight: 600;
  border-radius: 999px;
  padding: 10px 18px;
  border: 1px solid rgba(46, 107, 71, 0.25);
}
.contact-chip:hover { background: var(--green); color: var(--white); }

/* Josh Talks talk embed (story section) */
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 560px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Click-to-load poster: the YouTube player only loads on tap (slow-network friendly) */
.video-poster {
  position: absolute;
  inset: 0;
  display: block;
}
.video-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-poster:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; border-radius: var(--radius); }
.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--mirchi);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease);
}
.video-poster:hover .video-play { transform: translate(-50%, -50%) scale(1.08); }
/* Josh credit chip (matches the Google 4.9 badge language) */
.video-credit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 18px 0 0;
  padding: 4px 12px 4px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.video-credit:hover { border-color: rgba(46, 125, 80, 0.5); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.video-credit:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.video-credit img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  padding: 2px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.video-credit span {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--fruit-deep);
  white-space: nowrap;
}
/* Intro video on the hero (reel card + arrow note) */
.hero-reel {
  position: relative;
  width: min(360px, 100%);
  margin: 0 auto;
  z-index: 2;
}
.hero-reel-note {
  position: absolute;
  right: -12px;
  top: -34px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  transform: rotate(-3deg);
  color: var(--fruit-deep);
  z-index: 3;
}
.hero-reel-label {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  background: var(--white);
  border: 2px solid var(--fruit-deep);
  border-radius: 999px;
  padding: 7px 14px;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.hero-reel-arrow { width: 96px; height: 52px; margin-top: 4px; }
.reel-card {
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 9 / 14;
  max-height: 460px;
}
.reel-card--hero { max-height: none; }
.reel-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease);
}
.reel-card:hover .reel-cover { transform: scale(1.04); }
.reel-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 19, 15, 0.05) 45%, rgba(16, 19, 15, 0.72));
}
.reel-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--mirchi);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
  70% { box-shadow: 0 0 0 18px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
.reel-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 14px 16px;
  color: var(--white);
  font-weight: 700;
  font-size: 0.95rem;
  text-align: left;
}

/* Featured result story above the success grid */
.featured-result {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  margin: 0 0 34px;
  max-width: 640px;
}
.featured-result-media { position: relative; }
.featured-result-media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.featured-result-copy { min-width: 0; }
.featured-result-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fruit-deep);
  margin: 0 0 8px;
}
.featured-result-quote {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 10px;
}
.featured-result-meta { margin: 0 0 4px; font-size: 0.92rem; color: #42514A; }
.featured-result-meta strong { color: var(--ink); }
.featured-result-meta span { display: block; }
.featured-result-note { margin: 0; font-size: 0.82rem; color: var(--muted); }

/* ---------- Google profile ---------- */
.gprofile {
  padding: 74px 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
  scroll-margin-top: 90px;
}
.gprofile-inner {
  display: flex;
  align-items: center;
  gap: 34px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 44px;
  box-shadow: var(--shadow-sm);
}
.gprofile-logo { flex: none; }
.gprofile-body .section-kicker { margin-bottom: 6px; }
.gprofile-title { font-size: 1.7rem; margin-bottom: 8px; }
.gprofile-addr { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.gprofile-rating { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 6px; }
.gprofile-stars { width: 118px; height: 20px; }
.gprofile-rating-big { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: 1; color: var(--ink); }
.gprofile-rating-num { font-family: var(--font-mono); font-weight: 700; font-size: 1.1rem; color: var(--fruit-deep); }
.gprofile-rating-count { color: #42514A; font-size: 0.95rem; }
.gprofile-note { color: #42514A; margin-bottom: 18px; }
.gprofile-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Testimonials (1-up carousel — 2026-08-13) ---------- */
.testimonials {
  padding: 88px 0;
  background: var(--paper-soft);
  border-top: 1px solid var(--line);
  scroll-margin-top: 90px;
}
.testimonials .section-kicker, .testimonials .section-title { text-align: center; }
.testi-carousel { max-width: 780px; margin: 44px auto 0; }
.testi-viewport { overflow: hidden; border-radius: 22px; }
.testi-track {
  display: flex;
  align-items: stretch;
  transition: transform 380ms var(--ease);
  will-change: transform;
  touch-action: pan-y; /* vertical page scroll stays native; horizontal drags drive the carousel */
  cursor: grab;
}
.testi-track.dragging { cursor: grabbing; }
.testi-slide { flex: 0 0 100%; min-width: 0; }
.testi-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 44px 52px 34px;
  box-shadow: 0 1px 2px rgba(20, 40, 31, 0.04), 0 14px 34px rgba(20, 40, 31, 0.07);
}
.testi-quote {
  display: block;
  font-family: var(--font-display);
  font-size: 4.6rem;
  line-height: 0.6;
  color: var(--fruit);
  margin-bottom: 10px;
  user-select: none;
}
.testi-stars {
  display: block;
  color: #A16207;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  font-size: 1rem;
}
.testi-card blockquote { margin: 0 0 24px; }
.testi-card blockquote p {
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.7;
  margin-bottom: 1em;
}
.testi-card figcaption {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.testi-avatar {
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 2px solid var(--green);
  object-fit: cover;
}
.testi-meta { display: flex; flex-direction: column; gap: 1px; }
.testi-name { font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.testi-role {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
}
.testi-google {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  text-decoration: none;
  flex: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.testi-google:hover { border-color: rgba(46, 125, 80, 0.5); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.testi-google:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.testi-google svg { display: block; }
.testi-google span {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--fruit-deep);
  font-variant-numeric: tabular-nums;
}

.testi-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 26px;
}
.testi-arrow {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.testi-arrow:hover:not(:disabled) { background: var(--green); border-color: var(--green); color: var(--white); transform: translateY(-1px); }
.testi-arrow:disabled { opacity: 0.38; cursor: default; }
.testi-arrow:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.testi-dots { display: flex; align-items: center; gap: 8px; }
.testi-dot {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.testi-dot::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 999px;
  border: 1px solid var(--green);
  background: transparent;
  transition: width var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.testi-dot.active::before { width: 26px; background: var(--green); border-color: var(--green); }
.testi-dot:hover::before { border-color: var(--green-deep); }
.testi-dot:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 999px; }

/* ---------- Trust strip ---------- */
.trust-strip {
  padding: 26px 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.trust-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--green-deep);
}
.trust-item svg { color: var(--green); }
.trust-item span { display: flex; flex-direction: column; }
.trust-item strong { font-size: 0.98rem; color: var(--ink); }
.trust-item small { font-size: 0.82rem; color: var(--muted); }

/* ---------- Problem ---------- */
.problem {
  padding: 96px 0;
  background: var(--paper);
}
.problem .section-kicker, .problem .section-title, .problem .section-intro { text-align: center; }
.problem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.problem-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.problem-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.problem-icon {
  display: inline-flex;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--green-soft);
  color: var(--green-deep);
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.problem-title { font-size: 1.2rem; margin-bottom: 8px; }
.problem-text { color: var(--muted); font-size: 0.98rem; margin: 0; line-height: 1.55; }

/* ---------- Indian diet (balanced plate) ---------- */
.diet {
  padding: 88px 0;
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.diet-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  grid-template-areas: "visual head" "visual body";
  gap: 0 72px;
  align-items: center;
}
.diet-visual { grid-area: visual; display: flex; flex-direction: column; align-items: center; }
.diet-head { grid-area: head; }
.diet-body { grid-area: body; }
.diet-plate {
  width: min(420px, 100%);
  height: auto;
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
}
.diet-head .section-kicker { text-align: left; }
.diet-title {
  font-size: clamp(2rem, 3.75vw, 3.4rem);
  line-height: 1.15;
  margin-bottom: 0.4em;
  color: var(--green-deep);
}
.diet-lead {
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 26px;
  max-width: 30rem;
}
.diet-points {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 28px;
}
.diet-points li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.diet-tick {
  flex: none;
  width: 24px; height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
}
.diet-row-text strong { display: block; font-size: 1.02rem; color: var(--ink); }
.diet-row-text > span { display: block; font-size: 0.95rem; color: var(--muted); line-height: 1.5; }
.diet-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.diet-link {
  font-weight: 600;
  color: var(--green-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 8px 2px;
}
.diet-link:hover { color: var(--fruit-deep); }
/* Lightweight annotation labels under the plate */
.plate-legend {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  margin: 18px 0 0;
}
.plate-legend li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.86rem;
  color: var(--muted);
  box-shadow: var(--shadow-sm);
}
.plate-frac { font-family: var(--font-mono); font-weight: 700; color: var(--green-deep); font-size: 0.9rem; }
/* Food line — subtle supporting brand element under the plate */
.food-line {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-deep);
  opacity: 0.75;
  text-align: center;
}

/* ---------- How it works ---------- */
.how {
  padding: 96px 0;
  background: var(--paper);
}
.how .section-kicker, .how .section-title { text-align: center; }
.how-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 52px;
  position: relative;
}
/* connecting line across the steps (desktop) */
.how-timeline::before {
  content: "";
  position: absolute;
  top: 56px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--green) 0 8px, transparent 8px 14px);
  opacity: 0.5;
  pointer-events: none;
}
.how-step {
  position: relative;
  padding: 26px 24px 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.how-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.how-icon {
  display: inline-flex;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green-deep);
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 2px var(--green);
}
.how-num {
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--fruit-deep);
  background: rgba(232, 92, 69, 0.1);
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 12px;
  letter-spacing: 0.08em;
}
.how-title { font-size: 1.18rem; margin-bottom: 10px; }
.how-text { color: #42514A; font-size: 0.97rem; margin: 0; line-height: 1.6; }
.how-cta { text-align: center; margin-top: 48px; }

/* ---------- Who this is for ---------- */
.for-you {
  padding: 96px 0;
  background: var(--cream);
  border-top: 1px solid var(--line);
}
.for-you .section-kicker, .for-you .section-title, .for-you .fy-intro { text-align: center; }
.fy-intro { color: var(--muted); font-size: 1.02rem; margin: -8px 0 0; }
.fy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 40px;
}
.fy-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.fy-card:hover { transform: translateY(-3px); border-color: rgba(33, 134, 83, 0.4); }
.fy-icon {
  display: inline-flex;
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--green-soft);
  color: var(--green-deep);
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.fy-card p {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
}
.fy-cta { text-align: center; margin-top: 40px; }

/* ---------- Dietitian / about ---------- */
.about-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
}
.about-role {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1E7A4A;
  margin-top: 4px;
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 26px 0;
}
.about-stats li {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
}
.about-stats strong {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--green-deep);
}
.about-stats span { font-size: 0.85rem; color: var(--muted); }
.about-actions { margin: 24px 0 20px; }
.about-actions-note { margin: 14px 0 0; font-size: 0.9rem; color: #42514A; max-width: 30rem; }

/* ---------- Story video ---------- */
.story {
  padding: 96px 0;
  background: var(--paper);
}
.story-inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items: center;
}
.story-text .section-kicker { text-align: left; }
.story-lead { color: var(--muted); font-size: 1.08rem; line-height: 1.6; margin: 0; max-width: 26rem; }
.story-video { position: relative; }
.video-watch {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: rgba(23, 35, 29, 0.72);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 999px;
  pointer-events: none;
}

/* ---------- Offer ---------- */
.offer {
  padding: 96px 0;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%);
  color: var(--white);
}
.offer-inner { text-align: center; }
.offer-kicker { color: rgba(255, 255, 255, 0.85); }
.offer-title {
  font-size: clamp(2.1rem, 3.8vw, 2.9rem);
  color: var(--white);
  margin-bottom: 14px;
}
.offer-lead { font-size: 1.15rem; color: rgba(255, 255, 255, 0.9); max-width: 34rem; margin: 0 auto 34px; }
.offer-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  max-width: 30rem;
  margin: 0 auto 40px;
}
.offer-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.08rem;
  color: var(--white);
  width: 100%;
  justify-content: center;
}
.offer-list li span {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
}
.offer-cta { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); }
.offer-note { margin: 16px auto 0; max-width: 34rem; font-size: 0.92rem; color: rgba(255, 255, 255, 0.92); }

/* ---------- FAQ (home) ---------- */
.faq-home {
  padding: 96px 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.faq-home .section-kicker, .faq-home .section-title { text-align: center; }
.faq-more { text-align: center; margin: 28px 0 0; font-weight: 600; }
.faq-more a { color: var(--green); display: inline-block; padding: 13px 8px; margin: -10px -4px; }

/* ---------- Final CTA ---------- */
.final-cta {
  padding: 100px 0;
  background: var(--cream);
  border-top: 1px solid var(--line);
}
.final-cta-inner { text-align: center; }
.final-cta-title {
  font-size: clamp(2.2rem, 4vw, 3.1rem);
  color: var(--ink);
  margin-bottom: 12px;
}
.final-cta-sub { font-size: 1.25rem; color: #42514A; margin: 0 0 34px; }
.final-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.final-cta-reassure { margin: 20px 0 0; font-size: 0.95rem; color: #42514A; }
.final-cta-notes { margin: 18px 0 0; text-align: center; font-size: 0.98rem; }
.final-cta-notes a { color: var(--green-deep); font-weight: 600; display: inline-block; padding: 13px 8px; margin: -10px -4px; }

/* ---------- Sticky mobile CTA (compact bottom bar: Start Plan + WhatsApp) ---------- */
.sticky-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(23, 35, 29, 0.12);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  align-items: stretch;
  justify-content: center;
  gap: 10px;
}
.sticky-cta-btn { flex: 1 1 auto; max-width: 340px; min-height: 48px; padding: 12px 20px; font-size: 0.98rem; }
.sticky-cta-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  min-height: 48px;
  border-radius: 999px;
  background: #0C7A46;
  color: var(--white);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sticky-cta-wa:hover { background: #0A6B3D; color: var(--white); transform: translateY(-1px); }
.sticky-cta-wa:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- My book ---------- */
.book {
  padding: 88px 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.book-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  align-items: center;
}
.book-cover img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 16px 44px rgba(20, 40, 31, 0.22);
}
.book-copy .section-kicker { text-align: left; }
.book-desc { font-size: 1.1rem; line-height: 1.65; color: var(--ink); margin: 0 0 26px; max-width: 480px; }
.book-btn { margin-top: 4px; }
.book-note { margin: 16px 0 0; font-size: 0.9rem; color: var(--muted); }

/* ---------- Success ---------- */
.success {
  padding: 80px 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
  scroll-margin-top: 90px;
}
.success .section-kicker, .success .section-title, .success .section-intro { text-align: center; }
.success-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.success-item {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.success-item:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.success-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.success-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 400ms var(--ease);
}
.success-item:hover img { transform: scale(1.05); }

/* ---------- Contact ---------- */
.contact {
  padding: 84px 0;
  scroll-margin-top: 90px;
  background:
    radial-gradient(800px 400px at 20% 0%, rgba(255, 255, 255, 0.14), transparent 55%),
    linear-gradient(135deg, var(--green), var(--green-deep));
  color: var(--white);
}
.contact-inner { text-align: center; }
.contact-title {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  color: var(--white);
  margin-bottom: 30px;
}
.contact-title a { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.contact-title a:hover { color: #FFE3C9; }
.contact-inner .hero-actions { justify-content: center; margin-bottom: 26px; }
/* On the green band the outline variant is invisible — render it as a white button with black text */
.contact .btn-outline {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}
.contact .btn-outline:hover {
  background: #F1F3F0;
  color: #000;
  border-color: #F1F3F0;
}
.faq-btn { margin-top: 6px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--green-deep);
  color: #D9E7DE;
  font-size: 0.95rem;
}
.site-footer .container {
  max-width: 1240px;
  padding-left: 40px;
  padding-right: 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr 1fr 1fr;
  gap: 48px;
  padding-top: 56px;
  padding-bottom: 48px;
}
.footer-brand-name {
  margin: 0 0 10px;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--white);
}
.footer-addr { margin: 0; color: #C8DDD2; font-size: 0.95rem; line-height: 1.6; }
.footer-group summary,
.footer-heading {
  list-style: none;
  margin: 0 0 14px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
}
.footer-group summary::-webkit-details-marker { display: none; }
.footer-group summary::marker { content: ""; }
.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-list a,
.footer-social a,
.footer-legal-links a {
  color: #C8DDD2;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.footer-list a:hover,
.footer-social a:hover,
.footer-legal-links a:hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  min-height: 40px;
}
.footer-social svg { flex: none; opacity: 0.9; }
.footer-legal { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.footer-legal-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 16px;
  padding-top: 18px;
  padding-bottom: 18px;
  font-size: 0.84rem;
}
.footer-copyline { margin: 0; color: #B9D0C4; }
.footer-legal-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.footer-legal-links li { display: inline-flex; align-items: center; }
.footer-legal-links li + li::before { content: "|"; margin: 0 12px; color: rgba(255, 255, 255, 0.3); }
.footer-legal-links a { display: inline-block; padding: 8px 2px; }
/* Desktop: keep the accordion groups expanded so the footer reads as a static nav */
@media (min-width: 821px) {
  .footer-group:not([open]) > :not(summary) { display: block; }
  .footer-group summary { cursor: default; }
  /* Below the container's max width the row fills the viewport, so reserve
     room for the fixed WhatsApp button on the bottom-right. */
  @media (max-width: 1240px) {
    .site-footer .footer-legal-inner { padding-right: 190px; }
  }
}

/* ---------- FAQ page ---------- */
.page-head {
  padding: 64px 0 30px;
  background: var(--paper);
  text-align: center;
}
.page-head .section-kicker { margin-bottom: 8px; }
.page-title { font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 10px; }
.page-intro { color: var(--muted); max-width: 40rem; margin: 0 auto; }

.faq {
  padding: 30px 0 80px;
  background: var(--paper);
  scroll-margin-top: 90px;
}
.faq-inner { max-width: 820px; }
.faq-item {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease);
}
.faq-item:hover { box-shadow: var(--shadow-md); }
.faq-item details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
}
.faq-item details > summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; border-radius: var(--radius-sm); }
.faq-num {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--white);
  background: var(--fruit-deep);
  border-radius: 6px;
  padding: 3px 8px;
  flex: none;
  font-variant-numeric: tabular-nums;
}
.faq-q {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.3;
  flex: 1;
}
.faq-ind {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--fruit);
  color: var(--fruit-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.faq-item details[open] .faq-ind { transform: rotate(45deg); background: var(--fruit); color: var(--white); }
.faq-a {
  padding: 0 20px 18px 56px;
  color: var(--muted);
}
.faq-a p { margin: 0; }

/* ---------- Legal pages ---------- */
.legal {
  padding: 30px 0 80px;
  background: var(--paper);
}
.legal-inner { max-width: 820px; }
.legal h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--ink);
  margin: 2.2em 0 0.5em;
}
.legal h2:first-child { margin-top: 0.4em; }
.legal p { color: var(--ink); margin-bottom: 1em; }
.legal ol, .legal ul { padding-left: 26px; margin: 0 0 1.2em; }
.legal ol { list-style: decimal; }
.legal ul { list-style: disc; }
.legal li { margin-bottom: 0.75em; color: var(--ink); }
.legal li strong, .legal p strong { color: var(--green-deep); }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal p a, .legal li a { display: inline-block; padding: 6px 2px; margin: -6px -2px; } /* larger hit area for inline links */

/* ---------- BMI calculator ---------- */
.bmi { padding: 30px 0 70px; background: var(--paper); }
.bmi-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 36px; align-items: start; }
.bmi-form, .bmi-result {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
}
.bmi-form-title { font-size: 1.4rem; margin-bottom: 24px; }
.bmi-field { margin-bottom: 28px; }
.bmi-field label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-weight: 700; margin-bottom: 6px; }
.bmi-val { font-family: var(--font-mono); font-size: 1.05rem; color: var(--fruit-deep); }
.bmi-field input[type="range"] { width: 100%; margin: 6px 0 12px; accent-color: var(--green); height: 26px; cursor: pointer; }
.bmi-field input[type="number"] {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  font-family: var(--font-body);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
}
.bmi-field input[type="number"]:focus-visible, .bmi-field input[type="range"]:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.bmi-units { display: inline-flex; gap: 6px; background: var(--paper-soft); border: 1px solid var(--line); border-radius: 999px; padding: 4px; margin-bottom: 24px; }
.bmi-unit-btn {
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bmi-unit-btn:hover { color: var(--green-deep); }
.bmi-unit-btn.is-active { background: var(--green); color: var(--white); }
.bmi-unit-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.bmi-ftin { display: flex; align-items: center; gap: 8px; }
.bmi-ftin input {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  font-size: 1rem;
  font-family: var(--font-body);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
}
.bmi-ftin input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.bmi-unit-suffix { font-family: var(--font-mono); font-size: 0.85rem; color: var(--muted); }
.bmi-alt { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); margin: 8px 0 0; }
.bmi-note { color: var(--muted); font-size: 0.92rem; margin: 0; }

.bmi-result-label { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.bmi-number { font-family: var(--font-display); font-size: 3.6rem; line-height: 1; font-weight: 400; margin: 8px 0 6px; font-variant-numeric: tabular-nums; }
.bmi-cat { display: inline-block; font-weight: 700; color: var(--white); background: var(--green); border-radius: 999px; padding: 6px 16px; font-size: 0.92rem; margin-bottom: 24px; }
.bmi-cat.under { background: #3B82C4; }
.bmi-cat.over { background: var(--fruit-deep); }
.bmi-cat.obese { background: var(--mirchi); }

.bmi-gauge { position: relative; display: flex; height: 22px; border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.bmi-seg-under { flex: 0 0 28.33%; background: #A8CBE9; }
.bmi-seg-normal { flex: 0 0 21.67%; background: #9CC9A8; }
.bmi-seg-over { flex: 0 0 16.67%; background: #E7C66B; }
.bmi-seg-obese { flex: 0 0 33.33%; background: #E29A8C; }
.bmi-marker {
  position: absolute;
  top: -7px;
  left: 50%;
  width: 15px;
  height: 15px;
  background: var(--gold);
  border: 2px solid var(--white);
  border-radius: 3px;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: var(--shadow-sm);
  z-index: 2;
}
.bmi-scale { position: relative; height: 18px; margin-top: 5px; }
.bmi-scale span { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }
.bmi-scale span:nth-child(1) { left: 28.33%; }
.bmi-scale span:nth-child(2) { left: 50%; }
.bmi-scale span:nth-child(3) { left: 66.67%; }
.bmi-scale span:nth-child(4) { left: 100%; }

.bmi-ideal-label { margin-top: 22px; }
.bmi-ideal { font-size: 1.02rem; margin: 4px 0 0; }
.bmi-ideal strong { color: var(--green-deep); }
.bmi-chart { position: relative; height: 18px; background: #EFE9D8; border: 1px solid var(--line); border-radius: 999px; margin: 14px 0 8px; }
.bmi-chart-band { position: absolute; top: 0; bottom: 0; background: var(--green); border-radius: 999px; opacity: 0.8; }
.bmi-chart-marker {
  position: absolute;
  top: -5px;
  width: 15px;
  height: 15px;
  background: var(--fruit);
  border: 2px solid var(--white);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: var(--shadow-sm);
  z-index: 2;
}
.bmi-chart-legend { display: flex; gap: 20px; flex-wrap: wrap; font-size: 0.8rem; color: var(--muted); }
.bmi-chart-legend span::before { content: ""; display: inline-block; width: 12px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.bmi-chart-legend .lg-band::before { background: var(--green); opacity: 0.8; }
.bmi-chart-legend .lg-marker::before { background: var(--fruit); border-radius: 50%; }

.bmi-next { margin-top: 26px; border-top: 2px dashed var(--line); padding-top: 22px; }
.bmi-next-title { font-weight: 700; margin-bottom: 6px; }
.bmi-next-text { color: var(--muted); margin-bottom: 16px; }
.bmi-next-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.bmi-cta { padding: 70px 0; background: linear-gradient(135deg, var(--green), var(--green-deep)); color: var(--white); text-align: center; }
.bmi-cta-inner { max-width: 760px; }
.bmi-cta h2 { color: var(--white); font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 0.5em; }
.bmi-cta p { color: rgba(255, 255, 255, 0.92); }
.bmi-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin: 26px 0 18px; }
.bmi-cta-mail a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 8px 4px; margin: -8px -4px; }

/* ---------- Floating WhatsApp button ---------- */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 300;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #0C7A46;
  color: var(--white);
  border-radius: 999px;
  padding: 14px 18px;
  box-shadow: 0 8px 24px rgba(12, 122, 70, 0.45);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.wa-float:hover {
  background: #0A6B3D;
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(12, 122, 70, 0.55);
}
.wa-float:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.wa-float-label {
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .wa-float { right: 14px; bottom: 14px; padding: 13px 15px; }
  .wa-float-label { display: none; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(18, 26, 22, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox.open { opacity: 1; }
.lightbox-img {
  max-width: min(90vw, 760px);
  max-height: 84vh;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.lightbox-close {
  position: absolute;
  top: 20px; right: 24px;
  background: none;
  border: 0;
  color: var(--white);
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
}
.lightbox-close:focus-visible { outline: 3px solid var(--gold); }

/* ---------- Consultation popup (exit intent / 3-min delay) ---------- */
.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(18, 26, 22, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.popup-overlay[hidden] { display: none; }
.popup-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 42px 36px 32px;
  box-shadow: 0 24px 60px rgba(18, 26, 22, 0.3);
  text-align: center;
  animation: popup-in 260ms var(--ease) both;
}
@keyframes popup-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.popup-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--paper-soft);
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.popup-close:hover { background: var(--line); color: var(--green-deep); }
.popup-close:focus-visible, .popup-cta:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.popup-kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fruit-deep);
  margin: 0 0 12px;
}
.popup-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 1.9rem);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 14px;
}
.popup-text { color: var(--muted); margin: 0 0 24px; }
.popup-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--mirchi);
  color: var(--white);
  font-weight: 700;
  font-size: 1rem;
  padding: 15px 22px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(198, 64, 43, 0.3);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.popup-cta:hover { background: var(--mirchi-deep); color: var(--white); transform: translateY(-2px); }
.popup-alt { margin: 18px 0 0; font-size: 0.9rem; color: var(--muted); }
.popup-alt a { color: var(--green-deep); font-weight: 600; }
@media (max-width: 640px) {
  .popup-card { padding: 36px 24px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .popup-card { animation: none; }
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.reveal.in-view { opacity: 1; transform: none; }

/* ---------- Indians abroad (for-abroad / life-abroad / world / help) ---------- */
.for-abroad { padding: 80px 0; background: var(--paper-soft); scroll-margin-top: 90px; }
.for-abroad-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 48px; align-items: start; }
.for-abroad-copy p { color: var(--muted); margin-bottom: 1em; }
.for-abroad-copy .for-abroad-lead { color: var(--ink); font-size: 1.15rem; max-width: 34rem; line-height: 1.55; }
.abroad-points { list-style: none; padding: 0; margin: 26px 0 30px; display: grid; gap: 14px; }
.abroad-point { display: flex; gap: 14px; align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.abroad-point-icon {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--green-soft);
  color: var(--green-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.abroad-point-text { display: flex; flex-direction: column; }
.abroad-point-text strong { color: var(--ink); font-size: 1rem; }
.abroad-point-text small { color: #42514A; font-size: 0.9rem; margin-top: 2px; line-height: 1.45; }
.for-abroad-note { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow-sm); }
.for-abroad-note-kicker { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fruit-deep); margin: 0 0 16px; }
.glance-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.glance-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 14px 12px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.3;
}
.glance-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--white);
  color: var(--green-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.glance-note { margin: 16px 0 0; font-size: 0.88rem; color: #42514A; }

.life-abroad { padding: 80px 0; }
.life-abroad .section-kicker, .life-abroad .section-title { text-align: center; }
.life-abroad-lead { text-align: center; max-width: 660px; margin: 0 auto 40px; color: #42514A; font-size: 1.05rem; }
.life-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.life-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.life-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(33, 134, 83, 0.35); }
.life-icon {
  display: inline-flex;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--green-soft);
  color: var(--green-deep);
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.life-card h3 { font-size: 1.1rem; margin: 0 0 8px; }
.life-card p { margin: 0; color: #42514A; font-size: 0.95rem; line-height: 1.55; }

.world { padding: 80px 0; background: var(--paper-soft); }
.world-inner { text-align: center; }
.world-lead { max-width: 700px; margin: 0 auto 28px; color: var(--muted); }
.world-list { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.world-list li { background: var(--white); border: 1px solid var(--line); border-radius: 999px; font-weight: 600; color: var(--ink); }
.world-list a { color: var(--green-deep); display: block; padding: 10px 18px; }
.world-list .world-more { padding: 10px 18px; color: var(--green-deep); }
.world-list a:hover { text-decoration: underline; }
.world-foot { color: var(--muted); font-size: 0.92rem; margin: 0; }

.help { padding: 80px 0; }
.help-inner { text-align: center; }
.help-list { list-style: none; padding: 0; margin: 0 auto 30px; max-width: 720px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 28px; text-align: left; }
.help-list li { padding-left: 26px; position: relative; font-weight: 500; color: var(--ink); }
.help-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.help-cta { margin: 0; }


/* ---------- SEO sub-pages ---------- */
.crumbs { max-width: 1180px; margin: 0 auto; padding: 18px 24px 0; font-size: 0.85rem; color: var(--muted); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.crumbs li + li::before { content: "→"; margin-right: 8px; color: var(--line); }
.crumbs a { color: var(--green-deep); display: inline-block; padding: 8px 6px; margin: -8px -6px; }
.sc { padding: 64px 0; }
.sc-alt { background: var(--paper-soft); }
.sc-inner { max-width: 880px; margin: 0 auto; }
.sc-inner .section-kicker { margin-bottom: 10px; }
.sc-inner h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.2; margin: 0 0 16px; }
.sc-inner p { color: var(--muted); line-height: 1.7; margin-bottom: 1em; }
.sc-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 14px; }
.sc-list li { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; color: var(--ink); }
.sc-list strong { color: var(--ink); }
.sc-steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 16px; }
.sc-steps li { counter-increment: s; position: relative; padding-left: 46px; color: var(--muted); line-height: 1.65; }
.sc-steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; color: var(--fruit-deep); }
.sc-steps strong { color: var(--ink); display: block; }
.sc-testi { display: grid; gap: 16px; }
.sc-testi blockquote { margin: 0; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--fruit); border-radius: var(--radius-sm); padding: 18px 20px; }
.sc-testi p { margin: 0 0 8px; color: var(--ink); }
.sc-testi footer { font-size: 0.9rem; color: var(--muted); }
.sc-note { margin-top: 14px; }
.sc-note a, .sc-about a, .sc-inner p a { color: var(--green-deep); font-weight: 600; display: inline-block; padding: 8px 4px; margin: -8px -4px; }
.contact-alt a { display: inline-block; padding: 8px 4px; margin: -8px -4px; }
.sc-faq .faq-item { margin-top: 12px; }
.sc-faq .faq-num { color: var(--fruit-deep); }
.contact-alt { margin-top: 16px; font-size: 0.95rem; }
.contact-alt a { color: var(--white); text-decoration: underline; }
@media (max-width: 640px) {
  .crumbs { padding: 14px 18px 0; }
  .sc { padding: 48px 0; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1150px) {
  /* slightly narrower reel on mid-desktop so it stays clear of the copy */
  .hero-visual, .hero-visual .hero-reel { width: 180px; }
  .hero-visual .facts { width: 200px; }
}

@media (min-width: 1401px) {
  /* large desktop: taller hero so both floating cards sit comfortably */
  .hero { min-height: 780px; }
  .hero-visual { right: 40px; }
  .facts { padding: 10px 14px 10px; }
  .facts-head { font-size: 0.95rem; border-bottom-width: 4px; padding-bottom: 2px; }
  .facts-serving { font-size: 0.72rem; }
  .facts-row { font-size: 0.75rem; padding: 3px 0; }
}

@media (max-width: 1400px) {
  /* mid-desktop: copy can breathe wider; facts hidden so the hero stays compact */
  .hero-copy { max-width: 620px; }
  .hero-visual, .hero-visual .hero-reel { width: 160px; }
  .facts { display: none; }
}

@media (max-width: 1024px) {
  .site-footer .container { padding-left: 32px; padding-right: 32px; }
  .for-abroad-grid { grid-template-columns: 1fr; gap: 32px; }
  .life-grid { grid-template-columns: repeat(2, 1fr); }
  .success-grid { grid-template-columns: repeat(2, 1fr); }
  .problem-grid, .how-timeline { grid-template-columns: repeat(2, 1fr); }
  .fy-grid { grid-template-columns: repeat(2, 1fr); }
  .diet-grid { gap: 0 40px; }
  .how-timeline::before { display: none; }
  .featured-result { grid-template-columns: 1fr; max-width: 480px; }
  .featured-result-media img { max-height: 240px; aspect-ratio: 4 / 3; }
  .story-inner { grid-template-columns: 1fr; gap: 40px; }
  /* tablet: slide the photo right so the woman clears the narrower copy */
  .hero { min-height: 660px; }
  .hero-background { background-position: 70% center; }
  .hero-copy { max-width: 480px; }
  .hero-visual, .hero-visual .hero-reel { width: 150px; }
  .dp-roundel { left: 14px; bottom: -18px; }
  .trust-strip-inner { justify-content: center; gap: 18px 28px; }
}

@media (max-width: 820px) {
  /* mobile + tablet-portrait: text-first — cream scrim on the left, woman visible through the right */
  .hero { display: block; min-height: 0; padding: 64px 0 56px; }
  .hero-background { background-position: 66% center; }
  .hero-background::after {
    background: linear-gradient(105deg, rgba(252, 250, 246, 0.95) 0%, rgba(252, 250, 246, 0.82) 36%, rgba(252, 250, 246, 0.5) 60%, rgba(252, 250, 246, 0) 84%);
  }
  .hero-copy { max-width: none; }
  /* Mobile order per brief: copy first (eyebrow → headline → body → CTAs → proof),
     then the compact video card, then the facts as a short 3-stat strip. */
  .hero-visual { position: static; top: auto; right: auto; bottom: auto; left: auto; width: auto; max-width: 480px; display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 30px auto 0; padding: 0 18px; }
  .hero-visual .hero-reel { position: relative; flex: none; width: min(210px, 60%); }
  .hero-reel { width: min(210px, 60%); }
  .hero-reel-note { right: 6px; top: -34px; left: auto; }
  .hero-reel-arrow { display: none; }
  /* Nutrition facts as a compact horizontal 3-stat strip below the video */
  .hero-visual .facts {
    position: static;
    width: 100%;
    max-width: 420px;
    flex: none;
    transform: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
  }
  .hero-visual .facts-head,
  .hero-visual .facts-serving,
  .hero-visual .facts-foot { display: none; }
  .hero-visual .facts-rows { display: flex; flex-direction: row; justify-content: space-between; width: 100%; border: 0; margin: 0; }
  .hero-visual .facts-row { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 0.72rem; padding: 2px 6px; border-left: 1px solid var(--line); }
  .hero-visual .facts-row:first-child { border-left: 0; padding-left: 0; }
  .hero-visual .facts-row dd { font-size: 0.95rem; }
  .reel-card { max-height: 380px; }
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: fixed;
    inset: 0 0 auto 0;
    top: 0;
    background: var(--paper);
    flex-direction: column;
    align-items: flex-start;
    padding: 100px 28px 34px;
    gap: 8px;
    transform: translateY(-105%);
    transition: transform 280ms var(--ease);
    box-shadow: var(--shadow-md);
  }
  .site-nav.open { transform: translateY(0); }
  .nav-list { flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; }
  .nav-list li { width: 100%; }
  .nav-link { display: block; padding: 10px 0; font-size: 1.15rem; }
  .nav-cta { margin-top: 16px; }
  .topbar-link { padding: 8px 4px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .container { padding: 0 18px; }
  .hero { padding: 56px 0 48px; }
  /* facts panel stacks below the video on phones instead of covering it */
  .facts { position: static; right: auto; bottom: auto; display: block; margin: 0; width: auto; flex: 1; min-width: 0; }
  .about-visual::after { right: 0; }
  .gprofile-inner { flex-direction: column; align-items: flex-start; padding: 28px 22px; }
  /* Phone: compact topbar — icon-only contact links, brand + icons on one row */
  .topbar { padding: 6px 0; }
  .topbar-inner { justify-content: center; gap: 10px; }
  .topbar-links { gap: 6px; }
  .topbar-link { font-size: 0; gap: 6px; padding: 13px; }
  .topbar-link svg { width: 18px; height: 18px; }
  .topbar-link[href^="mailto:"] { display: none; }
  .topbar-brand { font-size: 0.88rem; }
  .topbar-social { margin-left: 0; gap: 8px; }
  .topbar-social a { width: 32px; height: 32px; }
  .app-badges { margin-top: 18px; flex-wrap: wrap; }
  .hero { padding: 40px 0 44px; }
  .eyebrow { margin-bottom: 12px; }
  .hero-title { margin-bottom: 14px; }
  .hero-diff { margin: -6px 0 14px; font-size: 1rem; }
  .hero-sub { margin-bottom: 20px; font-size: 1.05rem; }
  /* tuck the "Know Sapna well" chip inside the video on phones */
  .hero-reel-note { right: 6px; top: 6px; left: auto; z-index: 3; max-width: calc(100% - 12px); }
  .hero-reel-label { font-size: 0.7rem; padding: 5px 10px; white-space: nowrap; }
  .hero-reel-arrow { display: none; }
  .reel-card { max-height: 340px; }
  .reel-play { width: 56px; height: 56px; }
  .reel-caption strong { font-size: 0.9rem; }
  .reel-caption small { display: none; }
  .hero-visual .facts { padding: 10px 12px; }
  .hero-visual .facts-row { font-size: 0.68rem; }
  .hero-visual .facts-row dd { font-size: 0.9rem; }
  /* tighten section rhythm on phones */
  .featured { padding: 36px 0 40px; }
  .about { padding: 56px 0; }
  .gprofile { padding: 52px 0; }
  .testimonials { padding: 60px 0; }
  .success { padding: 56px 0; }
  .problem, .diet, .how, .for-you, .story, .offer, .faq-home, .final-cta { padding: 64px 0; }
  .problem-grid, .how-timeline, .fy-grid { grid-template-columns: 1fr; }
  .life-grid { grid-template-columns: 1fr; }
  .glance-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-result { grid-template-columns: 1fr; max-width: 100%; padding: 16px; }
  .featured-result-media img { max-height: 220px; aspect-ratio: 4 / 3; }
  .testi-pull { font-size: 1.15rem; }
  .help-list { grid-template-columns: 1fr; text-align: left; }
  .about-grid { grid-template-columns: 1fr; gap: 34px; }
  .diet-grid { grid-template-columns: 1fr; grid-template-areas: "head" "visual" "body"; gap: 26px 0; }
  .diet-plate { width: min(320px, 88%); }
  .diet-actions { flex-direction: column; align-items: stretch; }
  .diet-actions .btn { width: 100%; }
  .book-grid { grid-template-columns: 1fr; gap: 34px; text-align: center; }
  .book-cover { width: min(240px, 70%); margin: 0 auto; }
  .book-desc { margin-left: auto; margin-right: auto; }
  .testi-card { padding: 30px 24px 26px; }
  .testi-quote { font-size: 3.6rem; }
  .testi-card blockquote p { font-size: 1rem; }
.testi-pull {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 14px;
}
  .testi-controls { gap: 16px; }
  .hero-actions .btn, .final-cta-actions .btn { width: 100%; }
  .bmi-grid { grid-template-columns: 1fr; }
  .press-list { gap: 22px; }
  .press-list img { max-height: 34px; }
  /* Sticky bottom CTA on phones — the floating WhatsApp is hidden so only
     the compact bottom bar (Start Plan + WhatsApp icon) handles mobile CTAs */
  .sticky-cta { display: flex; }
  body { padding-bottom: 82px; }
  .wa-float { display: none; }
  .hero-trust { justify-content: center; text-align: center; }
  .dp-roundel { width: 96px; height: 96px; }
  /* Footer on phones: brand → follow → accordion explore/where → legal */
  .site-footer .container { padding-left: 20px; padding-right: 20px; }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 40px;
    padding-bottom: 28px;
  }
  .footer-brand { order: 1; padding-bottom: 30px; }
  .footer-follow { order: 2; padding-bottom: 30px; }
  .footer-explore { order: 3; }
  .footer-where { order: 4; }
  .footer-group { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
  .footer-group summary,
  .footer-heading { margin-bottom: 0; }
  .footer-follow .footer-heading { padding: 16px 0; }
  .footer-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    cursor: pointer;
  }
  .footer-group summary::after {
    content: "+";
    font-size: 1.15rem;
    font-weight: 600;
    color: #C8DDD2;
  }
  .footer-group[open] summary::after { content: "–"; }
  .footer-list { gap: 12px; padding: 4px 0 20px; }
  .footer-social a { padding: 12px 2px; min-height: 44px; }
  .footer-legal-inner { justify-content: center; text-align: center; padding: 20px 0; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .success-item img { transform: none !important; }
  .hero-copy > *, .hero-visual { opacity: 1; animation: none; }
  .dp-roundel, .reel-play { animation: none; }
  .hero-reel-note { transform: none; }
}