/** Shopify CDN: Minification failed

Line 1422:13 Expected identifier but found whitespace
Line 1422:14 Unexpected "rgba("
Line 3022:18 Expected identifier but found whitespace
Line 3022:23 Unexpected ";"

**/
/* ============================================================
   biome.css — bespoke global design system for Biome Secret
   = self-hosted Gilroy faces + the Claude-Design prototype
   styles.css (verbatim). THIS is the base. Dawn's base.css is
   transitional and slated for removal in the declutter pass.
   ============================================================ */

/* ===== Gilroy (self-hosted) — the brand --sans ===== */
@font-face { font-family:'Gilroy'; src:url('gilroy-regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Gilroy'; src:url('gilroy-medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Gilroy'; src:url('gilroy-semibold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Gilroy'; src:url('gilroy-bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
/* True italic cuts (the design registers these too — without them the browser fakes
   italics by slanting the uprights, which reads as the wrong weight on bold-italic text). */
@font-face { font-family:'Gilroy'; src:url('gilroy-regular-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Gilroy'; src:url('gilroy-medium-italic.woff2') format('woff2'); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:'Gilroy'; src:url('gilroy-semibold-italic.woff2') format('woff2'); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:'Gilroy'; src:url('gilroy-bold-italic.woff2') format('woff2'); font-weight:700; font-style:italic; font-display:swap; }

/* ===== Instrument Serif + Geist Mono (self-hosted, latin subset — was Google Fonts) ===== */
@font-face { font-family:'Instrument Serif'; src:url('instrument-serif-regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Instrument Serif'; src:url('instrument-serif-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Geist Mono'; src:url('geist-mono-latin.woff2') format('woff2'); font-weight:400 600; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


/* ─────────────────────────────────────────────────────────────
   Biome Secret — Premium Clinical, Warm
   ───────────────────────────────────────────────────────────── */

:root {
  /* palette */
  --forest: #1B3329;
  --forest-2: #244038;
  --forest-deep: #0F211A;
  --cream: #F5F0E6;
  --cream-2: #EDE6D6;
  --surface: #FAF8F3;
  --paper: #FFFFFF;
  --terracotta: #C4623C;
  --terracotta-2: #B0552F;
  --ink: #0F1410;
  --ink-2: #2A3530;
  --sage: #5B7361;
  --sage-2: #8AA08F;
  --accent-green: #1F8F5B;     /* vivid savings/discount green */
  --accent-green-2: #196F47;   /* darker for hover/strong text */
  --accent-green-soft: rgba(31, 143, 91, 0.14);
  --line: rgba(15, 20, 16, 0.12);
  --line-soft: rgba(15, 20, 16, 0.06);
  --line-on-dark: rgba(245, 240, 230, 0.14);

  /* type */
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Gilroy", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* density */
  --section-pad-y: 120px;
  --container: 1240px;
  --gutter: 32px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 18px;
}

[data-density="compact"] {
  --section-pad-y: 72px;
  --gutter: 24px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scrollbar-gutter: stable; }
/* A right-anchored slide-over (cart / nutrition panels) locks page scroll, which removes the
   scrollbar. scrollbar-gutter:stable would keep the gutter reserved, leaving an empty
   ~scrollbar-width gap to the RIGHT of those `position:fixed; right:0` panels ("compensating for a
   scrollbar that isn't there"). While a drawer is open we release the gutter and inset the page by
   the REAL scrollbar width instead (measured into --sbw by the observer in theme.liquid), so the
   panel hugs the true viewport edge AND the page content doesn't reflow. Driven off the shared
   .drawer-back--open class so every current/future right-anchored drawer is covered. */
html.is-drawer-locked { scrollbar-gutter: auto; overflow: hidden; padding-right: var(--sbw, 0px); }
/* The `hidden` attribute must win over component display rules. Several
   components toggle visibility via `el.hidden` in JS (review extras, cart
   badges, progress labels, steppers); without this, an author `display:flex`
   on the element defeats the UA `[hidden]{display:none}` and they leak through. */
[hidden] { display: none !important; }

/* Hide the scrollbar on phones and tablets — the visible track looks
   out of place on touch devices where native momentum scroll feels
   more app-like.  Scroll functionality is preserved; only the track
   chrome is hidden. */
@media (max-width: 1024px) {
  html { scrollbar-gutter: auto; scrollbar-width: none; -ms-overflow-style: none; }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar { width: 0; height: 0; display: none; }
}
body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: default; }
a { color: inherit; text-decoration: none; }
/* Kill the mobile tap-highlight (the blue/grey flash over a button on touch before
   it settles into its active state). */
* { -webkit-tap-highlight-color: transparent; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: var(--section-pad-y) 0; }
.section--tight { padding: calc(var(--section-pad-y) * 0.6) 0; }

/* type */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
}
.eyebrow--ink { color: var(--ink-2); }
.eyebrow--cream { color: rgba(245, 240, 230, 0.7); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}
.h-display { font-size: clamp(48px, 6.2vw, 88px); line-height: 0.98; letter-spacing: -0.02em; }
.h1 { font-size: clamp(40px, 4.6vw, 64px); }
.h2 { font-size: clamp(32px, 3.4vw, 48px); }
.h3 { font-size: clamp(22px, 1.8vw, 28px); }
.italic { font-style: italic; }

p { margin: 0; }
.body-lg { font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.body-md { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.body-sm { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.mono-sm {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: transform 0.18s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.btn--primary { background: var(--terracotta); color: var(--cream); }
.btn:not(.btn--disabled):not(:disabled) { cursor: pointer; }
.btn--primary:hover { background: var(--terracotta-2); }
.btn--forest { background: var(--forest); color: var(--cream); }
.btn--forest:hover { background: var(--forest-deep); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--cream); }
.btn--ghost-cream { background: transparent; color: var(--cream); border-color: var(--line-on-dark); }
.btn--ghost-cream:hover { background: rgba(245, 240, 230, 0.08); }
.btn--sm { height: 38px; padding: 0 14px; font-size: 13px; }
.btn--lg { height: 60px; padding: 0 28px; font-size: 16px; }
.btn--block { width: 100%; }

/* chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--cream-2);
  color: var(--forest);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chip--outline { background: transparent; border: 1px solid var(--line); color: var(--ink-2); }
.chip--terracotta { background: rgba(196, 98, 60, 0.12); color: var(--terracotta-2); }
.chip--cream { background: rgba(245, 240, 230, 0.1); color: var(--cream); border: 1px solid var(--line-on-dark); }

/* rules */
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }
.hr--cream { background: var(--line-on-dark); }

/* placeholder image (subtle stripe) */
.ph {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg,
      rgba(27, 51, 41, 0.06) 0 1px,
      transparent 1px 14px),
    var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.ph--forest {
  background:
    repeating-linear-gradient(135deg,
      rgba(245, 240, 230, 0.08) 0 1px,
      transparent 1px 14px),
    var(--forest);
  border-color: rgba(245, 240, 230, 0.1);
  color: rgba(245, 240, 230, 0.7);
}
.ph__lbl {
  position: absolute;
  inset: auto 12px 12px 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage);
  opacity: 0.75;
}
.ph--forest .ph__lbl { color: rgba(245, 240, 230, 0.55); }
.ph__center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
  opacity: 0.6;
}

/* utility */
.grid { display: grid; gap: var(--gutter); }
.flex { display: flex; }
.center { align-items: center; }
.between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }

/* on dark */
.on-forest { background: var(--forest); color: var(--cream); }
.on-forest h1, .on-forest h2, .on-forest h3 { color: var(--cream); }
.on-forest .body-lg, .on-forest .body-md, .on-forest .body-sm { color: rgba(245, 240, 230, 0.78); }

/* nav */
/* The header section-group wrapper is a short block that clips the sticky nav to
   its own height; display:contents removes its box so .nav sticks to the viewport
   across the whole page. */
.shopify-section-group-header-group { display: contents; }

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 248, 243, 0.92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.nav__promo {
  background: var(--forest);
  color: var(--cream);
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px 16px;
  overflow: hidden;
  max-height: 38px;
  transition: max-height 0.32s ease, padding 0.32s ease;
}
.nav--compact .nav__promo {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 68px;
  transition: height 0.25s ease;
}
/* Push the trailing nav__actions to the right edge */
.nav__actions { margin-left: auto; }
.nav__brand {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.nav--compact .nav__inner { height: 62px; }

/* standalone promo bar — used on pages without a sticky nav, so it can pin on its own */
.nav__promo--standalone {
  position: sticky;
  top: 0;
  z-index: 40;
  max-height: none;
}

/* minimal nav variant — used on the choose-bundle page; not sticky */
.nav--minimal {
  position: static;
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* full-mode nav children fade out on compact; compact-mode children fade in */
.nav__links, .nav__actions {
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}
.nav--compact .nav__links,
.nav--compact .nav__actions {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2px);
  pointer-events: none;
}

/* Smart ATC button injected in the nav after scroll */
.nav__atc {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%) translateY(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  display: inline-flex;
  align-items: center;
  gap: 0;
  border-radius: 999px;
  background: var(--forest);
  color: var(--cream);
  border: 1px solid var(--forest);
  height: 44px;
  padding: 0 6px 0 16px;
  cursor: default;
  font-family: var(--sans);
}
.nav--compact .nav__atc {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%);
  right: calc(var(--gutter) + 46px);
}
/* When the compact cart icon is hidden (cart empty), pull the ATC fully right */
.nav--compact:has(.nav__cart-compact[aria-hidden="true"]) .nav__atc {
  right: var(--gutter);
}

/* Compact-mode cart icon — sits to the right of the smart ATC */
.nav__cart-compact {
  all: unset;
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%) translateY(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav--compact .nav__cart-compact[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%);
}
.nav__atc[disabled] {
  background: var(--cream-2);
  color: var(--sage);
  border-color: var(--line);
  cursor: not-allowed;
}
.nav__atc-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  line-height: 1.1;
  padding-right: 14px;
  border-right: 1px solid rgba(245, 240, 230, 0.18);
  margin-right: 12px;
}
.nav__atc[disabled] .nav__atc-meta { border-right-color: var(--line); }
.nav__atc-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}
.nav__atc-title {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
}
.nav__atc-price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding-right: 4px;
}
.nav__atc-strike {
  font-family: var(--mono);
  font-size: 11px;
  opacity: 0.55;
  text-decoration: line-through;
}
.nav__atc-num {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.nav__atc-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--terracotta);
  color: var(--cream);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  margin-left: 8px;
}
.nav__atc[disabled] .nav__atc-cta {
  background: transparent;
  color: var(--sage);
}

@media (max-width: 760px) {
  .nav__atc-meta { display: none; }
  .nav__atc { padding-left: 14px; }
}

/* ─────────────────────────────────────────────────────────────
   PROMO BAR — single-line marquee on narrow viewports so the
   message never wraps to two lines.  The track contents are
   duplicated (visually identical halves) so the loop is seamless.
   ───────────────────────────────────────────────────────────── */
.nav__promo-track {
  display: flex;
  align-items: center;
  gap: 18px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nav__promo-track > span { flex-shrink: 0; }
.nav__promo-dot { opacity: 0.45; }

/* desktop: just an inline row, no animation, centered.  The
   duplicated run used for the mobile marquee is hidden here. */
@media (min-width: 761px) {
  .nav__promo { display: flex; align-items: center; justify-content: center; }
  .nav__promo-track { justify-content: center; }
  .nav__promo-dup { display: none; }
}

/* mobile: horizontal marquee.  The ::after duplicates the source
   spans (via JS-driven cloning would be cleaner, but for a CSS-only
   solution we lean on a `data-promo` content fallback below).  In
   the React markup we render the spans twice so the loop seams. */
@media (max-width: 760px) {
  .nav__promo {
    padding: 9px 0;
    overflow: hidden;
    position: relative;
    max-height: none;
  }
  .nav__promo::before,
  .nav__promo::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 28px;
    z-index: 1;
    pointer-events: none;
  }
  .nav__promo::before {
    left: 0;
    background: linear-gradient(to right, var(--forest), transparent);
  }
  .nav__promo::after {
    right: 0;
    background: linear-gradient(to left, var(--forest), transparent);
  }
  .nav__promo-track {
    width: max-content;
    animation: nav-promo-scroll 32s linear infinite;
    will-change: transform;
  }
  .nav__promo:active .nav__promo-track,
  .nav__promo:hover .nav__promo-track { animation-play-state: paused; }
}
@keyframes nav-promo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .nav__promo-track { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   HAMBURGER button — desktop hidden, mobile visible.
   ───────────────────────────────────────────────────────────── */
.nav__menu-btn {
  all: unset;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
}
.nav__menu-btn:hover { background: rgba(15, 20, 16, 0.06); }
.nav__menu-btn:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}
/* Hide hamburger in compact (scrolled) mode — smart ATC takes the slot */
.nav--compact .nav__menu-btn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   MOBILE MENU DRAWER (NavMobileMenu component)
   ───────────────────────────────────────────────────────────── */
.nav-mm__back {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 16, 0.45);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.nav-mm__back--open { opacity: 1; pointer-events: auto; }

.nav-mm {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(360px, 88vw);
  background: var(--surface);
  z-index: 61;
  transform: translateX(-101%);
  transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
}
/* Shadow only applies once the drawer is open — otherwise the blur
   reaches into the visible viewport even when the drawer is parked
   off-screen, leaving a faint dark gradient down the left edge. */
.nav-mm--open {
  transform: translateX(0);
  box-shadow: 24px 0 50px -20px rgba(15, 20, 16, 0.4);
}

.nav-mm__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.nav-mm__close {
  all: unset;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
}
.nav-mm__close:hover { background: rgba(15, 20, 16, 0.06); }

.nav-mm__links {
  flex: 1;
  overflow-y: auto;
  padding: 12px 8px 24px;
  display: flex;
  flex-direction: column;
}
.nav-mm__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px;
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
  border-radius: 10px;
  transition: background 0.15s;
}
.nav-mm__link:hover { background: rgba(15, 20, 16, 0.04); }
.nav-mm__link svg { color: var(--sage); transition: transform 0.18s, color 0.18s; }
.nav-mm__link:hover svg { color: var(--terracotta); transform: translateX(3px); }
.nav-mm__link--current {
  color: var(--forest);
  background: rgba(27, 51, 41, 0.06);
}
.nav-mm__link--current span::after {
  content: "·";
  margin-left: 8px;
  color: var(--terracotta);
}

.nav-mm__foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid var(--line-soft);
  background: var(--paper);
}
.nav-mm__util {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}
.nav-mm__util:hover { background: var(--cream); border-color: var(--forest); }

.nav-mm__promo {
  background: var(--forest);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 14px;
  line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────
   NAV — mobile layout switch (logo + actions + hamburger).
   Triggered well before things get cramped — at 1024 the 7-link
   row starts to feel tight against the actions, so we collapse
   into the hamburger menu here.

   The `.nav` qualifier on each selector is deliberate: the base
   `.nav__links { display: flex }` rule lives further down in this
   file, so we need extra specificity to beat it in the cascade.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .nav .nav__inner {
    gap: 12px;
    height: 60px;
    padding: 0 16px;
  }
  .nav--compact .nav__inner { height: 56px; }
  .nav .nav__links { display: none; }
  .nav .nav__menu-btn { display: inline-flex; }
  /* logo on the left, actions + hamburger on the right edge */
  .nav .nav__brand { margin-right: auto; }
  .nav .nav__actions { margin-left: 0; gap: 2px; }
  .nav .nav__icon { width: 40px; height: 40px; }
  /* shrink logo slightly on tight viewports */
  .nav .nav__brand .logo-mark { width: 132px; height: 26px; }
}
@media (max-width: 480px) {
  /* Phones — hide the user icon to make room for cart + hamburger;
     account is reachable from the menu drawer. */
  .nav .nav__actions .nav__icon:first-child { display: none; }
}
@media (max-width: 380px) {
  .nav .nav__brand .logo-mark { width: 112px; height: 22px; }
  .nav .nav__inner { gap: 6px; padding: 0 12px; }
}

/* ─────────────────────────────────────────────────────────────
   GLOBAL MOBILE TIGHTENING — reduce gutters and section padding
   so content gets more horizontal room without feeling cramped.
   These overrides intentionally sit AFTER the nav rules so they
   cascade over the desktop defaults.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  :root {
    --gutter: 20px;
    --section-pad-y: 64px;
  }
  .section { padding: var(--section-pad-y) 0; }
  .section--tight { padding: calc(var(--section-pad-y) * 0.7) 0; }
  /* button sizing — keep tap targets generous but trim the lg variant
     so it doesn't dominate the small viewport */
  .btn--lg { height: 54px; padding: 0 22px; font-size: 15px; }
  .btn { font-size: 14px; }
}
@media (max-width: 420px) {
  :root { --gutter: 16px; }
  .h-display { font-size: clamp(40px, 9vw, 56px); }
  .h1 { font-size: clamp(32px, 8vw, 44px); }
  .h2 { font-size: clamp(26px, 7vw, 36px); }
  .body-lg { font-size: 16px; }
}
.logo-mark {
  display: inline-block;
  width: 156px;
  height: 30px;
  background-color: var(--forest);
  -webkit-mask: url("biome-logo.svg") left center / contain no-repeat;
          mask: url("biome-logo.svg") left center / contain no-repeat;
}
.logo-mark--cream { background-color: var(--cream); }
.logo-mark--sm { width: 130px; height: 26px; }
.logo-mark--lg { width: 200px; height: 38px; }
.nav__links {
  display: flex;
  gap: 28px;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.nav__links a { position: relative; padding: 4px 0; }
.nav__link--current {
  color: var(--ink);
  font-weight: 600;
}
.nav__link--current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1.5px;
  background: var(--forest);
  border-radius: 2px;
}
.nav__actions { display: flex; gap: 8px; align-items: center; }
.nav__icon {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--ink);
}
.nav__icon:hover { border-color: var(--line); }
/* The cart/shop trigger reproduces the prototype's cart <button>, which the React
   Nav styled inline with `all: unset` + cursor:default — i.e. geometry only, with
   NO hover ring (only the account link gets the ring). My port renders this slot as
   an <a class="nav__icon">, so it wrongly inherited the link's hover; neutralise it. */
.nav__icon--cart { cursor: default; }
.nav__icon--cart:hover { border-color: transparent; background: transparent; }
.nav__cart-badge {
  position: absolute;
  top: 6px; right: 6px;
  width: 16px; height: 16px;
  background: var(--terracotta);
  color: var(--cream);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9.5px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* sticky atc bar */
.satc {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  background: var(--forest);
  color: var(--cream);
  border-top: 1px solid rgba(245, 240, 230, 0.1);
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Sticky ATC is mobile-only on the shake page — desktop has a
   persistent right-column ATC widget so a bottom bar would double
   up.  Hide above the mobile breakpoint regardless of `show`. */
@media (min-width: 761px) {
  .satc { display: none !important; }
}
/* On mobile, product pages use the sticky footer (.satc) as the persistent CTA, so
   the site header must NOT also be sticky — it scrolls away with the page, matching
   the design (which has only a mobile sticky footer, no sticky header). */
@media (max-width: 760px) {
  .page-type--product .nav { position: static; }
}

/* Mobile sticky bar — strip down to the essentials: a count line
   ("N boxes · N meals") in the brand sans, the price, and the CTA.
   No product thumb, no sub-line, no strike-through retail price. */
@media (max-width: 760px) {
  .satc__inner {
    padding: 10px var(--gutter);
    gap: 12px;
  }
  .satc__thumb { display: none; }
  .satc__sub   { display: none; }
  .satc__price-strike { display: none; }
  .satc__title {
    font-family: var(--sans) !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2;
    color: var(--cream);
  }
  .satc__price { font-size: 18px; }
  .satc__cta { display: flex; align-items: center; gap: 12px; }
  .satc .btn { padding: 10px 16px; font-size: 13px; }
}
.satc--show { transform: translateY(0); }
.satc__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 20px;
}
.satc__thumb {
  width: 52px; height: 52px;
  border-radius: 8px;
  background: var(--forest-deep);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 9.5px;
  color: rgba(245, 240, 230, 0.5);
}
.satc__meta { flex: 1; min-width: 0; }
.satc__title { font-family: var(--serif); font-size: 19px; line-height: 1.1; }
.satc__sub {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.6);
  margin-top: 4px;
}
.satc__price {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: right;
}
.satc__price-strike {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-decoration: line-through;
  color: rgba(245, 240, 230, 0.45);
  margin-right: 8px;
}

/* drawer */
.drawer-back {
  position: fixed; inset: 0;
  background: rgba(15, 20, 16, 0.5);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.drawer-back--open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 480px;
  max-width: 100vw;
  background: var(--surface);
  z-index: 51;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
}
.drawer--open { transform: translateX(0); }
.drawer__hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
}
.drawer__title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.drawer__body { flex: 1; overflow-y: auto; padding: 24px 18px; }
.drawer__ft {
  border-top: 1px solid var(--line);
  padding: 20px 18px 22px;
}
.drawer__line {
  display: flex; justify-content: space-between;
  padding: 8px 0;
  font-size: 13.5px;
  color: var(--ink-2);
}
.drawer__line--total {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* segmented control */
.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--cream);
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.seg__opt {
  padding: 9px 12px;
  border-radius: 999px;
  text-align: center;
  color: var(--ink-2);
  transition: background 0.2s;
}
.seg__opt--on { background: var(--forest); color: var(--cream); }

/* pack selector card */
.pack {
  display: flex;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius);
  align-items: center;
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pack--on {
  border-color: var(--forest);
  box-shadow: 0 0 0 1px var(--forest) inset;
}
.pack__radio {
  width: 18px; height: 18px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  flex: 0 0 18px;
  position: relative;
}
.pack--on .pack__radio { border-color: var(--forest); }
.pack--on .pack__radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--forest);
  border-radius: 999px;
}
.pack__main { flex: 1; }
.pack__title {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.1;
}
.pack__meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage);
  margin-top: 4px;
}
.pack__price {
  text-align: right;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1;
}
.pack__per {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage);
  margin-top: 4px;
}
.pack__badge {
  position: absolute;
  top: -10px;
  right: 14px;
  background: var(--terracotta);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
}

/* stat figure */
.stat__num {
  font-family: var(--serif);
  font-size: clamp(64px, 7vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.stat__lbl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
  margin-top: 12px;
}

/* card */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
}
.card--forest {
  background: var(--forest);
  color: var(--cream);
  border-color: rgba(245, 240, 230, 0.08);
}
.card--cream {
  background: var(--cream);
  border-color: transparent;
}

