/* ==========================================================================
   bimi — landing page styles
   Built to the bimi Brand Design System v1.1
   Layout structure mirrors a Snabbit-style home-cook page: image-led, text-light,
   2-col hero + dark trust strip + caption tiles + area chips + reviews + FAQ + SEO.
   Order: tokens → base → utilities → components → sections → responsive
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Canonical palette (6 + 2 neutrals) */
  --lemon:  #F9E24C;   /* Bimi Lemon  — recognition, hero fields, bands */
  --leaf:   #4A842C;   /* Bimi Leaf   — motif, food/icon accents, veg badge */
  --ink:    #111111;   /* Bimi Ink    — headings, body, prices */
  --cream:  #FFF9EA;   /* Warm Cream  — page surface */
  --forest: #244C2C;   /* Deep Leaf   — primary buttons, links, dark panels */
  --tomato: #BE472B;   /* Roasted Tomato — ≤5% accents, errors, non-veg badge */
  --line:   #DCD8C9;   /* Soft Border — dividers, disabled */
  --white:  #FFFFFF;   /* optional cards */

  /* Derived tints (kept subtle, brand-consistent) */
  --cream-2:  #FBF3DC;   /* slightly deeper cream for alternating bands */
  --forest-2: #1B3A21;   /* deep panel shade for gradients */
  --ink-70:   #3b3b39;   /* muted body on cream */

  /* Type */
  --font: 'Instrument Sans', Arial, Helvetica, sans-serif;

  /* Spacing scale: 8 / 16 / 24 / 32 / 48 */
  --s1: 8px;  --s2: 16px;  --s3: 24px;  --s4: 32px;  --s5: 48px;
  --s6: 72px; --s7: 96px;

  /* Shape */
  --radius: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  /* Layout */
  --container: 1360px;
  --measure: 68ch;

  /* Elevation (soft, warm) */
  --shadow-sm: 0 1px 2px rgba(17,17,17,.06), 0 2px 8px rgba(17,17,17,.05);
  --shadow-md: 0 6px 22px rgba(17,17,17,.10);
  --shadow-lg: 0 18px 48px rgba(17,17,17,.16);

  --header-h: 68px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Guard against any wide element (watermark, marquee) forcing horizontal
     scroll as the viewport is resized. `clip` keeps position: sticky working. */
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  /* Long unbroken strings (emails, URLs) can't push the layout wider than the screen. */
  overflow-wrap: break-word;
  /* Extend the lemon header colour into the notch/status-bar area. */
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4 { margin: 0 0 .4em; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--leaf); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

ul { margin: 0; padding: 0; }
li { list-style: none; }

button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Utilities ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}
.container-narrow { max-width: 820px; }

.section { padding-block: clamp(48px, 7vw, 96px); }
.section[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

.section-head { max-width: 62ch; margin: 0 auto var(--s5); text-align: center; }
.section-head .section-lead { margin-inline: auto; margin-bottom: 0; }

.section-title {
  font-size: clamp(32px, 5.4vw, 56px);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin-bottom: var(--s2);
}
.section-title .accent { color: var(--leaf); }
.section-lead {
  font-size: clamp(16px, 2vw, 18px);
  color: var(--ink-70);
  max-width: 62ch;
  margin-bottom: var(--s4);
}
.eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--leaf);
  margin-bottom: var(--s2);
}
.fineprint {
  font-size: 14px;
  color: var(--ink-70);
}
.center { text-align: center; }

.pricing { background: var(--cream-2); }
.price-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: var(--s3);
}
.price-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s2);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.price-list strong { white-space: nowrap; }
.pricing .fineprint { margin-bottom: var(--s3); }
@media (max-width: 560px) { .price-list { grid-template-columns: 1fr; } }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 200;
  background: var(--leaf);
  color: var(--cream);
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; text-decoration: none; }

/* Icons */
.ic {
  width: 24px; height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.ic.star { fill: currentColor; stroke: none; width: 18px; height: 18px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--leaf); color: var(--cream); border-color: var(--leaf); }
.btn-primary:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }

.btn-secondary { background: transparent; color: var(--leaf); border-color: var(--leaf); }
.btn-secondary:hover { background: var(--leaf); color: var(--cream); }

.btn-lemon { background: var(--lemon); color: var(--ink); border-color: var(--lemon); }
.btn-lemon:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.btn-block { display: flex; width: 100%; }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: 14px; }

.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--line);
  color: var(--leaf);
  border-color: var(--line);
  cursor: not-allowed;
  opacity: .9;
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--lemon);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.nav {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #000;
}
.brand:hover { text-decoration: none; }
.brand-i { position: relative; display: inline-block; }
.brand-dot {
  position: absolute;
  left: 50%;
  top: -0.02em;
  transform: translate(-50%, 0);
  width: 0.19em;
  height: 0.19em;
  border-radius: 50%;
  background: var(--leaf);
  transition: transform 160ms cubic-bezier(0.34, 1.7, 0.5, 1);
  will-change: transform;
}
.brand:hover .brand-dot,
.brand:focus-visible .brand-dot { transform: translate(-50%, -2px); }
.brand:hover .brand-i:last-of-type .brand-dot,
.brand:focus-visible .brand-i:last-of-type .brand-dot { transition-delay: 45ms; }
@media (prefers-reduced-motion: reduce) {
  .brand-dot { transition: none; }
  .brand:hover .brand-dot,
  .brand:focus-visible .brand-dot { transform: translate(-50%, 0); }
}

.nav-links {
  display: flex;
  gap: clamp(12px, 1.6vw, 26px);
  margin-left: clamp(24px, 4vw, 64px);
  margin-right: auto;
}
.nav-links a {
  color: var(--ink);
  font-weight: 500;
  font-size: 15px;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--leaf); text-decoration: none; border-bottom-color: var(--leaf); }
/* Chevron affordance + in-menu CTA are mobile-only; hidden in the desktop row. */
.nav-chevron { display: none; }

.nav-scrim { display: none; }

.nav-actions { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
.nav-cta { min-height: 42px; padding-block: 8px; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 12px;
}

/* ---------- Motif (two dots + arc) ---------- */
.motif-dots, .motif-arc { pointer-events: none; }
.motif-dots {
  position: absolute;
  top: 26px; right: clamp(16px, 6vw, 90px);
  width: 120px; height: 46px;
  display: none;
}
.motif-dots::before, .motif-dots::after {
  content: ""; position: absolute; top: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--leaf);
}
.motif-dots::before { left: 26px; }
.motif-dots::after { left: 72px; }
@media (min-width: 720px) { .motif-dots { display: block; } }

