/* ---------- Vellume - Bright Modern Skincare ----------
   Brightened palette to match the new Vellume logo: clean, friendly,
   modern with subtle warmth. Cabinet Grotesk replaces Newsreader as
   the display family to align with the logo wordmark. Subtle radius
   on buttons/cards/images for a softer, more approachable feel.
   ----------------------------------------------- */

:root {
  /* ===== BRAND PALETTE - swap these 5 hexes to re-skin the ENTIRE site ===== */
  --c-surface:  #FFFFFF;   /* stark white - cards / modules                */
  --c-cream:    #F3F4F6;   /* light gray - structured containers / panels  */
  --c-grey:     #F3F4F6;   /* light gray - neutral surfaces / trust bar    */
  --c-primary:  #0022FF;   /* ELECTRIC COBALT - brand spine: CTA / blocks  */
  --c-accent:   #0022FF;   /* electric cobalt - unified high-energy accent */
  --c-cobalt:   #0022FF;   /* electric cobalt - hero / product highlights  */
  --c-violet:   #001ACC;   /* deep cobalt - gradient partner / depth       */
  --c-secondary:#0022FF;   /* alias → electric cobalt                      */
  --c-cobalt-light: #B4B8E3; /* formula lavender - soft product cue        */
  --c-aqua:     #B4B8E3;   /* legacy alias → formula lavender              */
  --c-ink:      #0D1B2A;   /* deep navy / midnight - text + dark sections  */
  --c-ink-soft: #0D1B2A;   /* dark sections (same midnight, high contrast) */
  /* RGB triplets - for scrims / rules / shadows that need rgba() */
  --c-surface-rgb: 255, 255, 255;
  --c-ink-rgb:     13, 27, 42;
  /* derived tints, hover, on-color, signature flowy gradient */
  --c-primary-soft: #E6E9FF;   /* pale cobalt - soft panels / selected states */
  --c-accent-soft:  #B4B8E3;   /* formula lavender - subtle accents           */
  --c-primary-deep: #001ACC;   /* deep cobalt - hover / pressed depth         */
  --c-ink-muted:    #3A4A63;   /* slate-navy - high-contrast secondary text   */
  --c-on-primary:   #FFFFFF;   /* stark white on cobalt fills                 */
  /* product accents - strictly images / subtle borders (per brand brief)  */
  --c-beige:    #D9C5B2;   /* matte beige                                  */
  --c-lavender: #B4B8E3;   /* formula lavender                             */
  /* hard graphic shadows + ink hairline - the industrial DTC signature    */
  --shadow-hard:    6px 6px 0 var(--c-ink);
  --shadow-hard-sm: 4px 4px 0 var(--c-ink);
  --border-ink: 1px solid var(--c-ink);
  --grad-flow: linear-gradient(125deg, #0022FF, #001ACC);  /* tight cobalt - reads near-solid */

  /* color - legacy vars now ALIAS the brand tokens above. Re-point the brand
     tokens (not these) to re-skin; the ~290 var(--copper)/var(--ink) call-sites
     across all 11 pages inherit the swap automatically. */
  --bone: var(--c-surface);              /* primary surface */
  --paper: var(--c-primary-soft);         /* alt surface, cards */
  --ink: var(--c-ink);                    /* text */
  --ink-2: var(--c-ink-muted);            /* muted text, rules */
  --ink-rule: rgba(var(--c-ink-rgb), 0.12);
  --ink-rule-strong: rgba(var(--c-ink-rgb), 0.28);
  --champagne: var(--c-accent-soft);      /* soft accent */
  --copper: var(--c-primary);             /* brand spine → orchid */
  --copper-deep: var(--c-primary-deep);   /* hover/active */
  --blush: var(--c-accent-soft);          /* soft accent */
  --blush-deep: var(--c-accent);          /* berry pop */
  --apothecary-green: var(--c-ink);       /* seals → plum (no stray green) */
  --success: #2d6a4f;
  --error: #b3324c;

  /* type - Cabinet Grotesk display matches the logo; Spectral italic kept for editorial moments */
  --font-display: 'Bricolage Grotesque', 'Cabinet Grotesk', 'Switzer', -apple-system, system-ui, sans-serif;
  --font-body: 'Switzer', 'Manrope', -apple-system, system-ui, sans-serif;
  --font-italic: 'Spectral', 'Newsreader', 'Georgia', serif;
  --font-serif: 'Newsreader', 'Source Serif 4', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  --font-script: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;  /* flowy promo flourishes only */

  /* radius - SHARP / industrial: 0px corners across the board (per brief) */
  --radius-sm: 0px;
  --radius: 0px;
  --radius-lg: 0px;
  --radius-pill: 0px;

  /* spacing (8px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 96px;
  --s-9: 128px;
  --s-10: 160px;

  /* layout */
  --max-content: 1240px;
  --max-reading: 640px;
  --gutter: 80px;
  --section-y: 124px;

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-quick: 200ms;
  --dur-base: 280ms;
  --dur-slow: 400ms;
}

/* ---------- reset ---------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; touch-action: pan-y; overscroll-behavior-x: none; }
body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.60;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
button {
  font-family: inherit;
  font-size: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}
a { color: inherit; text-decoration: none; }
a:visited { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
input { font-family: inherit; font-size: inherit; }

/* ---------- typography ---------- */

.display-1, .display-2, .display-3, .title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.display-1 {
  font-size: clamp(52px, 8.5vw, 108px);
  line-height: 1.02;
  letter-spacing: -0.030em;
}
.display-2 {
  font-size: clamp(40px, 5.5vw, 66px);
  line-height: 1.06;
  letter-spacing: -0.022em;
}
.display-3 {
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.10;
  letter-spacing: -0.018em;
}
.title {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.20;
  letter-spacing: -0.010em;
}
.body-lg { font-size: 20px; line-height: 1.55; color: var(--ink-2); }
.body    { font-size: 17px; line-height: 1.60; color: var(--ink-2); }
.body-sm { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.micro {
  font-size: 11px;
  line-height: 1.30;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
}
.micro--champagne { color: var(--copper); }
em, .italic { font-family: var(--font-italic); font-style: italic; }

@media (max-width: 767px) {
  .display-1 { font-size: clamp(36px, 9vw, 48px); line-height: 1.02; overflow-wrap: break-word; hyphens: auto; }
  .display-2 { font-size: 32px; line-height: 1.05; overflow-wrap: break-word; }
  .display-3 { font-size: 26px; line-height: 1.1; }
  .title    { font-size: 20px; }
  .hero__copy { max-width: 100%; }
}

/* ---------- layout helpers ---------- */

.container {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section { padding: var(--section-y) 0; }
.rule { height: 1px; background: var(--ink-rule); border: 0; margin: 0; }
.rule--strong { background: var(--ink-rule-strong); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--s-4);
}
.eyebrow::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--copper);
}

@media (max-width: 1023px) {
  :root { --gutter: 48px; --section-y: 56px; }
}
@media (max-width: 767px) {
  :root { --gutter: 20px; --section-y: 40px; }
}
@media (max-width: 600px) {
  :root { --gutter: 18px; --section-y: 36px; }
}

/* ---------- sale countdown bar (very top strip) ---------- */

.sale-bar {
  position: relative;
  background: var(--grad-flow);
  color: var(--c-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 11px 0;                    /* full-bleed → the strip runs edge to edge */
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.sale-bar__close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--bone);
  opacity: 0.55;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 4px 8px;
  font-family: inherit;
  transition: opacity 120ms ease, color 120ms ease;
}
.sale-bar__close:hover { opacity: 1; color: var(--c-on-primary); }
body.sale-dismissed .sale-bar { display: none; }

.sale-tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: none;
  background: var(--c-primary);
  color: var(--c-on-primary);
  border: 0;
  padding: 16px 8px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  box-shadow: -2px 2px 10px rgba(0,0,0,0.18);
  transition: background 140ms ease;
}
.sale-tab:hover { background: var(--c-primary-deep); }
.sale-tab__label { display: inline-block; }
.sale-tab__count {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-mono);
  color: var(--c-on-primary);
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}
body.sale-dismissed .sale-tab { display: inline-flex; flex-direction: column; align-items: center; }
.sale-bar__deal { color: var(--bone); font-weight: 600; }
.sale-bar__divider {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--c-on-primary);
  opacity: 0.55;
}
.sale-bar__label { color: var(--bone); opacity: 0.78; }
.sale-bar__count {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--c-on-primary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* free-shipping marquee: two identical groups laid end-to-end translate as a
   single seamless lane. Travels left→right; each group is ≥ viewport-wide
   (space-around absorbs the slack) so the strip is gap-free on any screen.
   Holds still for reduced-motion users. */
.sale-bar__marquee {
  flex: 1 1 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.sale-bar__track {
  display: flex;
  width: max-content;
  animation: sale-marquee 40s linear infinite;
}
.sale-bar__group {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex: 0 0 auto;
  min-width: 100vw;          /* guarantees one group always covers the viewport */
  white-space: nowrap;
}
.sale-bar__item { padding: 0 26px; }
.sale-bar__sep { opacity: 0.5; font-size: 0.85em; }
.sale-bar__sr {                /* screen-reader-only copy of the offer */
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@keyframes sale-marquee {
  from { transform: translateX(-50%); }   /* second group sits at the left edge… */
  to   { transform: translateX(0); }       /* …and slides right onto the first */
}
@media (prefers-reduced-motion: reduce) {
  .sale-bar__track { animation: none; transform: translateX(0); }
}
@media (max-width: 767px) {
  .sale-bar { padding: 8px 0; font-size: 10px; letter-spacing: 0.12em; gap: 8px; }
  .site-header .sale-bar__item { font-size: 12px; letter-spacing: 0.14em; }
  .sale-bar__divider { width: 16px; }
  .sale-bar__count { font-size: 11px; letter-spacing: 0.08em; }
  .sale-bar__close { right: 6px; font-size: 18px; }
  .sale-tab { padding: 12px 6px; font-size: 9px; letter-spacing: 0.18em; }
  .sale-bar__track { animation-name: sale-marquee-rev; }   /* mobile: travel right→left */
}
@keyframes sale-marquee-rev {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 540px) {
  .sale-bar__divider { display: none; }
  .sale-bar__deal { flex-basis: 100%; text-align: center; }
}

/* ---------- nav (single row: logo + tabs left, search + cart right) ---------- */

.nav {
  position: sticky;
  top: 0;
  background: var(--bone);
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-quick) var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--ink-rule); }
.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-3) var(--gutter);
  max-width: 1480px;
  margin: 0 auto;
}

.wordmark {
  display: inline-block;
  width: 212px;
  height: 60px;
  background-image: url('images/vellume-lockup.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  mix-blend-mode: darken;
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-decoration: none;
  vertical-align: middle;
  flex-shrink: 0;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav__link {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  position: relative;
  padding: 8px 0;
  transition: opacity var(--dur-quick) var(--ease);
}
.nav__link:hover { opacity: 0.7; }
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-quick) var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); }

.nav__right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  flex-shrink: 0;
}

.nav__search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--paper);
  border: 1px solid rgba(var(--c-ink-rgb), 0.18);
  border-radius: 999px;
  width: 240px;
}
.nav__search-icon {
  width: 14px;
  height: 14px;
  color: var(--ink-2);
  flex-shrink: 0;
}
.nav__search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
  outline: none;
  min-width: 0;
}
.nav__search-input::placeholder { color: var(--ink-2); opacity: 0.85; }

.nav__cart {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.nav__cart-count {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  height: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  letter-spacing: 0;
  color: var(--bone);
  background: var(--ink);
  border-radius: 999px;
}

.nav__hamburger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}
.nav__hamburger-bars {
  width: 22px;
  height: 1px;
  background: var(--ink);
  position: relative;
}
.nav__hamburger-bars::before,
.nav__hamburger-bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 1px;
  background: var(--ink);
}
.nav__hamburger-bars::before { top: -6px; }
.nav__hamburger-bars::after  { top: 6px; }

@media (max-width: 1100px) {
  .nav__inner { gap: var(--s-4); }
  .nav__links { gap: 22px; }
  .nav__link { font-size: 14px; }
  .nav__search { width: 180px; }
}
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__search { display: none; }
  .nav__hamburger { display: inline-flex; }
  .nav__inner { padding: var(--s-3) var(--gutter); }
  .wordmark { width: 170px; height: 48px; }
}
@media (max-width: 480px) {
  .wordmark { width: 140px; height: 40px; }
}

/* ── SAVE 10% side-tab (vertical right-edge) ── */
.save-tab {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 80;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 10px;
  background: var(--ink);
  color: var(--bone);
  border-radius: 8px 0 0 8px;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.16em;
  font-size: 11px;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              background var(--dur-quick) var(--ease);
}
.save-tab.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.save-tab:hover { background: var(--copper-deep); }
.save-tab__close {
  writing-mode: horizontal-tb;
  font-size: 14px;
  line-height: 1;
  padding: 4px;
  background: transparent;
  border: none;
  color: var(--bone);
  cursor: pointer;
  opacity: 0.85;
}
.save-tab__close:hover { opacity: 1; }
.save-tab__label {
  display: inline-block;
}
.save-tab.is-hidden { display: none; }
/* Save 10% tab is the email-capture nudge - hide it as soon as the cart
   has items. From that point on, the in-cart STAY10 popup is the offer. */
body.cart-has-items .save-tab { display: none; }

/* ── STAY10 countdown chip (bottom-left, after "No thanks" dismissal) ── */
.stay10-chip {
  position: fixed;
  left: var(--gutter);
  bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: var(--bone);
  border: 1px solid var(--copper);
  font-family: var(--font-body);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 1px 0 var(--ink-rule), 0 8px 24px rgba(43, 35, 27, 0.08);
  transition: transform var(--dur-quick) var(--ease), opacity var(--dur-quick) var(--ease);
}
.stay10-chip:hover { transform: translateY(-1px); }
.stay10-chip__body {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px;
}
.stay10-chip__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper);
  font-weight: 500;
}
.stay10-chip__sep { color: var(--ink-rule); }
.stay10-chip__time {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stay10-chip__hint {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-2);
}
.stay10-chip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  border-left: 1px solid var(--ink-rule);
  font-size: 18px;
  line-height: 1;
  color: var(--ink-2);
  cursor: pointer;
}
.stay10-chip__x:hover { background: var(--ink); color: var(--bone); }
@media (max-width: 600px) {
  .stay10-chip {
    left: 12px;
    right: auto;
  }
  .stay10-chip__hint { display: none; } /* tighten on small screens */
  .stay10-chip__body { padding: 9px 12px; }
}

/* ── chat widget (bottom-right corner) ── */
.chat-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 90;
}
.chat-widget__bubble {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bone);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-quick) var(--ease),
              transform var(--dur-quick) var(--ease);
}
.chat-widget__bubble:hover {
  background: var(--copper-deep);
  transform: translateY(-2px);
}
.chat-widget__bubble svg {
  width: 24px;
  height: 24px;
}
.chat-widget__panel {
  position: absolute;
  bottom: 72px;
  right: 0;
  width: 300px;
  background: var(--bone);
  border: 1px solid var(--ink-rule);
  border-radius: 8px;
  padding: 18px 18px 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur-quick) var(--ease),
              transform var(--dur-quick) var(--ease),
              visibility 0s linear var(--dur-quick);
}
.chat-widget.is-open .chat-widget__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--dur-quick) var(--ease),
              transform var(--dur-quick) var(--ease),
              visibility 0s linear 0s;
}
.chat-widget__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.chat-widget__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.chat-widget__close {
  background: transparent;
  border: none;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px;
}
.chat-widget__msg {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 10px;
}
.chat-widget__msg--soft {
  color: var(--ink-2);
  font-size: 12px;
}
.chat-widget__msg a {
  color: var(--copper);
  border-bottom: 1px solid var(--copper);
}
.chat-widget__meta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--copper);
  text-transform: uppercase;
  margin-top: 6px;
}
@media (max-width: 600px) {
  .save-tab { font-size: 10px; padding: 14px 8px; }
  .chat-widget { bottom: 16px; right: 16px; }
  .chat-widget__bubble { width: 48px; height: 48px; }
  .chat-widget__panel { width: calc(100vw - 32px); right: 0; }
}

/* mobile overlay menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--bone);
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding: var(--s-3) var(--gutter) var(--gutter);
  transform: translateY(-100%);
  transition: transform var(--dur-base) var(--ease);
  visibility: hidden;
}
.mobile-menu.is-open { transform: translateY(0); visibility: visible; }
.mobile-menu__top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--s-8);
}
.mobile-menu__close { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
.mobile-menu__links { display: flex; flex-direction: column; gap: var(--s-4); }
.mobile-menu__link { font-family: var(--font-display); font-size: 40px; font-weight: 400; letter-spacing: -0.02em; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 28px;
  min-height: 44px;
  font-family: var(--font-body); /* Explicit - anchor variants would otherwise inherit unset font */
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radius);   /* partial round — a touch tighter than the cards */
  text-decoration: none; /* Defensive - global a { } would otherwise rely on cascade */
  transition: opacity var(--dur-quick) var(--ease),
              background var(--dur-quick) var(--ease),
              transform var(--dur-quick) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Primary - bulletproofed against the global `a { color: inherit }` rule
   by spelling out every link state so the cascade can't pull --ink through
   onto a dark-background button (which made the text invisible). */
.btn--primary,
.btn--primary:link,
.btn--primary:visited,
.btn--primary:hover,
.btn--primary:active,
.btn--primary:focus {
  background: var(--c-primary);
  color: var(--c-on-primary);
}
.btn--primary:hover { background: var(--c-accent); }   /* orchid → berry pop */

.btn--ghost,
.btn--ghost:link,
.btn--ghost:visited {
  background: transparent;
  color: var(--c-primary);
  border-color: var(--c-primary);
}
.btn--ghost:hover,
.btn--ghost:focus {
  background: var(--c-primary);
  color: var(--c-on-primary);
}
.btn--block { width: 100%; }

@media (max-width: 600px) {
  .btn { padding: 14px 22px; font-size: 11px; letter-spacing: 0.16em; }
  .hero__ctas { flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .hero__ctas .btn { width: 100%; }
}

/* focus rings - never remove */
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* ---------- playful / flowy utilities ---------- */
/* Soft gradient blob - sits behind hero + shop-lock media for the flowy feel. */
.blob {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: var(--grad-flow);
  filter: blur(52px);
  opacity: 0.45;
  pointer-events: none;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .blob { animation: blob-float 16s ease-in-out infinite alternate; }
}
@keyframes blob-float {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(2%, -3%, 0) scale(1.07); }
}
/* Handwritten promo flourish ("save 10%") - Caveat, accent color, never UI chrome. */
.script-flourish {
  font-family: var(--font-script);
  font-weight: 700;
  color: var(--c-accent);
  text-transform: none;
  letter-spacing: 0;
  line-height: 0.9;
}

/* ---------- hero ---------- */

/* ---------- HERO BANNER (full-bleed image with copy overlay) ---------- */

.hero--banner {
  position: relative;
  width: 100%;
  /* rise up BEHIND the transparent header so the wordmark sits on one
     continuous image (no white band seam cutting it in half) */
  margin-top: calc(-1 * var(--header-h, 118px));
  min-height: 100svh;
  max-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bone);   /* image hugs the right; leftover space blends white */
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg-img {
  position: absolute;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: 107%;                   /* a hair taller than the hero → bottom bleeds off-screen,
                                     so there's never an edge or white sliver underneath */
  object-fit: contain;            /* desktop: show the WHOLE image (mobile re-fills below) */
  object-position: right bottom;  /* hug the right edge + anchor bottom so it always bleeds off the bottom (no sliver underneath) */
  opacity: 0;
  transition: opacity 1200ms ease-in-out;
}
.hero__bg-img.is-active { opacity: 1; }
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* top wash → lifts the whole header zone to a readable light tone, then
       melts into the photo so nothing seams (dark nav text reads left + right) */
    linear-gradient(
      to bottom,
      rgba(var(--c-surface-rgb), 0.97) 0%,
      rgba(var(--c-surface-rgb), 0.92) 13%,
      rgba(var(--c-surface-rgb), 0.50) 27%,
      rgba(var(--c-surface-rgb), 0) 44%
    ),
    /* original left-light wash for the headline copy */
    linear-gradient(
      to right,
      var(--bone) 0%,
      rgba(var(--c-surface-rgb), 0.985) 32%,
      rgba(var(--c-surface-rgb), 0.78) 48%,
      rgba(var(--c-surface-rgb), 0.25) 70%,
      transparent 100%
    );
  pointer-events: none;
}