/* faq */
.faq__item {
  border-top: 1px solid var(--line);
  padding: 22px 0;
}
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  gap: 24px;
}
.faq__plus {
  flex: 0 0 28px;
  height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink-2);
  transition: transform 0.2s ease, background 0.2s;
}
.faq__item--open .faq__plus { transform: rotate(45deg); background: var(--cream); }
.faq__inline-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  color: var(--terracotta-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  vertical-align: middle;
}
.faq__a {
  font-size: 15px;
  color: var(--ink-2);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s ease, margin-top 0.2s ease;
  line-height: 1.6;
}
.faq__item--open .faq__a {
  max-height: 320px;
  margin-top: 16px;
}

/* tab pills */
.pills {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 999px;
}
.pill {
  padding: 9px 16px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.pill--on { background: var(--forest); color: var(--cream); }

/* science block — symbiotic system 4-up */
.sys-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sys-box {
  padding: 16px;
  background: rgba(245, 240, 230, 0.04);
  border: 1px solid rgba(245, 240, 230, 0.12);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sys-box__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.sys-box__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(245, 240, 230, 0.08);
  color: rgba(245, 240, 230, 0.85);
}
.sys-box__gloss {
  color: rgba(245, 240, 230, 0.5);
  font-size: 9px;
  letter-spacing: 0.14em;
}
.sys-box__num {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  color: var(--cream);
}
.sys-box__lbl {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--cream);
}
.sys-box__role {
  font-size: 12px;
  color: rgba(245, 240, 230, 0.65);
  line-height: 1.45;
}

/* Symbiotic loop diagram on the right */
.symb-loop {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, rgba(245, 240, 230, 0.08), rgba(15, 33, 26, 0.7) 70%);
  border: 1px solid rgba(245, 240, 230, 0.16);
}

/* Organic ecosystem (replaces the crosshair loop) */
.symb-eco {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}
.symb-eco__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.symb-eco__colony {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 130px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.symb-eco__dots {
  position: relative;
  width: 50px;
  height: 30px;
}
.symb-eco__dots > span {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  box-shadow: 0 0 8px currentColor;
  will-change: transform, opacity, box-shadow;
}

/* ── Per-colony animations ─────────────────────────────────────
   Each ingredient family gets its own personality so the diagram
   reads as a living ecosystem rather than four identical clusters. */

/* Probiotics (bottom-left, "pearl") — gentle breathing pulse, the
   ambient baseline.  Staggered delays so it never feels in lockstep. */
.symb-eco__dots[data-kind="pearl"] > span {
  animation: eco-dot-pulse 4.2s ease-in-out infinite;
}
.symb-eco__dots[data-kind="pearl"] > span:nth-child(2) { animation-delay: -0.4s; }
.symb-eco__dots[data-kind="pearl"] > span:nth-child(3) { animation-delay: -0.9s; }
.symb-eco__dots[data-kind="pearl"] > span:nth-child(4) { animation-delay: -1.5s; }
.symb-eco__dots[data-kind="pearl"] > span:nth-child(5) { animation-delay: -2.1s; }
.symb-eco__dots[data-kind="pearl"] > span:nth-child(6) { animation-delay: -2.7s; }
.symb-eco__dots[data-kind="pearl"] > span:nth-child(7) { animation-delay: -3.2s; }
.symb-eco__dots[data-kind="pearl"] > span:nth-child(8) { animation-delay: -3.6s; }
.symb-eco__dots[data-kind="pearl"] > span:nth-child(9) { animation-delay: -1.1s; }
@keyframes eco-dot-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.85;
    box-shadow: 0 0 8px currentColor;
  }
  50% {
    transform: scale(1.35);
    opacity: 1;
    box-shadow: 0 0 16px currentColor, 0 0 28px currentColor;
  }
}

/* Protein (top-left, "cream") — nutrients drift inward toward the
   diagram center (down-right from this corner) then settle back, like
   the colony is continuously feeding the loop. */
.symb-eco__dots[data-kind="cream"] > span {
  animation: protein-drift 4.4s ease-in-out infinite;
}
.symb-eco__dots[data-kind="cream"] > span:nth-child(3n)   { animation-delay: -1.2s; }
.symb-eco__dots[data-kind="cream"] > span:nth-child(3n+1) { animation-delay: -2.4s; }
.symb-eco__dots[data-kind="cream"] > span:nth-child(3n+2) { animation-delay: -3.6s; }
@keyframes protein-drift {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.9;
    box-shadow: 0 0 8px currentColor;
  }
  50% {
    /* +x/+y points from the top-left colony toward the diagram center */
    transform: translate(22px, 14px) scale(0.55);
    opacity: 0.35;
    box-shadow: 0 0 4px currentColor;
  }
}

/* Enzymes (top-right, "sage") — five dots explode outward from the
   colony center, fade, snap back, and explode again.  --bx/--by are
   set per-dot in the JSX so each travels its own radial direction. */
.symb-eco__dots[data-kind="sage"] > span {
  animation: enzyme-burst 2.4s ease-out infinite;
}
.symb-eco__dots[data-kind="sage"] > span:nth-child(2) { animation-delay: -0.48s; }
.symb-eco__dots[data-kind="sage"] > span:nth-child(3) { animation-delay: -0.96s; }
.symb-eco__dots[data-kind="sage"] > span:nth-child(4) { animation-delay: -1.44s; }
.symb-eco__dots[data-kind="sage"] > span:nth-child(5) { animation-delay: -1.92s; }
@keyframes enzyme-burst {
  0% {
    transform: translate(0, 0) scale(0.2);
    opacity: 0;
    box-shadow: 0 0 0 currentColor;
  }
  20% {
    transform: translate(0, 0) scale(1.3);
    opacity: 1;
    box-shadow: 0 0 18px currentColor, 0 0 32px currentColor;
  }
  100% {
    transform: translate(var(--bx, 0), var(--by, 0)) scale(0.1);
    opacity: 0;
    box-shadow: 0 0 0 currentColor;
  }
}

/* Prebiotic fiber (bottom-right, "sand") — pairs split apart along
   the x-axis then come back together.  --sx is set per-dot by the
   JSX (even dots get a negative offset, odd dots positive). */
.symb-eco__dots[data-kind="sand"] > span {
  animation: fiber-split 3.4s ease-in-out infinite;
}
.symb-eco__dots[data-kind="sand"] > span:nth-child(3n)   { animation-delay: -1.1s; }
.symb-eco__dots[data-kind="sand"] > span:nth-child(3n+1) { animation-delay: -2.2s; }
@keyframes fiber-split {
  0%, 100% {
    transform: translateX(0) scale(1);
    opacity: 0.85;
  }
  45%, 55% {
    transform: translateX(var(--sx, 0)) scale(0.75);
    opacity: 0.55;
    box-shadow: 0 0 4px currentColor;
  }
}

@media (prefers-reduced-motion: reduce) {
  .symb-eco__dots > span { animation: none !important; }
}
/* Animated flow on the arrows — dashes drift along each arc so the
   rebuild cycle reads as "flowing", not static. */
.symb-eco__arcs path {
  animation: eco-arc-flow 3.5s linear infinite;
}
.symb-eco__arcs path:nth-child(2) { animation-delay: -0.9s; }
.symb-eco__arcs path:nth-child(3) { animation-delay: -1.8s; }
.symb-eco__arcs path:nth-child(4) { animation-delay: -2.6s; }
@keyframes eco-arc-flow {
  to { stroke-dashoffset: -36; }
}
@media (prefers-reduced-motion: reduce) {
  .symb-eco__arcs path { animation: none; }
}

/* Center stat — slow heartbeat pulse so the core of the loop feels alive */
.symb-eco__center-n {
  animation: eco-core-pulse 4.6s ease-in-out infinite;
}
@keyframes eco-core-pulse {
  0%, 100% { opacity: 0.95; }
  50%      { opacity: 0.65; }
}
@media (prefers-reduced-motion: reduce) {
  .symb-eco__center-n { animation: none; }
}
  background: rgba(245, 240, 230, 0.9);
  color: rgba(245, 240, 230, 0.4);
}
.symb-eco__dots[data-kind="sage"] > span {
  background: #A8C2A8;
  color: rgba(168, 194, 168, 0.5);
}
.symb-eco__dots[data-kind="pearl"] > span {
  background: #E8DEC6;
  color: rgba(232, 222, 198, 0.55);
}
.symb-eco__dots[data-kind="sand"] > span {
  background: #C9B68A;
  color: rgba(201, 182, 138, 0.5);
}
.symb-eco__label {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
}
.symb-eco__lead {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1;
  color: var(--cream);
  letter-spacing: -0.01em;
}
.symb-eco__name {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.7);
}
.symb-eco__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.symb-eco__center .mono-sm {
  color: rgba(245, 240, 230, 0.5);
  letter-spacing: 0.18em;
}
.symb-eco__center-n {
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1;
  color: var(--cream);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.symb-loop__rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.symb-loop__core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.symb-loop__core-n {
  font-family: var(--serif);
  font-size: 56px;
  line-height: 0.95;
  color: var(--cream);
  letter-spacing: -0.02em;
}
.symb-loop__core-l {
  color: rgba(245, 240, 230, 0.7);
  letter-spacing: 0.12em;
}
.symb-loop__core-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(245, 240, 230, 0.5);
  margin-top: 4px;
}
.symb-loop__node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 110px;
  padding: 12px 6px;
  background: var(--forest-deep);
  border: 1px solid rgba(245, 240, 230, 0.18);
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.5);
}
.symb-loop__node-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(196, 98, 60, 0.2);
  color: var(--terracotta);
}
.symb-loop__node-n {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1;
  color: var(--cream);
  margin-top: 2px;
}
.symb-loop__node-lbl {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  color: rgba(245, 240, 230, 0.75);
  line-height: 1.2;
}
.symb-loop__caption {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────────────
   SCIENCE — gut-rebuild flow (replaces the symb-eco diagram)
   ───────────────────────────────────────────────────────────── */
.science-hd {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 56px;
}
.science-hd__title {
  margin: 14px 0 0;
}
.science-hd__lede p {
  max-width: 54ch;
  margin-bottom: 22px;
}
.science-hd__trust {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
}
.science-hd__trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.78);
}
.science-hd__trust-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(31, 143, 91, 0.18);
  color: #6FD3A2;
  flex-shrink: 0;
}

/* The 5-step flow with a dashed rail running behind the icons */
.science-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
  padding: 56px 0 32px;
}
.science-flow__rail {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 1px;
  background-image: repeating-linear-gradient(
    to right,
    rgba(245, 240, 230, 0.22) 0 6px,
    transparent 6px 14px
  );
  transform: translateY(124px);
  pointer-events: none;
}
.science-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 6px;
}
.science-step__num {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: rgba(245, 240, 230, 0.48);
  margin-bottom: 16px;
}
.science-step__icon {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--forest-deep);
  border: 1px solid rgba(245, 240, 230, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(245, 240, 230, 0.92);
  margin-bottom: 22px;
  box-shadow: 0 10px 28px -16px rgba(0, 0, 0, 0.6);
  z-index: 1;
}
.science-step__stat {
  font-family: var(--serif);
  font-size: clamp(40px, 3.6vw, 52px);
  line-height: 1;
  color: var(--cream);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.science-step__lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.62);
  margin-bottom: 18px;
  max-width: 22ch;
}
.science-step__head {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}
.science-step__desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(245, 240, 230, 0.72);
  max-width: 26ch;
  margin: 0;
}
.science-step__arrow {
  position: absolute;
  top: 112px;
  right: -16px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--forest);
  border: 1px solid rgba(245, 240, 230, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(245, 240, 230, 0.7);
  z-index: 2;
}

/* Outcomes — measurable rebuild stats from the trial */
.science-outcomes {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(245, 240, 230, 0.16);
}
.science-outcomes__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.science-outcomes__eyebrow {
  color: rgba(245, 240, 230, 0.6);
  letter-spacing: 0.16em;
}
.science-outcomes__cite {
  color: rgba(245, 240, 230, 0.42);
  letter-spacing: 0.1em;
}
.science-outcomes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.science-outcome {
  padding: 8px 28px;
  border-left: 1px solid rgba(245, 240, 230, 0.14);
}
.science-outcome:first-child {
  border-left: 0;
  padding-left: 0;
}
.science-outcome__n {
  font-family: var(--serif);
  font-size: clamp(48px, 5.2vw, 72px);
  line-height: 1;
  color: var(--cream);
  letter-spacing: -0.02em;
}
.science-outcome__lbl {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.4;
  color: rgba(245, 240, 230, 0.72);
  margin-top: 10px;
  max-width: 26ch;
}
.science-outcomes__ft {
  margin-top: 28px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 980px) {
  .science-hd {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }
  .science-flow {
    grid-template-columns: 1fr 1fr;
    gap: 36px 22px;
    padding-top: 24px;
  }
  .science-flow__rail { display: none; }
  .science-step__arrow { display: none; }
  .science-outcomes__grid { grid-template-columns: 1fr; gap: 28px; }
  .science-outcome { padding: 18px 0; border-left: 0; border-top: 1px solid rgba(245, 240, 230, 0.14); }
  .science-outcome:first-child { border-top: 0; padding-top: 0; }
}
@media (max-width: 560px) {
  .science-flow { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────
   SCIENCE — circular gut-rebuild loop
   ───────────────────────────────────────────────────────────── */
.science-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 72px;
  align-items: center;
}
.science-copy__trust {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
}
.science-copy__trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.78);
}
.science-copy__trust-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(31, 143, 91, 0.18);
  color: #6FD3A2;
  flex-shrink: 0;
}

/* The loop diagram itself — a square aspect-ratio canvas that holds the
   SVG circle/arrows plus 4 absolutely-positioned label nodes. */
.gut-loop {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.gut-loop__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.gut-loop__node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--forest-deep);
  border: 1px solid rgba(245, 240, 230, 0.18);
  border-radius: 12px;
  box-shadow: 0 18px 36px -20px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  z-index: 2;
}
.gut-loop__node--top {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
.gut-loop__node--right {
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
}
.gut-loop__node--bottom {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}
.gut-loop__node--left {
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}
.gut-loop__node-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(245, 240, 230, 0.06);
  color: rgba(245, 240, 230, 0.9);
  flex-shrink: 0;
}
.gut-loop__node-stat {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
  color: var(--cream);
  letter-spacing: -0.01em;
}
.gut-loop__node-lbl {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.65);
  margin-top: 4px;
}

/* OUTCOMES — three big numbers below the diagram */
.science-outcomes {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(245, 240, 230, 0.16);
}
.science-outcomes__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.science-outcomes__eyebrow {
  color: rgba(245, 240, 230, 0.6);
  letter-spacing: 0.16em;
}
.science-outcomes__cite {
  color: rgba(245, 240, 230, 0.42);
  letter-spacing: 0.1em;
}
.science-outcomes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.science-outcome {
  padding: 4px 28px;
  border-left: 1px solid rgba(245, 240, 230, 0.14);
}
.science-outcome:first-child {
  border-left: 0;
  padding-left: 0;
}
.science-outcome__n {
  font-family: var(--serif);
  font-size: clamp(48px, 5.2vw, 72px);
  line-height: 1;
  color: var(--cream);
  letter-spacing: -0.02em;
}
.science-outcome__lbl {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.4;
  color: rgba(245, 240, 230, 0.72);
  margin-top: 10px;
  max-width: 26ch;
}

@media (max-width: 980px) {
  .science-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .gut-loop { max-width: 420px; }
  .science-outcomes__grid { grid-template-columns: 1fr; gap: 24px; }
  .science-outcome { padding: 16px 0; border-left: 0; border-top: 1px solid rgba(245, 240, 230, 0.14); }
  .science-outcome:first-child { border-top: 0; padding-top: 0; }
}
@media (max-width: 560px) {
  .gut-loop__node {
    padding: 8px 10px;
  }
  .gut-loop__node-icon { width: 28px; height: 28px; }
  .gut-loop__node-stat { font-size: 18px; }
  .gut-loop__node-lbl { font-size: 8.5px; }
}

/* ─────────────────────────────────────────────────────────────
   HONESTY BAND — manufacturing transparency + safety/meds note
   Lives between the science section and the ingredients explorer.
   Two outlined cards on the cream surface: "where it's made" left,
   "before you start" right.  Calm, dense, fact-heavy by design.
   ───────────────────────────────────────────────────────────── */
.honesty-band {
  background: var(--surface);
}
.honesty-band__hd {
  margin-bottom: 36px;
}
.honesty-band__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.honesty-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
}
.honesty-card__eyebrow {
  color: var(--sage);
  letter-spacing: 0.16em;
  margin-bottom: 14px;
  font-weight: 600;
}
.honesty-card__title {
  font-family: var(--sans);
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
  max-width: 32ch;
}
.honesty-card__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 24px;
  max-width: 56ch;
}

/* Definition list of plain-fact rows under the left card. */
.honesty-card__facts {
  margin: 0 0 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.honesty-card__facts > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.honesty-card__facts > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.honesty-card__facts dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0;
}
.honesty-card__facts dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}

/* Sourcing highlights block at the bottom of the left card. */
.honesty-card__sourcing {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px dashed var(--line);
}
.honesty-card__sourcing ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.honesty-card__sourcing li b {
  color: var(--ink);
  font-weight: 600;
}