/* ---------- Media / image placeholder ---------- */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(17,17,17,.02) 14px 28px),
    var(--cream-2);
  border: 1px solid var(--line);
}
.media > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s ease;
}
.media.is-loaded > img { opacity: 1; }
.media.is-loaded { border-color: transparent; }
/* Neutral loading shimmer shown until the real image loads.
   Never renders the filename (data-ph) — that was a dev-only affordance. */
.media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
  background-size: 200% 100%;
  animation: media-shimmer 1.4s ease-in-out infinite;
}
.media.is-loaded::after { display: none; }
@keyframes media-shimmer {
  0%   { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .media::after { animation: none; }
}

.media--4x3 { aspect-ratio: 4 / 3; }
.media--4x5 { aspect-ratio: 4 / 5; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--3x4 { aspect-ratio: 3 / 4; }
.media--1x1 { aspect-ratio: 1 / 1; }
.media--16x9 { aspect-ratio: 16 / 9; }

/* ---------- Hero (copy left, photo collage right) ---------- */
.hero {
  position: relative;
  background: var(--lemon);
  padding-block: clamp(32px, 5vw, 72px);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.hero-copy { max-width: 44ch; }

/* Launch countdown badge — dark pill on the Lemon hero so it reads first */
.launch-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--forest);
  color: var(--cream);
  border-radius: var(--radius-pill);
  padding: 7px 16px;
  margin-bottom: var(--s3);
  font-size: 14px; font-weight: 600;
  letter-spacing: .01em;
  box-shadow: var(--shadow-sm);
}
.launch-badge .launch-dot {
  width: 8px; height: 8px; flex: none;
  border-radius: 50%;
  background: var(--lemon);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--lemon) 70%, transparent);
  animation: launch-pulse 2s ease-out infinite;
}
.launch-badge .launch-count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--lemon);
}
/* live state after launch passes */
.launch-badge.is-live { background: var(--leaf); }
.launch-badge.is-live .launch-dot { animation: none; background: var(--cream); }

@keyframes launch-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lemon) 70%, transparent); }
  70%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--lemon) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lemon) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .launch-badge .launch-dot { animation: none; }
}

.crumbs { font-size: 14px; font-weight: 500; color: var(--leaf); margin-bottom: var(--s2); }
.crumbs a { color: var(--leaf); }
.crumbs span { color: var(--ink-70); margin-inline: 4px; }
.hero h1 {
  font-size: clamp(42px, 7.2vw, 76px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: var(--s3);
}
.hero h1 .hl { display: block; color: var(--leaf); }
.hero .lead {
  font-size: clamp(16px, 2.1vw, 19px);
  color: var(--ink);
  margin-bottom: var(--s4);
  max-width: 46ch;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
/* Slightly larger primary CTA in the hero for extra emphasis */
.hero-cta .btn { min-height: 56px; padding: 15px 32px; font-size: 18px; }

/* Hero diet pills — quick "what you get" tags between the lead and CTA */
.hero-pills {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin: 0 0 var(--s4); padding: 0;
}
.hero-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--white);
  border: 1px solid rgba(17,17,17,.08);
  border-radius: var(--radius-pill);
  padding: 7px 15px 7px 12px;
  font-size: 14px; font-weight: 600; color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.hero-pill .ic { width: 15px; height: 15px; color: var(--leaf); }

/* Trust pill (avatars + rating), mirrors the Snabbit hero badge */
.trust-pill {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--cream);
  border: 1px solid rgba(17,17,17,.08);
  border-radius: var(--radius-pill);
  padding: 6px 18px 6px 8px;
  box-shadow: var(--shadow-sm);
}
.avatar-cluster { display: inline-flex; }
.avatar-cluster .avatar {
  width: 34px; height: 34px; font-size: 13px;
  border: 2px solid var(--cream);
  margin-left: -12px;
}
.avatar-cluster .avatar:first-child { margin-left: 0; }
.trust-pill-text { display: flex; flex-direction: column; line-height: 1.2; }
.trust-pill-text .trust-eyebrow { font-size: 13px; color: var(--ink-70); font-weight: 500; }
.trust-pill-text strong { font-size: 15px; font-weight: 700; color: var(--ink); }

/* Snabbit-style dot separator between the "Trusted by" block and the stars */
.trust-pill-sep {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--line); flex-shrink: 0;
}