/* batch badge (signature motif anchor, top-right of hero) */
.hero__batch {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding: 10px 14px;
  background: rgba(var(--c-surface-rgb), 0.78);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(var(--c-ink-rgb), 0.16);
  border-radius: 6px;
  pointer-events: none;
}
.hero__batch-chart {
  width: 48px;
  height: 20px;
  color: var(--copper);
  margin-bottom: 2px;
}
.hero__batch-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}
.hero__batch-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
@media (max-width: 900px) {
  .hero__batch { top: var(--s-3); right: var(--s-3); padding: 8px 10px; }
  .hero__batch-num { font-size: 10px; }
  .hero__batch-meta { font-size: 8px; }
}

/* hero CTA meta line (price/size beside the pill) */
.hero__cta-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.hero__container {
  position: relative;
  z-index: 2;
  padding-top: var(--s-5);
  padding-bottom: var(--s-5);
}
.hero--banner .hero__copy {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.hero--banner .hero__caption {
  text-shadow: 0 1px 0 rgba(var(--c-surface-rgb), 0.6);
}

@media (max-width: 900px) {
  .hero--banner {
    aspect-ratio: auto;
    min-height: 78svh;
    max-height: none;
  }
  .hero__bg-img { object-fit: cover; object-position: 72% 56%; }   /* mobile: crop toward the jar + balm swatch on the right */
  .hero__scrim {
    background: linear-gradient(
      to bottom,
      var(--bone) 0%,
      rgba(var(--c-surface-rgb), 0.96) 35%,
      rgba(var(--c-surface-rgb), 0.55) 60%,
      rgba(var(--c-surface-rgb), 0.05) 85%,
      transparent 100%
    );
  }
  .hero--banner .hero__copy { max-width: 100%; }
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--s-5);
  align-items: center;
  width: 100%;
}
.hero__copy {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Hero headline - Cabinet Grotesk body + Spectral italic signature word.
   The italic mix IS the brand moment; the all-caps default treatment was
   typographically generic and erased the brand's editorial register. */
.hero__head {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  text-transform: none;
  color: var(--ink);
  margin: 0;
}
.hero__head-em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--copper-deep);
  letter-spacing: -0.01em;
}

.hero__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero__body p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  max-width: 480px;
}

.hero__rating {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero__rating-stars {
  font-size: 18px;
  letter-spacing: 0.1em;
  color: var(--copper);
  line-height: 1;
}
.hero__rating-text {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.hero__cta-wrap {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-top: var(--s-2);
}

/* Big confident pill CTA (the conversion anchor) */
.btn-cta-pill,
.btn-cta-pill:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-flow);
  color: var(--c-on-primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 18px 44px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-quick) var(--ease),
              transform var(--dur-quick) var(--ease);
}
.btn-cta-pill:hover,
.btn-cta-pill:focus-visible {
  background: var(--copper-deep);
  color: var(--bone);
  transform: translateY(-1px);
}
.hero__cta-secondary {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink);
  border-bottom: 1px solid var(--ink-rule);
  padding-bottom: 2px;
  transition: border-color var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease);
}
.hero__cta-secondary:hover { color: var(--copper); border-bottom-color: var(--copper); }

.hero__caption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 4px 0 0;
}
.hero__stats {
  display: flex;
  gap: var(--s-6);
  margin-top: var(--s-7);
  flex-wrap: wrap;
}
.hero__stat { font-size: 13px; color: var(--ink-2); max-width: 180px; }
.hero__stat-num {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
}

/* hero seal - horizontal mono proof line between two hairlines */
.hero__seal {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-7);
}
.hero__seal-rule {
  flex: 1;
  height: 1px;
  background: var(--ink-rule);
}
.hero__seal-text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .hero__seal { flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); }
  .hero__seal-text { white-space: normal; text-align: center; font-size: 10px; letter-spacing: 0.12em; }
  .hero__seal-rule { width: 60%; flex: none; }
}

/* Mobile / narrow tablets: stack hero, keep CTA in first viewport */
@media (max-width: 900px) {
  .hero { --hero-chrome: 140px; }
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .hero__copy { order: 1; gap: var(--s-3); }
  .hero__visual { order: 2; max-height: 38svh; aspect-ratio: 1 / 1; }
  .hero__visual--photo { aspect-ratio: 1 / 1; }
  .hero__head { font-size: clamp(30px, 7.5vw, 44px); }
  .hero__body p { font-size: 14px; line-height: 1.5; }
  .btn-cta-pill { padding: 14px 32px; font-size: 13px; letter-spacing: 0.16em; }
  .hero__caption { font-size: 10px; letter-spacing: 0.12em; }
}
@media (max-width: 480px) {
  .hero__visual { max-height: 32svh; }
}

/* section visual-rhythm modifier - now a clean hairline separator on cream
   (was a linen panel; switched to hairline-only for editorial scroll cohesion) */
.section--linen {
  background: transparent;
  border-top: 1px solid var(--ink-rule);
  border-bottom: 1px solid var(--ink-rule);
}

/* Mobile: collapse the hardcoded var(--s-8) sections into responsive section-y
   so the whole page stops feeling endless on phones. */
@media (max-width: 767px) {
  .vs-them,
  .ritual-set,
  .founder,
  .faq-home,
  .manifesto {
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
  }
  .section { padding: var(--section-y) 0; }
  .section--linen { padding-top: calc(var(--section-y) - 4px); padding-bottom: calc(var(--section-y) - 4px); }
  .edit__head { margin-bottom: var(--s-4); gap: var(--s-3); }
  .vs-them__head { margin-bottom: var(--s-4); }
  /* Tighten body-lead-style heads on mobile */
  .display-2 { font-size: clamp(28px, 7vw, 36px); line-height: 1.08; }
  .display-3 { font-size: clamp(24px, 6vw, 32px); line-height: 1.12; }
}
.hero__visual {
  position: relative;
  aspect-ratio: 4/5;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  overflow: visible;
}
.hero__visual::after { content: none; }

@media (max-width: 1023px) {
  .hero__grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
}
@media (max-width: 767px) {
  .hero {
    padding-top: var(--s-5);
    padding-bottom: var(--s-6);
  }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4);
  }
  /* Mobile: copy first (Shop now visible above the fold), then a compact visual. */
  .hero__copy { order: 1; }
  .hero__visual {
    order: 2;
    width: 100%;
    aspect-ratio: 4/3;
    max-height: 280px;
  }
  .btn-cta-pill { width: auto; }
}

/* ---------- the edit (3-product strip) ---------- */

.edit__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: var(--s-6);
  gap: var(--s-5);
}
.edit__intro { max-width: 480px; }
.edit__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}
.product-card { display: block; }
.product-card__visual {
  aspect-ratio: 4/5;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-3);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
.product-card__visual::after {
  content: '';
  position: absolute;
  inset: 16px;
  border: 1px solid var(--ink-rule);
  border-radius: var(--radius-sm);
  pointer-events: none;
}
.product-card__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.product-card__title { font-family: var(--font-display); font-size: 20px; line-height: 1.2; }
.product-card__price { font-family: var(--font-display); font-size: 18px; color: var(--ink); }
.product-card__desc  { font-family: var(--font-italic); font-style: italic; color: var(--ink-2); font-size: 15px; }
.product-card:hover .product-card__visual::after { border-color: var(--ink); transition: border-color var(--dur-quick) var(--ease); }

@media (max-width: 1023px) {
  .edit__grid { grid-template-columns: 1fr; gap: var(--s-7); }
}
@media (max-width: 767px) {
  .edit__head { flex-direction: column; align-items: flex-start; }
  .edit__grid {
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    overflow-x: auto;
    touch-action: pan-x;
    scroll-snap-type: x mandatory;
    grid-template-columns: none;
    gap: var(--s-4);
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding: 0 var(--gutter);
    scroll-padding: 0 var(--gutter);
  }
  .product-card { scroll-snap-align: start; }
  .edit__indicator { display: flex; }
}
.edit__indicator {
  display: none;
  justify-content: center;
  gap: 12px;
  margin-top: var(--s-4);
}
.edit__indicator span {
  width: 8px; height: 8px; border-radius: 999px;
  background: transparent;
  border: 1px solid var(--ink-rule-strong);
}
.edit__indicator span.is-active { background: var(--copper); border-color: var(--copper); }

/* ---------- ingredient spreads (editorial magazine rows, no section header) ---------- */

.ingredient-spread { padding: var(--s-7) 0; background: var(--paper); }
.ingredient-spread__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: center;
  padding: var(--s-7) 0;
  border-bottom: 1px solid var(--ink-rule);
}
.ingredient-spread__row:last-child { border-bottom: 0; }
.ingredient-spread__name-block { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; align-items: flex-start; }
.ingredient-spread__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(56px, 9vw, 128px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--ink);
  word-break: keep-all;
  hyphens: none;
  max-width: 100%;
  overflow-wrap: normal;
}
.ingredient-spread__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper);
  margin-top: var(--s-2);
}
.ingredient-spread__fact-block {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 48ch;
}
.ingredient-spread__stat {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--copper);
  align-self: flex-start;
}
.ingredient-spread__copy {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.ingredient-spread__copy em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
  color: var(--copper-deep);
}
@media (max-width: 1023px) {
  .ingredient-spread__row {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
  .ingredient-spread__name { font-size: clamp(56px, 16vw, 96px); }
}

/* ---------- ritual flow (full-bleed photo + horizontal step ribbons) ---------- */

.ritual-flow { padding: var(--s-7) 0; background: var(--bone); }
.ritual-flow__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: center;
}
.ritual-flow__hero {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  overflow: hidden;
  background: var(--paper);
}
.ritual-flow__hero-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.ritual-flow__copy { display: flex; flex-direction: column; }
@media (max-width: 880px) {
  .ritual-flow__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .ritual-flow__hero { aspect-ratio: 4 / 3; }
}
.ritual-flow__ribbon { display: flex; flex-direction: column; gap: 0; }
.ritual-flow__phase {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: baseline;
  gap: var(--s-5);
  padding: var(--s-5) 0;
}
.ritual-flow__phase-label {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.012em;
  color: var(--copper);
}
.ritual-flow__steps {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-3) var(--s-5);
  flex-wrap: wrap;
}
.ritual-flow__step {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.012em;
}
.ritual-flow__num {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
  color: var(--copper);
  font-size: 0.78em;
}
.ritual-flow__name { color: var(--ink); }
.ritual-flow__sep {
  color: var(--ink-rule);
  font-family: var(--font-mono);
  font-size: 16px;
}
.ritual-flow__hr {
  border: 0;
  border-top: 1px solid var(--ink-rule);
  margin: 0;
}
.ritual-flow__detail {
  margin: var(--s-6) 0 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--ink-rule);
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 720px;
}
.ritual-flow__detail em { color: var(--ink); font-style: italic; }
@media (max-width: 720px) {
  .ritual-flow__hero { aspect-ratio: 4 / 3; margin-bottom: var(--s-5); }
  .ritual-flow__phase { grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-4) 0; }
  .ritual-flow__steps { gap: var(--s-3); }
}

/* ---------- reviews ---------- */

.reviews {
  background: var(--paper);
}
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-7);
}
.review {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.review::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--copper);
}
.review__cite {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: auto;
}

@media (max-width: 1023px) { .reviews__grid { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ---------- footer ---------- */

.footer {
  padding: var(--s-8) 0 var(--s-7);
  background: var(--bone);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: var(--s-7);
  margin-bottom: var(--s-8);
}
.footer__brand { max-width: 320px; }
.footer__brand-mark { font-family: var(--font-display); font-size: 32px; letter-spacing: -0.02em; margin-bottom: var(--s-3); }
.footer__brand-tag { font-family: var(--font-italic); font-style: italic; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.footer__col-head { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; margin-bottom: var(--s-4); }
.footer__list li { margin-bottom: 12px; }
.footer__list a { color: var(--ink-2); font-size: 14px; transition: color var(--dur-quick) var(--ease); }
.footer__list a:hover { color: var(--ink); }
.footer__news input {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-rule-strong);
  padding: 12px 0;
  color: var(--ink);
  margin-bottom: var(--s-3);
}
.footer__news input::placeholder { color: var(--ink-2); }
.footer__news input:focus { border-bottom-color: var(--ink); outline: none; }
.footer__news button { margin-top: 8px; }
.footer__news .status { font-family: var(--font-italic); font-style: italic; color: var(--ink-2); font-size: 14px; margin-top: var(--s-3); display: block; min-height: 1.5em; }
.footer__news .status.is-error { color: var(--error); font-family: var(--font-body); font-style: normal; }
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: var(--s-4);
  border-top: 1px solid var(--ink-rule);
  color: var(--ink-2);
  font-size: 13px;
  gap: var(--s-3);
}
.footer__legal-links { display: flex; gap: var(--s-4); flex-wrap: wrap; }

@media (max-width: 1023px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .footer__brand, .footer__news { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .footer__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .footer__legal { flex-direction: column; align-items: flex-start; }
}

/* ---------- cart drawer ---------- */

.cart-overlay {
  position: fixed; inset: 0;
  background: rgba(26, 23, 20, 0.32);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);
  z-index: 90;
}
.cart-overlay.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-base) var(--ease); }
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 100vw;
  background: var(--paper);
  z-index: 100;
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease);
  display: flex;
  flex-direction: column;
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-4);
  border-bottom: 1px solid var(--ink-rule);
}
.cart-drawer__title { font-family: var(--font-display); font-size: 22px; }
.cart-drawer__close { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: var(--s-4); }
.cart-drawer__empty {
  font-family: var(--font-italic);
  font-style: italic;
  text-align: center;
  font-size: 18px;
  color: var(--ink-2);
  padding: var(--s-8) var(--s-4);
}
.cart-drawer__empty a { color: var(--copper); border-bottom: 1px solid var(--copper); }
.cart-line {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--ink-rule);
  align-items: center;
}
.cart-line__visual {
  width: 80px; height: 96px;
  background: var(--bone);
  border: 1px solid var(--ink-rule);
  overflow: hidden;
}
.cart-line__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cart-line__name { font-family: var(--font-display); font-size: 17px; margin: 0 0 4px; }
.cart-line__meta { font-size: 12px; letter-spacing: 0.04em; color: var(--ink-2); }
.cart-line__remove { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); }
.cart-line__remove:hover { color: var(--ink); }
.cart-line__price { font-family: var(--font-display); font-size: 17px; }
.cart-drawer__foot {
  border-top: 1px solid var(--ink-rule);
  padding: var(--s-4);
  /* iOS bottom-anchored drawer - keep the checkout button clear of the home indicator. */
  padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
}
.cart-drawer__subtotal {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--s-3);
}
.cart-drawer__subtotal-label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
.cart-drawer__subtotal-amount { font-family: var(--font-display); font-size: 24px; }
.cart-drawer__note {
  font-size: 12px;
  color: var(--ink-2);
  text-align: center;
  margin-top: var(--s-3);
  font-family: var(--font-italic);
  font-style: italic;
}

@media (max-width: 767px) {
  .cart-drawer {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 92vh;
    transform: translateY(100%);
    visibility: hidden;                                   /* fully hidden when closed — no peeking "Your cart" head */
    transition: transform var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);
  }
  .cart-drawer.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform var(--dur-base) var(--ease);    /* show immediately, then slide up */
  }
}

/* ---------- breadcrumb (PDP) ---------- */

.breadcrumb {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--ink-rule);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.breadcrumb a { transition: color var(--dur-quick) var(--ease); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb__sep { margin: 0 12px; color: var(--ink-rule-strong); }

/* ---------- pdp ---------- */

.pdp {
  padding: var(--s-7) 0 0;
}
.pdp__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: start;
}
.pdp__gallery { position: sticky; top: 96px; }
.pdp__hero {
  aspect-ratio: 4/5;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
  margin-bottom: var(--s-3);
}
.pdp__hero::after {
  content: '';
  position: absolute; inset: 24px;
  border: 1px solid var(--ink-rule);
  pointer-events: none;
}
.pdp__hero-image {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
}
.pdp__hero-image.is-active { opacity: 1; }
.pdp__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
@media (max-width: 600px) {
  .pdp__thumbs { grid-template-columns: repeat(5, 1fr); gap: 6px; }
}
.pdp__thumb {
  aspect-ratio: 1/1;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  position: relative;
  cursor: pointer;
}
.pdp__thumb::after {
  content: '';
  position: absolute; inset: 8px;
  border: 1px solid var(--ink-rule);
  pointer-events: none;
}
.pdp__thumb.is-active { border-color: var(--ink); }
.pdp__thumb:hover { border-color: var(--ink-rule-strong); }

.pdp__copy { padding-top: var(--s-3); }
.pdp__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: var(--s-3) 0 var(--s-4);
}
.pdp__descriptor {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 460px;
  margin: 0 0 var(--s-6);
}
.pdp__price-row {
  display: flex; align-items: baseline; gap: var(--s-5);
  margin-bottom: var(--s-5);
}
.pdp__price { font-family: var(--font-display); font-size: 28px; }
.pdp__price-sub { font-family: var(--font-display); font-size: 28px; color: var(--ink-2); text-decoration: line-through; }

/* Dominant price block - sits between the descriptor and the bundle ladder
   so skimmers see a price the moment they reach the variant selector. */
.pdp__price-block {
  display: flex; align-items: baseline; gap: var(--s-4);
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--ink-rule);
}
.pdp__price-block .pdp__price {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4.4vw, 44px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.pdp__price-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.pdp__sub {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: var(--s-4);
  padding: var(--s-3);
  border: 1px solid var(--ink-rule);
  background: var(--paper);
  cursor: pointer;
}
.pdp__sub input { margin: 0; accent-color: var(--ink); }
.pdp__sub-label { font-size: 14px; }
.pdp__sub-label strong { font-weight: 600; }
.pdp__sub-label-saving { color: var(--copper); font-family: var(--font-italic); font-style: italic; }
.pdp__cta { margin-bottom: var(--s-3); }
.pdp__cta-msg { min-height: 1.5em; font-size: 14px; color: var(--ink-2); margin-bottom: var(--s-4); }
.pdp__cta-msg.is-error { color: var(--error); }
.pdp__trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--ink-rule);
  border-bottom: 1px solid var(--ink-rule);
}
.pdp__trust-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pdp__trust-icon {
  width: 18px; height: 18px;
  stroke: var(--ink);
  stroke-width: 1;
  fill: none;
}
.pdp__trust-label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.pdp__trust-sub { font-size: 12px; color: var(--ink-2); }

@media (max-width: 1023px) {
  .pdp__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .pdp__gallery { position: static; }
}

/* pdp below-the-fold */

.pdp-below {
  padding-top: var(--s-8);
}
.pdp-below__inner { max-width: var(--max-reading); margin: 0 auto; }
.pdp-section-head {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500;
  margin-bottom: var(--s-4);
  color: var(--ink);
  position: relative;
  padding-left: 56px;
}
.pdp-section-head::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 40px;
  height: 1px;
  background: var(--copper);
}

.pdp__promise {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 var(--s-8);
  max-width: var(--max-reading);
}