/* Checklist on the right card — each row is a "concern → reassurance" pair. */
.honesty-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.honesty-checklist li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.honesty-checklist li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.honesty-checklist__lbl {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.honesty-checklist__sub {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

@media (max-width: 980px) {
  .honesty-band__grid { grid-template-columns: 1fr; gap: 18px; }
  .honesty-card__facts > div { grid-template-columns: 1fr; gap: 4px; }
}

/* review cards — avatar + customer photos */
.review-card { display: flex; flex-direction: column; }
.review-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  flex-shrink: 0;
  display: inline-block;
}
.review-photos {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.review-photos__item {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0;
  overflow: hidden;
  color: rgba(245, 240, 230, 0.7);
  box-shadow: inset 0 0 0 1px rgba(15, 20, 16, 0.08);
}
.review-photos__corner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: rgba(15, 20, 16, 0.5);
  backdrop-filter: blur(4px);
}

/* expanded line-item reviews — appears after "Read all 12,481" is clicked.
   Single column of stacked entries divided by hairlines so it reads as a
   tighter, list-style continuation of the rich cards above. */
.reviews-list {
  margin-top: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.reviews-list__item {
  padding: 22px 0;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
}
.reviews-list__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.reviews-list__age { color: var(--sage); }
.reviews-list__title {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin: 0 0 6px;
}
.reviews-list__body {
  margin: 0 0 12px;
  max-width: 78ch;
}
.reviews-list__photos { margin-bottom: 12px; }
.reviews-list__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
}

/* press marquee */
/* ─────────────────────────────────────────────────────────────
   BUNDLES PAGE
   ───────────────────────────────────────────────────────────── */

/* plan toggle (top right) */
.bdl-plan {
  display: inline-flex;
  padding: 4px;
  background: var(--cream);
  border-radius: 999px;
  border: 1px solid var(--line);
  align-items: center;
}
.bdl-plan__opt {
  all: unset;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.2s;
}
.bdl-plan__opt--on {
  background: #fff;
  color: var(--ink-1, var(--forest));
  box-shadow: 0 1px 2px rgba(15, 33, 26, 0.08), 0 0 0 1px rgba(15, 33, 26, 0.06);
}

/* Plan-toggle position swap: lives in the hero on desktop (top-right
   next to the title) but moves AFTER the cards on mobile.  The
   postcards wrap is rendered inside BundleCards so it sits between
   the bundle grid and the "You'll choose flavors" foot. */
.bdl-plan-postcards-wrap { display: none; }
@media (max-width: 760px) {
  .bdl-plan--hero { display: none; }
  .bdl-plan-postcards-wrap {
    display: block;
    margin: 18px auto 8px;
    max-width: 380px;
  }
  /* Asymmetric column split: One-time is the secondary option, so it
     gets a smaller slice (35%); Subscribe carries its discount chip
     and needs the room for both label + chip on one line (65%). */
  .bdl-plan--postcards {
    display: grid;
    grid-template-columns: 35fr 65fr;
    width: 100%;
    border-radius: 14px;
    padding: 4px;
  }
  .bdl-plan--postcards .bdl-plan__opt {
    justify-content: center;
    padding: 10px 12px;
    text-align: center;
    white-space: nowrap;
    min-width: 0;
    border-radius: 11px;
  }
}

/* brief flash applied when a review card scrolls the user to a matching bundle */
@keyframes bdlCardFlash {
  0%   { box-shadow: 0 0 0 0 rgba(196, 98, 60, 0); transform: translateY(0); }
  20%  { box-shadow: 0 0 0 6px rgba(196, 98, 60, 0.22), 0 22px 50px -28px rgba(196, 98, 60, 0.32); transform: translateY(-3px); }
  60%  { box-shadow: 0 0 0 4px rgba(196, 98, 60, 0.14), 0 22px 50px -28px rgba(196, 98, 60, 0.22); transform: translateY(-2px); }
  100% { box-shadow: 0 0 0 0 rgba(196, 98, 60, 0); transform: translateY(0); }
}
.bdl-card--flash {
  animation: bdlCardFlash 1.8s ease-out both;
}
.bdl-plan__chip {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  background: #BA0809;
  color: var(--cream);
  border-radius: 4px;
  font-weight: 600;
}
.bdl-plan__opt--on .bdl-plan__chip {
  background: #BA0809;
  color: var(--cream);
}

/* 3-card grid — capped width + centered so cards don't stretch past
   the content they hold; tighter gap on the narrower track. */
.bdl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 980px) {
  .bdl-grid { grid-template-columns: 1fr; max-width: 380px; gap: 22px; }
  /* Mobile sequence: most-popular (featured) · best-value · trial — leads with
     Build New Habits, then Full Body Transformation, then Trying Out. Keyed on the
     semantic card classes (not tier ids, which differ per page: starter/habits/
     transform on shake, aio-* on the AIO page, trying/habits/transform on the
     capsule presets) so all four bundle pages sequence identically. The best card
     also carries --featured, so the later --best rule wins for it. Uses CSS
     `order` rather than reordering the source so DOM/SR reading order stays logical. */
  .bdl-grid .bdl-card { order: 3; }
  .bdl-grid .bdl-card--featured { order: 1; }
  .bdl-grid .bdl-card--best { order: 2; }
}
.bdl-grid__foot {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--sage);
  font-family: var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bdl-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 20px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.bdl-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -22px rgba(15, 33, 26, 0.18);
}
.bdl-card:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 4px;
}
.bdl-card--featured:hover {
  box-shadow: 0 0 0 1px var(--forest) inset, 0 22px 46px -22px rgba(15, 33, 26, 0.35);
}
.bdl-card--best:hover {
  box-shadow: 0 0 0 1px var(--terracotta) inset, 0 26px 56px -22px rgba(196, 98, 60, 0.4);
}
.bdl-card--featured {
  border-color: var(--forest);
  box-shadow: 0 0 0 1px var(--forest) inset, 0 18px 40px -28px rgba(15, 33, 26, 0.3);
}
.bdl-card--best {
  border-color: var(--terracotta);
  box-shadow: 0 0 0 1px var(--terracotta) inset, 0 22px 50px -28px rgba(196, 98, 60, 0.32);
  background: linear-gradient(180deg, rgba(196, 98, 60, 0.03), var(--paper) 60%);
}
.bdl-card__tag {
  position: absolute;
  top: -12px;
  right: 22px;
  padding: 6px 12px;
  color: var(--cream);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 999px;
}
.bdl-card__head { margin-bottom: 12px; }
.bdl-card__supply {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 600;
}
.bdl-card__title {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-top: 4px;
  color: var(--ink);
}
.bdl-card__pitch {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}
.bdl-card__visual {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  gap: 16px;
}
.bdl-card__hero-img {
  height: 100px;
  width: auto;
  max-width: 60%;
  object-fit: contain;
  display: block;
}
.bdl-card__meals {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.bdl-card__meals-n {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 0.95;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.bdl-card__price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 12px 0 10px;
}
.bdl-card__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
}
.bdl-card__price-main {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
}
.bdl-card__price-sep {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--line);
  margin: 0 -2px;
}
.bdl-card__price-strike {
  font-family: var(--mono);
  font-size: 12px;
  opacity: 0.55;
  color: var(--sage);
  text-decoration: line-through;
}
.bdl-card__price-now {
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
}
.bdl-card--best .bdl-card__price-now { color: var(--terracotta-2); }
.bdl-card__price-unit {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--sage);
}
.bdl-card__price-meal {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Best-value and most-popular cards highlight the per-meal price in
   the amber pill we use elsewhere for "lowest price" callouts. */
.bdl-card--best .bdl-card__price-meal,
.bdl-card--featured .bdl-card__price-meal {
  padding: 3px 10px;
  background: #E8B454;
  color: #4A2F22;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.bdl-card--best .bdl-card__price-meal-u,
.bdl-card--featured .bdl-card__price-meal-u {
  color: rgba(74, 47, 34, 0.7);
}
.bdl-card__price-meal-u {
  font-weight: 500;
  color: var(--sage);
  letter-spacing: 0.06em;
}

/* "You save" line — matches cart sidebar styling, sits above the CTA */
.bdl-card__save {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--terracotta-2);
}
.bdl-card__save-pct {
  opacity: 0.7;
  font-weight: 500;
}

/* push CTA to the bottom even when card has no gifts block */
.bdl-card:not(:has(.bdl-card__gifts)) .bdl-card__perks { margin-bottom: auto; }

.bdl-card__perks {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bdl-card__perks li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.3;
}
.bdl-card__perks svg { color: var(--forest); flex-shrink: 0; }

/* gift section inside card */
.bdl-card__gifts {
  margin-top: auto;
  padding: 10px 12px;
  border: 1px dashed rgba(196, 98, 60, 0.4);
  background: rgba(196, 98, 60, 0.04);
  border-radius: 10px;
}
.bdl-card__gifts-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.bdl-card__gifts-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bdl-gift {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bdl-gift__thumb {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(245, 240, 230, 0.85);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.bdl-gift__thumb--photo {
  background: var(--cream-2);
  border: 1px solid var(--line-soft);
}
.bdl-gift__thumb--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Tiny supplement-bottle silhouette for kinds that have no photo yet
   (metab, bloat). Cleaner than the generic "lock" SVG previously here. */
.bdl-gift__bottle {
  position: relative;
  width: 14px;
  height: 20px;
  background: rgba(245, 240, 230, 0.95);
  border-radius: 3px 3px 4px 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(15, 33, 26, 0.7);
}
.bdl-gift__bottle-cap {
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 9px;
  height: 4px;
  background: rgba(245, 240, 230, 0.95);
  border-radius: 2px 2px 1px 1px;
}
.bdl-gift__bottle-lbl {
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}
.bdl-gift__meta {
  display: flex;
  flex: 1;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  line-height: 1.2;
  min-width: 0;
}
.bdl-gift__name {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.bdl-gift__val {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--terracotta-2);
  text-transform: uppercase;
  flex-shrink: 0;
  white-space: nowrap;
}

.bdl-card__foot {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 16px;
  font-size: 12px;
  color: var(--sage);
}
.bdl-card__foot > span {
  display: inline-flex;
  align-items: center;
}
.bdl-card__foot svg { color: var(--forest); margin-right: 6px; }

/* THE MATH — comparison table.  Each row has an inline SVG icon, a
   label/note stack, a small horizontal "price bar" visualizing how
   much each option costs relative to the max, and the price label
   on the right.  The bar is the visual punchline — Biome is
   dramatically the shortest. */
.math-table {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.math-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line-soft);
}
.math-row:last-child { border-bottom: 0; }
.math-row--best {
  background: var(--forest);
  color: var(--cream);
}
.math-row__icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(27, 51, 41, 0.06);
  color: var(--forest);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.math-row--best .math-row__icon {
  background: rgba(245, 240, 230, 0.12);
  color: var(--cream);
}
.math-row__lbl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.math-row__name {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.math-row__note {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--sage);
  text-transform: uppercase;
}
.math-row--best .math-row__note { color: rgba(245, 240, 230, 0.6); }

/* Hairline price bar — width is relative to the most expensive row in
   the table, so Biome reads as a sliver next to the coffee/frozen rows.
   On the highlighted (best) row the fill is cream on the dark bg. */
.math-row__bar {
  display: block;
  position: relative;
  width: 100%;
  max-width: 320px;
  height: 4px;
  background: rgba(27, 51, 41, 0.08);
  border-radius: 999px;
  margin-top: 8px;
  overflow: hidden;
}
.math-row__bar-fill {
  position: absolute;
  inset: 0;
  background: var(--sage-2);
  border-radius: 999px;
}
.math-row--best .math-row__bar {
  background: rgba(245, 240, 230, 0.16);
}
.math-row--best .math-row__bar-fill {
  background: #E8B454;
}

.math-row__price {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.math-row__cost {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.math-row--best .math-row__cost { color: var(--cream); }
.math-row__per {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sage);
}
.math-row--best .math-row__per { color: rgba(245, 240, 230, 0.6); }

/* TIMELINE — 3 cards with mini line charts */
.tl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 880px) {
  .tl-grid { grid-template-columns: 1fr; }
  .tl-head { grid-template-columns: 1fr !important; gap: 12px !important; align-items: start !important; }
}
.tl-card {
  background: var(--forest);
  color: var(--cream);
  border: 1px solid var(--line-on-dark);
  border-radius: 14px;
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tl-card:nth-child(2) { background: var(--forest-2); }
.tl-card:nth-child(3) { background: var(--forest-deep); }
.tl-card__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.tl-card__wk {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  font-weight: 700;
}
.tl-card__metric-name {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tl-chart {
  display: block;
  width: 100%;
  height: auto;
  margin: 18px 0 20px;
}
.tl-card__title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--cream);
  margin: 0 0 8px;
}
.tl-card__body {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(245, 240, 230, 0.72);
  margin: 0 0 16px;
}
.tl-card__who-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-on-dark);
}

/* Caloric deficit explainer — below the timeline cards */
.tl-deficit {
  position: relative;
  margin-top: 64px;
  padding: 40px 32px 32px;
  background: rgba(245, 240, 230, 0.04);
  border: 1px solid var(--line-on-dark);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 40px;
  align-items: center;
}
/* Hairline rule above the deficit card with an inline "§" eyebrow,
   used to mark the shift from the 3 graph tiles (different format)
   into this longer-form explainer card. */
/* No hairline above the deficit explainer — the section break is
   already implied by the typographic shift from 3 cards to a
   single wide editorial card. Adding a line just muddled it. */
.tl-deficit::before { content: none; }
.tl-deficit__lead { min-width: 0; }
.tl-deficit__title {
  font-family: var(--serif);
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.1;
  color: var(--cream);
  margin: 14px 0 14px;
}
.tl-deficit__body {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(245, 240, 230, 0.72);
  margin: 0;
}
.tl-deficit__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.tl-deficit__stat {
  padding: 18px 16px;
  background: rgba(245, 240, 230, 0.04);
  border: 1px solid var(--line-on-dark);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 158px;
}
.tl-deficit__stat-n {
  font-family: var(--serif);
  font-size: clamp(36px, 3.6vw, 48px);
  line-height: 1;
  color: var(--cream);
  letter-spacing: -0.01em;
}
.tl-deficit__stat-u {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.55);
  font-weight: 600;
  margin-top: 2px;
}
.tl-deficit__stat-lbl {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
  color: rgba(245, 240, 230, 0.78);
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-on-dark);
}
.tl-deficit__fineprint {
  grid-column: 1 / -1;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(245, 240, 230, 0.5);
  margin: 4px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-on-dark);
}
@media (max-width: 900px) {
  .tl-deficit { grid-template-columns: 1fr; gap: 24px; padding: 24px; margin-top: 16px; }
  .tl-deficit__stats { grid-template-columns: 1fr; }
  .tl-deficit__stat { min-height: 0; flex-direction: row; align-items: baseline; gap: 12px; }
  .tl-deficit__stat-lbl { border: 0; padding: 0; margin-left: auto; text-align: right; }
}

/* BUNDLE REVIEWS */
.bdl-rev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 880px) {
  .bdl-rev-grid { grid-template-columns: 1fr; }
}
.bdl-rev-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  font-weight: 700;
  border-radius: 999px;
}
.bdl-rev-tag--sage { background: rgba(91, 115, 97, 0.14); color: var(--sage); }
.bdl-rev-tag--forest { background: rgba(27, 51, 41, 0.1); color: var(--forest); }
.bdl-rev-tag--terracotta { background: rgba(196, 98, 60, 0.14); color: var(--terracotta-2); }
.bdl-rev-tag__sup {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid currentColor;
  opacity: 0.7;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── FLAVOR PICKER MODAL ── */
.fp-back {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 16, 0.55);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  backdrop-filter: blur(2px);
}
.fp-back--open { opacity: 1; pointer-events: auto; }
.fp-back--closing { opacity: 0; pointer-events: none; }
.fp-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 41;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  /* Hide the visible scrollbar — the picker still scrolls via touch
     / wheel, but the track chrome reads as a clean borderless modal. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: var(--paper);
  border-radius: 18px;
  padding: 28px 28px 24px;
  box-shadow: 0 30px 80px -20px rgba(15, 20, 16, 0.4);
  /* Mount animation — quick fade plus a small upward translate so the
     modal feels intentional rather than popping. Backdrop fades via
     its own opacity transition. */
  animation: fpModalIn 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.fp-modal--closing {
  animation: fpModalOut 0.2s ease both;
}
@keyframes fpModalIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes fpModalOut {
  from { opacity: 1; transform: translate(-50%, -50%); }
  to   { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); }
}
  /* Hide the visible scrollbar — the picker still scrolls via touch
     / wheel, but the track chrome reads as a clean borderless modal. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: var(--paper);
  border-radius: 18px;
  padding: 28px 28px 24px;
  box-shadow: 0 30px 80px -20px rgba(15, 20, 16, 0.4);
}
.fp-modal::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ─────────────────────────────────────────────────────────────
   FLAVOR PICKER — mobile cleanups
   - Tighten the horizontal padding so content sits closer to the
     edges (more room for the flavor rows on narrow phones).
   - Keep the title on one line by overriding the desktop block-break
     on the italic tail span.
   - Hide the small "BUILD NEW HABITS · 1-MONTH SUPPLY" eyebrow.
   - Make the meter (track + count) stack vertically so the count
     line gets the full available width.
   - Hide the "GIFT:" word in each gift line — the present-icon SVG
     alone carries the meaning.
   - Reorder via flex so the summary card sits at the BOTTOM of the
     modal (below the Add-to-cart button + caption).
   ───────────────────────────────────────────────────────────── */
/* Picker eyebrow (tier label · supply). Base style lives here so the mobile
   display:none below can win — a later section-local copy was overriding it. */
.fp-modal__intro { color: var(--sage); display: block; }
/* Build completions for the picker rows (the design styles these inline). */
.fp-row--empty { cursor: pointer; }
.fp-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) {
  .fp-modal {
    padding: 22px 16px 18px;
    display: flex;
    flex-direction: column;
  }
  /* Stop flex column children from shrinking — without this, when the
     content is taller than the modal's max-height, the Add-to-cart
     button (which has no min-height) compresses to a single line of
     text. We want every section to keep its natural size and let the
     modal scroll instead. */
  .fp-modal > * { flex-shrink: 0; }
  /* Single-line title — kill the structural line break used on desktop
     AND scale the title size with viewport so the longest string
     ("Choose flavors for 6 boxes.") always fits on one line, even on
     iPhone SE-width devices. `white-space: nowrap` guarantees it never
     breaks; the clamp() keeps it readable on larger phones.
     `!important` is required because the desktop `.fp-modal__title`
     rule is declared LATER in the source and wins on cascade with the
     same specificity, even when this media query matches. */
  .fp-modal__title {
    font-size: clamp(15px, 5.2vw, 22px) !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }
  .fp-modal__title-tail { display: inline !important; margin-left: 4px !important; white-space: nowrap !important; }
  /* Drop the right padding reserved for the X — the close button sits
     at the modal's top-right corner (absolutely positioned), and the
     title's first line ("Choose flavors for N boxes.") needs the full
     content width to stay on a single line. The X has its own 32px
     hit-area and lives outside the title's flow. */
  .fp-modal__head { padding-right: 0 !important; }
  /* Hide the plan-name + supply eyebrow row */
  .fp-modal__intro { display: none; }
  /* Tighten head margin since the eyebrow is gone */
  .fp-modal__head { margin-bottom: 14px !important; }
  /* Meter stays as a row — the track fills the space to the LEFT of
     the count, which is right-aligned at the end of the row. */
  .fp-modal__meter-count { white-space: nowrap; }
  /* Gift rows: hide the "GIFT:" word, keep the present-icon SVG */
  .fp-modal__line--gift b { display: none; }
  /* Flex-order: keep the natural reading order intact, but pull the
     summary card to the visual bottom of the modal. */
  .fp-modal__x { order: 0; }
  .fp-modal__head    { order: 1; }
  .fp-modal__quick   { order: 2; }
  .fp-modal__rows    { order: 3; }
  .fp-modal > .btn   { order: 4; }
  .fp-modal > .mono-sm { order: 5; }
  .fp-modal__summary { order: 6; margin-top: 16px; margin-bottom: 0; }
  /* Summary top line: drop the "{N} boxes of Weight-Loss Superfood"
     prefix on mobile so only the meals count remains on the left. */
  .fp-modal__line-product { display: none; }
  .fp-modal__line-meals { margin-left: 0 !important; }
}
.fp-modal__x {
  all: unset;
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.15s;
}
.fp-modal__x:hover { background: var(--cream); }

.fp-modal__head { margin-bottom: 18px; padding-right: 36px; }
/* Desktop default: italic tail starts a new line.  Overridden on
   mobile to keep the whole title on one line. */
.fp-modal__title-tail { display: block; }
.fp-modal__title {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 8px 0 18px;
  color: var(--ink);
}
.fp-modal__meter {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fp-modal__meter-track {
  flex: 1;
  height: 6px;
  background: var(--cream-2);
  border-radius: 999px;
  overflow: hidden;
}
.fp-modal__meter-fill {
  display: block;
  height: 100%;
  background: var(--forest);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.fp-modal__meter-count {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.fp-modal__quick {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.fp-quick {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.fp-quick:hover { border-color: var(--forest); background: var(--cream); }
.fp-quick__chip {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}
.fp-quick__chip--split {
  background: linear-gradient(90deg, #E8DEC6 0%, #C4623C 49%, #5B3A28 51%, #2A1810 100%);
}

.fp-modal__rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.fp-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  transition: border-color 0.15s, background 0.15s;
}
.fp-row--on { border-color: var(--forest); background: #fff; box-shadow: 0 1px 2px rgba(15, 33, 26, 0.06); }
.fp-row__thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fp-row__copy { flex: 1; min-width: 0; }
.fp-row__name {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--ink);
}
.fp-row__sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  margin-top: 3px;
}
/* Mobile: hide the tasting-notes subline so each row reads as just
   the flavor name + stepper — tighter and faster to scan. */
@media (max-width: 760px) {
  .fp-row__sub { display: none; }
}

.fp-modal__summary {
  padding: 14px 16px;
  background: var(--cream);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.fp-modal__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13.5px;
  color: var(--ink);
  gap: 12px;
}
.fp-modal__line--gift { color: var(--ink-2); font-size: 13px; }
.fp-modal__line--gift svg { color: var(--forest); }
.fp-modal__line--gift b { color: var(--forest); font-weight: 700; letter-spacing: 0.02em; font-size: 11px; }
.fp-modal__line--ship { color: var(--ink-2); font-size: 13px; }
.fp-modal__sav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px dashed var(--line);
  padding-top: 8px;
  margin-top: 2px;
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--terracotta-2);
}
.fp-modal__sav .mono-sm {
  letter-spacing: 0.14em;
  color: var(--terracotta-2);
  font-weight: 600;
}

/* press marquee */
.press {
  display: flex;
  gap: 28px 36px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.press__logo {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-2);
  opacity: 0.78;
  letter-spacing: 0.01em;
}
.press__logo--bold {
  font-family: var(--sans);
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.02em;
  font-size: 17px;
}
.press__logo--mono {
  font-family: var(--mono);
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* footer */
.footer {
  background: var(--forest-deep);
  color: rgba(245, 240, 230, 0.78);
  padding: 80px 0 36px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 48px;
  margin-bottom: 56px;
  align-items: start;
}
.footer__brand .logo-mark { margin-bottom: 16px; }
.footer__tagline {
  font-size: 13.5px;
  max-width: 280px;
  line-height: 1.6;
  margin: 0;
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.footer__legal {
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: rgba(245, 240, 230, 0.5);
  font-family: var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.footer h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.55);
  font-weight: 500;
  margin-bottom: 16px;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer a { color: inherit; text-decoration: none; transition: color 0.15s; }
.footer li a:hover { color: #ffffffb3; }

/* ─────────────────────────────────────────────────────────────
   FOOTER — mobile layout.  At tablet the brand sits above the
   3-column link grid; at phone the columns collapse to a single
   stack with hairline rules between sections so the density
   still reads as deliberate, not collapsed.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .footer { padding: 56px 0 28px; }
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 36px;
    margin-bottom: 36px;
  }
  .footer__brand .logo-mark { margin-bottom: 14px; }
  .footer__cols {
    gap: 24px;
    padding-top: 28px;
    border-top: 1px solid rgba(245, 240, 230, 0.1);
  }
}
@media (max-width: 560px) {
  .footer { padding: 48px 0 24px; }
  .footer__tagline { max-width: none; }
  .footer__cols {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .footer__col {
    padding: 18px 0;
    border-bottom: 1px solid rgba(245, 240, 230, 0.08);
  }
  .footer__col:last-child { border-bottom: 0; }
  .footer__col h4 { margin-bottom: 12px; }
  .footer__col ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
  }
  .footer__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 10.5px;
  }
}

/* density adjustments */
[data-density="compact"] .card { padding: 20px; }
[data-density="compact"] .nav__inner { height: 60px; }
[data-density="compact"] .btn { height: 46px; }
[data-density="compact"] .btn--lg { height: 54px; }
[data-density="compact"] .faq__item { padding: 16px 0; }

/* tweak control panel placement (above sticky bar) */
.twk-panel { bottom: 88px !important; }

/* ─────────────────────────────────────────────────────────────
   HERO LAYOUT & ATC WIDGET
   ───────────────────────────────────────────────────────────── */
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: start;
}
.hero-gallery {
  position: sticky;
  top: 92px;
  align-self: start;
  min-width: 0;
}
.hero-side { min-width: 0; }
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-gallery { position: static; }
}

/* Stable-aspect main image — does NOT shrink with viewport height,
   so the product shot keeps its proportions on shorter desktop screens.
   On taller viewports it caps at a comfortable max so it doesn't run
   away from the right-column ATC widget. */
.hero-gallery__main {
  position: relative;
  width: 100%;
  /* Enforce a true 1:1 square — cap by max-width so the height tracks
     the width via aspect-ratio. A max-height would clamp the height
     while width stays at 100%, breaking the ratio at wider columns. */
  max-width: 560px;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
}

/* thumbnails row with side peek/indicators */
.hero-thumbs {
  position: relative;
  margin-top: 12px;
}
/* Compact, centered thumbnails — the row spans the gallery width so the
   prev/next arrows sit at the hero image's left/right edges, with the
   thumbnails themselves clustered in the middle. */
.hero-thumbs__track {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.hero-thumbs__btn {
  all: unset;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: transform 0.18s ease;
}
.hero-thumbs__btn--off { cursor: pointer; }
.hero-thumbs__btn--on {
  box-shadow: 0 0 0 1.5px var(--forest), 0 0 0 4px var(--surface) inset;
}
.hero-thumbs__btn--off {
  box-shadow: 0 0 0 1px var(--line);
}
.hero-thumbs__num {
  position: absolute;
  left: 6px; top: 6px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgba(15, 20, 16, 0.55);
}
/* Wrap the prev/next + thumbnail track so arrows can vertically center
   on the track only (not the whole .hero-thumbs container which also
   contains the count + dots row below). */
.hero-thumbs__row {
  position: relative;
}

.hero-thumbs__edge {
  position: absolute;
  top: 0; bottom: 0;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sage);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s, transform 0.15s;
}
.hero-thumbs__edge:hover { color: var(--forest); }
.hero-thumbs__edge:hover svg { opacity: 1; }
.hero-thumbs__edge--l { left: 0; }
.hero-thumbs__edge--l:hover { transform: translateX(-2px); }
.hero-thumbs__edge--r { right: 0; }
.hero-thumbs__edge--r:hover { transform: translateX(2px); }

/* Hide the prev/next arrows that flank the thumbnail row on mobile.
   The main hero image already has its own chevron buttons floating
   on top; the thumbnail-row arrows just crowd a small viewport. */
@media (max-width: 760px) {
  .hero-thumbs__edge { display: none !important; }
}
.hero-thumbs__edge svg {
  opacity: 0.55;
}
.hero-thumbs__count {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--sage);
}
.hero-thumbs__dots {
  display: inline-flex;
  gap: 5px;
}
.hero-thumbs__dot {
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--line);
  transition: width 260ms ease, background 260ms ease;
}
.hero-thumbs__dot--on {
  background: var(--forest);
  width: 16px;
  border-radius: 999px;
}

.hero-vp {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 6px 0 18px;
  margin-bottom: 22px;
}
.hero-vp__item {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  color: var(--ink-2);
  white-space: nowrap;
}
.hero-vp__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--terracotta);
  transform: translateY(2px);
}
.hero-vp__icon svg { width: 14px; height: 14px; }
.hero-vp__lead {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.hero-vp__sub {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-2);
}
.hero-vp__sep {
  color: var(--line);
  font-size: 14px;
  user-select: none;
}