.rating { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.rating .star { color: var(--ink); }   /* star on Lemon/Cream renders in Ink */
.rating--stars { gap: 2px; }
.rating--stars .star { color: var(--tomato); }   /* filled rating stars, Snabbit-style pop */
.rating--stars .rating-label { margin-left: 8px; font-size: 15px; font-weight: 600; color: var(--ink); }

.hero-media { position: relative; }

/* ---------- Hero marquee (Snabbit-style vertical image strips) ----------
   Two columns loop endlessly in opposite directions. The tiles are duplicated
   in JS so each track can translate -50% and wrap seamlessly. Hovering or
   focusing one column pauses it; the other keeps rolling. */
.hero-marquee {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2);
  height: clamp(440px, 48vw, 600px);
  overflow: hidden;
  /* fade the top and bottom edges so tiles glide in and out of view */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.marquee-col { overflow: hidden; }
.marquee-track {
  display: block;
  animation: marquee-up 34s linear infinite;
  will-change: transform;
}
.marquee-col--down .marquee-track { animation-name: marquee-down; }
.marquee-track .media {
  /* Taller, slimmer tiles than the base 4:5 — a more portrait 2:3 (20% taller).
     object-fit:cover fits each 4:5 photo naturally: it trims a little off the
     left/right and keeps the full height, no stretching. */
  aspect-ratio: 2 / 3;
  margin-bottom: var(--s2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
/* pause only the hovered/focused column — the other strip keeps rolling */
.marquee-col:hover .marquee-track,
.marquee-col:focus-within .marquee-track { animation-play-state: paused; }

/* ---------- Per-tile focal framing (hero marquee) ----------
   Each shot is a 4:5 file; the taller 2:3 tile fits it with object-fit:cover, which
   trims a little off the left/right and keeps the full height — a naturally slimmer,
   more portrait crop with no distortion and no artificial zoom. object-position nudges
   each image toward its hero moment (the pour, the wash, the roti, the bowl) so nothing
   important falls under the side-crop, and the horizontal anchors gently alternate for
   a little editorial asymmetry down the two strips (vertical stays centred since cover
   shows the full height here). Keyed by filename so the JS-built clones (same src)
   inherit the same framing. */
/* Left strip (scrolls up) */
.marquee-track .media > img[src$="home-cook-cooking-in-kitchen.webp"] { object-position: 72% 50%; } /* tadka pour — right */
.marquee-track .media > img[src$="dish-paneer-butter-masala.webp"]    { object-position: 45% 50%; } /* ladle into bowl — left beat */
.marquee-track .media > img[src$="cook-cooking-underway.webp"]        { object-position: 52% 50%; } /* dicing board — centred */
.marquee-track .media > img[src$="hygiene-washing-vegetables.webp"]   { object-position: 85% 50%; } /* colander wash — holds tap + right rim */
.marquee-track .media > img[src$="hygiene-handwash.webp"]             { object-position: 66% 50%; } /* soapy hands under tap — right */
/* Right strip (scrolls down) */
.marquee-track .media > img[src$="verified-home-cook-portrait.webp"]  { object-position: 48% 50%; } /* spoon + garnish bowl — left beat */
.marquee-track .media > img[src$="use-case-craving-home-food.webp"]   { object-position: 72% 50%; } /* roti on tawa — right */
.marquee-track .media > img[src$="use-case-people-over.webp"]         { object-position: 58% 50%; } /* dal onto the table — mild right */
.marquee-track .media > img[src$="prep-kneading-dough.webp"]          { object-position: 44% 50%; } /* kneading dough — left beat */

@keyframes marquee-up {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
@keyframes marquee-down {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .hero-marquee {
    height: auto; overflow: visible;
    -webkit-mask-image: none; mask-image: none;
  }
}

/* ---------- Trust strip (dark band, 3 items) ---------- */
.trust-strip { background: var(--forest); color: var(--cream); }
.trust-strip .container {
  max-width: 1600px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  padding-block: var(--s3);
}
.ts-item { display: flex; align-items: center; justify-content: center; gap: 14px; }
.ts-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none;
  border-radius: 12px;
  background: var(--lemon);
  color: var(--leaf);
}
.ts-ic .ic { width: 24px; height: 24px; }
.ts-item span:last-child { font-weight: 600; font-size: 15px; }

/* ---------- Caption tiles (One Cook / Cooked with care) ---------- */
.meal { background: var(--white); padding-bottom: var(--s6); }
.care { background: var(--white); padding-top: clamp(32px, 4vw, 56px); }
.overlay-grid {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: var(--s3);
  align-items: stretch;
}
.overlay-tile {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
/* First tile: large, spans the full height of the two stacked tiles on the right */
.overlay-tile:first-child { grid-row: span 2; }
.overlay-tile .media { border: 0; border-radius: var(--radius); }
/* Large left tile fills its spanned height */
.overlay-tile:first-child .media { height: 100%; aspect-ratio: auto; }
/* Right-hand tiles are landscape */
.overlay-tile:not(:first-child) .media { aspect-ratio: 16 / 10; }
.overlay-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 4;
  padding: var(--s4) var(--s3) var(--s3);
  color: var(--white);
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 600;
  letter-spacing: -.01em;
  background: linear-gradient(to top, rgba(17,17,17,.74), rgba(17,17,17,.28) 55%, rgba(17,17,17,0));
  pointer-events: none;
}

/* Keep the meal heading on one line, but only once the viewport is wide enough
   to actually fit it — below this it wraps (balanced) instead of overflowing. */
@media (min-width: 1120px) {
  #meal-title { white-space: nowrap; }
}

/* ---------- How-it-works tile hover animations (meal section) ---------- */
.meal .overlay-tile {
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
  will-change: transform;
}
.meal .overlay-tile img {
  transition: transform .55s cubic-bezier(.2,.7,.3,1);
}
.meal .overlay-tile:hover { box-shadow: var(--shadow-lg); }
.meal .overlay-tile:hover img { transform: scale(1.07); }
/* Each tile reacts a little differently on hover */
.meal .overlay-tile:nth-child(1):hover { transform: scale(1.02); }
.meal .overlay-tile:nth-child(2):hover { transform: rotate(1.6deg) translateY(-5px); }
.meal .overlay-tile:nth-child(3):hover { transform: rotate(-1.6deg) translateY(-5px); }

@media (prefers-reduced-motion: reduce) {
  .meal .overlay-tile,
  .meal .overlay-tile img { transition: none; }
  .meal .overlay-tile:hover,
  .meal .overlay-tile:hover img { transform: none; }
}

/* ---------- Care cards (Cooked with Care — caption top, image below) ---------- */
/* Bento mosaic — the oil-mister card is the tall left spotlight */
.care-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(200px, 300px));
  grid-template-areas:
    "spot top-a top-b"
    "spot bot   bot";
  gap: 8px;
}
.care-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--white);
  border: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
/* Placement follows DOM order: handwash, veggieswash, oil (spotlight), stove */
.care-card:nth-child(1) { grid-area: top-a; }
.care-card:nth-child(2) { grid-area: top-b; }
.care-card:nth-child(3) { grid-area: spot; }
.care-card:nth-child(4) { grid-area: bot; }
.care-card-media {
  position: relative;
  flex: 1;
  min-height: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}
/* Curved (dome-shaped) tint behind the caption for readability */
.care-card .overlay-cap {
  padding-top: 90px;
  text-align: center;
  background: radial-gradient(70% 95% at 50% 118%,
    rgba(17,17,17,.9) 0%,
    rgba(17,17,17,.74) 42%,
    rgba(17,17,17,.32) 66%,
    rgba(17,17,17,0) 80%);
}

/* Care card hover animations — each card reacts a little differently */
.care-card {
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
  will-change: transform;
}
.care-card img {
  transition: transform .55s cubic-bezier(.2,.7,.3,1);
}
/* Seamless block: only the image zooms on hover (tile stays put so no gaps open) */
.care-card:hover img { transform: scale(1.07); }

@media (prefers-reduced-motion: reduce) {
  .care-card,
  .care-card img { transition: none; }
  .care-card:hover,
  .care-card:hover img { transform: none; }
}

/* Touch devices: a tap shouldn't leave a tile stuck in its hover transform. */
@media (hover: none) {
  .care-card:hover img,
  .meal .overlay-tile:hover,
  .meal .overlay-tile:hover img { transform: none; }
}