.pdp-ing__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  margin-bottom: var(--s-8);
}
.pdp-ing__card { display: flex; flex-direction: column; gap: var(--s-3); }
.pdp-ing__symbol {
  aspect-ratio: 4/3;
  background: var(--paper);
  border: 1px solid var(--ink-rule);
  display: flex; align-items: center; justify-content: center;
}
.pdp-ing__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: var(--s-3);
}
.pdp-ing__name { font-family: var(--font-display); font-size: 24px; white-space: nowrap; }
.pdp-ing__tech { font-family: var(--font-italic); font-style: italic; font-size: 13px; color: var(--copper); }
.pdp-ing__body { font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.pdp-ing__body em { color: var(--ink); }

@media (max-width: 767px) {
  .pdp-ing__grid { grid-template-columns: 1fr; gap: var(--s-6); }
}

.pdp-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  padding: var(--s-6) 0;
  border-top: 1px solid var(--ink-rule);
  border-bottom: 1px solid var(--ink-rule);
  margin-bottom: var(--s-6);
}
.pdp-results__cell {}
.pdp-results__weeks { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--copper); margin-bottom: 8px; }
.pdp-results__num { font-family: var(--font-display); font-size: 56px; line-height: 1; margin-bottom: 8px; letter-spacing: -0.02em; }
.pdp-results__label { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.pdp-results__cite {
  font-family: var(--font-italic); font-style: italic;
  font-size: 12px; color: var(--ink-2);
  margin-bottom: var(--s-8);
}

@media (max-width: 767px) {
  .pdp-results { grid-template-columns: 1fr; gap: var(--s-4); }
  .pdp-results__cell { padding: var(--s-3) 0; border-bottom: 1px solid var(--ink-rule); }
  .pdp-results__cell:last-child { border-bottom: none; }
}

.faq__item {
  border-top: 1px solid var(--ink-rule);
}
.faq__item:last-child { border-bottom: 1px solid var(--ink-rule); }
.faq__summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-4) 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 19px;
  list-style: none;
  user-select: none;
}
.faq__summary::-webkit-details-marker { display: none; }
.faq__chevron {
  width: 14px; height: 14px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  transform: rotate(45deg);
  transition: transform var(--dur-quick) var(--ease);
}
.faq__item[open] .faq__chevron { transform: rotate(-135deg); }
.faq__body {
  padding: 0 0 var(--s-4);
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 560px;
}

.ingredient-list-toggle {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--ink-rule);
  border-bottom: 1px solid var(--ink-rule);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 500;
  width: 100%;
  margin: var(--s-6) 0 0;
}
.ingredient-list-detail {
  padding: var(--s-4) 0 var(--s-6);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.7;
  border-bottom: 1px solid var(--ink-rule);
}
.ingredient-list-detail em { color: var(--ink); font-family: var(--font-italic); font-style: italic; }

.pairs__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  margin-top: var(--s-5);
}
@media (max-width: 767px) {
  .pairs__grid { grid-template-columns: 1fr; }
}

/* ---------- scroll fade-in (motion respects reduced-motion) ---------- */

.fade-in {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
  .fade-in { opacity: 1; transform: none; }
  .cart-drawer, .cart-drawer.is-open,
  .mobile-menu, .mobile-menu.is-open { transition: none; }
}

/* ---------- pretext-managed text containers ---------- */

[data-pretext] { display: block; }

/* ---------- toast ---------- */

.toast {
  position: fixed;
  top: 24px;
  right: 24px;
  background: var(--ink);
  color: var(--bone);
  padding: 14px 20px;
  z-index: 110;
  display: flex;
  align-items: center;
  gap: 16px;
  transform: translateY(-200%);
  transition: transform var(--dur-base) var(--ease);
}
.toast.is-visible { transform: translateY(0); }
.toast__msg { font-family: var(--font-italic); font-style: italic; font-size: 15px; }
.toast__close { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone); }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

/* =========================================================
   CONVERSION COMPONENTS - added per
   https://[design-system-consultation 2026-05-11]
   Patterns sourced from: Pistakio, Nonna's Olive Oil,
   Savannah Bee, Charlie's Crunch, Gum of Gods.
   All visual decisions remain bound to DESIGN.md.
   ========================================================= */

/* ---------- data ticker (thin mono ribbon under hero, replaces stacked proof grid) ---------- */

.data-ticker {
  background: var(--paper);
  border-top: 1px solid var(--ink-rule);
  border-bottom: 1px solid var(--ink-rule);
  padding: var(--s-4) 0;
}
.data-ticker__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
}
.data-ticker__cell {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1;
  position: relative;
}
.data-ticker__cell + .data-ticker__cell::before {
  content: '';
  position: absolute;
  left: calc(var(--s-5) * -0.5);
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--ink-rule);
}
.data-ticker__num {
  color: var(--copper);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.data-ticker__label {
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
@media (max-width: 880px) {
  .data-ticker__row { gap: var(--s-3) var(--s-4); }
  .data-ticker__cell + .data-ticker__cell::before { display: none; }
}

/* ---------- four answers (Roman vertical timeline, replaces 4-pillar grid) ---------- */

.answers {
  padding: var(--s-7) 0;
  background: var(--bone);
}
.answers__lede {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.018em;
  font-weight: 500;
  color: var(--ink);
  max-width: 720px;
  margin: 0 0 var(--s-7) 0;
}
.answers__lede em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
  color: var(--copper-deep);
}
.answers__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  position: relative;
  max-width: 880px;
}
.answers__list::before {
  content: '';
  position: absolute;
  left: 26px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: var(--copper);
  opacity: 0.35;
}
.answers__item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--ink-rule);
  position: relative;
}
.answers__item:first-child { border-top: 0; padding-top: var(--s-3); }
.answers__item:last-child { padding-bottom: 0; }
.answers__num {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
  font-size: 56px;
  line-height: 1;
  color: var(--copper);
  z-index: 1;
  background: var(--bone);
  padding: 0 8px 0 0;
  align-self: start;
}
.answers__body { padding-top: 6px; min-width: 0; }
.answers__stat {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: block;
  margin-bottom: var(--s-3);
}
.answers__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 var(--s-3) 0;
}
.answers__desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  max-width: 60ch;
}
@media (max-width: 600px) {
  .answers__list::before { left: 18px; }
  .answers__item { grid-template-columns: 52px 1fr; gap: var(--s-4); }
  .answers__num { font-size: 40px; }
}

/* ---------- us-vs-them: 4-way comparison, fits in one viewport ---------- */

.vs-them {
  padding: var(--s-7) 0;
}
.vs-them__display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(44px, 5.6vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.028em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 var(--s-5);
}
.vs-them__display em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--copper-deep);
  text-transform: none;
  letter-spacing: -0.012em;
}

/* Board wraps the table and provides the highlighted column background */
.vs-them__board {
  position: relative;
}
/* Brand column is col 2 of 5: row-label (28%) + 4 product cols (18% each) */
.vs-them__highlight {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 28%;
  width: 18%;
  background: var(--paper);
  border-radius: 20px;
  z-index: 0;
  pointer-events: none;
}

.vs-them__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  position: relative;
  z-index: 1;
}
.vs-them__table th,
.vs-them__table td {
  padding: var(--s-3) var(--s-2);
  vertical-align: middle;
}

/* Column proportions */
.vs-them__th-spacer { width: 28%; }
.vs-them__th-brand { width: 18%; }
.vs-them__th-them  { width: 18%; }

/* Header row */
.vs-them__table thead th {
  text-align: center;
  padding-top: var(--s-4);
  padding-bottom: var(--s-4);
  vertical-align: bottom;
}
.vs-them__th-spacer { padding: 0; }

.vs-them__col-img {
  display: block;
  margin: 0 auto var(--s-2);
  overflow: hidden;
  border-radius: 10px;
}
.vs-them__col-img--brand {
  width: clamp(96px, 11vw, 140px);
  aspect-ratio: 1;
}
.vs-them__col-img--brand img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vs-them__col-img--them {
  width: clamp(96px, 11vw, 140px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  opacity: 0.45;
  background: transparent;
}
.vs-them__col-img--them svg {
  width: 56%;
  height: 70%;
}
.vs-them__col-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(11px, 0.9vw, 14px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.2;
}
.vs-them__th-them .vs-them__col-label {
  color: var(--ink-2);
}

/* Row labels: chunky display on the left, but compact so rows are short */
.vs-them__row-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(13px, 1.05vw, 18px);
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-transform: uppercase;
  padding-left: 0;
  padding-right: var(--s-4);
}

/* Cells with marks centered */
.vs-them__td-brand,
.vs-them__td-brand-mute,
.vs-them__td-them {
  text-align: center;
}

/* Dashed dividers between rows (Pistakio signature) */
.vs-them__table tbody tr {
  border-bottom: 1px dashed var(--ink-rule);
}
.vs-them__table tbody tr:first-child {
  border-top: 1px dashed var(--ink-rule);
}

/* Marks */
.vs-them__check {
  width: clamp(32px, 2.6vw, 42px);
  height: clamp(32px, 2.6vw, 42px);
  display: inline-block;
  vertical-align: middle;
}
.vs-them__check--mute {
  opacity: 0.7;
}
.vs-them__x {
  width: clamp(26px, 2vw, 34px);
  height: clamp(26px, 2vw, 34px);
  color: var(--ink-2);
  opacity: 0.55;
  display: inline-block;
  vertical-align: middle;
}
.vs-them__partial {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 4px 10px;
  border: 1px solid var(--ink-rule);
  border-radius: 999px;
  display: inline-block;
  white-space: nowrap;
}

@media (max-width: 900px) {
  /* On mobile, fall back to 2 cols: us vs them aggregated. Hide cols 3-4. */
  .vs-them__display { font-size: clamp(36px, 11vw, 60px); }
  .vs-them__th-spacer { width: 38%; }
  .vs-them__th-brand,
  .vs-them__th-them { width: auto; }
  /* hide the 3rd and 4th comparison columns on small screens */
  .vs-them__table thead th:nth-child(4),
  .vs-them__table thead th:nth-child(5),
  .vs-them__table tbody td:nth-child(4),
  .vs-them__table tbody td:nth-child(5) {
    display: none;
  }
  .vs-them__highlight { left: 38%; width: 31%; border-radius: 14px; }
  .vs-them__col-img--brand,
  .vs-them__col-img--them { width: 80px; }
  .vs-them__row-label { font-size: 13px; padding-right: var(--s-2); }
  .vs-them__col-label { font-size: 11px; letter-spacing: 0.08em; }
}

/* ---------- loud quote (one buyer voice, editorial pull, replaces review+UGC grid) ---------- */

.loud-quote {
  padding: var(--s-7) 0;
  background: var(--bone);
}
.loud-quote__quote {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
  max-width: 1000px;
  text-wrap: pretty;
}
.loud-quote__mark {
  color: var(--copper);
  margin-right: 2px;
}
.loud-quote__mark--close { margin-left: 2px; margin-right: 0; }
.loud-quote__meta {
  margin: var(--s-5) 0 0;
  max-width: 1000px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.loud-quote__name {
  color: var(--ink);
  font-weight: 500;
}
.loud-quote__sep { color: var(--ink-rule); opacity: 0.7; }
.loud-quote__rating {
  margin-left: auto;
  color: var(--ink-2);
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
}
.loud-quote__stars {
  color: var(--copper);
  letter-spacing: 0.08em;
}
@media (max-width: 720px) {
  .loud-quote__rating { margin-left: 0; width: 100%; padding-top: var(--s-2); }
}

/* ---------- cellar (photo-led bundle, image carries the headline) ---------- */

.cellar { padding: var(--s-7) 0; background: var(--bone); }
.cellar__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: center;
}
.cellar__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  overflow: hidden;
  background: var(--paper);
}
.cellar__photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
.cellar__photo-scrim {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 14%;
  background: linear-gradient(to bottom, transparent 0%, rgba(var(--c-surface-rgb), 0.55) 100%);
  pointer-events: none;
}
@media (max-width: 880px) {
  .cellar__photo { max-width: calc(100vw - var(--s-5) * 2); aspect-ratio: 4 / 5; }
}
.cellar__tag {
  position: absolute;
  top: var(--s-5);
  left: var(--s-5);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bone);
  padding: 6px 10px;
  border: 1px solid var(--copper);
}
.cellar__caption {
  max-width: none;
}
.cellar__head {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 var(--s-3) 0;
}
.cellar__lede {
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 var(--s-6);
  max-width: 56ch;
}
.cellar__lede em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
  color: var(--ink);
}
.cellar__specs {
  list-style: none;
  margin: 0 0 var(--s-6);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--ink-rule);
  border-bottom: 1px solid var(--ink-rule);
  display: flex;
  gap: var(--s-7);
  flex-wrap: wrap;
}
.cellar__specs li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cellar__spec-num {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--copper);
  letter-spacing: -0.005em;
}
.cellar__spec-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.cellar__cta-row {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}
@media (max-width: 880px) {
  .cellar__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .cellar__photo { aspect-ratio: 4 / 3; }
  .cellar__specs { gap: var(--s-5); }
  .cellar__head { font-size: clamp(28px, 8vw, 44px); }
}

/* ---------- founder voice ---------- */

.founder { padding: var(--s-8) 0; }
.founder__quote {
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
  position: relative;
}
.founder__quote::before {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  background: var(--copper);
  margin-bottom: var(--s-5);
}
.founder__body {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.36;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.founder__body p + p { margin-top: var(--s-4); }
.founder__cite {
  display: block;
  margin-top: var(--s-5);
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ---------- press ribbon (thin masthead band, no section padding) ---------- */

main > section.press {
  padding: var(--s-3) 0;
  border-top: 1px solid var(--ink-rule);
  border-bottom: 1px solid var(--ink-rule);
  background: transparent;
}
.press__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.press__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
  white-space: nowrap;
}
.press__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  flex: 1;
  color: var(--ink-2);
}
.press__name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink-2);
}
.press__sep {
  width: 1px;
  height: 10px;
  background: var(--ink-rule);
  display: inline-block;
}
@media (max-width: 767px) {
  .press__inner { gap: var(--s-3); }
  .press__row { gap: var(--s-3); }
}

/* ---------- FAQ flow (lead question expanded, others as quiet Roman list) ---------- */

.faq-flow { background: var(--bone); }
.faq-flow .container { max-width: var(--max-content); }
.faq-flow__lead {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--s-3) var(--s-5);
  align-items: start;
  padding-bottom: var(--s-7);
  margin-bottom: var(--s-3);
}
.faq-flow__lead-num {
  grid-column: 1; grid-row: 1;
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
  font-size: 64px;
  line-height: 0.9;
  color: var(--copper);
  align-self: start;
}
.faq-flow__lead-question { grid-column: 2; grid-row: 1; }
.faq-flow__lead-answer { grid-column: 2; grid-row: 2; }
.faq-flow__lead-question {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 var(--s-4) 0;
  text-wrap: balance;
}
.faq-flow__lead-answer {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 64ch;
}
.faq-flow__lead-answer p { margin: 0; }
.faq-flow__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.faq-flow__item {
  border-top: 1px solid var(--ink-rule);
}
.faq-flow__item:last-child { border-bottom: 1px solid var(--ink-rule); }
.faq-flow__summary {
  display: grid;
  grid-template-columns: 56px 1fr 24px;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.faq-flow__summary::-webkit-details-marker { display: none; }
.faq-flow__num {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  color: var(--copper);
  line-height: 1;
}
.faq-flow__q {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--ink);
}
.faq-flow__chevron {
  width: 12px; height: 12px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  transform: rotate(45deg);
  transition: transform var(--dur-quick) var(--ease);
  justify-self: end;
}
.faq-flow__item details[open] .faq-flow__chevron { transform: rotate(-135deg); }
.faq-flow__a {
  padding: 0 var(--s-3) var(--s-5) calc(56px + var(--s-4));
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 64ch;
  font-size: 16px;
}
@media (max-width: 600px) {
  .faq-flow__lead { grid-template-columns: 1fr; gap: var(--s-3); }
  .faq-flow__lead-num { font-size: 40px; }
  .faq-flow__summary { grid-template-columns: 36px 1fr 20px; gap: var(--s-3); }
  .faq-flow__a { padding-left: calc(36px + var(--s-3)); }
}

/* ---------- trust strip (footer) ---------- */

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--ink-rule);
  border-bottom: 1px solid var(--ink-rule);
  margin-bottom: var(--s-6);
}
.trust-strip__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.trust-strip__item svg {
  width: 16px; height: 16px;
  stroke: var(--copper);
  stroke-width: 1.25;
  fill: none;
}

/* ---------- PDP: stars + review count ---------- */

.pdp__stars {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--s-4);
  font-size: 13px;
  color: var(--ink-2);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: opacity var(--dur-quick) var(--ease);
}
.pdp__stars:hover { opacity: 0.75; }
.pdp__stars-symbol {
  color: var(--copper);
  letter-spacing: 0.12em;
  font-family: var(--font-mono);
  font-size: 14px;
}
.pdp__stars strong {
  font-family: var(--font-mono);
  color: var(--ink);
  font-weight: 500;
  font-size: 14px;
}

/* ---------- PDP: bundle ladder ---------- */

.bundle-ladder {
  border: 0;
  padding: 0;
  margin: 0 0 var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.bundle-option {
  display: block;
  position: relative;
  padding: var(--s-3) var(--s-3) var(--s-3) calc(var(--s-3) + 28px);
  border: 1px solid var(--ink-rule);
  background: var(--bone);
  cursor: pointer;
  transition: border-color var(--dur-quick) var(--ease), background var(--dur-quick) var(--ease);
}
.bundle-option:hover { border-color: var(--ink); }
.bundle-option input[type="radio"] {
  position: absolute;
  left: var(--s-3);
  top: calc(var(--s-3) + 4px);
  margin: 0;
  accent-color: var(--copper);
  width: 16px;
  height: 16px;
}
.bundle-option:has(input:checked) {
  border-color: var(--copper);
  background: var(--paper);
}
.bundle-option__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
}
.bundle-option__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.bundle-option__price {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--copper);
  font-weight: 500;
}
.bundle-option__price s {
  color: var(--ink-2);
  margin-left: 8px;
  font-weight: 400;
}
.bundle-option__meta {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}
.bundle-option__flag {
  position: absolute;
  top: -1px;
  right: var(--s-3);
  background: var(--copper);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 8px;
  transform: translateY(-50%);
}
.bundle-option--popular { border-color: var(--copper); }

/* ---------- PDP: guarantee callout ---------- */

.guarantee-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3);
  border-left: 2px solid var(--copper);
  background: var(--paper);
  margin: var(--s-4) 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}
.guarantee-callout svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  stroke: var(--copper);
  stroke-width: 1.25;
  fill: none;
  margin-top: 2px;
}
.guarantee-callout strong {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper);
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
}

/* ---------- PDP: reviews block ---------- */