.atcw__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.atcw__lbl, .atcw__head .mono-sm {
  white-space: nowrap;
}

.hero-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 18px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  color: var(--ink-2);
}
.hero-trust > span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-left: 1px solid var(--line-soft);
  line-height: 1.35;
  text-wrap: balance;
}
.hero-trust > span:first-child {
  padding-left: 0;
  border-left: 0;
}
.hero-trust > span > :first-child {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}
.hero-trust > span b { color: var(--ink); font-weight: 600; }

.hero-trust--bottom {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  justify-content: center;
  text-align: center;
}
.hero-trust--bottom > span { padding: 0; border-left: 0; justify-content: center; }

/* Single-item trust strip — stretch the one item across, left aligned */
.hero-trust--single {
  grid-template-columns: 1fr;
  text-align: left;
}
.hero-trust--single > span { padding: 0; border-left: 0; }

/* ATC widget — frameless, blends into page */
.atcw {
  margin-top: 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.atcw__step + .atcw__step { margin-top: 32px; }
.atcw__foot {
  margin-top: 8px;  padding-top: 0;
  border-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.atcw__pays {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
  display: flex;
  justify-content: center;
}
.atcw__num {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--cream-2);
  color: var(--forest);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.atcw__lbl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.atcw__flavors {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.atcw__plans {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Subscription reassurance footer — sits at the bottom of the
   Subscribe & save card, restating the cancel/skip flexibility in
   plain language so it's the last thing the eye lands on. */
.pln__foot {
  padding: 12px 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.pln__foot strong {
  color: var(--ink);
  font-weight: 600;
}

/* Subscription reassurance pill — only renders when the Subscribe plan
   is active. Designed to defuse the "what if I get locked in" anxiety
   without taking visual weight from the CTA below it. */
.atcw__sub-reassure {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(31, 143, 91, 0.06);
  border: 1px solid rgba(31, 143, 91, 0.18);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}
.atcw__sub-reassure-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--accent-green);
  color: white;
  flex-shrink: 0;
  margin-top: 1px;
}
.atcw__sub-reassure strong {
  color: var(--ink);
  font-weight: 600;
}
.atcw__sub-reassure-sub {
  color: var(--ink-2);
}

/* flavor row — simplified to reduce busyness; price moved to plan card */
.flavor-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color 0.15s, background 0.15s;
}
.flavor-row--on {
  border-color: var(--paper);
  background: rgba(27, 51, 41, 0.025);
}
.flavor-row__name {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  line-height: 1.15;
}
.flavor-row__sub {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage);
  margin-top: 2px;
}

/* Starter Pack row — has its own price column + accent badge */
.flavor-row__pack-badge {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--terracotta-2);
  background: rgba(196, 98, 60, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
}
.flavor-row__pack-price {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  white-space: nowrap;
  line-height: 1.05;
  flex: 0 0 auto;
  margin-right: 4px;
}
.flavor-row__pack-strike {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--sage);
  text-decoration: line-through;
  font-weight: 500;
}
.flavor-row__pack-num {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--terracotta-2);
  margin-top: 2px;
}

/* stepper */
.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  transition: border-color 0.18s;
}
.stepper--collapsed { border-color: transparent; background: transparent; }
/* The pickers mark the maxed plus-button with the disabled attribute; mirror the
   design's .stepper__btn--off fade for it. */
.stepper__btn:disabled { color: rgba(15, 20, 16, 0.25); cursor: not-allowed; }
.stepper__btn {
  all: unset;
  width: 32px;
  height: 32px;
  margin: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--ink);
  transition: background 0.15s;
}
.stepper__btn:hover:not(:disabled) { background: var(--cream); }
.stepper__btn--off { color: rgba(15, 20, 16, 0.25); }
.stepper__btn--add {
  background: var(--forest);
  color: var(--cream);
  margin: 2px;
}
.stepper__btn--add:hover { background: var(--forest-deep) !important; }
.stepper__val {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-family: var(--mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* plan card v3 — frequency built in, less busy ribbon */
.pln {
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  /* `overflow: visible` so the FlipDropdown menu inside .pln__detail
     can extend beyond the card edges when it opens. The previous
     `overflow: hidden` clipped the menu — we lose the "tucked-in"
     effect on the top-edge tag (its negative `top: -1px` was being
     clipped to the card boundary), which is imperceptible. */
  overflow: visible;
  transition: border-color 0.18s, background 0.18s;
  position: relative;
}
.pln--on {
  border-color: var(--forest);
  background: rgba(27, 51, 41, 0.025);
}
.pln__tag {
  position: absolute;
  top: -1px;
  left: 14px;
  background: var(--forest);
  color: var(--cream);
  padding: 4px 10px 5px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0 0 6px 6px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  z-index: 2;
}
.pln__tag::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--terracotta);
}
.pln__body {
  all: unset;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  width: 100%;
  box-sizing: border-box;
  cursor: default;
}
/* When the card carries a top-edge banner tag, push the body down a touch
   so the title isn't cramped against the tag */
.pln:has(.pln__tag) .pln__body { padding-top: 26px; }
/* Collapsed subscribe card needs even more room above the title so it doesn't
   sit too close to the "Save $10 / box" tag. */
.pln:not(.pln--on):has(> .pln__tag) > .pln__body { padding-top: 26px; }
.pln__radio {
  width: 18px; height: 18px;
  border-radius: 999px;
  border: 2px solid var(--line);
  flex: 0 0 18px;
  position: relative;
  transition: border-color 0.18s;
}
.pln--on .pln__radio { border-color: var(--forest); }
.pln--on .pln__radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--forest);
  border-radius: 999px;
}
/* When the Subscribe card has its top banner tag, push the body down a touch */
.pln:has(> .pln__tag) > .pln__body { padding-top: 26px; }
.pln:not(.pln--on):has(> .pln__tag) > .pln__body { padding-top: 26px; }
.pln__title {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  line-height: 1.15;
}
.pln__sub {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 500;
}
.pln__meal {
  display: block;
  width: fit-content;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--sage);
  font-weight: 500;
}
.pln__meal--hl {
  display: block;
  width: fit-content;
  margin-top: 6px;
  padding: 3px 10px;
  background: #E8B454;
  color: #4A2F22;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

@media (max-width: 760px) {
  /* Stack the strike-through retail price ABOVE the main price on
     mobile so the comparison is unambiguous at small sizes (inline
     side-by-side at 22px squeezes both numbers too tightly). The
     main number itself also right-aligns so the price column reads
     as a single right-flushed block. */
  .pln__pricecol-num {
    flex-wrap: wrap;
    column-gap: 6px;
    justify-content: flex-end;
    text-align: right;
  }
  .pln__pricecol-strike {
    display: block;
    width: 100%;
    text-align: right;
    margin-bottom: 2px;
  }
  /* Keep the plan-card title ("Subscribe & save" / "One-time
     purchase") on a single line — wrapping it puts the subhead
     directly under "Subscribe &" which reads broken. */
  .pln__title { white-space: nowrap; }
  /* And keep the per-meal pill (e.g. "$3.83 / meal") on a single
     line too. When the box price grows by a digit the pill gets
     squeezed and breaks "/ meal" onto its own line, which reads as
     "/ meal" being its own line item. */
  .pln__meal,
  .pln__meal--hl { white-space: nowrap; }
}

/* PRICE COLUMN — same shape in both plan cards for easy comparison */
.pln__pricecol {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  white-space: nowrap;
  line-height: 1.05;
  flex: 0 0 auto;
}
.pln__pricecol-num {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-weight: 600;
  letter-spacing: 0.015em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.pln__pricecol-num--sale { color: var(--terracotta-2); }
.pln__pricecol-strike {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--sage);
  text-decoration: line-through;
  font-weight: 500;
}
.pln__pricecol-unit {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--sage);
  margin-left: 2px;
}
.pln__pricecol-meal {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--sage);
  font-weight: 500;
}
.pln__pricecol-meal--hl {
  margin-top: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--forest);
  color: var(--cream);
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* Sub-detail when subscribe is selected — perks full-width, frequency at bottom */
.pln__detail {
  padding: 14px 18px 16px;
  border-top: 1px dashed var(--line);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px 24px;
  align-items: center;
}
/* Collapse the detail (perks + delivery frequency) when its plan card isn't selected. The prototype
   only renders .pln__detail for the active plan ({on && ...}); the shake / metab / bloat PDP ports
   emit it as static markup, so without this it stayed expanded under the one-time card (no collapse
   on switch). No-op on the all-in-one bundle, which already renders the detail only inside .pln--on
   cards. The plan cards toggle .pln--on as the shopper switches Subscribe ⇄ One-time. */
.pln:not(.pln--on) .pln__detail { display: none; }
.pln__perks {
  list-style: none;
  padding: 0 24px 0 0;
  margin: 0;
  border-right: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  color: var(--ink-2);
}
.pln__perks li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pln__perks li svg {
  flex: 0 0 14px;
  color: var(--forest);
}
.pln__freq {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  min-width: 0;
}
.pln__freq-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}
.pln__freq-label svg { color: var(--forest); flex: 0 0 14px; }
.pln__freq-cadence {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sage);
}
.pln__freq-sel {
  appearance: none;
  -webkit-appearance: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 30px 7px 12px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%231B3329' stroke-width='1.6' stroke-linecap='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: default;
  width: 100%;
}
.pln__freq-sel:hover { border-color: var(--forest); }

/* ── FLIP-AWARE DROPDOWN ──────────────────────────────────────
   Replaces native <select> in the plan card + cart freq picker so
   we can flip upward when there isn't room below (the native
   element's auto-flip behavior varies wildly across browsers). */
.flipdd { position: relative; width: 100%; }
.flipdd .pln__freq-sel {
  text-align: left;
}
.flipdd--open .pln__freq-sel { border-color: var(--forest); }
.flipdd__menu {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 32px -10px rgba(15, 20, 16, 0.25);
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* The menu is always in the DOM (built by biome-flipdd.js), unlike the prototype
   which only mounts it when open — so hide it until the dropdown is opened,
   otherwise it renders open on page load and unpositioned. */
.flipdd:not(.flipdd--open) .flipdd__menu { display: none; }
.flipdd--down .flipdd__menu { top: calc(100% + 4px); }
.flipdd--up   .flipdd__menu { bottom: calc(100% + 4px); }
.flipdd__item {
  all: unset;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  text-align: center;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.flipdd__item:hover { background: var(--cream); }
.flipdd__item--on {
  background: var(--forest);
  color: var(--cream);
  font-weight: 600;
}
.flipdd__item--on:hover { background: var(--forest); }

@media (max-width: 520px) {
  .pln__detail { grid-template-columns: 1fr; }
  /* When the detail stacks, the perks list sits ABOVE the frequency
     picker instead of to its left — the right-dashed border becomes
     a floating divider with nothing to divide. Drop it. */
  .pln__perks { border-right: 0; padding-right: 0; }
  /* Put "Delivers every" on the same line as the dropdown, and
     right-justify the cadence line below. */
  .pln__freq {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 6px;
    align-items: center;
  }
  .pln__freq-label { grid-column: 1; white-space: nowrap; }
  .pln__freq > .flipdd { grid-column: 2; }
  .pln__freq-cadence {
    grid-column: 1 / -1;
    justify-self: end;
    text-align: right;
  }
}

/* nutrition link in atc foot */
.atcw__nutri {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--forest);
  border-bottom: 1px solid transparent;
  cursor: default;
}
.atcw__nutri:hover { border-bottom-color: var(--forest); }

/* moved-below-thumbnails: nutrition link + value props strip */
.hero-gallery__nutri {
  margin-top: 16px;
  cursor: pointer;
}
.hero-gallery__vp {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* milestone dots */
.ms-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--cream-2);
  border: 2px solid var(--line);
  z-index: 1;
  transition: background 0.2s, border-color 0.2s;
}

/* two-bar milestone stack */
.ms-stack {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 18px 0 0;
}

/* single-bar milestone (free shipping context above, volume context below — shared qty axis) */
.ms-twin {
  margin: 0 4px;
  position: relative;
}
.ms-twin__row {
  position: relative;
}
.ms-twin__row--top { height: 20px; margin-bottom: 8px; }
.ms-twin__row--bot { height: 50px; margin-top: 6px; }

.ms-twin__top-mark {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ms-twin__top-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.ms-twin__bar {
  position: relative;
  height: 8px;
  background: var(--cream-2);
  border-radius: 999px;
}
/* Tall bar: dots fill the full bar height with no padding */
.ms-twin__bar--tall {
  height: 28px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.ms-twin__bar--tall .ms-twin__dot {
  width: 28px;
  height: 28px;
  border-width: 0;
}
/* Pull the endpoint dots fully inside the bar's rounded edges */
.ms-twin__bar--tall .ms-twin__dot[style*="left: 0%"] {
  transform: translate(0, -50%);
}
.ms-twin__bar--tall .ms-twin__dot[style*="left: 100%"] {
  transform: translate(-100%, -50%);
}
.ms-twin__inside {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 4px;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  /* Two-color text via background-clip:text — the gradient stops at the
     same pct as the bar fill, so characters over the green section render
     cream and those over the cream-2 background render dark forest. */
  background: linear-gradient(
    to right,
    var(--cream) 0%,
    var(--cream) var(--ms-pct, 0%),
    var(--forest) var(--ms-pct, 0%),
    var(--forest) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
  z-index: 5;
  white-space: nowrap;
}
.ms-twin__inside-icon { display: none; }
.ms-twin__inside-icon {
  display: inline-flex;
  align-items: center;
}
.ms-twin__bar--tall .ms-twin__dot {
  width: 28px;
  height: 28px;
  border-width: 2px;
  z-index: 1;
}
.ms-twin__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s;
  overflow: hidden;
}
.ms-twin__fill::after { display: none; }
.ms-twin__fill--full::after { display: none; }
.ms-twin__dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--cream);
  border: 2px solid var(--line);
  z-index: 1;
  transition: background 0.2s, border-color 0.2s;
}

/* When the bar is tall (label inside), drop the inline dots. */
.ms-twin:has(.ms-twin__bar--tall) .ms-twin__dot { display: none; }

/* Tickmarks below the bar.
   Always present so labels don't jump vertically when state changes;
   color reflects the milestone state. The marker container is the same
   width as its text content, so align-items: center on the column puts
   the tick directly above the center of the qty/perk text — without
   shifting the text itself. */
.ms-twin:has(.ms-twin__bar--tall) .ms-twin__marker--l {
  align-items: center;
}
.ms-twin:has(.ms-twin__bar--tall) .ms-twin__marker--r {
  align-items: center;
}
.ms-twin:has(.ms-twin__bar--tall) .ms-twin__marker::before {
  content: "";
  display: block;
  width: 2px;
  height: 7px;
  background: var(--cream-2);
  border-radius: 1px;
  margin-bottom: 4px;
  transition: background 0.18s ease;
}
.ms-twin:has(.ms-twin__bar--tall) .ms-twin__marker[data-reached="true"]::before {
  background: var(--forest);
}
.ms-twin--all-full:has(.ms-twin__bar--tall) .ms-twin__marker--r[data-reached="true"]::before {
  background: var(--terracotta);
}

.ms-twin__marker {
  position: absolute;
  top: 0;
  display: grid;
  /* Stack order top→bottom: tick (::before, row 1) → savings line
     (perk, row 2) → quantity (qty, row 3). The perk row has a
     reserved height (14px) so markers WITHOUT a perk (1 Unit)
     still drop their quantity into row 3, keeping every qty
     aligned at the same vertical level across all markers. */
  grid-template-rows: auto 14px auto;
  row-gap: 2px;
  justify-items: center;
  align-items: center;
  text-align: center;
  white-space: nowrap;
  line-height: 1.1;
}
/* Left/right edge markers — anchor the marker to the bar edge but
   still center its children horizontally so the tick reads as a
   pointer above the text rather than at the bar's edge. */
.ms-twin__marker--l { transform: translateX(0); }
.ms-twin__marker--r { transform: translateX(-100%); }
/* Middle markers — center on the anchor x. */
.ms-twin__marker:not(.ms-twin__marker--l):not(.ms-twin__marker--r) {
  transform: translateX(-50%);
}
.ms-twin__marker::before { grid-row: 1; }
.ms-twin__marker-perk { grid-row: 2; }
.ms-twin__marker-qty { grid-row: 3; }
/* For markers WITHOUT a perk (the "1 Unit" entry), drop a dash
   into the reserved perk row so the slot reads as "no discount"
   rather than as empty space. */
.ms-twin__marker:not(:has(.ms-twin__marker-perk))::after {
  content: "Base";
  grid-row: 2;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--sage);
  line-height: 1;
  text-transform: uppercase;
  font-weight: 600;
}
.ms-twin__marker-qty {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
}
.ms-twin__marker-perk {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 600;
  text-transform: uppercase;
}
.ms-twin__marker-perk-unit { font-size: inherit; }
@media (max-width: 560px) {
  /* Shrink the "/ each" suffix below the savings number so the
     dollar value reads as the dominant figure, pull it closer to
     the value, and tighten the gap between "/" and "each" so the
     whole pair reads as one unit. */
  .ms-twin__marker-perk-unit { font-size: 9px; opacity: 0.85; margin-left: -3px; word-spacing: -2px; }
}

/* Free-shipping-only variant — no bottom markers */
.ms-twin--ship-only .ms-twin__row--top { margin-bottom: 8px; }
.ms-twin--ship-only { margin: 4px 4px; }

/* Unlocked state — when the bar reaches 100% (free shipping earned),
   drop the green fill and bar-track so the row recedes into the page
   background. Only the "Free shipping unlocked" copy remains, in a
   solid forest color so it stands as confirmation rather than as a
   bright bar competing with the rest of the ATC widget. */
.ms-twin--ship-only:has(.ms-twin__fill--full) .ms-twin__bar {
  background: transparent;
  border: 0;
}
.ms-twin--ship-only:has(.ms-twin__fill--full) .ms-twin__fill--full {
  background: transparent !important;
}
.ms-twin--ship-only:has(.ms-twin__fill--full) .ms-twin__inside {
  background: var(--forest);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ms-twin--ship-only:has(.ms-twin__fill--full) .ms-twin__dot {
  background: transparent !important;
  border-color: transparent !important;
}
.ms-row__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.ms-row__title {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}
.ms-row__hint {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 500;
}
.ms-row__lane {
  position: relative;
  padding: 16px 0 30px;
}
.ms-row__lane--ship {
  padding-bottom: 24px;
}
.ms-row__bar {
  position: relative;
  height: 4px;
  background: var(--cream-2);
  border-radius: 999px;
  margin: 0 4px;
}
.ms-row__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* atcw foot — old duplicate removed; defined above with frameless widget */
.pays {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pay-pill {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink-2);
  background: var(--paper);
}

/* disabled CTA */
.btn--disabled {
  background: var(--cream-2);
  color: var(--sage);
  cursor: not-allowed;
  opacity: 0.5; /* the design applies this inline on disabled picker CTAs */
}
.btn--disabled:hover { background: var(--cream-2); }

/* ingredient thumbnail (placeholder slot for future imagery) */
.ing-thumb {
  width: 56px;
  height: 76px;
  flex: 0 0 56px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 4px;
}
.ing-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, 0.06) 0 1px,
      transparent 1px 7px);
  pointer-events: none;
}
.ing-thumb__lbl {
  position: relative;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.78);
  padding: 1px 5px;
  background: rgba(15, 20, 16, 0.36);
  border-radius: 3px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* founder story */
.founder {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 880px) {
  .founder { grid-template-columns: 1fr; gap: 32px; }
}

/* 3-up founder portrait cards */
.founder__portraits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.founder__portrait-card {
  position: relative;
  aspect-ratio: 5 / 2;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(165deg, #C4623C 0%, #B0552F 50%, #5B3A28 100%);
  display: flex;
  align-items: flex-end;
  padding: 16px 18px;
  color: var(--cream);
}
.founder__portrait-card:nth-child(2) {
  background: linear-gradient(165deg, #5B7361 0%, #3D5142 50%, #244038 100%);
}
.founder__portrait-card:nth-child(3) {
  background: linear-gradient(165deg, #244038 0%, #1B3329 50%, #0F211A 100%);
}
.founder__portrait-tag {
  position: absolute;
  top: 14px;
  left: 18px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(245, 240, 230, 0.85);
  color: var(--forest);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.founder__portrait-foot {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.founder__portrait-name {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: 0.01em;
}

/* honesty callout */
.founder__honesty {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.founder__honesty-eyebrow {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 6px;
}
.founder__honesty p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.founder__honesty b { color: var(--ink); font-weight: 600; }

/* standards / certifications strip (lives in composition right column under the table) */
.standards {
  margin-top: 20px;
}
.standards__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  gap: 8px;
  flex-wrap: wrap;
}
.standards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 880px) {
  .standards__grid { grid-template-columns: repeat(3, 1fr); }
}
.standards__cert {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  text-align: center;
}
.standards__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(27, 51, 41, 0.06);
  color: var(--forest);
}
.standards__glyph svg {
  width: 28px;
  height: 28px;
}
.standards__lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
  line-height: 1.2;
}

.founder__quote {
  font-family: var(--serif);
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 24px;
  text-wrap: balance;
}
.founder__quote .italic { font-style: italic; }
.founder__body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 56ch;
}
.founder__body b { color: var(--ink); font-weight: 600; }

/* who we hired — 5 specialist partners */
.founder__partners {
  margin-top: 28px;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
}
.founder__partners-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}
.founder__partners-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
@media (max-width: 880px) {
  .founder__partners-grid { grid-template-columns: repeat(2, 1fr); }
}
.founder__partner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  min-height: 88px;
}
.founder__partner-loc {
  margin-top: auto;
}
.founder__partner-n {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--sage);
}
.founder__partner-lbl {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: 0;
  text-align: right;
}
.founder__partner-loc {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--sage);
  text-transform: uppercase;
  text-align: right;
  margin-top: auto;
}