/* ==========================================================================
   How it works — 4 branded step cards, each with an in-app UI preview
   The menu / portion / schedule previews are built purely in CSS+SVG (no image
   files). All internal UI text is decorative (parent .mock is aria-hidden); a
   .visually-hidden sentence in each card carries the real meaning.
   ========================================================================== */
.how {
  position: relative;
  /* Pale lemon wash, deeper than the cream page — the cards sit a touch lighter */
  background: color-mix(in srgb, var(--lemon) 20%, var(--cream));
  padding-bottom: 0;   /* the forest base band closes the section instead */
  /* One frame size shared by all four previews so the phones (cards 1-3) and
     the cook photo (card 4) match in width and height. */
  --frame-w: min(224px, 96%);
  --frame-h: clamp(432px, 32vw, 480px);
}

.how-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
  align-items: stretch;
  margin: 0 0 clamp(36px, 6vw, 72px);
  padding: 0;
}

.how-card {
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--lemon) 26%, var(--white));
  border: 2px solid color-mix(in srgb, var(--lemon) 60%, var(--white));
  border-radius: 26px;
  padding: clamp(16px, 1.5vw, 22px);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.how-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.how-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s3); }
.how-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  background: var(--lemon);
  color: var(--forest);
  font-weight: 700; font-size: 18px;
}
.how-card-title {
  margin: 0;
  font-size: clamp(19px, 1.4vw, 23px);
  font-weight: 700;
  color: var(--forest);
  letter-spacing: -.01em;
}

/* Shared preview viewport — clips previews that intentionally bleed/overflow.
   The floor (400px) is tall enough to show the whole Select-Portion card at
   every width; the phone screen is sized a touch taller so it always bleeds. */
.how-preview {
  position: relative;
  flex: 1 1 auto;
  min-height: clamp(400px, 27vw, 420px);
  overflow: hidden;
}

/* ----- 1 · Browse Dishes — phone mockup ----- */
.mock--phone { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; }
.phone {
  position: relative;
  width: var(--frame-w);
  padding: 9px 9px 0;
  background: #101010;
  border-radius: 34px 34px 22px 22px;
  box-shadow: 0 14px 34px rgba(17,17,17,.22);
}
.phone-notch {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  z-index: 3;
  width: 80px; height: 17px;
  background: #101010; border-radius: 0 0 12px 12px;
}
.phone-screen {
  /* Neomorphism tokens — a bright white surface; the soft grey shadow
     carries the depth (the white highlight is imperceptible on white,
     which is expected for white-on-white neomorphism). */
  --neo-surface: #ffffff;
  --neo-dark: #e4e0d3;
  --neo-light: #ffffff;
  --neo-raise-sm: -2px -2px 4px var(--neo-light), 2px 2px 4px var(--neo-dark);
  --neo-raise: -3px -3px 6px var(--neo-light), 3px 3px 6px var(--neo-dark);
  --neo-inset: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 3px var(--neo-light);
  --neo-inset-sm: inset 1.5px 1.5px 3px var(--neo-dark), inset -1.5px -1.5px 2px var(--neo-light);
  position: relative;
  display: flex; flex-direction: column;
  height: var(--frame-h);   /* always a touch taller than the preview → bleeds off the bottom */
  background: var(--neo-surface);
  border-radius: 26px 26px 14px 14px;
  overflow: hidden;
}
.ps-status { display: flex; justify-content: space-between; align-items: center; padding: 5px 12px 2px; font-size: 9px; font-weight: 700; color: var(--ink); }
.ps-status-ic { width: 22px; height: 9px; border: 1.4px solid var(--ink); border-radius: 3px; position: relative; }
.ps-status-ic::after { content: ""; position: absolute; inset: 1.5px; right: 40%; background: var(--ink); border-radius: 1px; }
/* 1fr · auto · 1fr keeps the title optically centred in the app view no
   matter the width of the leading back button or trailing kebab. */
.ps-appbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 8px 14px 9px; background: var(--neo-surface); box-shadow: 0 3px 7px color-mix(in srgb, var(--neo-dark) 65%, transparent); position: relative; z-index: 2; }
.ps-ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--ink); flex: none; }
/* Leading back control — a soft raised neomorphic circle. */
.ps-appbar > .ps-ic { box-sizing: border-box; justify-self: start; width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: var(--neo-surface); box-shadow: var(--neo-raise-sm); }
.ps-title { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.15; margin: 0; }
.ps-title strong { font-size: 12px; font-weight: 700; color: var(--ink); }
.ps-title small { font-size: 8.5px; color: var(--ink-70); }
/* Trailing kebab — matching raised circle, dots drawn via box-shadow. */
.ps-kebab { position: relative; justify-self: end; width: 24px; height: 24px; border-radius: 50%; background: var(--neo-surface); box-shadow: var(--neo-raise-sm); margin: 0; }
.ps-kebab::before { content: ""; position: absolute; left: 50%; top: 50%; width: 2.6px; height: 2.6px; border-radius: 50%; background: var(--ink); transform: translate(-50%, -50%); box-shadow: 0 -5px 0 var(--ink), 0 5px 0 var(--ink); }
.ps-kebab::after { display: none; }
.ps-body { flex: 1; display: grid; grid-template-columns: 48px 1fr; min-height: 0; }
.ps-rail { display: flex; flex-direction: column; gap: 7px; padding: 9px 3px; background: color-mix(in srgb, var(--lemon) 9%, var(--white)); border-right: 1px solid color-mix(in srgb, var(--ink) 6%, var(--white)); }
.ps-cat { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 7.5px; font-weight: 600; color: var(--ink-70); text-align: center; }
.ps-cat i { width: 24px; height: 24px; border-radius: 8px; background: color-mix(in srgb, var(--lemon) 28%, var(--white)); display: grid; place-items: center; color: var(--leaf); }
.ps-cat i svg { width: 15px; height: 15px; display: block; }
.ps-cat.is-active { color: var(--forest); }
.ps-cat.is-active i { background: var(--lemon); box-shadow: inset 0 0 0 1.5px var(--leaf); color: var(--forest); }
.ps-main { padding: 9px 10px; display: flex; flex-direction: column; gap: 7px; min-height: 0; }
.ps-h { font-size: 12px; font-weight: 700; color: var(--ink); }
.ps-tabs { display: inline-flex; gap: 6px; }
.ps-tabs span { font-size: 9px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-70); }
.ps-tabs .is-active { background: var(--lemon); border-color: var(--leaf); color: var(--forest); }
.ps-sub { font-size: 9px; font-weight: 600; color: var(--ink-70); }
.ps-dishes { display: flex; flex-direction: column; gap: 9px; }
.ps-dish { display: flex; align-items: center; gap: 8px; }
.ps-thumb { width: 40px; height: 40px; border-radius: 10px; flex: none; overflow: hidden; }
.ps-thumb svg { width: 100%; height: 100%; display: block; }
.ps-dish-meta { display: flex; flex-direction: column; margin-right: auto; line-height: 1.2; }
.ps-dish-meta strong { font-size: 10px; font-weight: 700; color: var(--ink); }
.ps-dish-meta small { font-size: 8.5px; color: var(--ink-70); }
.ps-add { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; color: var(--forest); border: 1.5px solid var(--leaf); border-radius: 999px; padding: 4px 10px; }
.ps-add.is-added { background: var(--leaf); color: var(--cream); border-color: var(--leaf); }
.ps-add.is-added .ps-ic { width: 10px; height: 10px; color: var(--cream); }