.pdp-reviews {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s-5);
  margin: var(--s-5) 0 var(--s-7);
}
.pdp-reviews__card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--ink);
}
.pdp-reviews__stars {
  color: var(--copper);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.16em;
}
.pdp-reviews__body {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}
.pdp-reviews__cite {
  margin-top: auto;
  padding-top: var(--s-2);
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.pdp-reviews__cite-badge {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--apothecary-green);
  color: var(--apothecary-green);
  margin-right: var(--s-2);
  font-size: 9px;
}
.pdp-reviews__summary {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--ink-rule);
  margin-bottom: var(--s-4);
}
.pdp-reviews__summary-num {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1;
  color: var(--ink);
  font-weight: 500;
}
.pdp-reviews__summary-stars {
  color: var(--copper);
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.16em;
}
.pdp-reviews__summary-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: 0.06em;
}
@media (max-width: 1023px) {
  .pdp-reviews { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* ---------- PDP: sticky bottom CTA on scroll ---------- */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bone);
  border-top: 1px solid var(--ink);
  padding: var(--s-3) var(--gutter);
  /* iOS notched devices - extend the safe-area inset so the home indicator
     doesn't cover the Add-to-Cart button. */
  padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  transform: translateY(110%);
  transition: transform var(--dur-base) var(--ease);
  box-shadow: 0 -1px 0 var(--ink-rule);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.sticky-cta__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sticky-cta__name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1;
}
.sticky-cta__price {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--copper);
  letter-spacing: 0.02em;
}
.sticky-cta .btn {
  padding: 14px 24px;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .sticky-cta {
    padding: var(--s-2) var(--s-3);
    padding-bottom: calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
  }
  .sticky-cta__name { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

/* ---------- shared utility for mono ---------- */

.mono { font-family: var(--font-mono); }
.mono-copper { font-family: var(--font-mono); color: var(--copper); }

/* End of conversion components block */

/* =========================================================
   ROUND 2 - Product-as-architecture hero + Quick Add
   References: Maison D'Etto (column-of-tubes), Miller Harris (quick-add)
   ========================================================= */

.hero__visual {
  background:
    linear-gradient(180deg, var(--bone) 0%, var(--bone) 30%, var(--paper) 100%);
  overflow: hidden;
}
.hero__architecture {
  width: 70%;
  height: 92%;
  display: block;
  margin: 0 auto;
}
.hero__architecture-meta {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  z-index: 2;
}
.hero__visual { position: relative; }

/* on mobile, the visual gets shorter and a single jar would be better */
@media (max-width: 767px) {
  .hero__architecture { width: 60%; }
  .hero__architecture-meta { bottom: 12px; font-size: 9px; }
}

/* ---------- product card: quick add ---------- */

.product-card__quick {
  display: block;
  margin-top: var(--s-3);
  padding: 12px 16px;
  width: 100%;
  background: transparent;
  border: 1px solid var(--ink-rule-strong);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  transition: background var(--dur-quick) var(--ease),
              color var(--dur-quick) var(--ease),
              border-color var(--dur-quick) var(--ease);
}
.product-card__quick:hover {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}
.product-card__quick:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}

/* End of round 2 block */

/* =========================================================
   ROUND 3 - Shop by Concern, Manifesto, Wordmark divider
   References: Deeponde (concerns), A.N. Other (wordmark, manifesto)
   ========================================================= */

/* ---------- shop by concern ---------- */

.concerns { padding: var(--s-7) 0; border-top: 1px solid var(--ink-rule); }
.concerns__head { margin-bottom: var(--s-6); }
.concerns__head .display-3 { max-width: 620px; }
.concerns__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
.concern-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-quick) var(--ease), transform var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease);
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--radius);
}
.concern-card:hover {
  background: var(--bone);
  border-color: var(--copper);
  transform: translateY(-2px);
}
.concern-card__num {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--copper);
  line-height: 1;
  margin-bottom: var(--s-2);
}
.concern-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink);
  line-height: 1.2;
}
.concern-card__body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: var(--s-2) 0 var(--s-3);
}
.concern-card__product {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--ink-rule);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper);
}
@media (max-width: 1023px) {
  .concerns__grid { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
}
@media (max-width: 600px) {
  .concerns__grid { grid-template-columns: 1fr; }
}

/* ---------- manifesto ---------- */

.manifesto { padding: var(--s-8) 0; background: var(--paper); }
.manifesto__inner { max-width: 720px; margin: 0 auto; }
.manifesto__head {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(44px, 5.5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: var(--s-3) 0 var(--s-6);
}
.manifesto__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--ink);
  max-width: 620px;
}
.manifesto__body p { margin: 0; }
.manifesto__body p:nth-child(odd) {
  font-family: var(--font-display);
}
.manifesto__sign {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--ink-rule-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}

/* ---------- wordmark divider (A.N. Other move) ---------- */

.wordmark-divider {
  padding: var(--s-7) 0 var(--s-5);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.wordmark-divider__rule {
  height: 1px;
  background: var(--ink-rule);
  border: 0;
  margin: 0;
}
.wordmark-divider__mark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(80px, 18vw, 260px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin: var(--s-5) 0 var(--s-3);
  white-space: nowrap;
}
.wordmark-divider__caption {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: var(--s-5);
}

@media (max-width: 767px) {
  .wordmark-divider { padding: var(--s-6) 0 var(--s-4); }
  .wordmark-divider__mark { font-size: clamp(56px, 22vw, 110px); }
}

/* End of round 3 block */

/* =========================================================
   ROUND 4 - Cart improvements: free-shipping bar + upsell
   ========================================================= */

.cart-shipping {
  padding: var(--s-3) var(--s-4) var(--s-4);
  border-bottom: 1px solid var(--ink-rule);
}
.cart-shipping__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-2);
}
.cart-shipping__label strong {
  color: var(--copper);
  font-weight: 500;
}
.cart-shipping__label.is-unlocked strong { color: var(--apothecary-green); }
.cart-shipping__bar {
  position: relative;
  height: 3px;
  background: var(--ink-rule);
  overflow: hidden;
}
.cart-shipping__fill {
  position: absolute;
  inset: 0 100% 0 0;
  background: var(--copper);
  transition: right var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.cart-shipping__fill.is-unlocked { background: var(--apothecary-green); }

.cart-upsell {
  padding: var(--s-3) var(--s-4);
  background: var(--bone);
  border-bottom: 1px solid var(--ink-rule);
}
.cart-upsell__head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: var(--s-2);
}
.cart-upsell__row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: var(--s-3);
  align-items: center;
}
.cart-upsell__visual {
  width: 48px; height: 56px;
  background: var(--paper);
  border: 1px solid var(--ink-rule);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cart-upsell__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cart-upsell__name {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.2;
  color: var(--ink);
  display: block;
}
.cart-upsell__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.cart-upsell__add {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  padding: 10px 14px;
  cursor: pointer;
  transition: all var(--dur-quick) var(--ease);
}
.cart-upsell__add:hover { background: var(--ink); color: var(--bone); }

/* End of round 4 block */

/* =========================================================
   ROUND 5 - Sample Vial section (A.N. Other-inspired)
   ========================================================= */

.sample-vial {
  padding: var(--s-7) 0;
  border-top: 1px solid var(--ink-rule);
  border-bottom: 1px solid var(--ink-rule);
}
.sample-vial__grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--s-7);
  align-items: center;
}
.sample-vial__visual {
  aspect-ratio: 1/1;
  background: var(--paper);
  border: 1px solid var(--ink-rule);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.sample-vial__visual::after {
  content: 'THE SAMPLE VIAL · 5ML · BATCH No. 0026';
  position: absolute;
  bottom: var(--s-3);
  left: var(--s-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-2);
}
.sample-vial__copy { display: flex; flex-direction: column; gap: var(--s-3); }
.sample-vial__head {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.018em;
}
.sample-vial__body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: var(--s-3) 0;
  max-width: 540px;
}
.sample-vial__body em {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink);
}
.sample-vial__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--ink-rule);
  margin-top: var(--s-3);
}
.sample-vial__price {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 500;
  color: var(--copper);
  letter-spacing: -0.01em;
}
.sample-vial__credit {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-2);
  max-width: 280px;
  line-height: 1.45;
}
.sample-vial__cta-row {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-3);
  flex-wrap: wrap;
}
@media (max-width: 1023px) {
  .sample-vial__grid { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* End of round 5 block */

/* =========================================================
   ROUND 6 - Real product photography integration
   ========================================================= */

/* Hero: photo version - replaces SVG architecture when img is present */
.hero__visual--photo {
  background: transparent;
  overflow: hidden;
  aspect-ratio: 4/5;
}
.hero__visual--photo::after {
  /* preserve the inset border on top of the photo for the apothecary frame */
  z-index: 1;
}
.hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hero__architecture-meta {
  color: var(--bone);
  background: rgba(43, 35, 27, 0.75);
  padding: 4px 10px;
  bottom: 24px;
  backdrop-filter: blur(4px);
}
@media (max-width: 767px) {
  .hero__visual--photo { aspect-ratio: 4/5; max-height: 480px; }
}

/* PDP gallery - photo-backed hero images */
.pdp__hero-image--photo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
}
.pdp__hero-image--photo.is-active { opacity: 1; }
.pdp__hero-image--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Sharper rendering on the large above-the-fold imagery (homepage hero,
   cellar, ritual). Source photography is 1024px; on retina containers
   above 1100px this is ~0.43x density. These hints nudge browsers toward
   their sharpest interpolation algorithm. The real fix is higher-res
   source assets. */
.hero__bg-img,
.cellar__photo-img,
.ritual-flow__hero-img {
  image-rendering: -webkit-optimize-contrast;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}
/* When PDP gallery is photo-backed, drop the paper-card inner border */
.pdp__hero--photo { background: var(--paper); }
.pdp__hero--photo::after { display: none; }
.pdp__thumb--photo { padding: 0; overflow: hidden; }
.pdp__thumb--photo::after { display: none; }
.pdp__thumb--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Product card - photo-backed */
.product-card__visual--photo { padding: 0; overflow: hidden; }
.product-card__visual--photo::after { z-index: 1; }
.product-card__visual--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* End of round 6 block */

/* =========================================================
   ROUND 7 - Product label alignment (Whipped Balm)
   ========================================================= */

/* PDP: benefit row (HYDRATE · SMOOTH · ELASTIC) - under title */
.pdp__benefits {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-3) 0 var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--ink-rule);
  flex-wrap: wrap;
}
.pdp__benefit {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper);
  font-weight: 500;
}
.pdp__benefit-sep {
  color: var(--ink-rule-strong);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* PDP ingredients: support 3 cards on the Whipped Balm (was 2) */
.pdp-ing__grid--three {
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 1023px) {
  .pdp-ing__grid--three { grid-template-columns: 1fr; }
}

/* End of round 7 block */

/* =========================================================
   ROUND 8 - Grabbers: featured-product, welcome modal,
              cart rewards, batch countdown
   ========================================================= */

/* Desktop hero photo - squarer aspect + tighter cap so the copy column's
   Shop now button stays inside the first viewport. */
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  .hero__visual--photo {
    aspect-ratio: 1 / 1;
    max-height: calc(100svh - 200px);
  }
}

/* ---------- featured-product full-bleed section ---------- */

.featured-product {
  padding: 0;
  margin: var(--s-8) 0;
  position: relative;
  background: var(--paper);
}
.featured-product__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  min-height: 640px;
}
.featured-product__visual {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  min-height: 540px;
}
.featured-product__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.featured-product__visual::after {
  content: '';
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(245, 239, 228, 0.4);
  pointer-events: none;
}
.featured-product__visual-tag {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  z-index: 2;
  background: var(--bone);
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper);
  border: 1px solid var(--copper);
}
.featured-product__copy {
  padding: var(--s-7) var(--s-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-4);
}
.featured-product__head {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.018em;
}
.featured-product__body {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 480px;
}
.featured-product__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--ink-rule);
  border-bottom: 1px solid var(--ink-rule);
}
.featured-product__price {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 500;
  color: var(--copper);
}
.featured-product__price-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.featured-product__ctas {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.featured-product__stars {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.featured-product__stars-symbol { color: var(--copper); font-size: 14px; letter-spacing: 0.16em; }
@media (max-width: 1023px) {
  .featured-product__grid { grid-template-columns: 1fr; min-height: 0; }
  .featured-product__visual { min-height: 400px; aspect-ratio: 4/5; }
  .featured-product__copy { padding: var(--s-6) var(--gutter); }
}

/* ---------- welcome modal ---------- */

.welcome-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43, 35, 27, 0.55);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);
  backdrop-filter: blur(4px);
}
.welcome-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-base) var(--ease);
}
.welcome-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 24px));
  z-index: 201;
  width: min(540px, calc(100% - 32px));
  max-height: calc(100vh - 64px);
  background: var(--bone);
  padding: var(--s-6);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);
  overflow-y: auto;
}
.welcome-modal.is-open {
  transform: translate(-50%, -50%);
  opacity: 1;
  visibility: visible;
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}
.welcome-modal__close {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  background: transparent;
  border: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  padding: 8px 10px;
  transition: color var(--dur-quick) var(--ease);
}
.welcome-modal__close:hover { color: var(--ink); }
.welcome-modal__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper);
  display: block;
  margin-bottom: var(--s-3);
}
.welcome-modal__head {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.012em;
  margin: 0 0 var(--s-3);
  color: var(--ink);
}
.welcome-modal__body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 var(--s-4);
  max-width: 440px;
}
.welcome-modal__body em { font-family: var(--font-italic); font-style: italic; color: var(--ink); }
.welcome-modal__offer {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--ink-rule);
  border-bottom: 1px solid var(--ink-rule);
  margin-bottom: var(--s-4);
}
.welcome-modal__offer-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 44px;
  line-height: 1;
  color: var(--copper);
}
.welcome-modal__offer-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.welcome-modal__form { display: flex; flex-direction: column; gap: var(--s-3); }
.welcome-modal__input {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-rule-strong);
  padding: var(--s-2) 0;
  width: 100%;
  transition: border-color var(--dur-quick) var(--ease);
}
.welcome-modal__input:focus { outline: none; border-bottom-color: var(--ink); }
.welcome-modal__input::placeholder { color: var(--ink-2); }
.welcome-modal__actions {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-3);
  flex-wrap: wrap;
}
.welcome-modal__decline {
  background: transparent;
  border: 0;
  padding: 8px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  align-self: center;
}
.welcome-modal__decline:hover { color: var(--ink); }
.welcome-modal__status {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-2);
  min-height: 1.5em;
  margin-top: var(--s-2);
}
.welcome-modal__status.is-error { color: var(--error); font-family: var(--font-body); font-style: normal; }
.welcome-modal__status.is-success { color: var(--apothecary-green); }
.welcome-modal__fine {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--ink-rule);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* centered hero variant - large $X OFF front and center */
.welcome-modal--center { text-align: center; }
.welcome-modal__offer--hero {
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  text-align: center;
  margin-top: var(--s-4);
}
.welcome-modal__offer--hero .welcome-modal__offer-num {
  font-size: clamp(72px, 11vw, 120px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.welcome-modal__offer--hero .welcome-modal__offer-label {
  font-size: 12px;
  letter-spacing: 0.18em;
}
.welcome-modal__input--center { text-align: center; }
.welcome-modal__actions--center { justify-content: center; }

/* ---------- cart rewards (free Sample Vial threshold) ---------- */

.cart-rewards {
  padding: var(--s-3) var(--s-4);
  background: var(--bone);
  border-bottom: 1px solid var(--ink-rule);
}
.cart-rewards__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.cart-rewards__row strong { color: var(--copper); font-weight: 500; }
.cart-rewards__row.is-unlocked strong { color: var(--apothecary-green); }
.cart-rewards__bar {
  position: relative;
  height: 3px;
  background: var(--ink-rule);
  overflow: hidden;
}
.cart-rewards__fill {
  position: absolute;
  inset: 0 100% 0 0;
  background: var(--copper);
  transition: right var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.cart-rewards__fill.is-unlocked { background: var(--apothecary-green); }
.cart-rewards__earned {
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--ink-rule);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--apothecary-green);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.cart-rewards__earned::before {
  content: '✓';
  font-size: 12px;
  color: var(--apothecary-green);
}

/* End of round 8 block */

/* =========================================================
   CART CONVERSION - empty state CTA, qty controls, trust strip
   ========================================================= */

.cart-drawer__empty-head {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  margin: 0 0 var(--s-2);
}
.cart-drawer__empty-sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-2);
  margin: 0 0 var(--s-4);
  font-style: normal;
}
.cart-drawer__empty-add {
  width: 100%;
  margin-bottom: var(--s-3);
}
.cart-drawer__empty-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
  font-style: normal;
}

.cart-line__body { min-width: 0; }
.cart-line__controls {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-2);
}
.cart-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ink-rule);
  background: var(--bone);
}
.cart-qty__btn {
  width: 28px;
  height: 28px;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1;
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease);
}
.cart-qty__btn:hover { background: var(--paper); }
.cart-qty__btn:disabled { color: var(--ink-2); cursor: not-allowed; }
.cart-qty__val {
  min-width: 28px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  border-left: 1px solid var(--ink-rule);
  border-right: 1px solid var(--ink-rule);
  padding: 4px 0;
}

.cart-drawer__trust {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: var(--s-3) 0 0;
  border-top: 1px solid var(--ink-rule);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cart-drawer__trust li {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cart-drawer__trust li span {
  color: var(--copper);
  font-size: 10px;
}


/* ============================================================
   SCROLL COHESION - clean editorial scroll, hairlines across.
   Kill the chunky alternating-color "Shopify block" feel.
   Every section sits on the same cream surface; sections are
   divided by 1px hairline rules across the full width. Heading
   stays sticky (already done above). The result reads as one
   continuous editorial page, not stacked blocks.
   ============================================================ */

/* Remove the chunky linen/paper backgrounds from layout sections.
   Keep paper bg ONLY on functional contrast surfaces (cart, modals,
   batch-strip, product card photo containers, ingredient panel cards). */
.ritual-set,
.manifesto,
.featured-product,
.proof-strip,
.reviews,
.ingredient {
  background: transparent;
}

/* Featured-product photo half still needs paper bg for the photo container */
.featured-product__visual { background: var(--paper); }

/* Sections separated by generous breathing space, not hairlines.
   Removed the 1px dividers per editorial-flow brief: better to feel
   spacious + cohesive than to feel ruled like a worksheet. */
main > section + section,
main > section + hr,
main > hr + section,
main > .featured-product + section,
main > section + .featured-product {
  border-top: 0;
}

/* Kill the existing <hr> elements the page sometimes uses - replaced by
   the auto section-border above. */
main > hr.rule { display: none; }

/* Normalize vertical rhythm - every section pads the same amount.
   This removes the chunky double-padding that happens when two
   adjacent sections both have their own --s-7/--s-8 hardcoded. */
main > section { padding-top: var(--section-y); padding-bottom: var(--section-y); }

/* The hero is the only section that gets extra breathing room above
   (just below the sticky nav) so the headline doesn't feel cramped. */
.hero { padding-top: calc(var(--section-y) + var(--s-3)); }

/* Featured-product is a full-bleed split - keep its zero outer margins
   so the photo bleeds to viewport edges; the hairline above/below
   still applies. */
.featured-product { margin: 0 !important; padding: 0 !important; }

/* Sticky nav: add a soft shadow on scroll so the lock is felt.
   Already had border-bottom on .is-scrolled - soften further. */
.nav.is-scrolled {
  border-bottom-color: var(--ink-rule);
  box-shadow: 0 1px 0 var(--ink-rule);
}

/* Section header underline rule - make sure it stays visible
   against the cream background (no longer competing with paper bg). */
.section__header::after { background: var(--ink-rule); }

/* ============================================================
   EDITORIAL FLOW + MOTION (round 9)
   Replace hairline dividers with breathing space, add subtle
   floating depth to cards, layer micro-motion (hover lift + scale,
   staggered card reveals) to break the template feel.
   ============================================================ */

/* More generous section padding so the scroll feels editorial, not stacked */
main > section {
  padding-top: calc(var(--section-y) + var(--s-3));
  padding-bottom: calc(var(--section-y) + var(--s-3));
}
@media (max-width: 767px) {
  main > section {
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
  }
}

/* Floating product cards - subtle shadow lifts them off the cream surface
   without going full SaaS. */
.product-card {
  border-radius: var(--radius);
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
}
.product-card .product-card__visual {
  box-shadow: 0 1px 2px rgba(var(--c-ink-rgb), 0.04),
              0 8px 24px rgba(var(--c-ink-rgb), 0.06);
  transition: transform 380ms var(--ease), box-shadow 280ms var(--ease);
}
.product-card:hover {
  transform: translateY(-3px);
}
.product-card:hover .product-card__visual {
  box-shadow: 0 2px 4px rgba(var(--c-ink-rgb), 0.06),
              0 18px 40px rgba(var(--c-ink-rgb), 0.10);
}
.product-card__visual img {
  transition: transform 500ms var(--ease), filter 280ms var(--ease);
}
.product-card:hover .product-card__visual img {
  transform: scale(1.035);
  filter: brightness(1.03);
}

/* Concern cards - match the floating depth */
.concern-card {
  box-shadow: 0 1px 2px rgba(var(--c-ink-rgb), 0.03),
              0 6px 18px rgba(var(--c-ink-rgb), 0.05);
}
.concern-card:hover {
  box-shadow: 0 2px 4px rgba(var(--c-ink-rgb), 0.05),
              0 14px 30px rgba(var(--c-ink-rgb), 0.10);
}

/* Hero photo - soft drop shadow for editorial lift */
.hero__visual {
  box-shadow: 0 4px 12px rgba(var(--c-ink-rgb), 0.05),
              0 24px 48px rgba(var(--c-ink-rgb), 0.08);
}

/* Featured-product photo container gets the same treatment */
.featured-product__visual {
  box-shadow: 0 4px 12px rgba(var(--c-ink-rgb), 0.06),
              0 18px 40px rgba(var(--c-ink-rgb), 0.10);
}

/* Staggered reveal - cards in a grid animate in sequence rather than all at once.
   Existing JS adds .is-visible when each .fade-in enters viewport; CSS just
   applies a per-position delay so siblings cascade. */
.edit__grid .fade-in:nth-child(1) { transition-delay: 0ms; }
.edit__grid .fade-in:nth-child(2) { transition-delay: 80ms; }
.edit__grid .fade-in:nth-child(3) { transition-delay: 160ms; }
.edit__grid .fade-in:nth-child(4) { transition-delay: 240ms; }

.proof-strip__list .fade-in:nth-child(1) { transition-delay: 0ms; }
.proof-strip__list .fade-in:nth-child(2) { transition-delay: 60ms; }
.proof-strip__list .fade-in:nth-child(3) { transition-delay: 120ms; }
.proof-strip__list .fade-in:nth-child(4) { transition-delay: 180ms; }

.concerns__grid .fade-in:nth-child(1) { transition-delay: 0ms; }
.concerns__grid .fade-in:nth-child(2) { transition-delay: 70ms; }
.concerns__grid .fade-in:nth-child(3) { transition-delay: 140ms; }
.concerns__grid .fade-in:nth-child(4) { transition-delay: 210ms; }

.reviews__grid .fade-in:nth-child(1) { transition-delay: 0ms; }
.reviews__grid .fade-in:nth-child(2) { transition-delay: 70ms; }
.reviews__grid .fade-in:nth-child(3) { transition-delay: 140ms; }

/* Reduced-motion fallback - kill all transforms, delays, and lift effects */
@media (prefers-reduced-motion: reduce) {
  .product-card,
  .product-card:hover,
  .product-card .product-card__visual,
  .product-card__visual img,
  .product-card:hover .product-card__visual img,
  .concern-card,
  .concern-card:hover,
  .btn:hover,
  .btn:active {
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .edit__grid .fade-in,
  .benefits__grid .fade-in,
  .concerns__grid .fade-in,
  .reviews__grid .fade-in { transition-delay: 0ms !important; }
}

/* Subtle hero photo lift on first paint - single restrained motion */
@keyframes vellume-hero-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero__visual.fade-in.is-visible,
.hero__copy.fade-in.is-visible {
  animation: none; /* IntersectionObserver already handles via .fade-in */
}











/* ---------- final promise (one sentence + one button; trust the simplicity) ---------- */

.final-promise {
  padding: var(--s-7) 0;
  background: var(--paper);
}
.final-promise__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-7);
  align-items: end;
}
.final-promise__line {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 5vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.final-promise__line em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
  color: var(--copper-deep);
}
.final-promise__cta {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}
.final-promise__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}
@media (max-width: 720px) {
  .final-promise__grid { grid-template-columns: 1fr; gap: var(--s-5); align-items: start; }
}