.founder__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.founder__stats > div {
  padding: 0 14px;
  border-left: 1px solid var(--line-soft);
}
.founder__stats > div:first-child { padding-left: 0; border-left: 0; }
.founder__stats-n {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
}
.founder__stats-l {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
  line-height: 1.3;
}

/* ─────────────────────────────────────────────────────────────
   CART DRAWER PIECES
   ───────────────────────────────────────────────────────────── */
.drawer__band {
  padding: 18px 24px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.drawer--v2 .drawer__band.drawer__band--bot {
  border: 0;
  margin-top: 4px;
  padding: 0 18px 4px;
}

/* cart line */
.cl {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
}
.cl__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
}
.cl__thumb {
  width: 64px; height: 64px; flex: 0 0 64px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.cl__rm {
  all: unset;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  color: var(--sage);
  transition: background 0.15s, color 0.15s;
}
.cl__rm:hover { background: var(--cream); color: var(--ink-2); }

.cl__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 14px;
}

.cl__savings {
  padding: 12px 14px;
  background: rgba(196, 98, 60, 0.05);
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cl__sav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: var(--terracotta-2);
}
.cl__sav-row > span:first-child {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
}

.cl__freq {
  padding: 12px 14px;
  background: var(--cream);
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cl__freq-sel {
  appearance: none;
  -webkit-appearance: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 28px 6px 12px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%232A3530' stroke-width='1.4' stroke-linecap='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: default;
}

/* ─────────────────────────────────────────────────────────────
   CART DRAWER v2 — receipt style
   ───────────────────────────────────────────────────────────── */
.drawer--v2 .drawer__body {
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.drawer__sticky-top {
  flex: 0 0 auto;
  padding: 10px 18px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
}
.drawer__sticky-top .plan-row { width: 100%; margin: 0; }
.drawer__scroll {
  flex: 1 1 auto;
  overflow-y: auto;  padding: 2px 18px 8px;
  min-height: 0;
  /* Hide the scrollbar chrome — content still scrolls via touch /
     wheel / keyboard. Matches the borderless treatment we use on
     the flavor picker + nutrition panel. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.drawer__scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
@media (max-width: 760px) {
  /* Reclaim the freed scrollbar width on phones — tighten the side
     padding so the line items get an extra few pixels each side. */
  .drawer__scroll { padding-left: 14px; padding-right: 14px; }
}
.drawer__sticky-bot {
  flex: 0 0 auto;
  padding: 10px 18px 10px;  background: var(--surface);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.drawer__sticky-bot > .upsell {
  margin: 0;
  background: var(--paper);
}
.drawer__sticky-bot > .upsell .upsell__head { background: var(--cream); }
.drawer__sticky-bot .drawer__band,
.drawer__sticky-bot .drawer__band--bot {
  padding: 18px 0 6px;
  margin: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}
.drawer--v2 .drawer__hd { padding: 8px 18px 6px; }
.drawer--v2 .drawer__band {
  padding: 0 18px 8px;
  background: transparent;
  border: 0;
  margin-top: 4px;
  border-bottom: 1px solid var(--line);
}

.empty {
  padding: 24px 18px 32px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 22px;
  /* Make the empty-state surface itself scrollable so users can
     reach quick-add rows below the fold. The parent .drawer__body
     in v2 has overflow: hidden (it owns its own sticky-top /
     scroll / sticky-bot stack); the empty state is a sibling of
     that structure so it needs its own scroll. Hide the scrollbar
     to keep the chrome borderless. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.empty::-webkit-scrollbar { width: 0; height: 0; display: none; }
.empty__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--sage);
  padding-top: 8px;
}
.empty__lbl {
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--ink-2);
}
.empty__qa { display: flex; flex-direction: column; gap: 10px; }
.empty__qa-title {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 6px 0 10px;
}

/* Mobile empty cart — tighten the gap between "Add our best sellers"
   title and the featured bundle image below it, and pull the
   headline closer to the drawer top. Other items in the list keep
   their normal vertical rhythm. */
@media (max-width: 760px) {
  .empty { padding: 12px 18px 24px; }
  /* Keep the normal gap between sibling quick-add cards. */
  .empty__qa { gap: 10px; }
  /* Only collapse the gap directly under the headline. */
  .empty__qa-title + .empty-feat { margin-top: -10px; }
}

/* featured quick-add card — transparent, whole card clickable
   Desktop: centered vertical stack (image · name · prices · CTA).
   Mobile (≤760): image spans full width on top, name + prices stack
   on the left, Add-to-cart pill sits in a 2nd column on the right. */
.empty-feat {
  all: unset;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 16px 0 18px;
  cursor: pointer;
  transition: transform 0.15s;
}
@media (max-width: 760px) {
  .empty-feat {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "img img"
      "name cta"
      "prices cta";
    column-gap: 14px;
    row-gap: 4px;
    text-align: left;
    align-items: center;
    /* Tighten the top padding so the image sits closer to the
       "Add our best sellers" title above it. */
    padding: 0 0 18px;
  }
  .empty-feat__img {
    grid-area: img;
    /* Center the image even though the grid is 2-col — name +
       prices + CTA below stay in their right-half columns. */
    justify-self: center;
    max-width: 216px;
    aspect-ratio: 1 / 1;
    margin-bottom: 8px;
  }
  .empty-feat__name { grid-area: name; align-self: end; }
  .empty-feat__prices { grid-area: prices; margin-bottom: 0; align-self: start; }
  .empty-feat__cta { grid-area: cta; align-self: center; }
}
.empty-feat:hover { transform: translateY(-2px); }
.empty-feat:hover .empty-feat__cta {
  background: var(--forest-deep, var(--forest));
}
.empty-feat__img {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  display: block;
}
.empty-feat__name {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.empty-feat__prices {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.empty-feat__now {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  color: #BA0809;
}
.empty-feat__strike {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--sage);
  text-decoration: line-through;
}
.empty-feat__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 28px;
  background: var(--forest);
  color: var(--cream);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.15s;
}
.empty-feat__cta svg { width: 14px; height: 14px; }

/* compact quick-add row — whole row is a button */
.qa-row {
  all: unset;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--paper);
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.qa-row:hover {
  border-color: var(--forest);
  transform: translateY(-1px);
}
.qa-row:hover .qa-row__add {
  background: var(--forest);
  color: var(--cream);
}
.qa-row--flavor { cursor: default; }
.qa-row--flavor:hover {
  border-color: var(--line-soft);
  transform: none;
}
.qa-row__thumb {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  display: block;
}
.qa-row__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qa-row__name {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.2;
}
.qa-row__prices {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.qa-row__now {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--terracotta-2);
}
.qa-row__strike {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--sage);
  text-decoration: line-through;
}
.qa-row__sub {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--sage);
}
.qa-row__add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(27, 51, 41, 0.08);
  color: var(--forest);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.qa-row__add svg { width: 12px; height: 12px; }

/* flavor entry chips (Weight-Loss Meal row) — now a direct child of
   .qa-row so it sits to the right of .qa-row__copy. Two vertically
   stacked, equal-width pills on all viewports. */
.qa-row__flavors {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 124px;
}
.qa-row__flavors .qa-row__flavor {
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}
.qa-row__flavor {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(27, 51, 41, 0.08);
  color: var(--forest);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.qa-row__flavor:hover {
  background: var(--forest);
  color: var(--cream);
}
.qa-row__flavor svg { width: 11px; height: 11px; }

/* milestone bar */
.mb { position: relative; }
.mb__copy {
  font-size: 13.5px;
  color: var(--ink-2);
  margin-bottom: 12px;
}
.mb__copy b { color: var(--ink); font-weight: 500; }
.mb__check {
  display: inline-block;
  color: var(--forest);
  margin-right: 4px;
  font-weight: 600;
}
.mb__track {
  position: relative;
  height: 4px;
  background: var(--cream-2);
  border-radius: 999px;
  margin-bottom: 18px;
}
.mb__fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  transition: width 0.3s ease, background 0.3s ease;
}
.mb__node {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: var(--cream);
  z-index: 1;
  transition: background 0.2s, border-color 0.2s;
}
.mb__labels {
  position: relative;
  height: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mb__labels > span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}
.mb__labels > span:first-child { transform: translateX(0); }
.mb__labels > span:last-child  { transform: translateX(-100%); }

.mb__labels--rich {
  height: 36px;
  text-transform: none;
  letter-spacing: 0;
}
.mb__labels--rich > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.1;
  white-space: nowrap;
  align-items: center;
}
.mb__labels--rich > span:first-child { align-items: flex-start; }
.mb__labels--rich > span:last-child  { align-items: flex-end; }
.mb__labels--rich .mb__qty {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.mb__labels--rich .mb__perk {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* plan chip — single thin row
   Asymmetric columns: Subscribe takes whatever space remains (1fr),
   One-time is fixed at 96px — wide enough for its label + the pill
   padding, but no wider. This matches the rendered width of the
   subscribe content and keeps the toggle compact. */
.plan-chip {
  display: grid;
  grid-template-columns: 1fr 96px;
  padding: 0;
  background: var(--cream);
  border-radius: 999px;
  border: 1px solid var(--line);
  position: relative;
  overflow: visible;
}
/* Sliding indicator: rounded pill that snaps to whichever cell is
   selected by transitioning its left + right edges. Uses the fixed
   96px column width to compute the exact edge positions. */
.plan-chip::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  right: calc(96px - 1px);
  background: var(--forest);
  border-radius: 999px;
  transition: left 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              right 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
.plan-chip[data-sel="once"]::before {
  left: calc(100% - 96px + 1px);
  right: -1px;
  transform: none;
}
.plan-chip__opt {
  all: unset;
  position: relative;
  z-index: 1;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: color 0.22s ease;
}
.plan-chip__opt--on {
  color: var(--cream);
  background: transparent;
  margin: 0;
  padding: 10px 14px;
  z-index: 1;
}
.plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* unified subscription frequency row */
.freq-row {
  display: flex;
  align-items: center;  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.freq-row--inline {
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  gap: 8px;
  font-size: 13px;
}
/* Invisible state — keeps the layout slot reserved so the plan
   chip doesn't grow when "One-time" is selected. */
.freq-row--hidden {
  visibility: hidden;
  pointer-events: none;
}
.freq-row--inline .freq-row__sel {
  padding: 6px 28px 6px 10px;
  font-size: 13px;
}

/* Mobile cart drawer — tighten the plan-row so the "Subscribe /
   One-time" toggle keeps the left column and the frequency picker
   ("Every / [N weeks]") sits inline to the right.  The asymmetric
   plan-chip columns (70/30 sub/once) free enough horizontal space
   on the right that the freq label + dropdown stay horizontal. */
@media (max-width: 760px) {
  /* The free-shipping bar inherits a 4px side margin (.ms-twin)
     plus the sticky-bot's 18px padding, leaving the bar ~44px short
     of full width. On phones we want it to span edge-to-edge so the
     progress fill reads at full resolution. */
  .drawer__sticky-bot { padding-left: 0; padding-right: 0; }
  .drawer__sticky-bot .drawer__band--bot { padding: 12px 0 6px; }
  .drawer__sticky-bot .ms-twin,
  .drawer__sticky-bot .ms-twin--ship-only { margin: 0; }
  .plan-row {
    flex-wrap: nowrap;
    gap: 12px;
    margin-bottom: 12px;
  }
  .plan-row .plan-chip {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* Tighter pill — less vertical chrome around the labels. */
  .plan-chip__opt,
  .plan-chip__opt--on {
    padding: 8px 10px;
    font-size: 12.5px;
  }
  .freq-row--inline {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-width: 96px;
  }
  .freq-row--inline .freq-row__lbl {
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sage);
    justify-content: flex-end;
    text-align: right;
  }
  .freq-row--inline .freq-row__sel {
    padding: 6px 22px 6px 10px;
    font-size: 12.5px;
  }
  .freq-row--inline > .flipdd { width: 100%; }
}
.freq-row__lbl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-2);
}
.freq-row__lbl svg { color: var(--forest); flex: 0 0 14px; }
.freq-row__sel {
  appearance: none;
  -webkit-appearance: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 32px 7px 14px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%232A3530' stroke-width='1.6' stroke-linecap='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: default;
}

/* upsell-as-line styling */
.cl2--upsell .cl2__bot { align-items: center; }

/* cart line v2 (receipt row) */
.cl2-list {
  border-top: 0;
}
/* Drop the bottom border on whichever .cl2 is the visual "last line
   item" — either the literal :last-child of .cl2-list, or the last
   .cl2 that sits right before a non-.cl2 sibling (e.g. FreeBonus or
   CartUpsell, both of which now ride at the end of the list). */
.cl2-list > .cl2:last-child,
.cl2-list > .cl2:has(+ :not(.cl2)) { border-bottom: 0; padding-bottom: 0; }
.cl2-list:has(> .cl2:only-child) > .cl2 { border-bottom: 0; }
.cl2 {
  display: flex;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}
.cl2__thumb {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 8px;
  display: flex;
  align-items: flex-end;
  /* The prototype's 8px base padding was always overridden to 0 inline on every
     cart line (the image fills the 64px box, object-fit:cover). Match that — the
     8px base inset the image to 48px. */
  padding: 0;
  overflow: hidden;
}
.cl2__body { flex: 1; min-width: 0; }
.cl2__title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.cl2__rm {
  all: unset;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--sage);
  flex: 0 0 24px;
}
.cl2__rm:hover { background: var(--cream); color: var(--ink-2); }
.cl2__meta {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sage);
  flex-wrap: wrap;
}
.cl2__dot { opacity: 0.6; }
.cl2__freq {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cl2__sel {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--sage);
  padding: 0 14px 1px 4px;
  margin-left: 2px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--forest);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%231B3329' stroke-width='1.4' stroke-linecap='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  cursor: default;
}
.cl2__bot {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.cl2__price {
  text-align: right;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cl2__strike {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--sage);
  text-decoration: line-through;
}
.cl2__total {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}
.cl2__sav-chip {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
  background: #BA0809;
  padding: 3px 7px;
  border-radius: 4px;
  font-weight: 600;
}

.cl2__unit {
  font-size: 0.85em;
  opacity: 0.85;
}

/* free bonus */
.bonus {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px dashed rgba(27, 51, 41, 0.25);
  border-radius: 10px;
  background: rgba(91, 115, 97, 0.10);
  display: flex;
  align-items: center;
  gap: 14px;
}
.bonus__icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--forest);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
}

/* upsell card — "Upgrade my order!" headline above a bordered
   body card with the product info and a tappable check column.
   The headline sits OUTSIDE the bordered card so it reads as a
   section title rather than card chrome. */
.upsell {
  margin-top: auto;
  border: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
.upsell__head {
  padding: 0 2px 8px;
  border-bottom: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.upsell__head > .mono-sm {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink) !important;
}
.upsell__body {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}
.drawer__sticky-bot > .upsell { background: transparent; }
.drawer__sticky-bot > .upsell .upsell__head { background: transparent; }

/* Bonus + upsell stacked in the sticky-bot — the parent gap controls spacing */
.drawer__sticky-bot > .bonus { margin: 0; }

/* Subscribe chip — keep the /box, /each unit visually subordinate */
.plan-chip__unit {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  opacity: 0.85;
  margin-left: 1px;
}

/* Larger, clearer upsell pager dots — sized to fit a 1/2/3 number
   inside so users can read which slide they're on. */
.upsell__dot {
  all: unset;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink-2);
  box-sizing: border-box;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.upsell__dot:hover {
  border-color: var(--forest);
  color: var(--ink);
}
.upsell__dot--on {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--cream);
}

/* Margins between flex items don't collapse — guarantees a gap above
   the upsell whether or not margin-top: auto pushes it to the bottom. */
.bonus { margin-bottom: 24px; }
.cl2-list + .upsell { padding-top: 0; }
.cl2-list:has(+ .upsell) { margin-bottom: 24px; }
.upsell--pinned { padding-top: 16px; }
.upsell__nav {
  display: inline-flex;
  gap: 6px;
}
.upsell__body {
  padding: 16px;
  display: grid;
  grid-template-columns: 22px 1fr 80px;
  grid-template-areas: "check content thumb";
  gap: 14px;
  align-items: center;
}
.upsell__check   { grid-area: check; }
.upsell__content { grid-area: content; }
.upsell__thumb   { grid-area: thumb; }
/* Empty checkmark square on the far left — the whole card is a
   tap target, this is just a visual indicator that taps add the
   product. Stroke turns forest-green on hover for affordance. */
.upsell__check {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  background: var(--paper);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.upsell__body:hover .upsell__check {
  border-color: var(--forest);
  color: var(--forest);
}
.upsell__content { padding: 0; }
.upsell__thumb {
  aspect-ratio: 1/1;
  border-radius: 8px;
  display: flex;
  align-items: flex-end;
  /* Same as .cl2__thumb: prototype overrode the 8px base to 0 inline so the image
     fills the box (object-fit:cover). */
  padding: 0;
  overflow: hidden;
}
.upsell__add:hover { background: var(--terracotta-2); border-color: var(--terracotta-2); }
.upsell__add--on {
  background: var(--forest);
  color: var(--cream);
  border-color: var(--forest);
}
.upsell__add--on:hover { background: var(--forest); }

/* Cart-exclusive upsell sits at the end of the items list. Margin
   above so it doesn't kiss the last cart line. */
.upsell { margin-top: 16px; }

/* footer totals */
.drawer__ft--v2 { padding: 12px 18px 14px; background: var(--paper); }
.ft-totals { padding-bottom: 0; }
/* Mobile — pull the "Skip or cancel anytime" line closer to the
   border-line above so its vertical breathing room matches the gap
   to the Total row below. */
@media (max-width: 760px) {
  .drawer__ft--v2 { padding-top: 6px; }
  .drawer__ft--v2 .ft-microline { padding-top: 4px; }
}

/* Free-shipping milestone in the cart footer — sits below the
   Secure-checkout button now. Keep the bar full-width with no
   side margin so the progress fill spans the drawer cleanly. */
.ft-shipbar {
  margin-top: 12px;
}
.ft-shipbar .ms-twin,
.ft-shipbar .ms-twin--ship-only { margin: 0; }

.ft-microline {
  all: unset;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.2;
}
.ft-microline--toggle {
  cursor: pointer;
  color: var(--ink);
  font-weight: 500;
}
.ft-microline--toggle:hover .ft-microline__check {
  border-color: var(--forest);
  background: rgba(27, 51, 41, 0.06);
}
.ft-microline__check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ft-microline__check--on {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--cream);
}
.ft-microline__sav {
  color: var(--terracotta-2);
  font-weight: 600;
}
.ft-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  font-size: 13.5px;
  color: var(--ink-2);
}
.ft-row--total {
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.ft-row--total > span:first-child {
  font-family: var(--sans);
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}

/* payments row — clean icon strip */
.pay-row {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pay-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  height: 28px;
  min-width: 36px;
  opacity: 0.85;
}
.pay-chip img {
  max-height: 18px;
  max-width: 32px;
  object-fit: contain;
}

/* Product-page card icons — slightly smaller on phones so the row
   doesn't dominate the ATC widget. Scoped to .atcw__pays so the
   cart drawer's larger icons stay as-is. */
@media (max-width: 760px) {
  .atcw__pays .pay-chip { height: 24px; max-width: 26px; padding: 0 3px; }
  .atcw__pays .pay-chip img { max-height: 14px; max-width: 26px; }
  .atcw__pays .pay-row { gap: 4px; }
  /* Cart drawer payment row — smaller cards + tighter gap above so
     the row feels evenly spaced relative to the gap below the button
     (button → free shipping bar). */
  .drawer__ft .pay-chip { height: 24px; min-width: 30px; }
  .drawer__ft .pay-chip img { max-height: 14px; max-width: 26px; }
  .drawer__ft .pay-row { gap: 4px; }
  .drawer__ft .pay-row { margin-top: 6px; }
}

/* ─────────────────────────────────────────────────────────────
   UGC VIDEO WALL — auto-scrolling marquee
   ───────────────────────────────────────────────────────────── */
.ugcwall {
  position: relative;
  overflow: hidden;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* edge fade */
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.ugcwall__track {
  display: flex;
  gap: 14px;
  padding: 0 24px;
  width: max-content;
  animation: ugc-scroll 80s linear infinite;
}
.ugcwall:hover .ugcwall__track { animation-play-state: paused; }
/* Also pause the marquee whenever ANY card in the wall is playing
   its video, so the user isn't reading a stat that slides past. */
.ugcwall__track--paused { animation-play-state: paused; }
@keyframes ugc-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ugcwall__card {
  position: relative;
  flex: 0 0 220px;
  height: 380px;
  border-radius: 12px;
  overflow: hidden;
  color: var(--cream);
  box-shadow: 0 18px 40px -28px rgba(15, 20, 16, 0.4);
  cursor: pointer;
  background: #1B3329;
}
.ugcwall__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.ugcwall__tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  mix-blend-mode: multiply;
  opacity: 0.7;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.ugcwall__card--playing .ugcwall__tint { opacity: 0; }

/* — Real results section video player — */
.rr-video {
  position: relative;
  aspect-ratio: 9/12;
  background: linear-gradient(180deg, #2A3530, #0F1410);
  border-radius: 14px;
  overflow: hidden;
  color: var(--cream);
  cursor: pointer;
}
.rr-video__el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.rr-video__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(15,20,16,0.12) 0%, rgba(15,20,16,0) 35%, rgba(15,20,16,0) 60%, rgba(15,20,16,0.7) 100%);
  pointer-events: none;
}
.rr-video__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: rgba(250,248,243,0.95);
  color: var(--forest);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: transform 0.15s ease;
}
.rr-video__play:hover { transform: translate(-50%, -50%) scale(1.05); }
.rr-video__hud {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 3;
}
.rr-video__live {
  position: absolute;
  left: 20px;
  top: 20px;
  padding: 6px 10px;
  background: rgba(15,20,16,0.55);
  color: var(--cream);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  z-index: 3;
}
.ugcwall__scrim {
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(15,20,16,0.05) 0%, rgba(15,20,16,0.55) 75%, rgba(15,20,16,0.85) 100%);
  pointer-events: none;
}
.ugcwall__live {
  position: absolute; left: 12px; top: 12px;
  z-index: 3;
  padding: 4px 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--cream);
  background: rgba(196, 98, 60, 0.85);
  border-radius: 4px;
  font-weight: 600;
}
.ugcwall__play {
  position: absolute;
  left: 50%; top: 42%;
  z-index: 3;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: 999px;
  background: rgba(250, 248, 243, 0.92);
  color: var(--forest);
  border: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: default;
}
.ugcwall__stat {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  z-index: 3;
}
.ugcwall__dur {
  position: absolute; right: 12px; top: 12px;
  z-index: 3;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(245, 240, 230, 0.85);
  padding: 3px 6px;
  background: rgba(15, 20, 16, 0.45);
  border-radius: 4px;
  z-index: 1;
}