/* ----- Shared app-screen body for the dish + schedule phones -----
   Cards 2 and 3 now sit inside the same .phone frame as card 1; .ps-screen
   holds their existing portion and schedule content inside the phone
   screen, and the soft bottom mask hints the screen scrolls on into the band. */
.ps-screen {
  flex: 1; min-height: 0;
  overflow: hidden;
  padding: 12px 15px;   /* generous side inset so content sits clear of the phone frame, like card 1 */
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 99%);
          mask-image: linear-gradient(to bottom, #000 82%, transparent 99%);
}

/* ----- 2 · Select portion — dish detail -----
   Name + price share the top row; the description spans the full width on
   its own row so its line-wrapping never depends on the price width — the
   card height stays stable as the price changes with the people count. */
.pcard-top { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 4px; align-items: baseline; }
.pcard-head { display: contents; }
.pcard-name { grid-column: 1; grid-row: 1; font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.pcard-price { grid-column: 2; grid-row: 1; font-size: 13px; font-weight: 700; color: var(--ink); }
.pcard-desc { grid-column: 1 / -1; grid-row: 2; font-size: 9.5px; color: var(--ink-70); line-height: 1.35; }
.pcard-meta { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pc-ic { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--leaf); flex: none; }
.pcard-row { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; color: var(--leaf); }
.pcard-drop { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 10px; font-weight: 700; color: var(--ink); }
.pcard-drop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pcard-drop-head > span { display: inline-flex; align-items: center; gap: 6px; }
.pcard-drop em { font-style: normal; font-weight: 600; color: var(--ink-70); }
.pcard-drop .pc-ic--chev { color: var(--ink-70); transition: transform .28s ease; }
.pcard-drop.is-open .pc-ic--chev { transform: rotate(180deg); }
.pcard-people {
  position: relative; z-index: 2;
  margin-top: 12px;
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--ink) 9%, var(--white));
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 11px;
}
.pcard-people-title { display: block; font-size: 10.5px; font-weight: 700; color: var(--ink); margin-bottom: 9px; }
.pcard-chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.pcard-chips span { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 10px; font-size: 11px; font-weight: 700; color: var(--ink); }
.pcard-chips .is-sel { background: var(--lemon); border-color: var(--leaf); color: var(--forest); box-shadow: inset 0 0 0 1px var(--leaf); }
.pcard-addons { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.pcard-addons-h { font-size: 10.5px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.pcard-addons-h em { font-style: normal; font-weight: 500; font-size: 9px; color: var(--ink-70); margin-left: 6px; }
.addon { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 9px; font-size: 10.5px; font-weight: 600; color: var(--ink); }
.addon em { font-style: normal; font-weight: 700; color: var(--ink-70); margin-left: auto; }
.addon.is-on { background: color-mix(in srgb, var(--lemon) 26%, var(--white)); }
.addon-check { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; flex: none; border: 1.5px solid var(--line); border-radius: 50%; background: var(--white); }
.addon-check .pc-ic { display: none; }
.addon.is-on .addon-check { background: var(--leaf); border-color: var(--leaf); }
.addon.is-on .addon-check .pc-ic { display: block; width: 10px; height: 10px; color: var(--cream); }

/* ----- 3 · Pick a time — schedule (shares the .ps-screen body above) ----- */
.scard-dates { display: flex; gap: 6px; margin-bottom: 13px; }
.scard-dates span { flex: 1; text-align: center; font-size: 9.5px; font-weight: 600; padding: 6px 4px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-70); }
.scard-dates .is-sel { background: var(--leaf); border-color: var(--leaf); color: var(--cream); }
.scard-label { font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-70); margin-bottom: 9px; }
.scard-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.scard-slots span { text-align: center; font-size: 8px; font-weight: 600; white-space: nowrap; padding: 7px 1px; border-radius: 9px; border: 1px solid var(--line); color: var(--ink); }
.scard-slots .is-sel { background: var(--lemon); border-color: var(--leaf); color: var(--forest); box-shadow: inset 0 0 0 1px var(--leaf); }

/* ----- Neomorphism — soft, tactile depth across the app view -----
   Raised surfaces get paired light/dark shadows; the selected / pressed
   state flips to an inset shadow so it reads as physically pushed in.
   Everything is scoped under .phone-screen so it only touches the mock. */
.phone-screen .ps-rail { background: var(--neo-surface); border-right: 0; }
.phone-screen .ps-cat i { background: var(--neo-surface); box-shadow: var(--neo-raise-sm); }
.phone-screen .ps-cat.is-active i { background: color-mix(in srgb, var(--lemon) 20%, var(--neo-surface)); box-shadow: var(--neo-inset-sm); color: var(--forest); }

.phone-screen .ps-tabs span { border: 0; background: var(--neo-surface); box-shadow: var(--neo-raise-sm); }
.phone-screen .ps-tabs .is-active { background: color-mix(in srgb, var(--lemon) 22%, var(--neo-surface)); color: var(--forest); box-shadow: var(--neo-inset-sm); }

.phone-screen .ps-thumb { box-shadow: var(--neo-raise-sm); }
.phone-screen .ps-add { border: 0; background: var(--neo-surface); box-shadow: var(--neo-raise-sm); }
.phone-screen .ps-add.is-added { background: var(--leaf); color: var(--cream); box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 15%, var(--leaf)), 0 1px 3px color-mix(in srgb, var(--leaf) 40%, transparent); }