/* ---------- chart-divider (Vellume signature motif: hand-drawn lab chart) ---------- */

.chart-divider {
  padding: var(--s-7) 0;
  background: var(--bone);
}
.chart-divider__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--ink-rule);
}
.chart-divider__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper);
}
.chart-divider__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: -0.005em;
  color: var(--ink);
}
.chart-divider__svg {
  width: 100%;
  height: auto;
  display: block;
  /* The hand-drawn quality: slight transform + stroke nuance */
}
.chart-divider__svg path {
  /* tiny irregular hand-drawn feel via stroke-linejoin already set inline */
}
.chart-divider__footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--ink-rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.chart-divider__sign {
  color: var(--copper);
}
@media (max-width: 760px) {
  .chart-divider { padding: var(--s-6) 0; }
  .chart-divider__svg { min-height: 180px; }
  .chart-divider__title { font-size: 17px; }
  .chart-divider__footer,
  .chart-divider__eyebrow,
  .chart-divider__sign { font-size: 9px; letter-spacing: 0.10em; }
}

/* ---------- PDP Cellar upsell tile (next to buy box) ---------- */

.pdp-cellar-upsell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding: 14px 18px;
  background: var(--paper);
  border: 1px solid var(--copper);
  border-radius: 8px;
  text-decoration: none;
  transition: background var(--dur-quick) var(--ease), transform var(--dur-quick) var(--ease);
}
.pdp-cellar-upsell:hover {
  background: var(--bone);
  transform: translateY(-1px);
}
.pdp-cellar-upsell__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pdp-cellar-upsell__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.pdp-cellar-upsell__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.pdp-cellar-upsell__arrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--copper);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   CRO additions (2026-05-16)
   Scarcity badge, PDP cta trust row, hero scarcity caption,
   cart-exit modal, cellar cta meta line.
   All token-driven; no rounded corners on buttons (DESIGN.md).
─────────────────────────────────────────────── */

.hero__caption {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.hero__caption-batch strong { color: var(--copper); font-weight: 500; }
.hero__caption-sep { color: var(--ink-rule); }

.cellar__cta-meta {
  margin: var(--s-3) 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.pdp__scarcity {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px 12px;
  margin: var(--s-3) 0 var(--s-2);
  background: var(--paper);
  border-left: 2px solid var(--copper);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.pdp__scarcity strong { color: var(--copper); font-weight: 500; }
.pdp__scarcity-dot {
  width: 7px; height: 7px;
  background: var(--copper);
  border-radius: 50%;
  display: inline-block;
  animation: vl-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes vl-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .pdp__scarcity-dot { animation: none; }
}

.pdp__cta-price {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-left: 6px;
}

.pdp__cta-trust {
  list-style: none;
  padding: 0;
  margin: var(--s-3) 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}
.pdp__cta-trust li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.3;
}
.pdp__cta-trust svg {
  width: 14px; height: 14px;
  color: var(--copper);
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .pdp__cta-trust { grid-template-columns: 1fr; gap: 4px; }
}

/* Cart-aware exit-intent modal */
.cart-exit-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 23, 20, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease-out;
  z-index: 9001;
}
.cart-exit-overlay.is-open { opacity: 1; pointer-events: auto; }
.cart-exit {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%);
  width: min(520px, calc(100vw - 32px));
  background: var(--bone);
  border: 1px solid var(--ink-rule);
  padding: var(--s-6) var(--s-5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease-out, transform 280ms ease-out;
  z-index: 9002;
  text-align: center;
}
.cart-exit.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}
.cart-exit__close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: 0;
  font-size: 22px;
  color: var(--ink-2);
  cursor: pointer;
  line-height: 1;
}
.cart-exit__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: var(--s-3);
}
.cart-exit__head {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s-3);
  color: var(--ink);
}
.cart-exit__head em {
  font-family: var(--font-mono);
  font-style: normal;
  color: var(--copper);
  letter-spacing: 0.04em;
}
.cart-exit__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 auto var(--s-4);
  max-width: 380px;
}
.cart-exit__body strong { color: var(--ink); font-weight: 500; }
.cart-exit__actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: stretch;
  max-width: 320px;
  margin: 0 auto;
}
/* Explicit color/font on the CTA so it always renders inside the dialog,
   even when global a { color: inherit } would otherwise pull a dark color. */
.cart-exit__cta,
.cart-exit__cta:visited {
  font-family: var(--font-body);
  color: var(--bone);
}
.cart-exit__skip {
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  padding: 8px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Ambient social-proof toast (bottom-left, quiet, dismissable) */
.proof-toast {
  position: fixed;
  left: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 12px 14px;
  background: var(--bone);
  border: 1px solid var(--ink-rule);
  box-shadow: 0 12px 32px -20px rgba(var(--c-ink-rgb), 0.30);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
  max-width: 340px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 280ms ease-out, transform 280ms ease-out;
  z-index: 8500;
}
.proof-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.proof-toast__dot {
  width: 8px;
  height: 8px;
  background: var(--copper);
  border-radius: 50%;
  flex-shrink: 0;
  animation: vl-pulse 2.4s ease-in-out infinite;
}
.proof-toast__msg { flex: 1; }
.proof-toast__close {
  background: none;
  border: 0;
  font-size: 16px;
  color: var(--ink-2);
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
@media (max-width: 600px) {
  .proof-toast {
    left: 12px;
    right: 12px;
    max-width: none;
    bottom: 12px;
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .proof-toast { transition: opacity 200ms; }
  .proof-toast__dot { animation: none; }
}

/* Inline field errors on contact form */
.form__field.is-error input,
.form__field.is-error textarea,
.form__field.is-error select {
  border-bottom-color: var(--error, #b94c3c) !important;
}
.form__field-error {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 12px;
  color: var(--error, #b94c3c);
  margin-top: 4px;
  display: block;
}

/* Express-trust row under checkout submit */
.checkout-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  flex-wrap: wrap;
}
.checkout-trust-row svg {
  width: 14px; height: 14px;
  color: var(--copper);
}

/* =========================================================
   MOBILE POLISH - keep the hero text away from the printed
   labels on the product image. The original "overlapping
   words" complaint was caused by the HTML caption sitting on
   top of the jar's own printed mono labels (Batch No., Net
   60g, Tallow Honey Balm). At desktop widths the photo is on
   the right with a side-fade scrim; on mobile it fills the
   hero and the two layers of text collide.
   ========================================================= */

@media (max-width: 767px) {
  /* Hide the secondary caption on phones - the same batch/scarcity info
     appears at checkout. Removing it kills the overlap directly. */
  .hero--banner .hero__caption { display: none; }

  /* Strengthen the bottom of the scrim so the printed jar labels behind
     the CTA + meta line are muted instead of legibly competing. */
  .hero--banner .hero__scrim {
    background: linear-gradient(
      to bottom,
      var(--bone) 0%,
      rgba(var(--c-surface-rgb), 0.99) 40%,
      rgba(var(--c-surface-rgb), 0.94) 70%,
      rgba(var(--c-surface-rgb), 0.78) 90%,
      rgba(var(--c-surface-rgb), 0.55) 100%
    );
  }

  /* The decorative batch chip floats above the nav on phones; hide it. */
  .hero__batch { display: none; }

  /* The Save 10% side-tab is a desktop affordance - on narrow phones the
     vertical strip eats ~30px off the right edge of every section,
     clipping body text. The welcome modal already nudges email capture
     on mobile, so the tab is redundant. */
  .save-tab { display: none !important; }
}

/* ====================================================================
   HOMEPAGE - flowy hero flourish + scroll-locked product story
   ==================================================================== */

/* "save 10%" handwritten flourish over the hero CTA */
.hero__flourish {
  font-family: var(--font-script);
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 700;
  color: var(--c-accent);
  line-height: 0.9;
  display: inline-block;
  transform: rotate(-6deg);
  margin-bottom: calc(-1 * var(--s-2));
}

/* Scroll-lock centerpiece: product image pins while the buy panel scrolls.
   Mirrors the PDP .pdp__grid + sticky gallery; reuses .bundle-ladder, .pdp__cta-*,
   .pdp__scarcity verbatim so pricing + add-to-cart wiring works unchanged. */
.shop-lock {
  position: relative;
  padding: var(--s-8) 0;
  overflow: clip;
}
.shop-lock__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: start;
  /* lock the gallery at a comfortable distance from the edge on narrower screens */
  padding-left: clamp(28px, 9vw, 150px);
  padding-right: clamp(28px, 9vw, 150px);
}
.shop-lock__media {
  position: sticky;
  top: 150px;  /* lock below the sticky header (≈118px) with a small gap */
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
  isolation: isolate;
}
.shop-lock__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shop-lock__media .blob {
  width: 80%;
  height: 70%;
  left: -14%;
  top: -10%;
  opacity: 0.5;
}
.shop-lock__panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-top: var(--s-2);
}
.shop-lock__kicker {
  font-family: var(--font-script);
  font-size: 26px;
  color: var(--c-accent);
  line-height: 0.9;
}
.shop-lock__head {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 1.03;
  letter-spacing: -0.02em;
  margin: 0;
}
.shop-lock__lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 46ch;
}
.shop-lock__benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}
.shop-lock__benefit {
  background: var(--c-primary-soft);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.shop-lock__benefit-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  color: var(--c-primary);
  line-height: 1;
}
.shop-lock__benefit-label {
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-2);
}
@media (max-width: 900px) {
  .shop-lock__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .shop-lock__media {
    position: static;
    max-width: 440px;
    margin: 0 auto;
    width: 100%;
  }
}

/* ====================================================================
   POPPY PASS - Grüns/Bloom energy: colorful section bands, filled
   rounded cards, bigger + bolder type, flowy script accents.
   (Appended last so these win over the editorial base styles.)
   ==================================================================== */

/* ---- Type: bigger, bolder, flowy ---- */
.display-1, .display-2, .display-3 { font-weight: 800; }
.hero__head { font-weight: 800; font-size: clamp(46px, 6.8vw, 88px); letter-spacing: -0.03em; }
.hero__head-em {                         /* "you remember" → flowy script in berry */
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 700;
  color: var(--c-accent);
  font-size: 1.1em;
  letter-spacing: 0;
}
.cellar__head, .vs-them__display, .shop-lock__head,
.faq-flow__lead-question, .answers__lede, .ritual-flow__detail { font-weight: 800; }

/* ---- Colorful full-bleed section bands (alternating down the page) ---- */
.loud-quote  { background: var(--c-accent-soft);  padding: var(--s-8) 0; }
.answers     { background: var(--c-primary-soft); padding: var(--s-8) 0; }
.vs-them     { background: var(--c-accent-soft);  padding: var(--s-8) 0; }
.ritual-flow { background: var(--c-accent-soft); }
.faq-flow    { background: var(--c-primary-soft); padding: var(--s-8) 0; }

/* ---- "Four answers" → friendly 2-col filled cards (was a thin Roman list) ---- */
.answers__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.answers__item {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  box-shadow: 0 12px 32px -20px rgba(var(--c-ink-rgb), 0.32);
}
.answers__num { color: var(--c-accent); font-weight: 800; }
.answers__stat { color: var(--c-primary); }
@media (max-width: 700px) { .answers__list { grid-template-columns: 1fr; } }

/* ---- benefit chips: alternate orchid / berry tint ---- */
.shop-lock__benefit:nth-child(2) { background: var(--c-accent-soft); }
.shop-lock__benefit:nth-child(2) .shop-lock__benefit-num { color: var(--c-accent); }

/* ---- vs-them: float the table as a white rounded card on the berry band ---- */
.vs-them__board {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-4);
  box-shadow: 0 16px 40px -24px rgba(var(--c-ink-rgb), 0.30);
}

/* ---- FAQ: filled rounded cards on the orchid band ---- */
.faq-flow__lead {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-4);
}
.faq-flow__item {
  background: var(--c-surface);
  border-radius: var(--radius);
  margin-bottom: var(--s-2);
  overflow: hidden;
}
.faq-flow__summary { padding: var(--s-3) var(--s-4); }
.faq-flow__a { padding: 0 var(--s-4) var(--s-4); }

/* ---- Final promise: bold gradient finish with a clean white pill ---- */
.final-promise { background: var(--grad-flow); color: var(--c-on-primary); padding: var(--s-8) 0; }
.final-promise .final-promise__line,
.final-promise .final-promise__sub,
.final-promise em { color: var(--c-on-primary); }
.final-promise .btn-cta-pill { background: var(--c-surface); color: var(--c-primary); }
.final-promise .btn-cta-pill:hover { background: var(--c-accent-soft); color: var(--c-primary-deep); }

/* ====================================================================
   SCROLL-REACTIVE HEADER - hide while scrolling down, reveal on
   scroll-up or when the user stops (driven by app.js .nav--hidden).
   ==================================================================== */
.nav {
  transition: transform var(--dur-base) var(--ease), border-color var(--dur-quick) var(--ease);
  will-change: transform;
}
.nav--hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .nav { transition: border-color var(--dur-quick) var(--ease); }  /* hide still works - just snaps, no slide */
}

/* ====================================================================
   SHOP-LOCK BUY MODULE - Grüns-style: rating, concrete checklist,
   "choose your plan" offer cards (rounded, MOST POPULAR pill, per-day
   price, perk checkmarks). Image stays locked; this column scrolls.
   ==================================================================== */
.shop-lock__rating { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.shop-lock__rating strong { color: var(--ink); font-weight: 800; }
.shop-lock__stars { color: var(--c-accent); letter-spacing: 2px; }

.shop-lock__checks { display: grid; gap: 12px; margin: var(--s-2) 0 0; }
.shop-lock__checks li { position: relative; padding-left: 32px; font-size: 16px; line-height: 1.4; color: var(--ink); }
.shop-lock__checks li::before { content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--c-primary-soft); }
.shop-lock__checks li::after { content: ""; position: absolute; left: 7px; top: 7px; width: 8px; height: 5px; border-left: 2.5px solid var(--c-primary); border-bottom: 2.5px solid var(--c-primary); transform: rotate(-45deg); }

.shop-lock__divider { height: 1px; background: var(--ink-rule); margin: var(--s-3) 0 var(--s-1); }
.shop-lock__select-label { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--ink); }

.bundle-ladder--gruns { gap: var(--s-3); }
.bundle-ladder--gruns .bundle-option {
  border: 2px solid var(--ink-rule);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 30px);
}
.bundle-ladder--gruns .bundle-option:hover { border-color: var(--c-primary); }
.bundle-ladder--gruns .bundle-option:has(input:checked) {
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
  box-shadow: 0 12px 30px -20px rgba(var(--c-ink-rgb), 0.40);
}
.bundle-ladder--gruns .bundle-option input[type="radio"] { left: var(--s-4); top: calc(var(--s-4) + 6px); width: 18px; height: 18px; accent-color: var(--c-primary); }
.bundle-ladder--gruns .bundle-option__title { font-weight: 800; font-size: 19px; }
.bundle-ladder--gruns .bundle-option__price { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--c-primary); }
.bundle-ladder--gruns .bundle-option__flag {
  background: var(--c-primary); color: var(--c-on-primary);
  border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.10em;
  padding: 5px 12px; right: var(--s-4);
}
.bundle-option__perday { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-2); }
.bundle-option__perks { display: grid; gap: 7px; margin: var(--s-3) 0 0; }
.bundle-option__perks li { position: relative; padding-left: 24px; font-size: 14px; color: var(--ink); line-height: 1.35; }
.bundle-option__perks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--c-primary); font-weight: 800; }

/* ====================================================================
   RHODE × GRÜNS BLEND - warm-cream canvas (Rhode minimalism), white
   modules that float on it, color reserved for confident accents and
   the bold final gradient (Grüns pop). Clean + trendy, not loud.
   ==================================================================== */
body { background: var(--c-cream); }

/* calm the loud full-color bands → let the cream canvas breathe */
.loud-quote, .vs-them, .ritual-flow, .ingredient-spread,
.faq-flow, .answers, .cellar, .data-ticker, .press,
.chart-divider, .shop-lock { background: transparent; }

/* white modules/cards float and lift off the cream */
.answers__item, .vs-them__board, .faq-flow__lead, .faq-flow__item,
.shop-lock__media, .bundle-ladder--gruns .bundle-option,
.shop-lock__benefit { background: var(--c-surface); }

/* nav reads as a clean white bar on cream */
.nav { background: var(--c-surface); }

/* the single bold color moment - keep the gradient finish */
.final-promise { background: var(--grad-flow); }

/* Rhode breathes: a little more air between sections */
.loud-quote, .answers, .vs-them, .faq-flow, .shop-lock,
.ingredient-spread, .ritual-flow { padding-top: var(--s-9); padding-bottom: var(--s-9); }

/* ====================================================================
   NEW MODULAR SECTIONS - clean Grüns/Rhode flow blocks
   ==================================================================== */

/* trust strip band (under press) */
.trust-band { padding: var(--s-5) 0; }