/* ─────────────────────────────────────────────────────────────
   NUTRITION FACTS MODAL
   ───────────────────────────────────────────────────────────── */
.nfm {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 560px;
  max-width: 100vw;
  background: var(--surface);
  z-index: 51;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
}
.nfm--open { transform: translateX(0); }
.nfm__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.nfm__tabs {
  display: inline-flex;
  padding: 3px;
  background: var(--cream);
  border-radius: 999px;
}
.nfm__tab {
  all: unset;
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sage);
  cursor: default;
}
.nfm__tab--on { background: var(--forest); color: var(--cream); }
.nfm__body {
  flex: 1;
  overflow-y: auto;
  padding: 32px 32px 48px;
}
/* Hide the scrollbar — the panel still scrolls via touch / wheel /
   keyboard, but the track chrome is gone so the content has the
   full panel width to itself. Matches the borderless treatment we
   use on the flavor-picker modal. */
.nfm__body { scrollbar-width: none; -ms-overflow-style: none; }
.nfm__body::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Tighten side padding on mobile so the nutrition table can claim
   the recovered scrollbar width. */
@media (max-width: 560px) {
  .nfm__body { padding: 24px 18px 36px; }
}

/* nutrition facts table (FDA-style) */
.nf {
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 14px 16px;
  font-family: var(--sans);
  color: var(--ink);
}
.nf__top {
  font-size: 14.5px;
  display: flex;
  justify-content: space-between;
  border-bottom: 8px solid var(--ink);
  padding-bottom: 8px;
}
.nf__cal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0 6px;
  border-bottom: 4px solid var(--ink);
}
.nf__cal-l {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 700;
}
.nf__cal-v {
  font-family: var(--sans);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}
.nf__head {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 0;
  border-bottom: 1px solid var(--ink);
}
.nf__row {
  display: grid;
  grid-template-columns: 1fr auto 48px;
  gap: 10px;
  padding: 2px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.nf__row--bold { font-weight: 700; }
.nf__row--indent > span:first-child { padding-left: 16px; font-weight: 400; }
.nf__row-v { font-family: var(--mono); font-size: 13px; text-align: right; }
.nf__row-dv { font-family: var(--mono); font-size: 13px; text-align: right; font-weight: 700; }
.nf__row--vit { font-size: 13px; padding: 2px 0; }
.nf__divider {
  height: 8px;
  background: var(--ink);
  margin: 8px -16px 8px;
}
.nf__foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 4px solid var(--ink);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-2);
}


/* Hand cursor on interactive shop controls — appended last to win cascade,
   overriding the global button { cursor: default } reset and any all: unset. */
button.btn:not(.btn--disabled):not(:disabled),
.btn:not(.btn--disabled):not(:disabled),
button.stepper__btn:not(:disabled),
.stepper__btn:not(:disabled),
button.pln__body,
.pln__body,
button.pln,
.pln,
.upsell__add,
.hero-gallery__main button,
.hero-thumbs__btn--off,
.hero-thumbs__edge,
.upsell__nav button,
.upsell__dot,
.cl2__rm,
.stepper button {
  cursor: pointer !important;
}


/* ─────────────────────────────────────────────────────────────
   PARTNER NUDGE MODAL
   ───────────────────────────────────────────────────────────── */
.pn-back {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 16, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  z-index: 80;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.pn-back--open { opacity: 1; pointer-events: auto; }
.pn {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -48%) scale(0.98);
  width: min(560px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: hidden;
  background: var(--paper);
  border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(15, 20, 16, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 81;
}
.pn--open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.pn__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(245, 240, 230, 0.92);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  z-index: 2;
}
.pn__close:hover { background: var(--cream-2); color: var(--ink); }

.pn__hero {
  background: var(--forest);
  color: var(--cream);
  padding: 28px 28px 22px;
  border-radius: 16px 16px 0 0;
  text-align: center;
}
.pn__hero-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.65);
}
.pn__hero-stat {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.pn__hero-stat-num {
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1;
  color: var(--cream);
  letter-spacing: -0.02em;
}
.pn__hero-stat-label {
  font-family: var(--sans);
  font-size: 14px;
  color: rgba(245, 240, 230, 0.85);
  max-width: 360px;
  text-wrap: pretty;
}
.pn__hero-copy {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(245, 240, 230, 0.88);
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  text-wrap: pretty;
}
.pn__hero-copy b { color: var(--cream); font-weight: 600; }

.pn__body {
  padding: 20px 24px 22px;
}
.pn__title {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.1;
  margin: 0 0 8px;
  text-align: center;
}
.pn__sub {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  text-align: center;
  margin: 0 0 16px;
  text-wrap: pretty;
}
.pn__sub b { color: var(--ink); font-weight: 600; }

.pn__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 520px) {
  .pn__options { grid-template-columns: 1fr; }
}
.pn__opt {
  all: unset;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.pn__opt-cta { margin-top: 4px; }
.pn__opt:hover { border-color: var(--ink-2); }
.pn__opt:active { transform: translateY(1px); }
.pn__opt--partner {
  border-color: var(--terracotta);
  background: rgba(196, 98, 60, 0.04);
}
.pn__opt--partner:hover {
  border-color: var(--terracotta-2);
  background: rgba(196, 98, 60, 0.07);
}
.pn__opt-badge {
  position: absolute;
  top: -10px;
  right: 14px;
  background: var(--terracotta);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.pn__opt-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pn__opt-num {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--sage);
  font-weight: 500;
}
.pn__opt-title {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.pn__opt-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--sage);
  text-transform: uppercase;
}
.pn__opt-meta b { color: var(--ink); font-weight: 600; }
.pn__opt-cta {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 4px;
}
.pn__opt--partner .pn__opt-cta { color: var(--terracotta-2); }

.pn__skip {
  all: unset;
  display: block;
  text-align: center;
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--sage);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  width: 100%;
}
.pn__skip:hover { color: var(--ink-2); }


/* When a flavor row has zero qty, the entire white box is clickable to add
   the first unit. Show a pointer cursor and a subtle hover lift to invite the
   click; once qty>0 the stepper takes over and the row is no longer clickable. */
.flavor-row--empty { cursor: pointer; }
.flavor-row--empty:hover {
  border-color: var(--ink-2);
  background: rgba(27, 51, 41, 0.025);
}

/* Left column wrapper: this IS the sticky element. Sized to viewport
   only — never to the grid row height — so the bottom card occupies just
   the leftover viewport space below the gallery. */
.hero-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 16px;
}
@media (min-width: 981px) {
  .hero-grid { align-items: start; }
  .hero-left {
    position: sticky;
    top: 132px;
    align-self: start;
    /* No viewport-height cap — let the column take its natural height so
       the gallery image keeps its aspect ratio on shorter desktops. */
    overflow: visible;
  }
  .hero-left > .hero-gallery {
    position: static;
    top: auto;
    align-self: auto;
    flex: 0 0 auto;
  }
  .hero-left > .hero-bottom-card {
    /* Natural size — sits just under the gallery. */
    flex: 0 0 auto;
  }
}
@media (max-width: 980px) {
  .hero-left { display: block; }
  .hero-bottom-card { margin-top: 16px; display: block; }
}

/* Cream background applied to the bottom card itself. */
.hero-bottom-card {
  margin: 0;
  background: linear-gradient(165deg, #F5F0E6, #E8DEC6);
  border-radius: 14px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-bottom-card__vp {
  width: 100%;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}


/* Variant of .ph without the diagonal stripe — used where we drop in a
   real image but want a soft cream gradient base (matches carousel 01). */
.ph--no-stripes {
  background: linear-gradient(145deg, #EDE6D6, #F5F0E6 60%, #E2D9C3) !important;
  background-image: linear-gradient(145deg, #EDE6D6, #F5F0E6 60%, #E2D9C3) !important;
}


/* Founder section — two photos bracketing the "No PhDs" note.
   gap matches the visual spacing the user wanted (≈28px) so the three
   blocks in the left column read with even rhythm. */
.founder__photos {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* Strip default margins off the honesty block so the parent gap is the
   sole spacer between its siblings. */
.founder__photos > .founder__honesty {
  margin: 0;
}
.founder__photo {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--cream-2);
}
.founder__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.founder__photo--family { aspect-ratio: 3 / 2; }
.founder__photo--lab    { aspect-ratio: 1 / 1; }

.founder__photo-tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream);
  background: rgba(15, 20, 16, 0.55);
  padding: 5px 8px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}


/* Subtle gradient overlay on the founder photos for a premium feel. */
.founder__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 20, 16, 0) 35%, rgba(15, 20, 16, 0.42) 100%),
    linear-gradient(160deg, rgba(245, 240, 230, 0.08), rgba(15, 20, 16, 0) 40%);
  pointer-events: none;
  z-index: 1;
}
.founder__photo-tag { z-index: 2; }


/* Ingredient tab content fade-in on switch — soft cross-fade with a
   subtle lift so the transition reads as a smooth swap rather than a
   hard flash. */
@keyframes ing-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ing-fade { animation: ing-fade-in 380ms cubic-bezier(0.22, 1, 0.36, 1) both; }


/* Allow height: auto to interpolate so the ingredients card can ease its
   height when items count changes between tabs. Falls back to instant
   snap on browsers without support. */
:root { interpolate-size: allow-keywords; }

.ing-fade > .card {
  transition: height 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* global footer — social icons */
.footer__social {
  display: inline-flex;
  gap: 10px;
  margin-top: 18px;
}
.footer__social-link {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  text-decoration: none;
  transition: color 0.15s;
}
.footer__social-link:hover {
  color: #ffffffb3;
}

/* ─────────────────────────────────────────────────────────────
   BUNDLE PAGE — additions
   ───────────────────────────────────────────────────────────── */

/* trust band */
.bdl-trust {
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 22px 0;
}
.bdl-trust__inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  align-items: center;
}
.bdl-trust__mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.bdl-trust__icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 999px;
  background: rgba(27, 51, 41, 0.06);
  color: var(--forest);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bdl-trust__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.bdl-trust__lbl {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.2;
}
.bdl-trust__sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage);
  margin-top: 2px;
}
@media (max-width: 900px) {
  .bdl-trust__inner { grid-template-columns: repeat(2, 1fr); gap: 18px 24px; }
}

/* 30-day guarantee */
.bdl-guar {
  background: var(--paper);
  color: var(--ink);
  padding: 64px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.bdl-guar__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.bdl-guar__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  max-width: 520px;
}
/* ornate spinning guarantee seal */
.bdl-seal {
  position: relative;
  width: 170px;
  height: 170px;
  color: var(--forest);
  margin-bottom: 18px;
}
.bdl-seal__svg {
  width: 100%;
  height: 100%;
  display: block;
}
.bdl-seal__wave {
  transform-origin: 50% 50%;
}
.bdl-seal__wave--0 { animation: bdlSealSpinR 60s linear infinite; }
.bdl-seal__wave--1 { animation: bdlSealSpin  25s linear infinite; opacity: 0.7; }
.bdl-seal__wave--2 { animation: bdlSealSpinR 15s linear infinite; opacity: 0.5; }
.bdl-seal__wave--3 { animation: bdlSealSpin  43s linear infinite; opacity: 0.3; }
.bdl-seal__arc {
  transform-origin: 0 0;
  animation: bdlSealSpin 30s linear infinite;
}
@keyframes bdlSealSpin  { to { transform: rotate(360deg); } }
@keyframes bdlSealSpinR { to { transform: rotate(-360deg); } }
.bdl-seal__center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--mono);
  letter-spacing: 0.06em;
  line-height: 1.12;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
}
.bdl-seal__center-n {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 5px;
  text-transform: none;
}
.bdl-seal__center-lbl {
  font-size: 12.5px;
  letter-spacing: 0.18em;
  font-weight: 600;
  opacity: 0.85;
}
@media (prefers-reduced-motion: reduce) {
  .bdl-seal__wave,
  .bdl-seal__arc { animation: none; }
}
.bdl-guar__title {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  line-height: 1.08;
  margin: 14px 0 14px;
  color: var(--ink);
}
.bdl-guar__title .italic { font-style: italic; color: var(--sage); }
.bdl-guar__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 540px;
  margin: 0;
}
.bdl-guar__img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 480px;
  margin-left: auto;
  border-radius: 20px;
  overflow: hidden;
  background: var(--cream);
}
.bdl-guar__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 800px) {
  .bdl-guar__inner { grid-template-columns: 1fr; gap: 36px; }
  .bdl-guar__img { max-width: 360px; margin: 0 auto; }
}
@media (max-width: 760px) {
  /* Risk-free-trial card on mobile: pull tight to the top of the
     section, lay text on the left with a smaller seal floated to the
     right so the eyebrow/title/body reads in one block instead of
     starting below a centered badge. */
  .bdl-guar { padding: 16px 0 40px; }
  .bdl-guar__inner { gap: 20px; }
  .bdl-guar__copy {
    display: grid;
    grid-template-columns: 1fr 110px;
    gap: 14px 16px;
    align-items: start;
    max-width: none;
  }
  .bdl-guar__copy .bdl-seal {
    grid-row: 1 / span 4;
    grid-column: 2;
    width: 110px;
    height: 110px;
    margin: 0;
    align-self: start;
    justify-self: end;
  }
  /* keep the textual children in column 1, stacked, starting at the
     top — they share the row with the seal */
  .bdl-guar__copy > .eyebrow,
  .bdl-guar__copy > .bdl-guar__title,
  .bdl-guar__copy > .bdl-guar__body,
  .bdl-guar__copy > .bdl-guar__cta { grid-column: 1; }
  /* Shrink the inner seal text proportionally to the smaller badge */
  .bdl-guar__copy .bdl-seal__center-n  { font-size: 32px; margin-bottom: 2px; }
  .bdl-guar__copy .bdl-seal__center-lbl { font-size: 10px; letter-spacing: 0.14em; }
  /* Tighten the title + body to fit the narrower text column */
  .bdl-guar__title { font-size: 22px; line-height: 1.15; margin: 4px 0 10px; }
  .bdl-guar__body { font-size: 14px; line-height: 1.55; }
}

/* sticky bottom purchase bar */
.sbb {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px -10px rgba(15, 33, 26, 0.15);
  transform: translateY(110%);
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.sbb--show {
  transform: translateY(0);
  pointer-events: auto;
}
.sbb__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px var(--gutter);
}
.sbb__pills {
  display: inline-flex;
  gap: 6px;
  background: var(--cream);
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.sbb__pill {
  all: unset;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1.15;
}
.sbb__pill-lbl {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}
.sbb__pill-sub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage);
  margin-top: 1px;
}
.sbb__pill--on {
  background: var(--forest);
  box-shadow: 0 1px 2px rgba(15, 33, 26, 0.08);
}
.sbb__pill--on .sbb__pill-lbl { color: var(--cream); }
.sbb__pill--on .sbb__pill-sub { color: rgba(245, 240, 230, 0.6); }
.sbb__price {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.sbb__price-strike {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--sage);
  text-decoration: line-through;
}
.sbb__price-now {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
}
.sbb__price-unit {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage);
}
.sbb__cta {
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .sbb__inner { flex-wrap: wrap; gap: 12px; padding: 10px var(--gutter); }
  .sbb__pills { order: 1; width: 100%; justify-content: center; }
  .sbb__price { order: 2; margin-left: 0; }
  .sbb__cta { order: 3; margin-left: auto; }
}

/* minimal footer */
.bdl-mini-footer {
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 18px 0 22px;
}
.bdl-mini-footer__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.bdl-mini-footer__left {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.bdl-mini-footer__copy {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage);
}
.bdl-mini-footer__links {
  display: inline-flex;
  gap: 22px;
  flex-wrap: wrap;
}
.bdl-mini-footer__links a {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.15s;
}
.bdl-mini-footer__links a:hover { color: var(--forest); }
.bdl-mini-footer__pay { display: inline-flex; }

/* mobile: stack the footer rows vertically so each block gets room */
@media (max-width: 760px) {
  .bdl-mini-footer { padding: 20px 0 22px; }
  .bdl-mini-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .bdl-mini-footer__left { gap: 10px; }
  .bdl-mini-footer__links { gap: 14px 20px; }
  .bdl-mini-footer__pay { width: 100%; }
}

/* timeline chart animations */
@keyframes tlChartPulse {
  to { stroke-dashoffset: -100; }
}
.tl-chart__pulse {
  stroke-dashoffset: 0;
  animation: tlChartPulse 3.4s linear infinite;
}

@keyframes tlChartDotPop {
  0%   { transform: scale(1);   }
  3%   { transform: scale(2.4); }
  10%  { transform: scale(1);   }
  100% { transform: scale(1);   }
}
.tl-chart__dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: tlChartDotPop 3.4s linear infinite;
}
.tl-chart__dot--hl {
  /* highlight dots still pop, but from a brighter resting state */
}

@keyframes tlChartPing {
  0%   { r: 3;   opacity: 0.9; }
  100% { r: 11;  opacity: 0;   }
}
.tl-chart__ping {
  transform-origin: center;
  animation: tlChartPing 1.8s ease-out infinite;
}

@keyframes tlChartFinal {
  0%, 100% { r: 3.2; }
  50%      { r: 4.2; }
}
.tl-chart__final {
  animation: tlChartFinal 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .tl-chart__pulse,
  .tl-chart__dot,
  .tl-chart__ping,
  .tl-chart__final { animation: none; }
}

/* ─────────────────────────────────────────────────────────────
   BUNDLES PAGE — MOBILE FIXES
   These rules sit at the end of the file so they win the cascade
   over the desktop defaults defined earlier.
   ───────────────────────────────────────────────────────────── */

/* Math section grid — title left, table right on desktop; stacked on
   mobile so the table can use the full width instead of a cramped
   half-column. */
.bdl-math__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 880px) {
  .bdl-math__grid { grid-template-columns: 1fr; gap: 28px; align-items: start; }
}
@media (max-width: 560px) {
  /* On phones the price-bar visualization is the lede; collapse the
     row layout so name + bar + price stack instead of squeezing into
     three columns side-by-side. */
  .math-row {
    grid-template-columns: 28px 1fr auto;
    gap: 10px 12px;
    padding: 14px 14px;
  }
  .math-row__icon { width: 28px; height: 28px; }
  .math-row__name { font-size: 14px; }
  .math-row__note { font-size: 9.5px; }
  .math-row__cost { font-size: 18px; }
  .math-row__per  { font-size: 10px; }
}

/* Timeline cards — tighten padding & type on phones so the three
   sparkline cards stack without each one feeling overstuffed. */
@media (max-width: 880px) {
  .tl-card { padding: 16px 18px 18px; }
  .tl-card__title { font-size: 19px; margin-bottom: 6px; }
  .tl-card__body { font-size: 13.5px; }
  .tl-chart { margin: 12px 0 14px; }
}

/* Deficit stat block — the unit ("cal / day", "lbs / week") sits
   inline with the number on phones (right after, baseline-aligned);
   the description wraps to its own line below. */
@media (max-width: 900px) {
  .tl-deficit__stat {
    min-height: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 10px;
    padding: 14px 16px 16px;
  }
  .tl-deficit__stat-n  { font-size: 36px; line-height: 1; }
  .tl-deficit__stat-u  {
    margin: 0;
    padding: 0;
    border: 0;
    text-align: left;
  }
  .tl-deficit__stat-lbl {
    flex-basis: 100%;
    margin: 8px 0 0;
    padding: 0;
    border: 0;
    text-align: left;
    font-size: 12.5px;
  }
}

/* FAQ — bundle FAQ section uses a 2-col grid with a sticky label on
   the left.  On mobile it stacks; the label loses its sticky pin so
   it doesn't trap users above the questions. */
@media (max-width: 880px) {
  .bdl-faq__grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .bdl-faq__lede { position: static !important; }
  .faq__item { padding: 16px 0; }
  .faq__q { font-size: 16px; gap: 14px; }
  .faq__a { font-size: 14px; }
}

/* H1 spacing — bundles page sections each open with an `h1.h1`.  On
   mobile the section padding above + auto title margin compounds into
   a lot of dead space.  Tighten the section vertical rhythm. */
@media (max-width: 760px) {
  .bdl-hero      { padding-top: 24px !important; padding-bottom: 12px !important; }
  .bdl-hero .h1  { font-size: clamp(28px, 7vw, 36px); }
  .bdl-math      { padding-top: 36px !important; padding-bottom: 36px !important; }
  .bdl-math .h1  { font-size: clamp(24px, 6vw, 32px); }
  .bdl-faq-wrap  { padding-top: 36px !important; padding-bottom: 36px !important; }
  .bdl-faq-wrap .h1 { font-size: clamp(24px, 6vw, 32px); }
}

/* ═════════════════════════════════════════════════════════════
   SHAKE PAGE — MOBILE PASS
   Comprehensive mobile optimisation for every section of shake.html.
   Sections use sk-* class hooks that wrap inline-styled containers,
   so we override grid columns / gaps / typography here with the
   specificity needed to win against the inline styles (hence the
   liberal use of !important).
   ═════════════════════════════════════════════════════════════ */

/* ── STAT BAND ────────────────────────────────────────────────
   5-col grid of serif numbers collapses to a 2-col grid on phones.
   Drop the inter-cell left borders (they break in wrap layouts)
   and pull the serif scale down so each cell breathes. */