.phone-screen .pcard-drop { border: 0; background: var(--neo-surface); box-shadow: var(--neo-inset-sm); }
.phone-screen .pcard-people { border: 0; background: var(--neo-surface); box-shadow: var(--neo-raise); }
.phone-screen .pcard-chips span { border: 0; background: var(--neo-surface); box-shadow: var(--neo-raise-sm); }
.phone-screen .pcard-chips .is-sel { background: color-mix(in srgb, var(--lemon) 22%, var(--neo-surface)); color: var(--forest); box-shadow: var(--neo-inset-sm); }
.phone-screen .addon { background: var(--neo-surface); box-shadow: var(--neo-raise-sm); }
.phone-screen .addon.is-on { background: color-mix(in srgb, var(--lemon) 20%, var(--neo-surface)); box-shadow: var(--neo-inset-sm); }
.phone-screen .addon-check { border: 0; background: var(--neo-surface); box-shadow: var(--neo-raise-sm); }
.phone-screen .addon.is-on .addon-check { background: var(--leaf); box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 16%, var(--leaf)); }

.phone-screen .scard-dates span { border: 0; background: var(--neo-surface); box-shadow: var(--neo-raise-sm); }
.phone-screen .scard-dates .is-sel { background: var(--leaf); color: var(--cream); box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 15%, var(--leaf)), 0 1px 3px color-mix(in srgb, var(--leaf) 40%, transparent); }
.phone-screen .scard-slots span { border: 0; background: var(--neo-surface); box-shadow: var(--neo-raise-sm); }
.phone-screen .scard-slots .is-sel { background: color-mix(in srgb, var(--lemon) 22%, var(--neo-surface)); color: var(--forest); box-shadow: var(--neo-inset-sm); }

/* ----- Interactive phone demos (cards 1-3) -----
   The mockups are decorative (aria-hidden) but respond to pointer taps so a
   visitor can try a mini version of the app. Pointer-only by intent: the
   mocks stay hidden from assistive tech, where each card's .visually-hidden
   step sentence is the single accessible label. */
.ps-cat, .ps-tabs span, .ps-add,
.pcard-chips span, .addon, .pcard-drop-head,
.scard-dates span, .scard-slots span { cursor: pointer; }

.ps-cat i, .ps-tabs span, .ps-add,
.pcard-chips span, .addon, .pcard-drop, .pcard-drop .pc-ic--chev,
.scard-dates span, .scard-slots span, .ps-thumb, .pcard-price {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease,
              box-shadow .18s ease, transform .12s ease;
}
.ps-tabs span:active, .ps-add:active,
.pcard-chips span:active, .addon:active,
.scard-dates span:active, .scard-slots span:active { transform: scale(.93); }
.ps-cat:active i { transform: scale(.9); }

@media (hover: hover) {
  .ps-tabs span:hover, .pcard-chips span:hover,
  .scard-dates span:hover, .scard-slots span:hover, .pcard-drop:hover { border-color: var(--leaf); }
  .ps-add:not(.is-added):hover { background: color-mix(in srgb, var(--leaf) 12%, var(--white)); }
  .addon:hover { background: color-mix(in srgb, var(--lemon) 16%, var(--white)); }
  .ps-cat:hover i { background: var(--lemon); }
  .mock--phone .phone { transition: transform .3s ease, box-shadow .3s ease; }
  .mock--phone:hover .phone { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(17,17,17,.26); }
}
@media (prefers-reduced-motion: reduce) { .mock--phone:hover .phone { transform: none; } }

/* freshly-added / price-change pop */
.ps-add.just-added, .pcard-price.bump { animation: ps-pop .3s ease; }
@keyframes ps-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ps-add.just-added, .pcard-price.bump { animation: none; } }

/* ingredients dropdown (screen 2) */
.pcard-drop .pc-ic--chev { transition: transform .22s ease; }
.pcard-drop.is-open .pc-ic--chev { transform: rotate(180deg); }
/* Two balanced columns via multicol so a wrapping item (e.g. "Ginger-garlic
   paste") keeps its own lines together and never knocks the neighbouring
   column out of vertical rhythm — bullets are top-aligned to the first line. */
.pcard-ings { list-style: none; margin: 0; padding: 0; column-count: 2; column-gap: 14px; overflow: hidden; max-height: 0; margin-top: 0; transition: max-height .28s ease, margin-top .28s ease; }
.pcard-ings.is-open { max-height: 170px; margin-top: 9px; }
.pcard-ings li { display: flex; align-items: flex-start; gap: 5px; font-size: 9px; font-weight: 600; color: var(--ink-70); line-height: 1.3; break-inside: avoid; margin-bottom: 6px; }
.pcard-ings li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--leaf); flex: none; margin-top: 3px; }
@media (prefers-reduced-motion: reduce) { .pcard-ings { transition: none; } }

/* ----- 4 · Cook arrives — Home Cook photo framed with no device bezel.
   Kept a touch shorter than the phone footprint so the whole photo (roti and
   all) fits inside the preview viewport rather than bleeding off the bottom
   and clipping the roti being cooked. Vertically centred in the preview. --- */
.mock--cook { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; }
.how-cook {
  position: relative;
  width: var(--frame-w);
  height: clamp(356px, 25vw, 404px);     /* fits inside the preview so the roti stays visible */
  flex: none;
  border: 0;
  border-radius: 34px 34px 22px 22px;    /* mirror the phone frame's corners */
  box-shadow: 0 14px 34px rgba(17,17,17,.22);
}
.how-cook > img { border-radius: inherit; object-position: 50% 42%; }

/* Forest base band that closes the section, mirroring the reference */
.how-band { height: clamp(56px, 9vw, 120px); background: var(--forest); }

@media (prefers-reduced-motion: reduce) {
  .how-card { transition: none; }
  .how-card:hover { transform: none; }
}

/* ---------- Available areas (chips) ---------- */
.areas { background: var(--white); }
.area-chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px;
  margin-bottom: var(--s3);
}
.area-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-size: 14px; font-weight: 500; color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.area-chip .pin { width: 16px; height: 16px; color: var(--leaf); }

/* ---------- Testimonials / Reviews ---------- */
.testimonials { background: var(--cream); text-align: center; }
.testimonials .section-lead { margin-inline: auto; }
.rating-line {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; color: var(--ink);
}
.rating-line .rating .star { color: var(--tomato); }