/* "Why you'll love it" - 3 image benefit cards */
/* ── skincare simplified: floating jars sized to one screen, copy overlaid left ── */
.simplified {
  position: relative;
  display: flex; align-items: center; justify-content: flex-start;
  padding: clamp(16px, 3vh, 44px) 0;   /* small top/bottom buffer */
  background: #fff;
  overflow: hidden;
}
.simplified__img {
  display: block; width: auto; max-width: 70%;
  height: min(76vh, 720px); object-fit: contain;
  margin-left: clamp(-300px, -11vw, -160px);  /* jars pulled to the left; white right edge blends in */
}
.simplified__copy {
  position: absolute; top: 0; bottom: 0;
  right: clamp(20px, 3.5vw, 64px);       /* nearer the edge so the wider column shifts left */
  width: min(58%, 700px);
  display: flex; flex-direction: column; justify-content: flex-start;
  transform: none;
  text-align: left;
  padding: clamp(18px, 4vh, 52px) 0;
}
.simplified__head {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(40px, 4.8vw, 72px); line-height: 1.04;
  letter-spacing: -0.025em; color: var(--c-ink);
  margin: 0 0 clamp(20px, 4vh, 44px);
}
.simplified__head em {
  font-family: var(--font-italic); font-style: italic; font-weight: 400;
  color: var(--c-primary); letter-spacing: -0.01em;
}
/* lower block: words on the left, a rule, then the volume running up the right */
.simplified__lower {
  flex: 0 0 auto;
  display: flex; align-items: stretch;
  gap: clamp(12px, 1.6vw, 26px);
}
/* big high-energy product words - outlined cobalt, one filled */
.simplified__stack {
  flex: 0 1 auto;
  display: flex; flex-direction: column; justify-content: flex-start;
  gap: clamp(4px, 1vh, 12px);   /* close together */
  margin: 0; line-height: 0.98;
}
.simplified__word {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 4vw, 56px); letter-spacing: -0.03em;
  text-transform: none;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--c-primary);
  text-stroke: 1.4px var(--c-primary);
}
.simplified__word--fill {
  color: var(--c-primary);
  -webkit-text-stroke: 0; text-stroke: 0;
}
.simplified__rule {
  flex: 0 0 auto; width: 2px; align-self: stretch;
  background: var(--c-primary);
}
/* right side of the comparison: the one jar */
.simplified__one {
  flex: 1 1 auto; margin: 0;
  display: flex; align-items: center; justify-content: flex-start;
  padding-left: clamp(8px, 1.6vw, 28px);
}
.simplified__one .simplified__word { font-size: clamp(34px, 4.4vw, 60px); }
@media (max-width: 720px) {
  /* phone: copy at the top, the floating jars sized below it */
  .simplified { flex-direction: column; padding: clamp(16px, 5vw, 32px) 0 0; }
  .simplified__img { max-width: 100%; height: auto; margin: 0; }
  .simplified__copy {
    position: static; transform: none; left: auto; right: auto;
    width: 100%; justify-content: flex-start; text-align: center; align-items: center;
    padding: clamp(20px, 7vw, 40px) var(--gutter) clamp(12px, 4vw, 24px);
  }
  .simplified__lower { flex-direction: column; align-items: center; gap: clamp(14px, 4vw, 26px); }
  .simplified__stack { align-items: center; gap: clamp(14px, 3vw, 24px); }
  .simplified__word { font-size: clamp(34px, 11vw, 60px); }
  .simplified__rule { width: clamp(80px, 30vw, 140px); height: 2px; align-self: center; }
  .simplified__one { justify-content: center; padding: 0; }
}

/* "What's inside" - bold stat lead + clean ingredient grid */
.inside { padding: 80px 0 var(--s-9); }
.inside__stat { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.025em; text-align: center; max-width: 16ch; margin: 0 auto var(--s-6); }
.inside__stat em { font-family: var(--font-display); font-style: normal; color: var(--c-primary); }
.inside__head { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3vw, 38px); text-align: center; margin: 0 0 var(--s-5); }
.inside__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--s-6); max-width: 980px; margin: 0 auto; }
.inside__item { display: flex; flex-direction: column; gap: 3px; padding: var(--s-3) 0; border-top: 1px solid var(--ink-rule); }
.inside__name { font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.inside__note { color: var(--ink-2); font-size: 13px; line-height: 1.45; }
@media (max-width: 820px) { .inside__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .inside__grid { grid-template-columns: 1fr; } }

/* Reviews - 3 testimonial cards */
.reviews { padding: var(--s-6) 0 var(--s-9); }
.reviews__head { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4vw, 54px); letter-spacing: -0.02em; text-align: center; margin: 0 0 var(--s-6); }
.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.review-card { background: var(--c-surface); border-radius: var(--radius-lg); padding: var(--s-5); box-shadow: 0 14px 38px -24px rgba(var(--c-ink-rgb), 0.30); display: flex; flex-direction: column; gap: var(--s-3); }
.review-card__stars { color: var(--c-accent); letter-spacing: 2px; }
.review-card__body { font-family: var(--font-italic); font-style: italic; font-size: 20px; line-height: 1.5; color: var(--ink); margin: 0; }
.review-card__cite { font-style: normal; font-size: 13px; color: var(--ink-2); letter-spacing: 0.03em; }
@media (max-width: 820px) { .reviews__grid { grid-template-columns: 1fr; } }

/* ====================================================================
   GRÜNS-STYLE UNIFIED HEADER - one colored block: announcement on top,
   nav below (links left · wordmark center · cart right). Slides away on
   scroll-down, locks back down on scroll-up (headroom - see app.js).
   ==================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;                       /* blended into the page at the very top */
  --wm-top-scale: 2.95;                           /* how big the wordmark blows up at the top */
  transition: background 0.26s var(--ease);
}
/* once scrolled off the very top → the "little colored header" fills in.
   The box height never changes (wordmark scales via transform, announcement
   always shown) so the page never jumps. */
.site-header--compact { background: var(--c-ink); box-shadow: 0 1px 0 rgba(var(--c-ink-rgb), 0.10); }
/* mobile: links are hidden so the wordmark is left-anchored - grow it from the
   left edge (not centre) so it never clips off-screen, and keep it modest */
@media (max-width: 900px) {
  .site-header { --wm-top-scale: 1.5; }
  .site-header .nav__inner { padding-left: var(--gutter); padding-right: var(--gutter); }
}
@media (max-width: 480px) { .site-header { --wm-top-scale: 1.3; } }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }

/* floating "Try Vellume" pill - top-right, shown only while the header is hidden */
.try-pill {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--c-primary-deep);
  box-shadow: 4px 5px 0 var(--c-primary-deep);   /* hard offset = 3D stacked look */
  text-decoration: none;
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.try-pill:link, .try-pill:visited, .try-pill:hover, .try-pill:focus { color: #fff; }
.try-pill:hover { box-shadow: 2px 3px 0 var(--c-primary-deep); }   /* presses down on hover */
.try-pill.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .try-pill { transition: opacity 0.2s; transform: none; } }

/* announcement banner: crimson fill so the whole strip pops off the dark nav */
.site-header .sale-bar { background: var(--c-primary); border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
/* the offer is the loudest thing in the bar - bigger, wider, heavier */
.site-header .sale-bar__item { font-size: 15px; font-weight: 600; letter-spacing: 0.2em; }
.site-header .sale-bar__sep { color: var(--c-on-primary); }

/* nav: transparent inside the block, 3-column grid (links | wordmark | cart) */
.site-header .nav { position: static; background: transparent; border: 0; }
.site-header .nav__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.site-header .nav__links { order: 1; flex: 1 1 0; min-width: 0; }
.site-header .wordmark   { order: 2; flex: 0 0 auto; }
.site-header .nav__right { order: 3; flex: 1 1 0; display: flex; justify-content: flex-end; margin-left: 0; }

/* cream text wordmark (Grüns style). Scaling uses transform - NOT font-size -
   so the header box height stays fixed and scrolling never jumps. */
.site-header .wordmark {
  background-image: none;
  mix-blend-mode: normal;
  width: auto; height: auto;
  font-size: 34px; line-height: 1;          /* scrolled / compact size */
  color: var(--c-on-primary);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  transform-origin: center top;
  transition: transform 0.26s var(--ease), color 0.26s var(--ease);
  will-change: transform;
}
/* at the very top: dark wordmark blown up and blended over the page */
.site-header:not(.site-header--compact) .wordmark {
  color: var(--ink);
  transform: scale(var(--wm-top-scale));
}
/* mobile: links are hidden so the wordmark is left-anchored - grow it from the
   left edge (not centre) so it can't clip off-screen (must sit AFTER the base
   center-top rule above to win) */
@media (max-width: 900px) { .site-header .wordmark { transform-origin: left top; } }

/* nav text + cart → cream when the colored header is up; hide search */
.site-header .nav__link { color: var(--c-on-primary); font-size: 18px; transition: color 0.26s var(--ease), opacity var(--dur-quick) var(--ease); }
.site-header .nav__link::after { background: var(--c-on-primary); }
.site-header .nav__cart-count { background: var(--c-on-primary); color: var(--c-primary); }
.site-header .nav__search { display: none; }

/* cart → its own soft bubble, anchored at the far right */
.site-header .nav__cart {
  color: var(--c-on-primary);
  font-size: 15px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-pill);
  padding: 7px 15px;
  transition: color 0.26s var(--ease), border-color 0.26s var(--ease);
}
/* nudge the guarantee left so it sits clear of the cart bubble */
.site-header .nav-wave { margin-right: 22px; transition: color 0.26s var(--ease); }

/* ── very-top (blended) state: everything reads dark on the page ── */
.site-header:not(.site-header--compact) .nav__link,
.site-header:not(.site-header--compact) .nav__cart,
.site-header:not(.site-header--compact) .nav-wave { color: var(--ink); }
.site-header:not(.site-header--compact) .nav__link::after { background: var(--ink); }
.site-header:not(.site-header--compact) .nav__cart { border-color: rgba(var(--c-ink-rgb), 0.30); }
.site-header:not(.site-header--compact) .nav__cart-count { background: var(--ink); color: var(--bone); }
.site-header:not(.site-header--compact) .nav__hamburger-bars,
.site-header:not(.site-header--compact) .nav__hamburger-bars::before,
.site-header:not(.site-header--compact) .nav__hamburger-bars::after { background: var(--ink); }

/* ── "60-day money-back" guarantee - letters ripple left→right in a looping wave ── */
.nav-wave {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-on-primary);
  white-space: nowrap;
  user-select: none;
}
.nav-wave__ch {
  display: inline-block;
  will-change: transform;
  animation: nav-wave-rise 2.8s ease-in-out infinite;
}
@keyframes nav-wave-rise {
  0%, 40%, 100% { transform: translateY(0); }
  14%           { transform: translateY(-0.55em); }
  28%           { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .nav-wave__ch { animation: none; } }
@media (max-width: 900px) { .nav-wave { display: none; } }   /* desktop flourish only */
.site-header .nav__hamburger { color: var(--c-on-primary); }
.site-header .nav__hamburger-bars,
.site-header .nav__hamburger-bars::before,
.site-header .nav__hamburger-bars::after { background: var(--c-on-primary); }


/* ====================================================================
   SHOP-LOCK BUY MODULE v2 - PDP-style: click-through gallery + ribbon,
   quantity + plan selectors, mini FAQ.
   ==================================================================== */
.shop-lock__gallery { display: grid; grid-template-columns: 68px 1fr; gap: 12px; align-items: start; position: relative; z-index: 1; }
.shop-lock__thumbs { display: flex; flex-direction: column; gap: 10px; }
.shop-lock__thumbs .pdp__thumb { width: 68px; aspect-ratio: 1/1; border-radius: var(--radius); overflow: hidden; background: var(--c-surface); border: 2px solid var(--ink-rule); padding: 0; cursor: pointer; }
.shop-lock__thumbs .pdp__thumb::after { display: none; }
.shop-lock__thumbs .pdp__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.shop-lock__thumbs .pdp__thumb.is-active { border-color: var(--c-primary); }
.shop-lock__main { position: relative; aspect-ratio: 1/1; border-radius: var(--radius-lg); overflow: hidden; background: #fff; margin: 0; }
.shop-lock__main::after { display: none; }
.shop-lock__main .pdp__hero-image { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-base) var(--ease); }
.shop-lock__main .pdp__hero-image.is-active { opacity: 1; }
/* white-background studio shots show the whole product (contain); texture macro fills the frame (cover) */
.shop-lock__main .pdp__hero-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.shop-lock__main .pdp__hero-image--cover img { object-fit: cover; }
.shop-lock__ribbon { position: absolute; top: 0; left: 0; right: 0; z-index: 3; background: var(--grad-flow); color: #fff; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px; }

/* rating -> bolder + underlined link */
.shop-lock__rating { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); text-decoration: none; }
.shop-lock__rating strong { font-weight: 800; }
.shop-lock__rating span:last-child { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.shop-lock__rating:hover span:last-child { color: var(--c-primary); }

/* simple product name */
.shop-lock__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4vw, 46px); line-height: 1.02; letter-spacing: -0.02em; margin: 0; }

/* selector groups */
.buy-group { display: flex; flex-direction: column; gap: var(--s-2); }
.buy-group__label { font-family: var(--font-display); font-weight: 800; font-size: 17px; }
.buy-group__hint { font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--c-accent); margin-left: 6px; }