@media (max-width: 760px) {
  .sk-statband { padding: 32px 0 !important; }
  .sk-statband__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px 20px !important;
  }
  .sk-statband__item {
    border-left: 0 !important;
    padding-left: 0 !important;
  }
  /* The serif numbers inline `fontSize: 44` — scale them down. */
  .sk-statband__item > div:first-child {
    font-size: 34px !important;
  }
  /* Last item often goes solo on the third row — span both cols so
     it doesn't look orphaned. */
  .sk-statband__item:nth-child(5) { grid-column: 1 / -1; }
}

/* ── UGC WALL ─────────────────────────────────────────────────
   Heading + meta on mobile: stack neatly. The marquee track itself
   already overflows, no change needed. The bottom 4-stat grid
   becomes a 2x2 with smaller numbers. */
@media (max-width: 760px) {
  .sk-ugcwall { padding: 32px 0 48px !important; }
  .sk-ugcwall__head {
    margin-bottom: 20px !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .sk-ugcwall__head .h2 { font-size: clamp(26px, 6.8vw, 32px); }
  .sk-ugcwall__stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .sk-ugcwall__stat {
    padding: 22px 16px !important;
  }
  /* Cells in 2nd column get the left divider; cells in 2nd row get
     a top divider so the visual structure survives the column drop. */
  .sk-ugcwall__stat:nth-child(2n+1) { border-left: 0 !important; }
  .sk-ugcwall__stat:nth-child(2n)   { border-left: 1px solid var(--line) !important; }
  .sk-ugcwall__stat:nth-child(n+3)  { border-top: 1px solid var(--line); }
  .sk-ugcwall__stat .stat__num { font-size: 40px !important; }
  .sk-ugcwall__stat .stat__lbl { font-size: 10.5px; }
}

/* ── NUTRITION COMPARE ────────────────────────────────────────
   Image-left / table-right grid stacks vertically. Inside the
   comparison card, the 4-column table needs tighter horizontal
   rhythm: label column shrinks, value cells get smaller serif/mono
   so 7 rows × 4 cols fit at 375px without horizontal scroll.
   The "Verified by Third-Party Lab" foot stacks its two halves. */
@media (max-width: 760px) {
  .sk-nutricmp__grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .sk-nutricmp__head {
    grid-template-columns: 1.3fr 0.9fr 0.9fr 0.9fr !important;
    padding: 14px 14px !important;
  }
  .sk-nutricmp__head > div:first-of-type > div:first-child { font-size: 14px !important; }
  .sk-nutricmp__head .mono-sm { font-size: 9.5px; }
  .sk-nutricmp__row {
    grid-template-columns: 1.3fr 0.9fr 0.9fr 0.9fr !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
  }
  /* Serif "biome" value column on mobile — match the new desktop
     treatment (14px serif 600 terracotta from sections.jsx inline). */
  .sk-nutricmp__row > span:nth-child(2) {
    font-size: 14px !important;
  }
  /* Mono comparison columns — keep them readable but compact. */
  .sk-nutricmp__row > span:nth-child(3),
  .sk-nutricmp__row > span:nth-child(4) {
    font-size: 12px !important;
  }
  /* Verified foot — two halves stack at narrow widths so the "tested
     date" text isn't squished into 100px. */
  .sk-nutricmp__verify {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 6px;
    padding: 14px 16px !important;
  }
}

/* ── STANDARDS GRID ───────────────────────────────────────────
   Existing 880 rule drops to 3 cols.  At phone width 3 cols make the
   labels truncate; use 2 cols. */
@media (max-width: 520px) {
  .standards__grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── FOUNDER STORY ─────────────────────────────────────────────
   The existing 880 rule already stacks the grid.  Tighten typography
   so the long "founder" body block doesn't dominate the column. */
@media (max-width: 760px) {
  .founder__body { font-size: 15px; }
}

/* ── INGREDIENTS EXPLORER ─────────────────────────────────────
   The header (eyebrow + h1 + "Full supplement facts" button) is a
   space-between flex that crowds on phones; stack it. The big grid
   becomes 1-col (already does for `minerals`, force it for all).
   The "macro photo" placeholder on the right is hidden — saves a lot
   of vertical scroll on a section that's already content-dense. */
@media (max-width: 760px) {
  .sk-ing__head {
    flex-direction: column;
    align-items: flex-start !important;
    margin-bottom: 24px !important;
    gap: 14px !important;
  }
  .sk-ing__head .h1 { font-size: clamp(28px, 7vw, 36px); }
  .sk-ing__grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* Within the card, the ingredient items go from 2-col → keep 2 but
     tighten padding & font sizes. The "minerals" 3-col view collapses
     to 2 since the screen can't fit 3 thumbs. */
  .sk-ing__items {
    grid-template-columns: 1fr 1fr !important;
  }
  .sk-ing__items .ing-row {
    padding: 12px 12px !important;
    gap: 10px !important;
  }
  /* Drop the right-column hero photo on phones — adds 420px of dead
     space below the items card with no information density gain. */
  .sk-ing__grid > .ph,
  .sk-ing__grid > .ing-hero {
    display: none;
  }
  /* Sourcing note — three-up flex (label · body · button) becomes a
     vertical stack so the button doesn't get crushed to one word per
     line on the right. */
  .sk-ing__source {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 16px 18px !important;
  }
}

/* ── UGC VIDEO BLOCK (Real Results) ───────────────────────────
   The header flex stacks. The video + sidebar grid drops to 1-col so
   the video takes the full width and the BEFORE/AFTER card +
   thumbnail picker stack underneath.  The 4-stat aggregate row at
   the bottom becomes a 2x2 same as the UGC wall stats. */
@media (max-width: 760px) {
  .sk-rr__head {
    flex-direction: column;
    align-items: flex-start !important;
    margin-bottom: 24px !important;
    gap: 8px !important;
  }
  .sk-rr__head .h1 { font-size: clamp(28px, 7vw, 36px); }
  .sk-rr__grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .sk-rr__thumbs {
    /* 2 cols of square thumbs is fine; on very narrow screens we
       could go 1 row of 4 but 2x2 keeps individual thumbs touch-
       friendly. */
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .sk-rr__stats {
    grid-template-columns: repeat(2, 1fr) !important;
    margin-top: 32px !important;
  }
  .sk-rr__stat {
    padding: 22px 16px !important;
  }
  .sk-rr__stat:nth-child(2n+1) { border-left: 0 !important; }
  .sk-rr__stat:nth-child(2n)   { border-left: 1px solid var(--line) !important; }
  .sk-rr__stat:nth-child(n+3)  { border-top: 1px solid var(--line); }
  .sk-rr__stat .stat__num { font-size: 40px !important; }
}

/* ── REVIEWS ──────────────────────────────────────────────────
   Both grids stack at mobile: header (title + rating histogram) goes
   1-col so the histogram bars get full width to actually visualise
   percentages; the review card grid drops from 2 to 1 col so cards
   take the full width and body text gets room to breathe. */
@media (max-width: 760px) {
  .sk-rev__head {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-bottom: 24px !important;
  }
  .sk-rev__head .h1 { font-size: clamp(28px, 7vw, 36px); }
  .sk-rev__grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .sk-rev .review-card {
    padding: 22px !important;
  }
}

/* ── FAQ ──────────────────────────────────────────────────────
   2-col grid (lede sticky-left, questions right) becomes 1 col with
   the lede sitting statically on top so it doesn't trap users above
   the question list as they scroll. */
@media (max-width: 760px) {
  .sk-faq__grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .sk-faq__lede {
    position: static !important;
    top: auto !important;
  }
  .sk-faq__lede .h1 { font-size: clamp(28px, 7vw, 36px); margin-bottom: 14px !important; }
  .sk-faq__lede .body-md { margin-bottom: 16px !important; }
}

/* ── HONESTY BAND ─────────────────────────────────────────────
   980 rule already stacks the two cards.  At 760 the existing
   ── nothing more to do, but tighten the head margin. */
@media (max-width: 760px) {
  .honesty-band__hd { margin-bottom: 22px; }
}

/* ── FINAL CTA ────────────────────────────────────────────────
   The orbs are positioned with `width: 420/520px` and big negative
   offsets — they can cause horizontal scroll on small phones.  Clip
   them and shrink. */
@media (max-width: 760px) {
  .on-forest .h-display { font-size: clamp(36px, 9vw, 56px); }
}

/* ── GLOBAL — prevent any rogue horizontal scroll on phones ───
   A few sections have absolutely-positioned decorative elements
   that can extend past the viewport.  Cap body overflow-x. */
@media (max-width: 760px) {
  /* overflow-x: clip caps horizontal overflow WITHOUT creating a scroll
     container — unlike `hidden`, which breaks position: sticky on the nav. */
  html, body { overflow-x: clip; }
}

/* ── HERO PRESS BAR ───────────────────────────────────────────
   The "As featured in" press logo strip lives below the value-props
   block (.hero-bottom-card).  On desktop the wrapper carries a 96px
   top margin so the section breathes; that gap is too tall on mobile
   where the value-props block is hidden and the previous content
   ends with the "94% of customers" trust line. Tighten it so the
   line above and the press logos below feel evenly spaced. */
@media (max-width: 760px) {
  .hero-press {
    margin-top: 12px !important;
    padding-top: 56px !important;
    padding-bottom: 4px;
  }
  .hero-press__note { display: none; }
}

/* ── HERO — mobile reflow ─────────────────────────────────────
   On mobile, surface the eyebrow ABOVE the gallery (so the brand
   line reads first), drop the value-props "bottom card" entirely,
   and pull the View Nutrition link up to sit right after the
   lead-in paragraph (a mobile-only copy lives inside .hero-side,
   the desktop copy under the gallery is hidden). */
.hero-mobile-eyebrow { display: none; }
.hero-mobile-nutri   { display: none; }
@media (max-width: 980px) {
  .hero-grid {
    display: flex;
    flex-direction: column;
    gap: 16px !important;
    /* Base .hero-grid sets `align-items: start` for the desktop
       2-col layout. In mobile flex-column that turns the cross-axis
       (horizontal) into shrink-to-fit, so any wide descendant —
       e.g. a flavor row whose stepper expands when qty>0 — drags
       the whole column wider than the viewport. Force stretch so
       every child fills the column's actual width. */
    align-items: stretch !important;
  }
  /* Defensively cap every descendant block's width so a stray
     min-content node can't push the column wider. */
  .hero-grid > * { max-width: 100%; min-width: 0; }
  .hero-mobile-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    order: -1;
    margin-bottom: 0;
  }
  /* Hide the "No. 01" + its preceding divider line on mobile — keep
     only the brand/tagline eyebrow. */
  .hero-mobile-eyebrow__no { display: none; }
  .hero-mobile-eyebrow > span:nth-child(2) { display: none; }
  /* Hide the desktop eyebrow inside .hero-side on mobile */
  .hero-desktop-eyebrow { display: none !important; }
  /* Hide the desktop View Nutrition button under the gallery */
  .hero-gallery__nutri { display: none !important; }
  /* Surface the mobile View Nutrition button below the lead-in */
  .hero-mobile-nutri {
    display: inline-flex !important;
    margin-bottom: 24px;
  }
  /* Drop the value-props bottom card entirely on mobile */
  .hero-bottom-card { display: none !important; }
}

/* ── FOUNDER STORY — fix "How this started" overflow ──────────
   The 4-col `.founder__stats` grid (28px serif numbers + multi-line
   labels) overflows on phones.  Drop to 2 cols and tighten the
   in-cell padding so it fits cleanly at 375px. */
@media (max-width: 760px) {
  .founder__stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px 12px;
  }
  .founder__stats > div {
    padding: 0 0 0 12px !important;
  }
  /* Restore the column dividers per row (odd cells get no border, even
     cells get a left border — matches the 4-col logic at 2 cols). */
  .founder__stats > div:nth-child(2n+1) { border-left: 0 !important; padding-left: 0 !important; }
  .founder__stats > div:nth-child(n+3)  { padding-top: 12px; border-top: 1px solid var(--line-soft); }
  .founder__stats-n { font-size: 24px !important; }
  /* The founder quote also runs slightly large on narrow phones; the
     clamp() already lower-bounds at 28px which is fine but tighten
     the line-height a touch. */
  .founder__quote { line-height: 1.15; }
  /* Partner grid: 880 rule drops to 2 cols. At 380 the partner-loc
     gets cramped — push to single column on small phones. */
  .founder__partner { min-height: 76px; }
}

/* ── INGREDIENTS EXPLORER — items become single-column with
   horizontal banner image on top of each row ────────────────── */
@media (max-width: 760px) {
  /* Hide the "Full supplement facts" button on mobile — the dedicated
     nutrition link on the hero already covers this CTA, and the
     button was crowding the section header. */
  .sk-ing__factsbtn { display: none !important; }

  /* Single-column rows with image on the LEFT (portrait/vertical
     shape) and text on the right.  This gives ingredient names + the
     role description a wide, comfortable read column without the
     image taking the full width above each row. */
  .sk-ing__items {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
  }
  .sk-ing__items .ing-row {
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 14px !important;
    border-left: 0 !important;
    /* Reset all per-row borders set inline by the desktop 2-col grid
       logic — they assume row-0 items have no top border (because
       they were in the first row of a 2-col layout). In a 1-col
       mobile stack, every row except the first needs a divider. */
    border-top: 0 !important;
  }
  .sk-ing__items .ing-row + .ing-row {
    border-top: 1px solid var(--line-soft) !important;
  }
  /* Override the inline `.ing-thumb` to be a portrait image column
     on the left. Width is fixed at 92px so the right column gets the
     bulk of the row; aspect-ratio 3/4 keeps the image cropping
     consistent across ingredients. */
  .sk-ing__items .ing-thumb {
    width: 92px !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    flex-shrink: 0 !important;
    border-radius: 8px;
    padding: 0 !important;
    align-items: stretch !important;
  }
  /* Right-hand text column stretches & lets long roles wrap cleanly. */
  .sk-ing__items .ing-row > div:last-child {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .sk-ing__items .ing-thumb::after { display: none; }
  .sk-ing__items .ing-thumb__lbl {
    align-self: center;
    margin: auto;
  }
}

/* ── FLAVOR ROW — "BEST VALUE" badge floats to top border on mobile ─
   The Starter Pack row tucks its badge inline next to the product
   name on desktop.  On phones the inline pill crowds the name; pull
   it onto the row's top border in the same visual language the
   bundle cards use ("Most popular · save 46%"). */
@media (max-width: 760px) {
  .flavor-row .flavor-row__pack-badge {
    position: absolute;
    top: -10px;
    right: 16px;
    z-index: 2;
    padding: 5px 10px;
    background: var(--terracotta);
    color: var(--cream);
    border-radius: 999px;
    font-size: 9px;
    letter-spacing: 0.14em;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(15, 20, 16, 0.12);
  }
  /* Give the row a touch more top margin so the floated badge has
     room to breathe above it without overlapping the previous row. */
  .flavor-row:has(.flavor-row__pack-badge) {
    margin-top: 14px;
  }
  /* Hide the tasting-notes subline on the two flavor rows. The
     Starter Pack row's "Both flavors" subline stays — it carries
     functional info, not a flavor description. */
  .flavor-row__sub--notes { display: none; }
}

/* ── STICKY ATC (bottom bar) ──────────────────────────────────
   At 375px the bar's thumb + title + price + button row crowds. Drop
   the thumb on phones (the title carries enough context), tighten
   the gap, and shrink the price + title typography. */
@media (max-width: 560px) {
  .satc__inner { gap: 12px; padding: 10px var(--gutter); }
  .satc__thumb { display: none; }
  .satc__title { font-size: 16px; }
  .satc__sub { font-size: 10px; }
  .satc__price { font-size: 20px; }
  .satc__price-strike { font-size: 10px; margin-right: 5px; }
}


/* ─────────────────────────────────────────────────────────────
   SHAKE COMPARE — brand-confident treatment to match the
   metabolism page's MetabCompare. Adds a soft terracotta-tinted
   vertical band behind the Biome Secret column for the full
   height of the card, italicizes the biome value cells (editorial
   assertion), and ghosts the competitor columns so the table
   reads as a quiet declaration rather than a head-to-head spec
   sheet. Inline styles on the row spans are overridden via
   selector specificity (no !important needed).
   ───────────────────────────────────────────────────────────── */
.sk-nutricmp__card {
  position: relative;
  overflow: hidden;
  /* The head bar + rows carry their own 22px insets and must reach the card
     edges (cream header bar + full-height glow band), so the card itself has
     no padding — the prototype set this inline (style={{padding:0}}); without
     it the base .card's 28px boxes the table in. */
  padding: 0;
}
/* Glow band — spans the full card height behind column 2 (Biome
   Secret). Grid is 1.4fr 1fr 1fr 1fr (4.4 units total), so col 2
   sits between 31.82% and 54.55%. The padding inside rows (22px
   each side) means the visual cell sits a touch inside those
   numbers; the band is intentionally a little wider than the cell
   to read as a column tint. */
.sk-nutricmp__card::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 31.82%;
  right: 45.45%;
  background: linear-gradient(180deg, rgba(196,98,60,0.06), rgba(196,98,60,0.10));
  pointer-events: none;
  z-index: 0;
}
.sk-nutricmp__head, .sk-nutricmp__row, .sk-nutricmp__verify {
  position: relative;
  z-index: 1;
}

/* Biome value column — italic serif so the cells read as editorial
   assertion, not just a stat. Selectors target the 2nd <span> in
   each row (col 2). */
.sk-nutricmp__row > span:nth-child(2) {
  font-style: italic !important;
  font-weight: 600 !important;
  color: var(--terracotta) !important;
}

/* Competitor cells — ghosted to ink-at-42% so the table no longer
   reads as a "they vs us" argument. */
.sk-nutricmp__row > span:nth-child(3),
.sk-nutricmp__row > span:nth-child(4) {
  color: rgba(15, 33, 26, 0.42) !important;
}
/* Competitor brand labels in the header row — same ghost treatment. */
.sk-nutricmp__head > div:nth-child(3),
.sk-nutricmp__head > div:nth-child(4) {
  opacity: 0.6;
}


/* ─────────────────────────────────────────────────────────────
   SHAKE STATBAND — hero stat + 4 supporting marks. Big serif
   italic numeral framed by hairlines as the first brand-confident
   anchor right after the hero. Same editorial language used in
   MetabStatBand / BloatStatBand for cross-page coherence.
   ───────────────────────────────────────────────────────────── */
.sk-statband__hero {
  display: grid;
  grid-template-columns: minmax(220px, 26vw) 1fr;
  gap: 32px;
  align-items: baseline;
  /* No top border — the section flows from the hero above and the
     headline number should anchor right at the top of the section
     for vertical balance. Bottom hairline separates from the
     supporting marks row. */
  padding: 0 0 40px;
  border-bottom: 1px solid rgba(245,240,230,0.16);
}
.sk-statband__hero-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(96px, 13vw, 168px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--cream);
}
.sk-statband__hero-lbl {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.18;
  color: var(--cream);
  letter-spacing: -0.01em;
  align-self: end;
  padding-bottom: 14px;
}
.sk-statband__hero-lbl em { font-style: italic; }
.sk-statband__hero-sub {
  grid-column: 2 / -1;
  color: rgba(245,240,230,0.55);
  margin-top: 6px;
}

.sk-statband__support {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 56px;
  margin-top: 36px;
}
.sk-statband__support-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sk-statband__support-num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  color: var(--cream);
  letter-spacing: -0.025em;
}
.sk-statband__support-lbl {
  font-family: var(--sans);
  font-size: 15px;
  color: rgba(245,240,230,0.78);
  margin-top: 4px;
}

@media (max-width: 760px) {
  .sk-statband__hero {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 22px 0 28px;
  }
  .sk-statband__hero-lbl { padding-bottom: 0; }
  .sk-statband__hero-sub { grid-column: 1 / -1; }
  .sk-statband__support { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* ─────────────────────────────────────────────────────────────
   HONESTY BAND — magazine pull-quote spread. The h2 becomes the
   visual centerpiece (huge serif italic) and the two cards demote
   to quieter supporting context beneath.
   ───────────────────────────────────────────────────────────── */
.honesty-band__hd {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 56px;
}
.honesty-band__hd h2 {
  font-family: var(--serif) !important;
  font-size: clamp(38px, 5vw, 68px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.02em !important;
  margin: 18px auto 0 !important;
  max-width: 760px !important;
  text-wrap: balance;
}
.honesty-band__hd h2 .italic {
  font-style: italic;
}

/* Subtle hairline above + below the headline to frame it as a
   pull-quote moment. */
.honesty-band__hd::before,
.honesty-band__hd::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  background: var(--line);
  margin: 0 auto;
}
.honesty-band__hd::before { margin-bottom: 24px; }
.honesty-band__hd::after  { margin-top: 32px; }

/* Supporting cards — slightly muted so they read as context for
   the pull-quote above, not equal-weight feature panels. */
.honesty-card { opacity: 0.96; }


/* ─────────────────────────────────────────────────────────────
   BUNDLEMATH2 — editorial brand-confident rebuild of the math
   section. Centerpiece price in big serif italic, supporting
   strikethrough + savings line, then a quiet ghosted comparison
   list of competitors below.
   ───────────────────────────────────────────────────────────── */
.bdl-math2__head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}
.bdl-math2__title {
  margin: 14px 0 0;
  font-size: clamp(28px, 2.8vw, 38px);
}
.bdl-math2__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 0 40px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 0 auto 48px;
  max-width: 760px;
}
.bdl-math2__hero-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(72px, 10vw, 132px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--terracotta);
}
.bdl-math2__hero-sub {
  color: var(--sage);
  margin-top: 8px;
}
.bdl-math2__hero-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
}
.bdl-math2__hero-meta-strike {
  color: var(--sage);
  text-decoration: line-through;
}
.bdl-math2__hero-meta-dot { color: var(--sage); opacity: 0.6; }
.bdl-math2__hero-meta-save {
  color: var(--terracotta);
  font-weight: 700;
}