.carousel { position: relative; max-width: 720px; margin-inline: auto; }
.carousel-track { position: relative; min-height: 220px; }
.testi {
  position: absolute; inset: 0;
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s4);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--s2);
  align-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .4s ease;
}
.testi.is-active { position: relative; opacity: 1; visibility: visible; }
.testi-stars { display: inline-flex; gap: 3px; color: var(--tomato); }
.testi p { font-size: 18px; color: var(--ink); margin: 0; max-width: 52ch; }
.testi footer { display: inline-flex; align-items: center; gap: 12px; }
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--leaf);
  color: var(--cream);
  font-weight: 600;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.testi-name { display: flex; flex-direction: column; text-align: left; font-weight: 600; font-size: 15px; }
.testi-area { font-weight: 400; font-size: 13px; color: var(--ink-70); }

.carousel-controls { display: flex; align-items: center; justify-content: center; gap: var(--s3); margin-top: var(--s3); }
.carousel-btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--leaf);
  background: transparent;
  color: var(--leaf);
  border-radius: 50%;
}
.carousel-btn:hover { background: var(--leaf); color: var(--cream); }
.carousel-dots { display: inline-flex; gap: 8px; }
.carousel-dot {
  width: 10px; height: 10px; padding: 0;
  border-radius: 50%;
  border: 0;
  background: var(--line);
}
.carousel-dot.is-active { background: var(--leaf); }

/* ---------- FAQ ---------- */
.faq { background: var(--white); }
.faq-title {
  text-align: center;
  font-size: clamp(32px, 5.4vw, 56px);
  font-weight: 700;
  margin-bottom: var(--s5);
}
.accordion { display: grid; gap: 14px; }
.acc-item {
  border: 0;
  border-radius: 18px;
  background: color-mix(in srgb, var(--ink) 4%, var(--white));
  overflow: hidden;
}
.acc-item h3 { margin: 0; }
.acc-trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: transparent;
  border: 0;
  padding: 22px var(--s3);
  font-size: 18px; font-weight: 600;
  text-align: left;
  color: var(--ink);
}
.acc-trigger .acc-plus {
  transition: transform .2s ease;
  color: var(--ink-70);
  flex: none;
}
.acc-trigger[aria-expanded="true"] .acc-plus { transform: rotate(45deg); }
.acc-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .28s ease;
}
.acc-panel.is-open { max-height: 500px; }
.acc-panel p { padding: 0 var(--s3) var(--s3); color: var(--ink-70); font-size: 16px; margin: 0; }
.faq-more { margin-top: var(--s3); }

/* ---------- About (SEO paragraph) ---------- */
.about-seo { background: var(--cream); }
.about-seo .container { max-width: 900px; }
.about-seo .section-title { font-size: clamp(22px, 3vw, 28px); }
.about-seo p { color: var(--ink-70); font-size: 16px; line-height: 1.7; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  background: var(--forest-2);
  color: var(--cream);
  padding-top: var(--s5);
  overflow: hidden;
}
.footer-inner { position: relative; padding-bottom: 6rem; }

.footer-top {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  column-gap: var(--s6);
  padding-bottom: var(--s5);
}
/* Flexible spacer (col 1) pushes the group right; card sits just left of Pages */
.footer-top > .download-card { grid-column: 2; }
.footer-top > .footer-col { grid-column: 3; }
.footer-top > .footer-info { grid-column: 4; }

/* Right-hand stacked column: Contact / Address / Socials */
.footer-info { display: flex; flex-direction: column; gap: var(--s4); }

/* Download app card */
.download-card {
  background: var(--lemon);
  color: var(--ink);
  border-radius: var(--radius);
  padding: var(--s3);
  box-shadow: var(--shadow-lg);
  align-self: start;
  width: max-content;
  max-width: 100%;   /* never exceed its column / the viewport */
  display: flex;
  flex-wrap: wrap;   /* let the QR drop below the copy when space is tight */
  align-items: stretch;
  gap: var(--s3);
}
.download-card-main { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s3); }
.download-card-title { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0; text-align: left; line-height: 1.7; }
/* Link / info columns — muted labels, bright values (mirrors the reference) */
.footer-col h3 { font-size: 13px; font-weight: 500; letter-spacing: .02em; color: color-mix(in srgb, var(--cream) 52%, transparent); margin-bottom: var(--s3); }
.footer-col ul { list-style: none; }
.footer-col li { line-height: 1; }
.footer-col a { color: var(--white); font-size: 15px; line-height: 2.2; }
.footer-col a:hover { color: var(--lemon); }
.footer-address { font-style: normal; font-size: 15px; line-height: 1.6; color: var(--white); }

.socials { display: flex; gap: 12px; }
.socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--tomato);
  transition: background-color .15s ease;
}
.socials a:hover { background: var(--lemon); color: var(--ink); }
.socials .ic { width: 20px; height: 20px; }