/* quantity pills */
.qty-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.qty-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border: 2px solid var(--ink-rule); border-radius: var(--radius); cursor: pointer; text-align: center; transition: border-color var(--dur-quick) var(--ease), background var(--dur-quick) var(--ease); }
.qty-opt input { position: absolute; opacity: 0; pointer-events: none; }
.qty-opt:has(input:checked) { border-color: var(--c-primary); background: var(--c-primary-soft); }
.qty-opt__n { font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.qty-opt__save { font-size: 12px; color: var(--c-accent); font-weight: 600; min-height: 1em; }

/* plan cards */
.plan-opt { position: relative; display: block; padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 30px); border: 2px solid var(--ink-rule); border-radius: var(--radius-lg); background: var(--c-surface); cursor: pointer; margin-bottom: 10px; }
.plan-opt:has(input:checked) { border-color: var(--c-primary); background: var(--c-primary-soft); box-shadow: 0 12px 30px -20px rgba(var(--c-ink-rgb), 0.4); }
.plan-opt input { position: absolute; left: var(--s-4); top: calc(var(--s-4) + 4px); width: 18px; height: 18px; accent-color: var(--c-primary); }
.plan-opt__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.plan-opt__title { font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.plan-opt__price { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--c-primary); white-space: nowrap; }
.plan-opt__meta { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.plan-opt__flag { position: absolute; top: 0; right: var(--s-4); transform: translateY(-50%); background: var(--c-primary); color: #fff; font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-pill); }

/* buy CTA subline */
.buy-cta__sub { text-align: center; font-size: 13px; color: var(--ink-2); margin: -4px 0 0; }
.buy-cta__sub #buySave { color: var(--c-accent); font-weight: 600; }

/* mini FAQ */
.buy-faq { display: flex; flex-direction: column; border-top: 1px solid var(--ink-rule); margin-top: var(--s-2); }
.buy-faq__item { border-bottom: 1px solid var(--ink-rule); }
.buy-faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 14px 0; font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.buy-faq__item summary::-webkit-details-marker { display: none; }
.buy-faq__chev { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.buy-faq__chev::before, .buy-faq__chev::after { content: ""; position: absolute; background: var(--ink); border-radius: 1px; }
.buy-faq__chev::before { left: 0; top: 7px; width: 16px; height: 2px; }
.buy-faq__chev::after { left: 7px; top: 0; width: 2px; height: 16px; transition: transform var(--dur-quick) var(--ease); }
.buy-faq__item[open] .buy-faq__chev::after { transform: scaleY(0); }   /* + becomes - when open */
.buy-faq__a { padding: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }

@media (max-width: 900px) {
  .shop-lock__gallery { grid-template-columns: 54px 1fr; }
  .shop-lock__thumbs .pdp__thumb { width: 54px; }
}

/* ---- gallery v2: bigger main image, no white frame, larger + dimmed thumbs ---- */
.shop-lock__grid { grid-template-columns: 1.12fr 0.88fr; }
.shop-lock__media { aspect-ratio: auto; background: transparent; border-radius: 0; overflow: visible; }
.shop-lock__gallery { grid-template-columns: 88px 1fr; }
.shop-lock__main { background: #fff; border: 0; }
.shop-lock__thumbs .pdp__thumb {
  width: 88px;
  opacity: 0.55;
  filter: grayscale(35%);
  transition: opacity var(--dur-quick) var(--ease), filter var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease);
}
.shop-lock__thumbs .pdp__thumb:hover { opacity: 0.85; filter: grayscale(0); }
.shop-lock__thumbs .pdp__thumb.is-active { opacity: 1; filter: none; border-color: var(--c-primary); }
@media (max-width: 900px) {
  .shop-lock__grid { grid-template-columns: 1fr; }
  .shop-lock__gallery { grid-template-columns: 64px 1fr; }
  .shop-lock__thumbs .pdp__thumb { width: 64px; }
}

/* ---- urgency countdown + Buy-it-now secondary ---- */
.buy-urgency { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 var(--s-2); font-size: 14px; font-weight: 600; color: var(--ink); }
.buy-urgency__icon { font-size: 15px; }
.buy-urgency strong { color: var(--c-accent); font-variant-numeric: tabular-nums; }
.buy-now { background: var(--c-surface); color: var(--c-primary); border: 2px solid var(--c-primary); margin-top: 10px; }
.buy-now:hover, .buy-now:focus { background: var(--c-primary); color: var(--c-on-primary); }

/* ---- giant full-bleed brand wordmark at the bottom ---- */
.brand-bleed { overflow: hidden; line-height: 0; text-align: center; padding-top: var(--s-7); }
.brand-bleed__word {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 31vw;          /* near-full width, but every letter stays inside (no clipping) */
  line-height: 0.95;        /* full glyphs - tops of the l's not clipped */
  letter-spacing: -0.04em;
  white-space: nowrap;
  background: var(--grad-flow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-top: 0.12em;      /* breathing room above ascenders */
  margin-bottom: -0.22em;   /* crop only the empty descent so the baseline sits flush to the page bottom */
}

/* chat bubble hidden for now (remove this rule to bring the concierge widget back) */
#chatWidget { display: none !important; }

/* ===== FINAL PALETTE - component role overrides ===== */
/* Header bg is handled by the blended/compact states above (transparent → ink). */
.site-header--compact .nav__link:hover { color: var(--c-cobalt-light); opacity: 1; }   /* light-cobalt secondary cue */
/* Primary (crimson) buttons deepen to deep-crimson on hover */
.btn--primary:hover { background: var(--c-primary-deep); }
/* Trust bar → true grey neutral surface */
.trust-band { background: var(--c-grey); }

/* Gallery image #2 is now square - fills the box like the others (cover) */

/* ====================================================================
   WELCOME POPUP v2 - photo background + overlaid offer; reopen pill
   ==================================================================== */
.welcome-modal--photo {
  padding: 0;
  width: min(880px, calc(100% - 36px));
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #f8f0e8;        /* matches the photo's cream so the edges blend seamlessly */
  color: var(--c-ink);
  text-align: center;
}
/* full photo, no crop: the box matches the image's aspect ratio so it shows
   edge-to-edge (no letterbox, no crop). Its cream right margin blends in. */
.welcome-modal--photo::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0; width: auto;
  aspect-ratio: 1122 / 1402;
  z-index: 0;
  background: url('images/popup-jars.png') center / cover no-repeat;
}
/* light cream wash on the far right so the copy always reads */
.welcome-modal--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to right, rgba(248,240,232,0) 52%, rgba(248,240,232,0.8) 68%, #f8f0e8 80%);
}
.welcome-modal--photo .welcome-modal__inner {
  position: relative;
  z-index: 1;
  width: min(44%, 380px);
  margin-left: auto;
  margin-right: clamp(16px, 4vw, 72px);   /* nudge the copy toward the right edge */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: min(80vh, 720px);
  padding: var(--s-6) var(--s-5);
}
.welcome-modal--photo .welcome-modal__close { display: none; }
.welcome-modal--photo .welcome-modal__eyebrow {
  color: var(--c-ink); opacity: 0.7; margin-bottom: var(--s-2);
  font-family: var(--font-body); letter-spacing: 0.16em;
  font-size: clamp(13px, 1.1vw, 15px);
}
.welcome-modal--photo .welcome-modal__head {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  font-size: clamp(32px, 4.4vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  margin: 0 0 var(--s-4);
  max-width: 22ch;
}
.welcome-modal--photo .welcome-modal__pct {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.18em;
  color: var(--c-primary);
  letter-spacing: -0.01em;
}
.welcome-modal--photo .welcome-modal__form { gap: var(--s-3); width: 100%; }
.welcome-modal--photo .welcome-modal__form .btn--primary {
  width: auto; align-self: center;
  padding: 12px 28px; font-size: 14px;   /* smaller "Claim my savings" */
}
.welcome-modal--photo .welcome-modal__decline {
  position: absolute; left: 0; right: 0;
  bottom: clamp(16px, 3vw, 28px);
  text-align: center;   /* centered to the screen */
}
.welcome-modal--photo .welcome-modal__input {
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(13,13,26,0.10);
  border-radius: var(--radius-pill);
  padding: 16px 20px;
  color: var(--c-ink);
  font-size: 16px;
  text-align: center;
}
.welcome-modal--photo .welcome-modal__input::placeholder { color: var(--c-ink-muted); }
.welcome-modal--photo .btn--primary { width: 100%; }
.welcome-modal--photo .welcome-modal__status { color: var(--c-ink); font-style: normal; }
.welcome-modal--photo .welcome-modal__status.is-success { color: var(--apothecary-green, var(--c-ink)); }
.welcome-modal--photo .welcome-modal__decline {
  align-self: center;
  color: var(--c-ink);
  opacity: 0.7;
  text-transform: none;
  font-family: var(--font-body);
  letter-spacing: 0;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.welcome-modal--photo .welcome-modal__decline:hover { color: var(--c-ink); opacity: 1; }

/* phones: fullscreen popup so the jars photo spreads edge-to-edge */
@media (max-width: 520px) {
  .welcome-modal--photo {
    width: 100vw; max-width: 100vw;
    height: 100dvh; max-height: 100dvh;
    top: 0; left: 0; transform: none;
    border-radius: 0;
  }
  .welcome-modal--photo.is-open { transform: none; }
  /* mobile: photo fills the screen (aspect box would overflow a tall phone) */
  .welcome-modal--photo::before { width: 100%; aspect-ratio: auto; background-size: cover; }
  .welcome-modal--photo .welcome-modal__inner {
    width: min(54%, 460px);
    margin-left: auto;
    min-height: 100dvh;
    justify-content: center;
    padding: calc(var(--s-6) + env(safe-area-inset-top)) clamp(10px, 3vw, 18px) calc(var(--s-7) + env(safe-area-inset-bottom));   /* hug the right edge */
  }
  .welcome-modal--photo .welcome-modal__head { font-size: clamp(26px, 6.4vw, 36px); }
  .welcome-modal--photo .welcome-modal__pct { font-size: 1.7em; }   /* only the 10% gets bigger */
  /* smaller submit button on phones */
  .welcome-modal--photo .welcome-modal__form .btn--primary {
    width: auto; align-self: center;
    padding: 12px 22px; font-size: 14px;
  }
  /* "I'll pay full price" pinned to the very bottom, centered to the screen */
  .welcome-modal--photo .welcome-modal__decline {
    position: fixed;
    left: 50%; right: auto;
    transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom) + 14px);
    text-align: center;
  }
}

/* reopen tab → small crimson pill, bottom-left, reachable on every screen */
.save-tab {
  top: 50%;
  right: 0;
  left: auto;
  bottom: auto;
  transform: translateY(-50%);
  flex-direction: column;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  gap: 10px;
  padding: 26px 16px;
  font-size: 16px;
  font-weight: 700;
  background: #fff;
  color: #000;
  mix-blend-mode: difference;
  border-radius: 14px 0 0 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: none;
}
.save-tab:hover { background: #e0e0e0; }
.save-tab__close { writing-mode: horizontal-tb; opacity: 0.7; }
@media (max-width: 900px) {
  .save-tab { display: inline-flex !important; left: auto; right: 0; bottom: auto; top: 50%; transform: translateY(-50%); font-size: 11px; padding: 14px 9px; letter-spacing: 0.08em; }
  .save-tab__get { display: none; }
}

/* ============================================================
   MEGAFOOT - gridded apothecary footer (homepage)
   Cream base, ink-black blocks, giant email capture, link grid,
   and a sixty-night guarantee seal. Recreated table-grid format.
   ============================================================ */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.megafoot {
  --mf-line: 1.5px solid var(--c-ink);
  --mf-col-l: clamp(180px, 21%, 340px);
  --mf-col-r: clamp(168px, 19%, 264px);
  background: var(--c-cream);
  color: var(--c-ink);
  border-top: var(--mf-line);
  border-bottom: var(--mf-line);
}

/* ── celebration ticker ── */
.megafoot__ticker {
  overflow: hidden;
  border-bottom: var(--mf-line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.megafoot__ticker-track {
  display: flex;
  width: max-content;
  animation: megafoot-ticker 48s linear infinite;
}
.megafoot__ticker-group {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex: 0 0 auto;
  min-width: 100vw;
  white-space: nowrap;
}
.megafoot__ticker-item {
  font-family: var(--font-serif);
  font-size: clamp(15px, 1.55vw, 22px);
  line-height: 1;
  padding: 32px 40px;
  letter-spacing: -0.005em;
}
@keyframes megafoot-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── signup row ── */
.megafoot__signup {
  display: grid;
  grid-template-columns: var(--mf-col-l) 1fr var(--mf-col-r);
  border-bottom: var(--mf-line);
}
.megafoot__signup-label {
  display: flex;
  align-items: center;
  padding: 20px clamp(20px, 2.4vw, 40px);
  border-right: var(--mf-line);
}
.megafoot__signup-label p {
  font-family: var(--font-serif);
  font-size: clamp(15px, 1.45vw, 21px);
  line-height: 1.16;
  margin: 0;
}
.megafoot__signup-label b {
  font-weight: 700;
  font-variant: all-small-caps;
  letter-spacing: 0.04em;
}
.megafoot__signup-field {
  position: relative;
  display: flex;
  align-items: center;
  padding: 6px clamp(20px, 2.4vw, 40px);
  border-right: var(--mf-line);
  min-width: 0;
}
.megafoot__signup-field input {
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  padding: 22px 0;
  color: var(--c-ink);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 5.2vw, 76px);
  letter-spacing: -0.02em;
  line-height: 1;
}
.megafoot__signup-field input::placeholder { color: var(--c-ink); opacity: 1; }
.megafoot__signup-field input:focus::placeholder { opacity: 0.32; }
.megafoot__signup-field .status {
  position: absolute;
  left: clamp(20px, 2.4vw, 40px);
  bottom: 8px;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 13px;
  color: var(--c-ink-muted);
}
.megafoot__signup-field .status.is-error { color: var(--error, #c0392b); font-style: normal; }
.megafoot__signup-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-ink);
  color: var(--c-cream);
  border: 0;
  cursor: pointer;
  padding: 20px;
  transition: background var(--dur-quick, 150ms) var(--ease, ease-out);
}
.megafoot__signup-arrow svg { width: clamp(72px, 60%, 120px); height: auto; }
.megafoot__signup-arrow:hover { background: var(--c-primary); }

/* ── signup - offer variant (discount headline + email/phone + consent) ── */
.megafoot__signup--offer .megafoot__signup-label {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
}
.megafoot__signup-offer {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
  color: var(--c-ink);
}
.megafoot__signup-offer b { color: var(--c-primary); font-weight: 800; }
.megafoot__signup-note {
  font-family: var(--font-body);
  font-size: clamp(12px, 0.95vw, 13.5px);
  line-height: 1.4;
  color: var(--c-ink-muted);
  margin: 0;
}
.megafoot__signup-note span { color: var(--c-ink); font-weight: 600; }
.megafoot__signup--offer .megafoot__signup-field {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.megafoot__signup-inputs { display: flex; flex-direction: column; }
.megafoot__signup-inputs input {
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--c-ink);
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  line-height: 1;
}
.megafoot__signup-inputs input::placeholder { color: var(--c-ink); opacity: 1; }
.megafoot__signup-inputs input:focus::placeholder { opacity: 0.32; }
.megafoot__signup-inputs input[type="email"] {
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 48px);
  padding: 6px 0;
}
.megafoot__signup-inputs input[type="tel"] {
  font-weight: 500;
  font-size: clamp(15px, 1.5vw, 20px);
  padding: 12px 0 6px;
  border-top: 1px solid var(--ink-rule);
  color: var(--c-ink-muted);
}
.megafoot__signup-inputs input[type="tel"]::placeholder { color: var(--c-ink-muted); }
.megafoot__signup--offer .megafoot__signup-field .status { position: static; margin-top: 4px; }
.megafoot__signup-consent {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.45;
  color: var(--c-ink-muted);
  margin: 4px 0 0;
  max-width: 60ch;
}
.megafoot__signup-consent a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 2px; }

/* ── trust strip (gridded proof band) ── */
.trust-strip {
  background: var(--c-surface);
  border-top: 1.5px solid var(--c-ink);
}
.trust-strip__row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.trust-strip__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 0.8vw, 12px);
  text-align: left;
  padding: clamp(28px, 3.4vw, 46px) clamp(8px, 1.2vw, 20px);
  border-left: 1px solid var(--ink-rule);
}
.trust-strip__cell:first-child { border-left: 0; }
.trust-strip__icon {
  flex: 0 0 auto;
  width: clamp(24px, 2.4vw, 30px);
  height: clamp(24px, 2.4vw, 30px);
  color: var(--c-primary);
  display: block;
}
.trust-strip__lab {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(12px, 1.15vw, 15px);
  line-height: 1.05;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-ink);
}
@media (max-width: 720px) {
  .trust-strip__row { grid-template-columns: 1fr; }
  .trust-strip__cell {
    gap: 12px;
    padding: 20px 18px;
    border-left: 0;
    border-top: 1px solid var(--ink-rule);
  }
  .trust-strip__cell:first-child { border-top: 0; }
  .trust-strip__icon { width: 24px; height: 24px; }
}

/* ── info row ── */
.megafoot__info {
  display: grid;
  grid-template-columns: var(--mf-col-l) 1fr var(--mf-col-r);
}
.megafoot__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--c-ink);
  color: var(--c-cream);
  border-right: var(--mf-line);
  padding: 32px 16px;
}
.megafoot__logo-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(56px, 8vw, 122px);
  line-height: 0.8;
  letter-spacing: -0.04em;
}
.megafoot__logo-est {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  opacity: 0.78;
}

.megafoot__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-right: var(--mf-line);
}
.megafoot__col { display: flex; flex-direction: column; }
.megafoot__col:first-child { border-right: var(--mf-line); }
.megafoot__col li {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px clamp(18px, 2vw, 32px);
  border-bottom: var(--mf-line);
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--c-ink);
}
.megafoot__col li:last-child { border-bottom: 0; }
.megafoot__col a { color: inherit; font-weight: 700; transition: color var(--dur-quick, 150ms) var(--ease, ease-out); }
.megafoot__col a:hover { color: var(--c-primary); }
.megafoot__col--contact li { font-weight: 400; }
.megafoot__col--contact a { font-weight: 400; }
.megafoot__lead { font-weight: 700; letter-spacing: 0.06em; }
.megafoot__col-sub { gap: clamp(16px, 4vw, 56px); }
.megafoot__copy {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--c-ink-muted);
}

/* ── guarantee seal ── */
.megafoot__seal {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}
.megafoot__seal-svg { width: 100%; max-width: 200px; height: auto; }
.megafoot__seal-star { fill: var(--c-ink); }
.megafoot__seal-ring-text {
  fill: var(--c-cream);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.14em;
}
.megafoot__seal-top,
.megafoot__seal-big,
.megafoot__seal-mid,
.megafoot__seal-bottom {
  fill: var(--c-cream);
  text-anchor: middle;
  font-family: var(--font-display);
}
.megafoot__seal-top { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.megafoot__seal-big { font-weight: 800; font-size: 58px; letter-spacing: -0.03em; }
.megafoot__seal-mid { font-weight: 700; font-size: 13px; letter-spacing: 0.28em; }
.megafoot__seal-bottom { font-weight: 500; font-size: 11px; letter-spacing: 0.16em; }

@media (prefers-reduced-motion: reduce) {
  .megafoot__ticker-track { animation: none; }
}

/* ── tablet / mobile ── */
@media (max-width: 900px) {
  .megafoot__signup { grid-template-columns: 1fr clamp(110px, 22%, 180px); }
  .megafoot__signup-label { grid-column: 1 / -1; border-right: 0; border-bottom: var(--mf-line); }
  .megafoot__info { grid-template-columns: 1fr; }
  .megafoot__logo {
    flex-direction: row;
    gap: 18px;
    justify-content: flex-start;
    border-right: 0;
    border-bottom: var(--mf-line);
    padding: 22px clamp(18px, 2vw, 32px);
  }
  .megafoot__logo-mark { font-size: 54px; }
  .megafoot__nav { border-right: 0; }
  .megafoot__seal { border-top: var(--mf-line); padding: 32px; }
  .megafoot__seal-svg { max-width: 168px; }
}
@media (max-width: 560px) {
  .megafoot__nav { grid-template-columns: 1fr; }
  .megafoot__col:first-child { border-right: 0; border-bottom: var(--mf-line); }
  .megafoot__signup-field input { font-size: clamp(26px, 8vw, 40px); }
}

/* ====================================================================
   REDESIGN 2026-06-22 - HIGH-ENERGY ELECTRIC COBALT
   Streetwear-adjacent, strictly unisex, high-contrast DTC. Sharp 0px
   corners (token-driven), 1px midnight-navy borders, hard graphic
   drop shadows, bold uppercase typography. Cobalt #0022FF is the spine.
   This layer is appended last so it wins the cascade intentionally.
   ==================================================================== */

/* ---- NAV: clean bar, bold uppercase tracking ---- */
.nav__link,
.site-header .nav__link { text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; }
.site-header .nav__cart { text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; }
.nav__search { border-radius: 0; border-color: var(--c-ink); }

/* ---- ALERT BAR: solid electric cobalt, stark white, heavy track ---- */
.sale-bar { background: var(--c-primary); }
.site-header .sale-bar { background: var(--c-primary); }
.site-header .sale-bar__item { font-weight: 700; letter-spacing: 0.24em; }

/* ---- HOMEPAGE HEADER: use the standard immersive header ---- */
/* At the very top the giant blended `vellume` wordmark sits over the hero with
   no hairline; on scroll it fades into the compact navy bar. The split hero
   rises behind the transparent header (see .hero--split margin-top below), and
   a light top wash keeps the navy chrome readable over the cobalt half. */

/* ---- BUTTONS: sharp, hard-edged, invert-on-hover ---- */
.btn { border-radius: var(--radius); }
.btn--primary,
.btn--primary:link,
.btn--primary:visited,
.btn--primary:focus { background: var(--c-primary); color: #fff; border: 1px solid var(--c-ink); }
.btn--primary:hover,
.btn--primary:active { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.btn--ghost,
.btn--ghost:link,
.btn--ghost:visited { background: transparent; color: var(--c-ink); border: 1px solid var(--c-ink); }
.btn--ghost:hover,
.btn--ghost:focus { background: var(--c-ink); color: #fff; }

/* big conversion pill → square hard-shadow block */
.btn-cta-pill,
.btn-cta-pill:visited {
  border-radius: var(--radius);
  background: var(--c-primary);
  color: #fff;
  border: 1px solid var(--c-ink);
  box-shadow: var(--shadow-hard-sm);
}
.btn-cta-pill:hover,
.btn-cta-pill:focus-visible {
  background: var(--c-ink);
  color: #fff;
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--c-primary);
}
/* keep the inverted pill legible on the cobalt final-promise band */
.final-promise .btn-cta-pill,
.final-promise .btn-cta-pill:visited {
  background: var(--c-surface); color: var(--c-primary); border-color: var(--c-surface);
  box-shadow: 6px 6px 0 rgba(var(--c-ink-rgb), 0.55);
}
.final-promise .btn-cta-pill:hover { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }

/* ---- HARD-SHADOW CARDS ---- */
.why__card { background: var(--c-surface); border: 1px solid var(--c-ink); box-shadow: var(--shadow-hard); }
.why__media { border-bottom: 1px solid var(--c-ink); }
.review-card { background: var(--c-surface); border: 1px solid var(--c-ink); box-shadow: var(--shadow-hard-sm); padding: var(--s-4); }
.cellar__photo { border: 1px solid var(--c-ink); box-shadow: var(--shadow-hard); border-radius: 0; }

/* ---- LOCK & SCROLL: keep the flow, reformat to a framed industrial block ---- */
.shop-lock__main {
  border: 1px solid var(--c-ink);
  box-shadow: var(--shadow-hard);
  background: var(--c-cream);
}
.shop-lock__thumbs .pdp__thumb { border: 1px solid var(--c-ink); border-radius: 0; }
.shop-lock__thumbs .pdp__thumb.is-active { border-color: var(--c-primary); box-shadow: var(--shadow-hard-sm); }
.shop-lock__ribbon { border-bottom: 1px solid var(--c-ink); }
/* buy options read as crisp boxed selectors */
.shop-lock__benefit { border: 1px solid var(--c-ink); border-radius: 0; }

/* ---- gallery v3: bigger landscape hero, thumbs in a row below ----
   The product shots are 5:4 on white. Matching the frame to 5/4 + cover
   lets the jar/swatch fill edge-to-edge (no white bands, no cropping),
   and dropping the thumbs to a row gives the main image the full column. */
.shop-lock__grid {
  grid-template-columns: 1.18fr 0.92fr;
  padding-left: clamp(20px, 4vw, 64px);
  padding-right: clamp(20px, 4vw, 64px);
}
.shop-lock__gallery { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 14px; }
.shop-lock__main { width: 100%; aspect-ratio: 5 / 4; }
.shop-lock__main .pdp__hero-image img,
.shop-lock__main .pdp__hero-image--cover img { object-fit: cover; }
.shop-lock__thumbs { flex-direction: row; justify-content: flex-start; gap: 10px; }
.shop-lock__thumbs .pdp__thumb { width: clamp(64px, 8vw, 92px); }
@media (max-width: 900px) {
  .shop-lock__grid {
    grid-template-columns: 1fr;
    padding-left: clamp(16px, 5vw, 28px);
    padding-right: clamp(16px, 5vw, 28px);
  }
  .shop-lock__main { aspect-ratio: 5 / 4; }
  .shop-lock__thumbs .pdp__thumb { width: clamp(56px, 16vw, 78px); }
}

/* ---- US vs THEM: industrial 1px grid, uppercase, cobalt fills ---- */
.vs-them__board { border: 1px solid var(--c-ink); box-shadow: var(--shadow-hard); background: var(--c-surface); }
.vs-them__highlight {
  background: var(--c-primary-soft);
  border-radius: 0;
  border-left: 1px solid var(--c-ink);
  border-right: 1px solid var(--c-ink);
}
.vs-them__table th,
.vs-them__table td { border: 1px solid var(--c-ink); }
.vs-them__th-spacer { border: 0; }
.vs-them__table thead th { background: var(--c-cream); }
.vs-them__th-brand { background: var(--c-primary); }
.vs-them__th-brand .vs-them__col-label { color: #fff; }
.vs-them__table tbody tr,
.vs-them__table tbody tr:first-child { border-bottom: 1px solid var(--c-ink); }   /* solid, not dashed */
.vs-them__col-img,
.vs-them__col-img--brand,
.vs-them__col-img--them { border-radius: 0; }
.vs-them__partial { border-radius: 0; border-color: var(--c-ink); color: var(--c-ink); }

/* ---- INGREDIENT TICKER: fast infinite uppercase marquee ---- */
.ticker {
  background: var(--c-ink);
  color: #fff;
  overflow: hidden;
  border-top: 1px solid var(--c-ink);
  border-bottom: 1px solid var(--c-ink);
  padding: 18px 0;
}
.ticker__track { display: flex; width: max-content; animation: ticker-roll 26s linear infinite; }
.ticker__group {
  display: flex; align-items: center; justify-content: space-around;
  flex: 0 0 auto; min-width: 100vw; white-space: nowrap;
}
.ticker__item {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(16px, 2.2vw, 28px); letter-spacing: 0.02em;
  text-transform: uppercase; padding: 0 22px;
}
.ticker__star { color: var(--c-lavender); padding: 0 4px; font-size: 0.8em; }
@keyframes ticker-roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; transform: translateX(0); } }
@media (max-width: 600px) { .ticker { padding: 13px 0; } .ticker__item { font-size: 15px; padding: 0 16px; } }

/* ---- HERO: full-bleed plinth banner, copy overlaid on the off-white left ---- */
/* The photo carries the off-white-wall / product-plinth split itself, so it runs
   edge to edge, uncropped (width:100%, natural height). It tucks up behind the
   transparent header; a top wash blends the giant navy wordmark into the header. */
.hero--photo {
  position: relative;
  margin-top: calc(-1 * var(--header-h, 118px));   /* rise behind the transparent header */
  padding-bottom: 0;                                /* kill the section padding band below the photo */
  overflow: hidden;
  border-bottom: 1px solid var(--c-ink);
  background: #fafafa;                              /* matches the photo's near-white ground */
}
.hero--photo__img { width: 100%; height: auto; display: block; margin-top: clamp(-90px, -5.5vw, -44px); }  /* pull the banner up so the jar sits higher; overflow:hidden clips the off-white wall off the top */
.hero--photo__img-mobile { display: none; }   /* desktop: hidden (mobile shows the portrait two-jars shot) */
/* top wash → the giant wordmark + nav chrome blend into the header */
.hero--photo::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(150px, 22vw, 230px);
  background: linear-gradient(to bottom, #fafafa 0%, #fafafa 30%, rgba(250,250,250,0) 100%);
  z-index: 2;
  pointer-events: none;
}
/* copy floats over the off-white upper-left of the photo - percent-based so it
   tracks the photo's empty zone at every screen width */
.hero--photo__copy {
  position: absolute;
  top: 0; bottom: 5%; left: 0;   /* extend the box lower so the centered copy sits further down */
  width: 47%;
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--s-4);
  padding: calc(var(--header-h, 118px) * 0.9) var(--s-4) 0 clamp(52px, 7.5vw, 124px);   /* extra left pad nudges the copy slightly right */
  z-index: 3;
}
.hero-split__eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--c-primary); font-weight: 500;
}
.hero-split__head {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(48px, 6.2vw, 100px); line-height: 0.96;
  letter-spacing: -0.03em; text-transform: uppercase; color: var(--c-ink); margin: 0;
}
.hero-split__head em { font-style: normal; color: var(--c-primary); }
.hero-split__sub { font-size: 20px; line-height: 1.5; color: var(--c-ink-muted); max-width: 42ch; margin: 0; }
.hero-split__cta-row { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-2); }
.hero-split__cta { box-shadow: var(--shadow-hard-sm); }
.hero-split__price { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink); }
.hero-split__proof { display: flex; align-items: center; gap: 10px; }
.hero-split__stars { color: var(--c-primary); letter-spacing: 2px; }
.hero-split__proof-text { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-muted); }
/* mobile: stacked hero - bold headline + a very clear "Get Yours Now" CTA on
   top, then the two-jars product photo below; scrolls into the rest of the page */
