/* ============================================================================
   home.css — extracted from index.html inline <style> (2026-06-06) for caching.
   Byte-identical to the rules that were inline; relocated so repeat visitors
   reuse a 1-year-immutable, edge-compressed file instead of re-downloading
   ~336KB of CSS inside every HTML response. Load order preserved: linked
   AFTER nav.css + footer.css (same position the inline block held).
   ============================================================================ */

/* Self-hosted brand fonts (replaces the Google Fonts <link> in index.html head).
   Plus Jakarta Sans: variable woff2, weights 200-800 (weight 900 requests clamp
   to 800). Young Serif: single 400 weight, converted from the bundled TTF. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/plus-jakarta-sans.woff2?v=20260523a') format('woff2');}
@font-face{font-family:'Young Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/young-serif.woff2?v=20260606a') format('woff2');}

:root{
  /* 2026-05-19 palette warm-up — royal blue (#3F6BE6) read as
     tech-corporate. Swap to deep ink-navy (#0B1437) + butter gold +
     blush pink + warm cream. Token names kept for cascade compat:
     `--blue` is just now navy. Hardcoded rgba blues recolored via
     site search. */
  --blue:#0B1437;--blue-d:#060B25;--blue-l:#B5C0DE;--blue-xl:#DEE2EE;--blue-xxl:#F0F2F8;
  --navy:#0B1437;--navy-d:#060B25;
  /* tandoco brand blue · the saturated logo navy (the smiley t+o disk). */
  --tandoco-blue:#1E2A78;
  --tandoco-blue-l:#3A4AA0;       /* hover / accent shift on navy buttons */
  --blue-mist:#DEE2EE;             /* muted cool — calm info sections */
  --paper-warm:#FAF6EC;            /* warm white page bg (not cold) */
  --paper:#FAF7F0;
  /* tandoco cream · matches the natural canvas tote bag (the brand
     pickup tote). a warm pale ecru, slightly muted vs the previous
     bright cream. */
  --cream:#EBE3CF;--cream-d:#DCD2B6;--cream-l:#F4ECD8;
  /* lightest cream · used as the page background. brighter than
     cream-l but still warm/cream (not paper-white). */
  --cream-xl:#F8F2DD;
  --ink:#0B1437;--ink-soft:#3A4458;--ink-mute:rgba(11,20,55,.55);
  --gold:#E0B341;--gold-d:#B88A1A;--gold-l:#F2D079;--gold-xl:#FBEDC2;
  --blush:#F5C9CC;--blush-d:#D49E9F;--blush-soft:#FBE3E5;--peach-mist:#FCE2D6;
  --green:#16A34A;--green-d:#15803D;
  /* 2026-05-20 color-bold pass — new section bg tints so the cream/paper
     monotony breaks into a proper flow of warm + cool tones. Every tint
     is intentionally LIGHT so the existing dark-text default still reads;
     dark anchors (whole/ai/blog) stay tandoco-blue + navy-d. */
  --sage:#A8C49A;--sage-mist:#E5EEDD;
  --cobalt-mist:#D5DFF2;--gold-mist:#FBEDC2;
  --ff:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;
  --serif:'Young Serif',Georgia,serif;
}
/* 2026-05-19 — two-font system: Young Serif owns the HERO h1 only.
   Everything else stays Plus Jakarta Sans. One editorial moment up
   top, familiar sans body throughout — lowest risk, biggest payoff.
   Letter-spacing nudged slightly tighter because Young Serif at huge
   display sizes opens up vs Plus Jakarta. */
/* Jakarta only — the old Young Serif treatment is gone. */
.s-hero .hero-h1{
  font-family:var(--ff);
  font-weight:900;
  letter-spacing:-.040em;
}
.s-hero .hero-h1 em{
  font-family:var(--ff);
  font-style:italic;
  font-weight:600;
  letter-spacing:-.020em;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
/* overflow-x:clip (not :hidden) prevents accidental page-level horizontal
   scroll WITHOUT establishing a new scroll container — which on iOS Safari
   would otherwise block touch-scroll on nested horizontal rails like
   .cats-rail and .blog-rail. Falls back to :hidden on browsers that don't
   support :clip (Safari < 16). */
html,body{font-family:var(--ff);color:var(--ink);background:#ffffff;text-transform:lowercase;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;}

/* INNER CARDS · cream-l (the lightest of the three-tier cream
   scale) applies at every viewport so any card/chrome inside a
   cream section lifts off the section's cream/-cream-d background. */
.v3-winner,
.v3-vs-row,
.v3-math-side,
.rev-card,
.blog-card,
.coach-card,
.coach-chat,
.coach-detail,
.pc-action,
.ai-feat,
.chip,
.cat-tile .disc,
.whole-list li,
.who-side .rail .row,
.hw-recipe,
.v3-card,
.social-card,
.faq-list{
  background:#ffffff !important;
}
/* every inner card gets the same rounded-corner treatment so no
   edge ever reads as sharp, regardless of which section it lives in. */
.v3-winner,
.v3-vs-row,
.v3-math-side,
.rev-card,
.blog-card,
.coach-card,
.coach-chat,
.coach-detail,
.pc-action,
.ai-feat,
.chip,
.whole-list li,
.who-side .rail .row,
.hw-recipe,
.v3-card,
.social-card,
.faq-list{
  border-radius:18px;
}
.coach-detail{padding:22px 22px 20px;}
.v3-math-side{padding:24px 22px;}

/* COBALT ACCENT SPRINKLE · small jolts of bright blue against the
   cream + gold palette. tasteful — links, sub-text emphasis, swatches. */
.s-blog .see,
.s-cats .see,
.rev-cta a,
.blog-card .ti em,
.who-side .lede em,
.hw-recipe-title em,
.faq-a-inner em,
.s-ai .ai-feat .nm em,
.whole-sub em,
.s-coach .creds em,
.pc-action .h em,
.chip .body .bot,
.cats-rail .pick,
.cat-tile .nm em,
.s-blog .head h2 em,
.map-head .sub em,
.coach-head .sub em,
.who-head .sub em,
.s-math .sub em,
.faq-head h2 em,
.s-math .v3-vs-row .vs-icn,
.s-ai .ai-feat .icn,
.chip .icn.mid,
.who-side .rail .row .nm em,
.s-math .v3-foot em{
  color:#1E40AF;
}

em{font-style:italic;font-weight:600;color:var(--blue-d);}

/* ── CTA GLOW · 2026-05-20 ─────────────────────────────────────────
   every primary CTA across the page gets a faint soft glow so the
   interactive elements feel a little spotlit. tinted to match each
   CTA's own color so the glow reads as the same hue as the button. */
.btn,
.cats-cta,
.coach-cta,
.s-ai .btn.s-ai-cta,
.v3-winner-cta,
.v3-cta,
.s-whole a.btn,
.s-whole .hw-recipe-cta,
.hero-ctas .btn{
  position:relative;
}
.btn::after,
.cats-cta::after,
.coach-cta::after,
.s-ai .btn.s-ai-cta::after,
.v3-winner-cta::after,
.v3-cta::after,
.s-whole a.btn::after,
.s-whole .hw-recipe-cta::after,
.hero-ctas .btn::after{
  content:"";position:absolute;inset:-6px;border-radius:inherit;
  pointer-events:none;z-index:-1;
  background:inherit;
  filter:blur(12px);opacity:.45;
  transition:opacity .25s ease;
}
.btn:hover::after,
.cats-cta:hover::after,
.coach-cta:hover::after,
.v3-winner-cta:hover::after,
.v3-cta:hover::after,
.hero-ctas .btn:hover::after{opacity:.70;}

/* ── GOLD ACCENT SPRINKLE · 2026-05-20 ─────────────────────────────
   small consistent gold details across every light section. */
/* every section eye-kicker · plain text + leading gold bar, NO pill */
.s-cats .head .eye,
.s-hw .head .eye,
.who-head .eye,
.coach-head .eye,
.s-math .head .eye{
  display:inline-flex;align-items:center;gap:6px;
  padding:0 !important;background:transparent !important;border:0 !important;
  color:var(--gold-d) !important;
}
.s-cats .head .eye::before,
.s-hw .head .eye::before,
.who-head .eye::before,
.coach-head .eye::before,
.s-math .head .eye::before{
  background:var(--gold) !important;
}
/* pickup + delivery eye-kicker · BLACK plain text */
.map-head .eye{
  display:inline-flex;align-items:center;gap:6px;
  padding:0 !important;background:transparent !important;border:0 !important;
  color:#000000 !important;
}
.map-head .eye::before{background:var(--gold) !important;}
/* stay in touch eye-kicker · BLACK plain text */
.social-head .eye{
  display:inline-flex;align-items:center;gap:6px;
  padding:0 !important;background:transparent !important;border:0 !important;
  color:#000000 !important;
}
.social-head .eye::before{background:var(--gold) !important;}
/* "questions" eye-kicker · plain text, no pill */
.faq-head .eye{
  display:inline-flex;align-items:center;gap:6px;
  padding:0 !important;background:transparent !important;border:0 !important;
  color:var(--gold-d) !important;
}
.faq-head .eye::before{background:var(--gold) !important;}
/* "loved by locals" eye-kicker · tandoco-blue plain text, no pill */
.s-rev .head .eye{
  display:inline-flex;align-items:center;gap:6px;
  padding:0 !important;background:transparent !important;border:0 !important;
  color:var(--tandoco-blue) !important;
}
.s-rev .head .eye::before{background:var(--tandoco-blue) !important;}
/* gold hairline above the v3 comparison rows */
.s-math .v3-vs{
  border-top:1px dashed rgba(224,179,65,.55);
  padding-top:14px;
}

/* icon picker removed · selections committed to .vs-icn markup */
/* soft gold rule underlining the rev-summary */
.rev-summary{position:relative;}
.rev-summary::after{
  content:"";position:absolute;left:18px;right:18px;bottom:6px;height:2px;
  background:linear-gradient(90deg,transparent 0%,var(--gold) 50%,transparent 100%);
  opacity:.55;pointer-events:none;
}

/* MOBILE-DEFAULT card chrome — every section reads as a cream card
   lifting off the cream-d page (matches desktop's three-tier look).
   Desktop @media rules later override max-width / radius for the
   1140 layout, but the cream bg + shadow + horizontal margin
   inherit through where not explicitly overridden. */
.s-who,
.s-math,
.s-rev,
.s-blog,
.s-social,
.s-faq,
.s-coach,
.s-map,
.s-ai{
  border-radius:24px !important;
  margin:24px 16px 0 !important;
  padding:24px 22px !important;
  box-shadow:
    0 18px 36px -22px rgba(15,24,40,.20),
    0 4px 10px -6px rgba(15,24,40,.10),
    0 1px 0 rgba(255,255,255,.55) inset;
}

/* ════════════════════════════════════════════════════════════════
   COLOR PLAYBOOK · per-section background rhythm — alternating
   light/dark/cream/gold so every section visibly differs from its
   neighbors. Three modes drive the text/CTA contrast:
   · LIGHT  (paper-warm / cream-l / blue-mist)        — dark text
   · DARK   (tandoco-blue)                            — light text
   · BRIGHT (gold)                                    — navy text
   ════════════════════════════════════════════════════════════════ */
.s-cats   {
  background:
    radial-gradient(48% 42% at 90% 16%, rgba(242,208,121,.30) 0%, rgba(242,208,121,0) 78%),
    radial-gradient(42% 38% at 6% 84%, rgba(213,223,242,.55) 0%, rgba(213,223,242,0) 78%),
    var(--blue-mist) !important;
  position:relative;overflow:hidden;
}
.s-hw     {
  background:
    radial-gradient(50% 45% at 14% 22%, rgba(213,223,242,.55) 0%, rgba(213,223,242,0) 80%),
    radial-gradient(40% 35% at 92% 80%, rgba(251,237,194,.45) 0%, rgba(251,237,194,0) 80%),
    #ffffff !important;
  position:relative;overflow:hidden;
}
.s-who    {
  background:
    radial-gradient(60% 50% at 12% 18%, rgba(181,192,222,.55) 0%, rgba(181,192,222,0) 70%),
    radial-gradient(50% 45% at 92% 78%, rgba(213,223,242,.65) 0%, rgba(213,223,242,0) 75%),
    radial-gradient(40% 40% at 78% 14%, rgba(222,226,238,.55) 0%, rgba(222,226,238,0) 80%),
    #ffffff !important;
}
.s-whole  {background:var(--navy-d) !important;position:relative;overflow:hidden;} /* NAVY-D — matches intelligence */
.s-map    {background:var(--blue-mist) !important;}   /* light blue — location */
.s-ai     {background:var(--navy-d) !important;}      /* DEEP DARK — intelligence */
.s-coach  {
  background:
    radial-gradient(45% 40% at 90% 14%, rgba(242,208,121,.28) 0%, rgba(242,208,121,0) 70%),
    radial-gradient(40% 36% at 8% 86%, rgba(181,192,222,.30) 0%, rgba(181,192,222,0) 70%),
    #3A4AA0 !important;
  position:relative;overflow:hidden;
}
.s-math   {background:#ffffff !important;position:relative;overflow:hidden;}
.s-rev    {background:#ffffff !important;position:relative;overflow:hidden;}
.s-blog   {
  background:
    radial-gradient(50% 45% at 8% 18%, rgba(242,208,121,.22) 0%, rgba(242,208,121,0) 75%),
    radial-gradient(45% 40% at 92% 82%, rgba(181,192,222,.30) 0%, rgba(181,192,222,0) 75%),
    var(--tandoco-blue) !important;
  position:relative;overflow:hidden;
}
.s-social {
  background:
    radial-gradient(45% 40% at 90% 18%, rgba(251,237,194,.50) 0%, rgba(251,237,194,0) 78%),
    radial-gradient(40% 36% at 8% 86%, rgba(213,223,242,.55) 0%, rgba(213,223,242,0) 78%),
    var(--blue-mist) !important;
  position:relative;overflow:hidden;
}
.s-faq    {background:#ffffff !important;position:relative;overflow:hidden;}

/* ── SEMICIRCLE BLEEDS · 2026-05-20 ─────────────────────────────────
   matches the s-ai-blush pattern from the intelligence module — a
   single oversized soft circle bleeds off an edge of each section as
   a decorative detail. Color, side, and offset vary so each section
   has its own personality without flattening into a single look. */
.s-cats::before,
.s-hw::before,
.s-rev::before,
.s-faq::before,
.s-social::before,
.s-math::before,
.s-whole::before{
  content:"";position:absolute;pointer-events:none;z-index:0;
  width:520px;height:520px;border-radius:50%;
  opacity:.85;
}
.s-cats > *,
.s-hw > *,
.s-rev > *,
.s-faq > *,
.s-social > *,
.s-math > *,
.s-whole > *{position:relative;z-index:1;}

/* browse the kitchen · gold blush bleeding off bottom-right */
.s-cats::before{
  top:-160px;right:-220px;
  background:radial-gradient(circle at 30% 50%,
    var(--gold-l) 0%, var(--gold-l) 38%, var(--gold-xl) 65%, transparent 92%);
}
/* how it works · pastel blue blush off the left */
.s-hw::before{
  top:40%;left:-260px;transform:translateY(-50%);
  background:radial-gradient(circle at 70% 50%,
    var(--blue-l) 0%, var(--blue-l) 42%, var(--blue-xl) 68%, transparent 92%);
}
/* commitment · gold blush · IDENTICAL stops + opacity to s-math so
   the two sections read as the same warm shade. */
.s-whole::before{
  bottom:-220px;left:-200px;opacity:.85;
  background:radial-gradient(circle at 70% 30%,
    var(--gold-l) 0%, var(--gold-l) 38%, var(--gold-xl) 66%, transparent 92%);
}
/* what it costs (s-math, ABOVE) + loved by locals (s-rev, BELOW) ·
   matched semicircles bleeding INTO each other so the two sections
   visually share one continuous arc across the seam between them.
   identical size + identical horizontal offset = one shape. */
.s-math::before,
.s-rev::before{
  width:560px;height:560px;
  right:-300px;left:auto;
}
.s-math::before{
  bottom:-300px;top:auto;
  background:radial-gradient(circle at 30% 30%,
    var(--gold-l) 0%, var(--gold-l) 38%, var(--gold-xl) 66%, transparent 92%);
}
.s-rev::before{
  top:-300px;bottom:auto;
  background:radial-gradient(circle at 30% 70%,
    var(--blue-l) 0%, var(--blue-l) 42%, var(--blue-xl) 68%, transparent 92%);
}
/* social · smaller gold blush off top-left */
.s-social::before{
  top:-140px;left:-140px;width:360px;height:360px;
  background:radial-gradient(circle at 70% 60%,
    var(--gold-l) 0%, var(--gold-l) 38%, var(--gold-xl) 66%, transparent 92%);
}
/* faq · pastel blue off bottom-left */
.s-faq::before{
  bottom:-220px;left:-220px;
  background:radial-gradient(circle at 70% 30%,
    var(--blue-l) 0%, var(--blue-l) 42%, var(--blue-xl) 68%, transparent 92%);
}

/* ── Mode B · DARK NAVY SECTIONS · white text, gold accents ───────── */
/* 2026-05-20 — s-whole removed from Mode B (commitment is now WHITE bg).
   Only s-ai (navy-d) and s-blog (tandoco-blue) remain dark. */
.s-ai, .s-ai *,
.s-blog, .s-blog *{
  color:#fff;
}
.s-ai .eye, .s-blog .eye{color:var(--gold-l) !important;}
.s-ai .eye::before, .s-blog .eye::before{background:var(--gold-l) !important;}
.s-ai h2, .s-ai h3, .s-blog h2, .s-blog h3{color:#fff !important;}
.s-ai h2 em, .s-blog h2 em{color:var(--gold-l) !important;}
.s-ai p, .s-ai .sub, .s-blog p{color:rgba(255,255,255,.80) !important;}
.s-ai p b, .s-ai .sub b, .s-blog p b{color:#fff !important;}
.s-ai em, .s-blog em{color:var(--gold-l) !important;}
.s-blog .see{color:var(--gold-l) !important;}
/* blog cards on the dark section · top photo bleeds, bottom body is
   a WHITE card with black copy and tandoco-blue titles. */
.s-blog .blog-card{
  background:#ffffff !important;
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.s-blog .blog-card .body{background:#ffffff !important;}
.s-blog .blog-card .ti{color:var(--tandoco-blue) !important;}
.s-blog .blog-card .ti em{color:var(--tandoco-blue) !important;font-style:italic;font-weight:700;}
.s-blog .blog-card .ex{color:#000000 !important;}
.s-blog .blog-card .cat{color:var(--gold-d) !important;}
.s-blog .blog-card .tag{color:var(--gold-d) !important;}
.s-blog .blog-card .more{color:var(--tandoco-blue) !important;}
.s-blog .blog-card .meta{color:var(--tandoco-blue) !important;}

/* ── Mode C · BRIGHT GOLD SECTION · navy text, navy/white CTAs ────── */
.s-math, .s-math *{color:var(--navy-d);}
.s-math .eye{color:var(--navy-d) !important;}
.s-math .eye::before{background:var(--navy-d) !important;}
.s-math h2{color:var(--navy-d) !important;}
.s-math h2 em{color:var(--tandoco-blue) !important;}
.s-math .sub{color:var(--ink-soft) !important;}
.s-math .sub em{color:var(--tandoco-blue) !important;}

/* ── INNER CARD RULES per section bg ──────────────────────────────── */
/* dark navy sections (s-ai) · LIGHTLY TRANSLUCENT white cards w/ navy
   text — frosted-glass feel but still readable, not see-through. */
.s-ai .ai-feat{
  background:rgba(255,255,255,.74) !important;
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  backdrop-filter:blur(10px) saturate(140%);
  border:1px solid rgba(255,255,255,.30) !important;
  box-shadow:0 14px 30px -16px rgba(0,0,0,.45);
}
.s-ai .ai-feat,
.s-ai .ai-feat *{color:var(--ink) !important;}
/* icon chips inside ai-feat · solid color tiles, the SVG glyph color
   needs to override the blanket `*{color:var(--ink) !important}` above
   so it doesn't render navy-on-navy and disappear. */
.s-ai .ai-feat .ic{background:var(--tandoco-blue) !important;color:#ffffff !important;}
.s-ai .ai-feat .ic *{color:#ffffff !important;}
.s-ai .ai-feat .ic svg{color:#ffffff !important;stroke:#ffffff !important;}
.s-ai .ai-feat .ic.gold{background:var(--gold) !important;color:var(--navy-d) !important;}
.s-ai .ai-feat .ic.gold *{color:var(--navy-d) !important;}
.s-ai .ai-feat .ic.gold svg{color:var(--navy-d) !important;stroke:var(--navy-d) !important;}
.s-ai .ai-feat .ic.deep{background:var(--navy-d) !important;color:#ffffff !important;}
.s-ai .ai-feat .ic.deep *{color:#ffffff !important;}
.s-ai .ai-feat .ic.deep svg{color:#ffffff !important;stroke:#ffffff !important;}

/* commitment (s-whole) · boxes use pickup-section bg (blue-mist),
   black row copy, yes/no pills keep their current colors so the
   labels still pop against the cool light blue card. */
.s-whole .whole-list li{
  /* slightly translucent blue-mist so the navy section bleeds
     through faintly — keeps text readable but feels lighter. */
  background:rgba(222,226,238,.78) !important;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 8px 22px -14px rgba(15,24,40,.18);
}
.s-whole .whole-list li,
.s-whole .whole-list li *{color:#000000 !important;}
.s-whole .whole-list li.no strong{
  background:var(--navy-d) !important;color:#ffffff !important;
}
.s-whole .whole-list li.yes strong{
  background:var(--gold-l) !important;color:var(--navy-d) !important;
}
.s-ai .ai-feat .nm em{color:var(--tandoco-blue) !important;}
.s-ai .ai-feat .icn{
  background:var(--tandoco-blue) !important;color:#fff !important;
}
.s-ai .ai-feat .icn.gold{background:var(--gold) !important;color:var(--navy-d) !important;}
.s-ai .ai-feat .icn.green{background:var(--gold-l) !important;color:var(--navy-d) !important;}

/* bright gold section · solid white inner cards w/ navy hairline */
.s-math .v3-winner,
.s-math .v3-vs-row,
.s-math .v3-math-side{
  background:#fff !important;
  border:1px solid rgba(30,42,120,.10);
}

/* ── CTA color per mode ─────────────────────────────────────────── */
/* Mode B (dark navy bg): primary CTAs flip to gold for max pop */
.s-ai .btn.s-ai-cta{
  background:var(--gold) !important;color:var(--navy-d) !important;
  box-shadow:0 10px 24px -10px rgba(224,179,65,.50) !important;
}
.s-ai .btn.s-ai-cta:hover{background:var(--gold-l) !important;}
/* "see how it works" arrow → BLACK on gold pill */
.s-ai .btn.s-ai-cta svg{color:#000 !important;stroke:#000 !important;}
/* commitment CTAs · navy on white section (Mode A — light bg, dark CTA) */
.s-whole .hw-recipe-cta,
.s-whole a.btn{
  background:var(--tandoco-blue) !important;color:#fff !important;
}

/* Mode C (bright gold bg): primary CTAs flip to navy for max pop */
.s-math .v3-winner-cta{
  background:var(--tandoco-blue) !important;color:#fff !important;
}
.s-math .v3-cta{
  background:var(--tandoco-blue) !important;color:#fff !important;
  box-shadow:0 10px 22px -10px rgba(30,42,120,.45) !important;
}
/* whole-foods commitment · special-case · no horizontal padding so
   the video bleeds to the card edges, but body content below still
   has comfortable padding via its own .whole-body padding. */
.s-whole{
  border-radius:24px !important;
  margin:24px 16px 0 !important;
  padding:0 !important;overflow:hidden;
  box-shadow:
    0 18px 36px -22px rgba(15,24,40,.20),
    0 4px 10px -6px rgba(15,24,40,.10),
    0 1px 0 rgba(255,255,255,.55) inset;
}

/* every section header reads centered at ALL widths — eye pill, h2,
   and sub copy stack on the same vertical axis. */
.s-cats .head, .s-hw .head, .who-head, .map-head, .coach-head,
.s-math .head, .s-rev .head, .s-blog .head, .social-head, .faq-head{
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.s-cats .head .eye, .s-hw .head .eye, .who-head .eye, .map-head .eye,
.coach-head .eye, .s-math .eye, .s-rev .head .eye, .s-blog .head .eye,
.social-head .eye, .faq-head .eye{
  align-self:center;
}
.who-head h2, .map-head h2, .coach-head h2, .social-head h2, .faq-head h2,
.who-head .sub, .map-head .sub, .coach-head .sub, .s-math .sub,
.social-head .sub, .faq-head .sub, .s-hw .hw-sub, .s-cats .head h2,
.s-hw .head h2, .s-math .head h2, .s-rev .head h2{
  text-align:center;margin-left:auto;margin-right:auto;
}

/* s-math doesn't wrap its head in a .head — its eye/h2/sub are direct
   children, so the centering rule needs a direct target. */
.s-math > .eye, .s-math > h2, .s-math > .sub{
  text-align:center;display:block;
  margin-left:auto;margin-right:auto;
}
.s-math > .eye{display:inline-flex;align-self:center;}
.s-math{text-align:center;}

.eye{display:inline-flex;align-items:center;gap:10px;font-size:10.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--blue-d);}

/* per-section eye-kicker accents · brand palette only (navy + gold). */
.s-map .eye{color:var(--tandoco-blue);}
.s-map .eye::before{background:var(--tandoco-blue);}
.s-math .eye{color:var(--gold-d);}
.s-math .eye::before{background:var(--gold-d);}
.s-rev .eye{color:var(--gold-d);}
.s-rev .eye::before{background:var(--gold-d);}
.s-blog .eye{color:var(--blue-d);}
.s-blog .eye::before{background:var(--blue-d);}
.s-social .eye{color:var(--gold-d);}
.s-social .eye::before{background:var(--gold-d);}
.s-faq .eye{color:var(--gold-d);}
.s-faq .eye::before{background:var(--gold-d);}
.s-coach .eye{color:var(--gold-d);}
.s-coach .eye::before{background:var(--gold-d);}

/* per-section headline em accent · matches the eye kicker */
.s-map h2 em{color:var(--tandoco-blue);}
.s-math h2 em{color:var(--gold-d);}
.s-rev h2 em{color:var(--gold-d);}
.s-blog h2 em{color:var(--tandoco-blue);}
.s-social h2 em{color:var(--gold-d);}
.s-faq h2 em{color:var(--tandoco-blue);}
.s-coach .coach-head h2 em{color:var(--gold-d);}
.eye::before{display:none;}
.eye.gold{color:var(--gold-d);}
.eye.green{color:var(--green-d);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 22px;border-radius:14px;font-size:14.5px;font-weight:800;letter-spacing:-.005em;
  min-height:54px;transition:transform .25s ease;
}
.btn:active{transform:scale(.98);}
.btn svg{width:16px;height:16px;}
.btn.ink{background:var(--ink);color:var(--paper);}
.btn.blue{background:var(--tandoco-blue);color:var(--paper);box-shadow:0 10px 22px -10px rgba(30,42,120,.45);}
.btn.ghost{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(15,24,40,.10);}

/* NAV + FOOTER + DRAWER + CONTACT MODAL styles all come from
   the linked /styles/home.css at the top of <head>. Don't duplicate
   them here — that file is the source of truth for the site-wide
   chrome and the new homepage just inherits it. */

/* home.css has a legacy `.sub{background:#fff;padding:40px 5%;overflow:hidden}` rule
   that was a full SECTION class on the old marketing page. We reuse `.sub` for
   small sub-paragraph copy under every section's <h2>, so neutralise it here. */
.sub{background:transparent;padding:0;overflow:visible;}

/* ════════════════════════════════════════════════════════════════
   HERO — FLOOD IMAGE TREATMENT (à la gruns usnacks)
   Full-bleed cream paper section with the food-scatter PNG flooding
   across the entire hero. White bg of the source PNG drops out via
   mix-blend-mode:multiply so the food floats on cream. Massive bold
   headline overlaid in the foreground with a serif italic accent.
   ════════════════════════════════════════════════════════════════ */
/* hero section is normal-flow now — the sticky lives on .hero-photo
   so the content card slides up over the photo as the user scrolls. */
.hero-menu-stack{position:relative;}

.s-hero{
  /* 2026-05-20 · sticky hero · kitchen card peeks via .s-cats
     negative margin-top (set further down) — no max-height cap
     and no image clipping; image renders at its natural responsive
     size like before. */
  position:sticky;top:0;z-index:1;
  margin:0 !important;max-width:none !important;
  background:#F5F7FC;
  border:0;border-radius:0;padding:14px 0 0;
  display:flex;flex-direction:column;
  min-height:0;
}

/* TOP PHOTO BANNER · pure white hosts the absolute-positioned
   .hero-intro text block; the food image fills the rest. */
.hero-photo{
  margin:0;
  width:100%;
  border-radius:0;
  overflow:hidden;
  background:#F5F7FC;
  position:relative;
  padding-top:72px;
  padding-bottom:30px;
}
.hero-photo img{
  display:block;
  /* shrink the image so the bottom edge sits above the iOS Safari
     bottom URL pill (~90px). 88% width + auto-margin centers it,
     reducing height proportionally without changing aspect ratio. */
  width:88%;max-width:560px;height:auto;
  margin:0 auto;
}

/* CONTENT STACK · rises like a card slightly over the photo's bottom.
   Cream paper bg + rounded top corners + upward shadow = "card on
   card" effect that matches the kitchen rise. */
.hero-content{
  /* card sits below the photo with a small overlap — same gesture
     as the kitchen card rising over the hero photo. */
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;
  padding:20px 22px 28px;
  background:#03061A;color:#fff;
  border-radius:24px 24px 0 0;
  margin:-30px 0 0;
  box-shadow:0 -14px 28px -14px rgba(0,0,0,.35);
}
.hero-content .eye{
  display:inline-block;
  font-family:var(--ff);font-size:11px;font-weight:900;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-d);
  background:var(--gold-xl);
  padding:6px 12px;border-radius:99px;
  margin-bottom:14px;
}

/* flood image — over-sized so the food fills wall-to-wall regardless
   of the hero's aspect ratio. Two layers at different scales create
   parallax depth. Aggressive float + scale animations make the food
   feel like it's still in motion. */
/* .hero-flood is no longer used in the original card layout — kept
   hidden so any leftover markup doesn't render. */
.hero-flood{display:none !important;}

/* inline mobile photo no longer used · the background-image on
   .s-hero fills the whole rectangle on every breakpoint. */
.s-hero .hero-photo-mobile{display:none !important;}

/* primary "order" CTA · tandoco-blue with white text + white arrow */
.s-hero .hero-ctas .btn.ink{
  background:var(--tandoco-blue) !important;
  color:#ffffff !important;
  border:0;
}
.s-hero .hero-ctas .btn.ink:hover{background:var(--tandoco-blue-l) !important;}
.s-hero .hero-ctas .btn.ink svg{stroke:#ffffff !important;}
.s-hero .hero-ctas .btn.ink svg *{stroke:#ffffff !important;}

/* menu icon CTA · cobalt */
.s-hero .hero-ctas .btn.ghost{
  background:var(--tandoco-blue) !important;
  color:#fff !important;
  border:0 !important;
}
.s-hero .hero-ctas .btn.ghost:hover{background:#162F87 !important;}
.s-hero .hero-ctas .btn.ghost svg{stroke:#fff;}

/* no gradient overlay — text-shadows on the headline + sub carry
   the legibility load (option D). */
/* Mobile-only inline photo. Sits between the sub and the CTAs so it
   can never overlap text. Spans the full content width of the card
   (edge-to-edge with the text and buttons). Edge blending is baked
   into the JPG (a 24px feather on all 4 sides fades the photo's
   background into #F1F1F1), so no CSS gradient or mask is needed —
   the photo's edges are seamless against the card. Hidden on tablet+
   (the desktop rule re-enables the background-image layout). */
/* mobile inline photo is no longer used — the flood image now fills
   the hero. Hide it just in case the element is still in the markup. */
.s-hero .hero-photo-mobile{display:none;}

/* override the legacy mobile absolute-positioning that pinned the
   trust row to bottom:14px (got covered by the kitchen card's rise).
   All hero content now flows in normal flex order, centered. */
.s-hero .hero-ctas,
.s-hero .hero-trust{
  position:static !important;
  left:auto !important;right:auto !important;
  top:auto !important;bottom:auto !important;
  margin:0;
}
.s-hero .hero-trust{margin-top:18px;}

/* hero intro · headline + sub absolutely positioned in the cream
   space at the top of the photo. */
.hero-intro{
  position:absolute;top:52px;left:22px;right:22px;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;
}
/* CTAs hidden on mobile (desktop reveals via @media override) */
.s-hero .hero-ctas{display:none !important;}
/* MOBILE-ONLY: compact google-reviews pill below the sub. these rules
   apply only at <960px so the desktop trust row keeps its full
   two-cell layout untouched. */
@media (max-width:959.98px){
  .s-hero .hero-trust{
    display:flex !important;
    align-items:center;justify-content:center;
    margin-top:-6px;padding:0;border-top:0;gap:0;
  }
  .s-hero .hero-trust .tr-cell.right{display:none;}
  .s-hero .hero-trust .tr-cell{
    display:inline-flex;flex-direction:row;align-items:center;gap:8px;
    background:rgba(255,255,255,.35);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    padding:6px 12px;border-radius:12px;
    box-shadow:0 3px 8px -6px rgba(15,24,40,.10);
  }
  .s-hero .hero-trust .stars-row{gap:6px;}
  .s-hero .hero-trust .g-mark{width:13px;height:13px;}
  .s-hero .hero-trust .stars{
    color:var(--gold-d) !important;
    font-size:12px !important;letter-spacing:1.5px !important;line-height:1 !important;
  }
  .s-hero .hero-trust .tr-lbl{
    font-size:10.5px !important;font-weight:700 !important;
    color:var(--ink) !important;letter-spacing:.02em !important;
    text-transform:none !important;
  }
  .s-hero .hero-trust .tr-lbl b{color:var(--ink) !important;font-weight:900 !important;}
  /* mobile: drop the "· 300+ google reviews" tail so the pill just
     reads "G ★★★★★ 5.0" */
  .s-hero .hero-trust .tr-lbl-ext{display:none !important;}
}

/* Google reviews bubble · sits inside .hero-intro centered with the
   header text. Rounded rectangle (not a full pill). */
.hero-bubble{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:14px;
  background:var(--cream);
  box-shadow:
    -5px -5px 12px rgba(255,255,255,.85),
    6px 6px 14px rgba(15,24,40,.14),
    inset 1px 1px 0 rgba(255,255,255,.55),
    inset -1px -1px 0 rgba(15,24,40,.04);
  font-family:var(--ff);font-size:11px;font-weight:700;
  color:var(--ink);letter-spacing:-.005em;
  white-space:nowrap;align-self:center;
}
.hero-bubble .g-mark{flex-shrink:0;width:14px;height:14px;}
.hero-bubble .bub-stars{color:var(--gold-d);font-weight:900;letter-spacing:1px;font-size:12px;}
.hero-bubble .bub-lbl{font-size:11px;font-weight:700;color:var(--ink-soft);}
.hero-bubble .bub-lbl b{color:var(--ink);font-weight:900;}
.hero-h1{
  font-weight:900;font-size:34px;line-height:1.0;letter-spacing:-.038em;
  color:var(--navy-d);margin:0;
  text-shadow:
    0 1px 0 rgba(255,255,255,.6),
    0 2px 1px rgba(255,255,255,.35),
    0 6px 14px rgba(15,24,40,.14);
  max-width:14ch;text-align:center;
}
.hero-h1 .gold-word{
  color:var(--gold-d);font-weight:900;
  text-shadow:0 1px 0 rgba(255,255,255,.5),0 4px 10px rgba(184,138,26,.30);
}
.hero-h1 em{
  font-family:var(--ff);font-weight:600;font-style:italic;
  letter-spacing:-.020em;
  /* inline-block + right padding so the italic slant on the final
     letter isn't clipped by background-clip:text (cut-off "s"). The
     bottom padding + roomier line-height keep descenders ("g" in
     "cravings") from being clipped by the same background-clip:text. */
  display:inline-block;padding-right:.12em;padding-bottom:.16em;line-height:1.16;
  /* shimmer · gold sweep across the word with a base navy color */
  background:linear-gradient(110deg,
    var(--tandoco-blue) 0%,
    var(--tandoco-blue) 35%,
    var(--gold) 48%,
    var(--gold-l) 52%,
    var(--tandoco-blue) 65%,
    var(--tandoco-blue) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:cravingsShimmer 3.6s ease-in-out infinite;
  text-shadow:none;
}
@keyframes cravingsShimmer{
  0%   {background-position:130% 0;}
  100% {background-position:-30% 0;}
}
@media (prefers-reduced-motion: reduce){.hero-h1 em{animation:none;}}
.hero-sub{
  font-size:15px;line-height:1.55;font-weight:600;font-style:normal;
  color:#000000;
  margin:0;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
  position:relative;z-index:1;
  max-width:38ch;text-align:center;
}
.hero-sub b{
  color:var(--tandoco-blue) !important;font-weight:800;
  text-shadow:0 1px 0 rgba(255,255,255,.5),0 3px 8px rgba(30,64,175,.20);
}
.hero-sub em{
  color:var(--gold-d) !important;font-style:italic;font-weight:700;
  text-shadow:0 1px 0 rgba(255,255,255,.5),0 3px 8px rgba(184,138,26,.20);
}

/* row of CTAs · primary fills the row, icon-only sits next to it */
.hero-ctas{
  display:flex;flex-direction:row;gap:10px;
  width:100%;margin:0 0 18px;
  position:relative;z-index:2;
}
.hero-ctas .btn{
  min-height:56px;font-size:15px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.hero-ctas .btn:not(.icon-only){flex:1;}
.hero-ctas .btn.icon-only{flex:0 0 56px;width:56px;padding:0;}
.hero-ctas .btn svg{width:20px;height:20px;}

/* pre-launch <-> checkout swap. Default to prelaunch so non-allowlisted
   visitors (everyone) never see a flash of "order now" they can't act on.
   A tiny inline JS at the bottom of the page reads settings/featureFlags
   and flips data-mode="checkout" for allowlisted ops + post-launch GA. */
[data-hero-ctas] > .hero-cta-checkout,
[data-hero-ctas] > .hero-cta-prelaunch{
  display:none;
  width:100%;gap:10px;
}
[data-hero-ctas][data-mode="checkout"]  > .hero-cta-checkout {display:flex;flex-wrap:wrap;align-items:center;}
[data-hero-ctas][data-mode="prelaunch"] > .hero-cta-prelaunch{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;}
[data-hero-ctas] > .hero-cta-prelaunch > .hero-pl-form{flex:5 1 280px;min-width:0;}
.hero-pl-form{
  flex:1;min-width:0;display:flex;align-items:stretch;gap:0;
  border-radius:999px;overflow:hidden;
  background:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(15,24,40,.10), 0 8px 24px -16px rgba(11,20,55,.30);
}
.hero-pl-input{
  flex:1;min-width:0;
  padding:0 14px 0 18px;
  border:0;outline:0;background:transparent;
  font:inherit;font-size:16px;color:var(--ink, #0B1437);
  min-height:56px;
}
.hero-pl-input::placeholder{color:rgba(11,20,55,.45);}
/* override the generic `.hero-ctas .btn:not(.icon-only){flex:1;}` rule
   (line ~965) AND `.d-home .btn{padding:14px 26px}` (line ~4177) — both
   have equal-or-greater specificity than a single-class selector, so
   we need !important here to keep the join button content-sized. */
.hero-pl-form .hero-pl-submit{
  flex:0 0 auto !important;
  min-height:56px;
  border-radius:0 999px 999px 0;
  padding:0 44px !important;
  white-space:nowrap;
}
.hero-pl-submit:disabled{opacity:.55;cursor:default;}
.hero-pl-msg{
  flex:1 0 100%;margin:0 2px;
  font-size:13px;line-height:1.4;color:rgba(15,24,40,.72);
}
.hero-pl-msg:empty{display:none;}
.hero-pl-msg:not(:empty){margin-top:6px;}
.hero-pl-msg.is-error  {color:#b1281e;}
.hero-pl-msg.is-success{color:#1f6b3a;font-weight:600;}
/* Secondary CTA · text-link "or peek at the menu →" sits under the
   primary email-capture row. Style matches a tertiary text-link so it
   reads as the lower-priority option without competing for visual
   weight with the gold/navy primary. */
/* Secondary CTA · same pill size as "join the list" but ghost/outlined
   so it reads as the lower-priority option without competing with the
   navy primary. Sits inline beside the email-capture pill on desktop;
   wraps to its own row on narrow widths via flex-wrap on the parent. */
.hero-pl-secondary{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:56px;padding:0 44px;
  border-radius:999px;
  background:transparent;
  color:var(--ink, #0B1437);
  font-size:15px;font-weight:600;letter-spacing:.01em;
  text-decoration:none;white-space:nowrap;
  box-shadow:inset 0 0 0 1.5px rgba(15,24,40,.18);
  transition:background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.hero-pl-secondary:hover{
  background:rgba(11,20,55,.04);
  box-shadow:inset 0 0 0 1.5px rgba(15,24,40,.32);
}
.hero-pl-secondary svg{width:18px;height:18px;flex-shrink:0;}

.hero-trust{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  position:relative;z-index:1;
  width:100%;margin:0;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.18);
  color:#fff;
}
.hero-trust .tr-lbl{color:#000 !important;}
.hero-trust .tr-lbl b{color:#000 !important;}
.hero-trust .stars{color:var(--gold-d) !important;}
.hero-trust .cdwn{color:#000 !important;}
.hero-trust .cdwn .sep{color:#000 !important;}
.hero-trust .tr-cell{display:flex;flex-direction:column;gap:2px;}
.hero-trust .tr-cell.right{align-items:flex-end;}
.hero-trust .stars-row{display:inline-flex;align-items:center;gap:6px;}
.hero-trust .g-mark{flex-shrink:0;width:14px;height:14px;}
.hero-trust .stars{color:var(--gold-d);font-weight:900;letter-spacing:1px;font-size:14px;}
.hero-trust .tr-lbl{font-size:9.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);}
.hero-trust .cdwn{font-style:italic;font-weight:800;font-size:18px;color:var(--ink);letter-spacing:-.014em;line-height:1;}
.hero-trust .cdwn .sep{color:var(--blue-d);font-style:normal;font-weight:700;margin:0 4px;}
/* ─── Right-cell alignment — TWO separate layers, both required ─────
   The countdown and the "order cutoff · thu 11:59pm" label need to
   end at the same x. There are TWO independent things going on:

   1. BOX-level alignment (handled by flex-end on .tr-cell.right):
      Each child span's outer right edge sits at the cell's right
      edge. Verified across desktop and mobile, multiple countdown
      values, both boxes end at the same x, gap 0.00px.

   2. TEXT-level alignment WITHIN the label box (handled by
      text-align: right on .tr-lbl):
      When the cell is narrow enough that "order cutoff · thu
      11:59pm" can't fit on one line — common on the mobile hero
      layout — the label wraps. Its box becomes as wide as the
      LONGEST wrapped line ("ORDER CUTOFF · THU"), and the shorter
      wrapped lines ("11:59PM") default to text-align: left INSIDE
      that box, which puts them at the LEFT edge of the box —
      visually 30–50px away from the right edge of the countdown.
      That's the misalignment Tommy reported in the May 17 screenshot.

      `text-align: right` makes every wrapped line hug the right
      edge of the box. Verified with a per-character Range probe at
      a forced-wrap width: all wrapped lines' rightmost characters
      sit at the same x as the countdown's right edge.

   Previously: PR #2011 added `margin-right: -.18em` here on the
   wrong theory that trailing letter-spacing left a phantom gap past
   the last character of the label. That pushed the box past the
   countdown by 1.7px. PR #2020 removed the margin (correct) but
   didn't add the text-align fix (still wrong on wrap). This PR
   addresses the remaining wrapped-line case. */
.hero-trust .tr-cell.right .tr-lbl{ text-align: right; }

/* ════════════════════════════════════════════════════════════════
   INFO CHIPS
   ════════════════════════════════════════════════════════════════ */
/* nav restored — uses the site's standard nav styles from /styles/nav.css */

/* Scrollbar matches the page bg so there's no white strip on the right
   when a full-bleed dark section (the kitchen card) is on screen.
   Webkit: thin scrollbar with a navy thumb on cream track.
   Firefox: same effect via scrollbar-color. */
html{
  scrollbar-color: rgba(11,20,55,.32) #ffffff;
  scrollbar-width: thin;
  background: #ffffff; /* page bg — pure white */
}
body{background: #ffffff;}
::-webkit-scrollbar{width:10px;height:10px;background:#ffffff;}
::-webkit-scrollbar-track{background:#ffffff;}
::-webkit-scrollbar-thumb{
  background:rgba(11,20,55,.32);
  border-radius:6px;
  border:2px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover{background:rgba(11,20,55,.50);}

/* chips hidden so the kitchen rises directly over the hero per the
   mobile-first mockup. Markup stays in place to bring back later. */
.s-chips{display:none !important;}
.chip{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--paper);border:1px solid rgba(11,20,55,.10);
  border-radius:14px;padding:13px 16px;
  box-shadow:0 1px 3px rgba(15,24,40,.04);
}
.chip .icn{width:30px;height:30px;border-radius:9px;background:var(--blue-xxl);color:var(--blue-d);display:grid;place-items:center;flex-shrink:0;}
.chip .icn.gold{background:var(--gold-xl);color:var(--gold-d);}
.chip .icn.mid{background:var(--blue-l);color:var(--blue-d);}
.chip .icn svg{width:15px;height:15px;}
.chip .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.chip .body .top{font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:-.010em;}
.chip .body .top em{font-weight:600;}
.chip .body .bot{font-size:10.5px;font-weight:700;color:var(--blue-d);letter-spacing:.02em;}
.chip .arrow{width:24px;height:24px;border-radius:99px;background:var(--blue-xxl);color:var(--blue-d);display:grid;place-items:center;flex-shrink:0;}
.chip .arrow svg{width:12px;height:12px;}

/* ════════════════════════════════════════════════════════════════
   WHO IT'S FOR — one photo, persona list below
   ════════════════════════════════════════════════════════════════ */
.s-who{padding:8px 12px 0;margin-top:18px;position:relative;overflow:hidden;}
.s-who::before{
  content:"everyone.";
  position:absolute;top:18px;right:-30px;z-index:0;
  font-style:italic;font-weight:800;font-size:140px;line-height:1;
  color:rgba(11,20,55,.06);letter-spacing:-.04em;pointer-events:none;
}
.who-head{padding:0 6px;margin-bottom:18px;position:relative;z-index:1;}
.who-head h2{font-weight:900;font-size:30px;line-height:1.02;letter-spacing:-.030em;color:var(--ink);margin-top:10px;}
.who-head h2 em{font-weight:600;color:var(--gold-d);font-style:italic;}
.who-head .sub{font-size:14px;line-height:1.5;color:var(--ink-soft);font-weight:500;margin-top:8px;}
.who-head .sub em{font-weight:600;}
/* section CTA — navy pill, centred under the wreath */
.s-who .who-cta{display:flex;width:fit-content;align-items:center;gap:8px;
  margin:6px auto 18px;padding:13px 26px;border-radius:99px;
  background:var(--navy-d);color:#fff;font-weight:800;font-size:15px;
  letter-spacing:-.01em;text-decoration:none;position:relative;z-index:1;
  box-shadow:0 16px 34px -18px rgba(11,20,55,.55);transition:transform .15s ease;}
.s-who .who-cta svg{width:16px;height:16px;}
.s-who .who-cta:active{transform:translateY(1px);}

/* mobile: stack only, sidebar hidden — the rotating wreath is the
   whole module on a phone. Desktop reveals the sidebar via the
   ≥880px media query below. */
.who-grid{display:block;}
.who-side{display:none;}

/* INTERACTIVE WREATH — the rainbow circle is now the persona map.
   8 invisible hotspots are positioned over the wreath at 45° intervals.
   Tap a container → the .who-center fills with that persona's story.
   The wreath PNG renders as an <img> with mix-blend-mode:multiply so
   the white background blends with EVERYTHING behind (page bg + ghost
   word + any element). background-blend-mode wouldn't do this — it
   only blends within the same background property. */
.who-photo{
  position:relative;
  aspect-ratio:1/1;
  margin-bottom:16px;
}
.who-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  mix-blend-mode:multiply;
  pointer-events:none; /* let taps reach the spot buttons */
  z-index:1;
  /* Force a perfect circular outline. The original wreath PNG has
     slightly uneven container positions; clipping to a perfect
     circle crops the irregularities uniformly so the wreath reads
     as a clean ring. Adjust the radius if too much/little gets
     trimmed (50% = no crop, 48% = light trim, 45% = heavier). */
  clip-path:circle(48% at 50% 50%);
  -webkit-clip-path:circle(48% at 50% 50%);
}

/* dashed gold guide ring removed */
.who-photo::after{content:none;}

/* the wreath auto-rotates through 8 positions, holding on each
   color for 3.2s then rotating 0.8s to the next. JS keeps the
   center persona copy in sync with the wreath position. */
.who-img{
  transition:transform .8s cubic-bezier(.4,.0,.2,1);
}

/* "now showing" pill removed — wreath cycles silently without a tag */
.who-pointer{display:none !important;}
.who-pointer .lbl{
  display:inline-block;
  font-family:var(--ff);font-size:9px;font-weight:900;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-d);background:var(--paper);
  padding:5px 11px;border-radius:99px;
  border:1.5px solid var(--gold-d);
  white-space:nowrap;
}
.who-pointer .arrow{display:none;}

/* gold glow at the top of the wreath — visible but warm, doesn't
   darken the containers underneath. */
.who-spotlight{
  --halo:#E0B341;
  position:absolute;top:-14%;left:46%;
  transform:translateX(-50%);
  width:64%;height:64%;
  background:radial-gradient(circle at 50% 55%,
    color-mix(in srgb, var(--halo) 38%, transparent) 0%,
    color-mix(in srgb, var(--halo) 22%, transparent) 24%,
    color-mix(in srgb, var(--halo) 11%, transparent) 46%,
    color-mix(in srgb, var(--halo) 4%, transparent) 68%,
    transparent 90%);
  border-radius:50%;
  filter:blur(8px);
  z-index:2;pointer-events:none;
  animation:tcSpotPulse 2.6s ease-in-out infinite;
  transition:background .35s ease;
}
@keyframes tcSpotPulse{
  0%,100%{opacity:.85;}
  50%{opacity:1;}
}
@media (prefers-reduced-motion: reduce){
  .who-img{transition:none;}
  .who-spotlight{animation:none;}
}

/* center overlay · "now showing" pill + persona name + tag.
   Content swaps via JS every 4s in sync with the wreath rotation.
   Fade transition on .swap class for graceful copy changes. */
.who-center{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  /* The inner empty circle of the wreath is ~42% of the photo's
     width (containers occupy the outer 29% on each side). Cap the
     center copy to that — keeps it from spilling into the
     containers. */
  width:38%;max-width:200px;
  text-align:center;pointer-events:none;
  z-index:3;
}
.who-center .hint{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--ff);font-size:8px;font-weight:900;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-d);background:#ffffff;
  padding:4px 9px;border-radius:99px;
  border:1.5px solid var(--gold-d);
  margin-bottom:8px;
}
.who-center .hint svg{width:11px;height:11px;color:var(--gold-d);}
.who-center .hint .ldot{
  width:6px;height:6px;border-radius:50%;
  background:var(--gold-d);
  animation:tcLiveDot 1.6s ease-in-out infinite;
}
@keyframes tcLiveDot{
  0%,100%{opacity:.35;transform:scale(.9);}
  50%{opacity:1;transform:scale(1.1);}
}
@media (prefers-reduced-motion: reduce){.who-center .hint .ldot{animation:none;}}

.who-center .h{
  display:block;
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:18px;letter-spacing:-.018em;color:var(--ink);
  line-height:1.04;
  transition:opacity .35s ease, transform .35s ease, color .35s ease;
}
.who-center .h em{
  font-family:var(--ff);font-weight:600;font-style:italic;
  color:var(--blue-d);letter-spacing:-.014em;
}
.who-center .tg{
  display:block;
  margin-top:6px;
  font-family:var(--ff);font-size:11px;font-weight:600;
  color:var(--ink-soft);line-height:1.35;letter-spacing:-.002em;
  transition:opacity .35s ease, transform .35s ease;
}
.who-center .tg em{color:var(--blue-d);font-style:italic;font-weight:700;}
/* swap state — text fades + shifts up briefly during transition */
.who-center.swapping .h,
.who-center.swapping .tg{opacity:0;transform:translateY(-4px);}
.who-center.active .hint{
  border-style:solid;border-color:var(--ink);color:var(--ink);
  animation:none;
}

/* persona list */
.who-list{
  background:var(--paper);
  border:1px solid rgba(15,24,40,.06);
  border-radius:20px;
  padding:6px 0;
  box-shadow:0 1px 3px rgba(15,24,40,.04);
}
.who-row{
  display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:12px;
  padding:13px 18px;
}
.who-row + .who-row{border-top:1px solid rgba(15,24,40,.06);}
.who-row .icn{
  width:36px;height:36px;border-radius:50%;
  background:var(--blue-xxl);color:var(--blue-d);
  display:grid;place-items:center;
}
.who-row .icn.gold{background:var(--gold-xl);color:var(--gold-d);}
.who-row .icn.mid{background:var(--blue-l);color:var(--blue-d);}
.who-row .icn.cream{background:var(--cream-d);color:var(--ink);}
.who-row .icn svg{width:18px;height:18px;}
.who-row .body{display:flex;flex-direction:column;gap:1px;min-width:0;}
.who-row .nm{font-size:14px;font-weight:900;color:var(--ink);letter-spacing:-.018em;line-height:1.15;}
.who-row .nm em{font-weight:600;}
.who-row .tg{font-size:12px;color:var(--ink-soft);font-weight:500;line-height:1.3;}
.who-row .tag{
  font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-d);background:var(--blue-xxl);
  padding:3px 8px;border-radius:99px;white-space:nowrap;
}

/* ════════════════════════════════════════════════════════════════
   BROWSE THE KITCHEN — circular discs with REAL menu item photos
   ════════════════════════════════════════════════════════════════ */
/* MENU section — navy panel that rises up to cover the lower sliver
   of the hero, à la gruns/usnacks. Rounded top corners + negative
   top margin overlap the previous section; the navy bg gives a clear
   "next chapter" transition moment. All inner text restyled for the
   dark background. */
/* kitchen card · rounded at both ends · sticky for the slide-up
   chain · GRADIENT MESH backdrop (cobalt + violet + pink + cyan)
   for a sleek Gen Z modern vibe (Spotify Wrapped / Linear / Apple
   keynote stage). */
.s-cats{
  background:var(--cream-d);
  color:var(--ink);
  border-radius:28px;
  /* 2026-05-20 · overlap the hero by ~70px · tight enough to still
     show "browse the kitchen" title + kicker, but loose enough to
     leave a ~20px sliver of the food image visible underneath the
     kitchen card's rounded top edge. */
  margin:-70px 0 0 !important;
  max-width:none !important;
  /* 2026-05-20 · padding-bottom bumped 72 → 130 so the order
     countdown sits well above the rising .s-hw card (which
     overlaps by 70px via its negative margin-top). Net visible
     gap between countdown and how-it-works ≈ 60px. */
  padding:18px 0 130px;
  /* 2026-05-20 · re-enabled sticky so .s-hw can SLIDE UP OVER the
     kitchen the same way the kitchen slides over the hero. The
     touch-jam bug that originally killed sticky lived on .cats-rail
     (legacy -webkit-overflow-scrolling + touch-action:pan-x +
     scroll-snap-type) — those are stripped in PR #2195, so this
     sticky should now coexist with native page scrolling. */
  position:sticky;top:0;z-index:2;
  box-shadow:
    0 -14px 28px -14px rgba(0,0,0,.18),
    0 14px 28px -14px rgba(0,0,0,.18);
}

/* trust chips hidden — never used in this layout (chips section
   has been restored to its own section between hero and kitchen). */
.cats-chips{display:none !important;}
.cats-chips .chip{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  text-decoration:none;color:var(--paper);
  transition:background .15s ease, transform .15s ease;
}
.cats-chips .chip:hover{background:rgba(255,255,255,.10);transform:translateY(-1px);}
.cats-chips .chip .icn{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.10) !important;
}
.cats-chips .chip .icn.gold{background:var(--gold-d) !important;color:var(--ink);}
.cats-chips .chip .icn.mid{background:rgba(255,255,255,.12) !important;color:var(--gold-l);}
.cats-chips .chip .icn svg{width:16px;height:16px;}
.cats-chips .chip .body{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;}
.cats-chips .chip .top{
  font-size:13px;font-weight:800;color:var(--paper);
  letter-spacing:-.005em;line-height:1.2;
}
.cats-chips .chip .top em{color:var(--gold-l);font-style:italic;font-weight:700;}
.cats-chips .chip .bot{
  font-size:11px;font-weight:600;color:rgba(255,255,255,.6);
  letter-spacing:-.003em;line-height:1.2;
}
/* arrow chevron — override the base .chip .arrow light-blue circle.
   Now just a plain chevron color, no circular background. */
.cats-chips .chip .arrow{
  flex-shrink:0;
  width:auto;height:auto;
  background:none !important;
  border-radius:0;
  color:rgba(255,255,255,.5);
  display:flex;align-items:center;
}
.cats-chips .chip .arrow svg{width:14px;height:14px;}

@media (min-width: 880px){
  .cats-chips{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:14px;padding:0 32px 28px;margin-bottom:32px;
  }
}
.s-cats .head{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:0 18px;margin-bottom:8px;text-align:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.s-cats .head:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px;}
.s-cats .head > div{text-align:center;}
.s-cats .head .cats-sub{margin-left:auto;margin-right:auto;}
.s-cats .eye{color:var(--blue-d);}
.s-cats .eye::before{background:var(--blue-d);}
.s-cats h2{font-weight:900;font-size:26px;line-height:1.05;letter-spacing:-.026em;color:var(--navy-d);}
.s-cats h2 em{font-weight:600;color:var(--tandoco-blue);font-style:italic;}
.s-cats .cats-sub{
  margin-top:8px;font-size:13px;line-height:1.5;color:var(--ink-soft);
  font-weight:500;max-width:520px;letter-spacing:-.005em;
}
.s-cats .cats-sub em{font-style:italic;font-weight:600;color:var(--blue-d);}
.s-cats .see{font-size:11.5px;font-weight:700;color:var(--blue-d);text-decoration:underline;text-underline-offset:3px;}

/* "see full menu" CTA · sits below the food rail inside the kitchen */
.cats-cta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:8px 22px 0;padding:14px 24px;min-height:52px;
  background:var(--tandoco-blue);color:#ffffff;
  border:0;border-radius:14px;
  font-family:var(--ff);font-size:15px;font-weight:800;
  letter-spacing:-.005em;text-decoration:none;
  box-shadow:0 8px 22px -8px rgba(30,42,120,.50);
  transition:background .15s ease, transform .15s ease;
}
.cats-cta:hover{background:var(--tandoco-blue-l);transform:translateY(-1px);}
.cats-cta svg{color:#ffffff;stroke:#ffffff;}
.cats-cta svg{width:18px;height:18px;}
@media (min-width: 880px){
  .cats-cta{
    margin-left:auto;margin-right:auto;
    min-width:320px;max-width:480px;
  }
}

/* countdown timer sitting below the "see full menu" CTA */
.cats-countdown{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:18px 22px 0;
  font-family:var(--ff);color:var(--ink-soft);
  font-size:13px;font-weight:600;letter-spacing:-.002em;
}
.cats-countdown svg{flex-shrink:0;width:14px;height:14px;color:var(--blue-d);}
.cats-countdown .cdwn{
  font-style:italic;font-weight:800;font-size:16px;
  color:var(--navy-d);letter-spacing:-.014em;line-height:1;
}
.cats-countdown .cdwn .sep{color:var(--blue-d);font-style:normal;font-weight:700;margin:0 2px;}
.cats-countdown .lbl{color:var(--ink-soft);}
.cats-countdown .lbl b{color:var(--navy-d);font-weight:800;}
.cats-rail{
  display:flex;gap:12px;
  overflow-x:auto;overflow-y:visible;
  /* 2026-05-20 · iOS Safari touch fix · stripped three things that
   * were jamming vertical page scroll when a finger touched the
   * horizontal rail:
   *   · -webkit-overflow-scrolling:touch (legacy iOS scroll prop
   *     known to lock to one axis aggressively)
   *   · touch-action:pan-x (was supposed to bubble vertical pans
   *     up; in practice iOS still locked horizontal on first move)
   *   · scroll-snap-type:x mandatory (mandatory snap was eating
   *     ambiguous vertical-leaning touches before they bubbled)
   * Default touch-action + no snap = both axes negotiate naturally,
   * with overscroll-behavior:contain keeping the rail self-contained. */
  overscroll-behavior:contain;
  padding:14px 18px 14px 30px;margin:0 -18px;scrollbar-width:none;
  scroll-padding-inline-start:30px;
}
.cats-rail::-webkit-scrollbar{display:none;}
.cat-tile{
  flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  width:96px;
  position:relative;
  -webkit-user-drag:none;
}
.cat-tile img{-webkit-user-drag:none;pointer-events:none;}
.cat-tile .pick{
  position:absolute;top:-2px;right:-6px;z-index:3;
  font-size:8.5px;font-weight:900;letter-spacing:.10em;text-transform:uppercase;
  background:#1E3A8A;color:#fff;
  padding:3px 7px;border-radius:99px;
  box-shadow:0 4px 10px -3px rgba(15,24,40,.35);
  white-space:nowrap;
}
.cat-tile .pick.new{background:var(--gold);color:var(--ink);}
.cat-tile .disc{
  width:96px;height:96px;border-radius:50%;
  position:relative;overflow:hidden;
  background:var(--paper);
  box-shadow:0 6px 14px -8px rgba(15,24,40,.25);
  transition:transform .25s ease;
}
.cat-tile:active .disc{transform:scale(.96);}
.cat-tile .disc img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  /* zoom in slightly so the plate fills the disc and the surrounding
     background of the source photo gets cropped away. tiles 3, 4, 5
     have tighter source crops already so they don't get the extra zoom. */
  transform:scale(1.18);
}
.cat-tile:nth-child(3) .disc img,
.cat-tile:nth-child(4) .disc img,
.cat-tile:nth-child(5) .disc img{
  transform:scale(1.0);
}
.cat-tile .nm{
  font-size:12.5px;font-weight:800;color:var(--navy-d);
  letter-spacing:-.005em;text-align:center;line-height:1.2;
  min-height:30px;width:96px;word-break:break-word;
}
.cat-tile .nm em{font-weight:600;display:block;color:var(--blue-d);font-style:italic;}

/* ════════════════════════════════════════════════════════════════
   PICKUP + DELIVERY MAP
   ════════════════════════════════════════════════════════════════ */
/* ──────────────────────────────────────────────────────────────
   .s-map · interactive map module
   Stylized basemap (cartodb voyager) + 3 gold concentric delivery
   rings (5/10/15 mi) + gold kitchen pin + 8 numbered neighborhood
   markers with drive-time popups + click-anywhere drive-time +
   ZIP-code checker. Leaflet css/js loaded at end of <body>.
   ────────────────────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════
   WHOLE INGREDIENTS — dark contrast moment
   Broccoli explosion image fills the navy backdrop with a gentle
   continuous float. Fades in via IntersectionObserver when scrolled
   into view, fades back out when scrolled past. Black background of
   the source PNG drops out via mix-blend-mode:screen.
   ════════════════════════════════════════════════════════════════ */
/* ═══ WHOLE INGREDIENTS COMMITMENT · video hero (mobile-first) ═══ */
.s-whole{
  position:relative;
  margin:24px 12px 0;
  padding:0;
  background:var(--cream);
  color:var(--ink);
  border-radius:24px;
  overflow:hidden;
  isolation:isolate;
  min-height:0;
}
/* legacy whole-bg layer suppressed; ::before is now the semicircle bleed */
.whole-bg{display:none !important;}

/* video hero · 16:9 with text overlaid at the bottom */
.whole-video-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#0B1437;
}
.whole-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  /* pointer-events off so taps can't pause/reveal native iOS controls;
     the video runs as pure background ambience. */
  pointer-events:none;
  /* zoom anchored to left edge so the gemini watermark in the lower-right
     gets pushed out of the visible frame. tune the scale if more/less
     crop is needed. */
  transform:scale(1.10);
  transform-origin:left center;
}
.whole-video-grad{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(6,11,37,0)  0%,
    rgba(6,11,37,0)  46%,
    rgba(6,11,37,.55) 80%,
    rgba(6,11,37,.85) 100%);
}
.whole-video-overlay{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:18px 22px 22px;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
}
.whole-video-overlay .whole-eye{
  display:inline-block;
  font-family:var(--ff);font-size:10px;font-weight:900;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--navy-d);background:var(--gold-l);
  padding:6px 12px;border-radius:99px;
}
.whole-video-overlay .whole-h{
  font-family:var(--ff);font-weight:900;
  font-size:30px;line-height:1.05;letter-spacing:-.028em;
  color:#fff;margin:0;
  text-shadow:0 2px 6px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.45);
  max-width:18ch;
}
.whole-video-overlay .whole-h em{
  font-style:italic;font-weight:600;color:var(--gold-l);
}

/* body · sub + yes/no list */
.whole-body{
  padding:22px 22px 26px;
  background:transparent;
}
/* food photo replaces the yes/no list as the bottom half of the section,
   with the delivery van overlaid small in the corner */
.s-whole .whole-photo-wrap{ position:relative; margin:6px 0 0; }
.s-whole .whole-photo{
  display:block;width:100%;height:auto;margin:0;
  border-radius:18px;box-shadow:0 18px 38px -20px rgba(0,0,0,.6);
}
.s-whole .whole-van{
  position:absolute; z-index:2; width:82%; height:auto;
  right:-8%; bottom:-15%; pointer-events:none;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.45));
}
/* navy-d section · the intro copy is white with GOLD accents. NOTE: this is
   scoped to .whole-sub (not all of .whole-body *) on purpose — the delivery
   module below sits on its own white cards and must keep its dark text. */
.s-whole .whole-sub,
.s-whole .whole-sub *{color:#ffffff;}
.s-whole .whole-sub{color:rgba(255,255,255,.92);}
.s-whole .whole-sub b{color:var(--gold-l) !important;font-weight:900;}
.s-whole .whole-sub em{color:var(--gold-l) !important;font-style:italic;font-weight:700;}
.s-whole h2,
.s-whole h3{color:#ffffff !important;}
.s-whole h2 em,
.s-whole h3 em{color:var(--gold-l) !important;}
.s-whole .eye{color:var(--gold-l) !important;background:transparent !important;border:0 !important;padding:0 !important;}
.s-whole .eye::before{background:var(--gold) !important;}
.whole-sub{
  font-size:15px;line-height:1.55;
  color:var(--ink);font-weight:500;
  margin:0 0 18px;
}
.whole-sub em{
  color:var(--gold-d);font-style:italic;font-weight:700;
}

.whole-list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:8px;
}
.whole-list li{
  display:flex;align-items:center;gap:10px;
  padding:13px 16px;
  background:#fff;border-radius:12px;
  border:1px solid rgba(15,24,40,.08);
  font-family:var(--ff);font-size:14.5px;line-height:1.35;
  color:var(--navy-d);font-weight:500;
  box-shadow:0 4px 10px -6px rgba(15,24,40,.12);
}
.whole-list li strong{
  font-family:var(--ff);font-style:italic;font-weight:800;
  font-size:12.5px;
  padding:3px 9px;border-radius:99px;
  letter-spacing:.10em;text-transform:uppercase;
  flex-shrink:0;line-height:1;
}
.whole-list li.no strong{background:var(--navy-d);color:#fff;}
.whole-list li.yes strong{background:var(--gold-l);color:var(--navy-d);}

/* desktop · wider card, side-by-side video + text, 2-col list */
@media (min-width: 880px){
  .s-whole{margin:36px auto 0;max-width:1140px;border-radius:32px;}
  .whole-video-wrap{aspect-ratio:16/9;}
  .whole-video-overlay{padding:36px 40px 40px;gap:14px;}
  .whole-video-overlay .whole-h{font-size:54px;}
  .whole-body{padding:36px 44px 40px;}
  .whole-sub{font-size:17px;max-width:62ch;}
  .whole-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
}

/* PHONE CARD — Resy/Apple-Maps-style mobile location card.
   Hero photo (Mpls skyline) with floating OPEN status pill,
   serif address block, three tall tappable action rows
   (directions / text / zip), bottom delivery meta line.
   Mobile-first: card fills viewport width; desktop: max-width
   centered with breathing room. */
.s-map{margin:22px 12px 0;}
.map-head{margin-bottom:12px;padding:0 6px;}
.map-head h2{font-weight:900;font-size:28px;line-height:1.02;letter-spacing:-.028em;color:var(--ink);margin-top:7px;}
.map-head h2 em{font-weight:600;color:var(--tandoco-blue);font-style:italic;}
.map-head .sub{font-size:14px;line-height:1.5;color:var(--ink-soft);font-weight:500;margin-top:6px;}
.map-head .sub em{color:var(--blue-d);font-style:italic;font-weight:600;}

/* the card · cream paper, rounded, soft shadow like a Resy listing */
.phone-card{
  position:relative;
  background:var(--tandoco-blue);
  border-radius:24px;
  overflow:hidden;
  box-shadow:
    0 1px 0 rgba(15,24,40,.04),
    0 18px 38px -22px rgba(15,24,40,.30),
    0 4px 10px -4px rgba(15,24,40,.10);
  border:1px solid rgba(15,24,40,.06);
}

/* hero photo — Minneapolis skyline · gradient overlay carries the
   floating status pill at top + address block at bottom */
.pc-hero{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:linear-gradient(180deg,var(--blue-xl),var(--cream-d));
}
.pc-hero img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 38%;
  display:block;
}
/* dark gradient at the bottom of the photo so the white address sits
   readable; subtle gradient at top so the OPEN pill reads on any sky */
.pc-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(11,20,55,.35) 0%,rgba(11,20,55,0) 28%,rgba(11,20,55,0) 50%,rgba(11,20,55,.72) 100%);
}

/* floating status pill · live indicator dot pulses */
.pc-status{
  position:absolute;top:14px;left:14px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(11,20,55,.86);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  color:var(--paper);
  font-family:var(--ff);font-size:11px;font-weight:900;
  letter-spacing:.18em;text-transform:uppercase;
  padding:8px 13px;border-radius:99px;
  box-shadow:0 6px 16px -8px rgba(15,24,40,.45);
}
.pc-status .dot{
  width:7px;height:7px;border-radius:50%;
  background:#5ed68a;
  box-shadow:0 0 0 0 rgba(94,214,138,.7);
  animation:tcPulse 2s ease-out infinite;
}
.pc-status.closed{background:rgba(15,24,40,.72);}
.pc-status.closed .dot{background:var(--gold);animation:none;}
@keyframes tcPulse{
  0%{box-shadow:0 0 0 0 rgba(94,214,138,.7);}
  70%{box-shadow:0 0 0 8px rgba(94,214,138,0);}
  100%{box-shadow:0 0 0 0 rgba(94,214,138,0);}
}
@media (prefers-reduced-motion: reduce){.pc-status .dot{animation:none;}}

/* address block sits over the bottom of the hero, white text */
.pc-addr-hero{
  position:absolute;left:18px;right:18px;bottom:16px;z-index:2;
  color:var(--paper);
}
.pc-addr-hero .nm{
  font-family:var(--serif);font-style:normal;font-weight:400;
  font-size:42px;letter-spacing:-.012em;line-height:.95;
  margin-bottom:6px;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}
.pc-addr-hero .meta{
  font-family:var(--ff);font-size:13px;font-weight:700;
  letter-spacing:.01em;color:rgba(255,255,255,.92);
  line-height:1.35;
}
.pc-addr-hero .meta strong{font-weight:900;color:#fff;}
.pc-addr-hero .meta em{color:var(--gold-l);font-style:italic;font-weight:700;}
.pc-addr-hero .meta .dot-sep{display:inline-block;margin:0 6px;opacity:.5;}

/* action rows · stacked tappable rows below the photo */
.pc-actions{display:flex;flex-direction:column;gap:8px;padding:8px;}
/* The rigid height:64px + max-height:64px combo plus the 38px-tall
   icon vs the 36px inner content area was making the two-line text
   block (.h + .s) stack toward the top of the button — visually
   uncentered. Switched to min-height + symmetric padding so the
   content centers honestly, plus explicit justify-content:center
   on .txt so the h+s pair always sits in the vertical middle of
   its column. */
.pc-action{
  display:flex;align-items:center;gap:14px;
  padding:12px 16px;min-height:64px;
  background:var(--paper);border:0;width:100%;
  text-align:left;cursor:pointer;color:var(--ink);
  text-decoration:none;
  border-radius:14px;
  transition:background .15s ease;
  font-family:var(--ff);
  overflow:hidden;
}
.pc-action:hover,.pc-action:focus-visible{background:var(--cream);outline:none;}
.pc-action .ic{
  flex-shrink:0;width:38px;height:38px;border-radius:50%;
  background:var(--blue-xxl);color:var(--blue-d);
  display:grid;place-items:center;
  align-self:center;
}
.pc-action .ic svg{width:18px;height:18px;}
.pc-action.gold .ic{background:var(--gold-xl);color:var(--gold-d);}
.pc-action.blush .ic{background:var(--blue-xxl);color:var(--blue-d);}
.pc-action .txt{
  flex:1;min-width:0;
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  align-self:center;
}
.pc-action .h{
  font-size:15px;font-weight:800;color:var(--ink);
  letter-spacing:-.005em;line-height:1.2;
}
.pc-action .h em{font-weight:600;color:var(--blue-d);font-style:italic;}
.pc-action .s{
  font-size:12.5px;font-weight:600;color:var(--ink-soft);
  letter-spacing:-.002em;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pc-action .chev{
  flex-shrink:0;width:18px;height:18px;color:var(--ink-mute);
  align-self:center;
  transition:transform .2s ease, color .15s ease;
}
.pc-action:hover .chev,.pc-action:focus-visible .chev{color:var(--ink);transform:translateX(2px);}
.pc-action[aria-expanded="true"] .chev{transform:rotate(90deg);}

/* expandable zip-check panel — slides down inside the card */
.pc-zip-panel{
  display:none;
  padding:14px 18px 18px;
  background:#ffffff;
  border-top:1px solid rgba(15,24,40,.06);
}
.pc-zip-panel.open{display:block;}
.pc-zip-form{
  display:flex;align-items:stretch;gap:8px;width:100%;
}
.pc-zip-form input{
  flex:1;min-width:0;
  font-family:var(--ff);font-size:16px;font-weight:700;
  color:var(--ink);letter-spacing:.06em;
  background:var(--paper);
  border:1.5px solid rgba(15,24,40,.10);border-radius:12px;
  padding:12px 14px;outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.pc-zip-form input::placeholder{color:var(--ink-mute);font-weight:500;letter-spacing:.02em;}
.pc-zip-form input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(11,20,55,.15);}
.pc-zip-form button{
  flex-shrink:0;
  font-family:var(--ff);font-size:13px;font-weight:900;
  letter-spacing:.16em;text-transform:uppercase;color:var(--paper);
  background:var(--ink);border:0;border-radius:12px;
  padding:0 18px;min-width:88px;cursor:pointer;
  transition:background .15s ease;
}
.pc-zip-form button:hover{background:var(--blue-d);}
.pc-zip-result{
  display:none;margin-top:12px;align-items:flex-start;gap:10px;
  padding:11px 13px;border-radius:12px;
  font-family:var(--ff);font-size:13px;font-weight:600;
  line-height:1.4;color:var(--ink);
}
.pc-zip-result.show{display:flex;}
.pc-zip-result .rdot{
  flex-shrink:0;width:9px;height:9px;border-radius:50%;margin-top:5px;
}
.pc-zip-result.ok{background:#E6F6EC;}
.pc-zip-result.ok .rdot{background:#3FA060;box-shadow:0 0 0 4px rgba(63,160,96,.18);}
.pc-zip-result.ok strong{color:#1F7A40;font-weight:900;}
.pc-zip-result.warn{background:var(--gold-xl);}
.pc-zip-result.warn .rdot{background:var(--gold-d);box-shadow:0 0 0 4px rgba(184,138,26,.18);}
.pc-zip-result.warn strong{color:var(--gold-d);font-weight:900;}
.pc-zip-result.no{background:#FBEAEA;}
.pc-zip-result.no .rdot{background:#C5443F;box-shadow:0 0 0 4px rgba(197,68,63,.18);}
.pc-zip-result.no strong{color:#9A2A26;font-weight:900;}

/* ── delivery (mobile v2) · food + van visual + prominent zip checker ── */
/* tighter stack — the facts now live ON the video, so the section
   condenses to: video(+facts) · zip check · CTAs. */
.s-whole .dv-m{ padding:2px 16px 10px; display:flex; flex-direction:column; gap:12px; }
/* stage goes full-bleed to the blue card edges (breaks out of the .dv-m
   16px + .s-map 22px = 38px padding each side); the video fills it and
   the facts overlay its bottom. */
/* stage matches the zip-checker width below it (no longer full-bleed) so
   the video + the checker line up as a clean, skinnier stack. */
.s-whole .dv-m-stage{ position:relative; margin:2px 0 0; }
.s-whole .dv-m-video{ display:block; width:100%;
  aspect-ratio:1026/720; object-fit:cover; border-radius:16px; background:#0b1437; }
/* 3 frosted badges sitting on the bottom edge of the video */
.s-whole .dv-m-facts{ position:absolute; left:10px; right:10px; bottom:11px; z-index:2;
  display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.s-whole .dv-m-fact{ background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.55); border-radius:12px;
  padding:7px 3px; text-align:center; box-shadow:0 8px 20px -10px rgba(11,20,55,.55); }
.s-whole .dv-m-fact strong{ display:block; white-space:nowrap; font-family:var(--ff); font-weight:900; font-size:12px;
  line-height:1; color:var(--navy); letter-spacing:-.02em; }
.s-whole .dv-m-fact span{ display:block; margin-top:3px; font-size:9.5px; font-weight:700; color:var(--ink-mute); }
.s-whole .dv-m-check{ background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),rgba(8,12,34,.66); border:1px solid rgba(242,208,121,.24); border-radius:18px;
  padding:15px 16px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.s-whole .dv-m-q{ margin:0 0 10px; font-family:var(--ff); font-weight:900;
  font-size:18px; line-height:1.2; color:var(--ink); }
.s-whole .dv-m-q em{ font-style:italic; color:var(--blue-d); }
.s-whole .dv-m-check .pc-zip-form{ display:flex; gap:9px; }
.s-whole .dv-m-check .pc-zip-result{ margin-top:10px; }
.s-whole .dv-m-ctas{ display:flex; gap:10px; }
.s-whole .dv-m-cta{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:14px; border-radius:14px; font-family:var(--ff); font-weight:800; font-size:14px;
  text-decoration:none; }
.s-whole .dv-m-cta svg{ width:17px; height:17px; }
.s-whole .dv-m-cta.primary{ background:linear-gradient(180deg,var(--gold-l) 0%,var(--gold-d) 100%); color:#2a1f04; box-shadow:0 14px 26px -16px rgba(224,179,65,.5); }
.s-whole .dv-m-cta.ghost{ background:rgba(8,12,34,.55); color:#fff; border:1.5px solid rgba(255,255,255,.26); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
/* delivery module now lives INSIDE the dark whole-ingredients card. The
   surrounding .whole-body already supplies side padding, so zero the
   module's own horizontal padding and give it a little breathing room
   above. The white cards (zip checker, fact badges, ghost button) pop
   nicely against the navy backdrop. */
.s-whole .dv-m{ padding:0; margin-top:16px; }
.s-whole .dv-m-q{ color:#fff; }
.s-whole .dv-m-q em{ color:var(--gold-l); }
/* delivery tool · dissolved into the dark surface — frosted field + gold
   "check" so the zip checker reads as part of the section, not a white box */
.s-whole .dv-m-check .pc-zip-form input{ background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.16); color:#fff; }
.s-whole .dv-m-check .pc-zip-form input::placeholder{ color:rgba(255,255,255,.45); }
.s-whole .dv-m-check .pc-zip-form input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(224,179,65,.18); }
.s-whole .dv-m-check .pc-zip-form button{ background:linear-gradient(180deg,var(--gold-l) 0%,var(--gold-d) 100%); color:#2a1f04; }
.s-whole .dv-m-check .pc-zip-form button:hover{ background:linear-gradient(180deg,var(--gold-l) 0%,var(--gold-d) 100%); filter:brightness(1.05); }
/* zip result · dark-themed feedback chips so they stay on-surface */
.s-whole .dv-m-check .pc-zip-result{ color:rgba(255,255,255,.88); border:1px solid transparent; }
.s-whole .dv-m-check .pc-zip-result.ok{ background:rgba(63,160,96,.16); border-color:rgba(63,160,96,.38); }
.s-whole .dv-m-check .pc-zip-result.ok strong{ color:#86e2a6; }
.s-whole .dv-m-check .pc-zip-result.warn{ background:rgba(224,179,65,.16); border-color:rgba(224,179,65,.42); }
.s-whole .dv-m-check .pc-zip-result.warn strong{ color:var(--gold-l); }
.s-whole .dv-m-check .pc-zip-result.no{ background:rgba(197,68,63,.16); border-color:rgba(197,68,63,.42); }
.s-whole .dv-m-check .pc-zip-result.no strong{ color:#f1a6a2; }

/* footer meta strip · delivery details */
.pc-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:12px 14px;
  background:#ffffff;
  border-top:1px solid rgba(15,24,40,.06);
  font-family:var(--ff);font-size:11.5px;font-weight:700;
  color:var(--ink-soft);letter-spacing:-.002em;
  white-space:nowrap;
}
.pc-foot .item{display:flex;align-items:center;gap:6px;white-space:nowrap;}
.pc-foot .item svg{flex-shrink:0;width:13px;height:13px;color:var(--gold-d);}
.pc-foot strong{color:var(--ink);font-weight:900;}

/* desktop sidebar · editorial column next to the card (D layout).
   Mobile: card is the whole module, sidebar is hidden — the card
   already gives every action a user needs on a phone. */
.pc-row{display:block;}
.pc-side{display:none;}

@media (min-width: 640px){
  .pc-hero{aspect-ratio:16/9;}
  .pc-addr-hero .nm{font-size:46px;}
  .pc-addr-hero .meta{font-size:14px;}
}

@media (min-width: 880px){
  .pc-row{
    display:grid;grid-template-columns:540px 1fr;
    gap:56px;align-items:start;
  }
  .phone-card{margin:0;}

  .pc-side{display:block;padding-top:6px;}
  .pc-side .eye{color:var(--gold-d);}
  .pc-side .h{
    font-family:var(--ff);
    font-weight:900;font-size:34px;line-height:1.02;
    letter-spacing:-.024em;color:var(--ink);
    margin:10px 0 14px;
  }
  .pc-side .h em{
    font-weight:600;font-style:italic;color:var(--blue-d);
    letter-spacing:-.014em;
  }
  .pc-side .lede{
    font-family:var(--serif);font-style:italic;font-weight:400;
    font-size:22px;line-height:1.28;letter-spacing:-.012em;
    color:var(--ink);
    margin-bottom:26px;
  }
  .pc-side .lede em{
    font-family:var(--ff);font-weight:600;font-style:italic;
    color:var(--blue-d);letter-spacing:-.014em;
  }

  .pc-side hr{
    height:0;border:0;border-top:1.5px dashed var(--gold-d);
    opacity:.5;margin:0 0 22px;
  }

  .pc-side .rail-lbl{
    display:inline-block;
    font-family:var(--ff);font-size:10.5px;font-weight:900;
    letter-spacing:.26em;text-transform:uppercase;
    color:var(--gold-d);margin-bottom:14px;
  }
  .pc-side .rail{
    list-style:none;padding:0;margin:0 0 22px;
    display:flex;flex-direction:column;gap:8px;
  }
  .pc-side .rail li{
    display:flex;align-items:baseline;gap:14px;
    padding:6px 0;
    border-bottom:1px dashed rgba(184,138,26,.28);
  }
  .pc-side .rail li:last-child{border-bottom:0;}
  .pc-side .rail .min{
    flex-shrink:0;min-width:84px;
    font-family:var(--serif);font-style:italic;font-weight:400;
    font-size:22px;letter-spacing:-.014em;color:var(--ink);
    line-height:1;
  }
  .pc-side .rail .min::before{
    content:"— ";color:var(--gold-d);font-style:normal;
    font-family:var(--ff);font-weight:400;margin-right:2px;
  }
  .pc-side .rail .nm{
    flex:1;
    font-family:var(--ff);font-size:13.5px;font-weight:800;
    letter-spacing:.04em;text-transform:uppercase;color:var(--ink);
    line-height:1.2;
  }

  .pc-side .meta-line{
    font-family:var(--ff);font-size:13px;font-weight:600;
    color:var(--ink-soft);letter-spacing:-.002em;line-height:1.5;
  }
  .pc-side .meta-line em{
    color:var(--blue-d);font-style:italic;font-weight:700;
  }
  .pc-side .meta-line strong{color:var(--ink);font-weight:900;}
}

/* ════════════════════════════════════════════════════════════════
   TANDOCO INTELLIGENCE — phone w/ denser screen + 3D tilt
   ════════════════════════════════════════════════════════════════ */
/* 2026-05-19 — intel band is now CREAM with a floating navy CARD
   inside it. Less "we're a tech company slab", more "feature
   spotlight". Blush + gold sprinkles in the cream margins, three
   small floating product photos accent the navy card. */
.s-ai{
  margin:28px 12px 0;
  background:var(--cream);
  border-radius:28px;padding:30px 22px 36px;
  position:relative;color:var(--ink);
  box-shadow:0 10px 28px -18px rgba(11,20,55,.18);
  overflow:visible;perspective:1200px;
}
/* the floating dark card that holds the copy + features + cta */
.s-ai-card{
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-d) 100%);
  border-radius:22px;padding:26px 20px 22px;
  position:relative;color:var(--paper);
  box-shadow:0 24px 48px -22px rgba(11,20,55,.55),0 2px 6px -1px rgba(11,20,55,.10);
  overflow:hidden;z-index:1;
}
/* film-grain texture overlay — subtle, ~4% opacity. SVG turbulence
   data-uri so no extra HTTP request. */
.s-ai-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='240' height='240' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size:240px 240px;
  mix-blend-mode:overlay;opacity:.35;
}
/* gentle ambient gold glow inside the card */
.s-ai-card::after{
  content:"";position:absolute;top:-30%;right:-30%;width:90%;height:90%;
  background:radial-gradient(ellipse 60% 60% at 70% 30%,rgba(242,208,121,.18),transparent 65%);
  pointer-events:none;
}
.s-ai-card > *{position:relative;z-index:2;}
.s-ai .eye{color:var(--gold-l);}
.s-ai .eye::before{background:var(--gold-l);}
.s-ai h2{font-weight:700;font-size:34px;line-height:1.0;letter-spacing:-.038em;color:var(--paper);margin:12px 0 8px;}
.s-ai h2 em{color:var(--gold-l);font-weight:500;font-style:italic;}
.s-ai .sub{font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.82);font-weight:500;margin-bottom:22px;}
.s-ai .sub b{color:var(--paper);font-weight:800;}

/* GIANT BLUSH SEMICIRCLE bleeding off the right edge — abstract
   color block, no imagery. Magazine poster vibe. Pure CSS. */
.s-ai{overflow:hidden;}
.s-ai-blush{
  position:absolute;pointer-events:none;z-index:0;
  top:50%;right:-280px;transform:translateY(-50%);
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle at 30% 50%,
    var(--blue-l) 0%,
    var(--blue-l) 45%,
    var(--blue-xl) 70%,
    transparent 95%);
  opacity:.85;
}

/* OVERSIZED ITALIC GHOST WORD behind the navy card.
   Typography-as-decoration. Sized to bleed off-canvas on mobile,
   tucked partially behind the navy card to anchor it. Cream-darker
   color so it reads as background texture, not a separate label. */
.s-ai-ghost{
  position:absolute;pointer-events:none;z-index:0;
  bottom:8%;left:-40px;
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(140px,22vw,260px);
  line-height:.85;letter-spacing:-.04em;
  color:var(--cream-d);
  white-space:nowrap;
}

.phone-wrap{display:flex;justify-content:center;margin:24px 0 8px;color:inherit;text-decoration:none;cursor:pointer;transition:transform .25s ease;}
.phone-wrap:hover{transform:scale(1.015);}
.phone-wrap:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:38px;}
.phone{
  position:relative;z-index:2;
  /* Aspect ratio bumped 2026-05-20 · 9/18 → 9/19.5 because the
     interior content (8 stacked modules ending in 'tandoco picks')
     was hitting the screen's 32px corner mask and clipping the
     bottom of the pill. Extra ~35px of phone height clears it on
     both viewports.
       mobile  210 × 455
       desktop 280 × 607 */
  width:210px;
  aspect-ratio: 9 / 19.5;
  background:#0A1220;border-radius:38px;padding:8px;
  transform:rotateY(-9deg) rotateX(3deg);
  transform-origin:center center;
  box-shadow:
    -18px 26px 50px -22px rgba(15,24,40,.65),
    -6px 12px 22px -10px rgba(15,24,40,.35),
    inset 0 0 0 1px #1B2438;
  margin-bottom:-30px;
}
.phone::before{
  content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:68px;height:18px;background:#0A1220;border-radius:99px;z-index:3;
}
.phone-screen{
  width:100%;height:100%;background:var(--paper);
  border-radius:32px;overflow:hidden;
  display:flex;flex-direction:column;
  /* justify-content swapped 2026-05-18 from `flex-start` →
     `space-between`. The old version stacked modules from the top
     and let leftover vertical space pile up as one big chunk at
     the bottom (rationalized in the prior comment as "the iOS
     home-indicator chin"). It reads as a layout bug, not a chin.
     `space-between` distributes the slack evenly between modules
     so they fill the phone screen with rhythmic spacing — closest
     to how a real productivity app actually lays out on iOS.
     Status bar pinned top, picks pill pinned bottom, equal gaps
     between. `gap:4px` keeps a minimum breathing room when content
     nearly fills the screen; space-between adds any extra slack
     on top. */
  justify-content:space-between;
  /* extra bottom padding so the .ph-coach2 'tandoco picks' pill
     can't kiss the screen's 32px corner mask. */
  padding:22px 9px 20px;gap:4px;
}
.ph-statusbar{display:flex;align-items:center;justify-content:space-between;padding:0 4px 4px;}
.ph-statusbar .logo{font-family:var(--serif);font-weight:400;font-size:14px;color:var(--blue-d);letter-spacing:-.020em;line-height:1;}
.ph-statusbar .stat{display:flex;align-items:center;gap:4px;color:var(--ink-mute);font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.ph-statusbar .stat .dot{width:5px;height:5px;border-radius:50%;background:var(--blue);}

/* calorie ring + today header */
.ph-cal{
  display:flex;align-items:center;gap:10px;
  padding:8px 8px;border-radius:11px;
  background:linear-gradient(135deg,var(--blue-xxl),var(--blue-xl));
  border:1px solid rgba(11,20,55,.10);
}
.ph-ring{
  width:54px;height:54px;border-radius:50%;
  background:
    conic-gradient(var(--blue) 0 71%, rgba(11,20,55,.15) 71% 100%);
  display:grid;place-items:center;flex-shrink:0;
  position:relative;
}
.ph-ring::after{
  content:"";position:absolute;inset:5px;background:var(--paper);border-radius:50%;
}
.ph-ring .v{position:relative;z-index:1;font-style:italic;font-weight:800;font-size:13px;color:var(--ink);letter-spacing:-.020em;line-height:.95;text-align:center;}
.ph-ring .v small{display:block;font-style:normal;font-weight:800;font-size:6.5px;color:var(--ink-mute);letter-spacing:.10em;text-transform:uppercase;margin-top:1px;}
.ph-cal .info{display:flex;flex-direction:column;gap:1px;}
.ph-cal .info .h{font-size:10.5px;font-weight:900;color:var(--ink);letter-spacing:-.014em;}
.ph-cal .info .h em{font-weight:600;color:var(--blue-d);}
.ph-cal .info .t{font-size:8.5px;font-weight:700;color:var(--ink-mute);letter-spacing:.02em;}
.ph-cal .info .pct{font-style:italic;font-weight:800;font-size:13px;color:var(--gold-d);letter-spacing:-.012em;margin-top:2px;}

/* 3 macro rows */
.ph-macros2{display:flex;flex-direction:column;gap:4px;}
.ph-mrow{
  display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:6px;
  padding:4px 7px;border-radius:8px;background:var(--blue-xxl);
  border:1px solid rgba(11,20,55,.08);
}
.ph-mrow .l{font-size:7px;font-weight:800;letter-spacing:.08em;color:var(--blue-d);text-transform:uppercase;}
.ph-mrow .bar{position:relative;height:5px;background:rgba(15,24,40,.08);border-radius:99px;overflow:hidden;}
.ph-mrow .bar span{display:block;height:100%;border-radius:99px;}
.ph-mrow.p .bar span{width:73%;background:var(--blue);}
.ph-mrow.c .bar span{width:38%;background:var(--blue-d);}
.ph-mrow.f .bar span{width:25%;background:var(--gold);}
.ph-mrow .v{font-style:italic;font-weight:800;font-size:9px;color:var(--ink);letter-spacing:-.010em;line-height:1;}
.ph-mrow .v small{font-style:normal;font-weight:700;font-size:6.5px;color:var(--ink-mute);margin-left:2px;}

/* week trend bars + delta */
.ph-trend{
  display:flex;align-items:flex-end;justify-content:space-between;gap:3px;
  padding:6px 7px 4px;border-radius:9px;background:var(--paper);
  border:1px solid rgba(15,24,40,.06);
}
.ph-trend .tlbl{font-size:6.5px;font-weight:800;letter-spacing:.10em;color:var(--ink-mute);text-transform:uppercase;align-self:center;}
.ph-trend .bars{display:flex;align-items:flex-end;gap:2px;flex:1;height:18px;}
.ph-trend .bars span{flex:1;background:var(--blue-l);border-radius:1.5px;}
.ph-trend .bars span.hi{background:var(--blue);}
.ph-trend .bars span.mid{background:var(--blue-d);}
.ph-trend .pct2{font-style:italic;font-weight:800;font-size:9px;color:var(--gold-d);}

/* micronutrient alert row */
.ph-micro{
  display:flex;align-items:center;gap:6px;
  padding:6px 8px;border-radius:9px;
  background:var(--blue-xxl);border:1px solid rgba(11,20,55,.10);
}
.ph-micro .ic{
  width:18px;height:18px;border-radius:5px;background:var(--blue-d);color:var(--paper);
  display:grid;place-items:center;flex-shrink:0;
}
.ph-micro .ic svg{width:10px;height:10px;}
.ph-micro .txt{font-size:8.5px;font-weight:700;color:var(--ink);letter-spacing:-.005em;line-height:1.2;}
.ph-micro .txt em{font-weight:600;color:var(--blue-d);}
.ph-micro .delta{margin-left:auto;font-style:italic;font-weight:800;font-size:9.5px;color:var(--gold-d);}

.ph-coach2{
  background:var(--ink);color:var(--paper);
  border-radius:9px;padding:6px 8px;
  font-size:8.5px;line-height:1.35;font-weight:600;
}
.ph-coach2 .top{font-size:6.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:2px;}
.ph-coach2 em{font-weight:600;color:var(--gold-l);}

/* ── new: wearable chip row (hydration · recovery · streak) ──
   Three compact tiles in one row so the phone screen reads as a
   live dashboard, not just a macro tracker. Each chip is a white
   surface with a colored circular icon, big number + small label. */
.ph-wear{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;}
.ph-wear-chip{
  background:#fff;border:1px solid rgba(15,24,40,.06);
  border-radius:8px;padding:6px 5px 5px;
  display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center;
}
.ph-wear-chip .ic{
  width:14px;height:14px;border-radius:50%;
  display:grid;place-items:center;color:#fff;margin-bottom:1px;
}
.ph-wear-chip .ic svg{width:9px;height:9px;}
.ph-wear-chip.hyd .ic{background:var(--blue);}
.ph-wear-chip.rec .ic{background:#34A853;}
.ph-wear-chip.stk .ic{background:var(--gold-d);}
.ph-wear-chip .num{font-size:13px;font-weight:900;color:var(--ink);letter-spacing:-.018em;line-height:1;}
.ph-wear-chip .num small{font-size:7.5px;font-weight:700;color:var(--ink-mute);margin-left:1px;}
.ph-wear-chip .lbl{font-size:6.5px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:var(--ink-soft);line-height:1.1;}
.ph-wear-chip .lbl em{color:var(--blue-d);font-style:italic;letter-spacing:.05em;font-weight:700;}

/* ── new: next-pickup card · calendar date + meal count + progress ── */
.ph-next{
  display:flex;gap:6px;
  background:#fff;border:1px solid rgba(15,24,40,.06);
  border-radius:9px;padding:6px;
}
.ph-next-side{
  flex:0 0 32px;background:var(--blue-xxl);border-radius:6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:3px 0;
}
.ph-next-side .dt{font-size:10px;font-weight:900;color:var(--blue-d);letter-spacing:-.01em;line-height:1;}
.ph-next-side .dt em{font-style:italic;font-weight:700;}
.ph-next-side .mo{font-size:6px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:var(--ink-mute);margin-top:2px;}
.ph-next-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:1px 0;}
.ph-next-body .hd{font-size:9px;font-weight:800;color:var(--ink);letter-spacing:-.010em;}
.ph-next-body .hd em{font-style:italic;font-weight:700;color:var(--blue-d);}
.ph-next-body .meta{font-size:7px;font-weight:600;color:var(--ink-soft);letter-spacing:.005em;}
.ph-next-body .prog{display:flex;align-items:center;gap:4px;}
.ph-next-body .prog .bar{flex:1;height:3px;background:var(--blue-xxl);border-radius:99px;overflow:hidden;}
.ph-next-body .prog .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--gold-d),var(--gold));border-radius:99px;}
.ph-next-body .prog .pct{font-size:6.5px;font-weight:800;color:var(--gold-d);letter-spacing:.05em;text-transform:uppercase;}

/* feature chips on blue surface */
.ai-feats{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:46px;margin-bottom:18px;position:relative;z-index:1;
}
.ai-feat{display:block;background:var(--paper);border:1px solid rgba(11,20,55,.08);border-radius:14px;padding:12px;color:var(--ink);text-decoration:none;transition:transform .15s ease,box-shadow .18s ease,background .15s ease;}
.ai-feat:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(15,24,40,.30);}
.ai-feat:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.ai-feat .ic{width:24px;height:24px;border-radius:8px;background:var(--blue);color:var(--paper);display:grid;place-items:center;margin-bottom:8px;}
.ai-feat .ic.gold{background:var(--gold);color:var(--ink);}
.ai-feat .ic.deep{background:var(--blue-d);color:var(--paper);}
.ai-feat .ic svg{width:13px;height:13px;}
.ai-feat .nm{font-size:12px;font-weight:800;color:var(--ink);letter-spacing:-.010em;margin-bottom:2px;}
.ai-feat .nm em{font-weight:600;color:var(--blue-d);}
.ai-feat .tg{font-size:11px;font-weight:600;color:var(--ink-soft);line-height:1.35;}

.s-ai .btn.ghost-on-blue{background:var(--paper);color:var(--ink);width:100%;position:relative;z-index:1;}
.s-ai .btn.s-ai-cta{
  background:#1E40AF;color:var(--paper);width:auto;align-self:center;
  font-weight:800;padding:14px 22px;border-radius:99px;
  display:inline-flex;align-items:center;gap:8px;
  margin:6px auto 0;position:relative;z-index:1;
  border:none;text-decoration:none;
  transition:transform .14s ease,box-shadow .16s ease;
  box-shadow:0 8px 22px -10px rgba(30,64,175,.45);
}
.s-ai .btn.s-ai-cta:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(30,64,175,.55);}
.s-ai .btn.s-ai-cta svg{width:16px;height:16px;}

/* ════════════════════════════════════════════════════════════════
   HOW IT WORKS — 4 steps, grid layout, no overlap
   ════════════════════════════════════════════════════════════════ */
/* 2026-05-19 — HORIZONTAL how-it-works. Mobile: 4 compact tiles in
   a horizontal scroll-snap strip — user swipes through them. The
   first tile peeks the next slightly so the swipe affordance is
   obvious. Desktop: same 4 tiles, but flex:1 each so they all fit
   in one row without scroll. Compact and short either way. */
/* how-it-works · cream card rises into the kitchen's bottom (same
   gesture as the kitchen rising into the hero — mirror at both ends). */
.s-hw{
  padding:24px 0 20px;
  background:var(--cream-d);
  border-radius:28px 28px 0 0;
  /* 2026-05-20 · mirrors the kitchen-over-hero gesture · how-it-works
     slides UP and OVER the kitchen card as the user scrolls past it.
     -70 negative margin makes the overlap match the kitchen→hero
     pattern; sticky + higher z-index gives it the same "rise" feel. */
  margin:-70px 0 0 !important;
  max-width:none !important;
  position:sticky;top:0;z-index:3;
  box-shadow:0 -14px 28px -14px rgba(0,0,0,.18);
}
.s-hw .head{padding:0 18px;margin-bottom:14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;}
.s-hw h2{font-weight:900;font-size:30px;line-height:1.02;letter-spacing:-.030em;color:var(--navy-d);margin-top:4px;}
.s-hw h2 em{font-weight:600;color:var(--tandoco-blue);font-style:italic;}
.s-hw .hw-sub{font-size:13px;line-height:1.5;color:var(--ink-soft);max-width:42ch;font-weight:500;margin:0;}

/* ═══ Spotify playlist · how it works ═══ */
.hw-spotify{
  margin:0 18px;
  background:linear-gradient(180deg,#1A2855 0%,#0B1437 40%,#060B25 100%);
  border-radius:16px;
  padding:0;overflow:hidden;
  box-shadow:0 24px 48px -18px rgba(15,24,40,.50),0 4px 10px -2px rgba(15,24,40,.20);
  color:#fff;
}
/* hero block · tighter spacing + smaller album art on mobile so the
   whole module reads compact at narrow widths. */
.hw-sp-hero{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:20px 22px 10px;text-align:center;
}
.hw-sp-art{
  width:118px;height:118px;border-radius:6px;
  background:
    radial-gradient(circle at 28% 24%, #FFF1D4 0%, var(--gold-l) 28%, var(--gold) 62%, var(--gold-d) 100%);
  box-shadow:0 14px 28px -8px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.30);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.hw-sp-art::after{
  /* corner glow back · sits behind the icon, doesn't shift it */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 80% 80%, rgba(15,24,40,.20), transparent 60%);
}
.hw-sp-art .hw-sp-mark{
  position:relative;z-index:1;
  width:78%;height:78%;display:block;object-fit:contain;
  margin:auto;
}
.hw-sp-meta{display:flex;flex-direction:column;align-items:center;gap:1px;}
.hw-sp-kind{font-size:9.5px;font-weight:900;letter-spacing:.20em;text-transform:uppercase;color:rgba(255,255,255,.72);}
.hw-sp-title{
  font-family:var(--ff);font-weight:900;
  font-size:28px;line-height:1.0;letter-spacing:-.030em;
  color:#fff;margin:2px 0 4px;
}
.hw-sp-title em{font-style:italic;font-weight:600;color:#F2D079;letter-spacing:-.020em;}
.hw-sp-desc{font-size:11.5px;color:rgba(255,255,255,.68);font-weight:500;line-height:1.4;margin:0;max-width:30ch;}
.hw-sp-byline{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:6px;font-size:12px;color:rgba(255,255,255,.75);
}
.hw-sp-byline b{color:#fff;font-weight:800;}
/* monthly-listeners label · sits inline next to the save (+) button
   inside the controls row, Spotify artist-page style. */
.hw-sp-listeners{
  display:inline-flex;align-items:baseline;gap:5px;
  margin:0 0 0 6px;
  font-family:var(--ff);font-size:11.5px;font-weight:800;
  color:#fff;letter-spacing:.01em;white-space:nowrap;
}
.hw-sp-listeners span{
  color:rgba(255,255,255,.55);font-weight:500;
  text-transform:lowercase;letter-spacing:.02em;
}
.hw-sp-avatar{
  width:22px;height:22px;border-radius:50%;
  background:var(--navy-d);color:var(--gold-l);
  display:grid;place-items:center;font-weight:900;font-size:11px;
}

/* controls bar */
.hw-sp-controls{
  display:flex;align-items:center;gap:16px;
  padding:14px 24px 14px;
  /* on tiny phones, let the listeners text wrap to a new line instead of
     squeezing the round buttons into ovals */
  flex-wrap:wrap;row-gap:10px;
}
.hw-sp-play{
  flex:0 0 auto;          /* never shrink → stays a perfect circle */
  width:56px;height:56px;aspect-ratio:1;border-radius:50%;
  background:var(--gold);color:var(--navy-d);
  display:grid;place-items:center;cursor:pointer;border:0;
  box-shadow:0 8px 18px -4px rgba(224,179,65,.50);
  transition:transform .15s ease, background .15s ease;
}
.hw-sp-play:hover{transform:scale(1.05);background:var(--gold-l);}
.hw-sp-play svg{width:24px;height:24px;}
.hw-sp-icon{
  flex:0 0 auto;
  background:none;border:0;color:rgba(255,255,255,.65);cursor:pointer;
  width:28px;height:28px;display:grid;place-items:center;
  transition:color .15s;
}
.hw-sp-icon:hover{color:#fff;}
.hw-sp-icon svg{width:22px;height:22px;}
.hw-sp-more{
  margin-left:auto;color:rgba(255,255,255,.65);
  font-size:24px;line-height:1;letter-spacing:.04em;
}

/* track list · compact rows on mobile */
.hw-sp-tracks{padding:0 8px 4px;}
.hw-sp-track-head{
  display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;
  padding:6px 14px;margin:0 8px;
  font-size:10px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hw-sp-track-head .hw-sp-dur svg{width:12px;height:12px;}
.hw-sp-track{
  display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;
  padding:6px 14px;border-radius:6px;margin:1px 8px;
  transition:background .15s;cursor:pointer;
}
.hw-sp-track:hover{background:rgba(255,255,255,.06);}
.hw-sp-n{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.55);text-align:center;}
.hw-sp-info{display:flex;flex-direction:column;gap:1px;min-width:0;}
.hw-sp-tname{font-size:13px;font-weight:600;color:#fff;letter-spacing:-.005em;line-height:1.2;}
.hw-sp-tname .exp{color:rgba(255,255,255,.55);font-weight:500;font-size:11.5px;}
.hw-sp-tartist{font-size:10.5px;color:rgba(255,255,255,.62);font-weight:500;line-height:1.3;}
.hw-sp-tdur{font-size:12px;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums;font-weight:500;}
/* currently-playing row · number shows by default, equalizer bars
   only when the player is unpaused (.hw-spotify NOT .paused). */
.hw-sp-track.playing .hw-sp-tname{color:#ffffff;}
.hw-sp-track.playing .hw-sp-tdur{color:rgba(255,255,255,.72);}
.hw-sp-track.playing .hw-sp-n{display:flex;align-items:center;justify-content:center;}
.hw-sp-bars{
  display:none;align-items:flex-end;gap:2px;height:14px;
}
.hw-spotify:not(.paused) .hw-sp-track.playing .hw-sp-bars{display:inline-flex;}
.hw-spotify:not(.paused) .hw-sp-track.playing .num-label{display:none;}
.hw-sp-bars span{
  display:block;width:2px;background:var(--gold-l);border-radius:1px;height:6px;
  animation:hwSpBars 1.0s infinite ease-in-out;
}
.hw-sp-bars span:nth-child(2){animation-delay:.15s;}
.hw-sp-bars span:nth-child(3){animation-delay:.30s;}
@keyframes hwSpBars{
  0%,100%{height:4px;}
  50%{height:14px;}
}
/* paused easter-egg state · freezes the equalizer · "order" track
   title stays FULL white to match the other step labels (cook day,
   pickup, fuel) instead of dimming to 55%. */
.hw-spotify.paused .hw-sp-bars span{animation-play-state:paused;}
.hw-spotify.paused .hw-sp-track.playing .hw-sp-tname{color:#ffffff;}
.hw-spotify.paused .hw-sp-bars span{background:rgba(255,255,255,.45);}

/* now-playing mini bar · compact */
.hw-sp-now{
  display:flex;align-items:center;gap:10px;
  margin:8px 12px 0;padding:7px 10px;
  background:rgba(255,255,255,.04);
  border-radius:10px;
  border:1px solid rgba(255,255,255,.06);
}
.hw-sp-now-art{
  width:32px;height:32px;border-radius:4px;flex-shrink:0;
  background:radial-gradient(circle at 30% 30%, #F2D079 0%, var(--gold-d) 80%);
  color:var(--navy-d);display:grid;place-items:center;font-weight:900;font-size:15px;letter-spacing:-.02em;
}
.hw-sp-now-info{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;}
.hw-sp-now-title{font-size:12px;color:#fff;font-weight:700;letter-spacing:-.005em;}
.hw-sp-now-title .exp{color:rgba(255,255,255,.55);font-weight:500;}
.hw-sp-now-artist{font-size:10px;color:rgba(255,255,255,.6);}
.hw-sp-now-ctrls{display:flex;gap:12px;color:rgba(255,255,255,.7);font-size:14px;}
.hw-sp-now-ctrls .playsm{color:#fff;}

.hw-sp-progress{
  display:flex;align-items:center;gap:10px;
  padding:6px 22px 10px;
  font-size:10px;color:rgba(255,255,255,.55);
  font-variant-numeric:tabular-nums;font-weight:600;
}
.hw-sp-bar{
  flex:1;height:4px;border-radius:2px;
  background:rgba(255,255,255,.10);overflow:hidden;
  position:relative;
}
.hw-sp-bar-fill{
  width:62%;height:100%;background:#fff;border-radius:2px;
  position:relative;
}
.hw-sp-bar-fill::after{
  content:"";position:absolute;right:-5px;top:50%;
  transform:translateY(-50%);
  width:10px;height:10px;border-radius:50%;background:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,.30);
}

.hw-sp-cta-wrap{display:flex;justify-content:center;padding:4px 22px 16px;}
.hw-sp-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 24px;
  background:var(--gold);color:var(--navy-d);
  border-radius:99px;
  font-size:13.5px;font-weight:900;letter-spacing:-.005em;
  text-decoration:none;
  box-shadow:0 10px 24px -10px rgba(224,179,65,.55);
  transition:transform .15s ease, background .15s ease;
}
.hw-sp-cta:hover{transform:scale(1.03);background:var(--gold-l);}
.hw-sp-cta:active{transform:scale(.98);}
.hw-sp-cta svg{width:14px;height:14px;}

/* MEAL-PREP CONTAINER STEPS · each step is a top-down container
   graphic that echoes the hero photo's flat-lay aesthetic. */
.hw-stack{
  display:grid;grid-template-columns:1fr 1fr;
  gap:20px;
  padding:8px 18px 16px;
}
.hw-card{position:relative;min-width:0;}

/* the "container" · liquid-glass cards · multi-layer gradients +
   inset highlights + soft outer shadows that simulate light passing
   through glass. */
.hw-container{
  position:relative;
  border:0;
  border-radius:0;
  padding:18px 18px 20px;
  display:flex;flex-direction:column;gap:10px;
  aspect-ratio:1/1;
  overflow:hidden;
  /* glass edge highlight + soft outer shadow */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(15,24,40,.10),
    inset 1px 0 0 rgba(255,255,255,.18),
    inset -1px 0 0 rgba(15,24,40,.06),
    0 14px 28px -14px rgba(15,24,40,.22),
    0 2px 4px -1px rgba(15,24,40,.08);
}
/* iridescent shimmer overlay · sits between the base gradient and
   the content, soft-light blend so it tints without overpowering. */
.hw-container::before,
.hw-container::after{display:none;}
.hw-container > *{position:relative;z-index:1;}
.hw-container{
  background-blend-mode:normal;
}
/* LIQUID GLASS per-step gradients · each card layers a radial
   highlight (top-left "light source") + iridescent conic shimmer
   + the base color gradient for a glassy, refracted look. */
.hw-card.s1 .hw-container{
  background:
    radial-gradient(ellipse 75% 55% at 22% 14%,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 65%),
    conic-gradient(from 200deg at 50% 50%,rgba(255,180,200,.18),rgba(180,210,255,.18),rgba(200,255,210,.18),rgba(255,230,160,.22),rgba(255,180,200,.18)),
    linear-gradient(155deg,#FAF7F0 0%,#E5D8B5 100%);
  background-blend-mode:normal, soft-light, normal;
}
.hw-card.s2 .hw-container{
  background:
    radial-gradient(ellipse 75% 55% at 22% 14%,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 65%),
    conic-gradient(from 200deg at 50% 50%,rgba(255,200,180,.20),rgba(255,230,180,.20),rgba(255,255,200,.22),rgba(255,210,140,.20),rgba(255,200,180,.20)),
    linear-gradient(155deg,#FFE19A 0%,#D89234 100%);
  background-blend-mode:normal, soft-light, normal;
}
.hw-card.s3 .hw-container{
  background:
    radial-gradient(ellipse 75% 55% at 22% 14%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 65%),
    conic-gradient(from 200deg at 50% 50%,rgba(120,180,255,.30),rgba(160,140,255,.28),rgba(255,200,255,.26),rgba(140,220,255,.28),rgba(120,180,255,.30)),
    linear-gradient(155deg,#3A5BCC 0%,#1F3FB0 100%);
  background-blend-mode:normal, soft-light, normal;
}
.hw-card.s4 .hw-container{
  background:
    radial-gradient(ellipse 75% 55% at 22% 14%,rgba(255,255,255,.32) 0%,rgba(255,255,255,0) 65%),
    conic-gradient(from 200deg at 50% 50%,rgba(140,180,255,.22),rgba(180,140,255,.22),rgba(120,220,255,.22),rgba(160,160,255,.22),rgba(140,180,255,.22)),
    linear-gradient(155deg,#1A2855 0%,#03061A 100%);
  background-blend-mode:normal, soft-light, normal;
}
/* cobalt + navy cards · flip text to white for legibility */
.hw-card.s3 .hw-h,
.hw-card.s3 .hw-h em,
.hw-card.s3 .hw-tag,
.hw-card.s4 .hw-h,
.hw-card.s4 .hw-h em,
.hw-card.s4 .hw-tag{color:#fff !important;}
.hw-card.s3 .hw-num,
.hw-card.s4 .hw-num{color:rgba(255,255,255,.35);}
.hw-card.s3 .hw-when,
.hw-card.s4 .hw-when{background:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
/* lid sheen + divider removed — sharp-edged boxes are cleaner without them */
.hw-container::before,.hw-container::after{display:none;}

/* top row · day pill (left) + step number (right) */
.hw-card-top{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.hw-when{
  display:inline-flex;align-items:center;
  font-size:9.5px;font-weight:900;letter-spacing:.20em;text-transform:uppercase;
  padding:5px 10px;border-radius:99px;
  background:var(--ink);color:var(--gold-l);
}
/* s1 + s2 · navy pill with gold text */
.hw-card.s1 .hw-when,
.hw-card.s2 .hw-when{background:var(--ink);color:var(--gold-l);}
/* s3 + s4 · gold pill with ink text */
.hw-card.s3 .hw-when,
.hw-card.s4 .hw-when{background:var(--gold-l);color:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none;}

.hw-num{
  font-family:var(--ff);font-weight:900;font-style:italic;
  font-size:22px;line-height:1;letter-spacing:-.024em;
  color:rgba(11,20,55,.35);
}

/* body · headline + tag at the bottom of the container */
.hw-body{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:6px;min-width:0;
  margin-top:auto;
}
.hw-h{
  font-weight:900;font-size:15px;letter-spacing:-.012em;
  color:var(--ink);line-height:1.18;
}
.hw-h em{
  font-weight:600;font-style:italic;color:var(--ink);
  letter-spacing:-.014em;
}
.hw-tag{
  font-size:12.5px;line-height:1.4;color:var(--ink);font-weight:500;
}

.hw-dot,.hw-dots,.hw-dots-row,.hw-dot-btn{display:none !important;}

/* ════════════════════════════════════════════════════════════════
   COACH
   ════════════════════════════════════════════════════════════════ */
.s-coach{margin:28px 0 0;}

/* CONVERSATION MOCKUP · iMessage-style chat thread showing what
   coaching actually feels like (texts, not pep talks). */
.coach-chat{
  margin:14px 12px 0;
  background:var(--cream-l);
  border-radius:22px;
  padding:12px 12px 14px;
  display:flex;flex-direction:column;gap:6px;
  box-shadow:0 12px 28px -14px rgba(15,24,40,.20);
  position:relative;
}
.coach-chat .chat-day{
  align-self:center;
  font-size:10px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  color:var(--ink-mute);margin-bottom:4px;
}
.coach-chat .chat-row{
  display:flex;align-items:center;gap:6px;max-width:84%;
}
.coach-chat .chat-row.from-coach{align-self:flex-start;}
.coach-chat .chat-row.from-you{align-self:flex-end;justify-content:flex-end;}
.coach-chat .chat-av{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;
  background:var(--ink);color:var(--gold-l);
  display:grid;place-items:center;
  font-family:var(--ff);font-weight:900;font-size:10px;
  letter-spacing:0;
}
.coach-chat .bub{
  position:relative;
  padding:9px 13px;border-radius:18px;
  font-family:var(--ff);font-size:14px;line-height:1.35;font-weight:500;
  letter-spacing:-.005em;
  max-width:100%;
}
.coach-chat .from-coach .bub{
  background:#E9E9EB;color:#1c1c1e;
  border-bottom-left-radius:6px;
}
.coach-chat .from-coach .bub em{
  font-family:var(--ff);font-style:italic;font-weight:700;color:var(--blue-d);
  letter-spacing:-.014em;
}
.coach-chat .from-you .bub{
  background:#1F3FB0;color:#fff;
  border-bottom-right-radius:6px;
}

/* animated typing indicator on the last (typing) coach row */
.coach-chat .bub-typing{
  display:flex;align-items:center;gap:4px;
  padding:12px 14px;
}
.coach-chat .bub-typing span{
  width:6px;height:6px;border-radius:50%;background:rgba(15,24,40,.45);
  animation:tcTyping 1.2s ease-in-out infinite;
}
.coach-chat .bub-typing span:nth-child(2){animation-delay:.15s;}
.coach-chat .bub-typing span:nth-child(3){animation-delay:.30s;}
@keyframes tcTyping{
  0%,60%,100%{transform:translateY(0);opacity:.45;}
  30%{transform:translateY(-3px);opacity:1;}
}
@media (prefers-reduced-motion: reduce){.coach-chat .bub-typing span{animation:none;}}

/* CTA pinned at the bottom of the chat */
.coach-chat .coach-cta{
  align-self:center;margin-top:10px;
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 22px;border-radius:99px;
  background:var(--ink);color:var(--paper);
  font-family:var(--ff);font-size:14px;font-weight:800;
  text-decoration:none;letter-spacing:-.005em;
  transition:transform .15s ease, background .15s ease;
}
.coach-chat .coach-cta:hover{background:var(--blue-d);transform:translateY(-1px);}
.coach-chat .coach-cta svg{width:16px;height:16px;}

@media (min-width: 880px){
  .coach-chat{
    max-width:560px;margin-left:auto;margin-right:auto;
    padding:24px 22px;
  }
  .coach-chat .bub{font-size:15px;}
}
.coach-head{padding:0 18px;margin-bottom:16px;}
.coach-head h2{font-weight:900;font-size:30px;line-height:1.02;letter-spacing:-.030em;color:var(--ink);margin-top:10px;}
.coach-head h2 em{font-weight:600;}
.coach-head .sub{font-size:14px;line-height:1.5;color:var(--ink-soft);font-weight:500;margin-top:8px;}
.coach-head .sub em{font-weight:600;}

.coach-detail{display:none;} /* mobile · hide the extended copy block */
/* cycling single-bubble chat — one message visible at a time, saves space */
.s-coach .cc-slot{
  display:flex; flex-direction:column; justify-content:center;
  min-height:46px; margin-bottom:2px;
}
.s-coach .cc-in{ animation: ccIn .28s ease both; }
@keyframes ccIn{ from{ opacity:0; transform:translateY(7px) scale(.98); } to{ opacity:1; transform:none; } }
.s-coach .cc-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@media (prefers-reduced-motion: reduce){ .s-coach .cc-in{ animation:none; } }
.coach-photo{
  display:block; /* mobile now shows the coach photo above the chat animation */
  aspect-ratio:1/1;
  background:url('/images/gymbrocoach_square.png') no-repeat center / cover, linear-gradient(140deg,var(--blue-xl) 0%,var(--blue-l) 100%);
  background:image-set(url('/images/gymbrocoach_square.avif') type('image/avif'), url('/images/gymbrocoach_square.webp') type('image/webp'), url('/images/gymbrocoach_square.png') type('image/png')) no-repeat center / cover, linear-gradient(140deg,var(--blue-xl) 0%,var(--blue-l) 100%);
  margin:0 0 14px;
  box-shadow:0 14px 30px -16px rgba(11,20,55,.32);
  border-radius:24px;
}

.coach-card{
  margin:0 12px;background:#ffffff !important;
  border:1px solid rgba(15,24,40,.06) !important;border-radius:20px;padding:18px;
  box-shadow:0 18px 38px -16px rgba(0,0,0,.45),0 4px 10px -4px rgba(15,24,40,.20);
}
/* navy section · text on the section flips to white (header / copy) */
.s-coach,
.s-coach *{color:#ffffff;}
.s-coach .coach-head h2,
.s-coach .coach-head h3{color:#ffffff !important;}
.s-coach .coach-head h2 em,
.s-coach .coach-head h3 em{color:var(--gold-l) !important;}
.s-coach .coach-head .sub{color:rgba(255,255,255,.82) !important;}
.s-coach .coach-head .sub em{color:var(--gold-l) !important;}
/* coach "tandocoach · optional" eye — plain white text, no pill */
.s-coach .coach-head .eye{
  color:#ffffff !important;background:transparent !important;border:0 !important;
  padding:0 !important;
}
.s-coach .coach-head .eye::before{background:transparent !important;display:none !important;}
/* inside the white coach card · text returns to dark ink */
.coach-card,
.coach-card *{color:var(--ink);}
.coach-card .coach-id .nm{color:var(--ink) !important;}
.coach-card .coach-id .creds{color:var(--ink-soft) !important;}
.coach-card .coach-id .ai-flag{background:var(--blue-xxl) !important;color:var(--blue-d) !important;}
.coach-card .coach-msg{background:var(--blue-xxl) !important;color:var(--ink) !important;}
.coach-card .coach-msg .ts{color:var(--ink-soft) !important;}
.coach-card .coach-cta{background:var(--tandoco-blue) !important;color:#ffffff !important;}
.coach-card .coach-cta svg{color:#ffffff !important;stroke:#ffffff !important;}
.coach-id{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;}
.coach-av{
  width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-d) 100%);
  display:grid;place-items:center;color:var(--paper);
  font-style:italic;font-weight:800;font-size:18px;position:relative;flex-shrink:0;
}
.coach-av::after{content:"";position:absolute;bottom:0;right:0;width:12px;height:12px;border-radius:50%;background:var(--gold);border:2.5px solid var(--paper);}
.coach-id .nm{font-weight:900;font-size:15px;letter-spacing:-.018em;color:var(--ink);}
.coach-id .nm em{font-weight:600;}
.coach-id .creds{font-size:11px;font-weight:700;color:var(--ink-soft);margin-top:1px;letter-spacing:.02em;}
.coach-id .ai-flag{
  display:inline-flex;align-items:center;gap:4px;margin-top:6px;
  background:var(--blue-xxl);color:var(--blue-d);
  padding:2px 8px;border-radius:99px;
  font-size:9.5px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;
}
.coach-id .ai-flag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue);}
.coach-msg{background:var(--blue-xxl);border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.5;color:var(--ink);font-weight:500;border:1px solid rgba(11,20,55,.10);}
.coach-msg em{font-weight:600;}
.coach-msg .ts{display:block;font-size:9.5px;font-weight:800;color:var(--ink-soft);margin-top:6px;letter-spacing:.06em;text-transform:uppercase;}
.coach-cta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:14px;padding:14px 18px;border-radius:14px;
  background:var(--tandoco-blue);color:var(--paper);
  font-size:14px;font-weight:800;letter-spacing:-.005em;
  box-shadow:0 10px 22px -10px rgba(30,42,120,.45);
}
.coach-cta svg{width:16px;height:16px;}

/* 3 trust/feature bullets · explains what makes tandocoach unique */
.coach-feats{
  list-style:none;padding:0;margin:18px 12px 0;
  display:flex;flex-direction:column;gap:10px;
}
.coach-feats li{
  display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:flex-start;
  padding:14px 16px;background:var(--paper);
  border:1px solid rgba(15,24,40,.06);border-radius:14px;
  box-shadow:0 1px 3px rgba(15,24,40,.04);
}
.coach-feats .icn{
  width:36px;height:36px;border-radius:50%;
  background:var(--blue-xxl);color:var(--blue-d);
  display:grid;place-items:center;flex-shrink:0;
}
.coach-feats .icn.gold{background:var(--gold-xl);color:var(--gold-d);}
.coach-feats .icn.green{background:rgba(22,163,74,.12);color:var(--green-d);}
.coach-feats .icn svg{width:18px;height:18px;}
.coach-feats .body{display:flex;flex-direction:column;gap:2px;min-width:0;}
.coach-feats .nm{font-weight:900;font-size:13.5px;letter-spacing:-.012em;color:var(--ink);}
.coach-feats .nm em{font-weight:600;color:var(--blue-d);}
.coach-feats .tg{font-size:12.5px;line-height:1.4;color:var(--ink-soft);font-weight:500;}

/* ════════════════════════════════════════════════════════════════
   WHAT IT COSTS — save up to + $2,200 left-aligned, stacked
   ════════════════════════════════════════════════════════════════ */
/* ═══ WHAT IT COSTS · 3-card grid (mobile-condensed v3) ═══
   Replaces the old blue-tinted bar-chart module. Three cards
   side-by-side from the smallest viewport up — take-out + meal-kits
   as flat gray "alternatives," tandoco as a raised gold-bordered
   hero with a tilted "recommended" sticker. */
.s-math{
  margin:28px 12px 0;
  background:var(--cream);
  border-radius:24px;padding:30px 20px 26px;color:var(--ink);
  position:relative;overflow:hidden;
  border:0;
  box-shadow:0 18px 36px -22px rgba(15,24,40,.20),0 4px 10px -6px rgba(15,24,40,.10);
}
.s-math h2{font-weight:900;font-size:30px;line-height:.98;letter-spacing:-.030em;color:var(--ink);margin:12px 0 6px;}
.s-math h2 em{font-weight:600;color:var(--gold-d);}
.s-math .sub{font-size:13.5px;line-height:1.5;color:var(--ink-soft);font-weight:500;margin-bottom:18px;}

/* mobile-first WINNER-FIRST LAYOUT · the tandoco card is the hero,
   alternatives are compact comparison rows below it. */
.s-math .v3-grid{display:none;}

.s-math .v3-winner{
  display:block;position:relative;
  background:var(--tandoco-blue) !important;
  border:2px solid var(--gold) !important;
  border-radius:18px;padding:30px 18px 16px;
  text-decoration:none;color:#ffffff;
  box-shadow:0 18px 36px -16px rgba(30,42,120,.55),0 4px 8px -2px rgba(15,24,40,.10);
  transition:transform .18s ease,box-shadow .22s ease;
  margin-top:6px;
}
/* navy winner · all interior text reads white; price stays gold pop */
.s-math .v3-winner .v3-winner-nm{color:#ffffff !important;}
.s-math .v3-winner .v3-winner-price .amt{color:var(--gold-l) !important;}
.s-math .v3-winner .v3-winner-price .per{color:rgba(255,255,255,.65) !important;}
.s-math .v3-winner .v3-winner-feats li{color:#ffffff !important;}
.s-math .v3-winner-cta{
  background:var(--gold) !important;color:var(--navy-d) !important;
}
/* arrows inside winner buttons → BLACK */
.s-math .v3-winner-cta svg,
.s-math .v3-winner-cta svg *{color:#000000 !important;stroke:#000000 !important;}
.s-math .v3-winner:hover{
  transform:translateY(-2px);
  box-shadow:0 24px 44px -16px rgba(184,138,26,.55),0 6px 12px -3px rgba(15,24,40,.12);
}
.s-math .v3-winner-sticker{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-3deg);
  background:#ffffff;color:var(--navy-d);
  padding:5px 12px;border-radius:6px;
  font-size:10px;font-weight:900;letter-spacing:.20em;text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 6px 16px -4px rgba(184,138,26,.50),0 2px 4px rgba(15,24,40,.20);
  border:1.5px solid var(--gold);
}
.s-math .v3-winner-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-bottom:14px;
}
.s-math .v3-winner-nm{
  font-family:var(--serif);font-weight:400;font-size:32px;line-height:1;
  letter-spacing:-.012em;color:var(--ink);
}
.s-math .v3-winner-price{display:flex;align-items:baseline;gap:2px;}
.s-math .v3-winner-price .amt{
  font-style:italic;font-weight:900;font-size:34px;line-height:.95;
  letter-spacing:-.030em;color:var(--gold-d);
}
.s-math .v3-winner-price .per{font-size:11px;font-weight:700;color:var(--ink-mute);}
.s-math .v3-winner-feats{
  list-style:none;padding:0;margin:0 0 16px;
  display:flex;flex-direction:column;gap:8px;
}
.s-math .v3-winner-feats li{
  display:flex;align-items:center;gap:10px;
  font-size:14px;font-weight:700;color:var(--ink);line-height:1.35;
}
.s-math .v3-winner-feats li .mk{
  flex-shrink:0;width:18px;height:18px;border-radius:50%;
  background:var(--gold);color:var(--navy-d);
  display:inline-flex;align-items:center;justify-content:center;
}
.s-math .v3-winner-feats li .mk svg{width:11px;height:11px;}
.s-math .v3-winner-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px;border-radius:99px;
  background:var(--gold);color:var(--navy-d);
  font-family:var(--ff);font-size:14px;font-weight:900;
  letter-spacing:.04em;text-transform:uppercase;
}
.s-math .v3-winner-cta svg{width:18px;height:18px;}

/* compact comparison rows below */
.s-math .v3-vs{
  margin-top:14px;display:flex;flex-direction:column;gap:8px;
}
.s-math .v3-vs-row{
  background:#F6F6F2;border:1px solid rgba(15,24,40,.08);
  border-radius:12px;padding:12px 14px;
}
.s-math .v3-vs-row .vs-head{
  display:flex;align-items:center;gap:12px;
  text-align:left !important;
}
.s-math .v3-vs-row .vs-icn{
  flex-shrink:0;
  display:inline-grid;place-items:center;
  width:44px;height:44px;border-radius:12px;
  background:rgba(30,64,175,.12);color:#1E40AF;
}
.s-math .v3-vs-row .vs-icn svg{width:26px;height:26px;}
.s-math .v3-vs-row .vs-text{flex:1;min-width:0;text-align:left !important;}
.s-math .v3-vs-row .vs-price{
  flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  text-align:right !important;
}
.s-math .v3-vs-row .vs-nm{
  display:block;font-family:var(--ff);font-weight:900;font-size:14px;
  letter-spacing:.04em;text-transform:uppercase;color:#1E40AF;
  text-align:left !important;
}
.s-math .v3-vs-row .vs-amt{
  font-family:var(--ff);font-weight:900;font-size:15px;color:var(--ink);
  letter-spacing:-.014em;
}
.s-math .v3-vs-row .vs-amt span{font-size:10px;font-weight:600;color:var(--ink-mute);}
.s-math .v3-vs-row .vs-delta{
  display:inline-flex;align-items:center;
  padding:3px 8px;border-radius:99px;
  background:#FBEAEA;color:#9A2A26;
  font-family:var(--ff);font-size:11px;font-weight:900;letter-spacing:0;
}
.s-math .v3-vs-row .vs-tag{
  font-size:11.5px;font-weight:600;color:var(--ink-mute);
  letter-spacing:-.002em;line-height:1.35;
  text-align:left !important;margin-top:2px;
}
.s-math .v3-card{
  border-radius:14px;padding:12px 10px 14px;
  background:#F6F6F2;border:1px solid rgba(15,24,40,.08);
  position:relative;display:flex;flex-direction:column;min-width:0;
}
.s-math .v3-card .tag{font-size:8px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:4px;}
.s-math .v3-card .nm{font-weight:900;font-size:14px;letter-spacing:-.020em;color:var(--ink);margin-bottom:6px;line-height:1.05;}
.s-math .v3-card .price{display:flex;align-items:baseline;gap:2px;margin-bottom:2px;}
.s-math .v3-card .price .amt{font-style:italic;font-weight:900;font-size:26px;line-height:.95;letter-spacing:-.030em;color:var(--ink);}
.s-math .v3-card .price .per{font-size:9px;font-weight:600;color:var(--ink-mute);}
.s-math .v3-card .mood{font-size:9.5px;font-weight:700;color:var(--ink-mute);margin-bottom:10px;line-height:1.25;}
.s-math .v3-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px;}
.s-math .v3-card ul li{display:flex;align-items:flex-start;gap:5px;font-size:10.5px;font-weight:600;color:var(--ink-soft);line-height:1.3;}
.s-math .v3-card ul li .mk{flex-shrink:0;width:11px;height:11px;border-radius:50%;background:rgba(15,24,40,.15);color:#fff;display:inline-flex;align-items:center;justify-content:center;margin-top:1px;}
.s-math .v3-card ul li .mk svg{width:7px;height:7px;}
.s-math .v3-card ul li .mk.cross{background:rgba(15,24,40,.18);}
/* show all 3 bullets per card · trimmed copy now fits on mobile */

/* hero card — gold border, soft warm fill, lifted shadow, slight pop-up */
.s-math .v3-card.pick{
  background:linear-gradient(180deg,var(--paper) 0%,#FFFCEF 100%);
  border:2px solid var(--gold);
  box-shadow:0 14px 28px -14px rgba(184,138,26,.38),0 4px 8px -2px rgba(15,24,40,.08);
  transform:translateY(-6px);z-index:1;
  color:inherit;text-decoration:none;
  display:block;
  transition:transform .18s ease,box-shadow .22s ease;
}
.s-math .v3-card.pick:hover{
  transform:translateY(-10px);
  box-shadow:0 22px 40px -16px rgba(184,138,26,.55),0 6px 12px -3px rgba(15,24,40,.10);
}
.s-math .v3-card.pick:focus-visible{outline:3px solid var(--blue-d);outline-offset:4px;}
.s-math .v3-card.pick .v3-card-cta{
  display:block;margin-top:14px;padding-top:12px;
  border-top:1px solid rgba(184,138,26,.30);
  font-size:11.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue-d);
}
.s-math .v3-card.pick .tag{color:var(--gold-d);}
.s-math .v3-card.pick .nm em{color:var(--blue-d);font-weight:600;}
.s-math .v3-card.pick .price .amt{color:var(--green-d);}
.s-math .v3-card.pick .mood{color:var(--ink);font-weight:700;}
.s-math .v3-card.pick ul li{color:var(--ink);font-weight:700;}
.s-math .v3-card.pick ul li .mk{background:var(--green);}
/* Sticker sits INSIDE the card (top:6px) instead of poking above
   it. The previous top:-9px placed it 9px above the card border;
   that worked in isolation, but the parent .s-math has
   overflow:hidden (to clip the card's hero shadows), which cropped
   the top of the "RECOMMENDED" sticker on mobile. Tucking it inside
   the top edge makes overflow irrelevant. */
/* Sticker sits at the very top of the card. Bumped padding-top to
   30px so OPTION B tag has clear breathing room below the rotated
   sticker (the -3° rotation adds extra visual height to the bottom
   corners — 22px wasn't quite enough). */
.s-math .v3-card.pick{padding-top:30px;}
.s-math .v3-card.pick .sticker{
  position:absolute;top:6px;left:50%;transform:translateX(-50%) rotate(-3deg);
  background:var(--gold);color:var(--ink);
  padding:4px 10px;border-radius:6px;
  font-size:8.5px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
  white-space:nowrap;box-shadow:0 5px 14px -4px rgba(184,138,26,.55);
}
/* verdict line · sits at the bottom of each card, italic */
.s-math .v3-card .v3-verdict{
  margin-top:10px;padding-top:8px;
  border-top:1px dashed rgba(15,24,40,.14);
  font-size:9.5px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;
  color:var(--ink-mute);line-height:1.3;
}
.s-math .v3-card .v3-verdict em{
  font-style:italic;font-weight:700;color:var(--ink-soft);letter-spacing:.02em;
  text-transform:none;
}
.s-math .v3-card.pick .v3-verdict{
  border-top-color:rgba(184,138,26,.40);
  color:var(--gold-d);
}
.s-math .v3-card.pick .v3-verdict em{color:var(--ink);font-weight:900;}

.s-math .v3-foot{margin-top:16px;text-align:center;font-size:11.5px;font-weight:700;color:var(--ink-soft);}
.s-math .v3-foot em{color:var(--tandoco-blue);font-weight:800;font-style:italic;}
.s-math .v3-cta{margin-top:12px;}

/* math side-panel · the full cost table + savings notes that sit to
   the right of the winner card on desktop. hidden on mobile. */
.v3-math-side{display:none;}
.v3-math-eye{
  display:inline-block;
  font-family:var(--ff);font-size:10.5px;font-weight:900;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-d);margin-bottom:10px;
}
.v3-math-h{
  font-family:var(--ff);font-weight:900;
  font-size:26px;line-height:1.05;letter-spacing:-.022em;
  color:var(--navy-d);margin:0 0 18px;
}
.v3-math-h em{font-style:italic;font-weight:600;color:var(--tandoco-blue);letter-spacing:-.014em;}
.v3-math-table{
  width:100%;border-collapse:separate;border-spacing:0;
  font-family:var(--ff);margin-bottom:20px;
}
.v3-math-table th{
  font-size:9.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);text-align:left;
  padding:8px 10px;border-bottom:1.5px dashed rgba(15,24,40,.20);
}
.v3-math-table th:nth-child(2),
.v3-math-table th:nth-child(3),
.v3-math-table td:nth-child(2),
.v3-math-table td:nth-child(3){text-align:right;font-variant-numeric:tabular-nums;}
.v3-math-table th:last-child,
.v3-math-table td:last-child{text-align:right;}
.v3-math-table td{
  padding:11px 10px;
  font-size:13.5px;font-weight:600;color:var(--ink);
  border-bottom:1px solid rgba(15,24,40,.08);
}
.v3-math-table tr:last-child td{border-bottom:0;}
.v3-math-table td b{font-weight:900;}
.v3-math-table tr.v3-math-win td{
  background:var(--gold-xl);font-weight:800;color:var(--navy-d);
}
.v3-math-table tr.v3-math-win td:first-child{border-radius:8px 0 0 8px;}
.v3-math-table tr.v3-math-win td:last-child{border-radius:0 8px 8px 0;}

.v3-math-notes{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:8px;
}
.v3-math-notes li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:13.5px;line-height:1.4;color:var(--ink);font-weight:500;
}
.v3-math-notes li .dot{
  flex-shrink:0;width:8px;height:8px;border-radius:50%;
  background:var(--gold);margin-top:5px;
}
.v3-math-notes li b{color:var(--navy-d);font-weight:800;}
.cost-includes li .ck svg{width:11px;height:11px;}
.s-math .btn{width:100%;}

/* ════════════════════════════════════════════════════════════════
   REVIEWS
   ════════════════════════════════════════════════════════════════ */
.s-rev{padding:34px 0 16px;}
.s-rev .head{padding:0 18px;margin-bottom:14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;}
.s-rev h2{font-weight:900;font-size:28px;line-height:1.05;letter-spacing:-.028em;color:var(--navy-d);margin-top:4px;}
.s-rev h2 em{font-weight:600;color:var(--gold-d) !important;font-style:italic !important;}

/* ── rating summary strip ── */
.rev-summary{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin:0 18px 22px;padding:14px 18px;
  background:var(--tandoco-blue);border:1px solid rgba(255,255,255,.10);border-radius:14px;
  box-shadow:0 14px 28px -16px rgba(30,42,120,.55),0 2px 4px rgba(15,24,40,.20);
}
.rev-summary .g-mark{width:26px;height:26px;flex-shrink:0;}
.rev-summary .num{
  font-family:var(--ff);font-size:32px;font-weight:900;color:#ffffff;
  letter-spacing:-.022em;font-variant-numeric:tabular-nums;line-height:1;
}
.rev-summary .meta{display:flex;flex-direction:column;gap:2px;}
.rev-summary .meta .stars{color:var(--gold-l);font-size:14px;letter-spacing:2px;line-height:1;}
.rev-summary .meta .lbl{font-size:11.5px;color:rgba(255,255,255,.78);font-weight:600;letter-spacing:-.005em;}
.rev-summary .meta .lbl b{color:#ffffff;font-weight:800;}

/* ── stacked google-review cards ── */
.rev-stack{
  display:flex;flex-direction:column;gap:14px;
  padding:6px 28px 6px;
}
.rev-card{
  background:#fff;
  border-radius:14px;
  padding:16px 16px 14px;
  box-shadow:0 18px 34px -16px rgba(15,24,40,.28),0 2px 6px rgba(15,24,40,.07);
  display:flex;flex-direction:column;gap:8px;
  position:relative;
  transition:transform .2s ease;
}
.rev-card:nth-child(1){transform:rotate(-1.4deg);}
.rev-card:nth-child(2){transform:rotate(.9deg);}
.rev-card:nth-child(3){transform:rotate(-.6deg);}
.rev-card:nth-child(4){transform:rotate(1.2deg);}
.rev-card:hover{transform:rotate(0deg) translateY(-2px);}
.rev-card-head{display:flex;align-items:center;gap:10px;}
.rev-card-head .av{
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--ff);font-weight:900;font-size:15px;color:#fff;
  flex-shrink:0;letter-spacing:-.01em;
}
.rev-card-head .av.c1{background:var(--navy-d);color:var(--gold-l);}
.rev-card-head .av.c2{background:var(--gold-d);color:var(--paper);}
.rev-card-head .av.c3{background:var(--navy);color:var(--gold-l);}
.rev-card-head .av.c4{background:var(--gold);color:var(--navy-d);}
.rev-card-head .nm{
  font-size:13.5px;font-weight:800;color:var(--navy-d);
  letter-spacing:-.005em;line-height:1.2;flex:1;min-width:0;
}
.rev-card-head .nm span{
  display:block;font-size:11px;font-weight:600;color:var(--ink-soft);
  margin-top:1px;letter-spacing:0;
}
.rev-card-head .g-mark{width:18px;height:18px;flex-shrink:0;opacity:.9;}
.rev-card-stars{
  display:flex;align-items:center;gap:8px;line-height:1;
}
.rev-card-stars .ss{color:var(--gold-d);font-size:14px;letter-spacing:1.5px;}
.rev-card-stars .when{
  color:var(--ink-soft);font-size:11px;font-weight:600;letter-spacing:0;
}
.rev-card .q{
  font-size:14px;line-height:1.45;color:var(--ink);font-weight:500;
  margin:0;letter-spacing:-.005em;
}
.rev-card-foot{
  display:flex;align-items:center;gap:6px;
  margin-top:2px;padding-top:8px;
  border-top:1px solid rgba(15,24,40,.06);
  font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-soft);
}
.rev-card-foot svg{width:12px;height:12px;}
.rev-card-foot b{color:var(--navy-d);font-weight:800;}

.rev-cta{
  display:flex;justify-content:center;margin-top:14px;padding:0 18px;
}
.rev-cta a{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:800;color:var(--blue-d);
  text-decoration:underline;text-underline-offset:3px;
}

/* ════════════════════════════════════════════════════════════════
   BLOG RAIL — most recent posts (live from firestore)
   ════════════════════════════════════════════════════════════════ */
.s-blog{padding:28px 0 8px;}
.s-blog .head{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 18px;margin-bottom:14px;text-align:center;gap:6px;}
.s-blog h2{font-weight:900;font-size:28px;line-height:1.05;letter-spacing:-.028em;color:var(--ink);margin-top:10px;}
.s-blog h2 em{font-weight:600;}
.s-blog .see{font-size:11.5px;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.blog-rail{
  display:flex;gap:12px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;touch-action:pan-x;
  padding:8px 18px 18px 30px;margin:0 -18px;scrollbar-width:none;
  scroll-padding-inline-start:30px;
}
.blog-rail::-webkit-scrollbar{display:none;}
.blog-card{
  flex:0 0 76%;scroll-snap-align:start;
  background:var(--paper);
  border:1px solid rgba(15,24,40,.06);
  border-radius:20px;overflow:hidden;
  touch-action:pan-x pan-y;-webkit-user-drag:none;
  display:flex;flex-direction:column;
  box-shadow:0 8px 22px -14px rgba(15,24,40,.16);
}
.blog-card .pic{
  aspect-ratio:16/10;background:linear-gradient(140deg,var(--blue-xxl),var(--blue-xl));
  background-size:cover;background-position:center;
}
.blog-card .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;}
.blog-card .cat{
  font-size:9px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-d);
}
.blog-card .ti{font-weight:900;font-size:15px;letter-spacing:-.014em;color:var(--ink);line-height:1.25;}
.blog-card .ti em{font-weight:600;color:var(--blue-d);}
.blog-card .ex{font-size:12px;color:var(--ink-soft);font-weight:500;line-height:1.4;}
.blog-card .meta{font-size:10px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:var(--ink-mute);margin-top:auto;padding-top:4px;}
.blog-skel{display:flex;gap:12px;padding:8px 18px 18px;}
.blog-skel .sk{flex:0 0 76%;height:280px;border-radius:20px;background:linear-gradient(110deg,var(--blue-xxl) 30%,var(--blue-xl) 50%,var(--blue-xxl) 70%);background-size:200% 100%;animation:skel 1.4s linear infinite;}
@keyframes skel{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* ════════════════════════════════════════════════════════════════
   SOCIAL · find us / follow us / talk to us
   ════════════════════════════════════════════════════════════════ */
.s-social{margin:8px 12px 0;}
.social-head{padding:0 6px;margin-bottom:14px;}
.social-head h2{font-weight:900;font-size:28px;line-height:1.05;letter-spacing:-.028em;color:var(--ink);margin-top:10px;}
.social-head h2 em{font-weight:600;color:#1E40AF !important;}
.social-head .sub{font-size:14px;line-height:1.5;color:var(--ink-soft);font-weight:500;margin-top:6px;}
.social-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.social-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;
  padding:18px 14px;background:var(--paper);
  border:1px solid rgba(15,24,40,.06);border-radius:14px;
  box-shadow:0 1px 3px rgba(15,24,40,.04);
  transition:transform .2s ease, box-shadow .2s ease;
}
.social-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px -6px rgba(15,24,40,.18);}
.social-card .icn{
  width:38px;height:38px;border-radius:10px;
  display:grid;place-items:center;flex-shrink:0;color:var(--paper);
}
.social-card .icn svg{width:20px;height:20px;}
.social-card.ig .icn{background:linear-gradient(135deg,#FE5045 0%,#DD2A7B 50%,#8134AF 100%);}
.social-card.tt .icn{background:var(--ink);position:relative;}
.social-card.em .icn{background:var(--blue);}
.social-card.ph .icn{background:var(--green);}
.social-card .body{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;text-align:center;}
.social-card .lbl{font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);}
.social-card .val{font-size:13.5px;font-weight:900;letter-spacing:-.010em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ════════════════════════════════════════════════════════════════
   FAQ
   ════════════════════════════════════════════════════════════════ */
.s-faq{margin:28px 12px 0;}
.faq-head{padding:0 6px;margin-bottom:16px;}
.faq-head h2{font-weight:900;font-size:30px;line-height:1.02;letter-spacing:-.030em;color:var(--ink);margin-top:10px;}
.faq-head h2 em{font-weight:600;}
.faq-head .sub{font-size:14px;line-height:1.5;color:var(--ink-soft);font-weight:500;margin-top:8px;}
.faq-list{
  background:var(--paper);
  border:1px solid rgba(15,24,40,.06);border-radius:20px;
  box-shadow:0 1px 3px rgba(15,24,40,.04);
  overflow:hidden;
}
.faq-item{border-top:1px solid rgba(15,24,40,.08);}
.faq-item:first-child{border-top:none;}
.faq-q{
  width:100%;background:none;border:none;padding:16px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  text-align:left;cursor:pointer;
  font-family:inherit;font-weight:900;font-size:14.5px;letter-spacing:-.014em;color:var(--ink);
  text-transform:lowercase;line-height:1.3;
}
.faq-q .qtext{flex:1;min-width:0;}
.faq-q em{font-weight:600;color:#1E40AF;}
.faq-q::after{content:none;} /* suppress legacy home.css "+" — we use our own SVG caret */
.faq-q .caret{
  flex-shrink:0;width:24px;height:24px;border-radius:8px;
  background:#1E40AF;color:#ffffff;
  display:grid;place-items:center;transition:transform .3s ease, background .25s ease;
}
.faq-q .caret svg{width:12px;height:12px;}
.faq-q .caret svg{color:#ffffff;stroke:#ffffff;}
.faq-item.open .faq-q .caret{transform:rotate(45deg);background:var(--tandoco-blue);color:#ffffff;}
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .35s ease;
}
.faq-a-inner{
  padding:0 18px 16px;
  font-size:13.5px;line-height:1.55;color:var(--ink-soft);font-weight:500;
}
.faq-a-inner em{font-weight:600;color:var(--blue-d);}
.faq-item.open .faq-a{max-height:400px;}

/* ════════════════════════════════════════════════════════════════
   STICKY BOTTOM CTA
   ════════════════════════════════════════════════════════════════ */
.bottom-cta{
  position:sticky;bottom:14px;z-index:40;
  margin:36px 14px 16px;background:var(--blue-d);color:var(--paper);
  padding:14px 16px 14px 20px;border-radius:16px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  box-shadow:0 18px 36px -10px rgba(11,20,55,.55);
}
.bottom-cta .lbl{display:flex;flex-direction:column;gap:2px;}
.bottom-cta .lbl .top{font-size:9.5px;font-weight:800;letter-spacing:.20em;text-transform:uppercase;color:rgba(255,255,255,.65);}
.bottom-cta .lbl .bot{font-size:14px;font-weight:800;letter-spacing:-.005em;color:var(--paper);}
.bottom-cta .lbl .bot em{font-weight:600;color:var(--gold-l);}
.bottom-cta .go{background:var(--gold);color:var(--ink);width:42px;height:42px;border-radius:99px;display:grid;place-items:center;}
.bottom-cta .go svg{width:18px;height:18px;}

/* ── MOBILE STICKY CONFLICT — only one bottom pill at a time.
   cart-pill.js (/scripts/cart-pill.js) renders <a.cart-pill-mobile> on
   every page; it has class .cp-empty when the cart is empty and one of
   .cp-standard/.cp-below-min/.cp-met/.cp-cutoff when it has items.
   On the homepage we ALSO have the .bottom-cta "order this sunday"
   sticky. To avoid stacking two pills at the bottom-right:
     - cart empty   → hide cart-pill, show .bottom-cta
     - cart has items → hide .bottom-cta, cart-pill shows
   Uses :has() (supported in every modern browser since mid-2023). */
.cart-pill-mobile.cp-empty{display:none!important;}
body:has(.cart-pill-mobile:not(.cp-empty)) .bottom-cta{display:none;}

/* ── NAV DROPDOWN ARROW — restore the chevron next to "store" / "about us"
   nav-drawer.js injects .nav-dd wrappers around those links and nav.css
   styles a CSS arrow via .nav-dd-trigger::after. home.css (which only the
   homepage loads) also defines `.nav-links a::after { height:1px; ... }`
   for a hover-underline effect — that rule has higher specificity (0,1,2
   vs 0,1,1) and turns the arrow into a 1px line. Override here so the
   arrow renders the same way it does on /about, /store, etc. */
.nav-links .nav-dd-trigger::after{
  content:'';position:static;display:inline-block;
  width:5px;height:5px;left:auto;right:auto;bottom:auto;
  background:transparent;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  border-radius:0;
  transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .2s ease;opacity:.7;
}
.nav-links .nav-dd:hover .nav-dd-trigger::after,
.nav-links .nav-dd:focus-within .nav-dd-trigger::after{
  transform:rotate(225deg) translate(-1px,-1px);opacity:1;
}


@media(min-width:640px){
  .s-hero, .s-math, .s-coach, .s-ai, .bottom-cta,
  .s-cats, .s-hw, .s-rev, .s-chips, .s-map, .s-who, .s-blog, .s-social, .s-faq, .coach-card{
    max-width:480px;margin-left:auto;margin-right:auto;
  }
  .s-coach .coach-head, .s-coach .coach-photo{max-width:480px;margin-left:auto;margin-right:auto;}
}

/* ════════════════════════════════════════════════════════════════
   DESKTOP — multi-column layouts, larger type, wider canvas
   ════════════════════════════════════════════════════════════════ */
@media(min-width:960px){
  /* sections share a generous canvas cap and a consistent center axis,
     so every block lines up edge-to-edge as you scroll. larger than
     the legacy 1140 cap, but still constrained so type doesn't sprawl. */
  .s-hero, .s-chips, .s-cats, .s-hw, .s-who, .s-map,
  .s-ai, .s-coach, .s-math, .s-rev, .s-blog, .s-social, .s-faq, .bottom-cta{
    max-width:1140px;margin-left:auto;margin-right:auto;
  }
  .s-chips, .s-cats, .s-hw, .s-who, .s-map, .s-coach,
  .s-rev, .s-blog, .s-social, .s-faq{
    padding-left:32px;padding-right:32px;
  }
  html,body{background:#ffffff;}

  /* every contained section reads as a soft cream card lifting off
     the darker cream-d body · cream bg + rounded corners + drop
     shadow + consistent 40px vertical gap between every section. */
  .s-hero,
  .s-cats,
  .s-hw,
  .s-who,
  .s-whole,
  .s-math,
  .s-rev,
  .s-blog,
  .s-social,
  .s-faq,
  .s-coach,
  .s-map,
  .s-ai{
    border-radius:28px;
    box-shadow:
      0 22px 44px -28px rgba(15,24,40,.22),
      0 6px 14px -8px rgba(15,24,40,.10),
      0 1px 0 rgba(255,255,255,.6) inset;
    margin:40px auto 0 !important;
    max-width:1140px !important;
  }
  /* (per-section bg rhythm is defined globally above — no unified
     cream override here) */

  /* (cream-l rule moved out of this @media block — it now applies at
     both mobile and desktop) */
  /* hero is the first section · larger top margin from the nav */
  .s-hero{margin-top:96px !important;}

  /* DESKTOP HERO · matches the production live homepage layout — a
     contained card with text on the LEFT and the food photo as a
     right-side background image. 1140 max-width, 600 min-height, pale
     gray paper bg behind everything. */
  .s-hero{
    position:relative;
    margin:120px auto 0 !important;
    max-width:1140px !important;
    min-height:600px;
    padding:56px 32px 22px;
    /* food photo fully inside the card · sized by HEIGHT so the whole
       portrait shot fits the hero with breathing room on the right */
    background:
      url('./images/hero-food-scatter.webp?v=transparent') no-repeat
        right 0 center / auto 115%,
      #F5F7FC;
    border-radius:28px;
    overflow:hidden;
    display:flex;flex-direction:column;
  }
  /* the inline .hero-photo wrapper is a passthrough on desktop — its
     children (img + .hero-intro) flow as direct s-hero children, so the
     section's background-image hosts the food and .hero-intro flows
     in normal layout. */
  .hero-photo{
    display:contents;
  }
  .hero-photo img{display:none;}
  .hero-intro{
    position:relative !important;
    top:auto !important;bottom:auto !important;
    left:auto !important;right:auto !important;
    transform:none !important;
    padding:0;margin:0;
    max-width:none;width:auto;
    background:transparent;
    align-items:flex-start !important;text-align:left !important;
    gap:0;
    z-index:1;
    /* fill the s-hero vertical space so the trust row can pin to the
       bottom via margin-top:auto */
    flex:1 1 auto;
    align-self:stretch;
    min-height:100%;
    display:flex;flex-direction:column;
  }
  .hero-h1{
    font-size:64px;line-height:.96;max-width:620px;
    margin:0 0 18px;
    color:#000;
    text-align:left !important;
    text-shadow:none;
  }
  .hero-h1 em{color:var(--tandoco-blue) !important;}
  .hero-sub{
    font-size:17px;line-height:1.55;max-width:520px;
    margin:0 0 24px;
    color:#000;
    text-align:left !important;
    text-shadow:none;
  }
  .hero-sub b{color:var(--tandoco-blue) !important;text-shadow:none !important;}
  .hero-sub em{color:var(--gold-d) !important;text-shadow:none !important;}
  /* CTAs · order button + menu icon · margin-top:auto pushes them
     to the bottom of the hero column so they sit RIGHT ABOVE the
     trust/review line instead of floating under the sub copy. */
  .s-hero .hero-ctas{
    display:flex !important;gap:10px;max-width:420px;
    margin:auto 0 14px;
  }
  .hero-ctas .btn{flex:1;min-height:56px;font-size:15px;}
  .hero-ctas .btn.ink{
    background:var(--tandoco-blue) !important;color:#ffffff !important;
  }
  .hero-ctas .btn.ink svg{stroke:#ffffff !important;}
  .hero-ctas .btn.ghost{
    background:var(--paper);color:var(--ink);
    box-shadow:inset 0 0 0 1.5px rgba(15,24,40,.10);
  }
  .hero-ctas .btn.icon-only{flex:0 0 56px;width:56px;padding:0;}
  .hero-ctas .btn.icon-only svg{width:20px;height:20px;}
  /* trust row · review line directly under the CTAs (CTAs own the
     bottom-pin via margin-top:auto above). */
  .s-hero .hero-trust{
    display:flex !important;align-items:flex-end;justify-content:space-between;gap:24px;
    margin-top:0;padding-top:14px;
    max-width:520px;
    border-top:1.5px dashed rgba(15,24,40,.18);
  }
  .hero-trust .tr-cell{display:flex;flex-direction:column;gap:3px;}
  .hero-trust .tr-cell.right{align-items:flex-end;text-align:right;}
  .hero-trust .stars-row{display:inline-flex;align-items:center;gap:7px;}
  .hero-trust .g-mark{flex-shrink:0;width:14px;height:14px;}
  .hero-trust .stars{color:#000;font-weight:900;letter-spacing:1.5px;font-size:14px;line-height:1;}
  .hero-trust .tr-lbl{
    font-size:10.5px;font-weight:700;letter-spacing:.04em;
    color:#000;
  }
  .hero-trust .tr-lbl b{color:#000;font-weight:900;}
  .hero-trust .cdwn{
    font-style:italic;font-weight:900;font-size:20px;
    color:#000;letter-spacing:-.012em;line-height:1;
    font-variant-numeric:tabular-nums;
  }
  .hero-trust .cdwn .sep{color:#000;font-style:normal;margin:0 3px;}

  /* info chips · 4 columns side-by-side (bumped from 3 on 2026-05-18
     when the functional-food chip joined the row). On viewports
     under ~1200px the chips compress to fit; the .chip rule below
     keeps padding tight enough to handle it. If we add a 5th later,
     switch to a 2-row 3+2 layout via grid-template-columns:repeat(3,1fr)
     and explicitly hide gap-overflow. */
  .s-chips{margin:18px auto 0;display:grid;grid-template-columns:repeat(3, 1fr);gap:12px;padding-top:0;padding-bottom:0;}
  .chip{padding:16px 18px;}
  .chip .body .top{font-size:12.5px;line-height:1.3;}
  .chip .body .bot{font-size:11px;}

  /* browse the kitchen · keep position:relative + overflow:hidden so
     the gold semicircle bleed (::before) stays inside the section
     instead of escaping into the page corner. matches mobile. */
  .s-cats{
    padding:32px 32px 24px;
    position:relative !important;
    overflow:hidden !important;
    margin:32px auto 0 !important;
    max-width:1140px !important;
    color:var(--ink);
  }
  .s-cats .head{padding:0;margin-bottom:24px;position:relative;z-index:1;}
  .s-cats h2{font-size:36px;}
  .cats-rail{
    overflow:visible;justify-content:space-between;gap:8px;
    padding:8px 0 16px;margin:0;position:relative;z-index:1;
  }
  .cat-tile{width:140px;gap:12px;}
  .cat-tile .disc{width:120px;height:120px;}
  .cat-tile .nm{font-size:14px;}
  .cat-tile .pick{font-size:9.5px;padding:4px 9px;right:-2px;top:-4px;}
  /* countdown lives in the hero trust row on desktop (production
     parity) — drop the duplicate from the kitchen. keep the
     see-full-menu CTA so the kitchen section has its own way out. */
  .cats-countdown{display:none;}
  .cats-cta{margin-top:6px;}

  /* how it works · standalone card aligned with everything else */
  .s-hw{
    padding:40px 40px 36px;
    position:relative;z-index:1;
    margin:24px auto 0 !important;
    max-width:1140px !important;
    border-radius:28px;
  }
  .s-hw .head{padding:0;margin-bottom:24px;}
  .s-hw h2{font-size:44px;line-height:1.0;}
  /* legacy 4-col container CSS (dead markup) */
  .hw-stack{grid-template-columns:repeat(4,1fr);gap:24px;padding:8px 0 16px;}

  /* for everyone · 2-col grid on desktop. Wreath left, editorial
     sidebar right with the static 8-persona list synced to the
     rotating wreath. */
  .s-who{
    padding-top:28px;padding-bottom:16px;
    position:relative;overflow:visible;
  }
  .s-who::before{font-size:200px;top:0;right:0;}
  .who-head{padding:0;margin-bottom:28px;}
  .who-head h2{font-size:44px;line-height:1.0;}
  .who-head .sub{font-size:16px;max-width:640px;}

  .who-grid{
    display:grid;grid-template-columns:540px 1fr;
    gap:56px;align-items:start;
  }
  .who-photo{
    aspect-ratio:1/1;max-width:540px;
    margin:0;
  }
  .who-center{max-width:240px;width:42%;}
  .who-center .h{font-size:28px;}
  .who-center .tg{font-size:13.5px;}

  .who-side{display:block;padding-top:6px;}
  .who-side .eye{color:var(--gold-d);}
  .who-side .h{
    font-family:var(--ff);font-weight:900;font-size:30px;line-height:1.04;
    letter-spacing:-.022em;color:var(--ink);margin:10px 0 12px;
  }
  .who-side .h em{
    font-weight:600;font-style:italic;color:var(--blue-d);
    letter-spacing:-.014em;
  }
  .who-side .lede{
    font-family:var(--serif);font-style:italic;font-weight:400;
    font-size:19px;line-height:1.32;letter-spacing:-.010em;
    color:var(--ink);margin-bottom:22px;
  }
  .who-side .lede em{
    font-family:var(--ff);font-weight:600;font-style:italic;
    color:var(--blue-d);letter-spacing:-.014em;
  }
  .who-side hr{
    height:0;border:0;border-top:1.5px dashed var(--gold-d);
    opacity:.5;margin:0 0 18px;
  }
  .who-side .rail-lbl{
    display:inline-block;
    font-family:var(--ff);font-size:10.5px;font-weight:900;
    letter-spacing:.26em;text-transform:uppercase;
    color:var(--gold-d);margin-bottom:12px;
  }
  .who-side .rail{
    list-style:none;padding:0;margin:0;
    display:flex;flex-direction:column;gap:8px;
  }
  .who-side .rail .row{
    display:grid;grid-template-columns:14px 1fr auto;
    align-items:center;gap:12px;
    padding:10px 14px;
    border-radius:14px;
    box-shadow:0 4px 10px -8px rgba(15,24,40,.10);
    transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  .who-side .rail .sw{
    width:12px;height:12px;border-radius:50%;
    background:var(--c, var(--gold-d));
    box-shadow:0 0 0 2px var(--paper),0 0 0 3px rgba(15,24,40,.10);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .who-side .rail .nm{
    font-family:var(--ff);font-size:14.5px;font-weight:900;
    color:var(--ink);letter-spacing:-.008em;
    text-transform:uppercase;
  }
  .who-side .rail .tg{
    font-family:var(--ff);font-size:13px;font-weight:600;
    color:var(--ink-soft);letter-spacing:-.002em;
    font-style:italic;
  }
  /* active row · the persona currently showing in the wreath */
  .who-side .rail .row.active{
    background:var(--blue-xl) !important;
    transform:translateX(4px);
    box-shadow:0 8px 18px -10px rgba(15,24,40,.20);
  }
  .who-side .rail .row.active .sw{
    transform:scale(1.35);
    box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--c, var(--gold-d));
  }
  .who-side .rail .row.active .nm{color:var(--ink);}
  .who-side .rail .row.active .tg{color:var(--ink);font-weight:700;}

  /* postcard · slight tilt for editorial postcard feel at desktop */
  .s-map{padding-top:28px;padding-bottom:16px;}
  .map-head{margin-bottom:28px;}
  .map-head h2{font-size:40px;}
  .map-head .sub{font-size:16px;max-width:580px;}
  .postcard{transform:rotate(-.6deg);max-width:920px;}

  /* intelligence · text left · phone right */
  .s-ai{
    padding:40px 32px;margin-top:28px;
    display:grid;grid-template-columns:1fr 320px;column-gap:64px;row-gap:14px;
    align-items:start;
  }
  .s-ai .eye,.s-ai h2,.s-ai .sub,.s-ai .ai-feats,.s-ai .btn{grid-column:1;}
  .s-ai .btn.s-ai-cta{justify-self:start;margin-left:0 !important;align-self:start;}
  .s-ai h2{font-size:48px;line-height:1.0;}
  .s-ai .sub{font-size:16px;max-width:560px;}
  .phone-wrap{grid-column:2;grid-row:1 / 6;align-self:center;justify-self:end;margin-bottom:0;}
  .phone{width:280px;margin-bottom:0;}
  .ai-feats{margin-top:12px;grid-template-columns:1fr 1fr;gap:12px;}
  .ai-feat{padding:16px;}
  .ai-feat .nm{font-size:13.5px;}
  .ai-feat .tg{font-size:12px;}

  /* coach · header full width, then photo left + card right · card vertically centered */
  .s-coach{
    margin:28px auto 0;padding:40px 32px 40px;
    display:grid;grid-template-columns:1fr 1fr;column-gap:36px;row-gap:0;
    align-items:start;
  }
  .s-coach .coach-head{grid-column:1 / -1;padding:0;margin:0 0 24px;max-width:none;text-align:center;}
  .s-coach .coach-photo{max-width:none;margin:0;}
  .coach-head h2{font-size:44px;text-align:center;}
  .coach-head .sub{font-size:16px;max-width:640px;text-align:center;margin-left:auto;margin-right:auto;}
  /* chat on the LEFT, production-style coach photo on the RIGHT —
     both pinned to row 2 so they sit side-by-side under the head. */
  .coach-chat{grid-column:1;grid-row:2;align-self:start;margin:0;}
  .coach-photo{
    display:block;
    grid-column:2;grid-row:2 / span 2;
    aspect-ratio:1/1;margin:0;width:100%;
    align-self:start;border-radius:24px;
  }
  /* explanatory copy · sits below the chat in the left column */
  .coach-detail{
    display:block;
    grid-column:1;grid-row:3;
    margin:24px 0 0;
    padding-right:8px;
  }
  .coach-detail-eye{
    display:inline-block;
    font-family:var(--ff);font-size:10.5px;font-weight:900;
    letter-spacing:.22em;text-transform:uppercase;
    color:var(--gold-d);margin-bottom:10px;
  }
  .coach-detail-h{
    font-family:var(--ff);font-weight:900;
    font-size:24px;line-height:1.15;letter-spacing:-.018em;
    color:var(--navy-d);margin:0 0 12px;
  }
  .coach-detail-h em{font-style:italic;font-weight:600;color:var(--tandoco-blue);letter-spacing:-.014em;}
  .coach-detail-p{
    font-size:14.5px;line-height:1.55;color:var(--ink);
    font-weight:500;margin:0 0 16px;
  }
  .coach-detail-p em{font-style:italic;font-weight:700;color:var(--navy-d);}
  .coach-detail-feats{
    list-style:none;padding:0;margin:0;
    display:flex;flex-direction:column;gap:10px;
  }
  .coach-detail-feats li{
    display:flex;align-items:flex-start;gap:10px;
    font-size:13.5px;line-height:1.45;color:var(--ink-soft);
  }
  .coach-detail-feats li .dot{
    flex-shrink:0;width:8px;height:8px;border-radius:50%;
    background:var(--gold);margin-top:6px;
  }
  .coach-detail-feats li b{color:var(--navy-d);font-weight:800;}
  .coach-card{
    grid-column:2;margin:0;align-self:center;
    padding:32px;display:flex;flex-direction:column;gap:18px;
  }
  .coach-feats{
    grid-column:1 / -1;
    display:grid;grid-template-columns:repeat(3, 1fr);
    gap:14px;margin:24px 0 0;padding:0;
  }
  .coach-feats li{padding:18px 20px;}
  .coach-feats .nm{font-size:14.5px;}
  .coach-feats .tg{font-size:13px;}
  .coach-card .coach-id{margin-bottom:4px;}
  .coach-card .coach-id .nm{font-size:18px;}
  .coach-msg{font-size:14px;line-height:1.55;}
  .coach-cta{margin-top:4px;}

  /* what it costs · 2-col on desktop. LEFT column = eye/h2/sub +
     winner card + vs rows + foot + cta. RIGHT column = full math
     comparison table + savings bullets. left-aligned typography. */
  .s-math{
    margin:32px auto 0;
    padding:40px 40px 36px;
    display:grid;grid-template-columns:1fr 1fr;
    column-gap:48px;row-gap:0;
    text-align:left !important;
    align-items:start;
  }
  /* override the global s-math centering for desktop · everything in
     the left column reads left-aligned */
  .s-math > .eye, .s-math > h2, .s-math > .sub,
  .s-math .v3-foot{
    grid-column:1;
    text-align:left !important;
    margin-left:0 !important;margin-right:0 !important;
    align-self:flex-start;
  }
  .s-math > .eye{display:inline-flex !important;align-self:flex-start !important;}
  .s-math h2{font-size:42px;margin:10px 0 10px;line-height:1.0;}
  .s-math .sub{font-size:15px;margin-bottom:20px;max-width:none;}
  .s-math .v3-winner{
    grid-column:1;max-width:none;margin:0;
  }
  .s-math .v3-vs{
    grid-column:1;max-width:none;margin-top:14px;
    display:flex;flex-direction:column;gap:8px;
  }
  .s-math .v3-foot{margin-top:18px;font-size:13px;max-width:none;}
  .s-math .v3-cta{
    grid-column:1;
    max-width:380px;margin-top:16px;
    justify-self:flex-start;
    margin-left:0 !important;margin-right:0 !important;
  }
  /* right column · math table panel · spans all rows of the left col */
  .v3-math-side{
    display:block;
    grid-column:2;grid-row:1 / span 99;
    align-self:start;
    padding:24px 26px;
    background:var(--paper);
    border-radius:18px;
    border:1px solid rgba(15,24,40,.06);
    box-shadow:0 12px 28px -16px rgba(15,24,40,.18);
  }
  /* cards breathe more at ≥960px: wider gutters, larger type, all bullets */
  .s-math .v3-grid{gap:14px;}
  .s-math .v3-card{padding:20px 18px;border-radius:18px;}
  .s-math .v3-card .tag{font-size:10px;margin-bottom:8px;}
  .s-math .v3-card .nm{font-size:20px;margin-bottom:10px;}
  .s-math .v3-card .price .amt{font-size:40px;}
  .s-math .v3-card .price .per{font-size:11px;}
  .s-math .v3-card .mood{font-size:11.5px;margin-bottom:14px;}
  .s-math .v3-card ul{gap:8px;}
  .s-math .v3-card ul li{font-size:12.5px;gap:8px;}
  .s-math .v3-card ul li:nth-child(n+3){display:flex;} /* show all bullets on desktop */
  .s-math .v3-card ul li .mk{width:14px;height:14px;}
  .s-math .v3-card ul li .mk svg{width:9px;height:9px;}
  .s-math .v3-card.pick{transform:translateY(-8px);}
  .s-math .v3-card.pick .sticker{top:-12px;right:14px;left:auto;transform:rotate(6deg);font-size:10px;padding:6px 12px;}
  .s-math .v3-foot{margin-top:20px;font-size:13px;}
  .s-math .v3-cta{max-width:380px;justify-self:start;margin-top:20px;margin-left:auto;margin-right:auto;display:flex;}

  /* coach header copy left-aligned to the page gutter */
  .coach-head{text-align:left;}
  .coach-head .eye,.coach-head h2,.coach-head .sub{text-align:left;}

  /* reviews · 2x2 grid of google-style cards on desktop */
  .s-rev{padding-top:36px;padding-bottom:18px;}
  .s-rev .head{padding:0;}
  .s-rev h2{font-size:36px;}
  .rev-stack{
    display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
    padding:8px 24px 8px;
  }
  .rev-card .q{font-size:15px;line-height:1.45;}

  /* blog rail · stay as horizontal scrolling rail · aligned to same left edge */
  .s-blog{padding-top:28px;padding-bottom:16px;}
  .s-blog .head{padding:0;}
  .s-blog h2{font-size:36px;}
  .blog-rail{padding:12px 0 24px;margin:0;gap:18px;}
  .blog-card{flex:0 0 360px;}
  .blog-card .ti{font-size:17px;}
  .blog-card .ex{font-size:13px;}

  /* social · 4-col row on desktop */
  .s-social{padding-top:8px;padding-bottom:16px;}
  .social-head{padding:0;margin-bottom:18px;}
  .social-head h2{font-size:36px;}
  .social-grid{grid-template-columns:repeat(4,1fr);gap:14px;}
  .social-card{padding:16px 18px;}
  .social-card .icn{width:42px;height:42px;}
  .social-card .icn svg{width:22px;height:22px;}
  .social-card .val{font-size:14.5px;}

  /* faq · full-width section, content left-aligned within */
  .s-faq{padding-top:8px;padding-bottom:24px;}
  .faq-head{margin-bottom:24px;}
  .faq-head h2{font-size:44px;}
  .faq-head .sub{font-size:16px;max-width:640px;}
  .faq-list{max-width:820px;}
  .faq-q{font-size:17px;padding:20px 24px;}
  .faq-q .caret{width:28px;height:28px;}
  .faq-a-inner{font-size:14.5px;padding:0 24px 20px;}

  /* sticky bottom cta · wider */
  .bottom-cta{margin:28px auto 24px;padding:16px 22px 16px 24px;}
  .bottom-cta .lbl .top{font-size:10.5px;}
  .bottom-cta .lbl .bot{font-size:16px;}
  .bottom-cta .go{width:46px;height:46px;}

  /* footer */
  .foot{padding:36px 24px 40px;font-size:12px;}

  /* ─── DESKTOP OVERHAUL · 2026-05-20 ─── modules built mobile-first
     now get proper desktop treatment so they don't sprawl or sit in
     empty whitespace at ≥960px viewports. */

  /* every section header reads centered on desktop. eye-kicker pill,
     h2, sub copy all align center-axis. paragraph max-widths are
     enforced where they aren't already so wide screens don't stretch
     the body copy to 1140ch line length. */
  .s-cats .head, .s-hw .head, .who-head, .map-head, .coach-head,
  .s-math .head, .s-rev .head, .s-blog .head, .social-head, .faq-head{
    text-align:center;
    display:flex;flex-direction:column;align-items:center;
  }
  .s-cats .head .eye, .s-hw .head .eye, .who-head .eye, .map-head .eye,
  .coach-head .eye, .s-math .eye, .s-rev .head .eye, .s-blog .head .eye,
  .social-head .eye, .faq-head .eye{
    align-self:center;
  }
  .who-head .sub, .map-head .sub, .coach-head .sub, .s-math .sub,
  .social-head .sub, .faq-head .sub, .s-hw .hw-sub{
    text-align:center;margin-left:auto;margin-right:auto;
  }

  /* SPOTIFY PLAYLIST · constrain to a real player width, center it
     under the section header so it reads like an actual app card
     instead of stretching across the whole canvas. */
  .s-hw{padding:40px 32px 36px;}
  .s-hw .head{margin-bottom:24px;}
  .s-hw h2{font-size:44px;}
  .s-hw .hw-sub{font-size:15px;}
  /* spotify playlist · horizontal at desktop. album art + meta sit on
     the LEFT, controls + track list + footer stack on the RIGHT — same
     mental model as a real Spotify player viewed on a wide screen. */
  .hw-spotify{
    max-width:960px;margin:8px auto 0;
    display:grid;grid-template-columns:340px 1fr;
    column-gap:0;
  }
  .hw-sp-hero{
    grid-column:1;grid-row:1 / span 5;
    flex-direction:column;align-items:flex-start;text-align:left;
    padding:32px 28px;gap:18px;
    background:linear-gradient(180deg,rgba(26,40,85,.55) 0%,transparent 100%);
  }
  .hw-sp-hero .hw-sp-art{width:228px;height:228px;align-self:center;}
  .hw-sp-hero .hw-sp-meta{align-items:flex-start;text-align:left;width:100%;}
  .hw-sp-art-letter{font-size:48px;}
  .hw-sp-art-sub{font-size:12px;letter-spacing:.24em;}
  .hw-sp-title{font-size:34px;line-height:1.0;margin:6px 0 6px;}
  .hw-sp-desc{font-size:12.5px;text-align:left;}
  .hw-sp-byline{margin-top:8px;}

  .hw-sp-controls{grid-column:2;padding:24px 28px 12px;gap:18px;}
  .hw-sp-tracks{grid-column:2;padding:0 16px 8px;}
  .hw-sp-track{padding:10px 18px;}
  .hw-sp-track-head{padding:8px 18px;margin:0 12px;}
  .hw-sp-tname{font-size:14.5px;}
  .hw-sp-tartist{font-size:12px;}
  .hw-sp-tdur{font-size:13px;}
  .hw-sp-now{grid-column:2;margin:6px 18px 0;}
  .hw-sp-progress{grid-column:2;padding:8px 28px 12px;}
  .hw-sp-cta-wrap{grid-column:2;padding:4px 28px 24px;justify-content:flex-start;}

  /* PRICING WINNER CARD · the current markup is winner-first (.v3-winner
     + .v3-vs), but the legacy desktop CSS targets .v3-grid which is
     hidden. Re-style for the active markup so the module reads as a
     premium pricing block instead of a thin mobile card stretched wide. */
  .s-math .v3-winner{
    padding:32px 28px 22px;border-radius:24px;
    max-width:none;margin:0;
  }
  .s-math .v3-winner-sticker{
    font-size:11.5px;padding:6px 14px;letter-spacing:.22em;
    top:-14px;
  }
  .s-math .v3-winner-head{margin-bottom:20px;}
  .s-math .v3-winner-nm{font-size:42px;letter-spacing:-.014em;}
  .s-math .v3-winner-price .amt{font-size:48px;}
  .s-math .v3-winner-price .per{font-size:14px;}
  .s-math .v3-winner-feats{gap:10px;margin-bottom:22px;}
  .s-math .v3-winner-feats li{font-size:15.5px;line-height:1.4;}
  .s-math .v3-winner-feats li .mk{width:22px;height:22px;}
  .s-math .v3-winner-feats li .mk svg{width:13px;height:13px;}
  .s-math .v3-winner-cta{padding:16px;font-size:15px;letter-spacing:.05em;}

  .s-math .v3-vs{
    margin:14px 0 0;max-width:none;
    display:flex;flex-direction:column;gap:8px;
  }
  .s-math .v3-vs-row{padding:14px 16px;}
  .s-math .v3-vs-row .vs-nm{font-size:14px;}
  .s-math .v3-vs-row .vs-amt{font-size:17px;}
  .s-math .v3-vs-row .vs-delta{font-size:12px;}
  .s-math .v3-vs-row .vs-tag{font-size:12.5px;}
  .s-math .v3-foot{margin-top:18px;font-size:13.5px;max-width:none;margin-left:0;margin-right:0;text-align:left !important;}

  /* WHOLE-FOODS COMMITMENT · split layout — video left, copy right */
  .s-whole{
    margin:36px auto 0;max-width:1140px;border-radius:32px;
    display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch;
    overflow:hidden;
    padding:0 !important; /* video must bleed to the section edge */
  }
  .s-whole .whole-video-wrap{
    aspect-ratio:auto;height:100%;
    border-radius:0;
  }
  .s-whole .whole-video-overlay{
    padding:32px 32px 32px;gap:12px;
  }
  .s-whole .whole-video-overlay .whole-h{font-size:42px;max-width:14ch;}
  .s-whole .whole-body{
    padding:40px 40px 40px;
    display:flex;flex-direction:column;justify-content:center;
  }
  .s-whole .whole-sub{font-size:16.5px;line-height:1.55;max-width:none;margin-bottom:20px;}
  .s-whole .whole-list{display:flex;flex-direction:column;gap:8px;}
  .s-whole .whole-list li{font-size:14.5px;}

  /* REVIEWS · cards already sit in 3-col on desktop but they're tight;
     give them more padding + spacing so the typography breathes. */
  .rev-summary{margin:0 auto 24px;max-width:480px;padding:18px 22px;gap:18px;}
  .rev-summary .num{font-size:40px;}
  .rev-summary .meta .stars{font-size:16px;}
  .rev-summary .meta .lbl{font-size:12.5px;}
  .rev-stack{padding:8px 0 12px;}
  .rev-card{padding:20px 20px 18px;gap:10px;}
  .rev-card-head .av{width:40px;height:40px;font-size:16px;}
  .rev-card-head .nm{font-size:14.5px;}
  .rev-card-head .nm span{font-size:11.5px;}
  .rev-card .q{font-size:14.5px;line-height:1.5;}
  .rev-cta{margin-top:18px;}

  /* MAP / FAQ / SOCIAL — small polish */
  .s-faq{padding-top:32px;}
  .faq-head h2{font-size:40px;line-height:1.0;}
  .faq-list{max-width:780px;margin-left:auto;margin-right:auto;}
  .faq-q{padding:18px 22px;font-size:16.5px;}
  .faq-a-inner{padding:0 22px 18px;font-size:14px;}
}

/* extra-wide screens · keep type from getting silly */
@media(min-width:1280px){
  /* Wider screens scale up the production-style contained hero
     proportionally — larger headline, food image stays fully visible
     on the right. */
  .s-hero{
    padding:64px 32px 24px;
    background:
      url('./images/hero-food-scatter.webp?v=transparent') no-repeat
        right 0 center / auto 120%,
      #F5F7FC;
  }
  .hero-h1{font-size:72px;max-width:640px;}
  .hero-sub{font-size:18px;}
}

/* ════════════════════════════════════════════════════════════════
   .d-home — desktop-only homepage block. Wrapped in @media so
   mobile never sees any of these rules. Auto-generated from
   index-desktop-mockup.html via scope_mockup_css.py.
   ──────────────────────────────────────────────────────────── */
@media (min-width: 960px) {

/* ════════════════════════════════════════════════════════════════
   TANDOCO DESKTOP HOMEPAGE — ground-up rebuild (May 22 2026)
   ────────────────────────────────────────────────────────────────
   Design language: "tandoco playful" — blues/golds/whites, big
   editorial Jakarta-only typography, semicircle bleeds, full-bleed
   colored sections with content centered in a comfortable column.
   Real production assets (hero food scatter, kitchen recipe photos,
   skyline photo, hero-food.mp4 video, real Google reviews).

   Built specifically for ≥960px viewports — mobile (≤959px)
   shows a "view on desktop" landing card so this file can never
   affect the production mobile design. When approved, these
   styles can ship to production scoped to @media (min-width:960px)
   without touching any mobile rules.

   Section flow:
     1. nav (editorial cream bar — matches live production)
     2. hero (split: type left, skyline + food scatter right)
     3. trust chips (3-col: second plate · wearables · adaptogens)
     4. browse the kitchen (asymmetric 1+5 meal grid)
     5. how it works (3-col day playlist — gold/blue/cream)
     6. who it's for (wreath + 8-persona list, ROYGBIV cycle)
     7. whole ingredients (full-bleed navy video band + no/yes list)
     8. pickup + delivery (phone card + drive-times sidebar)
     9. tandoco intelligence (navy band, tilted phone, ghost type)
     10. tandocoach (3-col: detail / photo / chat)
     11. what it costs (winner card + comparison rows + math)
     12. reviews (3-col real Google reviews)
     13. from the kitchen (3-col blog rail)
     14. social contact (4-col cards)
     15. faq (accordion, centered)
     16. footer (editorial 5-col)
   ──────────────────────────────────────────────────────────── */

.d-home {
  /* Brand palette — mobile-faithful (mirrors index.html :root) */
  --ink:     #0B1437;
  --ink-soft:#3A4458;
  --ink-mute:rgba(11,20,55,.55);
  --navy:    #0B1437;
  --navy-d:  #060B25;
  --tandoco-blue:   #1E2A78;
  --tandoco-blue-l: #3A4AA0;
  --blue-l:  #B5C0DE;
  --blue-xl: #DEE2EE;
  --blue-mist:#DEE2EE;
  --gold:    #E0B341;
  --gold-d:  #B88A1A;
  --gold-l:  #F2D079;
  --gold-xl: #FBEDC2;
  --blush:   #F5C9CC;
  --blush-d: #D49E9F;
  --paper:   #FAF7F0;
  --paper-warm:#FAF6EC;
  --cream:   #EBE3CF;
  --cream-d: #DCD2B6;
  --cream-l: #F4ECD8;
  --cream-xl:#F8F2DD;
  --green:   #16A34A;
  --coral:   #C87555;
  --border:  rgba(11,20,55,.10);

  --ff:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Jakarta-only build — display token points at the same family.
     Headlines use weight 900 + italic to read as "display" type. */
  --ff-d:  'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ─── Mobile gate — we deliberately do NOT design for <960px ─── */


.d-home {
  font-family: var(--ff);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.d-home img { max-width: 100%; display: block; }
.d-home a { color: inherit; text-decoration: none; }

/* Below 960 — show the desktop-only note, hide everything else */
.d-home .mobile-note { display: none; }
@media (max-width: 959px) {
  .d-home body > * { display: none !important; }
  .d-home body > .mobile-note { display: flex !important; }
}
.d-home .mobile-note {
  min-height: 100vh;
  align-items: center; justify-content: center;
  padding: 36px; text-align: center; background: var(--paper);
}
.d-home .mobile-note > div { max-width: 320px; }
.d-home .mobile-note h1 { font-family: var(--ff-d); font-size: 36px; color: var(--ink); margin: 0 0 12px; letter-spacing: -.018em; }
.d-home .mobile-note p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }


/* ════════════════════════════════════════════════════════════════
   TYPOGRAPHY + SHARED PRIMITIVES
   ──────────────────────────────────────────────────────────── */
.d-home .wrap { max-width: 1360px; margin: 0 auto; padding: 0 44px; }
.d-home .wrap-narrow { max-width: 1000px;  margin: 0 auto; padding: 0 44px; }

.d-home .eye {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 13px; font-weight: 900; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold-d);
}
.d-home .eye::before {
  display: none;
}
.d-home .eye.on-dark { color: var(--gold-l); }
.d-home .eye.on-dark::before { background: var(--gold-l); }

.d-home .headline {
  font-family: var(--ff-d); font-weight: 900;
  font-size: 72px; line-height: 1.02; letter-spacing: -.024em;
  color: var(--ink); margin: 16px 0 0;
}
.d-home .headline em {
  font-style: italic; color: var(--tandoco-blue);
}
.d-home .headline.on-dark { color: #fff; }
.d-home .headline.on-dark em { color: var(--gold-l); }
.d-home .lede {
  font-size: 20px; line-height: 1.55; font-weight: 500;
  color: var(--ink-soft); margin: 20px 0 0; max-width: 680px;
}
.d-home .lede em { font-style: italic; color: var(--tandoco-blue); font-weight: 600; }
.d-home .lede b { color: var(--ink); font-weight: 800; }
.d-home .lede.on-dark { color: rgba(255,255,255,.78); }
.d-home .lede.on-dark em { color: var(--gold-l); }
.d-home .lede.on-dark b { color: #fff; }

.d-home .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: 99px;
  font-family: var(--ff); font-size: 14.5px; font-weight: 800;
  letter-spacing: -.005em; text-decoration: none; cursor: pointer; border: none;
  transition: transform .15s, box-shadow .15s;
  white-space: nowrap;
}
.d-home .btn svg { width: 16px; height: 16px; }
.d-home .btn-ink {
  background: var(--ink); color: #fff;
  box-shadow: 0 12px 28px -10px rgba(11,20,55,.45);
}
.d-home .btn-ink:hover { transform: translateY(-1px); box-shadow: 0 18px 36px -14px rgba(11,20,55,.55); }
/* the kitchen section's "see full menu" is a rounded RECTANGLE, not a pill —
   matches the mobile .cats-cta (14px) + the site-wide .btn radius. Scoped to
   .k-foot so the hero's pill-shaped "order now" keeps its shape. */
.d-home .k-foot .btn { border-radius: 14px; }
.d-home .btn-gold {
  background: var(--ink); color: #fff;
  box-shadow: 0 12px 28px -10px rgba(11,20,55,.45);
}
.d-home .btn-gold:hover { transform: translateY(-1px); box-shadow: 0 18px 36px -14px rgba(11,20,55,.55); }
.d-home .btn-ghost {
  background: transparent; color: var(--ink);
  border: 1.5px solid rgba(11,20,55,.18);
}
.d-home .btn-ghost:hover { border-color: var(--ink); background: rgba(11,20,55,.04); }


/* ════════════════════════════════════════════════════════════════
   1 · NAV (editorial cream bar — matches the production desktop nav)
   ──────────────────────────────────────────────────────────── */
.d-home .nav-mock {
  position: fixed; top: 0; left: 0; right: 0; height: 60px;
  background: #FAF8F3;
  border-bottom: 1px solid rgba(15,24,40,.10);
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; padding: 0 32px;
  z-index: 200;
}
.d-home .nav-mock-left { display: flex; gap: 4px; align-items: center; }
.d-home .nav-mock-group {
  padding: 18px 12px; font-size: 13px; font-weight: 700;
  color: var(--navy); letter-spacing: -.01em; line-height: 1;
  background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.d-home .nav-mock-group svg { width: 10px; height: 10px; opacity: .55; }
.d-home .nav-mock-brand {
  font-family: var(--ff-d); font-size: 22px;
  color: var(--navy); letter-spacing: -.02em; padding: 0 24px;
}
.d-home .nav-mock-right { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.d-home .nav-mock-cart, .d-home .nav-mock-avatar {
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(27,26,107,.06); border: 1px solid rgba(27,26,107,.12);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--navy); cursor: pointer;
}
.d-home .nav-mock-avatar { border-radius: 50%; background: var(--navy); color: #fff; font-weight: 900; font-size: 12.5px; border: none; }
.d-home .nav-mock-cart svg { width: 16px; height: 16px; }
/* 2026-05-23 · was `padding-top:60px` to "clear the nav" — but
   the body already has padding-top:60px from styles/nav.css for
   the editorial bar, so this rule was stacking a SECOND 60px gap
   of paper-cream above the hero, reading as a "white strip"
   between the nav and the hero gradient. Removing it lets the
   hero's cream→blue gradient start flush at the bottom of the
   editorial bar. */
.d-home { padding-top: 0; }


/* ════════════════════════════════════════════════════════════════
   2 · HERO — split: type left, skyline + food scatter right
   ──────────────────────────────────────────────────────────── */
.d-home .hero {
  position: relative;
  background:
    radial-gradient(46% 52% at 88% 20%, rgba(242,208,121,.42) 0%, transparent 70%),
    radial-gradient(40% 46% at 6% 82%, rgba(126,150,232,.32) 0%, transparent 72%),
    radial-gradient(30% 34% at 70% 92%, rgba(245,138,120,.22) 0%, transparent 72%),
    linear-gradient(180deg, var(--cream-xl) 0%, var(--blue-mist) 100%);
  /* 2026-06-03 · bold/energetic redesign — a touch more vertical air so
     the bigger headline + photo breathe. */
  padding: 20px 0 44px;
  overflow: hidden;
  /* 2026-06-04 · fill the full browser height below the fixed 60px nav
     so the hero is a true full-screen opener. Flex column lets the
     ticker sit at top and the inner grid grow + vertically center in
     the remaining space. */
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
}
.d-home .hero::before {
  content:""; position: absolute; top: -140px; right: -200px;
  width: 580px; height: 580px; border-radius: 50%; opacity: .9;
  background: radial-gradient(circle at 30% 50%, var(--gold-l) 0%, var(--gold-l) 38%, var(--gold-xl) 65%, transparent 92%);
  pointer-events: none;
}
.d-home .hero::after {
  content:""; position: absolute; bottom: -270px; left: -180px;
  width: 540px; height: 540px; border-radius: 50%; opacity: .75;
  background: radial-gradient(circle at 70% 50%, var(--blue-l) 0%, var(--blue-l) 42%, var(--blue-xl) 68%, transparent 92%);
  pointer-events: none;
}

/* ──────────────────────────────────────────────────────────────
   HERO TRUST STRIP · v8 flat ticker — a slim solid-navy conveyor
   just under the fixed nav. Five facts (order-by, $9.99, adaptogens,
   donated, wearables) flow past as small letter-spaced icon+text
   items; key phrases + icons in gold. No glows, no separators.
   ────────────────────────────────────────────────────────────── */
.d-home .hero-ticker {
  position: relative; z-index: 5;
  /* -20px pulls the strip up to sit flush against the fixed nav,
     cancelling the hero's 20px top padding. */
  width: 100%; margin: -20px 0 22px; overflow: hidden;
  background: var(--navy-d);
}
.d-home .hero-ticker-track {
  display: flex; align-items: center; gap: 0;
  width: max-content; padding: 9px 24px;
  animation: heroTickerScroll 36s linear infinite;
}
.d-home .hero-ticker:hover .hero-ticker-track { animation-play-state: paused; }
@keyframes heroTickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .d-home .hero-ticker-track { animation: none; }
}
/* inline icon + text item on the strip */
.d-home .ht-item {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 0 22px; text-decoration: none;
  font-size: 12.5px; font-weight: 700; line-height: 1; letter-spacing: .08em;
  color: #fff; white-space: nowrap;
  transition: color .25s ease;
}
.d-home .ht-item:hover { color: var(--gold-l); }
.d-home .ht-item .ht-ic { display: grid; place-items: center; color: var(--gold-l); }
.d-home .ht-item .ht-ic svg { width: 13px; height: 13px; }
.d-home .ht-item b { font-weight: 800; color: var(--gold-l); }
.d-home .hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.18fr .82fr; gap: 40px;
  /* 2026-06-03 · center-aligned so the big headline column and the
     floating food photo sit balanced across the band. The left track
     is wide enough to hold "fuel your body," on one line. */
  align-items: center;
  /* 2026-06-04 · grow to fill the leftover height after the ticker and
     vertically center the row so the full-height hero reads balanced. */
  flex: 1 1 auto;
  align-content: center;
}
.d-home .hero-left {
  display: flex; flex-direction: column; gap: 24px;
  /* Just enough top padding to clear the fixed nav (60px tall) without
     piling extra empty space above the headline.
     2026-06-01 · tightened 28→16 so the headline + CTA + reviews row
     all clear the first screen on a laptop (was forcing a scroll just
     to see the order-now button). */
  padding-top: 16px;
  /* 2026-05-23 · pull the entire left column (h1 + sub + CTAs +
     trust row + chip stack) outward toward the viewport edge so the
     type doesn't sit visually centered. The hero photo lives in
     .hero-stage in the right grid cell and is unaffected.
     2026-05-28 · the -60px "bleed" only fits when the viewport is
     wide enough to absorb it; on smaller desktops/laptops it shoved
     the headline off the left edge (the hero clips overflow), cutting
     the first letter of every line. Default to 0 here and re-introduce
     the editorial bleed in a min-width:1400px block below. */
  margin-left: 0;
}
.d-home .hero-top { display: flex; flex-direction: column; }
.d-home .hero-bottom {
  display: flex; flex-direction: column; gap: 18px;
  /* Push the bottom group (CTAs + trust + the chip stack below it)
     further down from the sub copy.
     2026-06-01 · tightened 28→16 to help the order-now button + reviews
     row clear the first screen on a laptop. */
  margin-top: 16px;
}
.d-home .hero-bottom .hero-trust { margin-top: 0; padding-top: 0; }

/* The 3 trust chips, stacked vertically inside the left column,
   sitting under the reviews/timer trust row. Each pill is full-
   width of the left column (no horizontal 3-col grid here). */
/* 2026-06-01 · the 3 trust chips now sit SIDE-BY-SIDE in one short row
   (was a vertical stack) so the whole hero fits on one screen without
   scrolling. Labels are shortened + clipped (no wrap) so three chips
   share the left column's width cleanly. Falls back to the vertical
   stack on narrow/mobile widths (see the ≤900px override below). */
/* 2026-06-04 · the three feature chips become round floating badges,
   stacked down the right side of the hero, each gently bobbing + tilted
   like the navy "$9.99 flat delivery" sticker on the photo. */
.d-home .hero-chips-stack {
  position: absolute; right: 28px; top: 50%; transform: translateY(-50%);
  z-index: 4;
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
  width: auto; margin: 0;
}
.d-home .hero-chips-stack .chip {
  flex: 0 0 auto; width: 140px; height: 140px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 0 6px; text-align: center;
  background: var(--tandoco-blue) !important; color: #fff;
  border: none;
  box-shadow: 0 16px 30px rgba(11,20,55,.28);
  transition: box-shadow .18s, transform .18s;
}
.d-home .hero-chips-stack .chip:nth-child(1) { margin-right: 26px; animation: badgeFloatA 6.2s ease-in-out infinite .1s; background: #0A1233 !important; }
.d-home .hero-chips-stack .chip:nth-child(2) { margin-right: 0;    animation: badgeFloatB 6.6s ease-in-out infinite .7s; background: var(--gold-l) !important; }
.d-home .hero-chips-stack .chip:nth-child(3) { margin-right: 18px; animation: badgeFloatC 6.0s ease-in-out infinite .4s; }
/* gold circle (#2 · syncs to wearables) → navy text for contrast */
.d-home .hero-chips-stack .chip:nth-child(2) .body .top,
.d-home .hero-chips-stack .chip:nth-child(2) .body .top em { color: #0A1233; }
.d-home .hero-chips-stack .chip:nth-child(2) .body .bot { color: #0A1233; opacity: .68; }
@keyframes badgeFloatA { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(-5deg); } }
@keyframes badgeFloatB { 0%,100% { transform: translateY(0) rotate(5deg);  } 50% { transform: translateY(-12px) rotate(4deg);  } }
@keyframes badgeFloatC { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-9px)  rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) {
  .d-home .hero-chips-stack .chip { animation: none !important; }
}
.d-home .hero-chips-stack .chip:hover {
  box-shadow: 0 22px 40px rgba(11,20,55,.34);
}
.d-home .hero-chips-stack .chip .icn {
  display: none;
}
/* all three icons share the navy-bubble treatment (faint white disc, gold glyph) */
.d-home .hero-chips-stack .chip .icn.gold,
.d-home .hero-chips-stack .chip .icn.mid,
.d-home .hero-chips-stack .chip .icn.blush { background: rgba(255,255,255,.14); color: var(--gold-l); }
.d-home .hero-chips-stack .chip .icn svg { width: 13px; height: 13px; }
.d-home .hero-chips-stack .chip .body { flex: 0 0 auto; display: flex; flex-direction: column; gap: 7px; min-width: 0; align-items: center; }
.d-home .hero-chips-stack .chip .body .top { font-family: var(--ff-d); font-size: 19px; font-weight: 900; color: var(--gold-l); letter-spacing: -.02em; line-height: 1.0; white-space: normal; max-width: 120px; }
.d-home .hero-chips-stack .chip .body .top em { font-style: italic; color: #fff; }
.d-home .hero-chips-stack .chip .body .bot { font-size: 8.5px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .06em; line-height: 1.25; white-space: normal; max-width: 116px; opacity: .85; }
/* arrow hidden inside the round badge */
.d-home .hero-chips-stack .chip .arrow { display: none; }
.d-home .hero-chips-stack .chip .arrow svg { width: 11px; height: 11px; }
/* narrow / mobile: go back to the full-width vertical stack with the
   arrow + full labels visible (no clipping) */
@media (max-width: 900px) {
  .d-home .hero-chips-stack { flex-direction: column; gap: 10px; }
  .d-home .hero-chips-stack .chip { gap: 14px; padding: 12px 16px; border-radius: 14px; }
  .d-home .hero-chips-stack .chip .icn { width: 36px; height: 36px; border-radius: 10px; }
  .d-home .hero-chips-stack .chip .icn svg { width: 18px; height: 18px; }
  .d-home .hero-chips-stack .chip .body { gap: 2px; }
  .d-home .hero-chips-stack .chip .body .top { font-size: 13.5px; letter-spacing: -.005em; white-space: normal; overflow: visible; }
  .d-home .hero-chips-stack .chip .body .bot { font-size: 11px; white-space: normal; overflow: visible; }
  .d-home .hero-chips-stack .chip .arrow { display: inline-flex; }
}
.d-home .hero-eye {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 13px; font-weight: 900; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold-d);
}
.d-home .hero-eye::before { display: none; }
.d-home .hero-wordmark {
  display: block;
  font-family: var(--ff-d); font-weight: 900;
  font-size: 28px; color: var(--tandoco-blue);
  letter-spacing: -.022em; line-height: 1;
  margin: 22px 0 8px;
}
.d-home .hero-h1 {
  font-family: var(--ff-d); font-weight: 900;
  /* Fluid size: scales smoothly with the viewport so the headline
     fits its column at every desktop width (≈61px at 960px up to the
     96px cap on wide screens) instead of snapping between fixed
     sizes and overflowing in between. */
  /* 2026-06-01 · trimmed the fluid cap (58→54 floor, 96→82 cap) so the
     4-line headline takes less vertical room and the whole hero fits one
     screen on a laptop. */
  /* 2026-06-03 · bigger, punchier for the bold redesign — sized so
     "fuel your body," holds one line in the left column. */
  font-size: clamp(56px, 5.7vw, 98px); line-height: .98; letter-spacing: -.032em;
  color: var(--ink); margin: 0;
}
.d-home .hero-h1 .gold-word { color: var(--gold-d); }
.d-home .hero-h1 .shimmer {
  font-style: italic;
  /* inline-block + right/bottom padding so neither the italic slant on the
     final letter nor the descender on "g" is clipped by background-clip:text. */
  display: inline-block; padding-right: .12em; padding-bottom: .18em;
  background: linear-gradient(135deg, var(--gold-d) 0%, var(--gold-l) 35%, var(--gold) 65%, var(--gold-l) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 5s linear infinite;
}
@keyframes shimmer { to { background-position: 200% center; } }
.d-home .hero-sub {
  /* 2026-06-01 · tightened the vertical margins (26/32 → 18/22) to
     reclaim space above the CTA on the first screen. */
  margin: 18px 0 22px; max-width: 600px;
  font-size: 22px; line-height: 1.5; font-weight: 500;
  color: var(--ink-soft);
}
.d-home .hero-sub b { color: var(--ink); font-weight: 800; }
.d-home .hero-sub em { font-style: italic; color: var(--tandoco-blue); font-weight: 600; }
.d-home .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.d-home .hero-ctas .icon-only { padding: 13px; width: 46px; height: 46px; }

/* hero email-capture module — sits in the CTA row, just right of the
   menu button. white pill holds the input + a navy CTA so it reads as
   one tidy "join" affordance. .d-home-scoped = desktop only. */
.d-home .hero-ec {
  display: inline-flex; align-items: center; gap: 6px;
  background: #ffffff;
  border: 1px solid rgba(11,20,55,.14);
  border-radius: 99px;
  padding: 5px 6px 5px 18px;
  box-shadow: 0 8px 22px -12px rgba(11,20,55,.30);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.d-home .hero-ec:focus-within {
  border-color: rgba(47,71,168,.55);
  box-shadow: 0 12px 26px -12px rgba(11,20,55,.40);
}
.d-home .hero-ec-input {
  border: 0; background: transparent; outline: none;
  font-family: var(--ff-d); font-size: 14px; font-weight: 600;
  color: var(--ink); width: 152px;
}
.d-home .hero-ec-input::placeholder { color: var(--ink-mute); font-weight: 500; }
.d-home .hero-ec-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ink); color: #fff;
  border: 0; cursor: pointer;
  padding: 12px 22px; border-radius: 99px;
  font-family: var(--ff-d); font-size: 14.5px; font-weight: 800; white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease;
}
.d-home .hero-ec-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(11,20,55,.50); }
.d-home .hero-ec-btn svg { width: 15px; height: 15px; }
/* confirmation state after submit */
.d-home .hero-ec.is-done {
  padding: 10px 18px;
  background: color-mix(in srgb, #2f47a8 8%, #ffffff);
  border-color: rgba(47,71,168,.30);
}
.d-home .hero-ec-thanks {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-d); font-size: 13px; font-weight: 800; color: #2f47a8;
}
.d-home .hero-ec-thanks svg { width: 16px; height: 16px; }
.d-home .hero-trust {
  margin-top: 12px;
  /* dashed hairline rule under the row · brings back the lightweight
     editorial divider that sat between trust + the chips below it */
  padding-bottom: 18px;
  border-bottom: 1px dashed rgba(11,20,55,.28);
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  max-width: 520px;
}
.d-home .tr-cell { display: flex; flex-direction: column; gap: 6px; }
.d-home .tr-cell.right { text-align: right; align-items: flex-end; }
.d-home .stars-row { display: inline-flex; align-items: center; gap: 8px; }
.d-home .stars-row .g-mark { width: 18px; height: 18px; }
.d-home .stars-row .stars { color: #E8B341; font-size: 14px; letter-spacing: 1px; }
.d-home .tr-lbl { font-size: 12.5px; font-weight: 700; color: var(--ink-mute); letter-spacing: -.005em; }
.d-home .tr-lbl b { color: var(--ink); font-weight: 900; }
.d-home .cdwn {
  font-family: var(--ff-d); font-weight: 900; font-size: 22px;
  color: var(--tandoco-blue); letter-spacing: -.018em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.d-home .cdwn .sep { color: var(--ink-mute); margin: 0 4px; font-family: var(--ff); font-size: 14px; }

/* Hero right column — food scatter only. No forced aspect-ratio
   (was forcing the column to be a square, which stretched the
   whole hero tall). Now the photo sizes itself by max-height and
   the column hugs that. */
.d-home .hero-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.d-home .hero-photo {
  position: relative; z-index: 2;
  /* 2026-06-03 · bigger photo that bleeds toward the right edge, with a
     gentle playful float so the hero feels alive on desktop. */
  width: 112%; max-width: 760px;
  height: auto;
  transform: rotate(-3deg);
  filter: drop-shadow(0 28px 44px rgba(11,20,55,.24));
  animation: heroFloat 6s ease-in-out infinite;
}
@keyframes heroFloat {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  50%     { transform: translateY(-14px) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce){
  .d-home .hero-photo { animation: none; }
}
/* playful rotated delivery sticker floating over the food */
.d-home .hero-sticker {
  position: absolute; z-index: 3;
  right: 2%; bottom: 8%;
  width: 108px; height: 108px; border-radius: 50%;
  background: var(--tandoco-blue); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 1px;
  box-shadow: 0 14px 28px rgba(11,20,55,.28);
  transform: rotate(-12deg);
  animation: heroFloat 6s ease-in-out infinite .6s;
}
.d-home .hero-sticker .big {
  font-family: var(--ff-d); font-weight: 900; font-size: 24px;
  line-height: 1; letter-spacing: -.02em; color: var(--gold-l);
}
.d-home .hero-sticker .small {
  font-size: 9px; font-weight: 900; letter-spacing: .14em;
  text-transform: uppercase; opacity: .92;
}
@media (prefers-reduced-motion: reduce){
  .d-home .hero-sticker { animation: none; }
}

/* ──────────────────────────────────────────────────────────────
   HERO · centered editorial "cover" layout (2026-06-03)
   A symmetric, magazine-cover arrangement — centered kicker →
   headline → sub → CTAs → inline trust row → wide food-photo
   centerpiece → trust chips. A deliberate departure from the
   earlier left-text / right-photo split.
   ────────────────────────────────────────────────────────────── */
.d-home .hero-cover {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: stretch;
  text-align: left; padding-top: 8px;
  /* 2026-06-04 · grow to fill the full-height hero so the band below
     can spread its content across the screen. */
  flex: 1 1 auto;
  /* width:100% so this .wrap stretches full-width (then centers at its
     1480 max) exactly like every other section's .wrap — otherwise the
     flex parent shrink-wraps it to content width and its margin:0 auto
     pushes the hero copy right, off the shared 56px gutter. */
  width: 100%;
}
/* two-column band: copy (left) + food photo (right) */
.d-home .hero-main {
  display: grid; grid-template-columns: 1.32fr .68fr; gap: 36px;
  align-items: stretch; width: 100%;
  /* fill the tall hero-cover so the copy column has room to push its
     action group (CTAs + reviews + countdown) down to the bottom. */
  flex: 1 1 auto;
}
.d-home .hero-copy {
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left;
}
.d-home .hero-cover .hero-eye {
  /* 2026-06-04 · margin-top:auto here + on .hero-ctas splits the free
     vertical space so the headline group (eye + h1 + sub) stays
     vertically centered where it was, and ONLY the action group
     (CTAs + reviews + countdown) drops to the bottom. */
  justify-content: flex-start; margin: auto 0 16px; color: var(--gold-d);
}
.d-home .hero-cover .hero-eye::after {
  display: none;
}
.d-home .hero-cover .hero-h1 {
  /* the old desktop hero left-aligns .hero-h1 with !important (line ~3391) */
  text-align: left !important; max-width: 15ch;
  font-size: clamp(42px, 4.6vw, 96px); line-height: 1.0;
}
.d-home .hero-cover .hero-sub {
  text-align: left !important; margin: 18px 0 24px; max-width: 50ch;
}
.d-home .hero-cover .hero-ctas {
  justify-content: flex-start; width: auto; max-width: 600px;
  /* 2026-06-04 · margin-top:auto pushes the CTA pair + the reviews/
     countdown trust row below it down to the bottom of the tall copy
     column, leaving the headline + subhead up top. */
  margin: auto 0 0;
}
/* the global desktop rule flex:1's the order button to full width — here
   the CTA pair should size to its content instead */
.d-home .hero-cover .hero-ctas .btn { flex: 0 0 auto; }
.d-home .hero-cover .hero-trust {
  display: grid; grid-template-columns: auto 1px auto;
  align-items: center; gap: 26px;
  max-width: none; width: auto;
  /* bottom margin lifts the whole CTA + reviews + countdown cluster up off
     the hero's bottom edge so it clears the cards floating on the seam */
  margin: 22px 0 clamp(60px, 8vh, 104px); padding-bottom: 0; border-bottom: none;
}
.d-home .hero-cover .hero-trust .tr-div {
  width: 1px; height: 38px; background: rgba(11,20,55,.16);
}
.d-home .hero-cover .hero-trust .tr-cell,
.d-home .hero-cover .hero-trust .tr-cell.right {
  align-items: flex-start; text-align: left;
}
.d-home .hero-cover .hero-trust .tr-cell .tr-lbl { text-align: left; }
.d-home .hero-showcase {
  position: relative; width: 100%; max-width: none;
  margin: 0; display: flex; justify-content: flex-start;
  /* keep the food photo vertically centered now that its grid cell
     stretches to the full hero height. */
  align-items: center;
}
.d-home .hero-showcase .hero-photo {
  width: auto; max-width: 100%; max-height: 540px; transform: rotate(0deg);
  animation: heroFloatFlat 6.5s ease-in-out infinite;
}
@keyframes heroFloatFlat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce){
  .d-home .hero-showcase .hero-photo { animation: none; }
}
.d-home .hero-showcase .hero-sticker { left: -74%; right: auto; bottom: 10%; background: #18225C; }
/* one feature badge pulled out of the right stack to sit just to the
   right of the $9.99 delivery circle, in the lower-left of the hero */
.d-home .hero-showcase .hero-chips-loose {
  position: absolute; left: -44%; right: auto; bottom: 13%; top: auto;
  transform: none; z-index: 4; align-items: center; gap: 0;
}
/* blue circle (adaptogens) → light text for contrast */
.d-home .hero-showcase .hero-chips-loose .chip { margin-right: 0 !important; background: var(--tandoco-blue) !important; }
.d-home .hero-showcase .hero-chips-loose .chip .body .top { color: var(--gold-l); }
.d-home .hero-showcase .hero-chips-loose .chip .body .top em { color: #fff; }
.d-home .hero-showcase .hero-chips-loose .chip .body .bot { color: #fff; opacity: .85; }


/* ════════════════════════════════════════════════════════════════
   3 · TRUST CHIPS — 3-col row on the cream-l strip
   ──────────────────────────────────────────────────────────── */
.d-home .chips {
  background: var(--cream-l);
  border-top: 1px solid var(--cream-d);
  border-bottom: 1px solid var(--cream-d);
  padding: 24px 0;
}
.d-home .chips-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.d-home .chip {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 14px;
  background: #fff;
  border: 1px solid var(--cream-d);
  transition: transform .15s, border-color .15s;
  cursor: pointer;
}
.d-home .chip:hover { transform: translateY(-1px); border-color: var(--tandoco-blue); }
.d-home .chip .icn {
  width: 38px; height: 38px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.d-home .chip .icn.gold { background: var(--gold-xl); color: var(--gold-d); }
.d-home .chip .icn.mid { background: var(--blue-xl); color: var(--tandoco-blue); }
.d-home .chip .icn.blush { background: rgba(245,201,204,.45); color: #A14F52; }
.d-home .chip .icn svg { width: 19px; height: 19px; }
.d-home .chip .body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.d-home .chip .body .top { font-size: 14px; font-weight: 800; color: var(--ink); letter-spacing: -.005em; }
.d-home .chip .body .top em { font-style: italic; color: var(--tandoco-blue); }
.d-home .chip .body .bot { font-size: 11.5px; font-weight: 600; color: var(--ink-mute); }
.d-home .chip .arrow {
  width: 26px; height: 26px; border-radius: 50%; background: rgba(11,20,55,.06);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--ink-soft);
}
.d-home .chip .arrow svg { width: 12px; height: 12px; }


/* ════════════════════════════════════════════════════════════════
   4 · BROWSE THE KITCHEN — asymmetric 1+5 meal grid
   ──────────────────────────────────────────────────────────── */
.d-home .kitchen {
  background:
    radial-gradient(48% 42% at 8% 16%, rgba(242,208,121,.32) 0%, transparent 78%),
    radial-gradient(42% 38% at 94% 86%, rgba(181,192,222,.40) 0%, transparent 78%),
    var(--blue-mist);
  /* extra top padding lowers the "browse the kitchen" header + grid so they
     clear the cards floating on the hero/kitchen seam */
  padding: clamp(92px, 10vh, 140px) 0 40px;
  position: relative; overflow: hidden;
}
.d-home .kitchen::before {
  content:""; position: absolute; top: -270px; left: -180px; right: auto;
  width: 540px; height: 540px; border-radius: 50%; opacity: .55;
  background: radial-gradient(circle at 70% 50%, var(--gold-l) 0%, var(--gold-l) 38%, var(--gold-xl) 65%, transparent 92%);
  pointer-events: none;
}
.d-home .kitchen > * { position: relative; z-index: 1; }
.d-home .k-head {
  display: grid; grid-template-columns: 1fr auto; gap: 32px;
  align-items: end; margin-bottom: 14px;
}
.d-home .k-cdwn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 14px;
  background: rgba(255,255,255,.7); backdrop-filter: blur(8px);
  border: 1px solid rgba(11,20,55,.08);
  font-size: 12px; font-weight: 700; color: var(--ink-soft);
}
.d-home .k-cdwn svg { width: 14px; height: 14px; color: var(--tandoco-blue); }
.d-home .k-cdwn .cdwn { font-size: 15px; color: var(--tandoco-blue); margin: 0 4px; }
.d-home .k-cdwn b { color: var(--ink); }

.d-home .meal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 188px 188px;
  gap: 12px;
}
.d-home .meal {
  position: relative; overflow: hidden; border-radius: 22px;
  background: var(--cream-xl); cursor: pointer; text-decoration: none;
  /* 2026-06-03 · playful hover-reveal: card lifts + tilts, photo zooms,
     and a "view dish →" cue slides up. */
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1);
}
.d-home .meal:hover {
  transform: translateY(-8px) rotate(-1deg); z-index: 3;
  box-shadow: 0 24px 44px rgba(11,20,55,.24);
}
.d-home .meal.feature { grid-column: span 2; grid-row: span 2; }
.d-home .meal.feature:hover { transform: translateY(-8px) rotate(-.5deg); }
.d-home .meal-photo {
  position: absolute; inset: 0;
  background: var(--cream-xl);
}
.d-home .meal-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.d-home .meal:hover .meal-photo img { transform: scale(1.09); }
@media (prefers-reduced-motion: reduce){
  .d-home .meal, .d-home .meal:hover, .d-home .meal.feature:hover { transform: none; }
  .d-home .meal:hover .meal-photo img { transform: none; }
}
.d-home .meal-photo::after {
  content:""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(11,20,55,.62) 0%, rgba(11,20,55,0) 55%);
}
.d-home .meal-tag {
  position: absolute; top: 14px; left: 14px;
  padding: 5px 10px; border-radius: 99px;
  background: var(--gold-l); color: var(--navy-d);
  font-size: 9.5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
  z-index: 2;
}
.d-home .meal-tag.is-new { background: var(--coral); color: #fff; }
.d-home .meal-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 18px; color: #fff; z-index: 1;
}
.d-home .meal.feature .meal-body { padding: 26px 28px; }
.d-home .meal-nm {
  font-family: var(--ff-d); font-weight: 900;
  font-size: 20px; line-height: 1.05; letter-spacing: -.012em;
}
.d-home .meal.feature .meal-nm { font-size: 38px; max-width: 80%; }
.d-home .meal-nm em { font-style: italic; color: var(--gold-l); }
/* playful slide-up cue revealed on hover */
.d-home .meal-body::after {
  content: "view dish →"; display: block;
  margin-top: 7px; font-size: 12px; font-weight: 900;
  letter-spacing: .04em; color: var(--gold-l);
  opacity: 0; transform: translateY(10px);
  transition: opacity .28s cubic-bezier(.22,1,.36,1), transform .28s cubic-bezier(.22,1,.36,1);
}
.d-home .meal.feature .meal-body::after { font-size: 14px; margin-top: 11px; }
.d-home .meal:hover .meal-body::after { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .d-home .meal-body::after { transition: none; }
}
/* tag gives a little playful pop on card hover */
.d-home .meal-tag { transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.d-home .meal:hover .meal-tag { transform: scale(1.08) rotate(-3deg); }
.d-home .k-foot {
  margin-top: 22px;
  display: flex; align-items: center; justify-content: flex-start; gap: 20px; flex-wrap: wrap;
}
/* the "catch us in the wild" next-stop card — the SAME module as mobile —
   sits beside the see-full-menu button, using the desktop horizontal space.
   replaces the old full-width scrolling ticker. */
.d-home .k-foot .ns-card { margin: 0; flex: 0 1 440px; min-width: 320px; }


/* ════════════════════════════════════════════════════════════════
   5 · HOW IT WORKS — editorial split: title + CTA on the left,
   a compact vertical step-timeline on the right
   ──────────────────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════
   5 + 6 · HOW IT WORKS  ✕  FOR EVERYONE  (combined, side-by-side)
   simplified 3-step stepper on the LEFT, the spinning "for everyone"
   wreath + persona chips on the RIGHT — one shared light section.
   ──────────────────────────────────────────────────────────── */
.d-home .hw {
  position: relative; overflow: hidden;
  background:
    radial-gradient(40% 56% at 1% 6%, rgba(126,150,232,.24) 0%, transparent 70%),
    radial-gradient(38% 52% at 99% 96%, rgba(242,208,121,.22) 0%, transparent 72%),
    linear-gradient(180deg, #eaeffb 0%, #f4f7ff 55%, #ffffff 100%);
  padding: 34px 0;
}
.d-home .hw > * { position: relative; z-index: 1; }
.d-home .hw .wrap { display: block; }

/* two-up: how-it-works left, for-everyone right
   (`.hw .hw-duo` beats the `.hw .wrap{display:block}` reset above) */
.d-home .hw .hw-duo {
  max-width: none; margin: 0;
  display: flex; flex-direction: column; gap: 40px;
}

/* ── how it works — NO band of its own. The section collapses to zero height
   so the hero and the kitchen sit flush against each other, and the row of
   sticker cards is lifted OUT of flow to float centered over that seam. ── */
.d-home #how-it-works {
  background: none;
  position: relative; z-index: 5;
  overflow: visible;
  margin: 0; padding: 0; height: 0;   /* collapse — hero + kitchen touch */
}
.d-home #how-it-works .wrap.hw-duo { margin: 0; padding: 0; gap: 0; }
/* lift the card row out of flow and center it on the hero/kitchen seam */
.d-home #how-it-works .hw-left {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -50%);
  width: min(1760px, 94vw);
  margin: 0; padding: 0;
  display: block; z-index: 6;
}
.d-home #how-it-works .hw-cards { margin: 0; position: relative; z-index: 6; }
.d-home .hw-left {
  width: 100%; max-width: min(1760px, 94vw); margin: 0 auto;
  background: none; border: none; border-radius: 0; box-shadow: none;
  padding: 8px 0 4px;
}
.d-home .hw-head2 { margin: 0 0 20px; text-align: center; }
.d-home .hw-head2 .eye { display: inline-flex; color: var(--gold-d); }
.d-home .hw-head2 .headline {
  font-family: var(--ff-d); font-weight: 900; margin: 8px 0 0;
  font-size: 34px; line-height: 1.0; letter-spacing: -.024em; color: var(--navy);
}
.d-home .hw-head2 .headline em { font-style: italic; color: var(--gold-d); }

.d-home .hw-cards {
  list-style: none; margin: 0 0 22px; padding: 10px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  align-items: stretch;
}
/* each step is a chunky tilted "sticker" — bold border, hard offset
   shadow, a ghost outline number peeking out, and a per-step accent. */
.d-home .hw-card {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 16px;
  padding: 17px 19px; border-radius: 20px;
  background: #fff; border: 2px solid var(--navy);
  box-shadow: 5px 6px 0 var(--shadow-col, rgba(47,71,168,.9));
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.d-home .hw-card.c1 { transform: rotate(-1.4deg); --accent: var(--gold-d); --shadow-col: rgba(193,138,22,.92); }
.d-home .hw-card.c2 { transform: rotate(1.1deg);  --accent: #2f47a8;       --shadow-col: rgba(47,71,168,.9); }
.d-home .hw-card.c3 { transform: rotate(-0.8deg); --accent: var(--coral);  --shadow-col: rgba(224,90,70,.9); }
.d-home .hw-card:hover {
  transform: rotate(0deg) translate(-2px,-3px);
  box-shadow: 8px 11px 0 var(--shadow-col, rgba(47,71,168,.9));
}
/* third card · gold→navy GRADIENT shadow BEHIND the card. The card's
   transform makes a stacking context (so a -z child can't sit under the
   fill), so we layer it: ::before = gradient shadow (offset, bottom),
   ::after = white fill on top of it, content above that. */
.d-home .hw-card.c3 { background: transparent; box-shadow: none; }
.d-home .hw-card.c3::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 18px;
  background: linear-gradient(135deg, var(--gold-d) 0%, #2f47a8 100%);
  transform: translate(5px, 6px); transition: transform .3s ease;
}
.d-home .hw-card.c3::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 18px; background: #fff;
}
.d-home .hw-card.c3 > *:not(.hw-ghost) { position: relative; z-index: 2; }
/* card 3's ghost number must sit ABOVE the ::after white fill (z-index:1)
   or it's painted over and the "3" disappears (cards 1/2 have no such
   pseudo-fill, so their z-index:-1 ghosts show fine). */
.d-home .hw-card.c3 .hw-ghost { z-index: 2; }
.d-home .hw-card.c3:hover { box-shadow: none; }
.d-home .hw-card.c3:hover::before { transform: translate(8px, 11px); }
@media (prefers-reduced-motion: reduce) { .d-home .hw-card.c3::before { transition: none; } }
.d-home .hw-card .hw-ghost {
  position: absolute; right: 14px; top: -16px; z-index: -1; pointer-events: none;
  font-family: var(--ff-d); font-weight: 900; font-size: 76px; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--accent) 34%, transparent);
}
.d-home .hw-card .hw-ico {
  width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 13%, #fff);
  border: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
}
.d-home .hw-card .hw-ico svg { width: 26px; height: 26px; }
.d-home .hw-card-body h3 {
  font-family: var(--ff-d); font-weight: 900; font-size: 20px;
  line-height: 1.05; letter-spacing: -.016em; color: var(--navy); margin: 0 0 3px;
}
.d-home .hw-card-body h3 em { font-style: italic; color: var(--accent); }
.d-home .hw-card-body p { margin: 0; font-size: 13px; line-height: 1.45; font-weight: 500; color: rgba(11,20,55,.62); }
.d-home .hw-card .hw-day {
  align-self: start; white-space: nowrap;
  /* shift left so it clears the ghost number that pokes out the top-right */
  margin-right: 40px;
  font-family: var(--ff-d); font-weight: 800; font-size: 10.5px;
  letter-spacing: .03em; text-transform: lowercase; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  border: 1.5px solid color-mix(in srgb, var(--accent) 32%, transparent);
  padding: 4px 11px; border-radius: 99px;
}
.d-home .hw-cta { display: flex; width: fit-content; margin: 0 auto; align-items: center; gap: 9px; }
.d-home .hw-cta svg { width: 16px; height: 16px; }
/* CTA is a solid navy button so it stands out on the now-light section */
.d-home .hw-cta.btn.btn-gold {
  background: var(--navy);
  color: #fff; border: 1px solid var(--navy);
}
@media (prefers-reduced-motion: reduce) { .d-home .hw-card { transition: none; } }

/* ── BOTTOM · for everyone — FULL-BLEED EDITORIAL BAND. The rainbow
   wreath bleeds across the right half of a wide rounded band; a frosted
   glass card floats over the left holding the copy. The wreath keeps its
   multiply blend, halo + auto-cycling persona label on the light band. ── */
.d-home .hw-right {
  position: relative; isolation: isolate;
  width: 100%; max-width: min(1760px, 94vw); margin: 0 auto;
  min-height: 460px;
  display: flex; align-items: center; justify-content: flex-start;
  padding: clamp(48px, 6vw, 76px) clamp(40px, 5vw, 84px);
  border-radius: 30px; overflow: hidden;
  background:
    radial-gradient(52% 92% at 8% 6%, rgba(126,150,232,.34) 0%, transparent 62%),
    radial-gradient(46% 80% at 96% 96%, rgba(242,208,121,.24) 0%, transparent 70%),
    linear-gradient(118deg, #e7edfb 0%, #f3f6ff 46%, #ecf1fe 100%);
  border: 1px solid rgba(47,71,168,.12);
  box-shadow: 0 32px 66px -34px rgba(13,20,54,.5);
}
/* big spinning rainbow wreath bleeding off the TOP-RIGHT corner */
.d-home .hw-right .who-photo {
  position: absolute; z-index: 1;
  top: clamp(-130px, -8vw, -70px); right: clamp(-150px, -9vw, -90px);
  left: auto; bottom: auto; transform: none;
  width: clamp(380px, 42vw, 600px); aspect-ratio: 1 / 1;
  max-width: none; margin: 0; opacity: 1;
  background: none; border: none; border-radius: 0; box-shadow: none;
}
.d-home .hw-right .who-photo .who-img {
  inset: 0; top: 0; left: 0; right: auto; bottom: auto;
  width: 100%; height: 100%;
}
/* GIANT SENTENCE CYCLER — "real food for [persona]." the persona word + tag
   swap through all 8 types (driven by the wreath-cycle script), each in its
   own ROYGBIV color. Left aligned, vertically centered, type is the star. */
.d-home .hw-right .who-copy {
  position: relative; z-index: 2;
  width: min(1000px, 88%);
  min-width: 0; display: flex; flex-direction: column; justify-content: center;
  gap: clamp(8px, 1.2vw, 16px);
  background: none; border: none; box-shadow: none; border-radius: 0; padding: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.d-home .hw-right .who-copy > .eye { display: inline-flex; color: #2f47a8; margin: 0; }
.d-home .who-lead {
  margin: 4px 0 0; font-family: var(--ff-d); font-weight: 900;
  font-size: clamp(28px, 3.2vw, 42px); line-height: 1; letter-spacing: -.022em;
  color: var(--navy);
}
/* the swapping persona word + tagline */
.d-home .hw-right .who-center {
  position: static; display: block; transform: none; inset: auto;
  width: auto; height: auto; padding: 0; margin: 0; z-index: auto;
  transition: opacity .34s ease, transform .34s ease;
}
.d-home .hw-right .who-center.swapping { opacity: 0; transform: translateY(10px); }
.d-home .hw-right .who-center .h {
  display: block; margin: 0; font-family: var(--ff-d); font-weight: 900;
  font-size: clamp(54px, 7.6vw, 98px); line-height: .9; letter-spacing: -.034em;
  white-space: nowrap; color: #E53935;
  min-height: clamp(54px, 7.6vw, 98px);
}
.d-home .hw-right .who-center .tg {
  display: block; margin: clamp(8px, 1vw, 14px) 0 0;
  font-family: var(--ff-d); font-style: italic; font-weight: 600;
  font-size: clamp(19px, 2.3vw, 30px); line-height: 1.2; color: var(--ink-soft);
  white-space: nowrap; height: 1.2em; overflow: visible;
}
.d-home .hw-right .who-center .tg em { font-style: italic; color: inherit; }
.d-home .who-sub2 {
  margin: 6px 0 0; font-size: clamp(14.5px, 1.1vw, 16.5px); line-height: 1.55;
  color: var(--ink-soft); max-width: 48ch; font-weight: 500;
}
.d-home .who-sub2 b { color: var(--navy); font-weight: 800; }
@media (prefers-reduced-motion: reduce) {
  .d-home .hw-right .who-center { transition: none; }
}
.d-home .who-copy .who-body-cta {
  align-self: start; display: inline-flex; align-items: center; gap: 9px; margin: 10px 0 0;
  background: #0B1437; color: #fff; border: none;
  box-shadow: 0 14px 26px -14px rgba(11,20,55,.7);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.d-home .who-copy .who-body-cta:hover {
  background: #060B25;
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -14px rgba(11,20,55,.8);
}
.d-home .who-copy .who-body-cta svg { width: 16px; height: 16px; }
@media (min-width: 960px) and (max-width: 1180px) {
  .d-home .hw-duo { gap: 30px; }
  .d-home .hw-cards { gap: 12px; }
  .d-home .hw-right { padding: clamp(40px,5vw,52px) clamp(28px,4vw,44px); min-height: 400px; }
  .d-home .hw-right .who-copy { width: min(840px, 100%); }
  .d-home .hw-right .who-photo { width: clamp(320px,38vw,420px); top: -90px; right: -110px; opacity: 1; }
}

/* (the old #for-everyone scrolling-ribbon CSS was removed — that markup is
   gone, replaced by the .fm-* sticker grid further down. its leftover
   `#for-everyone{padding:0}` was overriding the new section's top padding.) */


/* ════════════════════════════════════════════════════════════════
   6 · WHO IT'S FOR — wreath + 8-persona list (ROYGBIV)
   ──────────────────────────────────────────────────────────── */
.d-home .who {
  position: relative; overflow: hidden;
  background:
    radial-gradient(38% 56% at 2% 8%, rgba(126,150,232,.26) 0%, transparent 68%),
    radial-gradient(36% 52% at 99% 94%, rgba(242,208,121,.24) 0%, transparent 70%),
    linear-gradient(180deg, #eaeffb 0%, #f4f7ff 55%, #ffffff 100%);
  padding: 24px 0;
}
/* playful color "bleeds" — soft discs drifting off two corners, the
   per-section motif used across the homepage. content rides above via
   the .wrap z-index below. */
.d-home .who::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: -130px; bottom: -170px; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(63,107,230,.18) 0%, rgba(63,107,230,.07) 54%, transparent 72%);
}
.d-home .who::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -110px; top: -130px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(224,179,65,.22) 0%, rgba(224,179,65,.08) 54%, transparent 72%);
}
.d-home .who .who-v2 { position: relative; z-index: 1; }
/* condensed horizontal layout — a compact spinning wreath on the left,
   headline + colorful chip-row (synced to the rotation) on the right. */
.d-home .who-v2 {
  max-width: 1040px; margin: 0 auto;
  display: grid; grid-template-columns: 300px minmax(0, 540px);
  justify-content: center; align-items: center; gap: 52px; text-align: left;
}
.d-home .who-v2-right { min-width: 0; }
.d-home .who-v2-head { max-width: none; }
.d-home .who-v2-head .eye { display: inline-flex; color: #2f47a8; }
.d-home .who-v2-h {
  font-family: var(--ff-d); font-weight: 900;
  font-size: 30px; line-height: 1.04; letter-spacing: -.022em;
  color: var(--ink); margin: 10px 0 8px;
}
.d-home .who-v2-h em { font-style: italic; color: #2f47a8; }
.d-home .who-v2-lede {
  margin: 0; max-width: 440px;
  color: var(--ink-mute); font-size: 14px; line-height: 1.5;
}
.d-home .who-v2 .who-photo { max-width: 300px; margin: 0; }
/* Wreath — ported verbatim from production index.html (line 1096-1166).
   Discrete 8-step rotation driven by JS at the bottom of the page.
   Spotlight halo at top syncs color via --halo CSS variable. */
.d-home .who-photo {
  position: relative; aspect-ratio: 1 / 1;
  width: 100%; max-width: 520px; margin: 0 auto;
}
.d-home .who-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
  clip-path: circle(48% at 50% 50%);
  -webkit-clip-path: circle(48% at 50% 50%);
  transition: transform .8s cubic-bezier(.4,.0,.2,1);
}
/* Spotlight halo sits BEHIND the giant cycling word — color follows the
   current persona via --halo. Pulses gently. */
.d-home .hw-right .who-center { position: relative; }
.d-home .hw-right .who-center .h,
.d-home .hw-right .who-center .tg { position: relative; z-index: 1; }
.d-home .who-spotlight {
  --halo: #E0B341;
  position: absolute; z-index: 0; pointer-events: none;
  top: clamp(28px, 3.6vw, 50px); left: clamp(120px, 15vw, 220px);
  transform: translate(-50%, -50%);
  width: clamp(420px, 46vw, 640px); height: clamp(420px, 46vw, 640px);
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--halo) 42%, transparent) 0%,
    color-mix(in srgb, var(--halo) 26%, transparent) 22%,
    color-mix(in srgb, var(--halo) 13%, transparent) 44%,
    color-mix(in srgb, var(--halo) 5%, transparent) 66%,
    transparent 88%);
  border-radius: 50%;
  filter: blur(18px);
  animation: tcSpotPulse 2.6s ease-in-out infinite;
  transition: background .35s ease;
}
@keyframes tcSpotPulse {
  0%, 100% { opacity: .85; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .d-home .who-img { transition: none; }
  .d-home .who-spotlight { animation: none; }
}
/* Center copy — production fades the .h color + the .tg innerHTML
   every 1.8s in sync with the wreath step. */
.d-home .who-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center; width: 74%;
  z-index: 3;
}
.d-home .who-center .h {
  font-family: var(--ff-d); font-weight: 900;
  font-size: 24px; line-height: 1.08; letter-spacing: -.02em;
  margin: 4px 0 5px;
  transition: color .35s ease;
}
.d-home .who-center .tg {
  display: block;
  font-size: 14px; font-weight: 600; color: var(--ink-mute);
  line-height: 1.3;
}
.d-home .who-center .tg em { font-style: italic; color: var(--tandoco-blue); font-weight: 700; }
.d-home .who-center.swapping .h, .d-home .who-center.swapping .tg { opacity: 0; transition: opacity .35s ease; }
.d-home .who-center .h, .d-home .who-center .tg { transition: opacity .35s ease, color .35s ease; }
.d-home .who-center .hint {
  display: block;
  font-size: 10px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-mute);
}
.d-home .who-pointer {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%); text-align: center;
  z-index: 2;
}
.d-home .who-pointer .lbl {
  display: block;
  font-size: 9.5px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-d); margin-bottom: 6px;
}
.d-home .who-pointer .arrow {
  display: inline-block; width: 0; height: 0;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-top: 12px solid var(--gold-d);
}
/* (duplicate .who-center rules removed — see the canonical block
   above at line ~620 with the JS-driven swap/transition states.) */

/* bouncy color persona pills — the active one floods with its own
   color and wiggles up, in sync with the spinning wreath above. */
.d-home .who-chips {
  list-style: none; padding: 0; margin: 16px 0 0; max-width: none;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 9px;
}
.d-home .who-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 13px;
  background: rgba(255,255,255,.06);
  border: 1.5px solid color-mix(in srgb, var(--c, #1E88E5) 48%, #2b3566);
  font-family: var(--ff-d); font-size: 12.5px; font-weight: 800; color: #dbe2fb;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease,
              background .35s ease, color .35s ease, border-color .35s ease;
}
.d-home .who-chip .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c, var(--tandoco-blue));
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
}
.d-home .who-chip.active {
  transform: translateY(-3px) scale(1.06) rotate(-1.5deg);
  background: var(--c, #1E88E5); color: #fff;
  border-color: var(--c, #1E88E5);
  box-shadow: 0 13px 22px -8px color-mix(in srgb, var(--c, #1E88E5) 62%, transparent);
}
.d-home .who-chip.active .dot {
  background: #fff; transform: scale(1.25);
  box-shadow: 0 0 0 3px rgba(255,255,255,.35);
}
@media (prefers-reduced-motion: reduce) {
  .d-home .who-chip, .d-home .who-chip .dot { transition: none; }
}


/* ════════════════════════════════════════════════════════════════
   7 · WHOLE INGREDIENTS — full-bleed navy video + no/yes list
   ──────────────────────────────────────────────────────────── */
/* ── "whole foods" (2026-06-04 · single full-bleed video stage) ──
   One full-bleed cinematic video band. Headline + a short whole-foods
   line are anchored toward the BOTTOM of the frame, sitting over a
   bottom-weighted dark gradient so the type stays legible against the
   food footage. No separate copy section — the video IS the section. */
.d-home .whole {
  position: relative; overflow: hidden;
  width: 100vw; margin-left: calc(50% - 50vw);
  color: #fff;
}
.d-home .whole-stage {
  position: relative;
  height: 78vh; min-height: 600px; max-height: 760px;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.d-home .whole-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* bottom-weighted scrim: clear up top, deep navy where the copy sits */
.d-home .whole-video-grad {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(6,11,37,.08) 0%,
    rgba(6,11,37,.10) 36%,
    rgba(6,11,37,.60) 76%,
    rgba(6,11,37,.90) 100%);
}
.d-home .whole-overlay {
  position: relative; z-index: 1;
  width: 100%; max-width: 1480px; margin: 0 auto;
  padding: 0 56px 64px; text-align: left;
}
.d-home .whole-eye {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-size: 12px; font-weight: 900; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-l);
}
.d-home .whole-eye::before {
  display: none;
}
.d-home .whole-h {
  font-family: var(--ff-d); font-weight: 900;
  font-size: 84px; line-height: .98; letter-spacing: -.024em;
  color: #fff; margin: 0 0 18px; max-width: 16ch;
}
.d-home .whole-h em { font-style: italic; color: var(--gold-l); }
.d-home .whole-sub {
  font-size: 18px; line-height: 1.5; font-weight: 500;
  color: rgba(255,255,255,.86); margin: 0; max-width: 620px;
}
.d-home .whole-sub b { color: #fff; font-weight: 800; }
.d-home .whole-sub em { font-style: italic; color: var(--gold-l); }


/* ════════════════════════════════════════════════════════════════
   8 · PICKUP + DELIVERY — phone card + drive-times sidebar
   ──────────────────────────────────────────────────────────── */
.d-home .map {
  background: var(--blue-mist);
  padding: 88px 0;
  position: relative; overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════
   DELIVERY v3 · the tandoco van floating in 3D + a dashed delivery
   route + the delivery facts. Pure CSS/SVG, no map.
   ──────────────────────────────────────────────────────────────── */
.d-home #find-us {
  background:
    radial-gradient(46% 50% at 6% 10%, rgba(242,208,121,.30) 0%, transparent 76%),
    radial-gradient(48% 52% at 96% 92%, rgba(126,150,232,.34) 0%, transparent 78%),
    var(--blue-mist);
  padding: clamp(18px, 2.2vw, 32px) 0;
}
.d-home #find-us .dv {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(18px, 2.6vw, 40px);
  align-items: center;
}
@media (max-width: 1000px) { .d-home #find-us .dv { grid-template-columns: 1fr; gap: 30px; } }

/* —— copy column —— */
.d-home #find-us .dv-info { display: flex; flex-direction: column; gap: clamp(14px, 1.7vw, 20px); }
.d-home #find-us .dv-info .eye { display: inline-flex; color: #2f47a8; }
.d-home #find-us .dv-h {
  margin: 0; font-family: var(--ff-d); font-weight: 900;
  font-size: clamp(32px, 3.8vw, 56px); line-height: 1.02; letter-spacing: -.026em; color: var(--navy);
}
.d-home #find-us .dv-h em { font-style: italic; color: var(--gold-d); }
.d-home #find-us .dv-sub { margin: 0; max-width: 44ch; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.55; color: var(--ink-soft); }
.d-home #find-us .dv-sub em { font-style: normal; font-weight: 700; color: var(--tandoco-blue); }
.d-home #find-us .dv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 470px; }
.d-home #find-us .dv-stat { background: #fff; border: 1px solid rgba(11,20,55,.08); border-radius: 16px; padding: 13px 14px; box-shadow: 0 14px 28px -20px rgba(11,20,55,.45); }
.d-home #find-us .dv-stat .big { display: block; font: 900 clamp(17px,1.7vw,22px)/1 var(--ff-d); color: var(--navy); letter-spacing: -.01em; }
.d-home #find-us .dv-stat .lbl { display: block; margin-top: 5px; font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--ink-mute); }
.d-home #find-us .dv-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.d-home #find-us .dv-cta { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; padding: 13px 22px; border-radius: 99px; font: 800 14px/1 var(--ff-d); transition: transform .2s ease, box-shadow .2s ease; }
.d-home #find-us .dv-cta svg { width: 18px; height: 18px; }
.d-home #find-us .dv-cta.primary { background: linear-gradient(180deg, #4f74ec 0%, #3f63e6 100%); color: #fff; border: 1px solid #3556cf; box-shadow: 0 14px 26px -14px rgba(47,71,168,.6); }
.d-home #find-us .dv-cta.ghost { background: #fff; color: var(--navy); border: 1px solid rgba(11,20,55,.14); }
.d-home #find-us .dv-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -16px rgba(11,20,55,.4); }

/* —— the zip checker —— */
.d-home #find-us .dv-zip { display: flex; gap: 10px; max-width: 420px; margin-top: 2px; }
.d-home #find-us .dv-zip input {
  flex: 1; min-width: 0; height: 50px; border-radius: 14px;
  border: 1.5px solid rgba(11,20,55,.16); background: #fff;
  padding: 0 16px; font: 700 16px/1 var(--ff-d); color: var(--navy); letter-spacing: .04em;
}
.d-home #find-us .dv-zip input::placeholder { color: var(--ink-mute); font-weight: 600; letter-spacing: .02em; }
.d-home #find-us .dv-zip input:focus { outline: none; border-color: var(--tandoco-blue); box-shadow: 0 0 0 3px rgba(47,71,168,.16); }
.d-home #find-us .dv-zip button {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  height: 50px; padding: 0 22px; border: none; border-radius: 14px;
  font: 800 14.5px/1 var(--ff-d); color: #fff;
  background: linear-gradient(180deg, #4f74ec 0%, #3f63e6 100%); box-shadow: 0 14px 26px -14px rgba(47,71,168,.6);
  transition: transform .2s ease;
}
.d-home #find-us .dv-zip button svg { width: 16px; height: 16px; }
.d-home #find-us .dv-zip button:hover { transform: translateY(-1px); }
.d-home #find-us .dv-zip-result {
  display: none; align-items: center; gap: 9px; max-width: 460px;
  margin-top: 10px; padding: 11px 15px; border-radius: 13px;
  font-size: 13.5px; line-height: 1.4; color: var(--ink);
}
.d-home #find-us .dv-zip-result.show { display: flex; }
.d-home #find-us .dv-zip-result .rdot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.d-home #find-us .dv-zip-result strong { font-weight: 900; }
.d-home #find-us .dv-zip-result.ok { background: #E6F6EC; }
.d-home #find-us .dv-zip-result.ok .rdot { background: #3FA060; box-shadow: 0 0 0 4px rgba(63,160,96,.18); }
.d-home #find-us .dv-zip-result.ok strong { color: #1F7A40; }
.d-home #find-us .dv-zip-result.warn { background: var(--gold-xl); }
.d-home #find-us .dv-zip-result.warn .rdot { background: var(--gold-d); box-shadow: 0 0 0 4px rgba(184,138,26,.18); }
.d-home #find-us .dv-zip-result.warn strong { color: var(--gold-d); }
.d-home #find-us .dv-zip-result.no { background: #FBEAEA; }
.d-home #find-us .dv-zip-result.no .rdot { background: #C5443F; box-shadow: 0 0 0 4px rgba(197,68,63,.18); }
.d-home #find-us .dv-zip-result.no strong { color: #9A2A26; }
.d-home #find-us .dv-facts { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.d-home #find-us .dv-facts b { color: var(--navy); font-weight: 900; }

/* —— the van clip —— 2026-06-05 · replaced the floating PNG cutout with
   a cinematic video of the real wrapped van on a twin cities street,
   framed in a rounded card. aspect-ratio matches the source (1026×720)
   so the full van shows with no cropping. */
.d-home #find-us .dv-stage { position: relative; display: grid; place-items: center; }
.d-home #find-us .dv-video {
  position: relative; z-index: 2; width: 100%; max-width: 600px; margin: 0 auto;
  border-radius: 22px; overflow: hidden; aspect-ratio: 1026 / 720;
  box-shadow: 0 30px 60px -26px rgba(11,20,55,.55), 0 4px 12px -6px rgba(11,20,55,.30);
}
.d-home #find-us .dv-video video,
.d-home #find-us .dv-video img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.d-home #find-us .dv-shadow { display: none; }

@media (prefers-reduced-motion: reduce) {
  .d-home #find-us .dv-van img, .d-home #find-us .dv-shadow,
  .d-home #find-us .dv-chip, .d-home #find-us .dv-route .road { animation: none; }
  .d-home #find-us .dv-cta { transition: none; }
}
/* two-column: an illustrated delivery-radius map on the left (concentric
   rings around the loring park kitchen, neighborhoods placed around it),
   the address / hours / delivery info panel on the right. Delivery-only. */
.d-home .map-row {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 40px;
  align-items: stretch;
}
.d-home .map-embed {
  position: relative;
  border-radius: 28px; overflow: hidden;
  min-height: 540px;
  box-shadow: 0 32px 60px -22px rgba(11,20,55,.22), 0 8px 16px rgba(11,20,55,.06);
  border: 1px solid var(--border);
  /* dark base so any rounded-corner gap blends with the satellite photo */
  background: linear-gradient(155deg, #0E1730 0%, #08101f 100%);
}
/* the illustrated map fills the card */
.d-home .map-illus {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  font-family: var(--ff-d);
}
/* NOTE: do NOT set `fill` here — a CSS fill overrides each dot's per-dot
   inline rainbow colour (CSS wins over the SVG fill attribute). */
.d-home .map-illus .hood circle { filter: drop-shadow(0 2px 3px rgba(11,20,55,.25)); }
.d-home .map-illus .hood .dotring { fill: none; stroke: #fff; stroke-width: 3; filter: none; }
.d-home .map-illus .hn {
  fill: #fff; font-size: 13px; font-weight: 800;
  text-anchor: middle; letter-spacing: -.01em;
  /* dark halo so labels stay legible over the satellite photo */
  paint-order: stroke; stroke: rgba(8,14,34,.78);
  stroke-width: 3.4px; stroke-linejoin: round;
}
.d-home .map-illus .khalo { fill: rgba(224,179,65,.20); animation: mapPulse 3.4s ease-in-out infinite; }
.d-home .map-illus .chip  { fill: #fff; font-size: 12.5px; font-weight: 900; text-anchor: middle; letter-spacing: -.012em; }
.d-home .map-illus .rchip { fill: var(--ink); font-size: 11.5px; font-weight: 900; text-anchor: middle; letter-spacing: .005em; }
@keyframes mapPulse {
  0%, 100% { r: 28px; opacity: .55; }
  50%      { r: 36px; opacity: .18; }
}
@media (prefers-reduced-motion: reduce) {
  .d-home .map-illus .khalo { animation: none; }
}
/* floating "you'll find us here" flag pinned to the map corner */
.d-home .map-embed .map-flag {
  position: absolute; bottom: 18px; right: 18px; top: auto; left: auto; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px; border-radius: 99px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px -8px rgba(11,20,55,.35);
  font-size: 12.5px; font-weight: 900; color: var(--ink); letter-spacing: -.01em;
  pointer-events: none;
}
.d-home .map-embed .map-flag svg { width: 15px; height: 15px; color: var(--tandoco-blue); }

/* ── interactive Leaflet delivery map (replaces the static SVG) ── */
.d-home .map-leaflet {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  background: #08101f; cursor: crosshair;
}
.d-home .map-leaflet .leaflet-container { font-family: var(--ff-d); background: #08101f; }
.d-home .map-leaflet .leaflet-control-attribution { font-size: 9px; opacity: .55; }
.d-home .map-leaflet .leaflet-bar a { color: var(--ink); font-weight: 800; }
/* gold kitchen pin */
.d-home .dmap-kitchen-pin {
  display: block; width: 18px; height: 18px; border-radius: 50%;
  background: #E0B341; border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(11,20,55,.55);
}
/* "the kitchen" chip + the ring label — Leaflet permanent tooltips */
.d-home .map-leaflet .dmap-kitchen-label,
.d-home .map-leaflet .dmap-ring-label {
  background: #0B1437; color: #fff; border: none;
  font-weight: 900; font-size: 12px; letter-spacing: -.012em;
  padding: 5px 11px; border-radius: 99px; white-space: nowrap;
  box-shadow: 0 6px 16px -6px rgba(11,20,55,.6);
}
.d-home .map-leaflet .dmap-ring-label {
  background: #E0B341; color: var(--ink); font-size: 11px;
}
.d-home .map-leaflet .dmap-kitchen-label::before,
.d-home .map-leaflet .dmap-ring-label::before { display: none; } /* no arrow */
/* click-to-measure popup */
.d-home .map-leaflet .leaflet-popup-content-wrapper {
  background: #fff; border-radius: 14px;
  box-shadow: 0 14px 34px -10px rgba(11,20,55,.45);
}
.d-home .map-leaflet .leaflet-popup-content { margin: 11px 14px; color: var(--ink); line-height: 1.35; }
.d-home .map-leaflet .leaflet-popup-tip { background: #fff; }
.d-home .dmap-pop-time { font-size: 16px; font-weight: 900; letter-spacing: -.02em; }
.d-home .dmap-pop-time em { color: var(--tandoco-blue); font-style: normal; }
.d-home .dmap-pop-sub { font-size: 12px; font-weight: 800; margin-top: 2px; }
.d-home .dmap-pop-sub.in  { color: #2e7d46; }
.d-home .dmap-pop-sub.out { color: var(--coral); }
/* major-city + suburb name labels floating over the satellite imagery */
.d-home .map-leaflet .dmap-city {
  width: 150px !important; text-align: center; white-space: nowrap;
  color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .02em;
  text-transform: lowercase; pointer-events: none;
  text-shadow: 0 1px 3px rgba(8,14,34,.95), 0 0 3px rgba(8,14,34,.9);
}
.d-home .map-leaflet .dmap-city.major {
  font-size: 14px; font-weight: 900; letter-spacing: .04em;
}

.d-home .map-info {
  display: flex; flex-direction: column;
  align-self: center;
}
.d-home .map-info .eye { display: inline-flex; align-self: flex-start; }
.d-home .map-info .headline {
  font-size: 56px; line-height: .98; margin: 14px 0 12px; max-width: none;
}
.d-home .map-info .lede { font-size: 16px; margin: 0 0 22px; max-width: 46ch; }
.d-home .map-info .addr {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px; border-radius: 16px;
  background: #fff; border: 1px solid var(--border);
  box-shadow: 0 10px 24px -16px rgba(11,20,55,.25);
}
.d-home .map-info .addr .ic {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px;
  background: var(--blue-xl); color: var(--tandoco-blue);
  display: inline-flex; align-items: center; justify-content: center;
}
.d-home .map-info .addr .ic svg { width: 20px; height: 20px; }
.d-home .map-info .addr .nm { font-family: var(--ff-d); font-weight: 900; font-size: 19px; line-height: 1.1; color: var(--ink); letter-spacing: -.014em; }
.d-home .map-info .addr .nm em { font-style: italic; color: var(--tandoco-blue); }
.d-home .map-info .addr .meta { margin-top: 3px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.d-home .map-info .addr .meta strong { color: var(--ink); }

.d-home .map-cta-row { display: flex; gap: 12px; margin: 18px 0 4px; flex-wrap: wrap; }
.d-home .map-cta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: 99px;
  font-size: 14.5px; font-weight: 800; text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s, color .15s;
}
.d-home .map-cta svg { width: 17px; height: 17px; }
.d-home .map-cta.primary { background: var(--ink); color: #fff; box-shadow: 0 12px 24px -12px rgba(11,20,55,.5); }
.d-home .map-cta.primary:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -12px rgba(11,20,55,.55); }
.d-home .map-cta.ghost { background: #fff; color: var(--ink); border-color: var(--border); }
.d-home .map-cta.ghost:hover { border-color: var(--tandoco-blue); color: var(--tandoco-blue); transform: translateY(-2px); }

.d-home .map-info hr { border: 0; border-top: 1px solid var(--border); margin: 22px 0 20px; width: 100%; }
.d-home .map-info .meta-line {
  margin: 22px 0 0; font-size: 13.5px; color: var(--ink-soft); font-weight: 600;
  padding: 14px 18px; background: var(--gold-xl); border-radius: 12px;
}
.d-home .map-info .meta-line strong { color: var(--ink); font-weight: 900; }
.d-home .map-info .meta-line em { font-style: italic; color: var(--tandoco-blue); }

/* narrow desktop (960–1040px) — stack the map above the info panel so
   neither gets cramped. Below 960px the whole .d-home block is hidden. */
@media (min-width: 960px) and (max-width: 1040px) {
  .d-home .map-row { grid-template-columns: 1fr; gap: 28px; }
  .d-home .map-embed { min-height: 380px; }
  .d-home .map-info { align-self: auto; }
  .d-home .map-info .headline { font-size: 48px; }
}

.d-home .pc-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  align-items: start;
}
/* Swap visual order: sidebar (the kitchen / drive times) now sits left,
   phone-card (get directions / text us / check your zip) now sits right.
   HTML source order is preserved for accessibility. */
.d-home .pc-row .pc-side { order: 1; }
.d-home .pc-row .phone-card { order: 2; }
.d-home .phone-card {
  background: #fff; border-radius: 28px; overflow: hidden;
  box-shadow: 0 32px 60px -22px rgba(11,20,55,.22), 0 8px 16px rgba(11,20,55,.06);
  border: 1px solid var(--border);
}
.d-home .pc-hero { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.d-home .pc-hero img { width: 100%; height: 100%; object-fit: cover; }
.d-home .pc-hero::after {
  content:""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(11,20,55,.72) 0%, rgba(11,20,55,0) 50%);
}
.d-home .pc-addr {
  position: absolute; left: 22px; right: 22px; bottom: 18px; color: #fff;
}
.d-home .pc-addr .nm {
  font-family: var(--ff-d); font-weight: 900;
  font-size: 34px; line-height: 1; letter-spacing: -.022em;
}
.d-home .pc-addr .meta {
  margin-top: 4px;
  font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.85);
}
.d-home .pc-addr .meta strong { color: #fff; }
.d-home .pc-addr .meta em { font-style: italic; color: var(--gold-l); }
.d-home .pc-addr .dot-sep { color: rgba(255,255,255,.4); margin: 0 6px; }

.d-home .pc-actions { padding: 18px 14px; display: flex; flex-direction: column; gap: 8px; }
.d-home .pc-action {
  display: grid; grid-template-columns: 42px 1fr 18px; gap: 14px; align-items: center;
  padding: 12px 16px; min-height: 64px; border-radius: 14px;
  text-decoration: none; cursor: pointer;
  background: var(--cream-xl);
  border: 1px solid var(--border); width: 100%; text-align: left; font: inherit;
  transition: background .15s, transform .15s, border-color .15s;
}
.d-home .pc-action:hover { background: #fff; border-color: var(--tandoco-blue); transform: translateY(-1px); }
.d-home .pc-action .ic {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--blue-xl); color: var(--tandoco-blue);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.d-home .pc-action.gold .ic { background: var(--gold-xl); color: var(--gold-d); }
.d-home .pc-action.blush .ic { background: rgba(245,201,204,.45); color: #A14F52; }
.d-home .pc-action .ic svg { width: 20px; height: 20px; }
.d-home .pc-action .txt { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; align-self: center; }
.d-home .pc-action .h { font-size: 14.5px; font-weight: 900; color: var(--ink); }
.d-home .pc-action .h em { font-style: italic; color: var(--tandoco-blue); }
.d-home .pc-action .s { font-size: 11.5px; font-weight: 600; color: var(--ink-mute); }
.d-home .pc-action .chev { width: 18px; height: 18px; color: var(--ink-mute); }
.d-home .pc-foot {
  display: flex; align-items: center; justify-content: space-around;
  padding: 18px 22px; margin: 6px 14px 14px; border-radius: 12px;
  background: var(--blue-xl);
  font-size: 12px; font-weight: 700; color: var(--ink-soft);
}
.d-home .pc-foot .item { display: inline-flex; align-items: center; gap: 6px; }
.d-home .pc-foot .item svg { width: 14px; height: 14px; color: var(--tandoco-blue); }
.d-home .pc-foot .item strong { color: var(--ink); font-weight: 900; }

.d-home .pc-side .eye { margin-bottom: 14px; }
.d-home .pc-side .h {
  font-family: var(--ff-d); font-weight: 900;
  font-size: 34px; line-height: 1.05; letter-spacing: -.022em;
  color: var(--ink); margin: 0 0 14px;
}
.d-home .pc-side .h em { font-style: italic; color: var(--tandoco-blue); }
.d-home .pc-side .lede { font-size: 14.5px; margin: 0 0 26px; max-width: none; }
.d-home .pc-side hr { border: 0; border-top: 1px solid var(--border); margin: 26px 0; }
.d-home .pc-rail-lbl {
  font-size: 9.5px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 18px; display: block;
}
.d-home .pc-rail {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px;
}
.d-home .pc-rail li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 0; font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.d-home .pc-rail .min {
  font-family: var(--ff-d); font-weight: 900;
  font-size: 15.5px; color: var(--tandoco-blue); letter-spacing: -.012em;
  min-width: 46px; flex-shrink: 0;
}
.d-home .pc-rail .nm { font-weight: 700; color: var(--ink); }
.d-home .pc-side .meta-line {
  margin: 24px 0 0; font-size: 13.5px; color: var(--ink-soft); font-weight: 600;
  padding: 14px 18px; background: var(--gold-xl); border-radius: 12px;
}
.d-home .pc-side .meta-line strong { color: var(--ink); font-weight: 900; }
.d-home .pc-side .meta-line em { font-style: italic; color: var(--tandoco-blue); }


/* ════════════════════════════════════════════════════════════════
   9 · TANDOCO INTELLIGENCE — navy band + tilted phone
   ──────────────────────────────────────────────────────────── */
.d-home .ai {
  background: var(--navy-d);
  color: #fff;
  padding: 72px 0 44px;  /* bumped top padding 40 → 72 to nudge card+phone down inside the section */
  position: relative; overflow: hidden;
  perspective: 1200px;
}
.d-home .ai-blush {
  position: absolute; pointer-events: none; z-index: 0;
  top: 50%; right: -300px; transform: translateY(-50%);
  width: 760px; height: 760px; border-radius: 50%; opacity: .6;
  /* warm gold core fading through indigo — ambient "spotlight" wash
     so the right half of the band reads as lit, not flat navy */
  background:
    radial-gradient(circle at 32% 50%, rgba(242,208,121,.32) 0%, rgba(242,208,121,.10) 26%, transparent 52%),
    radial-gradient(circle at 30% 50%, var(--tandoco-blue-l) 0%, var(--tandoco-blue-l) 40%, var(--blue-xl) 66%, transparent 92%);
}
.d-home .ai-ghost {
  position: absolute; pointer-events: none; z-index: 0;
  bottom: -34px; left: 50%; transform: translateX(-50%);
  font-family: var(--ff-d); font-style: italic; font-weight: 900;
  font-size: 264px; line-height: .85; letter-spacing: -.04em;
  color: rgba(235,227,207,.09); white-space: nowrap;
  text-align: center;
}
.d-home .ai-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px;
  align-items: start;  /* effective value is forced to stretch by the later override (~L5813): card stretches to the phone's height, content space-between */
}
.d-home .ai-inner .phone-wrap { justify-self: end; align-self: start; margin: 0; position: relative; }
/* Focused gold spotlight directly behind the phone — lifts it off the
   navy field so it reads as "lit on a stage" rather than pasted on. */
.d-home .ai-inner .phone-wrap::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 150%; height: 118%; border-radius: 50%;
  /* gold pushed out to the phone's perimeter (the opaque phone hides the
     center) so the warm light reads around the edges, indigo beyond */
  background: radial-gradient(ellipse 52% 50% at 50% 50%, rgba(242,208,121,.36) 32%, rgba(58,74,160,.22) 58%, transparent 78%);
  filter: blur(8px);
}
.d-home .ai-inner .phone-wrap .phone { position: relative; z-index: 1; }
/* Phone scaled to match the condensed card · was 420px, now 320px
   so it has presence against the card without overpowering it. */
.d-home .ai-inner .phone { width: 320px; }
.d-home .ai-card {
  background: var(--paper);
  border-radius: 22px; padding: 24px 24px 22px;  /* condensed · was 32/32/28 */
  color: var(--ink);
  box-shadow: 0 28px 56px -22px rgba(0,0,0,.55), 0 2px 6px -1px rgba(11,20,55,.20);
  overflow: hidden; position: relative;
}
.d-home .ai-card::after {
  content:""; position: absolute; top: -30%; right: -30%; width: 70%; height: 70%;
  background: radial-gradient(ellipse 60% 60% at 70% 30%, rgba(242,208,121,.25), transparent 65%);
  pointer-events: none;
}
.d-home .ai-card > * { position: relative; z-index: 2; }
.d-home .ai-card .eye { color: var(--gold-d); }
.d-home .ai-card .eye::before { background: var(--gold-d); }
.d-home .ai-card .headline { color: var(--ink); margin: 8px 0 0; font-size: 30px; line-height: 1.04; }
.d-home .ai-card .headline em { color: var(--tandoco-blue); }
.d-home .ai-card .lede { color: var(--ink-soft); margin: 8px 0 12px; font-size: 13.5px; line-height: 1.45; }
.d-home .ai-card .lede b { color: var(--ink); }
.d-home .ai-card .lede em { color: var(--tandoco-blue); }
/* 4 inline feature mini-tiles inside the ai-card so the rectangle
   fills with concrete proof points instead of empty white space */
.d-home .ai-feats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 4px 0 12px;
}
.d-home .ai-feat {
  display: flex; gap: 10px; align-items: center;
  min-height: 60px;  /* uniform tile height so single- and two-line rows line up */
  padding: 11px 12px; border-radius: 11px;
  background: var(--blue-xl);
  border: 1px solid rgba(11,20,55,.06);
  text-decoration: none; color: var(--ink);
  transition: transform .15s, border-color .15s;
}
.d-home .ai-feat:hover { transform: translateY(-2px); border-color: var(--tandoco-blue); }
.d-home .ai-feat .ic {
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--tandoco-blue); color: #fff;
  flex-shrink: 0;
}
.d-home .ai-feat .ic.gold { background: var(--gold); color: var(--navy-d); }
.d-home .ai-feat .ic.green { background: #34A853; color: #fff; }
.d-home .ai-feat .ic.deep { background: var(--navy-d); color: #fff; }
.d-home .ai-feat .ic svg { width: 15px; height: 15px; }
.d-home .ai-feat .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.d-home .ai-feat .nm { font-size: 12.5px; font-weight: 900; color: var(--ink); letter-spacing: -.010em; }
.d-home .ai-feat .nm em { font-style: italic; color: var(--tandoco-blue); font-weight: 700; }
.d-home .ai-feat .tg { font-size: 11px; font-weight: 600; color: var(--ink-mute); line-height: 1.35; }

/* (Quote block removed 2026-05-27 — Tommy's call: don't want a quote
   here, condense the section instead and let the existing interior
   elements fill the space.) */

/* 4-stat strip above the CTA · fills the cream card with real
   value-prop numbers instead of empty space. */
.d-home .ai-stats {
  margin: 4px 0 10px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  padding: 10px 4px 8px;
  border-top: 1px dashed rgba(11,20,55,.18);
}
.d-home .ai-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center;
}
.d-home .ai-stat .n {
  font-family: var(--ff-d); font-weight: 400; font-style: italic;
  font-size: 26px; line-height: 1; letter-spacing: -.022em;
  color: var(--tandoco-blue);
}
.d-home .ai-stat .n small {
  font-family: var(--ff); font-style: normal; font-weight: 700;
  font-size: 12px; color: var(--ink-mute); margin-left: 2px;
}
.d-home .ai-stat .l {
  font-size: 10.5px; font-weight: 800; color: var(--ink-soft);
  letter-spacing: .04em; text-transform: uppercase;
}

/* CTA now pinned to the very bottom of the flex column · self-end */
.d-home .ai-cta { align-self: stretch; justify-content: center; }

.d-home .phone-wrap {
  display: flex; justify-content: center; cursor: pointer;
  transition: transform .25s ease;
}
.d-home .phone-wrap:hover { transform: scale(1.015); }
.d-home .phone {
  width: 280px; aspect-ratio: 9 / 19.5;
  background: #0A1220; border-radius: 38px; padding: 8px;
  transform: rotateY(-10deg) rotateX(4deg);
  transform-origin: center center;
  box-shadow:
    -22px 36px 64px -22px rgba(0,0,0,.7),
    -6px 12px 24px -10px rgba(15,24,40,.4),
    inset 0 0 0 1px #1B2438;
  position: relative;
  animation: aiPhoneFloat 7s ease-in-out infinite;
}
/* Slow vertical float that preserves the 3D tilt (the rotate is baked
   into every keyframe so the animation doesn't flatten the phone). */
@keyframes aiPhoneFloat {
  0%, 100% { transform: rotateY(-10deg) rotateX(4deg) translate3d(0, 0, 0); }
  50%      { transform: rotateY(-10deg) rotateX(4deg) translate3d(0, -14px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .d-home .phone { animation: none; }
}
.d-home .phone::before {
  content:""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 68px; height: 18px; background: #0A1220; border-radius: 99px; z-index: 3;
}
.d-home .ph-screen {
  background: var(--paper); border-radius: 32px;
  width: 100%; height: 100%; padding: 22px 9px 20px;
  display: flex; flex-direction: column; gap: 4px;
  justify-content: space-between;
  overflow: hidden;
}
.d-home .ph-statusbar { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 4px; }
.d-home .ph-statusbar .logo { color: var(--tandoco-blue); font-family: 'Young Serif', Georgia, serif; font-weight: 400; font-size: 15px; letter-spacing: -.020em; line-height: 1; }
.d-home .ph-statusbar .stat { display: flex; align-items: center; gap: 4px; font-size: 8px; font-weight: 700; color: var(--ink-mute); letter-spacing: .06em; text-transform: uppercase; }
.d-home .ph-statusbar .stat .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--tandoco-blue); }

.d-home .ph-cal {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: 11px;
  background: linear-gradient(135deg, var(--blue-xl), #DEE5FF);
  border: 1px solid rgba(11,20,55,.10);
}
.d-home .ph-ring {
  width: 54px; height: 54px; border-radius: 50%;
  background: conic-gradient(var(--tandoco-blue) 0 71%, rgba(11,20,55,.15) 71% 100%);
  display: grid; place-items: center; flex-shrink: 0; position: relative;
}
.d-home .ph-ring::after { content: ""; position: absolute; inset: 5px; background: var(--paper); border-radius: 50%; }
.d-home .ph-ring .v {
  position: relative; z-index: 1; font-style: italic; font-weight: 800;
  font-size: 13px; color: var(--ink); letter-spacing: -.020em; line-height: .95; text-align: center;
}
.d-home .ph-ring .v small { display: block; font-style: normal; font-weight: 800; font-size: 6.5px; color: var(--ink-mute); letter-spacing: .10em; text-transform: uppercase; margin-top: 1px; }
.d-home .ph-cal .info { display: flex; flex-direction: column; gap: 1px; }
.d-home .ph-cal .info .h { font-size: 10.5px; font-weight: 900; color: var(--ink); letter-spacing: -.014em; }
.d-home .ph-cal .info .h em { font-weight: 600; color: var(--tandoco-blue); font-style: italic; }
.d-home .ph-cal .info .t { font-size: 8.5px; font-weight: 700; color: var(--ink-mute); letter-spacing: .02em; }
.d-home .ph-cal .info .pct { font-style: italic; font-weight: 800; font-size: 13px; color: var(--gold-d); letter-spacing: -.012em; margin-top: 2px; }

.d-home .ph-macros2 { display: flex; flex-direction: column; gap: 4px; }
.d-home .ph-mrow {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 6px;
  padding: 4px 7px; border-radius: 8px; background: var(--blue-xl);
  border: 1px solid rgba(11,20,55,.08);
}
.d-home .ph-mrow .l { font-size: 7px; font-weight: 800; letter-spacing: .08em; color: var(--tandoco-blue); text-transform: uppercase; }
.d-home .ph-mrow .bar { position: relative; height: 5px; background: rgba(15,24,40,.08); border-radius: 99px; overflow: hidden; }
.d-home .ph-mrow .bar span { display: block; height: 100%; border-radius: 99px; }
.d-home .ph-mrow.p .bar span { width: 73%; background: var(--tandoco-blue); }
.d-home .ph-mrow.c .bar span { width: 38%; background: var(--navy); }
.d-home .ph-mrow.f .bar span { width: 25%; background: var(--gold); }
.d-home .ph-mrow .v { font-style: italic; font-weight: 800; font-size: 9px; color: var(--ink); letter-spacing: -.010em; line-height: 1; }
.d-home .ph-mrow .v small { font-style: normal; font-weight: 700; font-size: 6.5px; color: var(--ink-mute); margin-left: 2px; }

.d-home .ph-trend {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 3px;
  padding: 6px 7px 4px; border-radius: 9px; background: var(--paper);
  border: 1px solid rgba(15,24,40,.06);
}
.d-home .ph-trend .tlbl { font-size: 6.5px; font-weight: 800; letter-spacing: .10em; color: var(--ink-mute); text-transform: uppercase; align-self: center; }
.d-home .ph-trend .bars { display: flex; align-items: flex-end; gap: 2px; flex: 1; height: 18px; }
.d-home .ph-trend .bars span { flex: 1; background: var(--blue-l); border-radius: 1.5px; }
.d-home .ph-trend .bars span.hi { background: var(--tandoco-blue); }
.d-home .ph-trend .bars span.mid { background: var(--navy); }
.d-home .ph-trend .pct2 { font-style: italic; font-weight: 800; font-size: 9px; color: var(--gold-d); }

.d-home .ph-micro {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 9px;
  background: var(--blue-xl); border: 1px solid rgba(11,20,55,.10);
}
.d-home .ph-micro .ic {
  width: 18px; height: 18px; border-radius: 5px; background: var(--navy); color: var(--paper);
  display: grid; place-items: center; flex-shrink: 0;
}
.d-home .ph-micro .ic svg { width: 10px; height: 10px; }
.d-home .ph-micro .txt { font-size: 8.5px; font-weight: 700; color: var(--ink); letter-spacing: -.005em; line-height: 1.2; }
.d-home .ph-micro .txt em { font-weight: 600; color: var(--tandoco-blue); font-style: italic; }
.d-home .ph-micro .delta { margin-left: auto; font-style: italic; font-weight: 800; font-size: 9.5px; color: var(--gold-d); }

.d-home .ph-wear { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
.d-home .ph-wear-chip {
  background: #fff; border: 1px solid rgba(15,24,40,.06);
  border-radius: 8px; padding: 6px 5px 5px;
  display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center;
}
.d-home .ph-wear-chip .ic {
  width: 14px; height: 14px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; margin-bottom: 1px;
}
.d-home .ph-wear-chip .ic svg { width: 9px; height: 9px; }
.d-home .ph-wear-chip.hyd .ic { background: var(--tandoco-blue); }
.d-home .ph-wear-chip.rec .ic { background: #34A853; }
.d-home .ph-wear-chip.stk .ic { background: var(--gold-d); }
.d-home .ph-wear-chip .num { font-size: 13px; font-weight: 900; color: var(--ink); letter-spacing: -.018em; line-height: 1; }
.d-home .ph-wear-chip .num small { font-size: 7.5px; font-weight: 700; color: var(--ink-mute); margin-left: 1px; }
.d-home .ph-wear-chip .lbl { font-size: 6.5px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.1; }
.d-home .ph-wear-chip .lbl em { color: var(--tandoco-blue); font-style: italic; letter-spacing: .05em; font-weight: 700; }

.d-home .ph-next {
  display: flex; gap: 6px;
  background: #fff; border: 1px solid rgba(15,24,40,.06);
  border-radius: 9px; padding: 6px;
}
.d-home .ph-next-side {
  flex: 0 0 32px; background: var(--blue-xl); border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3px 0;
}
.d-home .ph-next-side .dt { font-size: 10px; font-weight: 900; color: var(--tandoco-blue); letter-spacing: -.01em; line-height: 1; }
.d-home .ph-next-side .dt em { font-style: italic; font-weight: 700; }
.d-home .ph-next-side .mo { font-size: 6px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; color: var(--ink-mute); margin-top: 2px; }
.d-home .ph-next-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 1px 0; }
.d-home .ph-next-body .hd { font-size: 9px; font-weight: 800; color: var(--ink); letter-spacing: -.010em; }
.d-home .ph-next-body .hd em { font-style: italic; font-weight: 700; color: var(--tandoco-blue); }
.d-home .ph-next-body .meta { font-size: 7px; font-weight: 600; color: var(--ink-soft); letter-spacing: .005em; }
.d-home .ph-next-body .prog { display: flex; align-items: center; gap: 4px; }
.d-home .ph-next-body .prog .bar { flex: 1; height: 3px; background: var(--blue-xl); border-radius: 99px; overflow: hidden; }
.d-home .ph-next-body .prog .bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-d), var(--gold)); border-radius: 99px; }
.d-home .ph-next-body .prog .pct { font-size: 6.5px; font-weight: 800; color: var(--gold-d); letter-spacing: .05em; text-transform: uppercase; }

.d-home .ph-coach2 {
  background: var(--ink); color: var(--paper);
  border-radius: 9px; padding: 6px 8px;
  font-size: 8.5px; line-height: 1.35; font-weight: 600;
}
.d-home .ph-coach2 .top { font-size: 6.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 2px; }
.d-home .ph-coach2 em { font-weight: 600; color: var(--gold-l); font-style: italic; }


/* ════════════════════════════════════════════════════════════════
   10 · TANDOCOACH — 3-col detail / photo / chat
   ──────────────────────────────────────────────────────────── */
.d-home .coach {
  background:
    radial-gradient(42% 44% at 6% 12%, rgba(242,208,121,.22) 0%, transparent 70%),
    radial-gradient(44% 46% at 96% 90%, rgba(126,150,232,.20) 0%, transparent 72%),
    var(--paper);
  color: var(--ink);
  padding: 24px 0;
  position: relative; overflow: hidden;
}
.d-home .coach .eye { color: var(--gold-d); }
.d-home .coach .eye::before { background: var(--gold-d); }
.d-home .coach .headline { color: var(--ink); }
.d-home .coach .headline em { color: var(--tandoco-blue); font-style: italic; }
.d-home .coach .lede { color: var(--ink-soft); }
.d-home .coach .lede em { color: var(--gold-d); font-style: italic; }
.d-home .coach .lede b { color: var(--ink); }

/* ─ section header above the grid ─ */
/* ════════════════════════════════════════════════════════════════
   COACH v3 · compact card · small coach photo + live (animated) chat
   + a "for coaches" recruitment module (5% recurring commission)
   ──────────────────────────────────────────────────────────────── */
.d-home .coach .coach-2col {
  display: grid; grid-template-columns: 1.55fr 1fr;
  gap: clamp(16px, 2.2vw, 26px); align-items: stretch;
}
@media (max-width: 940px) { .d-home .coach .coach-2col { grid-template-columns: 1fr; } }

/* the dark "for coaches" panel — different audience, different look */
.d-home .coach .fc {
  display: flex; flex-direction: column; justify-content: center; gap: 13px;
  border-radius: 26px; padding: clamp(22px, 2.8vw, 36px);
  color: #eaf0ff;
  background: radial-gradient(125% 130% at 0% 0%, #1a2658 0%, #0d1436 56%, #080c24 100%);
  border: 1px solid rgba(126,150,232,.20);
  box-shadow: 0 32px 66px -42px rgba(8,12,36,.75);
}
.d-home .coach .fc-eye {
  font: 900 11px/1 var(--ff-d); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-l);
}
.d-home .coach .fc-h {
  margin: 0; font-family: var(--ff-d); font-weight: 900;
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1.06; letter-spacing: -.022em; color: #fff;
}
.d-home .coach .fc-h em { font-style: italic; color: var(--gold-l); }
.d-home .coach .fc-h .brand {
  font-family: 'Young Serif', Georgia, serif; font-weight: 400; font-style: normal;
  color: var(--gold-l); font-size: 1.12em; letter-spacing: -.02em;
}
.d-home .coach .fc-sub { margin: 0; font-size: 13.5px; line-height: 1.5; color: #b7c1dc; }
.d-home .coach .fc-stat {
  display: flex; align-items: center; gap: 14px; margin: 4px 0 2px;
  padding: 14px 16px; border-radius: 16px;
  background: rgba(126,150,232,.10); border: 1px solid rgba(150,170,235,.18);
}
.d-home .coach .fc-num {
  font: 900 clamp(38px, 4vw, 52px)/0.9 var(--ff-d); letter-spacing: -.03em;
  background: linear-gradient(160deg, var(--gold-l) 0%, var(--gold) 60%, var(--gold-d) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; flex-shrink: 0;
}
.d-home .coach .fc-lbl { font-size: 12px; font-weight: 600; line-height: 1.35; color: #cdd6ef; }
.d-home .coach .fc-cta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  margin-top: 4px; padding: 12px 22px; border-radius: 99px; font: 800 14px/1 var(--ff-d);
  background: linear-gradient(180deg, var(--gold-l) 0%, var(--gold-d) 100%); color: #2a1f04;
  box-shadow: 0 14px 26px -14px rgba(224,179,65,.6); transition: transform .2s ease;
}
.d-home .coach .fc-cta svg { width: 16px; height: 16px; }
.d-home .coach .fc-cta:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .d-home .coach .fc-cta { transition: none; } }


.d-home .coach .c3-card {
  display: grid; grid-template-columns: clamp(168px, 19vw, 224px) 1fr;
  gap: clamp(22px, 3vw, 46px); align-items: center;
  background: #fff; border: 1px solid var(--border); border-radius: 26px;
  padding: clamp(20px, 2.6vw, 34px);
  box-shadow: 0 32px 66px -42px rgba(11,20,55,.42);
}
@media (max-width: 760px) { .d-home .coach .c3-card { grid-template-columns: 1fr; } }
.d-home .coach .c3-coach {
  position: relative; margin: 0; border-radius: 20px; overflow: hidden;
  aspect-ratio: 4 / 5; box-shadow: 0 22px 42px -22px rgba(11,20,55,.5);
}
.d-home .coach .c3-coach img { display: block; width: 100%; height: 100%; object-fit: cover; }
.d-home .coach .c3-coach::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(11,20,55,.42) 0%, transparent 46%);
}
.d-home .coach .c3-tag {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  display: flex; flex-direction: column; line-height: 1.1;
  background: rgba(255,255,255,.95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-radius: 12px; padding: 6px 12px; box-shadow: 0 8px 18px rgba(11,20,55,.2);
}
.d-home .coach .c3-tag b { font: 900 13px/1.1 var(--ff-d); color: var(--ink); }
.d-home .coach .c3-tag small { font: 700 9.5px/1.3 var(--ff-d); color: var(--ink-mute); letter-spacing: .04em; }

.d-home .coach .c3-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.d-home .coach .c3-body .eye { display: inline-flex; color: var(--gold-d); }
.d-home .coach .c3-h {
  margin: 4px 0 0; font-family: var(--ff-d); font-weight: 900;
  font-size: clamp(24px, 2.6vw, 36px); line-height: 1.05; letter-spacing: -.024em; color: var(--ink);
}
.d-home .coach .c3-h em { font-style: italic; color: var(--tandoco-blue); }
.d-home .coach .c3-sub { margin: 0; max-width: 52ch; font-size: clamp(13.5px, 1.2vw, 15.5px); line-height: 1.5; color: var(--ink-soft); }
.d-home .coach .c3-sub b { color: var(--ink); font-weight: 800; }
.d-home .coach .c3-chat { display: flex; flex-direction: column; gap: 6px; margin: 2px 0; }
.d-home .coach .c3-cta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  margin-top: 2px; padding: 12px 22px; border-radius: 99px; font: 800 14px/1 var(--ff-d);
  background: var(--tandoco-blue); color: #fff; box-shadow: 0 14px 26px -14px rgba(30,42,120,.55);
  transition: transform .2s ease;
}
.d-home .coach .c3-cta svg { width: 16px; height: 16px; }
.d-home .coach .c3-cta:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .d-home .coach .c3-cta { transition: none; } }

/* ════════════════════════════════════════════════════════════════
   COACH v2 · compact card · "the loop" (numbers → coach → bag)
   ──────────────────────────────────────────────────────────────── */
.d-home .coach .c2-card {
  background: #fff; border: 1px solid var(--border); border-radius: 26px;
  padding: clamp(24px, 3.2vw, 44px);
  box-shadow: 0 32px 66px -42px rgba(11,20,55,.42);
  display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 30px);
}
.d-home .coach .c2-head { max-width: 760px; }
.d-home .coach .c2-head .eye { display: inline-flex; color: var(--gold-d); }
.d-home .coach .c2-h {
  margin: 7px 0 0; font-family: var(--ff-d); font-weight: 900;
  font-size: clamp(27px, 3.1vw, 44px); line-height: 1.04; letter-spacing: -.026em; color: var(--ink);
}
.d-home .coach .c2-h em { font-style: italic; color: var(--tandoco-blue); }
.d-home .coach .c2-sub { margin: 9px 0 0; max-width: 66ch; font-size: clamp(14px, 1.3vw, 16px); line-height: 1.55; color: var(--ink-soft); }
.d-home .coach .c2-sub b { color: var(--ink); font-weight: 800; }

.d-home .coach .c2-loop {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch; gap: clamp(6px, 1.2vw, 16px);
}
.d-home .coach .c2-node {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px;
  background: var(--blue-mist); border: 1px solid var(--border); border-radius: 18px;
  padding: 18px 14px;
}
.d-home .coach .c2-node.is-coach {
  background: linear-gradient(180deg, #fffdf5 0%, #ffffff 100%);
  border: 1.5px solid var(--gold-d); box-shadow: 0 16px 32px -18px rgba(224,179,65,.55);
}
.d-home .coach .c2-ic {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--border); color: var(--tandoco-blue);
}
.d-home .coach .c2-node.is-coach .c2-ic {
  background: linear-gradient(150deg, var(--gold-l) 0%, var(--gold-d) 100%); color: #fff;
  border: none; box-shadow: 0 8px 18px rgba(224,179,65,.42);
}
.d-home .coach .c2-ic svg { width: 24px; height: 24px; }
/* the real coach photo — the human is the star of the loop, so it's large */
.d-home .coach .c2-node.is-coach .c2-ic.c2-av {
  width: clamp(96px, 9vw, 124px); height: clamp(96px, 9vw, 124px);
  border-radius: 50%; padding: 0; overflow: hidden;
  background: none; border: 3px solid #fff;
  box-shadow: 0 0 0 3px var(--gold-d), 0 16px 30px -12px rgba(11,20,55,.45);
}
.d-home .coach .c2-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.d-home .coach .c2-nm { font: 900 15px/1.1 var(--ff-d); color: var(--ink); }
.d-home .coach .c2-tg { font-size: 11.5px; font-weight: 600; color: var(--ink-mute); line-height: 1.3; max-width: 19ch; }
.d-home .coach .c2-link { display: grid; place-items: center; color: var(--gold-d); }
.d-home .coach .c2-link svg { width: 22px; height: 22px; }

.d-home .coach .c2-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.d-home .coach .c2-free { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.d-home .coach .c2-free b { color: var(--green); font-weight: 900; }
.d-home .coach .c2-cta {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  padding: 13px 24px; border-radius: 99px; font: 800 14px/1 var(--ff-d);
  background: var(--tandoco-blue); color: #fff; box-shadow: 0 14px 26px -14px rgba(30,42,120,.55);
  transition: transform .2s ease;
}
.d-home .coach .c2-cta svg { width: 16px; height: 16px; }
.d-home .coach .c2-cta:hover { transform: translateY(-2px); }
@media (max-width: 880px) {
  .d-home .coach .c2-loop { grid-template-columns: 1fr; }
  .d-home .coach .c2-link { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) { .d-home .coach .c2-cta { transition: none; } }

.d-home .coach-head { max-width: 760px; margin: 0 0 12px; }
.d-home .coach-head .headline {
  font-size: 30px; margin: 6px 0 0;
  line-height: 1.06; letter-spacing: -.024em;
}
.d-home .coach-head .lede {
  font-size: 15px; line-height: 1.5; font-weight: 500;
  margin: 9px 0 0; max-width: 680px;
}

.d-home .coach-grid {
  display: grid; grid-template-columns: 1.02fr 1fr; gap: 32px;
  align-items: stretch;
}

/* ─ right column: the feature module ─ */
.d-home .coach-detail { display: flex; flex-direction: column; gap: 7px; justify-content: center; }
.d-home .coach-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.d-home .coach-feats li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.32;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 7px 13px; box-shadow: 0 5px 14px rgba(11,20,55,.05);
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.d-home .coach-feats li:hover { transform: translateX(5px); box-shadow: 0 12px 24px rgba(11,20,55,.10); }
.d-home .coach-feats .dot {
  width: 23px; height: 23px; border-radius: 50%; flex-shrink: 0; margin-top: 0;
  background: linear-gradient(150deg, var(--gold-l) 0%, var(--gold-d) 100%);
  display: grid; place-items: center;
  box-shadow: 0 4px 10px rgba(224,179,65,.30);
}
.d-home .coach-feats .dot::after {
  content:""; width: 11px; height: 6px; margin-top: -2px;
  border-left: 2.4px solid #fff; border-bottom: 2.4px solid #fff;
  transform: rotate(-45deg);
}
.d-home .coach-feats b { color: var(--ink); font-weight: 800; }

/* ─ right column: the photo stage with floating tag + chat ─ */
.d-home .coach-stage { position: relative; }
.d-home .coach-photo {
  border-radius: 22px; height: 100%; min-height: 196px;
  background:
    url('/images/gymbrocoach_square.png') no-repeat center / cover,
    linear-gradient(135deg, var(--navy-d) 0%, var(--tandoco-blue) 100%);
  background:
    image-set(
      url('/images/gymbrocoach_square.avif') type('image/avif'),
      url('/images/gymbrocoach_square.webp') type('image/webp'),
      url('/images/gymbrocoach_square.png') type('image/png')
    ) no-repeat center / cover,
    linear-gradient(135deg, var(--navy-d) 0%, var(--tandoco-blue) 100%);
  position: relative; overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(11,20,55,.45);
}
.d-home .coach-photo::after {
  content:""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(11,20,55,.38) 0%, transparent 50%);
}
/* floating coach name tag, top-left of the photo */
.d-home .coach-tag {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  border-radius: 99px; padding: 6px 15px 6px 6px;
  box-shadow: 0 10px 24px rgba(11,20,55,.18);
}
.d-home .coach-tag .ct-av {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(150deg, var(--gold-l) 0%, var(--gold-d) 100%); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 900;
}
.d-home .coach-tag .ct-nm { display: flex; flex-direction: column; line-height: 1.1; }
.d-home .coach-tag .ct-nm b { font-size: 13px; font-weight: 900; color: var(--ink); }
.d-home .coach-tag .ct-nm small { font-size: 10px; font-weight: 700; color: var(--ink-mute); letter-spacing: .04em; }

/* iMessage-style chat as a floating glass card overlapping the photo corner */
.d-home .coach-chat {
  position: absolute; right: 16px; bottom: -22px; z-index: 4;
  width: min(310px, 86%);
  background: rgba(255,255,255,.96); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 20px;
  padding: 16px 16px 17px;
  display: flex; flex-direction: column; gap: 9px;
  box-shadow: 0 28px 56px -20px rgba(11,20,55,.46), 0 4px 12px -4px rgba(15,24,40,.18);
  animation: coachFloat 6s ease-in-out infinite;
}
@keyframes coachFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .d-home .coach-chat { animation: none; }
}
.d-home .chat-day {
  text-align: center;
  font-size: 9.5px; font-weight: 800; color: var(--ink-mute);
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 2px;
}
.d-home .chat-row { display: flex; gap: 8px; max-width: 88%; align-items: flex-end; }
.d-home .chat-row.from-coach { align-self: flex-start; }
.d-home .chat-row.from-you { align-self: flex-end; justify-content: flex-end; }
.d-home .chat-row .chat-av {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ink); color: var(--gold-l);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; flex-shrink: 0;
}
.d-home .chat-row .bub {
  position: relative;
  max-width: 100%; padding: 9px 13px; border-radius: 16px;
  font-size: 12.5px; line-height: 1.38; font-weight: 500;
  letter-spacing: -.005em;
}
.d-home .chat-row.from-coach .bub { background: #F2F4FB; color: var(--ink); border-bottom-left-radius: 5px; }
.d-home .chat-row.from-you   .bub { background: var(--tandoco-blue); color: #fff; font-weight: 600; border-bottom-right-radius: 5px; }
.d-home .chat-row .bub em { font-style: italic; color: var(--tandoco-blue); font-weight: 700; }
.d-home .chat-row.from-you .bub em { color: var(--gold-l); }

/* animated typing indicator on the last (typing) coach row */
.d-home .chat-row .bub-typing {
  display: flex; align-items: center; gap: 5px;
  padding: 12px 15px;
}
.d-home .chat-row .bub-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(15,24,40,.45);
  animation: tcTyping 1.2s ease-in-out infinite;
}
.d-home .chat-row .bub-typing span:nth-child(2) { animation-delay: .15s; }
.d-home .chat-row .bub-typing span:nth-child(3) { animation-delay: .30s; }
@keyframes tcTyping {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30%           { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .d-home .chat-row .bub-typing span { animation: none; }
}

.d-home .coach-cta {
  align-self: flex-start; margin-top: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: 99px;
  background: var(--ink); color: var(--paper);
  font-size: 14px; font-weight: 800; text-decoration: none;
  letter-spacing: -.005em;
  box-shadow: 0 12px 26px -12px rgba(11,20,55,.5);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.d-home .coach-cta:hover { background: var(--tandoco-blue); transform: translateY(-2px); box-shadow: 0 18px 32px -14px rgba(30,42,120,.5); }
.d-home .coach-cta svg { width: 16px; height: 16px; }

/* ─ condensed single-row coach banner ─ */
.d-home .coach-band {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 32px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 28px; padding: 24px 30px;
  box-shadow: 0 30px 60px -34px rgba(11,20,55,.42), 0 8px 22px -14px rgba(11,20,55,.18);
}
.d-home .coach-band-av {
  position: relative; width: 116px; height: 116px; flex-shrink: 0;
  border-radius: 22px;
  background:
    image-set(
      url('/images/gymbrocoach_square.avif') type('image/avif'),
      url('/images/gymbrocoach_square.webp') type('image/webp'),
      url('/images/gymbrocoach_square.png') type('image/png')
    ) no-repeat center / cover,
    linear-gradient(135deg, var(--navy-d) 0%, var(--tandoco-blue) 100%);
  box-shadow: 0 18px 38px -18px rgba(11,20,55,.45);
}
.d-home .coach-band-tag {
  position: absolute; left: 8px; bottom: 8px;
  display: flex; flex-direction: column; line-height: 1.05;
  background: rgba(255,255,255,.95); backdrop-filter: blur(8px);
  border-radius: 12px; padding: 5px 11px;
  box-shadow: 0 8px 18px rgba(11,20,55,.18);
}
.d-home .coach-band-tag b { font-size: 12.5px; font-weight: 900; color: var(--ink); }
.d-home .coach-band-tag small { font-size: 9px; font-weight: 800; color: var(--ink-mute); letter-spacing: .05em; }

.d-home .coach-band-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.d-home .coach-band-main .eye { color: var(--gold-d); margin: 0; }
.d-home .coach-band-main .eye::before { background: var(--gold-d); }
.d-home .coach-band-h {
  font-family: var(--ff-d); font-weight: 900;
  font-size: 25px; line-height: 1.05; letter-spacing: -.02em;
  color: var(--ink); margin: 2px 0 0;
}
.d-home .coach-band-h em { color: var(--tandoco-blue); font-style: italic; }
.d-home .coach-band-p {
  margin: 0; font-size: 14px; line-height: 1.45; font-weight: 500;
  color: var(--ink-soft); max-width: 52ch;
}
.d-home .coach-band-p em { color: var(--gold-d); font-style: italic; }
.d-home .coach-band-feats {
  list-style: none; margin: 6px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 18px;
}
.d-home .coach-band-feats li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-soft); font-weight: 500;
}
.d-home .coach-band-feats b { color: var(--ink); font-weight: 800; }
.d-home .coach-band-feats .ck {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(150deg, var(--gold-l) 0%, var(--gold-d) 100%);
  display: grid; place-items: center;
  box-shadow: 0 3px 8px rgba(224,179,65,.30);
}
.d-home .coach-band-feats .ck::after {
  content:""; width: 9px; height: 5px; margin-top: -2px;
  border-left: 2.2px solid #fff; border-bottom: 2.2px solid #fff;
  transform: rotate(-45deg);
}
.d-home .coach-band .coach-cta { margin-top: 0; flex-shrink: 0; white-space: nowrap; }

@media (min-width: 960px) and (max-width: 1100px) {
  .d-home .coach-band { grid-template-columns: auto 1fr; gap: 22px; }
  .d-home .coach-band .coach-cta { grid-column: 1 / -1; justify-self: start; }
}


/* ════════════════════════════════════════════════════════════════
   11 · WHAT IT COSTS — winner + comparison
   ──────────────────────────────────────────────────────────── */
.d-home .math {
  /* matches .kitchen section bg — blue-mist base + gold/blue radial blooms */
  background:
    radial-gradient(48% 42% at 92% 16%, rgba(242,208,121,.32) 0%, transparent 78%),
    radial-gradient(42% 38% at 6% 86%, rgba(181,192,222,.40) 0%, transparent 78%),
    var(--blue-mist);
  padding: 56px 0 60px;
  position: relative; overflow: hidden;
}
.d-home .math::before {
  content:""; position: absolute; bottom: -220px; right: -220px;
  width: 460px; height: 460px; border-radius: 50%; opacity: .50;
  background: radial-gradient(circle at 30% 30%, var(--gold-l) 0%, var(--gold-l) 38%, var(--gold-xl) 66%, transparent 92%);
  pointer-events: none;
}
.d-home .math > * { position: relative; z-index: 1; }

/* ════════════════════════════════════════════════════════════════
   WHAT IT COSTS v2 · food photo (left) + the price math (right)
   ──────────────────────────────────────────────────────────────── */
.d-home .math2 {
  display: grid; grid-template-columns: 1fr 1.06fr; gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
@media (max-width: 1080px) { .d-home .math2 { grid-template-columns: 1fr; gap: 32px; } }
.d-home .math2-photo {
  position: relative; border-radius: 26px; overflow: hidden;
  border: 1px solid rgba(11,20,55,.06);
  box-shadow: 0 38px 76px -36px rgba(11,20,55,.5);
}
.d-home .math2-photo img { display: block; width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; }
.d-home .math2-tag {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  display: inline-flex; align-items: baseline; gap: 3px;
  background: linear-gradient(180deg, #4f74ec 0%, #3f63e6 100%); color: #fff;
  padding: 9px 17px; border-radius: 99px; box-shadow: 0 16px 28px -12px rgba(47,71,168,.6);
}
.d-home .math2-tag b { font: 900 22px/1 var(--ff-d); }
.d-home .math2-tag small { font-size: 12px; font-weight: 700; opacity: .92; }

.d-home .math2-info { display: flex; flex-direction: column; gap: 15px; }
.d-home .math2-info .eye { display: inline-flex; color: var(--gold-d); }
.d-home .math2-h {
  margin: 0; font-family: var(--ff); font-weight: 900;
  font-size: clamp(31px, 3.5vw, 50px); line-height: 1.04; letter-spacing: -.028em; color: var(--ink);
}
.d-home .math2-h .brand {
  font-family: 'Young Serif', Georgia, serif; font-weight: 400;
  color: var(--tandoco-blue); font-size: 1.08em; letter-spacing: -.02em;
}
.d-home .math2-h em { font-style: italic; color: var(--tandoco-blue); }
.d-home .math2-sub { margin: 0; max-width: 48ch; font-size: clamp(14px, 1.3vw, 16.5px); line-height: 1.5; color: var(--ink-soft); }
.d-home .math2-sub b { color: var(--ink); }

.d-home .math2-vs { list-style: none; margin: 3px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.d-home .math2-vs li {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px; box-shadow: 0 6px 16px -10px rgba(11,20,55,.18);
}
.d-home .math2-vs li.win {
  position: relative;
  background: linear-gradient(180deg, #fff4cf 0%, #fffdf3 100%);
  border: 2.5px solid var(--gold-d); border-radius: 18px;
  padding: 24px 22px;
  box-shadow: 0 22px 44px -16px rgba(224,179,65,.7), 0 0 0 5px rgba(224,179,65,.14);
}
.d-home .math2-vs li.win .nm { font-size: 18px; }
.d-home .math2-vs li.win .nm .brand {
  font-family: 'Young Serif', Georgia, serif; font-weight: 400; font-style: normal;
  color: var(--tandoco-blue); font-size: 1.42em; letter-spacing: -.02em; line-height: 1;
}
.d-home .math2-vs li.win .pr { font-size: 27px; }
.d-home .math2-vs .nm { display: flex; align-items: center; gap: 8px; font: 800 15px/1.2 var(--ff-d); color: var(--ink); }
.d-home .math2-vs .nm em { font-style: normal; font-weight: 600; font-size: 12.5px; color: var(--ink-mute); }
.d-home .math2-vs .badge {
  font: 900 9.5px/1 var(--ff-d); letter-spacing: .05em; text-transform: uppercase; color: #fff;
  background: var(--gold-d); padding: 4px 8px; border-radius: 99px;
}
.d-home .math2-vs .pr { font: 900 18px/1 var(--ff-d); color: var(--ink); white-space: nowrap; }
.d-home .math2-vs .pr small { font-size: 11px; font-weight: 700; color: var(--ink-mute); }
.d-home .math2-vs li.win .pr { color: var(--tandoco-blue); }

.d-home .math2-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.d-home .math2-save { font-size: 13.5px; color: var(--ink-soft); font-weight: 600; }
.d-home .math2-save b { color: var(--green); font-weight: 900; }
.d-home .math2-cta {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  padding: 13px 22px; border-radius: 99px; font: 800 14px/1 var(--ff-d);
  background: var(--ink); color: #fff; box-shadow: 0 14px 26px -14px rgba(11,20,55,.5);
  transition: transform .2s ease;
}
.d-home .math2-cta svg { width: 16px; height: 16px; }
.d-home .math2-cta:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .d-home .math2-cta { transition: none; } }

.d-home .math-head { text-align: left; margin-bottom: 28px; }
.d-home .math-head .eye { display: inline-flex; color: var(--gold-d); }
.d-home .math-head .eye::before { background: var(--gold-d); }
/* heading uses Young Serif for the "tandoco" wordmark + a sans
   modifier so the brand name reads as the headline anchor */
.d-home .math-head h2 {
  font-family: var(--ff); font-weight: 900; font-size: 56px;
  line-height: 1.05; letter-spacing: -.030em; color: var(--ink); margin: 12px 0 0;
}
.d-home .math-head h2 .brand {
  font-family: 'Young Serif', Georgia, serif;
  font-weight: 400; font-style: normal;
  color: var(--tandoco-blue); letter-spacing: -.020em;
  font-size: 1.1em; /* bump serif so its proportions read with the sans */
}
.d-home .math-head h2 em { font-style: italic; color: var(--tandoco-blue); font-weight: 700; }
.d-home .math-head .sub { margin-top: 10px; font-size: 14.5px; color: var(--ink-soft); font-weight: 600; }
.d-home .math-head .sub .brand-sm {
  font-family: 'Young Serif', Georgia, serif;
  font-weight: 400; font-style: normal;
  color: var(--tandoco-blue); font-size: 1.10em; letter-spacing: -.018em;
}
.d-home .math-head .sub em { color: var(--gold-d); font-style: italic; font-weight: 800; }
.d-home .math-grid {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: start;
}
.d-home .winner {
  background: linear-gradient(140deg, var(--tandoco-blue) 0%, var(--navy-d) 100%);
  color: #fff; border-radius: 22px; padding: 16px 30px 26px;
  position: relative; overflow: hidden;
  text-decoration: none;
  box-shadow: 0 28px 48px -20px rgba(11,20,55,.40);
}
.d-home .winner::before {
  content:""; position: absolute; top: -100px; right: -100px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(242,208,121,.22) 0%, transparent 65%);
  pointer-events: none;
}
.d-home .winner-sticker {
  position: absolute; top: 16px; right: 18px;
  padding: 5px 12px; border-radius: 99px;
  background: var(--gold-l); color: var(--navy-d);
  font-size: 9.5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
}
.d-home .winner-head { display: block; margin: 0 0 12px; }
/* Young Serif wordmark inside the winner card */
.d-home .winner-nm {
  font-family: 'Young Serif', Georgia, serif;
  font-weight: 400; font-style: normal;
  font-size: 42px; color: #fff; letter-spacing: -.022em;
}
.d-home .winner-price { position: absolute; top: 60px; right: 30px; display: inline-flex; align-items: baseline; gap: 4px; }
.d-home .winner-price .amt { font-family: var(--ff-d); font-weight: 400; font-size: 80px; color: var(--gold-l); letter-spacing: -.028em; line-height: .9; }
.d-home .winner-price .per { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.65); }
.d-home .winner-tag {
  font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.78);
  margin: 0 0 16px; font-weight: 500;
  max-width: 38ch;
}
.d-home .winner-feats { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px; }
.d-home .winner-feats li { display: flex; align-items: center; gap: 12px; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.92); }
.d-home .winner-feats li b { color: #fff; font-weight: 800; }
.d-home .winner-feats .mk { width: 22px; height: 22px; border-radius: 50%; background: var(--gold-l); color: var(--navy-d); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.d-home .winner-feats .mk svg { width: 12px; height: 12px; }

/* Big savings pill — fills the bottom of the winner card so the
   "what you keep" callout sits right above the CTA. */
.d-home .winner-savings {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 18px;
  background: rgba(242,208,121,.14);
  border: 1px solid rgba(242,208,121,.45);
  border-radius: 14px;
  margin: 0 0 18px;
}
.d-home .winner-savings .amt {
  font-family: var(--ff-d); font-weight: 400; font-style: italic;
  font-size: 26px; color: var(--gold-l); letter-spacing: -.018em; line-height: 1;
}
.d-home .winner-savings .amt small {
  font-family: var(--ff); font-style: normal; font-size: 12px;
  font-weight: 700; color: rgba(242,208,121,.75); margin-left: 2px;
}
.d-home .winner-savings .vs {
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
}

.d-home .winner-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-radius: 99px;
  background: var(--gold-l); color: var(--navy-d);
  font-size: 13.5px; font-weight: 900;
  width: 100%; justify-content: center;
}
.d-home .winner-cta svg { width: 14px; height: 14px; }

.d-home .vs-stack { display: flex; flex-direction: column; gap: 10px; }
.d-home .vs-row {
  background: #fff; border: 1px solid var(--border);
  border-radius: 16px; padding: 16px 18px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 6px 16px -10px rgba(15,24,40,.18);
}
.d-home .vs-icn {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--cream-xl); color: var(--ink-soft);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.d-home .vs-icn svg { width: 22px; height: 22px; }
.d-home .vs-text { flex: 1; min-width: 0; }
.d-home .vs-nm { font-size: 14.5px; font-weight: 900; color: var(--ink); letter-spacing: -.005em; }
.d-home .vs-tag { font-size: 11.5px; font-weight: 600; color: var(--ink-mute); margin-top: 2px; }
.d-home .vs-price { text-align: right; }
.d-home .vs-amt { font-family: var(--ff-d); font-weight: 400; font-size: 22px; color: var(--ink); letter-spacing: -.018em; line-height: 1; }
.d-home .vs-amt span { font-family: var(--ff); font-size: 11px; font-weight: 700; color: var(--ink-mute); }
.d-home .vs-delta { display: block; font-size: 10.5px; font-weight: 900; color: var(--coral); letter-spacing: .03em; margin-top: 3px; }
.d-home .math-foot { text-align: center; margin: 24px 0 0; font-size: 14.5px; font-weight: 600; color: var(--ink-soft); }
.d-home .math-foot em { font-style: italic; color: var(--gold-d); font-weight: 800; }


/* ════════════════════════════════════════════════════════════════
   12 · REVIEWS — 3-col real Google reviews
   ──────────────────────────────────────────────────────────── */
.d-home .rev {
  background: #ffffff;
  padding: 56px 0 64px;
  position: relative; overflow: hidden;
}
.d-home .rev::before {
  content:""; position: absolute; top: -220px; right: -220px;
  width: 460px; height: 460px; border-radius: 50%; opacity: .45;
  background: radial-gradient(circle at 30% 70%, var(--blue-l) 0%, var(--blue-l) 42%, var(--blue-xl) 68%, transparent 92%);
  pointer-events: none;
}
.d-home .rev > * { position: relative; z-index: 1; }
.d-home .rev-head { text-align: center; margin-bottom: 18px; }
.d-home .rev-head .eye { display: inline-flex; color: var(--gold-d); }
.d-home .rev-head .eye::before { background: var(--gold-d); }
.d-home .rev-head .headline { margin-left: auto; margin-right: auto; }
.d-home .rev-head .headline em { color: var(--gold-d) !important; }

/* tandoco-blue summary bar (matches live) */
.d-home .rev-summary-wrap { display: flex; justify-content: center; margin: 8px 0 36px; }
.d-home .rev-summary {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--tandoco-blue);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px; padding: 14px 22px;
  box-shadow: 0 14px 28px -16px rgba(30,42,120,.55), 0 2px 4px rgba(15,24,40,.20);
}
.d-home .rev-summary .g-mark { width: 24px; height: 24px; flex-shrink: 0; }
.d-home .rev-summary .num {
  font-family: var(--ff); font-size: 30px; font-weight: 900; color: #ffffff;
  letter-spacing: -.022em; font-variant-numeric: tabular-nums; line-height: 1;
}
.d-home .rev-summary .meta { display: flex; flex-direction: column; gap: 2px; line-height: 1.4; text-align: left; }
.d-home .rev-summary .meta .stars { color: var(--gold-l); font-size: 13px; letter-spacing: 2px; line-height: 1; }
.d-home .rev-summary .meta .lbl { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.78); }
.d-home .rev-summary .meta .lbl b { color: #ffffff; font-weight: 800; }

/* tilted cards — matches live transform pattern */
.d-home .rev-stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 12px 8px 6px; }
.d-home .rev-card {
  background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .2s ease;
  box-shadow: 0 18px 34px -16px rgba(15,24,40,.28), 0 2px 6px rgba(15,24,40,.07);
}
.d-home .rev-stack .rev-card:nth-child(1) { transform: rotate(-1.4deg); }
.d-home .rev-stack .rev-card:nth-child(2) { transform: rotate(.9deg); }
.d-home .rev-stack .rev-card:nth-child(3) { transform: rotate(-.6deg); }
.d-home .rev-card:hover { transform: rotate(0deg) translateY(-2px); }
.d-home .rev-card-head { display: flex; align-items: center; gap: 10px; }
.d-home .rev-card-head .av {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ff); font-weight: 900; font-size: 14px; color: #fff;
  flex-shrink: 0; letter-spacing: -.01em;
}
.d-home .rev-card-head .av.c1 { background: var(--navy-d); color: var(--gold-l); }
.d-home .rev-card-head .av.c2 { background: var(--gold-d); color: var(--paper); }
.d-home .rev-card-head .av.c3 { background: var(--tandoco-blue); }
.d-home .rev-card-head .nm {
  flex: 1; font-size: 14px; font-weight: 800; color: var(--ink);
  display: flex; flex-direction: column; gap: 2px;
}
.d-home .rev-card-head .nm span { font-size: 11px; font-weight: 600; color: var(--ink-mute); }
.d-home .rev-card-head .g-mark { width: 16px; height: 16px; flex-shrink: 0; }
.d-home .rev-card-stars { display: flex; align-items: center; gap: 10px; }
.d-home .rev-card-stars .ss { color: var(--gold-d); font-size: 14px; letter-spacing: 1px; }
.d-home .rev-card-stars .when { font-size: 11.5px; color: var(--ink-mute); font-weight: 600; }
.d-home .rev-card .q { font-family: var(--ff); font-weight: 500; font-size: 14.5px; line-height: 1.55; color: var(--ink); margin: 0; flex: 1; }
.d-home .rev-cta { text-align: center; margin-top: 32px; }
.d-home .rev-cta a { font-size: 13.5px; font-weight: 800; color: var(--tandoco-blue); }


/* ════════════════════════════════════════════════════════════════
   13 · FROM THE KITCHEN — blog 3-col rail
   ──────────────────────────────────────────────────────────── */
.d-home .blog {
  background:
    radial-gradient(50% 45% at 8% 18%, rgba(242,208,121,.22) 0%, transparent 75%),
    radial-gradient(45% 40% at 92% 82%, rgba(181,192,222,.30) 0%, transparent 75%),
    var(--tandoco-blue);
  color: #fff;
  padding: 80px 0;
}
.d-home .blog-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: 36px;
}
.d-home .blog-head h2 {
  font-family: var(--ff-d); font-weight: 900; font-size: 64px; line-height: 1;
  letter-spacing: -.022em; color: #fff; margin: 0;
}
.d-home .blog-head h2 em { font-style: italic; color: var(--gold-l); }
.d-home .blog-head .see { font-size: 14px; font-weight: 800; color: var(--gold-l); }

.d-home .blog-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.d-home .blog-card {
  background: var(--cream);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s, border-color .15s;
}
.d-home .blog-card:hover { transform: translateY(-3px); border-color: var(--gold-l); }
.d-home .blog-card .photo { aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--gold) 0%, var(--gold-l) 100%); }
.d-home .blog-card.b2 .photo { background: linear-gradient(135deg, var(--blush) 0%, var(--blush-d) 100%); }
.d-home .blog-card.b3 .photo { background: linear-gradient(135deg, var(--coral) 0%, #823634 100%); }
.d-home .blog-card .body { padding: 22px 24px 26px; background: var(--cream); flex: 1 1 auto; }
.d-home .blog-card .cat { font-size: 10px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: var(--tandoco-blue); margin-bottom: 8px; display: block; }
.d-home .blog-card .ti { font-family: var(--ff-d); font-weight: 900; font-size: 22px; line-height: 1.18; letter-spacing: -.012em; color: #161616; margin: 0; }
.d-home .blog-card .ti em { font-style: italic; color: var(--tandoco-blue); }
.d-home .blog-card .meta { margin-top: 14px; font-size: 11.5px; font-weight: 700; color: rgba(22,22,22,.62); }


/* ════════════════════════════════════════════════════════════════
   14 · SOCIAL CONTACT — 4-col cards
   ──────────────────────────────────────────────────────────── */
.d-home .social {
  background:
    radial-gradient(45% 40% at 90% 18%, rgba(251,237,194,.50) 0%, transparent 78%),
    radial-gradient(40% 36% at 8% 86%, rgba(213,223,242,.55) 0%, transparent 78%),
    var(--blue-mist);
  padding: 88px 0;
  position: relative; overflow: hidden;
}
.d-home .social::before {
  content:""; position: absolute; top: -140px; left: -140px;
  width: 360px; height: 360px; border-radius: 50%; opacity: .55;
  background: radial-gradient(circle at 70% 60%, var(--gold-l) 0%, var(--gold-l) 38%, var(--gold-xl) 66%, transparent 92%);
  pointer-events: none;
}
.d-home .social > * { position: relative; z-index: 1; }
.d-home .social-head { text-align: left; margin-bottom: 36px; }
.d-home .social-head .eye { display: inline-flex; }
.d-home .social-head h2 { font-family: var(--ff-d); font-weight: 900; font-size: 64px; line-height: 1; letter-spacing: -.022em; color: var(--ink); margin: 16px 0 0; }
.d-home .social-head h2 em { font-style: italic; color: var(--tandoco-blue); }
.d-home .social-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.d-home .social-card {
  display: flex; align-items: center; gap: 16px;
  padding: 22px; border-radius: 16px;
  background: #fff; border: 1px solid var(--border);
  transition: transform .15s, border-color .15s;
}
.d-home .social-card:hover { transform: translateY(-2px); border-color: var(--tandoco-blue); }
.d-home .social-card .icn { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.d-home .social-card.ig .icn { background: linear-gradient(135deg, #E1306C, #F77737); }
.d-home .social-card.tt .icn { background: var(--navy-d); }
.d-home .social-card.em .icn { background: var(--tandoco-blue); }
.d-home .social-card.ph .icn { background: var(--gold-d); }
.d-home .social-card .icn svg { width: 22px; height: 22px; }
.d-home .social-card .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.d-home .social-card .lbl { font-size: 10px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); }
.d-home .social-card .val { font-size: 15px; font-weight: 900; color: var(--ink); letter-spacing: -.005em; }


/* ════════════════════════════════════════════════════════════════
   15 · FAQ — accordion, centered
   ──────────────────────────────────────────────────────────── */
.d-home .faq {
  background: var(--paper);
  padding: 96px 0 112px;
  position: relative; overflow: hidden;
}
.d-home .faq::before {
  content:""; position: absolute; bottom: -200px; right: -200px;
  width: 460px; height: 460px; border-radius: 50%; opacity: .50;
  background: radial-gradient(circle at 30% 30%, var(--gold-l) 0%, var(--gold-l) 38%, var(--gold-xl) 66%, transparent 92%);
  pointer-events: none;
}
.d-home .faq > * { position: relative; z-index: 1; }
.d-home .faq-head { text-align: left; margin-bottom: 36px; }
.d-home .faq-head .eye { display: inline-flex; }
.d-home .faq-head h2 { font-family: var(--ff-d); font-weight: 900; font-size: 64px; line-height: 1; letter-spacing: -.024em; color: var(--ink); margin: 16px 0 0; }
.d-home .faq-head h2 em { font-style: italic; color: var(--tandoco-blue); }
.d-home .faq-head .sub { margin-top: 14px; font-size: 15px; color: var(--ink-soft); font-weight: 600; }
.d-home .faq-head .sub em { font-style: italic; color: var(--tandoco-blue); }
.d-home .faq-list { max-width: 880px; margin: 0; }
.d-home .faq-item { border-bottom: 1px solid var(--border); }
.d-home .faq-q {
  width: 100%; padding: 22px 0;
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  text-align: left; font: inherit;
  font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -.012em;
}
.d-home .faq-q em { font-style: italic; color: #1E40AF; }
.d-home .faq-q .caret {
  width: 30px; height: 30px; border-radius: 10px;
  background: #1E40AF;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: #fff;
  transition: transform .3s ease, background .25s ease;
}
.d-home .faq-q .caret svg { width: 15px; height: 15px; }
.d-home .faq-item.open .faq-q .caret { transform: rotate(45deg); background: var(--tandoco-blue); }
.d-home .faq-a { display: none; padding: 0 0 22px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); font-weight: 500; }
.d-home .faq-item.open .faq-a { display: block; }
.d-home .faq-a em { font-style: italic; color: var(--tandoco-blue); font-weight: 700; }


/* ════════════════════════════════════════════════════════════════
   16 · FOOTER — editorial 5-col
   ──────────────────────────────────────────────────────────── */
.d-home .footer {
  background: var(--navy-d); color: #fff;
  padding: 60px 0 30px;
}
.d-home .footer-grid {
  display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px;
  align-items: flex-start;
}
.d-home .footer-brand .wordmark { font-family: var(--ff-d); font-size: 34px; color: #fff; letter-spacing: -.024em; line-height: 1; display: inline-block; }
.d-home .footer-brand p { margin: 14px 0 22px; max-width: 360px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.65); }
.d-home .footer-sub {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 12px;
  display: flex; align-items: center; gap: 10px;
}
.d-home .footer-sub input {
  flex: 1; border: none; background: transparent; outline: none;
  font: inherit; font-size: 13px; font-weight: 600; color: #fff;
}
.d-home .footer-sub input::placeholder { color: rgba(255,255,255,.5); }
.d-home .footer-sub button {
  background: var(--gold-l); color: var(--navy-d); border: none;
  padding: 9px 16px; border-radius: 99px;
  font: inherit; font-size: 12px; font-weight: 900; cursor: pointer;
}
.d-home .footer-col h4 {
  font-size: 10.5px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-l); margin: 0 0 14px;
}
.d-home .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.d-home .footer-col a { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.7); transition: color .15s; }
.d-home .footer-col a:hover { color: #fff; }
.d-home .footer-foot {
  margin-top: 48px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.5);
}

.d-home .mockup-badge {
  position: fixed; bottom: 20px; right: 20px;
  background: var(--ink); color: #fff;
  padding: 12px 18px; border-radius: 99px;
  font-size: 11px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,.4);
  z-index: 999;
}
.d-home .mockup-badge::before {
  content:""; display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: var(--gold-l); margin-right: 8px; vertical-align: middle;
}


/* ═════════ narrow desktop (≤1180px) — soften the type ═════════ */
/* The editorial "headline pushed left" bleed only switches on when
   the viewport is wide enough to absorb a -60px pull without clipping
   the type. Below this it stays at margin-left:0 (set on .hero-left). */
/* 2026-06-03 · the old -60px editorial bleed clipped the first letter of
   every headline line at 1400–1480px widths (the bleed exceeded the
   container's 56px side padding while the hero clips overflow). The bold
   redesign keeps the headline fully on-screen, so the bleed is dropped. */

/* ═════════ desktop (≥1280px) — use the real estate ═════════
   On a normal desktop/laptop the 1360px container left fat empty
   margins and the editorial headlines read small for the space, so
   the page felt like a narrow strip floating in the middle of the
   screen. This tier widens the container, opens up the full-bleed
   band interiors, gives the section rhythm more air, and scales the
   editorial headlines up so the page fills the screen instead of
   being boxed. Engages on every real desktop width, not just big
   external monitors. (Narrow tablets <1280px keep the tighter base.) */
@media (min-width: 1280px) {
  /* fluid on large screens: holds 1480 on normal desktops, then grows with
     the viewport (up to 1880) so the site fills big monitors instead of
     stranding everything in a narrow centre column */
  .d-home .wrap { max-width: clamp(1480px, 90vw, 1880px); padding: 0 56px; }
  .d-home .wrap-narrow { max-width: 1120px; }
  .d-home .map-hero-inner { max-width: 1480px; }
  .d-home .whole-overlay { max-width: 1480px; }
  .d-home .whole-h { max-width: 18ch; }
  .d-home .whole-sub { max-width: 680px; }

  /* a little more breathing room between sections on big screens */
  .d-home .hw     { padding: 44px 0 48px; }
  .d-home .who    { padding: 40px 0; }
  .d-home .coach  { padding: 40px 0; }
  .d-home .social { padding: 104px 0; }
  .d-home .faq    { padding: 112px 0 128px; }

  /* editorial headlines scale up so they don't look small in a wide band */
  .d-home .headline { font-size: 80px; }
  .d-home .whole-h  { font-size: 92px; }
  .d-home .blog-head h2,
  .d-home .social-head h2,
  .d-home .faq-head h2 { font-size: 72px; }
}

@media (max-width: 1180px) {
  /* .hero-h1 now uses a fluid clamp() — no fixed override needed here. */
  .d-home .headline { font-size: 58px; }
  .d-home .whole-h { font-size: 62px; }
  .d-home .math-head h2 { font-size: 46px; }
  .d-home .winner-nm { font-size: 36px; }
  .d-home .winner-price .amt { font-size: 72px; }
  .d-home .blog-head h2, .d-home .social-head h2, .d-home .faq-head h2 { font-size: 52px; }
}

/* ════════════════════════════════════════════════════════════════
   2026-05-23 · PATCH — undo legacy mobile globals leaking into
   desktop. Three production-CSS blocks were authored before .d-home
   existed and use `!important` without scoping:
     · line ~184  `.rev-card, .blog-card, .coach-detail, .whole-list
                   li, .ai-feat, .faq-list, … { background:#ffffff
                   !important }`
     · line ~199  same selector list `{ border-radius:18px }`
     · line ~743  `.hero-photo { background:#F5F7FC; padding-top:72px;
                   padding-bottom:30px }` (intended for the mobile
                   wrapper element, but also catches the desktop img)
   They turn the desktop hero into a cream rectangle, paint white
   cards on the navy "coach" + "whole ingredients" bands (white text
   becomes invisible), wash out the blog rail and intelligence
   feat-tiles, and force the FAQ into a bordered white card.
   Restoring each one to its mockup-intended treatment, gated by the
   surrounding @media (min-width: 960px) so mobile cascade is
   untouched.
   ──────────────────────────────────────────────────────────── */

/* hero food image · no painted backdrop, no vertical padding */
.d-home .hero-photo {
  background: transparent !important;
  padding: 0 !important;
}

/* whole-ingredients yes/no chips on the dark navy band ·
   coral/gold tinted translucent pills, not solid white boxes */
.d-home .whole-list li      { background: rgba(255,255,255,.22) !important; }
.d-home .whole-list li.no   { background: rgba(231,128,98,.30)  !important; }
.d-home .whole-list li.yes  { background: rgba(242,208,121,.30) !important; }

/* coach section detail column on the dark navy band · transparent
   so the white headline + gold eyebrow read against the navy bg
   instead of vanishing into a white card */
.d-home .coach-detail {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
/* coach chat panel keeps the white card but at the design's 22px
   radius rather than the global's forced 18px */
.d-home .coach-chat { border-radius: 22px !important; }

/* legacy mobile @media block at line ~3604 pins .coach-chat / .coach-
   photo / .coach-detail into a 2-col grid (chat top-left, photo top-
   right spanning two rows, detail bottom-left). On the desktop 3-col
   grid this collapses the layout into chat+photo on row 1 and detail
   below — the screenshot Tommy sent. Clear the placements + margins
   so the desktop 1fr/1fr/1fr grid renders detail | photo | chat in a
   single row, as the mockup intended. */
.d-home .coach-detail,
.d-home .coach-photo,
.d-home .coach-chat {
  grid-column: auto !important;
  grid-row: auto !important;
  align-self: stretch !important;
  margin: 0 !important;
}
.d-home .coach-photo { border-radius: 22px !important; }
.d-home .coach-detail { padding-right: 0 !important; }

/* (2026-06-03) the old dark-navy-coach `.coach-feats li` flatten
   override was removed here — the new light coach design renders the
   feature rows as white check-cards, and its own `.d-home .coach-feats
   li` rule (white bg / border / radius / shadow) now wins on its own.
   Re-adding an `!important` reset here would silently flatten them. */

/* intelligence card · 4 inner feature mini-tiles read as light-blue
   chips on a paper card, not white-on-white */
.d-home .ai-feat {
  background: var(--blue-xl) !important;
  border-radius: 11px !important;
}

/* intelligence section · phone on the right is ~606px tall but the
   paper card on the left is only ~360px, so center-aligning them
   leaves a big void above + below the card. Stretch the card to the
   phone's height and distribute its content with space-between so
   the eyebrow, headline+lede, feature grid and CTA fill the rectangle
   rhythmically instead of clumping at the top. */
.d-home .ai-inner { align-items: stretch !important; }
.d-home .ai-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 600px !important;
}
.d-home .ai-card .ai-feats { margin: auto 0 !important; }

/* pickup/delivery action rows · cream chips, not solid white */
.d-home .pc-action {
  background: var(--cream-xl) !important;
  border-radius: 14px !important;
}

/* blog rail cards on the deep-blue band · frosted glass surface so
   the white headline text reads — global was forcing pure white
   bg, leaving the headline invisible */
.d-home .blog-card {
  background: var(--cream) !important;
  border-radius: 18px !important;
}

/* FAQ list · flat accordion flush on the page bg, no bordered card.
   The global `.faq-list` rule was forcing a bordered white box with
   a shadow. The caret chip is a solid cobalt square, so the "+" must
   stay white in both states (the old white-circle chip needed ink). */
.d-home .faq-list {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.d-home .faq-q .caret svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}
.d-home .faq-item.open .faq-q .caret svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

}

/* ─────────────────────────────────────────────────────────────────────
   TRUST STRIP — surfaces real social-proof numbers between the hero
   stack and the rest of the page. Static-baked for customers/meals/cities;
   google rating is hydrated live from /api/google-reviews. Matches the
   playful design system (blues/golds/whites only, 1140px max, big
   number/small label, hairline dividers, 2x2 mobile / 4-across desktop).
   ───────────────────────────────────────────────────────────────────── */
.s-trust{
  background:#ffffff;
  padding:36px 16px 32px;
  position:relative;
  overflow:hidden;
}
.s-trust .s-trust-inner{
  max-width:1140px;
  margin:0 auto;
  padding:0 16px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
  border-top:1px solid var(--blue-xl);
  border-bottom:1px solid var(--blue-xl);
}
.s-trust .s-trust-cell{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:22px 14px;
  position:relative;
  min-height:96px;
}
/* hairlines between cells — vertical on the right edge, horizontal on
   the bottom for the top row. last column of each row drops the right
   border; bottom row drops the bottom border. */
.s-trust .s-trust-cell + .s-trust-cell{border-left:1px solid var(--blue-xl);}
.s-trust .s-trust-cell:nth-child(2n+1){border-left:0;}
.s-trust .s-trust-cell:nth-child(-n+2){border-bottom:1px solid var(--blue-xl);}
.s-trust .s-trust-num{
  font-family:var(--serif);
  font-weight:400;
  font-size:34px;
  line-height:1;
  color:var(--ink);
  letter-spacing:-.012em;
  display:inline-flex;
  align-items:baseline;
  gap:6px;
}
.s-trust .s-trust-num em{
  font-family:var(--serif);
  font-style:normal;
  color:var(--gold-d);
  font-size:.78em;
  font-weight:400;
}
.s-trust .s-trust-num .star{
  color:var(--gold-d);
  font-style:normal;
  font-size:.92em;
  line-height:1;
}
.s-trust .s-trust-lbl{
  margin-top:8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
/* placeholder marker — bright blush so a forgotten {{TOKEN}} can't ship.
   matches the playful palette; deliberate visual yelp. */
.s-trust .s-trust-num .ph{
  color:var(--blush-d);
  font-family:var(--ff);
  font-style:italic;
  font-size:.55em;
  font-weight:700;
  letter-spacing:.04em;
}
/* google pillar starts hidden; revealed by JS only when the
   /api/google-reviews endpoint resolves with a real rating. */
.s-trust .s-trust-cell.is-google{visibility:hidden;}
.s-trust .s-trust-cell.is-google.is-ready{visibility:visible;}

/* desktop: 4-across single row, larger numbers, more breathing room */
@media (min-width:720px){
  .s-trust{padding:48px 24px 44px;}
  .s-trust .s-trust-inner{grid-template-columns:repeat(4,1fr);}
  .s-trust .s-trust-cell{padding:28px 18px;min-height:120px;}
  .s-trust .s-trust-cell + .s-trust-cell{border-left:1px solid var(--blue-xl);}
  .s-trust .s-trust-cell:nth-child(2n+1){border-left:1px solid var(--blue-xl);}
  .s-trust .s-trust-cell:first-child{border-left:0;}
  .s-trust .s-trust-cell:nth-child(-n+2){border-bottom:0;}
  .s-trust .s-trust-num{font-size:48px;}
  .s-trust .s-trust-lbl{margin-top:12px;font-size:12px;}
}
@media (min-width:1024px){
  .s-trust .s-trust-num{font-size:54px;}
}

/* .d-home .trust block removed 2026-05-28 along with the trust strip
   markup it styled. See the comment above section 3 in the body for
   context + how to restore if needed. */

/* hide .d-home at mobile widths so production renders normally */
@media (max-width: 959.98px) { .d-home { display: none !important; } }
/* at desktop, hide every production homepage section so only .d-home shows */
@media (min-width: 960px) {
  body > .hero-menu-stack,
  body > .ls-split, /* mobile copy of the lifestyle split — the .d-home copy shows on desktop */
  body > .s-trust,
  body > .s-who,
  body > .s-realfood,
  body > .s-delivery,
  body > .s-map,
  body > .s-ai,
  body > .s-coach,
  body > .s-math,
  body > .s-rev,
  body > .s-blog,
  body > .s-social,
  body > .s-faq { display: none !important; }
}



/* ════════════════════════════════════════════════════════════════
   REAL FOOD + DELIVERY · two mobile modules (replaced the old merged
   .s-whole section, 2026-06-08). ① real food = bright/playful sticker
   cards · ② delivery = light card with van video + the tcZip checker.
   Both mobile-only; hidden at ≥960 via the body > .s-* list above so the
   desktop .d-home (.whole + .map) layout is untouched.
   ──────────────────────────────────────────────────────────────── */
/* ① REAL FOOD ─────────────────────────────────────────────── */
.s-realfood{position:relative;margin:28px 12px 0;border-radius:26px;overflow:hidden;padding:22px 16px 22px;
  background:
    radial-gradient(58% 38% at 94% 5%, rgba(242,208,121,.55) 0%, transparent 60%),
    radial-gradient(52% 40% at 2% 97%, rgba(126,150,232,.45) 0%, transparent 62%),
    radial-gradient(40% 32% at 88% 96%, rgba(120,200,150,.30) 0%, transparent 66%),
    linear-gradient(176deg,#FDF7E6 0%, #EFF3FF 100%);
  border:1px solid rgba(11,20,55,.07);box-shadow:0 30px 64px -44px rgba(11,20,55,.45);}
.rf-head{margin-bottom:14px;}
.rf-eye{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-d);margin-bottom:8px;}
.rf-h{margin:0;font-family:var(--ff);font-weight:900;font-size:30px;line-height:1.02;letter-spacing:-.03em;color:var(--navy);}
.rf-h em{font-style:italic;color:var(--gold-d);}
.rf-vid{position:relative;border-radius:18px;overflow:hidden;margin:0 0 18px;box-shadow:0 18px 32px -18px rgba(11,20,55,.45);}
/* scale up + anchor top-left so the right + bottom crop in, hiding the
   Gemini watermark sparkle baked into the source video's bottom-right
   corner (.rf-vid's overflow:hidden clips the overflow). */
.rf-vid video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#0b1437;transform:scale(1.14);transform-origin:left top;}
.rf-pillars{list-style:none;margin:0 0 18px;padding:6px 3px 2px;display:flex;flex-direction:column;gap:15px;}
.rf-card{position:relative;display:grid;grid-template-columns:46px 1fr;gap:13px;align-items:center;
  padding:13px 15px;border-radius:17px;background:#fff;border:2px solid var(--navy);box-shadow:4px 5px 0 var(--rf-sh);}
.rf-card.k1{transform:rotate(-1.2deg);--rf-ac:#15803D;--rf-sh:rgba(21,128,61,.9);}
.rf-card.k2{transform:rotate(1deg);  --rf-ac:#B88A1A;--rf-sh:rgba(184,138,26,.9);}
.rf-card.k3{transform:rotate(-.7deg);--rf-ac:#2F47A8;--rf-sh:rgba(47,71,168,.9);}
.rf-ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--rf-ac) 14%,#fff);border:2px solid color-mix(in srgb,var(--rf-ac) 38%,transparent);color:var(--rf-ac);}
.rf-ic svg{width:23px;height:23px;display:block;}
.rf-card div b{display:block;font-size:15px;font-weight:900;color:var(--navy);letter-spacing:-.012em;}
.rf-card div span{display:block;font-size:12px;font-weight:500;color:rgba(11,20,55,.6);margin-top:1px;}
.rf-cta{display:flex;width:fit-content;align-items:center;gap:8px;padding:13px 24px;border-radius:99px;
  font-family:var(--ff);font-weight:800;font-size:15px;text-decoration:none;color:#fff;background:var(--navy);
  box-shadow:0 16px 30px -16px rgba(11,20,55,.5);}
.rf-cta svg{width:16px;height:16px;}

/* ② DELIVERY ──────────────────────────────────────────────── */
.s-delivery{margin:16px 12px 0;border-radius:24px;overflow:hidden;background:#fff;
  border:1px solid rgba(11,20,55,.07);box-shadow:0 30px 64px -44px rgba(11,20,55,.4);}
.dl-head{padding:18px 18px 4px;}
.dl-eye{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--tandoco-blue);margin-bottom:8px;}
.dl-h{margin:0;font-family:var(--ff);font-weight:900;font-size:26px;line-height:1.04;letter-spacing:-.026em;color:var(--navy);}
.dl-h em{font-style:italic;color:var(--blue-d);}
.dl-sub{margin:7px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-soft);font-weight:500;}
.dl-sub b{color:var(--navy);font-weight:800;}
.dl-stage{position:relative;margin:14px 16px 0;border-radius:16px;overflow:hidden;}
.dl-stage video{display:block;width:100%;aspect-ratio:16/8;object-fit:cover;background:#0b1437;}
.dl-stage img{width:100%;display:block;}
.dl-facts{position:absolute;left:0;right:0;bottom:9px;display:flex;justify-content:center;gap:6px;padding:0 10px;}
.dl-fact{background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.6);border-radius:10px;padding:5px 10px;text-align:center;box-shadow:0 6px 16px -8px rgba(11,20,55,.55);}
.dl-fact b{display:block;font-weight:900;font-size:10.5px;line-height:1;color:var(--navy);white-space:nowrap;}
.dl-fact span{display:block;margin-top:2px;font-size:7.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-mute);}
.dl-check{margin:14px 16px 0;}
.dl-q{margin:0 0 10px;font-family:var(--ff);font-weight:900;font-size:17px;line-height:1.15;color:var(--navy);}
.dl-q em{font-style:italic;color:var(--blue-d);}
/* the zip form + result reuse the global .pc-zip-form / .pc-zip-result
   styling (light theme) and the global tcZip* script; just tune the
   button to brand blue + normal case to match this module. */
.s-delivery .pc-zip-form button{background:var(--tandoco-blue);text-transform:none;letter-spacing:-.01em;font-size:14px;min-width:0;padding:0 20px;border-radius:12px;}
.s-delivery .pc-zip-form button:hover{background:var(--tandoco-blue-l);}
.s-delivery .pc-zip-result{margin-top:10px;}
.dl-ctas{display:flex;gap:10px;padding:14px 16px 18px;}
.dl-cta{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;padding:14px 10px;border-radius:14px;font-family:var(--ff);font-weight:800;font-size:14px;text-decoration:none;}
.dl-cta svg{width:16px;height:16px;flex:0 0 auto;}
.dl-cta.primary{background:var(--tandoco-blue);color:#fff;box-shadow:0 14px 26px -16px rgba(30,42,120,.5);}
.dl-cta.ghost{background:#fff;color:var(--navy);border:1.5px solid rgba(11,20,55,.16);}

/* ════════════════════════════════════════════════════════════════
   FOR EVERYONE · playful persona STICKER GRID (2026-06-08).
   Replaces the desktop scrolling ribbons + the mobile spinning wreath
   with one unified, responsive module: 8 tilted sticker cards in the
   rainbow-wreath palette, friendlier persona titles. Same sticker
   language as the "how it works" cards.
   ──────────────────────────────────────────────────────────────── */
/* full-bleed "for everyone" stage — the everyonebackground photo (all kinds
   of people) under a dark scrim so the white header + white cards stay
   legible. Scrim is heavier top + bottom (where the header + CTA sit) and
   lighter through the middle so the photo reads behind the cards. */
.fm-sec{
  background:
    linear-gradient(180deg,
      rgba(12,18,42,.84) 0%,
      rgba(12,18,42,.58) 40%,
      rgba(12,18,42,.60) 72%,
      rgba(12,18,42,.78) 100%),
    url("/images/everyonebackground.webp") center 42% / cover no-repeat,
    #2A3461;
  padding:72px 0 62px;
  overflow:hidden;
}
.s-who.fm-sec{ margin:0; }
.s-who.fm-sec::before{ display:none; }
.fm{position:relative;max-width:clamp(1480px,90vw,1880px);margin:0 auto;padding:0 56px;}
.fm-head{text-align:left;max-width:680px;margin:0 0 30px;}
.fm-eye{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#C4CEF2;margin-bottom:8px;}
.fm-h{margin:0;font-family:var(--ff);font-weight:900;font-size:40px;line-height:1.03;letter-spacing:-.03em;color:#fff;}
.fm-h em{font-style:italic;color:var(--gold-l);}
.fm-sub{margin:12px 0 0;font-size:16px;line-height:1.5;color:rgba(255,255,255,.82);font-weight:500;}
.fm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1040px;margin:0;}
.fm-card{position:relative;background:#fff;border:2px solid var(--navy);border-radius:18px;
  padding:17px 16px 16px;box-shadow:4px 5px 0 var(--fm-sh);display:flex;flex-direction:column;gap:9px;
  transition:transform .5s cubic-bezier(.34,1.4,.5,1),box-shadow .25s ease,opacity .55s ease;will-change:transform;}
.fm-card.k1{transform:rotate(-1.6deg);--fm-ac:#E54B3C;--fm-sh:rgba(229,75,60,.9);}
.fm-card.k2{transform:rotate(1.2deg); --fm-ac:#D69200;--fm-sh:rgba(214,146,0,.9);}
.fm-card.k3{transform:rotate(-1deg);  --fm-ac:#3E9B3A;--fm-sh:rgba(62,155,58,.9);}
.fm-card.k4{transform:rotate(1.5deg); --fm-ac:#159A93;--fm-sh:rgba(21,154,147,.9);}
.fm-card.k5{transform:rotate(-1.3deg);--fm-ac:#2F6FE0;--fm-sh:rgba(47,111,224,.9);}
.fm-card.k6{transform:rotate(1deg);   --fm-ac:#7A3FAB;--fm-sh:rgba(122,63,171,.9);}
.fm-card.k7{transform:rotate(-1.5deg);--fm-ac:#D6378E;--fm-sh:rgba(214,55,142,.9);}
.fm-card.k8{transform:rotate(1.3deg); --fm-ac:#E0603C;--fm-sh:rgba(224,96,60,.9);}
/* scroll-in: cards start shifted + faded; .fm-in releases them (JS staggers) */
.fm-grid:not(.fm-in) .fm-card{opacity:0;transform:translateY(28px) rotate(0deg)!important;}
/* hover: straighten, pop up, deepen the hard shadow, fill the icon */
.fm-card:hover{transform:rotate(0deg) translateY(-7px) scale(1.025);box-shadow:7px 10px 0 var(--fm-sh);z-index:2;}
.fm-ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--fm-ac) 14%,#fff);border:2px solid color-mix(in srgb,var(--fm-ac) 40%,transparent);color:var(--fm-ac);
  transition:transform .28s cubic-bezier(.34,1.5,.5,1),background .2s ease,color .2s ease,border-color .2s ease;}
.fm-card:hover .fm-ic{background:var(--fm-ac);color:#fff;border-color:var(--fm-ac);transform:rotate(-7deg) scale(1.1);}
.fm-ic svg{width:24px;height:24px;}
.fm-name{font-family:var(--ff);font-weight:900;font-size:17px;line-height:1.05;letter-spacing:-.012em;color:var(--navy);}
.fm-tag{font-size:12.5px;font-weight:600;font-style:italic;color:var(--ink-soft);line-height:1.3;}
.fm-tag b{color:var(--fm-ac);font-weight:800;font-style:normal;}
.fm-cta{display:flex;width:fit-content;align-items:center;gap:8px;margin:32px 0 0;padding:14px 28px;border-radius:99px;
  background:var(--navy);font-weight:800;font-size:15px;text-decoration:none;box-shadow:0 16px 32px -18px rgba(11,20,55,.5);
  transition:transform .2s ease,box-shadow .2s ease;}
.fm-sec .fm-cta,.fm-sec .fm-cta:link,.fm-sec .fm-cta:visited{color:#fff;}
.fm-cta:hover{transform:translateY(-2px);box-shadow:0 22px 42px -18px rgba(11,20,55,.62);}
.fm-cta svg{width:16px;height:16px;}
@media(prefers-reduced-motion:reduce){
  .fm-card{transition:opacity .3s ease!important;}
  .fm-grid:not(.fm-in) .fm-card{transform:none!important;}
  .fm-card:hover{transform:none;}
  .fm-card:hover .fm-ic{transform:none;}
}
@media(max-width:760px){
  .fm-sec{padding:48px 0 42px;}
  .fm{padding:0 16px;}
  .fm-grid{grid-template-columns:1fr 1fr;gap:13px;}
  .fm-h{font-size:29px;}
  .fm-name{font-size:15.5px;}
  .fm-sub{font-size:14px;}
}

/* ── DESKTOP: left-align the free-floating section-intro headers to the
   page gutter. These heads are flex columns with align-items:center, so
   text-align alone won't move them — flip the flex axis + zero the auto
   margins. Scoped to .d-home so the mobile (.s-*) layout is untouched. ── */
.d-home .social-head, .d-home .faq-head{
  text-align:left; align-items:flex-start;
}
.d-home .faq-head{ padding-left:0; }
.d-home .social-head .eye, .d-home .faq-head .eye{
  align-self:flex-start;
}
.d-home .social-head h2, .d-home .faq-head h2,
.d-home .social-head .sub, .d-home .faq-head .sub{
  text-align:left; margin-left:0; margin-right:0;
}