/* Large faded brand watermark */
.footer-watermark {
  position: absolute;
  left: 50%;
  bottom: -0.24em;
  transform: translateX(-50%);
  z-index: 1;
  font-weight: 700;
  font-size: clamp(140px, 30vw, 420px);
  line-height: .8;
  letter-spacing: -.02em;
  color: rgba(255, 255, 255, .05);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* Bottom bar */
.footer-bottom {
  position: relative;
  z-index: 2;
  padding-block: var(--s2);
  text-align: center;
  background: rgba(0, 0, 0, .16);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.footer-bottom p { margin: 0; font-size: 13px; color: color-mix(in srgb, var(--cream) 70%, transparent); }

/* ---------- Sticky mobile CTA ---------- */
.mobile-cta {
  display: none;
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 90;
  box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Footer: collapse the 4-track desktop layout into a flexible 2-column grid.
   The desktop rules pin children to grid-column 3 / 4 — reset those, or they
   spawn phantom columns once the grid only has two tracks. */
@media (max-width: 1080px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s5);
    row-gap: var(--s5);
  }
  .footer-top > .download-card { grid-column: 1 / -1; }
  .footer-top > .footer-col,
  .footer-top > .footer-info { grid-column: auto; }
}

/* Small desktop / tablet: step the step cards from four-up to two-up before
   stacking. Kept at 1200px (not 1024px) so the mock previews — the phone's
   "Added" pill and the schedule's four-column slot grid — never render in the
   cramped 1025–1200px band where they clipped/wrapped at four-up. */
@media (max-width: 1200px) {
  .how-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  /* Native-feeling floating menu card: a rounded panel drops just below the
     header with inset rows + chevrons and its own Download CTA, over a dimmed
     scrim that covers the rest of the page. */
  .nav-links {
    position: fixed;
    inset: calc(var(--header-h) + 8px) clamp(12px, 4vw, 20px) auto;
    flex-direction: column;
    gap: 6px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px;
    box-shadow: 0 18px 44px rgba(17,17,17,.18);
    transform: translateY(-10px) scale(.98);
    transform-origin: top right;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s cubic-bezier(0.34, 1.56, 0.64, 1), visibility .2s ease;
    margin-inline: 0;
    /* Long menus stay usable on short/landscape phones. */
    max-height: calc(100dvh - var(--header-h) - 24px);
    overflow-y: auto;
  }
  .nav-links.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px;
    border: 0;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    transition: background-color .15s ease, color .15s ease;
  }
  .nav-links a:hover,
  .nav-links a:active { background: var(--cream-2); color: var(--leaf); border-bottom-color: transparent; }
  .nav-chevron {
    display: inline-block;
    width: 18px; height: 18px;
    color: color-mix(in srgb, var(--ink) 45%, transparent);
  }
  .nav-links a:hover .nav-chevron { color: var(--leaf); }

  .nav-toggle { display: inline-flex; }
  .nav-cta { display: none; }

  /* Dimmed backdrop behind the card. */
  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(17,17,17,.32);
    opacity: 0;
    transition: opacity .2s ease;
  }
  /* Honour the [hidden] attribute the mobile-nav JS toggles. Without this, the
     display:block above overrides [hidden], leaving an invisible full-screen
     scrim (position:fixed; inset:0; z-index:90) that swallows every tap — so the
     whole page, including the How-it-works phone screens, feels dead on mobile. */
  .nav-scrim[hidden] { display: none; }
  .nav-scrim.is-open { opacity: 1; }
  @media (prefers-reduced-motion: reduce) {
    .nav-links { transition: opacity .12s ease, visibility .12s ease; transform: none; }
    .nav-scrim { transition: none; }
  }

  /* Hero stacks: copy on top, imagery below — centre it so it reads as one block. */
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 640px; margin-inline: auto; text-align: center; }
  .hero-cta { justify-content: center; }

  .overlay-grid { grid-template-columns: 1fr 1fr; }
  .overlay-tile:first-child { grid-row: auto; grid-column: 1 / -1; }
  .overlay-tile:first-child .media { height: auto; aspect-ratio: 16 / 10; }
  .overlay-tile:not(:first-child) .media { aspect-ratio: 4 / 3; }
  .care-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(220px, 42vw) minmax(160px, 30vw) minmax(160px, 30vw);
    grid-template-areas:
      "spot spot"
      "top-a top-b"
      "bot bot";
  }

  .mobile-cta { display: flex; }
  /* Reserve room for the sticky CTA, plus the home-indicator inset on notched phones. */
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* Phone: everything single-column. */
@media (max-width: 620px) {
  /* Stack the trust items into a tidy, left-aligned list in a centred column so
     every icon tile and every text block lines up (no ragged centred rows). */
  .trust-strip .container {
    grid-template-columns: 1fr;
    gap: var(--s3);
    max-width: 360px;
    padding-block: var(--s4);
  }
  .ts-item { justify-content: flex-start; gap: var(--s2); }
  .ts-ic { width: 42px; height: 42px; }
  .how-steps { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .overlay-grid { grid-template-columns: 1fr; }
  .overlay-tile:first-child .media,
  .overlay-tile:not(:first-child) .media { aspect-ratio: 4 / 3; }
  .care-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: minmax(200px, 60vw);
    grid-template-areas: "spot" "top-a" "top-b" "bot";
  }
  .care-card--spotlight { grid-row: auto; }
  .hero-marquee { height: clamp(360px, 82vw, 520px); }

  .footer-top { grid-template-columns: 1fr; }
  /* The sticky booking CTA stays visible on mobile. */
  .footer-top > .download-card { display: none; }

  /* Keep the sticky CTA clear of the screen edges + home indicator. */
  .mobile-cta {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}

body.modal-open { overflow: hidden; }

/* ---------- Legal pages ---------- */
.legal-nav {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 24px);
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}
.legal-nav a {
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
}
.legal-nav a[aria-current="page"] { border-bottom: 2px solid var(--leaf); }
@media (max-width: 560px) {
  .nav:has(.legal-nav) { flex-wrap: wrap; gap: 8px; padding-block: 10px; }
  .legal-nav { width: 100%; margin-left: 0; justify-content: space-between; }
  .legal-copy section { scroll-margin-top: 150px; }
}

.legal-hero {
  padding-block: clamp(56px, 8vw, 104px) clamp(40px, 6vw, 72px);
  background: var(--lemon);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.legal-hero-inner { max-width: 920px; }
.legal-hero h1 {
  max-width: 12ch;
  font-size: clamp(44px, 7vw, 76px);
  line-height: 1;
  letter-spacing: -.04em;
}
.legal-intro { max-width: 62ch; font-size: clamp(17px, 2vw, 20px); color: var(--ink-70); }
.legal-date { margin-top: var(--s3); font-size: 14px; font-weight: 600; }

.legal-layout {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 760px);
  justify-content: center;
  gap: clamp(40px, 7vw, 96px);
  padding-block: clamp(48px, 7vw, 96px);
}
.legal-toc {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  align-self: start;
}
.legal-toc h2 { font-size: 15px; margin-bottom: var(--s2); }
.legal-toc ol { display: grid; gap: 10px; }
.legal-toc li { list-style: decimal inside; color: var(--ink-70); font-size: 14px; }
.legal-toc a { color: inherit; }
.legal-toc a:hover { color: var(--leaf); }

.legal-copy { max-width: 76ch; }
.legal-copy section { scroll-margin-top: calc(var(--header-h) + 24px); }
.legal-copy section + section {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.legal-copy h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: var(--s2); }
.legal-copy h3 { font-size: 19px; margin-top: var(--s3); }
.legal-copy p, .legal-copy li { color: var(--ink-70); line-height: 1.75; }
.legal-copy ul, .legal-copy ol { display: grid; gap: 8px; margin: var(--s2) 0; padding-left: 1.25em; }
.legal-copy li { list-style: disc; padding-left: .25em; }
.legal-copy ol > li { list-style: decimal; }
.legal-copy strong { color: var(--ink); }

.legal-footer { padding: var(--s5) 0 0; }
.legal-footer-main {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  padding-bottom: var(--s5);
}
.legal-footer .brand { color: var(--cream); }
.legal-footer-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.legal-footer-links a { color: var(--white); }
.legal-footer-links a:hover { color: var(--lemon); }

@media (max-width: 760px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
  .legal-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legal-footer-main { flex-direction: column; }
}