@media (max-width: 860px) {
  .hero--photo {
    margin-top: calc(-1 * var(--header-h, 118px));
    height: auto;                  /* mobile: stacked layout, not viewport-capped */
    min-height: 0;
    position: relative;            /* image fills the hero; copy overlays its blank top */
    display: block;
    text-align: center;
    background: #fff;              /* match the photo's white top so there's no visible seam/panel behind the copy */
    border-bottom: 0;
  }
  .hero--photo::before { display: none; }
  .hero--photo__img { display: none; }                                   /* hide desktop landscape banner */
  .hero--photo__img-mobile { display: block; width: 100%; height: 62vh; object-fit: cover; object-position: 50% 100%; margin-top: clamp(12px, 3vw, 24px); } /* taller reveal shows the jar tops; bottom-anchored so bottoms stay whole */
  .hero--photo__copy {
    position: static; width: 100%;     /* normal flow: copy sits in the white space ABOVE the jars, no overlap */
    background: none;
    align-items: center; text-align: center;
    gap: var(--s-3);
    padding: calc(var(--header-h, 118px) * 1.15) var(--gutter) clamp(16px, 5vw, 28px);   /* clear the header so the headline isn't tucked under the wordmark on load */
  }
  .hero-split__head { font-size: clamp(34px, 11vw, 56px); }
  .hero-split__sub { display: none; }   /* mobile: drop the paragraph */
  .hero-split__cta-row { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; margin-top: var(--s-1); }
  .hero-split__cta { width: 100%; justify-content: center; font-size: 16px; padding: 18px 22px; }
  .hero-split__price { text-align: center; }
}

/* ---- MOBILE NAV: hamburger left · wordmark centered · cart right ---- */
@media (max-width: 900px) {
  .home-redesign .site-header .nav__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--s-3);
  }
  .home-redesign .site-header .nav__hamburger { justify-self: start; }
  .home-redesign .site-header .wordmark { justify-self: center; transform-origin: center top; }
  .home-redesign .site-header .nav__right { justify-self: end; }
}

/* ---- MOBILE MENU: partial slide-out drawer from the left, with backdrop ---- */
.mobile-scrim {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(var(--c-ink-rgb), 0.42);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease), visibility var(--dur-base) var(--ease);
}
.mobile-scrim.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.home-redesign .mobile-menu {
  inset: 0 auto 0 0;                  /* pin to the left edge, full height */
  width: min(78vw, 320px);
  background: var(--c-surface);
  border-right: 1px solid var(--c-ink);
  box-shadow: 10px 0 0 rgba(var(--c-ink-rgb), 0.10);
  transform: translateX(-100%);
  padding: var(--s-4) var(--s-5) var(--s-6);
}
.home-redesign .mobile-menu.is-open { transform: translateX(0); }
.home-redesign .mobile-menu__top { justify-content: flex-end; margin-bottom: var(--s-6); }
.home-redesign .mobile-menu__links { gap: var(--s-3); }
.home-redesign .mobile-menu__link { font-size: 30px; font-weight: 700; }

/* ---- EDITORIAL IMAGE FRAME (sharp-shadow flash imagery) ---- */
.editorial { padding: 0; }
.editorial__frame {
  max-width: 1040px; margin: 0 auto;
  border: 1px solid var(--c-ink); box-shadow: var(--shadow-hard);
  background: var(--c-surface); line-height: 0;
}
.editorial__frame img { width: 100%; height: auto; display: block; }
.editorial__cap {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--c-ink-muted); text-align: center; margin: var(--s-4) 0 0;
}
/* banner variant: full-bleed, the image IS the section */
.editorial__frame--banner {
  position: relative; line-height: 0;
  max-width: none; width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  border: 0; border-radius: 0; box-shadow: none; background: none;
}
.editorial__frame--banner:hover { transform: none; }
.editorial__overlay {
  position: absolute; top: 0; bottom: 0; left: 0;
  transform: translate(clamp(28px, 4.5vw, 84px), -16px);
  width: min(56%, 560px); line-height: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(18px, 3.4vw, 56px) clamp(20px, 3.6vw, 60px);
  color: #fff; text-align: left;
  background: linear-gradient(to right, rgba(16,18,30,0.78) 0%, rgba(16,18,30,0.42) 62%, rgba(16,18,30,0) 100%);
}
.editorial__eyebrow {
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(11px, 1vw, 13px); letter-spacing: 0.2em;
  text-transform: uppercase; color: #fff; opacity: 0.72;
  margin: 0 0 clamp(12px, 1.6vw, 22px);
}
.editorial__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: clamp(6px, 1vw, 14px);
}
.editorial__list li {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(22px, 3vw, 42px); line-height: 1.04;
  letter-spacing: -0.02em; color: #fff;
}
@media (max-width: 600px) {
  .editorial__overlay { width: 64%; padding: 16px 18px; }
  .editorial__list li { font-size: clamp(16px, 4.6vw, 26px); }
}

/* crisp ink hairlines around the cobalt brand blocks */
.vx-flash { border-top: 1px solid var(--c-ink); border-bottom: 1px solid var(--c-ink); }

/* ---- PDP lock & scroll: same framed industrial product stage ---- */
.pdp__hero { border: 1px solid var(--c-ink); box-shadow: var(--shadow-hard); background: var(--c-cream); }
.pdp__thumb { border: 1px solid var(--c-ink); border-radius: 0; }
.pdp__thumb.is-active { border-color: var(--c-primary); box-shadow: var(--shadow-hard-sm); }

/* ════════════════════════════════════════════════════════════════════
   SOFTEN / FLOW - 2026-06-24
   Eases the high-energy streetwear sharpness into something flowier and
   lighter: partial rounding, soft blurred shadows (not hard offsets),
   hairline borders, and product imagery that floats + swaps on hover.
   Re-declares the radius/shadow tokens (later :root wins) then unsharpens
   the elements that hard-coded 0px corners / hard graphic shadows.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --radius-sm:   8px;
  --radius:     14px;
  --radius-lg:  22px;
  --radius-pill: 999px;
  /* hard graphic offsets → soft, blurred, light-on-the-eyes lifts */
  --shadow-hard:    0 22px 50px -28px rgba(var(--c-ink-rgb), 0.30);
  --shadow-hard-sm: 0 12px 30px -20px rgba(var(--c-ink-rgb), 0.24);
  --hairline: 1px solid rgba(var(--c-ink-rgb), 0.12);
}

/* ---- soft motion baseline for the things that lift ---- */
.why__card, .review-card, .cellar__photo, .shop-lock__main, .editorial__frame,
.btn-cta-pill, .why__media img, .why__media-alt {
  transition: transform 360ms cubic-bezier(.22,.61,.36,1),
              box-shadow 360ms cubic-bezier(.22,.61,.36,1),
              opacity 360ms ease;
}

/* ---- cards: hairline + soft float, gentle lift on hover ---- */
.why__card    { border: var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-hard); }
.review-card  { border: var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-hard-sm); }
.why__card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(var(--c-ink-rgb), 0.34); }

/* ---- product imagery: round + float, no hard frame ---- */
.shop-lock__main {
  border: var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard);
  overflow: hidden;
}
.pdp__hero { border: var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-hard); overflow: hidden; }
.shop-lock__thumbs .pdp__thumb,
.pdp__thumb { border: var(--hairline); border-radius: var(--radius-sm); overflow: hidden; }
.shop-lock__thumbs .pdp__thumb.is-active,
.pdp__thumb.is-active { border-color: var(--c-primary); box-shadow: var(--shadow-hard-sm); }
.shop-lock__main img, .pdp__hero img { transition: transform 600ms cubic-bezier(.22,.61,.36,1); }
.shop-lock__main:hover img, .pdp__hero:hover img { transform: scale(1.035); }

.cellar__photo { border: var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-hard); }
.cellar__photo-img { border-radius: inherit; }
.editorial__frame { border-radius: var(--radius-lg); box-shadow: var(--shadow-hard); overflow: hidden; }
.editorial__frame:hover { transform: translateY(-4px); }
.ritual-flow__hero-img { border-radius: var(--radius-lg); }

/* ---- buy-option selectors + lock UI: soft, not boxed ---- */
.shop-lock__benefit { border: var(--hairline); border-radius: var(--radius); }

/* ---- us vs them: keep the grid, lighten it ---- */
.vs-them__board { border: var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-hard); overflow: hidden; }
.vs-them__table th, .vs-them__table td,
.vs-them__highlight, .vs-them__table tbody tr,
.vs-them__table tbody tr:first-child { border-color: rgba(var(--c-ink-rgb), 0.12); }
.vs-them__col-img, .vs-them__col-img--brand, .vs-them__col-img--them { border-radius: var(--radius-sm); }

/* ---- primary CTA pill: soft float + gentle lift (no hard cobalt offset) ---- */
.btn-cta-pill, .btn-cta-pill:visited {
  border-radius: var(--radius-pill);
  border-color: transparent;
  box-shadow: 0 14px 30px -14px rgba(var(--c-ink-rgb), 0.40);
}
.btn-cta-pill:hover, .btn-cta-pill:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 22px 40px -16px rgba(var(--c-ink-rgb), 0.46);
}
.final-promise .btn-cta-pill, .final-promise .btn-cta-pill:visited {
  box-shadow: 0 16px 34px -16px rgba(var(--c-ink-rgb), 0.40);
}
.hero-split__cta { box-shadow: 0 14px 30px -14px rgba(var(--c-ink-rgb), 0.40); }

/* ---- hover image-swap on the "why" cards (one product, light touch) ---- */
.why__media { position: relative; }
.why__media-alt {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: 0;
}
.why__card:hover .why__media-alt { opacity: 1; }
.why__card:hover .why__media > img:first-child { opacity: 0; }

/* ---- trust strip + footer: soften the heavy ink rules to hairlines ---- */
.trust-strip { border-top: var(--hairline); }
.megafoot { --mf-line: 1px solid rgba(var(--c-ink-rgb), 0.14); }

@media (prefers-reduced-motion: reduce) {
  .why__card, .editorial__frame, .btn-cta-pill { transition: none; }
  .why__card:hover, .editorial__frame:hover, .btn-cta-pill:hover { transform: none; }
  .shop-lock__main:hover img, .pdp__hero:hover img { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   SOFTEN / FLOW - typography (2026-06-24)
   Headline face is now Bricolage Grotesque (warm, characterful). The old
   streetwear treatment (heavy 800 + UPPERCASE + tight tracking) reads
   stiff under a friendly face, so headlines drop to sentence case, lighter
   weight, and looser tracking. Eyebrows / mono labels stay uppercase.
   ════════════════════════════════════════════════════════════════════ */
.hero-split__head {
  text-transform: none;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.0;
}
/* big section heads: ease off the 800 / tight-track streetwear weight */
.why__head, .reviews__head, .inside__head,
.cellar__head, .vs-them__display, .shop-lock__head,
.faq-flow__lead-question, .answers__lede, .ritual-flow__detail,
.manifesto__head, .h1, .h2, .h3 {
  font-weight: 600;
  letter-spacing: -0.015em;
}
/* lock-scroll + PDP product titles keep some weight but lose the harsh track */
.shop-lock__head, .pdp__title { font-weight: 650; letter-spacing: -0.012em; }
/* nav links: a touch lighter, friendlier */
.nav__link { font-weight: 500; letter-spacing: 0.01em; }

/* ════════════════════════════════════════════════════════════════════
   FOOTER REWORK - 2026-06-24
   Flush trust-strip → ticker (kills the legacy 52px margin), a referral
   band under the ticker, slimmer left/right footer columns so the email
   field dominates.
   ════════════════════════════════════════════════════════════════════ */
.trust-strip { margin-bottom: 0; }            /* remove the legacy gap before the footer */

/* tighten the flanking columns (label · arrow / logo · seal) */
.megafoot { --mf-col-l: clamp(146px, 15%, 230px); --mf-col-r: clamp(118px, 12%, 178px); }

/* ---- referral band: give $15, get $15 (under the scrolling ticker) ---- */
.refer {
  text-align: center;
  background: linear-gradient(135deg, var(--c-primary-soft) 0%, #ffffff 55%, var(--c-accent-soft) 100%);
  border-bottom: var(--mf-line);
  padding: clamp(40px, 6vw, 78px) var(--s-5);
}
.refer__inner {
  max-width: 1040px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 1.9vw, 26px);
  /* soft card that pops off the gradient band (matches SOFTEN/FLOW theme) */
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard);
  padding: clamp(30px, 3.8vw, 50px) clamp(36px, 7vw, 96px);
}
/* eyebrow scaled up to near the headline, kept in a different style (mono) */
.refer__eyebrow {
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(22px, 2.9vw, 40px); letter-spacing: 0.04em; line-height: 1;
  text-transform: uppercase; color: var(--c-primary); margin: 0;
}
.refer__head {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(30px, 4.2vw, 52px); line-height: 1.0; letter-spacing: -0.018em;
  color: var(--c-ink); margin: 0;
}
.refer__sub {
  font-family: var(--font-body); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.55;
  letter-spacing: 0.01em; color: var(--c-ink-muted); margin: 0; max-width: 62ch;
}
.refer__sub b { color: var(--c-ink); font-weight: 600; }
.refer__cta { margin-top: var(--s-3); }

/* ════════════════════════════════════════════════════════════════════
   OPEN FOOTER - 2026-06-24
   Replaces the boxed/gridded footer (1px-ink cells, dark logo block, seal)
   with an open, borderless layout that flows from the referral gradient
   into the giant wordmark. Signup left (10% offer + email + arrow), plain
   text links right.
   ════════════════════════════════════════════════════════════════════ */
.megafoot { background: transparent; border-top: 0; border-bottom: 0; }
.megafoot__ticker { background: var(--c-surface); border-top: var(--hairline); }

/* referral + footer share one continuous vertical gradient → blends down */
.refer {
  background: linear-gradient(180deg, var(--c-primary-soft) 0%, var(--c-accent-soft) 100%);
  border-bottom: 0;
}

.footend {
  position: relative;
  isolation: isolate;
  max-width: none;
  margin: 0;
  padding: clamp(40px, 4.5vw, 68px) clamp(28px, 6vw, 140px) clamp(24px, 2.6vw, 36px);
}
/* full-bleed gradient behind the constrained content (lavender → fade to page) */
.footend::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0; bottom: calc(-1 * clamp(70px, 8vw, 120px));
  left: calc(50% - 50vw); right: calc(50% - 50vw);
  background: linear-gradient(180deg, var(--c-accent-soft) 0%, rgba(255,255,255,0) 82%);
  pointer-events: none;
}

/* headline sits above the signup block */
.footend__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 3vw, 44px); line-height: 0.98; letter-spacing: -0.02em;
  color: var(--c-ink); text-align: center; margin: 0 0 var(--s-3);
}
/* body row: centered signup left, link grid right (vertically centered) */
.footend__body {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 2fr;
  gap: clamp(40px, 6vw, 140px);
  align-items: center;
}

/* brand / signup column — centered content */
.footend__brand { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 460px; margin: 0 auto; }
.footend__intro { font-family: var(--font-body); font-size: clamp(20px, 2.4vw, 30px); line-height: 1.45; color: var(--c-ink-muted); margin: 0 0 var(--s-4); max-width: 30ch; }
.footend__form { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 480px; margin: 0 auto; }
.footend__form input {
  width: 100%; background: var(--c-surface); color: var(--c-ink); outline: none;
  border: var(--hairline); border-radius: var(--radius);
  font-family: var(--font-body); font-size: 22px; padding: 20px 22px;
}
.footend__form input::placeholder { color: var(--c-ink-muted); }
.footend__form input:focus { border-color: var(--c-primary); }
.footend__join {
  width: 100%; cursor: pointer;
  background: var(--c-primary); color: #fff; border: 0; border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 600; font-size: 20px;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 20px 22px;
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.footend__join:hover { background: var(--c-primary-deep); transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(var(--c-ink-rgb), 0.4); }
.footend__brand .status { font-family: var(--font-italic); font-style: italic; font-size: 13px; color: var(--c-ink-muted); min-height: 1em; }
.footend__brand .status.is-error { color: var(--error); font-style: normal; }
.footend__social { display: flex; gap: 14px; margin-top: var(--s-4); justify-content: center; }
.footend__social a { color: var(--c-ink); display: inline-flex; transition: color 200ms ease; }
.footend__social a:hover { color: var(--c-primary); }
.footend__social svg { width: 22px; height: 22px; }

/* link columns (3-up, centered, like VIDA) */
.footend__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); padding-top: 6px; justify-items: center; }
.footend__col { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.footend__col a {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(14px, 1.2vw, 18px);
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-ink);
  text-decoration: none; transition: color 180ms ease;
}
.footend__col a:hover { color: var(--c-primary); }
.footend__col-head {
  margin: 0 0 2px; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(13px, 1.1vw, 16px); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-ink-muted);
}

/* legal row (centered, under the footer, before the giant wordmark) */
.footend__legal {
  max-width: none; margin: 0;
  padding: clamp(16px, 2vw, 28px) clamp(28px, 6vw, 140px) clamp(34px, 4.5vw, 56px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 22px; text-align: center;
}
.footend__copy { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--c-ink-muted); }
.footend__legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.footend__legal-links a {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--c-ink-muted); text-decoration: none; transition: color 180ms ease;
}
.footend__legal-links a:hover { color: var(--c-primary); }

@media (max-width: 860px) {
  .footend__body { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 560px) {
  /* keep the three labelled sections side-by-side, top-aligned */
  .footend__links { grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; justify-items: start; }
  .footend__col { align-items: flex-start; text-align: left; gap: 12px; }
  .footend__col a { font-size: 13px; letter-spacing: 0.03em; }
  .footend__col-head { letter-spacing: 0.08em; }
}

/* ---- per-section CTAs (a buy/offer button in every section) ---- */
.section-cta { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 48px); }
.simplified .section-cta { justify-content: flex-start; margin-top: clamp(20px, 2.6vw, 34px); }
.vx .section-cta { margin-top: clamp(22px, 3vw, 40px); }
.editorial .section-cta, .inside .section-cta, .reviews .section-cta { margin-top: clamp(28px, 3.4vw, 44px); }