.bdl-math2__compare {
  max-width: 760px;
  margin: 0 auto;
}
.bdl-math2__compare-hd {
  display: block;
  color: var(--sage);
  margin-bottom: 14px;
  text-align: left;
}
.bdl-math2__compare-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  color: rgba(15, 33, 26, 0.5);
}
.bdl-math2__compare-row:last-child { border-bottom: 0; }
.bdl-math2__compare-lbl {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bdl-math2__compare-name {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.bdl-math2__compare-note {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(15, 33, 26, 0.4);
}
.bdl-math2__compare-cost {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  text-align: right;
}

.bdl-math2__foot {
  margin: 48px auto 0;
  max-width: 600px;
  text-align: center;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: balance;
}
.bdl-math2__foot strong { color: var(--terracotta); font-weight: 600; }

@media (max-width: 760px) {
  /* Compress the entire math section vertically on mobile —
     desktop pads generously (80 / 48 / 32 / 48 / 14 / 48), but
     all those gaps stack uncomfortably on narrow viewports. */
  .bdl-math2 { padding-top: 36px !important; padding-bottom: 36px !important; }
  .bdl-math2__head { margin-bottom: 22px; }
  .bdl-math2__hero { padding: 18px 0 22px; margin-bottom: 22px; }

  /* Meta row stacks cleanly on mobile — the "·" inline separator
     and the long "~$5 cheaper than what you'd skip it for"
     wrapped awkwardly. Strike sits above a single tighter
     savings line, no dot. */
  .bdl-math2__hero-meta {
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
  }
  .bdl-math2__hero-meta-dot { display: none; }

  .bdl-math2__compare-hd { margin-bottom: 8px; }
  .bdl-math2__compare-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
  .bdl-math2__compare-cost { text-align: left; }

  .bdl-math2__foot { margin-top: 24px; }
}
@media (max-width: 760px) {
  .bdl-math2__hero { padding: 18px 0 22px; }
  .bdl-math2__compare-row { grid-template-columns: 1fr; gap: 4px; }
  .bdl-math2__compare-cost { text-align: left; }
}


/* ─────────────────────────────────────────────────────────────
   TL-DEFICIT — magazine pull-quote rebuild. Big serif italic
   customer quote anchors the section, with the 3 supporting
   stats demoted to a quieter row beneath. Replaces the old
   3-stat grid that read as a data dashboard.
   ───────────────────────────────────────────────────────────── */
.tl-deficit__quote {
  text-align: left;
  padding: 8px 0 0;
}
.tl-deficit__quote blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--cream);
  text-wrap: balance;
}
.tl-deficit__quote blockquote .italic { font-style: italic; }
.tl-deficit__attrib {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 22px;
}
.tl-deficit__attrib-name {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--cream);
}
.tl-deficit__attrib-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.58);
}
.tl-deficit__supports {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px dashed var(--line-on-dark);
}
.tl-deficit__support {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tl-deficit__support-n {
  font-family: var(--serif);
  font-size: clamp(28px, 2.8vw, 36px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.tl-deficit__support-lbl {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(245, 240, 230, 0.72);
}
@media (max-width: 900px) {
  .tl-deficit__supports { grid-template-columns: 1fr; gap: 14px; }
}


/* Timeline card bundle name — pinned to the bottom-left of each
   card via margin-top: auto so cards always align footer-to-
   footer regardless of body-copy length. */
.tl-card__bundle {
  display: block;
  margin-top: auto;
  padding-top: 14px;
  color: rgba(245, 240, 230, 0.58);
  letter-spacing: 0.14em;
}


/* Mobile sticky bundle bar — hide the triple tier picker pills.
   The full-screen sticky bar gets too cramped at narrow widths;
   instead the bar locks to the "Build New Habits" tier (set as
   the default in shake-bundle.jsx) and the user can still pick a
   different tier from the in-page card grid above. */
@media (max-width: 760px) {
  .sbb__pills { display: none; }
}


/* ─────────────────────────────────────────────────────────────
   TRUSTPILOT CARD — Biome Secret on Trustpilot summary panel.
   ───────────────────────────────────────────────────────────── */
.ptp__card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 32px 32px;
  max-width: 720px;
  margin: 0 auto;
}
.ptp__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: transparent;
  padding: 0;
}
.ptp__right {
  display: flex;
  flex-direction: column;
}
.ptp__brand {
  display: inline-flex;
  align-items: center;
  transform: scale(0.7);
  transform-origin: center;
  /* Compensate for the visual whitespace that scale(0.7) leaves
     around the logo's bounding box so it nestles up against the
     "ON" label without a gap. */
  margin: 0 -10px;
}
.ptp__on {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.14em;
}
.ptp__tp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  font-weight: 700;
}
.ptp__body {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  grid-template-areas:
    "score head"
    "score bars";
  gap: 0 48px;
  align-items: center;
}
.ptp__score { grid-area: score; }
.ptp__head  { grid-area: head; }
.ptp__bars  { grid-area: bars; }
.ptp__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ptp__score-n {
  font-family: var(--sans);
  font-size: 56px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.ptp__score-stars {
  display: inline-flex;
  gap: 2px;
}
.ptp__star { display: inline-flex; }
.ptp__score-lbl {
  color: #00873F;
  letter-spacing: 0.16em;
  font-weight: 700;
}
.ptp__bars {
  display: grid;
  gap: 8px;
}
.ptp__bar-row {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 14px;
}
.ptp__bar-star {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  line-height: 1;
  height: 14px;
}
.ptp__bar-star svg {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.ptp__bar-star > span {
  display: inline-block;
  line-height: 1;
  transform: translateY(1px);
}
.ptp__bar-track {
  height: 8px;
  background: rgba(15, 33, 26, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.ptp__bar-fill {
  display: block;
  height: 100%;
  background: #006B3A;
  border-radius: 999px;
}
.ptp__bar-pct {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-2);
  text-align: right;
}
@media (max-width: 760px) {
  /* Make the TP card a full-width white band so it visually
     separates from the cream section above. Zero out the section
     padding too so there's no cream gap on either side of the band. */
  section.ptp { padding-top: 0 !important; padding-bottom: 0 !important; }
  .ptp .container { padding-left: 0; padding-right: 0; }
  .ptp__card {
    border: none;
    border-radius: 0;
    max-width: none;
    padding: 28px 18px;
    background: var(--paper);
  }
  .ptp__body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "score"
      "bars";
    gap: 16px 0;
  }
  .ptp__head { gap: 10px; margin-bottom: 0; }
  .ptp__tp { font-size: 16px; }
  .ptp__score-n { font-size: 44px; }
  .ptp__score-stars { gap: 1px; }
  .ptp__star svg { width: 28px; height: 28px; }
  .ptp__bar-row { grid-template-columns: 36px 1fr 38px; gap: 10px; }
}
section.ptp { padding-top: 24px !important; }
@media (min-width: 761px) {
  section.ptp { padding-top: 32px !important; }
}


/* Mobile bundle-card ordering — same sequence as the shake bundle
   page uses (most-popular → best-value → trying-out). Applied to
   the 3 new bundle landing pages by their tier ids. */
@media (max-width: 760px) {
  .bdl-grid .bdl-card[data-bundle-id="metab-habits"]    { order: 1; }
  .bdl-grid .bdl-card[data-bundle-id="metab-transform"] { order: 2; }
  .bdl-grid .bdl-card[data-bundle-id="metab-trying"]    { order: 3; }

  .bdl-grid .bdl-card[data-bundle-id="bloat-habits"]    { order: 1; }
  .bdl-grid .bdl-card[data-bundle-id="bloat-transform"] { order: 2; }
  .bdl-grid .bdl-card[data-bundle-id="bloat-trying"]    { order: 3; }

  .bdl-grid .bdl-card[data-bundle-id="aio-habits"]    { order: 1; }
  .bdl-grid .bdl-card[data-bundle-id="aio-transform"] { order: 2; }
  .bdl-grid .bdl-card[data-bundle-id="aio-trying"]    { order: 3; }
}


/* Strike variant of the unitsCaption position — used on AIO bundle
   cards where we surface a prominent crossed-out RRP + "SAVE $X"
   callout instead of the trio count. */
.bdl-card__meals--strike {
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.bdl-card__meals-strike {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  line-height: 1;
}
.bdl-card__meals-save {
  color: var(--terracotta);
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  background: rgba(196,98,60,0.10);
  border-radius: 999px;
}
@media (max-width: 760px) {
  .bdl-card__meals-strike { font-size: 22px; }
  .bdl-card__meals--strike { align-items: flex-start; }
}


/* Footer disclaimer — sits above the legal/copyright row in a
   soft outlined panel so the FDA + endorsement boilerplate reads
   as required compliance copy without overwhelming the footer. */
.footer__disclaimer {
  margin-top: 32px;
  padding: 22px 26px;
  border: 1px solid rgba(245, 240, 230, 0.14);
  border-radius: 12px;
  background: rgba(245, 240, 230, 0.02);
}
.footer__disclaimer-eb {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: rgba(245, 240, 230, 0.55);
  margin-bottom: 12px;
}
.footer__disclaimer p {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(245, 240, 230, 0.62);
  margin: 0;
  text-wrap: pretty;
}
@media (max-width: 760px) {
  .footer__disclaimer { padding: 18px 20px; margin-top: 24px; }
  .footer__disclaimer p { font-size: 12px; line-height: 1.65; }
}


/* Trustpilot section CTA — small inline button below the card that
   links to Biome Secret's Trustpilot review collector page. Sits
   centered inside the card, brand-y but clearly external. */
.ptp__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 28px auto 0;
  padding: 12px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
  align-self: center;
}
.ptp__card { display: flex; flex-direction: column; align-items: center; }
.ptp__body { width: 100%; }
.ptp__cta:hover {
  border-color: var(--ink-2);
  background: rgba(0,0,0,0.03);
  transform: translateY(-1px);
}
.ptp__cta-lbl {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.ptp__cta-tp { display: block; }
.ptp__cta-arrow { color: var(--ink-2); }
@media (max-width: 480px) {
  .ptp__cta { padding: 10px 14px; gap: 8px; }
  .ptp__cta-lbl { font-size: 12.5px; }
  .ptp__cta-tp { width: 72px; }
}

/* ===== nutrition panel chrome (.allin-nfm*) — from prototype bundle.css; base .nfm/.nf live above ===== */
.allin-nfm__hd {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding-top: 16px;
  padding-bottom: 14px;
}
.allin-nfm__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.allin-nfm__tab {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-2);
  background: transparent;
  overflow: hidden;
}
.allin-nfm__tab:hover:not(.allin-nfm__tab--on) {
  color: var(--ink);
  border-color: var(--ink-2);
}
/* Activation animates via @keyframes, not transitions: class-toggle transitions freeze
   at their start values in this theme when the toggle shares a tick with heavy DOM
   writes (the drawer rebuilds its facts table on every switch). fill:both also pins
   the end values, immunising the pill against any stale frozen-transition state. */
@keyframes nfm-tab-on {
  from { background: transparent; color: var(--ink-2); border-color: var(--line); }
}
@keyframes nfm-img-pop {
  from { transform: translateY(10px) scale(1); }
}
.allin-nfm__tab--on {
  background: var(--forest);
  color: var(--cream);
  border-color: var(--forest);
  animation: nfm-tab-on .15s ease both;
}
/* Tiny product photo inside each tab — anchored to the right with a
   small translate-y so it visually "pops under" the pill, echoing
   how the daily-protocol cards anchor product imagery. */
.allin-nfm__tab-img {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  overflow: visible;
}
.allin-nfm__tab-img img {
  width: 100%;
  height: auto;
  display: block;
  /* Default already sits in a noticeable "down" position so the
     image visibly pops under the pill edge. Active tab nudges it
     a touch further down for press feedback. */
  transform: translateY(10px);
  pointer-events: none;
}
.allin-nfm__tab--on .allin-nfm__tab-img img {
  transform: translateY(13px) scale(1.06);
  animation: nfm-img-pop .18s cubic-bezier(.22, 1, .36, 1) both;
}

/* Secondary flavor toggle — only rendered when the Shake tab is
   active. Smaller, less prominent than the top-level tabs so the
   visual hierarchy reads as "pick a product, then pick a flavor". */
.allin-nfm__flavors {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: rgba(15,33,26,0.05);
  border-radius: 999px;
  align-self: flex-start;
}
.allin-nfm__flavor {
  all: unset;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink-2);
  transition: all .15s ease;
}
.allin-nfm__flavor:hover { color: var(--ink); }
.allin-nfm__flavor--on {
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15,33,26,0.08);
}

.allin-nfm__x {
  all: unset;
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 10px;
  cursor: pointer;
  color: var(--ink-2);
}
.allin-nfm__body { padding-top: 32px; }
.allin-nfm__h { font-family: var(--serif); font-weight: 500; }
/* Section-heading size/rhythm variants for the nutrition panel (was inline). */
.allin-nfm__h--xl { font-size: 32px; margin-bottom: 18px; }
.allin-nfm__h--lg { font-size: 28px; margin-top: 44px; margin-bottom: 14px; }
.allin-nfm__h--md { font-size: 22px; margin-top: 36px; margin-bottom: 10px; }
.allin-nfm__h--sm { font-size: 22px; margin-top: 28px; margin-bottom: 10px; }
/* Body copy inside the panel (ingredients / directions / allergens / warning). */
.allin-nfm__prose { line-height: 1.7; }
.allin-nfm__prose--muted { line-height: 1.6; color: var(--ink-2); }
/* Per-row mono note under a supplement-facts line. */
.nf__row-note {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--sage);
  letter-spacing: 0.04em;
  margin-top: 2px;
  line-height: 1.5;
  text-transform: none;
}
/* Serving-size value sits semibold, not the browser-default bold. */
.nf__top strong { font-weight: 600; }
/* Context pill (caffeine / CFU) shared by the metab + bloat supplement-facts panels. Ported from metab.css .metab-facts__pill. */
.metab-facts__pill {
  margin-top: 22px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  background: var(--cream);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Trust block (icon + title + subtext) — was inline. */
.allin-nfm__trust-icon { color: var(--forest); }
.allin-nfm__trust-title { font-family: var(--serif); font-size: 19px; font-weight: 500; }
.allin-nfm__trust-sub { margin-top: 4px; }
.allin-nfm__pill {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(196,98,60,0.06);
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink);
}
.allin-nfm__trust {
  margin-top: 32px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 10px;
  display: flex;
  gap: 16px;
  align-items: center;
}

@media (max-width: 600px) {
  .allin-nfm__tabs { gap: 4px; }
  .allin-nfm__tab { font-size: 12px; padding: 5px 9px; }
}


/* Hide the tab product images on mobile — the pill is already
   tight at narrow widths and the images become visual noise. */
@media (max-width: 760px) {
  .allin-nfm__tab-img { display: none; }
  .allin-nfm__tab { padding-left: 14px; }
}

/* ── Base reconciliation (until the declutter pass removes Dawn base.css): the bespoke
   design owns the body + heading classes, beating Dawn's .gradient / .h0–.h5 class rules. ── */
body, body.gradient { background: var(--surface); color: var(--ink); font-family: var(--sans); }

/* Typography codification — Dawn's inline `body { letter-spacing: 0.06rem }` (≈0.6px)
   leaks into ALL text, and base.css gives headings a loose ~1.3 line-height. Restore the
   prototype's intent: body/paragraph tracking is normal; serif headings are tight
   (line-height 1.04, letter-spacing -0.01em); the display size is tighter still. These
   target both the element tags AND the .h* classes so they win whether the markup uses
   <h2> or a <div class="h2">. */
body, body.gradient,
p, .body-lg, .body-md, .body-sm { letter-spacing: normal; }
h1, h2, h3, h4, h5, h6,
.h-display, .h1, .h2, .h3, .h4, .h5 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.h-display { line-height: 0.98; letter-spacing: -0.02em; }

/* Dawn base.css gives every <blockquote> a left rule + indent
   (border-left: 0.2rem solid; padding-left: 1rem, 1.5rem on wide screens) that the design
   never uses — bespoke pull-quotes are styled per component, never with a bordered indent.
   Zero it globally so the leak can't surface on any current or future page. Component
   selectors (.metab-horm__quote, .bp__body blockquote, …) keep their own treatment at
   higher specificity; this only catches blockquotes that would otherwise inherit Dawn's. */
blockquote { border-left: 0; padding-left: 0; }

/* ===== Legal / policy layout — shared by /pages/legal (biome-legal) AND every
   /policies/* page (wrapped in theme.liquid). Single source of truth. ===== */
.lg-banner { background: var(--surface); border-bottom: 1px solid var(--line-soft); padding: 52px 0 56px; text-align: center; }
.lg-banner__title { font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 6vw, 68px); line-height: 1; letter-spacing: -0.02em; color: var(--ink); margin: 14px 0 0; }

.lg-wrap { padding-top: 56px; padding-bottom: 84px; }
.lg-grid { display: grid; grid-template-columns: 232px 1fr; gap: 64px; align-items: start; }

.lg-side { position: sticky; top: 112px; }
.lg-nav { display: flex; flex-direction: column; gap: 2px; }
.lg-nav__link { appearance: none; background: none; border: none; text-align: left; text-decoration: none; display: block; font-family: var(--sans); font-size: 15.5px; font-weight: 500; color: var(--ink-2); padding: 10px 14px; border-radius: 9px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.lg-nav__link:hover { background: rgba(27, 51, 41, 0.05); color: var(--ink); }
.lg-nav__link--active, .lg-nav__link--active:hover { background: var(--forest); color: var(--cream); font-weight: 600; }

.lg-side__help { margin-top: 28px; padding: 20px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--paper); }
.lg-side__help-t { font-family: var(--sans); font-size: 14.5px; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.lg-side__help-p { font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--ink-2); margin: 0 0 12px; }
.lg-side__help-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--forest); text-decoration: none; }
.lg-side__help-link svg { width: 15px; height: 15px; transition: transform 0.15s ease; }
.lg-side__help-link:hover svg { transform: translateX(3px); }

.lg-main { max-width: 760px; }
.lg-doc__updated { display: inline-block; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--sage); text-transform: uppercase; margin-bottom: 14px; }
.lg-rte { font-family: var(--sans); }
.lg-rte > :first-child { margin-top: 0; }
.lg-rte h2 { font-family: var(--sans); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); margin: 34px 0 12px; }
.lg-rte h3 { font-family: var(--sans); font-weight: 700; font-size: 16px; color: var(--ink); margin: 24px 0 10px; }
.lg-rte p { font-family: var(--sans); font-size: 15.5px; line-height: 1.62; color: var(--ink-2); margin: 0 0 12px; text-wrap: pretty; }
.lg-rte p:first-of-type { font-size: 17px; line-height: 1.6; color: var(--ink); }
.lg-rte ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.lg-rte ul li { position: relative; padding-left: 22px; font-family: var(--sans); font-size: 15.5px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.lg-rte ul li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }
.lg-rte h4, .lg-rte h5, .lg-rte h6 { font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: 0; color: var(--ink); margin: 22px 0 8px; }
.lg-rte ol { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 8px; }
.lg-rte ol li { font-family: var(--sans); font-size: 15.5px; line-height: 1.6; color: var(--ink-2); padding-left: 4px; }
.lg-rte a { color: var(--forest); text-decoration: underline; }

/* /policies/* pages: Shopify's default markup rendered inside our chrome — hide its
   duplicate title (our banner shows it) and let .lg-rte style the body text. */
.lg-main .shopify-policy__title { display: none; }
.lg-main .shopify-policy__container > :first-child { margin-top: 0; }

@media (max-width: 820px) {
  .lg-grid { grid-template-columns: 1fr; gap: 28px; }
  .lg-side { position: static; }
  .lg-nav { flex-direction: row; flex-wrap: wrap; gap: 8px; padding-bottom: 20px; border-bottom: 1px solid var(--line-soft); }
  .lg-nav__link { border: 1px solid var(--line-soft); padding: 8px 14px; font-size: 14px; }
  .lg-nav__link--active { border-color: var(--forest); }
  .lg-side__help { display: none; }
  .lg-wrap { padding-top: 36px; }
}

/* ─────────────────────────────────────────────────────────────
   Shared bundle-picker + sticky-bar refinements (apply to all
   bundle pages; previously these lived only in the shake-bundles
   section so the other pages rendered unstyled/leaked variants).
   ───────────────────────────────────────────────────────────── */
/* Big "now" price in picker summaries (the shake section carried a local copy). */
.fp-modal__line-now { font-family: var(--sans); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
/* Plan caption under the picker CTA (was styled only in the shake section, so the
   AIO picker rendered it bare). */
.fp-modal__caption { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; color: var(--sage); margin-top: 12px; }
/* Struck RRP figures in picker summary lines (was also shake-section-local). */
.fp-modal__line-strike { font-family: var(--mono); font-size: 13px; color: var(--sage); text-decoration: line-through; }

@media (max-width: 760px) {
  /* The AIO picker follows the shared fp-modal mobile treatment (hidden intro,
     compact single-line title, summary re-ordered below the CTA, GIFT word hidden)
     with one structural exception: its itemised summary lines keep their product
     labels — hiding them (the shake picker treatment) leaves orphaned prices. */
  .fp-modal--aio .fp-modal__line-product { display: inline; }
}

/* Sticky bundle bar — single-line pills (the design's two-line .sbb__pill variant
   above resets text colour via all:unset; double the class so these win). Shared by
   all four bundle pages. */
.sbb__pill.sbb__pill { all: unset; cursor: pointer; display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.sbb__pill--on.sbb__pill--on { background: var(--forest); color: var(--cream); }
.sbb__price { margin-left: auto; display: inline-flex; align-items: baseline; gap: 8px; }
.sbb__price-strike { font-family: var(--mono); font-size: 12px; color: var(--sage); text-decoration: line-through; }
.sbb__price-now { font-family: var(--sans); font-size: 24px; font-weight: 700; }
.sbb__price-unit { font-family: var(--sans); font-size: 13px; color: var(--sage); }
.sbb__cta { flex-shrink: 0; }
@media (max-width: 900px) {
  .sbb__inner { flex-wrap: wrap; gap: 10px; }
  .sbb__pills { order: 1; width: 100%; justify-content: center; }
  .sbb__price { order: 2; margin-left: 0; }
  .sbb__cta { order: 3; margin-left: auto; }
}
@media (max-width: 760px) {
  /* Design hides the tier pills on mobile (too cramped) — the bar locks to the
     selected tier; tiers stay pickable from the in-page card grid. Single row. */
  .sbb__pills { display: none; }
  .sbb__inner { flex-wrap: nowrap; gap: 14px; }
  /* Price reads from the left edge; the CTA takes the slack and sits flush right. */
  .sbb__price { order: 0; margin-left: 0; }
  .sbb__cta { order: 0; margin-left: auto; }
}

/* Combined nutrition panel, single-product mode (metab/bloat bundle pages): no
   product tabs render, so the head shows a PDP-style eyebrow row instead of an
   empty column — consistent with the single-product panels on the PDPs. */
.allin-nfm--single .allin-nfm__hd { flex-direction: row; align-items: center; gap: 0; }
.allin-nfm__eyebrow { color: var(--sage); letter-spacing: 0.12em; text-transform: uppercase; }