/** Shopify CDN: Minification failed

Line 3079:9 Unexpected "3B-1"

**/
/* ============ CIRCADIA DESIGN TOKENS — DARK ============ */
:root {
  /* core palette */
  --bg: #000000;
  --bg-2: #0A0A0A;
  --bg-3: #141414;
  --fg: #FAFAFA;
  --fg-soft: rgba(250,250,250,0.78);
  --fg-mute: rgba(250,250,250,0.55);
  --fg-dim:  rgba(250,250,250,0.35);

  --paper: #FAFAFA;        /* used for inverted surfaces only */
  --paper-warm: #F4F1EB;
  --ink: #0A0A0A;
  --char: #2B2A28;
  --graphite: #5B5853;

  /* legacy aliases — keep stale references rendering correctly on dark theme */
  --off: var(--bg-2);
  --bone: var(--hairline);

  --hairline: rgba(255,255,255,0.14);
  --hairline-soft: rgba(255,255,255,0.06);

  /* subbrand accents (official) */
  --rise: #ffcc41;
  --rise-deep: #b88a16;
  --rise-wash: #f7f3e4;
  --rise-ink: #1a1408;

  --drift: #42649e;
  --drift-deep: #2a4373;
  --drift-wash: #ebf7fd;
  --drift-ink: #0c1a2e;

  /* accent green (official — Jul 22 decision, mirrored in Claude Design).
     ACCENT uses only: offers, savings, roadmap progress, live/shipping
     accents, sustainability, science stat highlights. STATUS greens
     (verified badge, fulfilled pills, dashboard trends) are a separate
     semantic system and deliberately do NOT use this token. */
  --green: #78C88C;

  /* type */
  --display: "Bricolage Grotesque", "Söhne", system-ui, sans-serif;
  --sans: "Lexend", "Inter Tight", system-ui, sans-serif;
  --serif: "Newsreader", "Times New Roman", serif;
  --mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  /* legacy alias */

  /* scale */
  --max-w: 1480px;
  --gutter: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.55;
}

body { overflow-x: hidden; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }

::selection { background: var(--fg); color: var(--bg); }

/* ============ TYPE PRIMITIVES ============ */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 400;
  color: var(--fg-mute);
}
.eyebrow-fg { color: var(--fg); }

.display {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.94;
  font-size: clamp(56px, 10vw, 168px);
  font-stretch: 85%;
}
.display-md {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.98;
  font-size: clamp(40px, 6.5vw, 96px);
  font-stretch: 85%;
}
.display-sm {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.02;
  font-size: clamp(28px, 3.6vw, 52px);
  font-stretch: 85%;
}
.serif-display {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
.serif-italic {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.body-lg {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--fg-soft);
  max-width: 56ch;
  text-wrap: pretty;
}
.body { font-size: 15px; line-height: 1.55; color: var(--fg-soft); text-wrap: pretty; }
.caption { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-mute); }

/* ============ LAYOUT ============ */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(72px, 10vw, 160px) 0; }
.section-sm { padding: clamp(48px, 6vw, 96px) 0; }
.rule { height: 1px; background: var(--hairline); }
.rule-fg { height: 1px; background: var(--fg); }

/* light-surface override (for Rise/Drift wash blocks) */
.surface-light { background: var(--paper); color: var(--ink); }
.surface-light .eyebrow { color: var(--graphite); }
.surface-light .body, .surface-light .body-lg { color: var(--char); }
.surface-light .caption { color: var(--graphite); }
.surface-rise { background: var(--rise-wash); color: var(--rise-ink); }
.surface-rise .eyebrow, .surface-rise .caption { color: var(--rise-deep); }
.surface-rise .body, .surface-rise .body-lg { color: var(--rise-ink); }
.surface-drift { background: var(--drift-wash); color: var(--drift-ink); }
.surface-drift .eyebrow, .surface-drift .caption { color: var(--drift-deep); }
.surface-drift .body, .surface-drift .body-lg { color: var(--drift-ink); }

/* ============================================================
   CREAM / PAPER SURFACE  (ported from design/reference/styles.css)
   Re-maps the core tokens to a warm-paper palette so any component
   built on var(--bg)/var(--fg)/var(--rise)/var(--drift) flips from
   dark to cream automatically. Scoped to .surface-cream only — the
   tokens stay local and do not leak to the rest of the page.
   AA notes (vs. the raw design values, for WCAG AA on paper):
     - --fg-mute deepened 0.46 -> 0.62 alpha  (small text was ~2.8:1)
     - gold-as-text uses --rise-deep #7a5a0e   (design #b88a16 ~2.6:1
       on paper; #b88a16 is kept as --rise for the DARK media cards,
       where it reads ~6:1 on near-black)
   ============================================================ */
.surface-cream {
  --bg: #F1ECE2;
  --bg-2: #E9E2D4;
  --bg-3: #DFD7C7;
  --fg: #16130D;
  --fg-soft: rgba(22,19,13,0.66);
  --fg-mute: rgba(22,19,13,0.62);
  --fg-dim: rgba(22,19,13,0.40);
  --hairline: rgba(22,19,13,0.14);
  --hairline-soft: rgba(22,19,13,0.07);
  --ink: #F1ECE2;
  --rise: #b88a16;       /* gold for the DARK cover/video cards (~6:1 on near-black) */
  --rise-deep: #7a5a0e;  /* AA gold for gold-as-text on cream paper */
  --drift: #2a4373;      /* AA blue on cream (~8:1) */
  background: #F1ECE2;
  color: #16130D;
}
.surface-cream ::selection { background: #16130D; color: #F1ECE2; }

/* base .btn-primary:hover -> #fff would hide its cream (--ink) label on cream */
.surface-cream .btn-primary:hover { background: #000; }

/* dark media cards stay dark inside a cream section: keep their text light */
.surface-cream .pb-cover-art,
.surface-cream .ugc-video {
  --fg: #FAFAFA;
  --fg-soft: rgba(250,250,250,0.78);
  --fg-mute: rgba(250,250,250,0.55);
  --hairline: rgba(255,255,255,0.14);
}

/* playbook feature panel: warm paper card + deepened accent tagline */
.surface-cream .pb-home-feature {
  background:
    radial-gradient(ellipse 80% 60% at 18% 28%, var(--pb-accent-wash) 0%, transparent 60%),
    #E4DAC6;
  border-color: rgba(22,19,13,0.16);
}
.surface-cream .pb-home-feature-tagline,
.surface-cream .pb-home-past-tagline { color: var(--pb-accent-deep); }

/* AA fix: gold-as-text on paper -> deeper amber (--rise-deep) for stars + RISE tag */
.surface-cream .review-stars,
.surface-cream .review-sub.rise { color: var(--rise-deep); }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
}
/* Primary on DARK surface = white-filled */
.btn-primary { background: var(--fg); color: var(--ink); }
.btn-primary:hover { background: #fff; }
/* Ghost on DARK = white outline */
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn-ghost:hover { background: var(--fg); color: var(--ink); }
/* Inverse — for use on LIGHT surfaces */
.btn-ink { background: var(--ink); color: var(--fg); }
.btn-ink:hover { background: #1A1A1A; }
.btn-ink-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ink-ghost:hover { background: var(--ink); color: var(--fg); }

.btn-sm { padding: 10px 16px; font-size: 12px; }
.btn-block { width: 100%; justify-content: center; }
.btn .arr { display: inline-block; transition: transform 0.3s ease; }
.btn:hover .arr { transform: translateX(4px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ============ NAV ============ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
  color: var(--fg);
}
.nav-marquee {
  background: var(--bg-2);
  color: var(--fg);
  overflow: hidden;
  white-space: nowrap;
  height: 40px;
  display: flex; align-items: center;
  border-bottom: 1px solid var(--hairline);
}
.nav-marquee-track {
  display: inline-flex; align-items: center; gap: 56px;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  animation: marquee 80s linear infinite;
  padding-left: 56px;
  color: var(--fg);
}
.nav-marquee-track > span { display: inline-flex; align-items: center; gap: 56px; flex-shrink: 0; }
.nav-marquee-track .wave-divider { width: 28px; height: 8px; opacity: 0.65; flex-shrink: 0; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============ WAVE ICON DIVIDER ============ */
.wave-divider, .wave-icon {
  display: inline-block;
  color: currentColor;
  vertical-align: middle;
}
.wave-divider svg, .wave-icon svg { display: block; width: 100%; height: 100%; }
.section-divider {
  display: flex; align-items: center; justify-content: center;
  padding: 56px 0;
  background: var(--bg);
}
.section-divider .wave {
  width: 88px; height: 22px;
  color: var(--fg);
  opacity: 0.6;
}
.section-divider.large .wave {
  width: 140px; height: 36px;
  opacity: 1;
}

.nav-bar {
  display: flex;
  align-items: center;
  height: 88px;
  padding: 0 var(--gutter);
  gap: 40px;
}
.nav-logo {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 95%;
  font-size: 36px;
  letter-spacing: -0.055em;
  line-height: 1;
  cursor: pointer;
  color: var(--fg);
  flex-shrink: 0;
  text-transform: lowercase;
}
.nav-links {
  display: flex; gap: 36px;
  flex: 1;
  justify-content: center;
}
.nav-links a {
  font-size: 20px; font-weight: 500;
  letter-spacing: -0.012em;
  position: relative;
  padding: 4px 0;
  color: var(--fg-soft);
  transition: color 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
}
.nav-links a:hover { color: var(--fg); }
.nav-links a.active { color: var(--fg); }
.nav-links a::after {
  content: ""; position: absolute;
  bottom: -2px; left: 0; right: 0; height: 1px;
  background: var(--fg);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-right { display: flex; gap: 22px; align-items: center; font-size: 16px; flex-shrink: 0; }
.nav-right a { color: var(--fg-soft); transition: color 0.2s ease; cursor: pointer; }
.nav-right a:hover { color: var(--fg); }
.nav-cart {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--fg);
  border-radius: 999px;
  color: var(--fg);
}
.nav-cart:hover { background: var(--fg); color: var(--ink); }
.nav-cart-count { font-family: var(--mono); font-size: inherit; }

/* ============ CAN (image based) ============ */
.can-wrap {
  display: inline-block;
  position: relative;
  filter: drop-shadow(0 30px 36px rgba(0,0,0,0.55)) drop-shadow(0 4px 10px rgba(0,0,0,0.3));
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  line-height: 0;
}
.can-wrap.tilt:hover { transform: translateY(-10px) rotate(-1.5deg); }
.can-wrap img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.can-wrap         { width: 180px; }
.can-wrap.can-sm  { width: 110px; }
.can-wrap.can-md  { width: 180px; }
.can-wrap.can-lg  { width: 260px; }
.can-wrap.can-xl  { width: 360px; }
.can-wrap.can-2xl { width: 480px; }

/* on light surfaces the drop shadow needs less alpha */
.surface-light .can-wrap, .surface-rise .can-wrap, .surface-drift .can-wrap {
  filter: drop-shadow(0 18px 22px rgba(10,10,10,0.18)) drop-shadow(0 3px 6px rgba(10,10,10,0.1));
}

/* ============ LAUNCH OFFER ============ */
.launch-offer {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 70% at 75% 30%, rgba(255,204,65,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 70% 70% at 25% 80%, rgba(66,100,158,0.18) 0%, transparent 60%),
    linear-gradient(170deg, #1a1408 0%, #050505 50%, #0c1a2e 100%);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.launch-offer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.6;
}
.launch-offer-inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(72px, 9vw, 120px) var(--gutter);
}
.launch-offer-tag {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px;
  border: 1px solid var(--rise);
  border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--rise);
  align-self: flex-start;
  background: rgba(255,204,65,0.05);
}
.launch-offer-pair {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 8px;
}
.launch-offer-pair .launch-offer-stamp-inline {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--rise);
  color: var(--ink);
  display: grid; place-items: center;
  transform: rotate(-8deg);
  flex-shrink: 0;
  box-shadow: 0 10px 24px rgba(255,204,65,0.28);
  animation: stamp-bob 4s ease-in-out infinite;
}
.launch-offer-pair .launch-offer-stamp-inline .n {
  font-family: var(--mono); font-size: 7px; letter-spacing: 0.14em; line-height: 1;
  font-weight: 500;
}
.launch-offer-pair .launch-offer-stamp-inline .l {
  font-family: var(--display); font-stretch: 85%; font-weight: 800;
  font-size: 18px; letter-spacing: -0.03em; line-height: 1;
  margin-top: 3px;
}
@keyframes stamp-bob {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50%      { transform: rotate(-6deg) translateY(-4px); }
}
.launch-pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--rise);
  box-shadow: 0 0 0 4px rgba(255,204,65,0.18);
  animation: launch-pulse 1.8s ease infinite;
}
@keyframes launch-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,204,65,0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(255,204,65,0.04); }
}
.launch-offer-heading {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(48px, 6.5vw, 96px);
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--fg);
  margin-top: 24px;
  text-wrap: balance;
}
.launch-offer-heading em { font-family: var(--display); font-stretch: 85%; font-style: normal; font-weight: 600; color: var(--rise); }
.launch-offer-sub {
  font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5;
  color: var(--fg-soft);
  margin-top: 24px;
  max-width: 50ch;
}
.launch-offer-list {
  list-style: none; padding: 0; margin: 36px 0;
  display: flex; flex-direction: column; gap: 0;
}
.launch-offer-list li {
  display: grid; grid-template-columns: 48px 1fr;
  gap: 16px; align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
  font-size: 18px; line-height: 1.45; color: var(--fg-soft);
}
.launch-offer-list li:last-child { border-bottom: 1px solid var(--hairline); }
.launch-offer-list li span { font-family: var(--mono); font-size: 14px; letter-spacing: 0.14em; color: var(--fg-mute); padding-top: 4px; }

.launch-offer-form { display: flex; flex-direction: column; gap: 12px; max-width: 100%; }
.launch-offer-thanks {
  padding: 28px;
  border: 1px solid var(--rise);
  background: rgba(255,204,65,0.05);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 12px;
  max-width: 100%;
}

.launch-offer-visual {
  position: relative;
  display: grid; place-items: center;
  min-height: 480px;
}
.launch-offer-cans {
  display: flex; align-items: flex-end;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,0.6));
}
.launch-offer-stamp,
.launch-offer-stamp-bottom,
.launch-offer-stamp-inline,
.launch-offer-pair { display: none !important; }

@media (max-width: 960px) {
  .launch-offer-inner { grid-template-columns: 1fr; }
  .launch-offer-visual { min-height: 360px; order: -1; }
  .launch-offer-stamp-bottom { width: 100px; height: 100px; bottom: 12px; right: 12px; }
  .launch-offer-stamp-bottom .stamp-free { font-size: 32px; }
  .launch-offer-stamp-bottom .stamp-detail { font-size: 8px; }
}
.hero-lifestyle {
  position: relative;
  height: clamp(680px, 92vh, 980px);
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
}
.hero-slide {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1fr;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}
.hero-slide.active { opacity: 1; pointer-events: auto; }
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.04);
  transition: transform 8s ease;
}
.hero-slide.active .hero-bg { transform: scale(1); }
.hero-bg::after {
  /* gradient overlay so type stays legible */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.5) 35%, rgba(0,0,0,0.15) 65%, transparent 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.3) 100%);
}

/* placeholder lifestyle images — moody monochrome gradient + grid */
.hero-bg.ph-1 {
  background-image:
    radial-gradient(ellipse at 70% 50%, rgba(255,204,65,0.22) 0%, transparent 55%),
    linear-gradient(115deg, #1a1a1a 0%, #050505 80%);
}
.hero-bg.ph-2 {
  background-image:
    radial-gradient(ellipse at 30% 30%, rgba(66,100,158,0.30) 0%, transparent 55%),
    linear-gradient(125deg, #0a1020 0%, #000 80%);
}
.hero-bg.ph-3 {
  background-image:
    radial-gradient(ellipse at 50% 30%, rgba(255,204,65,0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 70%, rgba(66,100,158,0.18) 0%, transparent 55%),
    linear-gradient(180deg, #0a0a0a 0%, #000 100%);
}
.hero-bg.ph-1::before, .hero-bg.ph-2::before, .hero-bg.ph-3::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 16px);
}

.hero-slide-content {
  position: relative; z-index: 2;
  max-width: var(--max-w); margin: 0 auto;
  padding: clamp(60px, 8vh, 96px) var(--gutter) clamp(120px, 16vh, 200px);
  display: flex; flex-direction: column; justify-content: center;
  height: 100%;
  width: 100%;
}
.hero-eyebrow {
  display: flex; gap: 12px; align-items: center;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg);
  opacity: 0.8;
  margin-bottom: 32px;
}
.hero-eyebrow .wave { width: 32px; height: 9px; }
.hero-heading {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 8.5vw, 144px);
  letter-spacing: -0.025em;
  line-height: 0.98;
  max-width: 13ch;
  text-wrap: pretty;
}
.hero-heading em {
  /* secondary emphasis in display sans */
  font-family: var(--display); font-style: normal; font-weight: 600;
  font-stretch: 85%; letter-spacing: -0.03em;
}
.hero-sub2 {
  margin-top: 32px;
  max-width: 42ch;
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--fg-soft);
  line-height: 1.5;
}
.hero-ctas2 { display: flex; gap: 12px; margin-top: clamp(28px, 4vh, 40px); flex-wrap: wrap; }

.hero-controls {
  position: absolute; bottom: clamp(140px, 20vh, 240px); left: 0; right: 0;
  z-index: 3;
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; justify-content: flex-end; align-items: center;
  pointer-events: none;
}
.hero-controls > * { pointer-events: auto; }
.hero-dots { display: flex; gap: 10px; }
.hero-dot {
  width: 30px; height: 2px; background: rgba(255,255,255,0.25);
  border: 0; padding: 0; cursor: pointer;
  transition: background 0.3s ease;
}
.hero-dot.active { background: var(--fg); }
.hero-arrows { display: flex; gap: 8px; }
.hero-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--hairline);
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  display: grid; place-items: center;
  color: var(--fg); cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.hero-arrow:hover { background: var(--fg); color: var(--ink); border-color: var(--fg); }
.hero-counter {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--fg);
}

/* ============ LAB TABLE — row-based grid for perfect alignment ============ */
.lab-table {
  border-top: 1px solid var(--hairline);
}
.lab-row {
  display: grid;
  grid-template-columns: 64px 1.6fr 1fr 1fr 2fr;
  gap: 0;
  border-bottom: 1px solid var(--hairline);
  align-items: stretch;
}
.lab-row.lab-head {
  border-bottom: 1px solid var(--fg);
}
.lab-cell {
  padding: 22px 20px;
  font-size: 15px;
  display: flex; align-items: center;
  min-width: 0;
}
.lab-cell.head {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-mute);
  padding-top: 16px; padding-bottom: 14px;
}
.lab-cell.num { font-family: var(--mono); color: var(--fg-mute); font-size: 13px; }
.lab-cell.name { font-size: 19px; font-weight: 500; letter-spacing: -0.015em; color: var(--fg); }
.lab-cell.dose { font-family: var(--mono); font-size: 14px; }
.lab-cell.dose strong { font-family: var(--display); font-stretch: 90%; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.lab-cell.dose .dv { color: var(--fg-mute); font-size: 12px; margin-left: 8px; }
.lab-cell.desc { color: var(--fg-soft); font-size: 14px; line-height: 1.5; }

/* Panel table — slightly larger nutrient text */
.lab-table.panel .lab-row {
  grid-template-columns: 64px 2fr 1.5fr 1fr;
}
.lab-table.panel .lab-cell.name { font-size: 17px; }
.lab-table.panel .lab-cell.dose strong { font-size: 20px; }

/* big stat blocks */
.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.stat-cell {
  padding: clamp(28px, 3vw, 48px) clamp(20px, 2vw, 28px);
  border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 8px;
}
.stat-cell:last-child { border-right: 0; }
.stat-num {
  font-family: var(--display); font-stretch: 85%;
  font-size: clamp(48px, 5vw, 88px); font-weight: 600;
  letter-spacing: -0.035em; line-height: 0.95;
  color: var(--fg);
}
.stat-num sup { font-size: 0.36em; font-weight: 400; color: var(--fg-mute); margin-left: 6px; vertical-align: top; line-height: 1; top: 0.7em; position: relative; }
.stat-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
.stat-desc { font-size: 13px; color: var(--fg-soft); line-height: 1.5; margin-top: 6px; }
.hero {
  position: relative;
  min-height: 88vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg);
  overflow: hidden;
  color: var(--fg);
}
.hero-text {
  padding: clamp(60px, 8vw, 120px) var(--gutter);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative;
  z-index: 2;
}
.hero-text .meta-row {
  display: flex; justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 16px;
  margin-bottom: 32px;
}
.hero-head { display: flex; flex-direction: column; gap: 28px; }
.hero h1 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(56px, 7.5vw, 124px);
  letter-spacing: -0.045em;
  line-height: 0.92;
  color: var(--fg);
}
.hero h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
.hero-sub { max-width: 42ch; font-size: clamp(15px, 1.2vw, 18px); color: var(--fg-soft); }
.hero-ctas { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }

.hero-visual {
  position: relative;
  background:
    radial-gradient(ellipse 70% 70% at 60% 50%, rgba(255, 204, 65, 0.10) 0%, transparent 65%),
    radial-gradient(ellipse 70% 50% at 30% 80%, rgba(66, 100, 158, 0.10) 0%, transparent 60%),
    radial-gradient(circle at 50% 30%, #1a1a1a 0%, #000 70%);
  display: grid; place-items: center;
  overflow: hidden;
}
.hero-visual::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.hero-cans {
  position: relative; display: flex; align-items: flex-end;
  padding: 40px;
}
.hero-cans .can-wrap:nth-child(1) { transform: rotate(-6deg) translateY(20px); margin-right: -40px; z-index: 1; }
.hero-cans .can-wrap:nth-child(2) { z-index: 2; }
.hero-cans .can-wrap:nth-child(3) { transform: rotate(6deg) translateY(20px); margin-left: -40px; z-index: 1; }

.hero-time {
  position: absolute; bottom: 32px; right: 32px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg);
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  z-index: 2;
}
.hero-time-dial { display: flex; gap: 4px; }
.hero-time-dial span { width: 12px; height: 2px; background: var(--fg); opacity: 0.2; }
.hero-time-dial span.on { opacity: 1; }

/* ============ DUO SECTION (Rise/Drift split) ============ */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 80vh;
}
.duo-side {
  padding: clamp(60px, 7vw, 110px) clamp(40px, 5vw, 80px);
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}
.duo-rise { background: var(--rise-wash); color: var(--rise-ink); }
.duo-drift { background: var(--drift-wash); color: var(--drift-ink); }
.duo-side .eyebrow { color: var(--graphite); }
.duo-rise .eyebrow { color: var(--rise-deep); }
.duo-drift .eyebrow { color: var(--drift-deep); }
.duo-side h2 {
  font-size: clamp(64px, 8vw, 140px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.9;
  margin: 24px 0 16px;
}
.duo-rise h2 { color: var(--rise-deep); }
.duo-drift h2 { color: var(--drift-deep); }
.duo-side h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.duo-tagline { font-size: clamp(18px, 1.5vw, 24px); max-width: 32ch; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 32px; }
.duo-rise .duo-tagline { color: var(--rise-ink); }
.duo-drift .duo-tagline { color: var(--drift-ink); }
.duo-meta {
  margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  padding-top: 32px; border-top: 1px solid currentColor;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0.7;
}
.duo-rise .duo-meta { border-top-color: rgba(184, 138, 22, 0.3); }
.duo-drift .duo-meta { border-top-color: rgba(42, 67, 115, 0.3); }
.duo-meta dt { opacity: 0.6; margin-bottom: 4px; }
.duo-meta dd { font-size: 13px; letter-spacing: 0.04em; opacity: 1; }
.duo-cans { position: absolute; right: -30px; bottom: 0; display: flex; pointer-events: none; }
.duo-cans .can-wrap:nth-child(1) { transform: translateY(60px) rotate(-4deg); }
.duo-cans .can-wrap:nth-child(2) { transform: translateY(20px) rotate(2deg); margin-left: -60px; }
.duo-link {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 24px;
  font-size: 14px; padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
  cursor: pointer;
}
.duo-link .arr { transition: transform 0.3s ease; }
.duo-link:hover .arr { transform: translateX(6px); }

/* ============ COMPARE — David-style two-panel ============ */
.compare { display: grid; grid-template-columns: 1fr 1fr; min-height: 54vh; }
.compare-side {
  position: relative;
  padding: clamp(24px, 2.6vw, 44px);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 32px;
  overflow: hidden;
  min-width: 0;
}
.compare-side > * { min-width: 0; }
.compare-rise {
  background: var(--bg); color: var(--fg);
  transition: background 0.6s ease;
}
.compare-rise .compare-can-stage {
  background: radial-gradient(ellipse at center, rgba(255, 204, 65, 0.18) 0%, transparent 65%);
  transition: background 0.6s ease;
}
.compare-rise:hover {
  background: linear-gradient(160deg, #3a2810 0%, #1a1408 70%);
}
.compare-rise:hover .compare-can-stage {
  background: radial-gradient(ellipse at center, rgba(255, 204, 65, 0.50) 0%, rgba(255, 204, 65, 0.10) 50%, transparent 80%);
}
.compare-drift {
  background: var(--bg); color: var(--fg);
  transition: background 0.6s ease;
}
.compare-drift .compare-can-stage {
  background: radial-gradient(ellipse at center, rgba(66, 100, 158, 0.22) 0%, transparent 65%);
  transition: background 0.6s ease;
}
.compare-drift:hover {
  background: linear-gradient(170deg, #1c2e4d 0%, #0c1a2e 70%);
}
.compare-drift:hover .compare-can-stage {
  background: radial-gradient(ellipse at center, rgba(66, 100, 158, 0.60) 0%, rgba(66, 100, 158, 0.15) 50%, transparent 80%);
}
.compare-headline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1.04;
  text-align: center;
  padding: 12px 0 2px;
  text-wrap: balance;
  max-width: 100%;
}
.compare-can-stage {
  display: grid; place-items: center;
  position: relative;
  min-height: 180px;
}
.compare-stats {
  display: flex; flex-direction: column; gap: 0;
  margin-top: 12px;
  min-width: 0;
}
.compare-stats .row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
  min-width: 0;
}
.compare-stats .row:last-child { border-bottom: 1px solid var(--hairline); }
.compare-stats .k { color: var(--fg-soft); flex-shrink: 0; }
.compare-stats .v {
  font-family: var(--display); font-stretch: 90%;
  font-weight: 600; font-size: clamp(20px, 1.8vw, 28px);
  letter-spacing: -0.025em;
  text-align: right;
  min-width: 0;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compare-stats .v sup { font-size: 0.45em; font-weight: 400; color: var(--fg-mute); margin-left: 4px; }
.compare-stats .v.text {
  font-family: var(--sans);
  font-size: clamp(13px, 1vw, 15px);
  font-stretch: 100%;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
  white-space: normal;
}
.compare-foot { display: flex; justify-content: center; align-items: center; padding-top: 12px; }
.compare-foot-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.compare-foot-info strong { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.compare-foot-info span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--fg-mute); }
.compare-stats {
  display: flex; flex-direction: column; gap: 0;
  margin-top: 12px;
}
.compare-stats .row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--hairline);
  font-size: 16px;
}
.compare-stats .row:last-child { border-bottom: 1px solid var(--hairline); }
.compare-stats .k { color: var(--fg-soft); flex-shrink: 0; }
.compare-stats .v {
  font-family: var(--display); font-stretch: 90%;
  font-weight: 600; font-size: clamp(22px, 2vw, 32px);
  letter-spacing: -0.025em;
  text-align: right;
  text-wrap: balance;
  min-width: 0;
  line-height: 1.1;
}
.compare-stats .v sup { font-size: 0.45em; font-weight: 400; color: var(--fg-mute); margin-left: 4px; }
/* "Text only" values (Lightly carbonated, Still · non-carbonated) need a smaller size so they don't overflow */
.compare-stats .v.text { font-size: clamp(14px, 1.1vw, 18px); letter-spacing: 0; line-height: 1.2; font-stretch: 100%; }
.compare-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; }
.compare-foot-info { display: flex; flex-direction: column; gap: 4px; }
.compare-foot-info strong { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.compare-foot-info span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--fg-mute); }

/* ============ UGC GRID ============ */
.ugc-section {
  padding: clamp(72px, 10vw, 120px) 0;
  background: var(--bg);
  overflow: hidden;
  position: relative;
}
.ugc-head {
  text-align: center; max-width: 900px; margin: 0 auto clamp(40px, 5vw, 64px);
  padding: 0 var(--gutter);
}
.ugc-head h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 80px);
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.ugc-head p { font-size: 16px; color: var(--fg-soft); margin-top: 16px; }
.ugc-rail {
  display: flex; gap: 16px;
  padding: 0 var(--gutter) 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.ugc-rail::-webkit-scrollbar { height: 6px; }
.ugc-rail::-webkit-scrollbar-track { background: var(--bg-2); }
.ugc-rail::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 999px; }
.ugc-card {
  flex: 0 0 auto;
  width: clamp(220px, 24vw, 320px);
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.ugc-card:hover { transform: translateY(-4px); border-color: var(--fg-mute); }
.ugc-video {
  aspect-ratio: 9 / 16;
  background: linear-gradient(135deg, #1c1c1c 0%, #0a0a0a 100%);
  position: relative;
  overflow: hidden;
}
.ugc-video::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 14px);
}
.ugc-video .play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: var(--ink);
  display: grid; place-items: center;
  font-size: 16px;
  backdrop-filter: blur(8px);
}
.ugc-video .creator {
  position: absolute; top: 16px; left: 16px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg);
}
.ugc-video .creator-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--rise), var(--drift));
  border: 1px solid rgba(255,255,255,0.4);
}
.ugc-video .ph-label {
  position: absolute; bottom: 16px; left: 16px; right: 16px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em;
  color: var(--fg-mute);
  text-transform: uppercase;
}
.ugc-info {
  padding: 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: var(--bg);
}
.ugc-info-pack {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0;
}
.ugc-info-thumb {
  width: 36px; height: 56px;
  flex-shrink: 0;
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
  display: grid; place-items: center;
}
.ugc-info-thumb img { width: 100%; height: auto; }
.ugc-info-text { display: flex; flex-direction: column; min-width: 0; }
.ugc-info-text strong { font-size: 13px; font-weight: 500; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ugc-info-text span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--fg-mute); margin-top: 2px; }
.ugc-shop {
  font-size: 11px; font-weight: 500;
  padding: 8px 14px;
  border: 1px solid var(--fg);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.ugc-shop:hover { background: var(--fg); color: var(--ink); }

/* ============ PRODUCT GRID ============ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
}
.product-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.product-card {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: clamp(24px, 2.5vw, 40px);
  background: var(--bg);
  position: relative;
  display: flex; flex-direction: column; gap: 20px;
  cursor: pointer;
  transition: background 0.5s ease;
  z-index: 1;
}
.product-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 35%, color-mix(in oklab, var(--flavor-color, transparent) 35%, transparent) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: -1;
}
.product-card:nth-child(3n) { border-right: 0; }
.product-card:hover { background: var(--bg-2); }
.product-card:hover::before { opacity: 1; }
.product-card:hover .product-card-can { background: transparent; }
.product-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
}
.product-card-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
}
.product-card-tag.sub-tag.rise  { color: var(--rise); }
.product-card-tag.sub-tag.drift { color: var(--drift); }
/* 4-PACK chip ↔ + quick-add button collision. Both sit in the top-right
   region of the card; the + button fades in on hover and would overlap
   the static chip. Fade the chip out simultaneously so the two
   affordances toggle interchangeably. On mobile (<750px), + is always
   visible (per the global mobile rule below in the @media block), so
   the chip is always hidden — same logic. opacity:0 instead of
   display:none preserves the flex-justify-content layout of
   .product-card-head (sub-tag left, chip slot right). */
.product-card-tag.pack-tag { transition: opacity 0.2s ease; }
.product-card:hover .product-card-tag.pack-tag { opacity: 0; }
.product-card-can {
  display: grid; place-items: center;
  aspect-ratio: 1 / 1.05;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.04) 0%, transparent 65%);
  position: relative;
  transition: background 0.5s ease;
}
.product-card-can.bg-rise { background: radial-gradient(ellipse at center, rgba(255,204,65,0.10) 0%, transparent 65%); }
.product-card-can.bg-drift { background: radial-gradient(ellipse at center, rgba(66,100,158,0.14) 0%, transparent 65%); }
.product-card-info {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px;
  min-height: 96px;
}
.product-card-title {
  font-size: clamp(20px, 1.6vw, 26px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--fg);
  text-wrap: balance;
}
.product-card-title-stack {
  display: flex; flex-direction: column;
  line-height: 1.0;
  gap: 4px;
}
.product-card-title-word {
  display: block;
  font-size: clamp(22px, 1.9vw, 30px);
  letter-spacing: -0.022em;
  line-height: 1.0;
}
.product-card-title em { font-family: var(--serif); font-style: italic; }
.product-card-price {
  font-family: var(--display); font-stretch: 90%; font-weight: 600;
  font-size: 28px; letter-spacing: -0.02em; line-height: 1;
  color: var(--fg);
}
.product-card-moment {
  font-family: var(--serif); font-style: italic;
  font-size: 16px;
  color: var(--fg-mute);
  margin-top: 6px;
  line-height: 1.3;
}
.product-card-moment.rise  { color: var(--rise); }
.product-card-moment.drift { color: var(--drift); }
.product-card-add {
  position: absolute; top: 24px; right: 24px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--fg); color: var(--ink);
  display: grid; place-items: center;
  font-size: 18px; opacity: 0;
  transition: opacity 0.25s ease;
  cursor: pointer;
}
.product-card:hover .product-card-add { opacity: 1; }

/* ============ FEATURE SPLIT ============ */
.feature-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 70vh; align-items: stretch; }
.feature-split .col { padding: clamp(40px, 5vw, 80px); display: flex; flex-direction: column; justify-content: center; }
.placeholder-img {
  flex: 1; min-height: 360px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 18px),
    var(--bg-2);
  border: 1px solid var(--hairline);
  display: grid; place-items: center;
  position: relative;
}
.placeholder-img .ph-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--bg); padding: 6px 12px; color: var(--fg-mute); border: 1px solid var(--hairline);
}
.surface-light .placeholder-img,
.surface-rise .placeholder-img,
.surface-drift .placeholder-img {
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.06) 0px, rgba(0,0,0,0.06) 1px, transparent 1px, transparent 18px),
    rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.12);
}
.surface-light .placeholder-img .ph-label,
.surface-rise .placeholder-img .ph-label,
.surface-drift .placeholder-img .ph-label {
  background: var(--paper); color: var(--graphite); border-color: rgba(0,0,0,0.12);
}

/* ============ DIAL ============ */
.dial {
  display: grid;
  grid-template-columns: repeat(var(--cols, 6), 1fr);
  gap: 1px;
  background: var(--hairline);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.dial-cell {
  background: var(--bg);
  padding: 32px 24px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 280px;
  position: relative;
  transition: background 0.3s ease;
  color: var(--fg);
}
.dial-cell.active { background: var(--bg-2); }
.dial-cell.future { opacity: 0.4; }
.dial-time { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--fg-mute); }
.dial-name { font-size: clamp(28px, 3vw, 44px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; margin-top: 16px; text-transform: lowercase; color: var(--fg); }
.dial-name em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.dial-rise .dial-name { color: var(--rise); }
.dial-drift .dial-name { color: var(--drift); }
.dial-desc { font-size: 13px; color: var(--fg-soft); line-height: 1.4; margin-top: auto; }
.dial-status { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
.dial-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; }
.dial-dot.live { background: var(--fg); }
.dial-dot.soon { background: transparent; border: 1px solid var(--fg-mute); }

/* ============ ECOSYSTEM SEGMENTED ============ */
.eco-tabs {
  display: flex; gap: 0; padding: 6px;
  background: var(--bg-2); border: 1px solid var(--hairline); border-radius: 999px;
  align-self: flex-start; margin-bottom: 48px;
}
.eco-tab {
  padding: 10px 22px; border-radius: 999px;
  font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 0.3s ease, color 0.3s ease;
  color: var(--fg-mute);
}
.eco-tab.active { background: var(--fg); color: var(--ink); }
.eco-tab .soon-dot { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; opacity: 0.5; }

/* ============ BUILD A BUNDLE ============ */
.bundle-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; min-height: 100vh; }
.bundle-pool { padding: clamp(32px, 4vw, 56px) var(--gutter); border-right: 1px solid var(--hairline); }
.bundle-side { background: var(--bg-2); padding: clamp(32px, 4vw, 56px); position: sticky; top: 96px; align-self: start; }
.bundle-progress {
  height: 8px; background: var(--hairline); border-radius: 999px; overflow: hidden;
  margin-top: 16px;
}
.bundle-progress-fill { height: 100%; background: var(--fg); transition: width 0.4s cubic-bezier(0.2,0.7,0.2,1); }
.bundle-counter { display: flex; justify-content: space-between; align-items: baseline; }
.bundle-count-num { font-family: var(--sans); font-size: 64px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--fg); }
.bundle-count-num span { color: var(--fg-mute); }

.bundle-cans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.bundle-can {
  border: 1px solid var(--hairline);
  background: var(--bg);
  padding: 24px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  position: relative;
  transition: background 0.25s ease, border-color 0.25s ease;
  border-radius: 6px;
}
.bundle-can:hover { background: var(--bg-2); border-color: var(--fg-mute); }
.bundle-can-title { font-size: 14px; font-weight: 500; text-align: center; letter-spacing: -0.005em; color: var(--fg); }
.bundle-can-title em { font-family: var(--serif); font-style: italic; }
.bundle-can-meta { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
.bundle-stepper {
  display: inline-flex; align-items: center; gap: 14px;
  border: 1px solid var(--fg); border-radius: 999px;
  padding: 4px 6px;
  background: transparent;
}
.bundle-stepper button { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; transition: background 0.2s ease; color: var(--fg); }
.bundle-stepper button:hover:not(:disabled) { background: var(--hairline); }
.bundle-stepper button:disabled { opacity: 0.3; cursor: not-allowed; }
.bundle-stepper-val { font-family: var(--mono); font-size: 13px; min-width: 16px; text-align: center; color: var(--fg); display: inline-flex; align-items: baseline; gap: 6px; }
.bundle-stepper-unit { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); }
.bundle-can.has-qty { border-color: var(--rise); background: color-mix(in oklab, var(--rise) 6%, var(--bg)); }
.bundle-can.has-qty .bundle-can-meta { color: color-mix(in oklab, var(--rise) 80%, var(--fg-mute)); }

.bundle-summary-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--hairline-soft); font-size: 14px; color: var(--fg-soft); }
.bundle-summary-row .qty { font-family: var(--mono); font-size: 13px; color: var(--fg); }
.bundle-empty { font-family: var(--serif); font-style: italic; color: var(--fg-mute); padding: 24px 0; font-size: 18px; }

/* ============ INGREDIENTS ============ */
.ingredient-row {
  display: grid;
  grid-template-columns: 80px 1fr 2fr 1fr;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.ingredient-row:hover { background: var(--bg-2); }
.ing-index { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--fg-mute); }
.ing-name { font-size: clamp(20px, 1.8vw, 28px); font-weight: 500; letter-spacing: -0.02em; color: var(--fg); }
.ing-desc { font-size: 15px; color: var(--fg-soft); max-width: 56ch; }
.ing-role { font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); text-align: right; }

/* ============ JOURNAL ============ */
.journal-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0; border-top: 1px solid var(--hairline); }
.journal-card {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: clamp(28px, 3vw, 48px);
  display: flex; flex-direction: column; gap: 24px;
  background: var(--bg);
  transition: background 0.3s ease;
  cursor: pointer;
}
.journal-card:hover { background: var(--bg-2); }
.journal-card:last-child { border-right: 0; }
.journal-card.featured { grid-row: span 2; }
.journal-card .placeholder-img { min-height: 260px; }
.journal-card.featured .placeholder-img { min-height: 420px; }
.journal-meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
.journal-title { font-size: clamp(22px, 2vw, 32px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; color: var(--fg); }
.journal-title em { font-family: var(--serif); font-style: italic; }
.journal-card.featured .journal-title { font-size: clamp(32px, 3vw, 48px); }
.journal-excerpt { font-size: 14px; color: var(--fg-soft); line-height: 1.5; max-width: 50ch; }

/* ============ FOOTER ============ */
.footer { background: var(--bg); color: var(--fg); padding-top: 80px; border-top: 1px solid var(--hairline); }
.footer-top { padding: 80px var(--gutter); border-bottom: 1px solid var(--hairline); }
.footer-display {
  font-size: clamp(64px, 12vw, 220px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.9;
  text-transform: lowercase;
}
.footer-display em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.footer-cols {
  display: grid; grid-template-columns: 2fr repeat(5, 1fr);
  gap: 40px;
  padding: 64px var(--gutter);
}
.footer-col h4 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 20px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: var(--fg-soft); transition: color 0.2s ease; cursor: pointer; }
.footer-col a:hover { color: var(--fg); }
.footer-signup { max-width: 360px; }
.footer-signup p { font-size: 14px; color: var(--fg-mute); margin-bottom: 16px; line-height: 1.5; }
.footer-input {
  display: flex;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 4px 4px 4px 16px;
  align-items: center;
  background: rgba(255,255,255,0.03);
}
.footer-input input { flex: 1; background: transparent; border: 0; color: var(--fg); font-family: var(--sans); font-size: 14px; outline: none; padding: 10px 0; }
.footer-input input::placeholder { color: var(--fg-mute); }
.footer-input button { background: var(--fg); color: var(--ink); border-radius: 999px; padding: 8px 16px; font-size: 12px; font-weight: 500; }
.footer-bottom { padding: 32px var(--gutter); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); border-top: 1px solid var(--hairline); }
.footer-bottom .links { display: flex; gap: 24px; }

/* ============ MANIFESTO BLOCK (About) ============ */
.manifesto-block {
  padding: clamp(80px, 10vw, 160px) 0;
  background:
    radial-gradient(ellipse 60% 60% at 25% 30%, rgba(255,204,65,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 75% 70%, rgba(66,100,158,0.10) 0%, transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--hairline);
}
.manifesto-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(48px, 6vw, 100px);
  align-items: center;
}
.manifesto-visual { display: grid; place-items: center; }
.rhythm-dial {
  width: min(100%, 460px);
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.4));
}
.rhythm-dial-rotating {
  animation: rhythm-spin 60s linear infinite;
  transform-origin: 160px 160px;
  transform-box: fill-box;
}
@keyframes rhythm-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.manifesto-text { display: flex; flex-direction: column; gap: 40px; }
.manifesto-lead {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(32px, 3.5vw, 52px); letter-spacing: -0.025em; line-height: 1.05;
  color: var(--fg);
  text-wrap: balance;
}
.manifesto-lead em { font-family: var(--display); font-stretch: 85%; font-style: normal; font-weight: 600; color: var(--fg); }
.manifesto-stack { display: flex; flex-direction: column; gap: 28px; }
.manifesto-row { display: grid; grid-template-columns: 52px 1fr; gap: 20px; align-items: flex-start; padding-top: 20px; border-top: 1px solid var(--hairline); }
.manifesto-row p {
  font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5;
  color: var(--fg-soft); text-wrap: pretty;
}
.manifesto-row p strong { color: var(--fg); font-weight: 500; }
.manifesto-row p em { font-family: var(--serif); font-style: italic; color: var(--fg); }
.manifesto-mark { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--fg-mute); padding-top: 2px; }
.manifesto-pullquote {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(28px, 3vw, 44px); letter-spacing: -0.02em; line-height: 1.12;
  color: var(--fg-soft);
  padding: clamp(28px, 3vw, 44px) 0 0;
  border-top: 1px solid var(--fg);
  text-wrap: balance;
}
.manifesto-pullquote em { font-style: italic; color: var(--fg); }
.manifesto-pullquote em:first-of-type { color: var(--fg); }
.manifesto-pullquote em:last-of-type { color: var(--fg); }

/* ============ PILLARS (About) ============ */
.pillars-section {
  padding: clamp(72px, 10vw, 140px) 0;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.pillar-card {
  position: relative;
  padding: clamp(28px, 3vw, 44px);
  border-radius: 16px;
  border: 1px solid var(--hairline);
  overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 360px;
  transition: transform 0.4s cubic-bezier(0.2,0.7,0.2,1), border-color 0.4s ease;
}
.pillar-card:hover { transform: translateY(-6px); border-color: var(--fg-mute); }
.pillar-rise {
  background: linear-gradient(170deg, rgba(255,204,65,0.16) 0%, rgba(255,204,65,0.04) 50%, transparent 100%);
}
.pillar-drift {
  background: linear-gradient(170deg, rgba(66,100,158,0.20) 0%, rgba(66,100,158,0.06) 50%, transparent 100%);
}
.pillar-mix {
  background: linear-gradient(170deg, rgba(255,204,65,0.14) 0%, rgba(66,100,158,0.14) 100%);
}
.pillar-icon {
  width: 56px; height: 56px;
  color: var(--fg);
  opacity: 0.85;
}
.pillar-rise .pillar-icon { color: var(--rise); }
.pillar-drift .pillar-icon { color: var(--drift); }
.pillar-mix .pillar-icon { color: var(--fg); }
.pillar-num {
  position: absolute; top: clamp(24px, 2.5vw, 36px); right: clamp(24px, 2.5vw, 36px);
  font-family: var(--display); font-stretch: 85%; font-weight: 700;
  font-size: clamp(64px, 6vw, 96px); letter-spacing: -0.04em; line-height: 1;
  color: rgba(255,255,255,0.08);
}
.pillar-kind { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); }
.pillar-rise .pillar-kind  { color: var(--rise); }
.pillar-drift .pillar-kind { color: var(--drift); }
.pillar-title {
  font-family: var(--display); font-stretch: 90%; font-weight: 600;
  font-size: clamp(20px, 1.6vw, 26px); letter-spacing: -0.025em; line-height: 1.15;
  color: var(--fg);
}
.pillar-body { font-size: 14px; line-height: 1.55; color: var(--fg-soft); margin-top: auto; }

@media (max-width: 960px) {
  .manifesto-grid { grid-template-columns: 1fr; }
  .pillars-grid { grid-template-columns: 1fr; }
}
.about-carousel {
  position: relative;
  height: 100%;
  min-height: 60vh;
  width: 100%;
  overflow: hidden;
  background: var(--bg-2);
}
.about-slide {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity 0.8s ease;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 18px);
}
.about-slide.active { opacity: 1; }
.about-slide.tone-warm {
  background-color: #1a1408;
  background-image:
    radial-gradient(ellipse at 30% 30%, rgba(255,204,65,0.18) 0%, transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 18px);
}
.about-slide.tone-cool {
  background-color: #0c1a2e;
  background-image:
    radial-gradient(ellipse at 70% 70%, rgba(66,100,158,0.22) 0%, transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 18px);
}
.about-slide.tone-mixed {
  background-color: #050505;
  background-image:
    radial-gradient(ellipse at 20% 30%, rgba(255,204,65,0.14) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(66,100,158,0.18) 0%, transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 18px);
}
.about-slide .ph-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  background: rgba(10,10,10,0.5); padding: 8px 14px;
  color: var(--fg); border: 1px solid var(--hairline);
  backdrop-filter: blur(8px);
}
.about-carousel-dots {
  position: absolute; bottom: 24px; left: 24px;
  display: flex; gap: 10px;
  z-index: 2;
}
.about-dot {
  width: 30px; height: 2px; background: rgba(255,255,255,0.25);
  border: 0; padding: 0; cursor: pointer;
  transition: background 0.3s ease;
}
.about-dot.active { background: var(--fg); }
.about-carousel-arrows {
  position: absolute; bottom: 16px; right: 24px;
  display: flex; gap: 8px;
  z-index: 2;
}
.about-carousel-arrows button {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--hairline);
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  display: grid; place-items: center;
  color: var(--fg); cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  font-size: 14px;
}
.about-carousel-arrows button:hover { background: var(--fg); color: var(--ink); border-color: var(--fg); }

/* ============ JOURNAL — search, placeholder tones, article page ============ */
.journal-search {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 10px 16px;
  width: min(420px, 100%);
  color: var(--fg-mute);
  transition: border-color 0.2s ease;
}
.journal-search:focus-within { border-color: var(--fg); color: var(--fg); }
.journal-search input {
  flex: 1; background: transparent; border: 0;
  color: var(--fg); font-family: var(--sans); font-size: 14px;
  outline: none; min-width: 0;
}
.journal-search input::placeholder { color: var(--fg-mute); }
.journal-search-clear { color: var(--fg-mute); font-size: 18px; line-height: 1; padding: 0 4px; cursor: pointer; }
.journal-search-clear:hover { color: var(--fg); }

.placeholder-img.tone-rise {
  background-color: #1a1408;
  background-image:
    radial-gradient(ellipse at 30% 30%, rgba(255,204,65,0.22) 0%, transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 18px);
}
.placeholder-img.tone-drift {
  background-color: #0c1a2e;
  background-image:
    radial-gradient(ellipse at 70% 70%, rgba(66,100,158,0.26) 0%, transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 18px);
}
.placeholder-img.tone-mix {
  background-color: #050505;
  background-image:
    radial-gradient(ellipse at 20% 30%, rgba(255,204,65,0.14) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(66,100,158,0.18) 0%, transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 18px);
}

/* Article page */
.article-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
}
.article-aside {
  position: sticky; top: 120px;
  display: flex; flex-direction: column; gap: 36px;
}
.article-aside-block { display: flex; flex-direction: column; gap: 12px; padding-bottom: 28px; border-bottom: 1px solid var(--hairline); }
.article-aside-block:last-child { border-bottom: 0; }
.article-sources { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.article-sources li { font-size: 14px; color: var(--fg-soft); padding-left: 16px; position: relative; }
.article-sources li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 1px; background: var(--fg-mute); }
.article-product-link {
  display: flex; align-items: center; gap: 14px;
  padding: 12px; border: 1px solid var(--hairline); border-radius: 10px;
  cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease;
  margin-top: 8px;
}
.article-product-link:hover { border-color: var(--fg-mute); background: var(--bg-2); }
.article-product-link .can-wrap { width: 36px !important; flex-shrink: 0; }

.article-prose p {
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 400;
  line-height: 1.65;
  color: var(--fg);
  margin-bottom: 28px;
  text-wrap: pretty;
  letter-spacing: -0.005em;
}
.article-prose p:first-child::first-letter {
  font-family: var(--display); font-stretch: 85%;
  font-weight: 700; font-size: 4em; float: left; line-height: 0.9;
  margin: 6px 12px 0 0; color: var(--rise);
}
.article-foot { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--hairline); }

/* References list inside article aside */
.article-studies { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.article-studies li { border-left: 1px solid var(--hairline); padding-left: 14px; transition: border-color 0.2s ease; }
.article-studies li:hover { border-left-color: var(--fg); }
.article-studies a { display: flex; flex-direction: column; gap: 4px; color: inherit; }
.article-studies .cite { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--fg-mute); }
.article-studies .title { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--fg); line-height: 1.35; text-wrap: pretty; }
.article-studies .journal { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); margin-top: 2px; }

/* Latest in nutrition news grid */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.news-card {
  display: flex; flex-direction: column; gap: 16px;
  padding: clamp(20px, 2vw, 28px);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  transition: border-color 0.25s ease, transform 0.25s ease;
  text-decoration: none; color: inherit;
}
.news-card:hover { border-color: var(--fg-mute); transform: translateY(-3px); }
.news-card-meta { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); }
.news-tag { color: var(--rise); }
.news-headline { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -0.015em; line-height: 1.18; color: var(--fg); text-wrap: pretty; }
.news-excerpt { font-size: 14px; line-height: 1.55; color: var(--fg-soft); flex: 1; }
.news-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--hairline); }
.news-source { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
.news-link { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg); }

@media (max-width: 960px) {
  .article-grid { grid-template-columns: 1fr; }
  .article-aside { position: static; }
  .news-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1200px) {
  .news-grid { grid-template-columns: 1fr 1fr; }
}
.reviews-section {
  padding: clamp(64px, 8vw, 112px) 0;
  background: var(--bg-2);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
  position: relative;
}
.reviews-head { text-align: center; max-width: 880px; margin: 0 auto clamp(40px, 5vw, 56px); }
.reviews-rail {
  display: flex; gap: 20px;
  width: max-content;
  padding-bottom: 8px;
  animation: reviews-scroll 90s linear infinite;
}
.reviews-rail:hover { animation-play-state: paused; }
.reviews-marquee {
  overflow: hidden;
  position: relative;
  padding: 0 var(--gutter);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
@keyframes reviews-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.review-card {
  flex: 0 0 auto;
  width: clamp(320px, 32vw, 480px);
  padding: 32px 28px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 20px;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.review-card:hover { border-color: var(--fg-mute); transform: translateY(-3px); }
.review-stars {
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.3em;
  color: var(--rise); /* flat star gold (was a rise→drift gradient) */
}
.review-quote {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.45; letter-spacing: -0.01em;
  color: var(--fg);
  text-wrap: pretty;
  flex: 1;
}
.review-foot {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.review-author { font-size: 14px; font-weight: 500; color: var(--fg); letter-spacing: -0.01em; }
.review-loc { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); margin-top: 2px; }
.review-product { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; min-width: 0; }
.review-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; }
.review-sub.rise  { color: var(--rise); }
.review-sub.drift { color: var(--drift); }
.review-flavor { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--fg-soft); letter-spacing: -0.005em; line-height: 1.2; white-space: nowrap; }
.word-strip {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
  padding: 28px 0;
  white-space: nowrap;
  background: var(--bg);
}
.word-strip-track {
  display: inline-flex; gap: 56px;
  animation: marquee 80s linear infinite;
  padding-left: 56px;
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(40px, 6vw, 88px);
  letter-spacing: -0.04em;
  line-height: 1;
  text-transform: lowercase;
  color: var(--fg);
}
.word-strip-track em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.word-strip-track .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fg); align-self: center; display: inline-block; }

/* ============ PDP ============ */
.pdp { display: grid; grid-template-columns: 1.3fr 1fr; min-height: 100vh; }
.pdp-visual {
  background: var(--bg-2);
  display: grid; place-items: center;
  position: relative; overflow: hidden;
  padding: 80px 40px;
}
.pdp-visual.rise { background: radial-gradient(ellipse at center, rgba(255,204,65,0.10) 0%, var(--bg) 70%); }
.pdp-visual.drift { background: radial-gradient(ellipse at center, rgba(66,100,158,0.14) 0%, var(--bg) 70%); }
.pdp-visual::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 100px 100px;
}
.pdp-info { padding: clamp(48px, 6vw, 96px); display: flex; flex-direction: column; color: var(--fg); background: var(--bg); }
.pdp-crumbs { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 32px; display: flex; gap: 12px; }
.pdp-crumbs span { opacity: 0.5; }
.pdp-crumbs a { cursor: pointer; }
.pdp-title { font-size: clamp(48px, 5.5vw, 80px); font-weight: 600; letter-spacing: -0.04em; line-height: 0.95; margin: 16px 0 12px; color: var(--fg); }
.pdp-title em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.pdp-subtitle { font-size: clamp(18px, 1.5vw, 22px); color: var(--fg-soft); max-width: 38ch; margin-bottom: 32px; line-height: 1.3; }
.pdp-price-row { display: flex; align-items: baseline; gap: 16px; padding: 24px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); margin-bottom: 32px; }
.pdp-price { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; }
.pdp-price-detail { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--fg-mute); }
.pdp-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.pdp-opt {
  display: flex; justify-content: space-between; align-items: center;
  border: 1px solid var(--hairline); padding: 20px 24px; border-radius: 14px;
  cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease;
}
.pdp-opt.active { border-color: var(--fg); background: var(--bg-2); }
.pdp-opt:hover { border-color: var(--fg-mute); }
.pdp-opt-label { display: flex; flex-direction: column; gap: 4px; }
.pdp-opt-name { font-size: 15px; font-weight: 500; }
.pdp-opt-desc { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); }
.pdp-opt-price { font-family: var(--mono); font-size: 13px; }
.pdp-actions { display: flex; gap: 12px; margin-bottom: 32px; }
.pdp-accordion { border-top: 1px solid var(--hairline); margin-top: auto; }
.pdp-acc-item { border-bottom: 1px solid var(--hairline); }
.pdp-acc-head { padding: 20px 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: 15px; font-weight: 500; }
.pdp-acc-body { padding-bottom: 20px; font-size: 14px; color: var(--fg-soft); line-height: 1.55; }

.nutrition { background: var(--bg-2); border: 1px solid var(--fg); padding: 24px; }
.nutrition h5 { font-size: 11px; font-family: var(--mono); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--fg); }
.nutrition-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--hairline); font-size: 13px; }
.nutrition-row strong { font-weight: 500; color: var(--fg); }

/* ============ MISC ============ */
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--hairline); padding: 6px 12px; border-radius: 999px;
  color: var(--fg-soft);
}
.tag-fg { background: var(--fg); color: var(--ink); border-color: var(--fg); }
.tag-rise { border-color: var(--rise); color: var(--rise); }
.tag-drift { border-color: var(--drift); color: var(--drift); }

.kicker {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 40px;
}
.kicker .num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--fg-mute); }
.kicker-title { font-size: clamp(28px, 3.2vw, 48px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.kicker-title em { font-family: var(--serif); font-style: italic; font-weight: 400; }

.flow-list { display: grid; grid-template-columns: repeat(var(--flow-cols, 4), 1fr); gap: 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.flow-step { padding: 32px 28px; border-right: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 12px; color: var(--fg); }
.flow-step:last-child { border-right: 0; }
.flow-step-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--fg-mute); }
.flow-step-title { font-size: 18px; font-weight: 500; letter-spacing: -0.015em; }
.flow-step-desc { font-size: 13px; color: var(--fg-soft); line-height: 1.5; }

/* Filter bar */
.filter-bar {
  display: flex; align-items: center; gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 8px;
}
.filter-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-pill {
  font-family: var(--sans); font-size: 13px;
  padding: 8px 14px;
  border: 1px solid var(--hairline); border-radius: 999px;
  transition: all 0.2s ease;
  color: var(--fg-soft);
  cursor: pointer;
}
.filter-pill.active { background: var(--fg); color: var(--ink); border-color: var(--fg); }
.filter-pill:hover { border-color: var(--fg); color: var(--fg); }
.filter-sort {
  margin-left: auto;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-mute);
  position: relative;
}
.filter-sort-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font: inherit;
  color: var(--fg-mute);
  letter-spacing: inherit; text-transform: inherit;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.filter-sort-btn:hover { border-color: var(--fg); color: var(--fg); }
.filter-sort-btn.open  { border-color: var(--fg); color: var(--fg); background: var(--bg-2); }
.filter-sort-label { color: var(--fg-mute); }
.filter-sort-btn.open .filter-sort-label,
.filter-sort-btn:hover .filter-sort-label { color: var(--fg-soft); }
.filter-sort-value { color: var(--fg); font-weight: 500; }
.filter-sort-chev {
  width: 10px; height: 7px; flex-shrink: 0;
  transition: transform 0.2s ease;
}
.filter-sort-btn.open .filter-sort-chev { transform: rotate(180deg); }

.filter-sort-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  margin: 0; padding: 6px;
  list-style: none;
  min-width: 220px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.18);
  z-index: 50;
  animation: filter-sort-menu-in 0.16s cubic-bezier(0.2,0.7,0.2,1);
}
@keyframes filter-sort-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.filter-sort-menu li { margin: 0; }
.filter-sort-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font: inherit;
  letter-spacing: inherit; text-transform: inherit;
  color: var(--fg-soft);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.filter-sort-opt:hover { background: var(--bg-2); color: var(--fg); }
.filter-sort-opt.active { color: var(--fg); }
.filter-sort-opt svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--rise); }

/* Cart drawer */
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  z-index: 200; opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(440px, 92vw);
  background: var(--bg); z-index: 201;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1);
  display: flex; flex-direction: column;
  border-left: 1px solid var(--hairline);
  color: var(--fg);
}
.drawer.open { transform: translateX(0); }
.drawer-head { padding: 24px 28px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--hairline); }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 28px; }
.drawer-foot { padding: 24px 28px; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 16px; }
.drawer-row { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--hairline); align-items: center; }
/* Phase 5-γ Commit 4 (fix-3) — empty-thumb placeholder. When item.image
   is null (e.g., merch without a product image uploaded), the thumb
   <div> would otherwise collapse via Dawn base.css's multi-selector
   :empty rule group (`a:empty, ul:empty, dl:empty, div:empty,
   section:empty, article:empty, p:empty, ... { display: none }` at
   base.css:468-481), causing the row's title column to shift left and
   the drawer items to look inconsistent. Compound selector
   (.drawer-row .drawer-row-thumb) lifts specificity to (0,2,0) — beats
   the :empty rule's (0,1,1). Matches the cart-page .cart-page-line-thumb
   override at the drawer's 56px scale (see .cart-page-line .cart-page-
   line-thumb below for the same pattern applied to the cart-page <a>
   thumb element). */
.drawer-row .drawer-row-thumb {
  display: block;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
}
.drawer-row .drawer-row-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.drawer-row-info { flex: 1; }
.drawer-row-title { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
.drawer-row-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); margin-top: 4px; }
.drawer-row-price { font-family: var(--mono); font-size: 13px; }
.drawer-row-actions {
  display: flex; flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.drawer-empty { padding: 80px 0; text-align: center; }
.drawer-empty p { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--fg-mute); margin-bottom: 24px; }

/* Cart case-aggregation — predictor shimmer, discount line, progress nudge.
   Phase 3B-1 Part 4b-2. Lives in the drawer footer above the subtotal. */
.cart-predictor {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--hairline);
  border-radius: 4px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-mute);
}
.cart-predictor[hidden] { display: none; }
.cart-predictor-bar {
  flex: 0 0 36px; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--hairline) 0%, var(--rise) 50%, var(--hairline) 100%);
  background-size: 200% 100%;
  animation: cart-predictor-shimmer 1.4s ease-in-out infinite;
}
@keyframes cart-predictor-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.cart-discount-line {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px;
  color: var(--rise);
}
.cart-discount-title { font-family: var(--serif); font-style: italic; }
.cart-discount-amount { font-family: var(--mono); letter-spacing: 0.04em; }
/* × button next to an applied discount title. Clears the entire applied
   discount set via /cart/update.js {discount:''} (Shopify storefront API
   doesn't expose per-code removal — pre-launch carts hold one code at a
   time, so blanket clear matches user intent). */
.cart-discount-remove {
  margin-left: 6px;
  padding: 0 4px;
  font-size: 14px;
  line-height: 1;
  color: var(--fg-mute);
  background: none;
  border: 0;
  cursor: pointer;
  vertical-align: baseline;
  transition: color 0.15s ease;
}
.cart-discount-remove:hover,
.cart-discount-remove:focus-visible { color: var(--fg); }
.cart-discount-remove:focus-visible { outline: 1px solid var(--hairline); outline-offset: 2px; }

.cart-nudge {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-mute);
  padding: 2px 0 0;
}
.cart-nudge[hidden] { display: none; }

/* Q5 — checkout-blocked state. Triggered by case-aggregation.js when the
   discount backend (engine, mint, or apply) fails AND the cart has eligible
   items. Distinct visual from a normally-disabled checkout (which never
   happens in this theme): noticeable enough that the user understands the
   button isn't responding because of a problem we need to surface. */
.cart-checkout-error {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em;
  color: #ff9b9b;
  background: rgba(255, 75, 75, 0.08);
  border: 1px solid rgba(255, 75, 75, 0.35);
  border-radius: 4px;
  padding: 10px 12px;
  line-height: 1.4;
}
.cart-checkout-error[hidden] { display: none; }

.btn.checkout-blocked {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Inventory shortfall notice — bundle-builder /cart/add.js partial-add
   surface. Informational, not alarming — amber/rise accent rail with a
   subtle wash. Lives at the top of the drawer-body, above line items. */
.cart-shortfall-notice {
  margin: 8px 0 16px 0;
  padding: 12px 14px;
  border-left: 3px solid var(--rise);
  background: rgba(255, 204, 65, 0.08);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--fg-soft);
}
.cart-shortfall-notice[hidden] { display: none; }
.cart-shortfall-notice ul {
  margin: 6px 0 0 0;
  padding: 0;
  list-style: none;
}
.cart-shortfall-notice li {
  padding: 2px 0;
}

/* Line-item Remove button — small subtle text link sitting under the
   line price in the drawer-row-actions column (right side of each
   row). Mono typography matches the rest of the drawer's micro-copy;
   muted color stays out of the way so the price stays the primary
   visual anchor of the actions column. */
.cart-line-remove {
  padding: 2px 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}
.cart-line-remove:hover,
.cart-line-remove:focus-visible { color: var(--fg); }
.cart-line-remove:focus-visible { outline: 1px solid var(--hairline); outline-offset: 2px; }

/* Clear cart — small text link inside drawer-head's eyebrow, only
   rendered when cart.item_count > 0. Visually subordinate to the
   eyebrow text; destructive action lives away from the checkout CTA. */
.cart-clear-all {
  margin-left: 10px;
  padding: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}
.cart-clear-all:hover,
.cart-clear-all:focus-visible { color: var(--fg); }
.cart-clear-all:focus-visible { outline: 1px solid var(--hairline); outline-offset: 2px; }

/* "View full cart" link in the drawer foot, between the case-aggregation
   block + checkout error and the Checkout button. Closes the drawer on
   click via [data-cart-close] (universal handler in circadia-chrome.js).
   Mono uppercase muted matches the .cart-line-remove / .cart-clear-all
   typography so all secondary drawer text links read consistently. */
.cart-drawer-view-cart {
  display: block;
  text-align: center;
  padding: 6px 0;
  margin: 4px 0 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
  text-decoration: none;
  transition: color 0.15s ease;
}
.cart-drawer-view-cart:hover,
.cart-drawer-view-cart:focus-visible { color: var(--fg); }
.cart-drawer-view-cart:focus-visible { outline: 1px solid var(--hairline); outline-offset: 2px; }

/* ============================================================
   CART PAGE — Phase 3B-1 Step 3 rebuild
   ============================================================
   Wider than the drawer. Larger thumbnails. 3-column desktop layout
   per line (thumb / info / price), stacked on mobile. Anchors the
   shared snippets (tier-progress-bar, cart-case-aggregation-block,
   cart-cross-sell-rail) into a page-width shell. */

.cart-page-shell {
  padding-top: 48px;
  padding-bottom: 64px;
}

.cart-page-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--hairline);
}
.cart-page-title {
  font-family: var(--display);
  font-stretch: 88%;
  font-weight: 600;
  font-size: clamp(32px, 4.4vw, 56px);
  letter-spacing: -0.02em;
  color: var(--fg);
  text-transform: lowercase;
  margin: 0;
}
.cart-page-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-left: auto;
}

/* Empty state — same poetic copy as the drawer's empty state, scaled up. */
.cart-page-empty {
  padding: 120px 0 160px;
  text-align: center;
}
.cart-page-empty p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(32px, 4vw, 48px);
  color: var(--fg-mute);
  margin-bottom: 32px;
}

/* Line item list */
.cart-page-lines {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cart-page-line {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--hairline);
}
.cart-page-line:last-child { border-bottom: 0; }
.cart-page-line-thumb {
  display: block;
  width: 160px;
  height: 160px;
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
}
/* Phase 5-γ Commit 4 (fix-4) — empty-thumb placeholder override. Same
   root cause as the drawer fix above: Dawn base.css's :empty rule
   group includes `a:empty { display: none }`, which hides our cart-
   page thumb anchor when item.image is null. Compound selector lifts
   specificity to (0,2,0) — beats Dawn's `a:empty` at (0,1,1). The
   .cart-page-line-thumb rule above carries the placeholder styling
   (160×160 box + bg + border); this override just keeps the element
   visible when empty. */
.cart-page-line .cart-page-line-thumb {
  display: block;
}
.cart-page-line-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-page-line-info { min-width: 0; }
.cart-page-line-title {
  display: block;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-decoration: none;
  margin-bottom: 6px;
}
.cart-page-line-title:hover { color: var(--fg-soft); }
.cart-page-line-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 14px;
}
.cart-page-line-stepper {
  display: flex;
  align-items: center;
  gap: 18px;
}
/* Right-most line column: price stacked above a small Remove link.
   Phase 4-α — Remove moved out of the .cart-page-line-stepper row
   so the qty stepper isn't paired with a destructive action; cleaner
   visual hierarchy + matches the drawer pattern of "actions live next
   to price." Right-aligns the column so the price + Remove read as a
   single right-anchored block at the line item's edge. */
.cart-page-line-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  align-self: start;
  padding-top: 4px;
}
.cart-page-line-price {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--fg);
  white-space: nowrap;
}
/* Bump tappable area on the Remove link beyond .cart-line-remove's
   2px-padding default so it meets the ~30px minimum tap-target for
   touch UIs without changing visual weight. Mono uppercase muted
   styling itself comes from the shared .cart-line-remove rule above. */
.cart-page-line-actions .cart-line-remove { padding: 6px 0; }

/* === Cart page footer === */
.cart-page-footer .cart-page-shell {
  padding-top: 24px;
  padding-bottom: 96px;
}
/* Phase 4-β — two-column wrapper. Markup is totals-first (mobile-
   first ordering); desktop uses CSS `order` to surface the cross-
   sell rail on the left. Empty-rail case (mixed RISE+DRIFT >$75)
   leaves only the totals child, which flex-grows to fill the row. */
.cart-page-footer-row {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  margin-top: 32px;
}
.cart-page-totals {
  flex: 1;
  order: 1;                     /* visually right on desktop */
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.cart-page-footer-row .cart-cross-sell-rail {
  flex: 1;
  order: 0;                     /* visually left on desktop */
  /* Override the rail's full-width-context chrome (margin/padding/
     border-top from the pre-4-β layout when it sat between line
     items and totals). In a column it doesn't need those. */
  margin: 0;
  padding: 0;
  border-top: 0;
  min-width: 0;
}

/* === Loyalty card (Phase 4-β) === */
.cart-loyalty-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--bg);
  /* State machine via [data-loyalty-state]. Each state-specific
     selector below scopes content rules without needing JS class
     toggles. */
}
.cart-loyalty-title {
  font-family: var(--display);
  font-stretch: 90%;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--fg);
}
.cart-loyalty-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--rise);
}
.cart-loyalty-body {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg-soft);
}
.cart-loyalty-cta {
  margin-top: 4px;
  align-self: stretch;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cart-loyalty-secondary {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
  text-decoration: none;
  text-align: center;
  transition: color 0.15s ease;
}
.cart-loyalty-secondary:hover { color: var(--fg); }

/* State B — Tier 1 progress visual. JS populates the cans/threshold
   text and the fill width. */
.cart-loyalty-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.cart-loyalty-progress-track {
  position: relative;
  height: 4px;
  background: var(--hairline);
  border-radius: 999px;
  overflow: hidden;
}
.cart-loyalty-progress-fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--rise);
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.2,0.7,0.2,1);
}
.cart-loyalty-progress-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
  display: flex;
  justify-content: space-between;
}

/* State C — earn preview amount. Monospace + --rise so the dollar
   figure reads as "earned" continuous with the tier-bar fill bar
   color in the cart-page tier visualization. */
.cart-loyalty-earn {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
}
.cart-loyalty-earn-label {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--fg-soft);
}
.cart-loyalty-earn-amount {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--rise);
}
.cart-loyalty-foot {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  /* Bumped from 2px to 6px in Phase 5-γ Commit 3b — matching breathing
     room below the new credit row so the foot line doesn't crowd the
     Apply button. Applies in both States (with or without credit row);
     the 4px delta is imperceptible when the row is absent. */
  margin-top: 6px;
}

/* Phase 5-γ Commit 3b — credit-available row.
   Renders only in State A (balance > 0, eligibleCents > 0, no CC- code on
   cart). State B (CC- applied) is handled by cart-case-aggregation-block
   .liquid's generic cart_level_discount_applications renderer + × Remove.
   The amount sits in the sans figure register (real money figure, not
   metadata); the input + button pair reuses the cart-promo-input
   bordered-group pattern (no new input design system). Flex-wrap so on
   narrow viewports the input+button drops below the amount text. */
.cart-loyalty-credit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  row-gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}
.cart-loyalty-credit-amount {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--fg);
  /* No uppercase, no letter-spacing — this is a regular figure. */
}
/* The input+button bordered group (inherits .cart-promo-input styling).
   flex-shrink: 0 prevents the group from collapsing below the input's
   intrinsic size when horizontal space tightens — flex-wrap takes over
   and the group drops to the next line. flex-wrap: nowrap is explicit
   (defensive against any cascade or default override) so the input +
   button stay together as a single visual unit on whatever row they
   end up on. */
.cart-loyalty-credit-controls {
  flex-shrink: 0;
  flex-wrap: nowrap;
}
/* Compact override of the inherited .cart-promo-input-field padding —
   the credit input is narrower than the promo input (numeric, not a
   freeform code). flex: none overrides the parent class's flex: 1
   (which would set flex-basis: 0 and ignore our width: 88px); we want
   a fixed 88px input width so the bordered group has a stable size
   and the Apply button never gets pushed off the row. Browser-default
   spinners hidden: customers type the amount; up/down clicks are not
   part of the UX, and the spinner widgets clash with the bordered-
   group's compact mono register. */
.cart-loyalty-credit-input {
  flex: none;
  width: 88px;
  padding-left: 10px;
  padding-right: 4px;
  -moz-appearance: textfield;
  appearance: textfield;
}
.cart-loyalty-credit-input::-webkit-inner-spin-button,
.cart-loyalty-credit-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Phase 5-γ Commit 4 (fix-2) — "remaining ($X.XX applied)" secondary
   line. Renders between the headline and the input controls when the
   customer has partially applied. flex-basis 100% so it breaks to its
   own line within the .cart-loyalty-credit-row flex-wrap layout.
   Slightly larger than the helper text since it carries actionable
   money figures, but quieter than the headline. */
.cart-loyalty-credit-remaining {
  flex-basis: 100%;
  margin-top: -2px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--fg-mute);
}

/* Held-credit line. Same muted treatment as the remaining line on the cart
   page (which reuses .cart-loyalty-credit-remaining directly); the drawer
   needs its own selector because its notice is not the same flex container.
   Rendered ONLY when credit is inside its hold window, so a customer with no
   held credit sees no extra line at all. */
.cart-drawer-credit-held {
  display: block;
  flex-basis: 100%;
  margin-top: 2px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--fg-mute);
}

/* Phase 5-γ Commit 4 — MODE B (CASE- on cart) shares the input+button
   bordered group with MODE A; only the button label + action differ.
   No separate .cart-loyalty-credit-row-copy needed — the helper text
   sits below the bordered group on its own line within the existing
   .cart-loyalty-credit-row flex-wrap layout. */
.cart-loyalty-credit-helper {
  margin: 0;
  flex-basis: 100%;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
  line-height: 1.4;
}

/* Phase 5-γ Commit 4 — inline error display for the credit row. Same
   shape used for the drawer notice via .cart-drawer-credit-error. Mono
   micro register so the error reads as compact metadata, not a full
   alert banner. */
/* Inline per-row failure message for a cart quantity change. Created on
   demand by changeLine in circadia-chrome.js, so no Liquid slot is needed, and
   it lives INSIDE [data-cart-item] so a successful refreshCart replaces it with
   the rest of the row and the message clears itself. Same treatment as the
   credit error below, and it renders on BOTH surfaces (.drawer-row and
   .cart-page-line). */
.cart-item-error {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--error, #ff8a85);
}
.cart-item-error[hidden] { display: none; }

.cart-loyalty-credit-error {
  flex-basis: 100%;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  /* --error fallback — if --error CSS var isn't defined in the theme,
     a desaturated red works against the dark loyalty card background. */
  color: var(--error, #ff8a85);
}

/* Phase 5-γ Commit 3b — drawer condensed credit notice. Discovery
   surface: shows "$X.XX credit available" + "View cart to apply →"
   between cart items and the case-aggregation block. The action surface
   (Apply/partial-amount input) lives on /cart only. Placeholder renders
   server-side via cart-drawer.liquid (gated on customer + item_count > 0);
   JS populates innerHTML when cachedMe + cart resolve. */
.cart-drawer-credit-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
}
.cart-drawer-credit-amount {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--fg);
}
.cart-drawer-credit-cta {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  text-decoration: none;
  transition: color 0.15s ease;
}
.cart-drawer-credit-cta:hover { color: var(--fg); }

/* Phase 5-γ Commit 4 — drawer MODE B inline Copy button. Tighter
   register than the cart-page copy button since drawer real estate is
   smaller; sits inline with the amount text. */
.cart-drawer-credit-copy {
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 5px 10px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.cart-drawer-credit-copy:hover,
.cart-drawer-credit-copy:focus-visible { border-color: var(--fg); }
.cart-drawer-credit-copy:disabled {
  opacity: 0.7;
  cursor: default;
}

/* Phase 5-γ Commit 4 — drawer-scope error display. Sits below the
   amount+CTA row in the drawer notice; full width. */
.cart-drawer-credit-error {
  width: 100%;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--error, #ff8a85);
}

/* Loading skeleton — three shimmer bars approximating title / body /
   meta heights so the card doesn't reflow when JS swaps in the
   populated content. */
.cart-loyalty-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 92px;             /* matches a populated tier-2+ card */
}
.cart-loyalty-skeleton-bar {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--hairline) 0%,
    color-mix(in oklab, var(--fg) 8%, transparent) 50%,
    var(--hairline) 100%
  );
  background-size: 200% 100%;
  animation: cart-loyalty-shimmer 1.5s ease-in-out infinite;
}
.cart-loyalty-skeleton-bar-title { width: 70%; height: 18px; }
.cart-loyalty-skeleton-bar-body  { width: 90%; height: 14px; }
.cart-loyalty-skeleton-bar-meta  { width: 50%; height: 12px; }
@keyframes cart-loyalty-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: -100% 50%; }
}

/* Error state — no CTA, just reassurance. Same dimensions as the
   skeleton so the card doesn't flicker layout if /me fails. */
.cart-loyalty-card[data-loyalty-state="error"] { /* inherits base card chrome */ }

/* Promo code input — input + ghost button row */
.cart-promo-input {
  display: flex;
  gap: 0;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg);
}
.cart-promo-input-field {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg);
  outline: none;
}
.cart-promo-input-field::placeholder {
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.cart-promo-input-apply {
  padding: 12px 18px;
  /* Suppress the inherited .btn / .btn-ghost border (4 sides at --fg
     color) so only our hairline divider on the left is visible. The
     container's outer border + overflow:hidden + rounded corners
     handle the rest of the visual chrome — the button is just the
     "right cell" of a bordered group, separated by the divider. */
  border: 0;
  border-left: 1px solid var(--hairline);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cart-promo-error {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ff9b9b;
  padding: 6px 2px;
}
.cart-promo-error[hidden] { display: none; }

.cart-page-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.cart-page-subtotal-row {
  font-size: 15px;
  color: var(--fg-soft);
  padding-top: 4px;
}
.cart-page-shipping-threshold {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
  line-height: 1.5;
  padding: 2px 0;
}
.cart-page-shipping-threshold strong {
  color: var(--fg);
  font-weight: 500;
}
.cart-page-shipping-met {
  color: var(--rise);
}
.cart-page-tax-note {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
  padding: 2px 0;
}
.cart-page-total-row {
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
  font-size: 18px;
  color: var(--fg);
  font-weight: 500;
}
.cart-page-total-value {
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

/* Large primary checkout — wider + taller than the drawer's. */
.cart-page-checkout {
  width: 100%;
  padding: 22px 28px;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.cart-page-additional-checkout-buttons {
  margin-top: 12px;
}

/* === Cross-sell rail ===
   Phase 4-α-hotfix — cards now render via {% render 'product-card' %}
   for pixel parity with /collections/shop. The catalogue's .product-card
   rules (background, ::before --flavor-color glow, hover state, 4-view
   media tabs, sub-brand pill, 4-PACK chip, title spans, tasting note,
   + quick-add button) all apply. Only the container chrome + per-card
   sizing + border treatment is cross-sell-specific, scoped under
   [data-card-context="cross-sell"] for clean specificity. */
.cart-cross-sell-rail {
  position: relative;
  margin: 40px 0 16px;
  padding: 32px 0 8px;
  border-top: 1px solid var(--hairline);
}
.cart-cross-sell-header {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 18px;
}
/* Hide native scrollbar across browsers — arrows are the canonical nav.
   scrollbar-width: none (Firefox) + ::-webkit-scrollbar { display: none }
   (Chromium / Safari). The bar can still be wheel-scrolled / touch-
   swiped — we're just suppressing the chrome. */
.cart-cross-sell-scroll {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.cart-cross-sell-scroll::-webkit-scrollbar { display: none; }

/* Cross-sell context overrides for the catalogue product-card. Catalogue
   borders are a grid-divider pattern (border-right on every card +
   :nth-child(3n) removing it on the trailing card per row); in a flex
   scroll-snap rail those borders read as orphaned floating edges.
   Replace with a full hairline outline + rounded corners so each card
   reads as a self-contained scrollable unit. Sizing: 3 cards visible
   per viewport on desktop (matches the catalogue grid's card width). */
.product-card[data-card-context="cross-sell"] {
  flex: 0 0 calc((100% - 36px) / 3);
  scroll-snap-align: start;
  border: 1px solid var(--hairline);
  border-radius: 6px;
}

/* Carousel arrow buttons — absolute over the scroll's left/right edges.
   Hidden via the [hidden] attribute when there's no overflow (set by
   initCarousels in circadia-chrome.js); the .is-disabled class fires
   at scroll boundaries. Reusable pattern via [data-carousel] /
   [data-carousel-scroll] / [data-carousel-prev|next] hooks for future
   carousels (drawer cross-sell strip in Phase 4-δ etc). */
.cart-cross-sell-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  color: var(--fg);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.cart-cross-sell-arrow:hover { background: var(--bg); }
.cart-cross-sell-arrow.is-disabled,
.cart-cross-sell-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.cart-cross-sell-arrow-prev { left: -18px; }
.cart-cross-sell-arrow-next { right: -18px; }

/* === Drawer cross-sell strip (Phase 4-δ) ===
   Text-only compact variant of the cart-page rail. Sits inside the
   drawer-foot between the case-aggregation block and the subtotal
   row. Capped at 3 items in the Liquid loop; full set surfaces via
   the cart-page rail one tap away via "View full cart". */
.drawer-cross-sell-strip {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.drawer-cross-sell-strip-header {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 6px;
}
.drawer-cross-sell-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
}
/* First row sits flush against the header — no extra divider that
   would visually double up with the strip's own spacing from the
   case-agg block above. */
.drawer-cross-sell-row:first-of-type { border-top: 0; padding-top: 4px; }
.drawer-cross-sell-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 1.2;
  color: var(--fg);
}
.drawer-cross-sell-sub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.drawer-cross-sell-flavor {
  font-family: var(--serif);
  font-style: italic;
}
.drawer-cross-sell-form { margin: 0; flex-shrink: 0; }
.drawer-cross-sell-add {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.drawer-cross-sell-add:hover {
  background: var(--fg);
  color: var(--ink);
  border-color: var(--fg);
}
/* CSS-only feedback pulse on click — transient scale-down so the
   user feels the Add register without needing a JS-driven
   "Added" toast. The :active state ends when the click releases /
   the form submission fires; the universal /cart/add interceptor
   then opens + refreshes the drawer, re-rendering the strip with
   the new cart state (which may drop this row if the rule output
   changes). */
.drawer-cross-sell-add:active {
  transform: scale(0.94);
}
.drawer-cross-sell-add:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 750px) {
  .cart-page-shell { padding-top: 24px; padding-bottom: 32px; }
  .cart-page-header { flex-wrap: wrap; }
  .cart-page-meta { margin-left: 0; width: 100%; }
  .cart-page-line {
    grid-template-columns: 96px 1fr;
    gap: 16px;
  }
  .cart-page-line-thumb { width: 80px; height: 80px; }
  /* Phase 4-α-hotfix-3: reverted hotfix 2's full-width action bar.
     Price + Remove now stack vertically in a top-right column, same
     direction as desktop — just tighter sizes. Title-peer price font
     (18px) gives the line item a stronger right-anchored read on
     narrow viewports than the action-bar pattern did. Grid widens
     back to 3 columns (80px thumb / 1fr info / auto actions) but
     trimmed: 80px thumb (was 96px), 14px gap (was 16px), 20px
     vertical padding (was 28px). Verified fits 320px iPhone SE. */
  .cart-page-line {
    grid-template-columns: 80px 1fr auto;
    gap: 14px;
    padding: 20px 0;
  }
  .cart-page-line-price { font-size: 18px; }
  .cart-page-line-actions .cart-line-remove { padding: 4px 0; font-size: 9px; }
  .cart-page-totals { max-width: none; margin-left: 0; }

  /* Phase 4-β mobile stack: column flex, totals-first markup is
     natural reading order. Tier-progress sits below the row in
     markup so it's last visually. */
  .cart-page-footer-row {
    flex-direction: column;
    gap: 24px;
    margin-top: 16px;
  }
  /* Mobile loyalty card: stripped border + radius, hairline
     dividers above and below — reads as a delimited content
     block, not a boxed-in card. Internal padding stays so text
     doesn't crowd the dividers. */
  .cart-loyalty-card {
    border: 0;
    border-radius: 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    padding: 16px 0;
  }

  /* Phase 4-α-hotfix-3: mobile 4-PACK chip relocated. Hotfix 2 hid the
     chip entirely on mobile to avoid colliding with the always-visible
     + button (top-right). Now we keep the chip visible but stack it
     vertically below the subbrand pill in the top-left column — the
     two pills + the + button live on opposite corners with no overlap.
     flex-direction:column on .product-card-head reorients both pills
     to a left-edge stack; the + button is position:absolute so the
     head's flex flow doesn't affect it. */
  .product-card-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  /* Neutralize the desktop .product-card:hover .pack-tag { opacity: 0; }
     fade rule on touch — mobile Safari fires :hover on first-tap, which
     would briefly hide the chip the user just touched. Force visible
     across hover states on mobile. */
  .product-card:hover .product-card-tag.pack-tag { opacity: 1; }

  /* Cross-sell mobile: wider per-card flex sizing + edge-to-edge bleed
     so swipe-scroll feels native. Inherits display:flex / overflow-x:
     auto / scroll-snap from the base rule above (formerly mobile-only,
     Phase 4-α promoted to base). */
  .cart-cross-sell-scroll {
    scroll-padding: 0 var(--gutter, 20px);
    gap: 12px;
    margin: 0 calc(-1 * var(--gutter, 20px));
    padding: 0 var(--gutter, 20px);
  }
  /* Mobile sizing on the cross-sell context catalogue card. Override
     the desktop calc((100% - 36px) / 3) — too narrow on phone widths.
     70vw with a 280px cap matches the previous .cart-cross-sell-card
     mobile sizing convention. */
  .product-card[data-card-context="cross-sell"] {
    flex: 0 0 70vw;
    max-width: 280px;
  }
  /* Mobile arrows: previously display:none — left users with no swipe
     affordance hint after the scrollbar was hidden. Now shrunk to 28px
     and pulled INSIDE the rail edges (left/right: 8px) so they don't
     clip the viewport. Swipe remains primary; arrows serve as a
     visible cue that the rail is scrollable. */
  .cart-cross-sell-arrow {
    width: 28px; height: 28px;
    font-size: 14px;
  }
  .cart-cross-sell-arrow-prev { left: 8px; }
  .cart-cross-sell-arrow-next { right: 8px; }

  /* Mobile + quick-add button visibility — applies globally to the
     catalogue card on /collections/shop AND the cross-sell card on
     /cart. Desktop hides it (opacity:0) and fades in on hover; on
     touch devices there's no hover, so users have no way to discover
     the action. Force-visible on mobile. Touch target stays at the
     existing 36px × 36px (meets WCAG minimum). */
  .product-card-add { opacity: 1; }
}

   Phase 3B-1 Part 4b-3 client-side guard silently clears a case discount
   on Checkout-button click. Bottom-center placement, z-index above the
   drawer (drawer = 201, overlay = 200) so it survives any drawer-collapse
   animation during the click→submit transition. Mono micro-copy style to
   match the rest of the drawer-accent typography. See
   docs/01_ARCHITECTURE/EDGE_CASES.md EC-035 for the architecture context. */
.checkout-guard-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(12px);
  z-index: 220;
  max-width: min(420px, 92vw);
  padding: 12px 16px;
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--fg-soft);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.checkout-guard-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Checkout button working-state — used by the checkout-guard interceptor
   while the guard runs (1.5s engine recheck timeout window). Visual is
   a subtle dim + cursor change; matches the existing .checkout-blocked
   pattern but is a different class because the semantic is "guard
   working" vs "blocked due to backend failure". */
.btn.is-loading {
  opacity: 0.6;
  cursor: progress;
  pointer-events: none;
}

/* ROADMAP */
.roadmap {
  display: grid; grid-template-columns: 80px 1fr 1fr 1fr 1fr;
  border-top: 1px solid var(--hairline);
}
.roadmap-col {
  padding: 32px 24px;
  border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 20px;
  min-height: 320px;
}
.roadmap-col:last-child { border-right: 0; }
.roadmap-head { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
.roadmap-card {
  padding: 16px;
  border: 1px solid var(--hairline);
  background: var(--bg-2);
  color: var(--fg-soft);
  border-radius: 4px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13px;
}
.roadmap-card.shipped { background: var(--fg); color: var(--ink); border-color: var(--fg); }
.roadmap-card.next { background: var(--bg-3); border-color: var(--fg-mute); color: var(--fg); }
.roadmap-card .tag { padding: 3px 8px; font-size: 9px; align-self: flex-start; }
.roadmap-card.shipped .tag { border-color: var(--ink); color: var(--ink); }
.roadmap-card strong { font-size: 18px; font-weight: 500; letter-spacing: -0.015em; }
.roadmap-card strong em { font-family: var(--serif); font-style: italic; }

/* About manifesto */
.manifesto { padding: clamp(60px, 8vw, 140px) 0; max-width: 1100px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.manifesto p {
  font-size: clamp(24px, 2.6vw, 40px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-wrap: pretty;
  color: var(--fg);
}
.manifesto p + p { margin-top: 1em; }
.manifesto em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--fg-soft); }

/* form inputs */
.input {
  padding: 16px 20px; border: 1px solid var(--hairline); border-radius: 8px;
  font-family: var(--sans); font-size: 14px; background: var(--bg-2);
  color: var(--fg); outline: none;
  transition: border-color 0.2s ease;
}
.input:focus { border-color: var(--fg); }
.input::placeholder { color: var(--fg-mute); }
.input.pill { border-radius: 999px; padding: 18px 24px; }

/* surfaces with their own forms */
.surface-rise .input,
.surface-drift .input,
.surface-light .input { background: var(--paper); color: var(--ink); border-color: rgba(0,0,0,0.15); }
.surface-rise .input::placeholder,
.surface-drift .input::placeholder,
.surface-light .input::placeholder { color: var(--graphite); }

/* ============ COLOR INNER-PAGE HERO ============ */
.page-hero {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 7vw, 100px);
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.5;
}
.page-hero > .container { position: relative; z-index: 2; }

.page-hero.science {
  background:
    radial-gradient(ellipse 90% 70% at 75% 30%, rgba(255, 204, 65, 0.30) 0%, transparent 55%),
    radial-gradient(ellipse 60% 60% at 20% 80%, rgba(66, 100, 158, 0.20) 0%, transparent 60%),
    linear-gradient(160deg, #1a1408 0%, #0a0a0a 65%, #000 100%);
}
.page-hero.future {
  background:
    radial-gradient(ellipse 70% 70% at 80% 80%, rgba(66, 100, 158, 0.32) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 20% 30%, rgba(255, 204, 65, 0.16) 0%, transparent 60%),
    linear-gradient(180deg, #0c1a2e 0%, #050505 70%);
}
.page-hero.ambassadors {
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255, 204, 65, 0.20) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 80% 90%, rgba(184, 138, 22, 0.18) 0%, transparent 60%),
    linear-gradient(170deg, #1a1408 0%, #050505 70%);
}
.page-hero.journal {
  background:
    radial-gradient(ellipse 70% 70% at 20% 30%, rgba(66, 100, 158, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 60% 60% at 80% 80%, rgba(255, 204, 65, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, #0a0a0a 0%, #000 100%);
}
.page-hero.shop {
  background:
    radial-gradient(ellipse 60% 60% at 20% 30%, rgba(255, 204, 65, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 80% 70%, rgba(66, 100, 158, 0.22) 0%, transparent 60%),
    linear-gradient(170deg, #0a0a0a 0%, #050505 70%, #000 100%);
}
.page-hero.shop-rise {
  background:
    radial-gradient(ellipse 80% 70% at 70% 40%, rgba(255, 204, 65, 0.32) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 20% 80%, rgba(184, 138, 22, 0.20) 0%, transparent 60%),
    linear-gradient(160deg, #1a1408 0%, #050505 70%);
}
.page-hero.shop-drift {
  background:
    radial-gradient(ellipse 80% 70% at 70% 40%, rgba(66, 100, 158, 0.34) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 20% 80%, rgba(42, 67, 115, 0.22) 0%, transparent 60%),
    linear-gradient(170deg, #0c1a2e 0%, #050505 70%);
}
.page-hero.shop-merch {
  background:
    radial-gradient(ellipse 80% 70% at 70% 30%, rgba(255, 204, 65, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 30% 80%, rgba(66, 100, 158, 0.20) 0%, transparent 60%),
    linear-gradient(170deg, #1a1a1a 0%, #050505 70%);
}

/* ============ MERCH CARD ============ */
.merch-card .merch-card-visual {
  aspect-ratio: 1 / 1.05;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,0.06) 0%, transparent 65%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 18px);
  border-radius: 8px;
  position: relative;
  display: grid; place-items: center;
  overflow: hidden;
}
.merch-svg {
  width: 60%;
  height: 60%;
  color: var(--fg);
  opacity: 0.85;
  transition: transform 0.4s cubic-bezier(0.2,0.7,0.2,1), opacity 0.3s ease;
}
.merch-card:hover .merch-svg { transform: scale(1.05); opacity: 1; }
.merch-card-ph-label {
  position: absolute;
  bottom: 12px; left: 12px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-mute);
  background: var(--bg);
  padding: 4px 8px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
}

.merch-swatch {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.merch-swatch:hover { transform: scale(1.08); }
.merch-swatch.active {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--fg);
  transform: scale(1.08);
}

/* ============ AMBASSADOR APPLY — fluid, responsive ============ */
.apply-section {
  padding: clamp(60px, 8vw, 120px) 0;
  background:
    radial-gradient(ellipse 60% 70% at 80% 20%, rgba(255,204,65,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 70% at 20% 80%, rgba(66,100,158,0.08) 0%, transparent 60%),
    var(--bg);
  border-top: 1px solid var(--hairline);
}
.apply-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.apply-aside { display: flex; flex-direction: column; gap: 28px; }
.apply-aside-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0; margin-top: 16px; }
.apply-aside-list li {
  display: grid; grid-template-columns: 52px 1fr; gap: 14px;
  padding: 20px 0; border-top: 1px solid var(--hairline);
  font-size: 17px; line-height: 1.5; color: var(--fg-soft);
}
.apply-aside-list li:last-child { border-bottom: 1px solid var(--hairline); }
.apply-aside-list li span { font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; color: var(--fg-mute); padding-top: 3px; }
.apply-aside-link {
  /* Inline-block so the underline doesn't break across lines and the
     "→" hugs the text cleanly. */
  display: inline-block;
  color: var(--fg);
  cursor: pointer;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--fg);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.apply-aside-link:hover {
  color: var(--rise);
  border-bottom-color: var(--rise);
}

.apply-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  width: 100%;
}
.apply-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.apply-field > span {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
}
.apply-field-full { grid-column: 1 / -1; }
.apply-field .input { width: 100%; }
.apply-actions {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px;
  padding-top: 8px;
}
.apply-submit { padding: 18px 28px; font-size: 15px; }

@media (max-width: 880px) {
  .apply-grid { grid-template-columns: 1fr; gap: 32px; }
  .apply-actions { flex-direction: column-reverse; align-items: stretch; }
  .apply-submit { width: 100%; justify-content: center; }
}

/* ============ WHOLESALE — reasons grid, pricing tiers, science block ============ */
.wholesale-reasons {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; margin-top: 24px;
}
.wholesale-reason {
  display: grid; grid-template-columns: minmax(200px, 0.7fr) 1fr;
  gap: 24px;
  padding: clamp(24px, 2.5vw, 40px);
  border-radius: 16px;
  border: 1px solid var(--hairline);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.wholesale-reason:hover { border-color: var(--fg-mute); transform: translateY(-3px); }
.wholesale-reason.tone-rise,
.wholesale-reason.tone-drift,
.wholesale-reason.tone-mix,
.wholesale-reason.tone-mono { background: var(--bg-2); }
.wholesale-reason-stat { display: flex; flex-direction: column; gap: 6px; justify-content: center; align-items: center; text-align: center; }
.wholesale-reason-num {
  font-family: var(--display); font-stretch: 85%; font-weight: 700;
  font-size: clamp(36px, 4vw, 56px); letter-spacing: -0.04em; line-height: 1;
  color: var(--fg);
}
.wholesale-reason.tone-rise .wholesale-reason-num,
.wholesale-reason.tone-drift .wholesale-reason-num { color: var(--fg); }
.wholesale-reason-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); text-align: center; }
.wholesale-reason-title {
  font-family: var(--display); font-stretch: 90%; font-weight: 600;
  font-size: clamp(18px, 1.5vw, 22px); letter-spacing: -0.02em; line-height: 1.15;
  color: var(--fg); margin-bottom: 10px;
}
.wholesale-reason-body p { font-size: 14px; line-height: 1.55; color: var(--fg-soft); text-wrap: pretty; }

/* Pricing tiers */
.pricing-tiers {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.pricing-tier {
  position: relative;
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--bg);
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.pricing-tier:hover { border-color: var(--fg-mute); transform: translateY(-3px); }
.pricing-tier.featured {
  border-color: var(--rise);
  background: linear-gradient(170deg, rgba(255,204,65,0.10) 0%, var(--bg) 80%);
}
.pricing-flag {
  position: absolute; top: -10px; left: 24px;
  background: var(--rise); color: var(--ink);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  font-weight: 500;
}
.pricing-tier-name {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-mute);
}
.pricing-tier.featured .pricing-tier-name { color: var(--rise); }
.pricing-tier-price { display: flex; align-items: baseline; gap: 10px; }
.pricing-tier-per {
  font-family: var(--display); font-stretch: 85%; font-weight: 700;
  font-size: clamp(36px, 3.6vw, 56px); letter-spacing: -0.04em; line-height: 0.95;
  color: var(--fg);
}
.pricing-tier-unit { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
.pricing-tier-min { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--fg-soft); }
.pricing-tier-desc { font-size: 14px; line-height: 1.55; color: var(--fg-soft); margin-top: auto; padding-top: 10px; border-top: 1px solid var(--hairline); }

/* "Your margin at $5 MSRP" block — lands the point */
.pricing-tier-margin {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: linear-gradient(170deg, color-mix(in oklab, var(--green) 8%, transparent) 0%, transparent 100%);
  display: flex; flex-direction: column; gap: 6px;
}
.pricing-tier.featured .pricing-tier-margin {
  border-color: color-mix(in oklab, var(--green) 45%, transparent);
  background: linear-gradient(170deg, color-mix(in oklab, var(--green) 14%, transparent) 0%, transparent 100%);
}
.pricing-tier-margin-head {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
}
.pricing-tier-margin-row {
  display: flex; align-items: baseline; gap: 8px;
}
.pricing-tier-margin-dollar {
  font-family: var(--display); font-stretch: 85%; font-weight: 700;
  font-size: clamp(26px, 2.5vw, 36px); letter-spacing: -0.03em; line-height: 1;
  color: var(--green);
}
.pricing-tier-margin-unit {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
}
.pricing-tier-margin-pct {
  margin-left: auto;
  font-family: var(--display); font-stretch: 90%; font-weight: 600;
  font-size: 16px; letter-spacing: -0.01em;
  color: var(--fg);
  padding: 4px 10px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
}
.pricing-tier.featured .pricing-tier-margin-pct {
  color: var(--green);
  border-color: color-mix(in oklab, var(--green) 45%, transparent);
}

/* Wholesale reviews */
.wholesale-reviews {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.wholesale-review {
  padding: 28px;
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 16px;
}
.wholesale-review p {
  font-family: var(--serif); font-style: italic; font-size: 17px;
  line-height: 1.45; color: var(--fg); text-wrap: pretty;
  flex: 1;
}
.wholesale-review-foot { padding-top: 12px; border-top: 1px solid var(--hairline); }

/* Wholesale science block */
.wholesale-science {
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(32px, 4vw, 56px);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background:
    radial-gradient(ellipse 70% 70% at 80% 30%, rgba(255,204,65,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 70% 70% at 20% 80%, rgba(66,100,158,0.08) 0%, transparent 60%),
    var(--bg-2);
  align-items: center;
}
.wholesale-science-side { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wholesale-science-stat {
  padding: 18px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: rgba(0,0,0,0.25);
  text-align: center;
}
.wholesale-science-stat strong {
  display: block;
  font-family: var(--display); font-stretch: 85%; font-weight: 700;
  font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.03em;
  color: var(--rise);
  margin-bottom: 4px;
}
.wholesale-science-stat span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }

/* Intro tier — free sampler for new accounts */
.pricing-tier.is-intro {
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, color-mix(in oklab, var(--rise) 14%, transparent) 0%, transparent 65%),
    var(--bg);
  border-color: color-mix(in oklab, var(--rise) 35%, var(--hairline));
}
.pricing-flag.is-intro-flag {
  background: var(--fg);
  color: var(--bg);
}
.pricing-tier.is-intro .pricing-tier-per {
  font-size: clamp(28px, 2.8vw, 40px);
}

/* Wholesale science — full-width variant (no stats column) */
.wholesale-science-solo {
  grid-template-columns: 1fr !important;
}
.wholesale-science-solo .wholesale-science-side-hidden { display: none; }

@media (max-width: 1180px) {
  .pricing-tiers { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .wholesale-reasons { grid-template-columns: 1fr; }
  .pricing-tiers { grid-template-columns: 1fr; }
  .wholesale-reviews { grid-template-columns: 1fr; }
  .wholesale-science { grid-template-columns: 1fr; }
  .wholesale-reason { grid-template-columns: 1fr; gap: 16px; }
}
.locator-filters {
  background: var(--bg-2);
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 88px;
  z-index: 10;
}
.locator-filter-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) minmax(220px, auto) minmax(240px, 1.4fr);
  gap: 16px;
  padding: 18px 0 14px;
  align-items: end;
}
.locator-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.locator-field label { font-size: 10px; }
.locator-field .input { padding: 10px 14px; font-size: 14px; }
.locator-field-search .journal-search { width: 100%; }
.locator-summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 0 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-mute);
}
.locator-summary button { color: var(--fg); }

.locator-city-group { margin-top: 48px; }
.locator-city-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 16px; margin-bottom: 24px;
  border-bottom: 1px solid var(--hairline);
}
.locator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.locator-card {
  padding: 22px 22px 20px;
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.locator-card:hover { border-color: var(--fg-mute); transform: translateY(-2px); }
.locator-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.locator-card-name { font-size: 19px; font-weight: 500; letter-spacing: -0.015em; color: var(--fg); }
.locator-card-addr { font-size: 13px; line-height: 1.5; color: var(--fg-soft); }
.locator-card-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--hairline);
  gap: 12px;
}
.locator-directions { color: var(--fg); text-decoration: underline; cursor: pointer; }

select.input {
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-mute) 50%), linear-gradient(135deg, var(--fg-mute) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
  cursor: pointer;
}
select.input:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 880px) {
  .locator-filter-row { grid-template-columns: 1fr 1fr; }
  .locator-field-search { grid-column: 1 / -1; }
  .locator-filters { position: static; }
}
@media (max-width: 520px) {
  .locator-filter-row { grid-template-columns: 1fr; }
}
.ambassador-portrait-section { margin-bottom: 8px; }
.ambassador-portrait-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap; gap: 12px;
}
.ambassador-portrait-arrows { display: flex; gap: 8px; }
.ambassador-portrait-arrows button {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--hairline);
  background: rgba(255,255,255,0.04);
  color: var(--fg); cursor: pointer;
  display: grid; place-items: center;
  font-size: 14px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ambassador-portrait-arrows button:hover { background: var(--fg); color: var(--ink); border-color: var(--fg); }
.ambassador-portrait-rail {
  display: flex; gap: 16px;
  overflow-x: auto; padding-bottom: 12px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
}
.ambassador-portrait-rail::-webkit-scrollbar { height: 6px; }
.ambassador-portrait-rail::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 999px; }
.ambassador-portrait {
  flex: 0 0 auto;
  width: clamp(240px, 22vw, 300px);
  scroll-snap-align: start;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--bg-2);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.ambassador-portrait:hover { border-color: var(--fg-mute); transform: translateY(-3px); }
.ambassador-portrait.tone-rise { background: linear-gradient(180deg, rgba(255,204,65,0.06) 0%, var(--bg-2) 100%); }
.ambassador-portrait.tone-drift { background: linear-gradient(180deg, rgba(66,100,158,0.10) 0%, var(--bg-2) 100%); }
.ambassador-portrait.tone-mix { background: linear-gradient(180deg, rgba(255,204,65,0.06) 0%, rgba(66,100,158,0.06) 100%, var(--bg-2) 100%); }
.ambassador-portrait-image {
  position: relative;
  aspect-ratio: 3 / 4;
  display: grid; place-items: center;
  background:
    radial-gradient(ellipse at 35% 25%, rgba(255,255,255,0.08) 0%, transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 14px);
  border-bottom: 1px solid var(--hairline);
}
.ambassador-portrait.tone-rise .ambassador-portrait-image {
  background:
    radial-gradient(ellipse at 35% 25%, rgba(255,204,65,0.22) 0%, transparent 65%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 14px);
}
.ambassador-portrait.tone-drift .ambassador-portrait-image {
  background:
    radial-gradient(ellipse at 35% 25%, rgba(66,100,158,0.30) 0%, transparent 65%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 14px);
}
.ambassador-portrait-init {
  font-family: var(--display); font-stretch: 85%; font-weight: 700;
  font-size: clamp(48px, 5vw, 72px); letter-spacing: -0.04em;
  color: var(--fg); opacity: 0.85;
  line-height: 1;
}
.ambassador-portrait-ph {
  position: absolute; bottom: 12px; left: 12px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-mute);
  background: rgba(10,10,10,0.5);
  padding: 4px 8px; border-radius: 4px;
  border: 1px solid var(--hairline);
}
.ambassador-portrait-meta {
  padding: 18px 18px 22px;
  display: flex; flex-direction: column; gap: 4px;
}
.ambassador-portrait-quote {
  font-family: var(--serif); font-style: italic; font-size: 13px;
  line-height: 1.45; color: var(--fg-soft);
  margin-top: 10px; text-wrap: pretty;
}
.ambassador-carousel {
  margin-top: 28px;
  border-top: 1px solid var(--hairline);
  padding-top: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.ambassador-carousel-head { display: flex; align-items: center; justify-content: space-between; }
.ambassador-slide {
  position: relative;
  padding: 22px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-template-areas:
    "avatar meta"
    "quote  quote"
    "ph     ph";
  gap: 14px 16px;
  animation: amb-fade 0.5s ease;
}
.ambassador-slide.tone-rise  { background: linear-gradient(160deg, rgba(255,204,65,0.10) 0%, transparent 100%); }
.ambassador-slide.tone-drift { background: linear-gradient(160deg, rgba(66,100,158,0.14) 0%, transparent 100%); }
.ambassador-slide.tone-mix   { background: linear-gradient(160deg, rgba(255,204,65,0.10) 0%, rgba(66,100,158,0.10) 100%); }
@keyframes amb-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ambassador-avatar {
  grid-area: avatar;
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display); font-stretch: 90%; font-weight: 700;
  font-size: 22px; letter-spacing: -0.02em;
  color: var(--fg);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.16), transparent 60%),
    linear-gradient(135deg, var(--rise) 0%, var(--drift) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.ambassador-slide.tone-drift .ambassador-avatar { background: linear-gradient(135deg, var(--drift) 0%, #2a4373 100%); color: var(--fg); }
.ambassador-slide.tone-rise  .ambassador-avatar { background: linear-gradient(135deg, var(--rise) 0%, #b88a16 100%); color: var(--ink); }
.ambassador-meta { grid-area: meta; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
.ambassador-name { font-size: 17px; font-weight: 500; letter-spacing: -0.015em; color: var(--fg); }
.ambassador-role { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--fg-soft); }
.ambassador-city { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); margin-top: 2px; }
.ambassador-quote {
  grid-area: quote;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 15px; line-height: 1.45; color: var(--fg);
  text-wrap: pretty;
}
.ambassador-ph { grid-area: ph; color: var(--fg-mute); font-size: 9px; letter-spacing: 0.18em; }
.ambassador-dots { display: flex; gap: 8px; justify-content: center; padding-top: 4px; }
.ambassador-dot {
  width: 24px; height: 2px; background: rgba(255,255,255,0.22);
  border: 0; padding: 0; cursor: pointer;
  transition: background 0.3s ease;
}
.ambassador-dot.active { background: var(--fg); }
/* ============ BENEFITS ROMANCE ============ */
.benefits-romance { display: flex; flex-direction: column; gap: 28px; padding: 8px 0; }
.benefits-lede {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4;
  color: var(--fg-soft); max-width: 56ch; text-wrap: pretty;
  letter-spacing: -0.005em;
}
.benefits-lede em { color: var(--fg); }
.benefits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.benefit-card {
  position: relative;
  padding: clamp(20px, 2vw, 28px);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, color-mix(in oklab, var(--accent, var(--fg)) 14%, transparent) 0%, transparent 70%),
    var(--bg-2);
  display: flex; flex-direction: column; gap: 10px;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.benefit-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.benefit-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  color: var(--accent);
  margin-bottom: 6px;
}
.benefit-num {
  position: absolute; top: 16px; right: 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  color: color-mix(in oklab, var(--accent) 80%, transparent);
}
.benefit-title {
  font-family: var(--display); font-stretch: 90%; font-weight: 600;
  font-size: clamp(16px, 1.4vw, 19px);
  letter-spacing: -0.02em; line-height: 1.18;
  color: var(--fg);
}
.benefit-body {
  font-size: 13.5px; line-height: 1.5; color: var(--fg-soft);
  text-wrap: pretty;
}
.benefit-credit {
  margin-top: auto; padding-top: 10px;
  border-top: 1px dashed color-mix(in oklab, var(--accent) 35%, transparent);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 720px) {
  .benefits-grid { grid-template-columns: 1fr; }
}
.pdp-can-gallery {
  display: flex; flex-direction: column;
  align-items: center; gap: 32px;
  width: 100%;
  position: relative; z-index: 2;
}
.pdp-can-stage {
  display: grid; place-items: center;
  width: min(360px, 70%);
  height: auto;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.4));
}
.pdp-can-img {
  width: 100%; height: auto;
  display: block;
  animation: pdp-can-in 0.45s cubic-bezier(0.2,0.7,0.2,1);
}
@keyframes pdp-can-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pdp-can-thumbs {
  display: flex; gap: 12px;
}
.pdp-can-thumb {
  width: 64px; height: 80px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 6px;
  background: rgba(255,255,255,0.04);
  display: grid; place-items: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.pdp-can-thumb:hover { border-color: var(--fg-mute); background: rgba(255,255,255,0.08); }
.pdp-can-thumb.active { border-color: var(--fg); background: rgba(255,255,255,0.1); }
.pdp-can-thumb img { width: 100%; height: 100%; object-fit: contain; }
.page-hero.about {
  background:
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(255, 204, 65, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(66, 100, 158, 0.20) 0%, transparent 60%),
    linear-gradient(180deg, #0a0a0a 0%, #000 100%);
}

/* ============ ROADMAP UNLOCK ============ */
.roadmap-meter {
  background: linear-gradient(135deg, rgba(255,204,65,0.10) 0%, rgba(66,100,158,0.10) 100%);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: clamp(28px, 3vw, 44px);
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: center;
}
.roadmap-meter h3 {
  font-family: var(--display); font-stretch: 90%; font-weight: 600;
  font-size: clamp(32px, 4vw, 56px); letter-spacing: -0.035em; line-height: 0.95;
}
.roadmap-meter .counter {
  font-family: var(--display); font-stretch: 85%; font-weight: 700;
  font-size: clamp(64px, 9vw, 144px); letter-spacing: -0.05em; line-height: 0.9;
  background: linear-gradient(135deg, var(--rise) 0%, var(--drift) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.roadmap-meter .counter-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-mute); margin-top: 4px; }
.roadmap-meter .updated { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); margin-top: 24px; display: inline-flex; gap: 8px; align-items: center; }
.roadmap-meter .updated .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px color-mix(in oklab, var(--green) 15%, transparent); animation: pulse 2s ease infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--green) 15%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in oklab, var(--green) 5%, transparent); }
}
.roadmap-progress {
  height: 8px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden;
  position: relative; margin-top: 32px;
}
.roadmap-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--rise), var(--drift));
  transition: width 1.2s cubic-bezier(0.2,0.7,0.2,1);
  border-radius: 999px;
}

.unlock-rail {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.unlock-cell {
  padding: clamp(20px, 2vw, 32px) clamp(16px, 1.5vw, 24px);
  border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 12px;
  min-height: 300px;
  position: relative;
  transition: background 0.3s ease;
  background: var(--bg);
  overflow: hidden;
}
.unlock-cell:last-child { border-right: 0; }
.unlock-cell.unlocked { background: linear-gradient(180deg, rgba(255,204,65,0.06) 0%, transparent 80%); }
.unlock-cell.current { background: linear-gradient(180deg, rgba(255,204,65,0.20) 0%, rgba(66,100,158,0.06) 100%); border-top: 2px solid var(--rise); margin-top: -1px; }
.unlock-cell.locked > * { filter: blur(7px); user-select: none; pointer-events: none; }
.unlock-cell.locked::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.7) 100%);
  pointer-events: none;
}
.unlock-cell .lock-glyph {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--hairline);
  display: grid; place-items: center;
  z-index: 2; opacity: 0.8;
}
.unlock-stage {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-mute);
}
.unlock-cell.current .unlock-stage { color: var(--rise); }
.unlock-threshold {
  font-family: var(--display); font-stretch: 90%; font-weight: 600;
  font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.025em; line-height: 1;
  color: var(--fg);
  margin-top: auto;
}
.unlock-threshold-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); margin-top: 4px; }
.unlock-name {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(18px, 1.6vw, 24px); letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--fg);
  margin-top: 4px;
}
.unlock-name strong { font-family: var(--display); font-stretch: 90%; font-style: normal; font-weight: 600; color: var(--rise); }
.unlock-cell.drift-stage .unlock-name strong { color: var(--drift); }
.unlock-desc { font-size: 13px; color: var(--fg-soft); line-height: 1.4; }
.unlock-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
}
.unlock-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-mute); }
.unlock-cell.unlocked .unlock-status .dot { background: var(--rise); }
.unlock-cell.unlocked .unlock-status { color: var(--rise); }
.unlock-cell.current .unlock-status { color: var(--rise); }
.unlock-cell.current .unlock-status .dot { background: var(--rise); box-shadow: 0 0 0 4px rgba(255,204,65,0.18); }

@media (max-width: 960px) {
  .roadmap-meter { grid-template-columns: 1fr; gap: 24px; }
  .unlock-rail { grid-template-columns: 1fr 1fr; }
  .unlock-cell { border-bottom: 1px solid var(--hairline); }
  .unlock-cell:nth-child(2n) { border-right: 0; }
}
.page-hero .lifestyle-bands {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(6, 1fr);
  opacity: 0.06;
}
.page-hero .lifestyle-bands span {
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.4) 0 1px, transparent 1px 14px);
}
.page-hero .lifestyle-bands span:nth-child(2) { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 0 1px, transparent 1px 20px); }
.page-hero .lifestyle-bands span:nth-child(4) { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.3) 0 1px, transparent 1px 18px); }

/* ============ AMBASSADORS — commission ladder ============ */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.tier-cell {
  padding: clamp(28px, 3vw, 44px);
  border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);
  transition: background 0.3s ease;
}
.tier-cell:last-child { border-right: 0; }
.tier-cell:hover { background: linear-gradient(180deg, rgba(255,204,65,0.08) 0%, transparent 100%); }
.tier-stage { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); }
.tier-rate {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(56px, 6vw, 96px); line-height: 0.95; letter-spacing: -0.02em;
  color: var(--fg);
}
.tier-rate-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); }
.tier-name { font-size: 18px; font-weight: 500; letter-spacing: -0.015em; }
.tier-desc { font-size: 13px; color: var(--fg-soft); line-height: 1.5; }

.worked-example {
  display: none;
}

/* ============ ROYALTY CALCULATOR ============ */
.royalty-calc {
  margin: 64px auto 0;
  max-width: 1080px;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background:
    radial-gradient(ellipse 70% 60% at 80% 20%, rgba(255,204,65,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 20% 80%, rgba(66,100,158,0.08) 0%, transparent 60%),
    var(--bg-2);
  overflow: hidden;
}
.royalty-calc-head {
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px) 12px;
  border-bottom: 1px solid var(--hairline);
}
.royalty-calc-body {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
}
.royalty-calc-inputs {
  padding: clamp(36px, 4vw, 64px);
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: clamp(40px, 5vw, 64px);
  border-right: 1px solid var(--hairline);
}
.royalty-input { display: flex; flex-direction: column; gap: 16px; }
.royalty-input-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
}
.royalty-input-label strong {
  font-family: var(--display); font-stretch: 85%; font-weight: 700;
  font-size: clamp(40px, 4vw, 56px); letter-spacing: -0.035em; color: var(--fg);
  line-height: 1;
  text-transform: none;
}
.royalty-input input[type="range"] {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 6px;
  background: var(--hairline);
  border-radius: 999px; outline: none;
  cursor: pointer;
}
.royalty-input input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--rise);
  border: 3px solid var(--bg);
  box-shadow: 0 4px 12px rgba(255,204,65,0.35), 0 0 0 1px rgba(255,204,65,0.3);
  cursor: grab;
  transition: transform 0.15s ease;
}
.royalty-input input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }
.royalty-input input[type="range"]::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--rise);
  border: 3px solid var(--bg);
  box-shadow: 0 4px 12px rgba(255,204,65,0.35);
  cursor: grab;
}
.royalty-input-bounds {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--fg-mute);
}

.royalty-calc-output {
  padding: clamp(28px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(170deg, rgba(255,204,65,0.06) 0%, transparent 100%);
}
.royalty-output-head { margin-bottom: 6px; }
.royalty-output-total {
  font-family: var(--display); font-stretch: 80%; font-weight: 800;
  font-size: clamp(56px, 7.5vw, 104px);
  letter-spacing: -0.05em; line-height: 0.95;
  background: linear-gradient(135deg, var(--rise) 0%, var(--drift) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.royalty-output-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 8px;
}
.royalty-breakdown {
  margin-top: 12px;
  border-top: 1px solid var(--hairline);
}
.royalty-row {
  display: grid;
  grid-template-columns: 1fr auto 22px;
  align-items: baseline;
  column-gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline-soft, var(--hairline));
}
.royalty-row strong {
  font-family: var(--display); font-stretch: 90%; font-weight: 600;
  font-size: 18px; letter-spacing: -0.02em;
  text-align: right;
}
.royalty-row strong {
  font-family: var(--display); font-stretch: 90%; font-weight: 600;
  font-size: 18px; letter-spacing: -0.02em;
  color: var(--fg);
}
.royalty-row.total {
  background: rgba(255,204,65,0.05);
  margin: 4px -8px; padding: 12px 8px; border-radius: 6px;
}
.royalty-row.total strong { color: var(--rise); font-size: 22px; }

@media (max-width: 880px) {
  .royalty-calc-body { grid-template-columns: 1fr; }
  .royalty-calc-inputs { border-right: 0; border-bottom: 1px solid var(--hairline); }
}

.royalty-tier-marks {
  position: relative; height: 28px;
  margin-top: 8px;
}
.royalty-tier-mark {
  position: absolute; top: 0;
  transform: translateX(-50%);
  background: transparent; border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.royalty-tier-mark-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hairline);
  border: 1px solid var(--bg);
  transition: background 0.25s ease, transform 0.2s ease;
}
.royalty-tier-mark.unlocked .royalty-tier-mark-dot {
  background: var(--rise);
  box-shadow: 0 0 0 3px rgba(255,204,65,0.18);
}
.royalty-tier-mark.current .royalty-tier-mark-dot { transform: scale(1.4); }
.royalty-tier-mark-label {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em;
  color: var(--fg-mute);
  transition: color 0.2s ease;
}
.royalty-tier-mark.unlocked .royalty-tier-mark-label { color: var(--fg); }
.royalty-tier-mark.current .royalty-tier-mark-label { color: var(--rise); }

.royalty-next-tier {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px dashed rgba(255,204,65,0.4);
  border-radius: 10px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-mute);
}
.royalty-next-tier strong { color: var(--rise); font-weight: 500; }

/* Tier cards grid */
.royalty-tiers-grid {
  padding: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--hairline);
  background: rgba(0,0,0,0.2);
}
.royalty-tiers-head { margin-bottom: 24px; max-width: 60ch; }
.royalty-tiers-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 960px) {
  .royalty-tiers-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .royalty-tiers-cards { grid-template-columns: 1fr; }
}
.royalty-tier-card {
  position: relative;
  padding: 18px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--bg-2);
  display: flex; flex-direction: column; gap: 6px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.royalty-tier-card:hover { border-color: var(--fg-mute); transform: translateY(-2px); }
.royalty-tier-card.unlocked {
  border-color: var(--rise);
  background: linear-gradient(170deg, rgba(255,204,65,0.10) 0%, var(--bg-2) 100%);
}
.royalty-tier-card.current {
  border-color: var(--rise);
  background: linear-gradient(170deg, rgba(255,204,65,0.18) 0%, var(--bg-2) 100%);
  box-shadow: 0 16px 32px rgba(255,204,65,0.10);
}
.royalty-tier-card-threshold {
  font-family: var(--display); font-stretch: 85%; font-weight: 700;
  font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -0.03em; line-height: 1;
  color: var(--fg);
}
.royalty-tier-card-threshold-num {
  display: block;
  font-family: var(--display); font-stretch: 85%; font-weight: 700;
  font-size: inherit; letter-spacing: -0.03em; line-height: 1;
  color: var(--fg);
}
.royalty-tier-card-threshold-unit {
  display: block; margin-top: 2px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-mute);
  font-weight: 400;
  white-space: nowrap;
}
.royalty-tier-card-threshold span {
  display: block; margin-top: 2px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-mute);
  font-weight: 400;
}
.royalty-tier-card-name {
  font-family: var(--serif); font-style: italic; font-size: 18px;
  color: var(--rise); letter-spacing: -0.015em;
  margin-top: 4px;
}
.royalty-tier-card-bonus {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  color: var(--fg);
  font-weight: 500;
}
.royalty-tier-card-bonus .bespoke {
  color: var(--rise);
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px;
}
.royalty-tier-card-perk {
  font-size: 12px; line-height: 1.45; color: var(--fg-soft);
  margin-top: 6px;
}
.royalty-tier-card { overflow: visible; }
.royalty-tier-card-current {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
  background: var(--rise);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(255,204,65,0.3);
}

.perks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.perk {
  padding: 28px;
  border: 1px solid var(--hairline);
  background: var(--bg-2);
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color 0.3s ease;
}
.perk:hover { border-color: var(--fg-mute); }
.perk h4 { font-family: var(--serif); font-style: italic; font-size: 22px; letter-spacing: -0.015em; color: var(--rise); font-weight: 400; }
.perk p { font-size: 14px; color: var(--fg-soft); line-height: 1.55; }

@media (max-width: 960px) {
  .tier-grid { grid-template-columns: 1fr 1fr; }
  .tier-cell:nth-child(2) { border-right: 0; }
  .tier-cell { border-bottom: 1px solid var(--hairline); }
  .tier-cell:nth-last-child(-n+2) { border-bottom: 0; }
  .perks-grid { grid-template-columns: 1fr; }
  .lab-row { grid-template-columns: 50px 1fr 1fr; }
  .lab-cell.desc, .lab-cell:nth-child(5) { display: none; }
  .compare-stats .v { font-size: clamp(20px, 4vw, 26px); }
  .compare-stats .v.text { font-size: 14px; }
}
@media (max-width: 1280px) {
  .nav-links { gap: 28px; }
  .nav-links a { font-size: 18px; }
}
@media (max-width: 1200px) {
  .nav-links { gap: 22px; }
  .nav-links a { font-size: 17px; }
}
@media (max-width: 1080px) {
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 15px; }
  .nav-right a:not([aria-label="account"]) { display: none; }
}
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-visual { min-height: 60vh; }
  .duo { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid .product-card:nth-child(3n) { border-right: 1px solid var(--hairline); }
  .product-grid .product-card:nth-child(2n) { border-right: 0; }
  .feature-split { grid-template-columns: 1fr; }
  .bundle-grid { grid-template-columns: 1fr; }
  .bundle-side { position: relative; top: 0; }
  .bundle-cans { grid-template-columns: repeat(2, 1fr); }
  .pdp { grid-template-columns: 1fr; }
  .dial { grid-template-columns: repeat(2, 1fr); }
  .roadmap { grid-template-columns: 1fr; }
  .roadmap-col { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  .journal-grid { grid-template-columns: 1fr; }
  .flow-list { grid-template-columns: 1fr 1fr; }
  .compare { grid-template-columns: 1fr; }
}


/* ============ PLAYBOOKS ============ */

/* Accent tokens — each issue carries a subtle accent in its cover and inline glyphs.
   The page chrome stays restrained black-and-white. */
.pb-accent-rise  { --pb-accent: var(--rise);  --pb-accent-deep: var(--rise-deep);  --pb-accent-wash: rgba(255,204,65,0.10); }
.pb-accent-drift { --pb-accent: var(--drift); --pb-accent-deep: var(--drift-deep); --pb-accent-wash: rgba(66,100,158,0.12); }
.pb-accent-mix   { --pb-accent: #b8a7c4;       --pb-accent-deep: #6a5c75;          --pb-accent-wash: rgba(184,167,196,0.10); }

/* ---------- MASTHEAD (landing) ---------- */
.pb-masthead {
  position: relative;
  padding: clamp(28px, 3.2vw, 48px) 0 clamp(16px, 2vw, 28px);
  background:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(255,204,65,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 80% 80%, rgba(66,100,158,0.12) 0%, transparent 55%),
    linear-gradient(180deg, #0a0a0a 0%, #000 100%);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}
.pb-masthead .lifestyle-bands {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(6, 1fr);
  opacity: 0.06; pointer-events: none;
}
.pb-masthead .lifestyle-bands span {
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.4) 0 1px, transparent 1px 14px);
}
.pb-masthead > .container { position: relative; z-index: 2; }

.pb-masthead-meta {
  display: flex; gap: 24px; flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-mute);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
}
.pb-nameplate {
  font-family: var(--serif);
  font-style: italic; font-weight: 400;
  font-size: clamp(64px, 11vw, 168px);
  letter-spacing: -0.035em;
  line-height: 0.88;
  color: var(--fg);
  margin-top: 20px;
  text-wrap: balance;
}
.pb-masthead-lede {
  font-family: var(--display);
  font-stretch: 92%;
  font-weight: 500;
  font-size: clamp(16px, 1.3vw, 21px);
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--fg-soft);
  max-width: 64ch;
  margin-top: 20px;
  text-wrap: pretty;
}
.pb-masthead-lede em {
  font-family: var(--mono);
  font-style: normal; font-weight: 500;
  font-size: 0.6em; letter-spacing: 0.16em;
  color: var(--fg);
  vertical-align: 0.18em;
  margin: 0 4px;
}
.pb-masthead-modules {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 28px);
  margin: clamp(14px, 1.8vw, 22px) 0;
  padding: clamp(12px, 1.4vw, 18px) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.pb-masthead-modules em {
  font-family: var(--display);
  font-stretch: 85%;
  font-style: normal;
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 38px);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--fg);
  vertical-align: baseline;
  margin: 0;
}
.pb-masthead-foot {
  margin-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  flex-wrap: wrap; gap: 14px;
}

/* ---------- EXPLAINER ---------- */
.pb-explainer {
  padding: clamp(32px, 4vw, 64px) 0;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}
.pb-explainer-grid {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.pb-explainer-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 80px);
  letter-spacing: -0.025em;
  line-height: 1.0;
  margin-top: 24px;
  color: var(--fg);
  text-wrap: balance;
}
.pb-explainer-title .pb-logo-word {
  font-family: var(--display);
  font-stretch: 85%;
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.05em;
  text-transform: lowercase;
  color: var(--fg);
}
.pb-explainer-title em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--fg);
}
.pb-modules {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
  margin-top: 72px;
}
.pb-module-card {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: clamp(28px, 3vw, 48px) clamp(20px, 2vw, 32px);
  display: flex; flex-direction: column; gap: 8px;
  min-height: 220px;
  background: var(--bg);
  transition: background 0.3s ease;
}
.pb-module-card:hover { background: var(--bg-2); }
.pb-module-num {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em;
  color: var(--fg-mute);
}
.pb-module-letter {
  font-family: var(--display);
  font-stretch: 85%; font-weight: 600;
  font-size: clamp(40px, 4.5vw, 72px);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--fg);
  margin-top: 8px;
}
.pb-module-sub {
  font-family: var(--serif); font-style: italic;
  font-size: 18px;
  color: var(--fg-soft);
  margin-top: 8px;
}
.pb-module-hint {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
  margin-top: auto;
}

/* ---------- FEATURED ISSUE (landing) ---------- */
.pb-featured {
  padding: clamp(32px, 4vw, 64px) 0;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
  position: relative;
}
.pb-featured::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 80% 30%, var(--pb-accent-wash) 0%, transparent 65%);
  pointer-events: none;
}
.pb-featured > .container { position: relative; z-index: 2; }
.pb-featured-tag {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px;
  border: 1px solid var(--pb-accent);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--pb-accent);
  background: rgba(255,255,255,0.02);
}
.pb-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pb-accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--pb-accent) 22%, transparent);
  animation: launch-pulse 1.8s ease infinite;
}
.pb-featured-grid {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  margin-top: 32px;
}
.pb-featured-meta {
  display: flex; gap: 24px; flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-mute);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hairline);
}
.pb-featured-title {
  font-family: var(--serif);
  font-style: italic; font-weight: 400;
  font-size: clamp(64px, 8.5vw, 140px);
  letter-spacing: -0.03em;
  line-height: 0.92;
  margin-top: 32px;
  color: var(--fg);
  text-wrap: balance;
}
.pb-featured-tagline {
  font-family: var(--display);
  font-stretch: 90%;
  font-weight: 500;
  font-size: clamp(20px, 2vw, 30px);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--pb-accent);
  margin-top: 16px;
}
.pb-featured-intro {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--fg-soft);
  margin-top: 24px;
  max-width: 56ch;
  text-wrap: pretty;
}
.pb-featured-cta {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 40px;
}
.pb-featured-cover {
  display: grid; place-items: center;
  min-height: 480px;
}

/* ---------- COVER ART (used in landing, archive, detail, teaser) ---------- */
.pb-cover-art {
  position: relative;
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 420px;
  padding: clamp(20px, 2.5vw, 36px);
  border-radius: 4px;
  border: 1px solid var(--hairline);
  background:
    radial-gradient(ellipse 80% 60% at 70% 30%, var(--pb-accent-wash) 0%, transparent 65%),
    linear-gradient(180deg, #0d0d0d 0%, #050505 100%);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 8px;
  overflow: hidden;
  box-shadow:
    0 30px 60px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  transition: transform 0.5s cubic-bezier(0.2,0.7,0.2,1), border-color 0.4s ease;
}
.pb-cover-art::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 16px);
  pointer-events: none;
}
.pb-cover-art::after {
  /* color stripe at bottom in accent */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 6px;
  background: var(--pb-accent);
  opacity: 0.85;
}
.pb-cover-issue {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pb-accent);
}
.pb-cover-persona {
  font-family: var(--serif);
  font-style: italic; font-weight: 400;
  font-size: clamp(28px, 3.5vw, 56px);
  letter-spacing: -0.025em;
  line-height: 0.98;
  color: var(--fg);
  align-self: end;
  text-wrap: balance;
}
.pb-cover-mark {
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.22em;
  color: var(--fg-mute);
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.pb-cover-month {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.18em;
  color: var(--fg-soft);
}
.pb-cover-wave {
  position: absolute; top: clamp(20px, 2.5vw, 36px); right: clamp(20px, 2.5vw, 36px);
  width: 40px; height: 12px;
  color: var(--pb-accent);
  opacity: 0.9;
}
.pb-cover-lg { max-width: 460px; }
.pb-cover-sm { max-width: 100%; }
.pb-cover-xs { max-width: 100%; aspect-ratio: 3 / 4; padding: 18px; }
.pb-cover-xs .pb-cover-persona { font-size: clamp(20px, 2vw, 26px); }
.pb-cover-xs .pb-cover-mark { font-size: 8px; padding-top: 8px; }
.pb-cover-xs .pb-cover-wave { width: 28px; height: 9px; top: 18px; right: 18px; }

/* ---------- WEEK STRIP ---------- */
.pb-week-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
  margin-top: clamp(40px, 5vw, 72px);
}
.pb-week-cell {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 24px 16px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 120px;
  background: var(--bg);
  transition: background 0.3s ease;
}
.pb-week-cell:hover { background: var(--bg-2); }
.pb-week-day {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
}
.pb-week-label {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.15;
  color: var(--fg);
}
.pb-week-strip-lg .pb-week-cell { min-height: 160px; }
.pb-week-strip-lg .pb-week-label { font-size: clamp(22px, 2.2vw, 32px); }
.pb-week-index {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em;
  color: var(--fg-mute);
  margin-top: auto;
}

/* ---------- ARCHIVE ---------- */
.pb-archive {
  padding: clamp(28px, 3.5vw, 56px) 0;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}
.pb-archive-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.pb-archive-card {
  position: relative;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: clamp(28px, 3vw, 48px);
  display: flex; flex-direction: column; gap: 18px;
  background: var(--bg);
  cursor: pointer;
  transition: background 0.4s ease;
}
.pb-archive-card:hover { background: var(--bg-2); }
.pb-archive-card:hover .pb-cover-art { transform: translateY(-4px); }
.pb-archive-meta {
  display: flex; justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
}
.pb-archive-title {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(28px, 2.6vw, 38px);
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: var(--fg);
  text-wrap: balance;
}
.pb-archive-tagline {
  font-family: var(--display);
  font-stretch: 92%; font-weight: 500;
  font-size: 15px; letter-spacing: -0.01em;
  color: var(--pb-accent);
}
.pb-archive-summary {
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-soft);
  text-wrap: pretty;
}
.pb-archive-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg);
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.pb-archive-link .arr { transition: transform 0.3s ease; }
.pb-archive-card:hover .pb-archive-link .arr { transform: translateX(4px); }

/* ---------- COLOPHON ---------- */
.pb-colophon {
  padding: clamp(28px, 3.6vw, 56px) 0;
  background: var(--bg-2);
}
.pb-colophon-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.pb-colophon-text {
  font-size: 16px; line-height: 1.6;
  color: var(--fg-soft);
  margin-top: 16px;
  max-width: 56ch;
  text-wrap: pretty;
}
.pb-colophon-text strong { color: var(--fg); font-weight: 500; }
.pb-colophon-text em { font-family: var(--serif); font-style: italic; color: var(--fg); }
.pb-signup {
  margin-top: 20px;
  display: flex;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 4px 4px 4px 16px;
  align-items: center;
  background: rgba(255,255,255,0.03);
  max-width: 420px;
}
.pb-signup input {
  flex: 1; background: transparent; border: 0;
  color: var(--fg); font-family: var(--sans);
  font-size: 14px; outline: none; padding: 10px 0;
}
.pb-signup input::placeholder { color: var(--fg-mute); }
.pb-signup button {
  background: var(--fg); color: var(--ink);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 12px; font-weight: 500;
}

/* ---------- DETAIL: ISSUE MASTHEAD ---------- */
.pb-issue-masthead {
  position: relative;
  padding: clamp(64px, 8vw, 120px) 0 clamp(48px, 6vw, 96px);
  background:
    radial-gradient(ellipse 70% 60% at 80% 20%, var(--pb-accent-wash) 0%, transparent 65%),
    linear-gradient(180deg, #0a0a0a 0%, #000 100%);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}
.pb-issue-masthead .lifestyle-bands {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(6, 1fr);
  opacity: 0.05; pointer-events: none;
}
.pb-issue-masthead .lifestyle-bands span {
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.4) 0 1px, transparent 1px 14px);
}
.pb-issue-masthead > .container { position: relative; z-index: 2; }

.pb-issue-crumbs {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 32px;
}
.pb-issue-crumbs a { cursor: pointer; transition: color 0.2s ease; }
.pb-issue-crumbs a:hover { color: var(--fg); }
.pb-issue-meta {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-mute);
}
.pb-issue-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-mute); }
.pb-issue-title {
  font-family: var(--serif);
  font-style: italic; font-weight: 400;
  font-size: clamp(72px, 11vw, 196px);
  letter-spacing: -0.03em;
  line-height: 0.9;
  margin-top: 32px;
  color: var(--fg);
  text-wrap: balance;
}
.pb-issue-tagline {
  font-family: var(--display);
  font-stretch: 92%; font-weight: 500;
  font-size: clamp(22px, 2.4vw, 36px);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--pb-accent);
  margin-top: 20px;
  max-width: 30ch;
}
.pb-issue-grid {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  margin-top: clamp(48px, 6vw, 80px);
  align-items: start;
}
.pb-issue-intro {
  display: flex; flex-direction: column; gap: 20px;
}
.pb-prose {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 64ch;
  text-wrap: pretty;
}
.pb-issue-cover-wrap { display: grid; place-items: center; }

/* ---------- WEEK SECTION (detail) ---------- */
.pb-week-section {
  padding: clamp(56px, 7vw, 96px) 0 clamp(32px, 4vw, 48px);
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}

/* ---------- MODULES SECTION (detail) ---------- */
.pb-modules-section {
  padding: clamp(56px, 7vw, 96px) 0;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}
.pb-tabs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
  margin-bottom: clamp(40px, 5vw, 72px);
}
.pb-tab {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 24px 24px 22px;
  background: var(--bg);
  text-align: left;
  cursor: pointer;
  transition: background 0.3s ease;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
}
.pb-tab:hover { background: var(--bg-2); }
.pb-tab::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--fg);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s ease;
}
.pb-tab.active::after { transform: scaleX(1); }
.pb-tab.active { background: var(--bg-2); }
.pb-tab-label {
  font-family: var(--display);
  font-stretch: 85%; font-weight: 600;
  font-size: clamp(32px, 3.6vw, 56px);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--fg);
}
.pb-tab-sub {
  font-family: var(--serif); font-style: italic;
  font-size: 15px;
  color: var(--fg-soft);
}

.pb-module-head { margin-bottom: clamp(32px, 4vw, 56px); }
.pb-module-intro {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.35;
  color: var(--fg);
  margin-top: 16px;
  max-width: none;
  text-wrap: pretty;
}

/* ---------- DAY LIST ---------- */
.pb-day-list {
  border-top: 1px solid var(--hairline);
}
/* Note: .pb-day-row and .pb-day-tag are defined further down in the
   "PLAYBOOK DAY ROWS — header banner" section; do not re-declare here. */

/* (legacy 4-column .pb-fuel-grid block removed — the 2-column version
   that lives further down is the canonical one.) */
.pb-fuel-cell {
  border-right: 1px solid var(--hairline);
  padding: 0 clamp(16px, 2vw, 28px);
  display: flex; flex-direction: column; gap: 12px;
}
.pb-fuel-cell:last-child { border-right: 0; }
.pb-fuel-label {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pb-accent);
}
.pb-fuel-cell p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-soft);
  text-wrap: pretty;
}

.pb-prac-grid {
  padding-left: clamp(16px, 2vw, 28px);
  border-left: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 12px;
}

/* ============================================================
   JOURNAL SHARE — submit-to-social form next to SYNC prompts
   ============================================================ */
.pb-prac-grid-journal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
  border-left: 0;
  padding-left: 0;
}
.pb-prac-grid-journal .pb-prac-body-col {
  padding-left: clamp(16px, 2vw, 28px);
  border-left: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 12px;
}
.pb-journal-share {
  display: flex; flex-direction: column;
  gap: 12px;
  padding: clamp(18px, 2vw, 24px);
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.pb-journal-share::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--pb-accent, var(--rise)) 0%, transparent 100%);
  opacity: 0.6;
}
.pb-journal-share-eyebrow { color: var(--pb-accent, var(--rise)); }
.pb-journal-share-lede {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-soft);
  margin: 0 0 4px;
}
.pb-journal-share-lede em { color: var(--fg); font-style: italic; }
.pb-journal-share-form { display: flex; flex-direction: column; gap: 12px; }
.pb-journal-share-field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.pb-journal-share-label {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
}
.pb-journal-share-opt {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-mute);
  font-weight: 400;
  margin-left: 4px;
}
.pb-journal-share-field textarea,
.pb-journal-share-field input[type="text"] {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--fg);
  resize: vertical;
  transition: border-color 0.18s ease;
}
.pb-journal-share-field textarea { min-height: 88px; }
.pb-journal-share-field textarea:focus,
.pb-journal-share-field input[type="text"]:focus {
  outline: none;
  border-color: var(--pb-accent, var(--rise));
}
.pb-journal-share-count {
  position: absolute;
  bottom: 8px; right: 12px;
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.12em;
  color: var(--fg-mute);
  pointer-events: none;
}
.pb-journal-share-consent {
  display: flex; align-items: flex-start; gap: 8px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg-soft);
  cursor: pointer;
}
.pb-journal-share-consent input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--pb-accent, var(--rise));
}
.pb-journal-share-submit { align-self: flex-start; }
.pb-journal-share-thanks {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  color: var(--fg);
  margin: 4px 0 0;
}
.pb-journal-share-thanks em { color: var(--pb-accent, var(--rise)); font-style: italic; }
.pb-journal-share-thanks strong { color: var(--fg); font-weight: 500; }
.pb-journal-share-edit {
  align-self: flex-start;
  background: transparent;
  border: 0; border-bottom: 1px dashed var(--fg-mute);
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.pb-journal-share-edit:hover { color: var(--fg); border-color: var(--fg); }

/* ============================================================
   WEEK TOTALS CARD — beneath FUEL day list
   ============================================================ */
.pb-week-totals {
  margin-top: clamp(36px, 4vw, 56px);
  padding: clamp(24px, 3vw, 36px) 0;
  border-top: 1px solid var(--hairline);
}
.pb-week-totals-head { margin-bottom: 24px; }
.pb-week-totals-title {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--fg);
  margin: 6px 0 0;
}
.pb-week-totals-title em { color: var(--pb-accent, var(--rise)); }
.pb-week-totals-sub {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 68ch;
  margin: 12px 0 0;
}
.pb-week-totals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.pb-week-totals-col { display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 2vw, 28px) clamp(16px, 2vw, 24px); }
.pb-week-totals-col + .pb-week-totals-col { border-left: 1px solid var(--hairline); }
.pb-week-totals-col-label {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-mute);
}
.pb-week-totals-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); }
.pb-week-totals-stat { display: flex; flex-direction: column; gap: 6px; }
.pb-week-totals-stat-num {
  font-family: var(--display);
  font-stretch: 85%; font-weight: 700;
  font-size: clamp(26px, 2.6vw, 36px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg);
}
.pb-week-totals-stat-num small { font-size: 0.55em; opacity: 0.65; font-weight: 600; }
.pb-week-totals-stat-unit {
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-mute);
}

/* ============================================================
   GROCERY LIST — Sunday prep
   ============================================================ */
.pb-grocery {
  margin-top: clamp(36px, 4vw, 56px);
  padding: clamp(24px, 3vw, 40px) 0;
  border-top: 1px solid var(--hairline);
}
.pb-grocery-head { margin-bottom: 24px; }
.pb-grocery-title {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--fg);
  margin: 6px 0 0;
}
.pb-grocery-title em { color: var(--pb-accent, var(--rise)); }
.pb-grocery-sub {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 70ch;
  margin: 12px 0 0;
}
.pb-grocery-sub strong { color: var(--fg); font-weight: 500; }
.pb-grocery-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.pb-grocery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.pb-grocery-cat {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: clamp(18px, 2vw, 24px);
  display: flex; flex-direction: column; gap: 12px;
  background: var(--bg);
}
.pb-grocery-cat-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
}
.pb-grocery-cat-label {
  font-family: var(--display); font-stretch: 88%; font-weight: 600;
  font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0;
  grid-column: 1;
}
.pb-grocery-cat-note {
  grid-column: 1;
  font-family: var(--serif); font-style: italic;
  font-size: 12px;
  color: var(--pb-accent, var(--rise));
  margin-top: 2px;
}
.pb-grocery-cat-count {
  grid-column: 2; grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em;
  color: var(--fg-mute);
}
.pb-grocery-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.pb-grocery-item {
  display: grid;
  grid-template-columns: 14px minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 4px 0;
  font-family: var(--sans);
}
.pb-grocery-check { width: 12px; height: 12px; border: 1px solid var(--fg-mute); border-radius: 3px; margin-top: 4px; }
.pb-grocery-name { font-size: 13px; color: var(--fg); line-height: 1.35; }
.pb-grocery-qty {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.12em;
  color: var(--fg-mute);
  text-align: right;
  line-height: 1.4;
}
.pb-grocery-foot {
  margin-top: 24px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 72ch;
}
.pb-grocery-foot em { color: var(--fg); font-style: italic; }

@media (max-width: 1080px) {
  .pb-grocery-grid { grid-template-columns: repeat(2, 1fr); }
  .pb-prac-grid-journal { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 720px) {
  .pb-grocery-grid { grid-template-columns: 1fr; }
  .pb-week-totals-grid { grid-template-columns: 1fr; }
  .pb-week-totals-col + .pb-week-totals-col { border-left: 0; border-top: 1px solid var(--hairline); }
  .pb-week-totals-stats { grid-template-columns: repeat(2, 1fr); }
}
.pb-prac-title {
  font-family: var(--display);
  font-stretch: 92%; font-weight: 500;
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--fg);
}
.pb-prac-body {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 64ch;
  text-wrap: pretty;
}

/* ---------- MODULE NAV (jump bar) ---------- */
.pb-module-nav-section {
  padding: clamp(40px, 5vw, 72px) 0;
  background: var(--bg-2);
  border-bottom: 1px solid var(--hairline);
}
.pb-module-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.pb-module-nav-btn {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 24px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  transition: background 0.3s ease;
}
.pb-module-nav-btn:hover { background: rgba(255,255,255,0.03); }
.pb-module-nav-btn.active { background: var(--bg); }
.pb-module-nav-num {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em;
  color: var(--fg-mute);
}
.pb-module-nav-letter {
  font-family: var(--display);
  font-stretch: 88%; font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.pb-module-nav-sub {
  font-family: var(--serif); font-style: italic;
  font-size: 14px;
  color: var(--fg-mute);
}

/* ---------- ISSUE NAV (prev/next) ---------- */
.pb-issue-nav {
  padding: clamp(48px, 6vw, 96px) 0;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}
.pb-issue-nav-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
}
.pb-issue-nav-prev a,
.pb-issue-nav-next a {
  display: block;
  cursor: pointer;
  padding: 16px 0;
}
.pb-issue-nav-next { text-align: right; }
.pb-issue-nav-title {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(24px, 2.4vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--fg);
  margin-top: 8px;
}
.pb-issue-nav-prev a:hover .pb-issue-nav-title,
.pb-issue-nav-next a:hover .pb-issue-nav-title { color: var(--fg); }
.pb-issue-nav-meta {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
  margin-top: 6px;
}
.pb-issue-nav-empty .caption { color: var(--fg-mute); }

.pb-archive-note {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  max-width: 64ch;
}

/* ---------- HOME TEASER ---------- */
.pb-home-teaser {
  padding: clamp(36px, 4.5vw, 72px) 0;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.pb-home-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: clamp(40px, 5vw, 72px);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hairline);
}
.pb-home-title {
  font-size: clamp(40px, 5vw, 80px);
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin-top: 12px;
  text-wrap: balance;
  max-width: 14ch;
}
.pb-home-feature {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding: clamp(40px, 5vw, 80px);
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, var(--pb-accent-wash) 0%, transparent 65%),
    var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  position: relative;
}
.pb-home-feature-cover { display: grid; place-items: center; }
.pb-home-feature-meta {
  display: flex; gap: 12px; align-items: center;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-mute);
}
.pb-home-feature-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-mute); }
.pb-home-feature-title {
  font-family: var(--serif);
  font-style: italic; font-weight: 400;
  font-size: clamp(48px, 6vw, 92px);
  letter-spacing: -0.025em;
  line-height: 0.95;
  color: var(--fg);
  margin-top: 16px;
  text-wrap: balance;
}
.pb-home-feature-tagline {
  font-family: var(--display);
  font-stretch: 92%; font-weight: 500;
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: -0.02em;
  color: var(--pb-accent);
  margin-top: 12px;
}
.pb-home-feature-intro {
  font-size: 16px; line-height: 1.55;
  color: var(--fg-soft);
  margin-top: 20px;
  max-width: 60ch;
  text-wrap: pretty;
}
.pb-home-modules {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
  margin-top: 32px;
}
.pb-home-module {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.pb-home-module-num {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em;
  color: var(--fg-mute);
}
.pb-home-module-letter {
  font-family: var(--display);
  font-stretch: 88%; font-weight: 600;
  font-size: 22px; letter-spacing: -0.03em;
  color: var(--fg);
}
.pb-home-module-sub {
  font-family: var(--serif); font-style: italic;
  font-size: 12px;
  color: var(--fg-mute);
}
.pb-home-past {
  margin-top: clamp(40px, 5vw, 72px);
}
.pb-home-past-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.pb-home-past-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 20px;
  align-items: center;
  padding: 20px;
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.4s cubic-bezier(0.2,0.7,0.2,1), border-color 0.3s ease;
}
.pb-home-past-card:hover { background: var(--bg-3); border-color: var(--fg-mute); transform: translateY(-3px); }
.pb-home-past-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pb-home-past-meta {
  display: flex; justify-content: space-between;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
}
.pb-home-past-title {
  font-family: var(--serif); font-style: italic;
  font-size: 24px;
  color: var(--fg);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-top: 6px;
}
.pb-home-past-tagline {
  font-size: 14px;
  color: var(--pb-accent);
  font-family: var(--display);
  font-stretch: 92%; font-weight: 500;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .pb-explainer-grid { grid-template-columns: 1fr; }
  .pb-featured-grid { grid-template-columns: 1fr; }
  .pb-issue-grid { grid-template-columns: 1fr; }
  .pb-home-feature { grid-template-columns: 1fr; }
  .pb-archive-grid { grid-template-columns: repeat(2, 1fr); }
  .pb-modules { grid-template-columns: repeat(2, 1fr); }
  .pb-home-past-grid { grid-template-columns: 1fr; }
  .pb-tabs { grid-template-columns: repeat(2, 1fr); }
  .pb-module-nav { grid-template-columns: repeat(2, 1fr); }
  .pb-colophon-grid { grid-template-columns: 1fr; }
  .pb-issue-nav-grid { grid-template-columns: 1fr; text-align: left; }
  .pb-issue-nav-next { text-align: left; }
}
@media (max-width: 720px) {
  .pb-day-row { grid-template-columns: 1fr; }
  .pb-day-tag { position: static; }
  .pb-fuel-grid { grid-template-columns: 1fr; border-left: 0; border-top: 1px solid var(--hairline); }
  .pb-fuel-cell { border-right: 0; border-bottom: 1px solid var(--hairline); padding: 16px 0; }
  .pb-week-strip { grid-template-columns: repeat(4, 1fr); }
  .pb-archive-grid { grid-template-columns: 1fr; }
  .pb-modules { grid-template-columns: 1fr; }
}


/* ============ SCIENCE TEASER (home) — refresh ============ */
.science-teaser {
  position: relative;
  padding: clamp(48px, 6vw, 88px) 0;
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;
}
.science-teaser-bg {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* Science PAGE variant: spill the wave/wash down into the ingredients
   gallery beneath. Keyed off the data-screen-label so the home teaser
   keeps its self-contained wave. */
.science-teaser[data-screen-label="science-stack"] { overflow: visible; }
.science-teaser[data-screen-label="science-stack"] .science-teaser-bg {
  inset: 0 0 -560px 0;
}
.science-teaser[data-screen-label="science-stack"] .science-teaser-curve {
  height: 70%;
}
.science-teaser[data-screen-label="science-stack"] .science-teaser-curve path {
  opacity: 0.09;
}
.science-teaser-wash {
  position: absolute; inset: 0;
  opacity: 0.6;
  transition: background 0.6s ease;
}
.science-teaser.tone-rise .science-teaser-wash {
  background:
    radial-gradient(ellipse 60% 50% at 20% 20%, rgba(255,204,65,0.16) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 90% 80%, rgba(255,204,65,0.08) 0%, transparent 65%);
}
.science-teaser.tone-drift .science-teaser-wash {
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(66,100,158,0.20) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 10% 80%, rgba(66,100,158,0.10) 0%, transparent 65%);
}
.science-teaser-curve {
  position: absolute; bottom: 0; left: 0; right: 0;
  width: 100%; height: 40%;
  display: block;
  pointer-events: none;
  transition: color 0.6s ease;
}
.science-teaser-curve path {
  fill: currentColor;
  opacity: 0.07;
  transition: fill 0.6s ease, d 0.6s ease;
}
.science-teaser.tone-rise .science-teaser-curve { color: var(--rise); }
.science-teaser.tone-drift .science-teaser-curve { color: var(--drift); }

.science-teaser-inner { position: relative; z-index: 2; }

.science-teaser-head {
  display: flex; justify-content: space-between;
  align-items: flex-end; flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 28px;
}
.science-teaser-kicker {
  display: flex; align-items: center; gap: 20px;
}
.science-teaser-glyph {
  width: 44px; height: 44px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  background: var(--bg-2);
  transition: color 0.5s ease, border-color 0.5s ease;
}
.science-teaser.tone-rise .science-teaser-glyph {
  color: var(--rise);
  border-color: rgba(255,204,65,0.4);
}
.science-teaser.tone-drift .science-teaser-glyph {
  color: var(--drift);
  border-color: rgba(66,100,158,0.5);
}
.science-teaser-glyph svg { width: 22px; height: 22px; }

.eco-tab-dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.eco-tab-dot.rise  { background: var(--rise); }
.eco-tab-dot.drift { background: var(--drift); }

.science-teaser-body {
  opacity: 1;
  transition: opacity 0.24s ease;
}
.science-teaser-body .ingredient-grid { margin-top: clamp(24px, 3vw, 40px); }
.science-teaser-body .science-teaser-lede { margin-top: clamp(20px, 2vw, 32px); }
.science-teaser-body.is-fading { opacity: 0; }

.science-teaser-lede {
  margin-bottom: 0;
  max-width: none;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hairline);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.5;
  color: var(--fg-soft);
}

.science-doses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 0;
}
.science-dose {
  padding: clamp(20px, 2.2vw, 32px) clamp(16px, 1.6vw, 22px);
  border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 6px;
}
.science-dose:last-child { border-right: 0; }
.science-dose-num {
  font-family: var(--display);
  font-stretch: 85%; font-weight: 600;
  font-size: clamp(36px, 4vw, 68px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  transition: color 0.5s ease;
}
.science-dose-unit {
  font-size: 0.36em;
  font-weight: 400;
  color: var(--fg-mute);
  margin-left: 6px;
  vertical-align: top;
  line-height: 1;
  top: 0.7em;
  position: relative;
}
.science-dose-name {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.science-dose-role {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
}
.science-dose-desc {
  font-size: 13px;
  line-height: 1.5;color: var(--fg-soft);
  margin-top: 6px;
  max-width: 36ch;
  text-wrap: pretty;
}

@media (max-width: 720px) {
  .science-doses { grid-template-columns: 1fr; }
  .science-dose { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .science-dose:last-child { border-bottom: 0; }
  .science-teaser-head { flex-direction: column; align-items: flex-start; }
}

/* ============ HERO CAROUSEL — richer "photo-feel" placeholders ============ */
.hero-bg-label {
  position: absolute; bottom: 18px; right: 18px;
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-mute);
  background: rgba(0,0,0,0.5);
  padding: 6px 10px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  backdrop-filter: blur(8px);
  opacity: 0.7;
}

/* Richer photographic backgrounds:
   layered radial light-pools + film-grain stripes + heavy vignette */
.hero-bg.ph-1 {
  background-color: #0a0805;
  background-image:
    /* warm key light, upper-right (sunrise through a window) */
    radial-gradient(ellipse 50% 70% at 85% 20%, rgba(255,196,118,0.45) 0%, rgba(255,168,80,0.18) 35%, transparent 65%),
    /* secondary warm bounce */
    radial-gradient(ellipse 40% 50% at 60% 60%, rgba(255,150,80,0.18) 0%, transparent 60%),
    /* cool shadow base */
    radial-gradient(ellipse 80% 80% at 20% 80%, rgba(40,30,20,0.5) 0%, transparent 70%),
    /* subject silhouette suggestion */
    radial-gradient(ellipse 30% 40% at 35% 55%, rgba(0,0,0,0.4) 0%, transparent 70%),
    linear-gradient(125deg, #1a1208 0%, #050402 80%);
}
.hero-bg.ph-2 {
  background-color: #050810;
  background-image:
    /* cool moonlight from upper-left */
    radial-gradient(ellipse 50% 60% at 18% 15%, rgba(140,170,220,0.30) 0%, rgba(90,120,180,0.12) 40%, transparent 70%),
    /* warm interior lamp (small, lower-right) */
    radial-gradient(ellipse 25% 30% at 78% 70%, rgba(220,160,90,0.22) 0%, transparent 60%),
    /* deep shadow */
    radial-gradient(ellipse 70% 70% at 60% 85%, rgba(10,15,35,0.6) 0%, transparent 75%),
    radial-gradient(ellipse 30% 40% at 50% 50%, rgba(0,0,0,0.45) 0%, transparent 70%),
    linear-gradient(150deg, #0a1530 0%, #03060f 80%);
}
.hero-bg.ph-3 {
  background-color: #060606;
  background-image:
    /* dusk highlight, top */
    radial-gradient(ellipse 60% 40% at 50% 5%, rgba(180,140,90,0.25) 0%, transparent 60%),
    /* split warm/cool light pools */
    radial-gradient(ellipse 35% 50% at 25% 50%, rgba(255,180,80,0.14) 0%, transparent 65%),
    radial-gradient(ellipse 35% 50% at 75% 55%, rgba(110,140,200,0.16) 0%, transparent 65%),
    /* heavy floor shadow */
    radial-gradient(ellipse 90% 50% at 50% 100%, rgba(0,0,0,0.6) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 50% 70%, rgba(0,0,0,0.35) 0%, transparent 70%),
    linear-gradient(180deg, #0a0a0c 0%, #020202 100%);
}
/* Film-grain + vignette overlay for all photo slots */
.hero-bg.ph-1::before, .hero-bg.ph-2::before, .hero-bg.ph-3::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    /* fine grain */
    repeating-linear-gradient(0deg,   rgba(255,255,255,0.018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg,  rgba(0,0,0,0.022) 0 1px, transparent 1px 3px),
    /* coarser texture */
    repeating-linear-gradient(135deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 16px);
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* Stronger vignette so headlines stay readable */
.hero-bg::after {
  background:
    /* left-side text safe area */
    linear-gradient(to right, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.15) 65%, rgba(0,0,0,0.1) 100%),
    /* top-bottom edge darken */
    linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 25%, transparent 70%, rgba(0,0,0,0.45) 100%),
    /* radial vignette */
    radial-gradient(ellipse 110% 100% at 50% 50%, transparent 30%, rgba(0,0,0,0.4) 100%);
}

/* ============ PURPOSE SECTION (home, "Our Purpose") ============ */
.purpose-section {
  position: relative;
  background: var(--bg);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
  isolation: isolate;
}
.purpose-bg {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
}
.purpose-bg-image {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.purpose-bg-image.ph-1 {
  /* warm "morning kitchen" suggestion */
  background-image:
    radial-gradient(ellipse 40% 60% at 75% 25%, rgba(255,196,118,0.32) 0%, rgba(255,168,80,0.10) 45%, transparent 75%),
    radial-gradient(ellipse 30% 40% at 30% 70%, rgba(255,150,80,0.14) 0%, transparent 70%),
    radial-gradient(ellipse 70% 60% at 10% 20%, rgba(40,30,18,0.5) 0%, transparent 70%),
    linear-gradient(120deg, #1a1408 0%, #050402 80%);
}
.purpose-bg-image.ph-2 {
  /* cool "evening exhale" suggestion, half-blend */
  background-image:
    radial-gradient(ellipse 45% 55% at 15% 30%, rgba(140,170,220,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 35% 50% at 80% 80%, rgba(90,120,180,0.16) 0%, transparent 70%),
    linear-gradient(160deg, transparent 50%, rgba(10,15,30,0.5) 100%);
  mix-blend-mode: screen;
  opacity: 0.55;
}
.purpose-bg-overlay {
  position: absolute; inset: 0;
  background:
    /* heavy darken so text reads */
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.7) 100%),
    /* edge vignette */
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 30%, rgba(0,0,0,0.4) 100%);
}
.purpose-bg::before {
  /* film-grain + grid overlay */
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg,   rgba(255,255,255,0.02) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 16px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(0deg,  rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: auto, auto, 80px 80px, 80px 80px;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.purpose-bg-label {
  position: absolute; bottom: 18px; right: 18px;
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-mute);
  background: rgba(0,0,0,0.5);
  padding: 6px 10px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  backdrop-filter: blur(8px);
  opacity: 0.7;
  z-index: 1;
}
.purpose-inner { position: relative; z-index: 2; }
.purpose-inner .eyebrow { color: rgba(250,250,250,0.7); }
.purpose-inner .body-lg { color: var(--fg-soft); }
.purpose-inner .btn-ghost { background: rgba(0,0,0,0.3); backdrop-filter: blur(8px); }


/* ============ AMBASSADORS HERO — lifestyle photo backdrop ============ */
.page-hero.ambassadors {
  background-color: #0a0805;
  background-image:
    radial-gradient(ellipse 50% 70% at 80% 20%, rgba(255,196,118,0.36) 0%, rgba(255,168,80,0.14) 40%, transparent 70%),
    radial-gradient(ellipse 30% 45% at 45% 55%, rgba(255,150,80,0.16) 0%, transparent 65%),
    radial-gradient(ellipse 80% 80% at 15% 85%, rgba(30,20,12,0.6) 0%, transparent 75%),
    radial-gradient(ellipse 60% 80% at 20% 50%, rgba(0,0,0,0.55) 0%, transparent 70%),
    linear-gradient(135deg, #1a1408 0%, #050402 80%);
}
.page-hero.ambassadors::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg,   rgba(255,255,255,0.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg,  rgba(0,0,0,0.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 16px),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 30%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
  opacity: 0.9;
  z-index: 1;
}
.page-hero.ambassadors > .container { position: relative; z-index: 2; }
.page-hero.ambassadors::after {
  content: "Lifestyle photo · run-club golden hour";
  position: absolute; bottom: 18px; right: 18px;
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-mute);
  background: rgba(0,0,0,0.5);
  padding: 6px 10px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  backdrop-filter: blur(8px);
  opacity: 0.7;
  z-index: 3;
}


/* Enlarge eyebrow / caption text inside the duo compare panels */
.compare-side .eyebrow,
.compare-side .caption {
  font-size: clamp(14px, 1.1vw, 17px);
  letter-spacing: 0.16em;
}


/* ============ NAV SIGN-IN DROPDOWN (main site) ============ */
/* Open trigger is JS-controlled .is-open (set by initNavDropdowns in
   circadia-chrome.js with a 200ms close-delay), matching the .nav-dropdown
   pattern. :focus-within stays as the keyboard-accessibility second
   selector. :hover removed — pure-CSS hover collapsed the menu instantly
   on mouseleave, which made it impossible to slide the cursor down to
   the menu items. */
.nav-signin {
  position: relative;
  display: inline-flex;
}
.nav-signin-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--hairline);
  background: transparent;
  border-radius: 999px;
  color: var(--fg-soft);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.nav-signin.is-open .nav-signin-toggle,
.nav-signin:focus-within .nav-signin-toggle {
  border-color: var(--fg);
  color: var(--fg);
}
.nav-signin-toggle svg:last-child {
  transition: transform 0.25s ease;
}
.nav-signin.is-open .nav-signin-toggle svg:last-child,
.nav-signin:focus-within .nav-signin-toggle svg:last-child {
  transform: rotate(180deg);
}
.nav-signin-bridge {
  /* Fills the visual gap between the toggle and the dropdown so the
     cursor never crosses an empty region. Always live, even when the
     menu is closed (pointer-events: auto by default). */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
  z-index: 109;
}
.nav-signin-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 110;
  min-width: 420px;
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px;
  margin-top: 12px;
  display: flex; flex-direction: column;
  gap: 4px;
  opacity: 0; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow:
    0 24px 48px rgba(0,0,0,0.5),
    0 4px 12px rgba(0,0,0,0.3);
}
.nav-signin.is-open .nav-signin-menu,
.nav-signin:focus-within .nav-signin-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.nav-signin-menu-head {
  padding: 14px 16px 10px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-mute);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 4px;
}
.nav-signin-item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
  text-decoration: none;
}
.nav-signin-item:hover { background: rgba(255,255,255,0.04); }
.nav-signin-item-label {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.nav-signin-item-sub {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.12em;
  color: var(--fg-mute);
  text-transform: lowercase;
}
.nav-signin-item-desc {
  font-size: 14px;
  color: var(--fg-soft);
  line-height: 1.45;
  margin-top: 4px;
}
.nav-signin-foot {
  margin-top: 4px;
  padding: 14px 16px 10px;
  border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 10px;
}
.nav-signin-foot a {
  font-size: 13px;
  color: var(--fg-mute);
  cursor: pointer;
  transition: color 0.2s ease;
}
.nav-signin-foot a:hover { color: var(--fg); }


/* ============ PLAYBOOK COVER — lifestyle photo backdrops ============ */
/* Each cover gets a layered photographic-feeling background per persona, plus
   a dark overlay so the title/eyebrow stay readable. Drop a real image into
   .pb-cover-photo-{id} as a background-image when assets land. */

.pb-cover-photo {
  position: relative;
  isolation: isolate;
}
.pb-cover-photo-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    /* heavy dark gradient for readability */
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.78) 100%),
    /* edge vignette */
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 30%, rgba(0,0,0,0.4) 100%);
  border-radius: inherit;
  pointer-events: none;
}
.pb-cover-photo > *:not(.pb-cover-photo-overlay) {
  position: relative;
  z-index: 2;
}
.pb-cover-photo-label {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(250,250,250,0.55);
  background: rgba(0,0,0,0.5);
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 2px;
  backdrop-filter: blur(8px);
  white-space: nowrap;
  z-index: 3;
}
/* On the small/xs cover variants, hide the photo-label to keep the cards clean */
.pb-cover-sm .pb-cover-photo-label,
.pb-cover-xs .pb-cover-photo-label { display: none; }

/* Subtle film-grain texture on top of every photo cover */
.pb-cover-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    repeating-linear-gradient(0deg,   rgba(255,255,255,0.02) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 16px);
  mix-blend-mode: overlay;
  pointer-events: none;
  border-radius: inherit;
}

/* ----- Per-persona photographic backgrounds -----
   Each is a layered radial-gradient set that suggests a lifestyle vibe.
   Replace with background-image: url(...) when real photography ships. */

.pb-cover-photo.pb-cover-photo-the-daily-runner {
  background-color: #0a0805;
  background-image:
    radial-gradient(ellipse 55% 70% at 75% 25%, rgba(255,196,118,0.55) 0%, rgba(255,168,80,0.20) 40%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 30% 60%, rgba(255,150,80,0.20) 0%, transparent 65%),
    radial-gradient(ellipse 80% 80% at 15% 90%, rgba(30,20,12,0.7) 0%, transparent 75%),
    linear-gradient(135deg, #1f1408 0%, #060402 80%);
}

.pb-cover-photo.pb-cover-photo-the-frequent-traveler {
  background-color: #060810;
  background-image:
    radial-gradient(ellipse 55% 65% at 20% 25%, rgba(140,180,230,0.40) 0%, rgba(90,130,200,0.16) 40%, transparent 70%),
    radial-gradient(ellipse 30% 45% at 75% 55%, rgba(180,160,90,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 80% 80% at 50% 90%, rgba(10,15,35,0.7) 0%, transparent 75%),
    linear-gradient(150deg, #0a1530 0%, #030610 80%);
}

.pb-cover-photo.pb-cover-photo-the-busy-parent {
  background-color: #100804;
  background-image:
    radial-gradient(ellipse 50% 60% at 70% 30%, rgba(240,180,130,0.45) 0%, rgba(200,140,90,0.18) 40%, transparent 70%),
    radial-gradient(ellipse 35% 45% at 25% 65%, rgba(170,120,90,0.20) 0%, transparent 65%),
    radial-gradient(ellipse 70% 80% at 50% 95%, rgba(20,12,8,0.65) 0%, transparent 70%),
    linear-gradient(140deg, #1d1208 0%, #060402 80%);
}

.pb-cover-photo.pb-cover-photo-the-desk-athlete {
  background-color: #08090c;
  background-image:
    radial-gradient(ellipse 50% 60% at 50% 20%, rgba(200,210,230,0.30) 0%, rgba(140,160,200,0.14) 40%, transparent 70%),
    radial-gradient(ellipse 30% 40% at 30% 60%, rgba(120,150,200,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 80% 80% at 70% 85%, rgba(20,25,40,0.7) 0%, transparent 75%),
    linear-gradient(160deg, #161a25 0%, #050608 80%);
}

.pb-cover-photo.pb-cover-photo-the-early-riser {
  background-color: #0a0604;
  background-image:
    radial-gradient(ellipse 60% 60% at 50% 80%, rgba(255,180,100,0.55) 0%, rgba(255,140,70,0.22) 35%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 50% 30%, rgba(150,90,140,0.20) 0%, transparent 65%),
    radial-gradient(ellipse 80% 50% at 50% 10%, rgba(40,20,30,0.5) 0%, transparent 70%),
    linear-gradient(180deg, #1a0c14 0%, #1c0e08 50%, #050302 100%);
}

.pb-cover-photo.pb-cover-photo-the-shift-worker {
  background-color: #04060c;
  background-image:
    radial-gradient(ellipse 40% 50% at 25% 30%, rgba(80,110,180,0.32) 0%, transparent 65%),
    radial-gradient(ellipse 25% 30% at 80% 65%, rgba(220,150,90,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 80% 80% at 50% 90%, rgba(2,4,12,0.8) 0%, transparent 75%),
    linear-gradient(170deg, #060a18 0%, #02030a 80%);
}

.pb-cover-photo.pb-cover-photo-the-quiet-month {
  background-color: #08080a;
  background-image:
    radial-gradient(ellipse 55% 50% at 50% 25%, rgba(180,170,150,0.20) 0%, rgba(140,130,110,0.08) 40%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 30% 75%, rgba(90,80,70,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 80% 80% at 70% 90%, rgba(10,10,12,0.7) 0%, transparent 75%),
    linear-gradient(180deg, #1a1816 0%, #060606 80%);
}


/* ============ PLAYBOOK PILLAR ICONS ============ */
.pb-module-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 8px;
}
.pb-module-icon {
  width: 72px; height: 72px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--fg-mute);
  background: rgba(255,255,255,0.02);
  transition: color 0.3s ease, border-color 0.3s ease;
  flex-shrink: 0;
}
.pb-module-icon svg { width: 40px; height: 40px; }
.pb-module-card:hover .pb-module-icon {
  color: var(--fg);
  border-color: var(--fg-mute);
}

/* ============ PLAYBOOK COVER — fixes ============ */

/* The earlier rule that elevated cover content above the overlay accidentally
   reset position:absolute on the Wave icon. Scope it to text fields only so
   the absolutely-positioned wave keeps its top-right placement. */
.pb-cover-photo > .pb-cover-issue,
.pb-cover-photo > .pb-cover-persona,
.pb-cover-photo > .pb-cover-mark,
.pb-cover-photo > .pb-cover-month {
  position: relative;
  z-index: 2;
}
/* Make sure the Wave glyph sits on top of the photo overlay AND in the top-right corner. */
.pb-cover-photo > .pb-cover-wave {
  position: absolute;
  top: clamp(20px, 2.5vw, 36px);
  right: clamp(20px, 2.5vw, 36px);
  z-index: 3;
}

/* Lighten the photo overlay so per-persona color washes actually read through.
   Heavier at the bottom for legibility of the cover-month / mark lines. */
.pb-cover-photo-overlay {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.42) 60%, rgba(0,0,0,0.78) 100%),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 35%, rgba(0,0,0,0.35) 100%);
}


/* ============ DASHBOARD REORDER CARDS — flavor gradient ============ */
/* Mirrors the .product-card treatment on the shop page: a soft radial wash
   of the flavor color sits behind each card, fading up on hover. */
.reorder-card {
  position: relative;
  isolation: isolate;
}
.reorder-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(
    ellipse 90% 70% at 50% 35%,
    color-mix(in oklab, var(--flavor-color, transparent) 32%, transparent) 0%,
    transparent 70%
  );
  opacity: 0.45;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: -1;
  border-radius: inherit;
}
.reorder-card:hover::before { opacity: 1; }


/* ============ CUSTOMER DASHBOARD — multi-subscription list ============ */
.sub-list {
  display: flex; flex-direction: column;
  gap: 16px;
}
.sub-card-multi {
  /* Single column when there's one can, two when there are multiple */
  padding: clamp(24px, 2.5vw, 36px);
}
.sub-card-multi.paused {
  border-color: var(--hairline);
  background: var(--bg-2);
  opacity: 0.92;
}
.sub-card-multi.paused .sub-card-title { color: var(--fg-soft); }
.sub-card-multi.paused .sub-card-ship-date { color: var(--fg-soft); }
.sub-card-multi.paused .sub-card-cans { filter: grayscale(0.6) opacity(0.55); transition: filter 0.4s ease; }

.sub-card-meta-row {
  display: flex; justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* "+ Start another" call-to-action card. Same visual rhythm as a sub card. */
.sub-card-add {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px; align-items: center;
  padding: clamp(24px, 2.5vw, 36px);
  background: transparent;
  border: 1px dashed var(--hairline);
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.4s cubic-bezier(0.2,0.7,0.2,1);
}
.sub-card-add:hover {
  border-color: var(--fg-mute);
  background: rgba(255,255,255,0.02);
  transform: translateY(-2px);
}
.sub-card-add-plus {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  display: grid; place-items: center;
  font-family: var(--display);
  font-stretch: 85%; font-weight: 400;
  font-size: 32px;
  line-height: 1;
  color: var(--fg-mute);
  background: var(--bg);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.sub-card-add:hover .sub-card-add-plus {
  color: var(--fg);
  border-color: var(--fg);
}

@media (max-width: 720px) {
  .sub-card-add { grid-template-columns: 1fr; }
}


/* ============ AMBASSADOR DASHBOARD — attribution explainer ============ */
.attribution-steps {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.attribution-steps li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--hairline);
}
.attribution-steps li:last-child { border-bottom: 1px solid var(--hairline); }
.attribution-num {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em;
  color: var(--rise);
  padding-top: 4px;
}
.attribution-steps strong {
  display: block;
  font-size: 16px; font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.attribution-steps p {
  font-size: 14px; line-height: 1.5;
  color: var(--fg-soft);
  margin-top: 4px;
  text-wrap: pretty;
}


/* ============ TIER PROGRESS — spacing refresh ============ */
.tier-progress-marker {
  /* Slightly enlarged hit area + clearer label */
  width: 16px; height: 16px;
  border-width: 2px;
  top: -5px;
}
.tier-progress-marker.current {
  width: 20px; height: 20px;
  top: -7px;
}
.tier-progress-marker-label {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-mute);
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.tier-progress-marker-num { font-weight: 500; }
.tier-progress-marker.passed .tier-progress-marker-label {
  color: var(--rise);
  border-color: rgba(255,204,65,0.4);
  background: rgba(255,204,65,0.06);
}
.tier-progress-marker.current .tier-progress-marker-label {
  color: var(--ink);
  background: var(--rise);
  border-color: var(--rise);
}

/* "You: 42 of 1,000" — clearer spacing using flex w/ explicit gaps */
.tier-progress-you {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em;
  color: var(--fg-mute);
}
.tier-progress-you strong {
  color: var(--fg);
  font-weight: 500;
}
.tier-progress-you-sep {
  color: var(--fg-mute);
  opacity: 0.6;
}
.tier-progress-next {
  align-items: baseline;
}


/* ============ TIER PROGRESS — readability ============ */
.tier-progress-marker-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  padding: 5px 10px;
}
.tier-progress-marker-num {
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
}
.tier-progress-current-name {
  font-size: clamp(32px, 3vw, 48px);
}
.tier-progress-current-num {
  font-size: 13px;
  letter-spacing: 0.14em;
}

.tier-progress-you {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
  white-space: nowrap;
}
.tier-progress-you-label {
  color: var(--fg-mute);
}
.tier-progress-you strong {
  font-family: var(--display);
  font-stretch: 88%;
  font-weight: 700;
  font-style: normal;
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.tier-progress-you-unit {
  color: var(--fg-mute);
}


/* ============ TIER PROGRESS — dual stat (lifetime + active residuals) ============ */
.tier-progress-you {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 4px;
  background: var(--bg);
}
.tier-progress-you-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
  white-space: nowrap;
}
.tier-progress-you-stat + .tier-progress-you-stat {
  border-left: 1px solid var(--hairline);
  border-radius: 0 999px 999px 0;
}
.tier-progress-you-stat:first-child {
  border-radius: 999px 0 0 999px;
}
.tier-progress-you-stat strong {
  font-family: var(--display);
  font-stretch: 88%;
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.tier-progress-you-label {
  color: var(--fg-mute);
}


/* ============ SUBSCRIPTION DETAIL — lifecycle row ============ */
.sub-lifecycle {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.sub-lifecycle-item {
  padding: 0 16px;
  border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 4px;
}
.sub-lifecycle-item:first-child { padding-left: 0; }
.sub-lifecycle-item:last-child { padding-right: 0; border-right: 0; }
.sub-lifecycle-label {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
}
.sub-lifecycle-value {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
}
@media (max-width: 720px) {
  .sub-lifecycle { grid-template-columns: 1fr; }
  .sub-lifecycle-item { padding: 8px 0; border-right: 0; border-bottom: 1px solid var(--hairline); }
  .sub-lifecycle-item:last-child { border-bottom: 0; }
}


/* ============================================================
   FUTURE OF RHYTHM — interactive milestone timeline
   ============================================================ */

.future-tree {
  margin-top: clamp(48px, 6vw, 80px);
  /* Lock the entire roadmap from being copy-pasted — prevents lifting the
     blurred locked-stage names out to a clipboard reader. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.future-tree * { -webkit-user-drag: none; }

.future-tree-head {
  display: flex; justify-content: space-between;
  align-items: flex-end;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: 56px;
}
.future-tree-title {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(32px, 4vw, 56px);
  letter-spacing: -0.025em; line-height: 1.05;
  color: var(--fg);
  margin-top: 8px;
  text-wrap: balance;
}
.future-tree-title em {
  font-family: var(--display); font-stretch: 85%; font-style: normal; font-weight: 600;
}

.future-tree-legend {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
}
.future-legend-item { display: inline-flex; align-items: center; gap: 8px; }
.future-legend-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.future-legend-dot.unlocked { background: var(--rise); border-color: var(--rise); box-shadow: 0 0 0 3px rgba(255,204,65,0.18); }
.future-legend-dot.current  { background: transparent; border: 2px solid var(--fg); }
.future-legend-dot.loading  { background: transparent; border: 1px solid var(--fg-mute); position: relative; }
.future-legend-dot.loading::after {
  content: ""; position: absolute; inset: 1px;
  border-radius: 50%;
  background: conic-gradient(var(--fg-mute) 0deg, var(--fg-mute) 220deg, transparent 220deg);
  opacity: 0.55;
  animation: future-legend-loading-spin 1.6s linear infinite;
}
@keyframes future-legend-loading-spin { to { transform: rotate(360deg); } }
.future-legend-dot.locked   { background: transparent; border: 1px dashed var(--fg-mute); }

/* ---- The stepper row ---- */
/* The stepper is wrapped so the prev/next arrows can sit OUTSIDE the
   scrollable container — they stay anchored to the viewport edges, no
   matter how far the rail has been scrolled. */
.future-stepper-wrap {
  position: relative;
  margin-bottom: 24px;
}
.future-stepper-arrow {
  position: absolute;
  top: 88px;                  /* lines up with the node row */
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--fg);
  cursor: pointer;
  z-index: 10;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, opacity 0.2s ease;
  box-shadow: 0 12px 28px rgba(0,0,0,0.45), 0 0 0 4px var(--bg);
}
.future-stepper-arrow.prev { left: -22px; }
.future-stepper-arrow.next { right: -22px; }
.future-stepper-arrow svg { width: 18px; height: 18px; }
.future-stepper-arrow:hover { border-color: var(--fg); background: var(--bg-2); transform: scale(1.06); }
.future-stepper-arrow:active { transform: scale(0.97); }
.future-stepper-arrow.is-disabled,
.future-stepper-arrow[disabled] {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}
@media (max-width: 720px) {
  .future-stepper-arrow.prev { left: 4px; }
  .future-stepper-arrow.next { right: 4px; }
}

/* With 20 stages we always need horizontal scroll, even at desktop widths. */
.future-stepper {
  position: relative;
  padding: 24px 0 88px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* old Edge / IE */
}
.future-stepper::-webkit-scrollbar { display: none; }
.future-stepper::-webkit-scrollbar-track { background: transparent; }
.future-stepper::-webkit-scrollbar-thumb { background: transparent; }
/* Subtle fade only on the left to hint at scrollability — right side stays
   clean so the 10B node and end-of-track aren't masked out. */
.future-stepper {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 100%);
}
.future-stepper-inner {
  position: relative;
  width: max-content;
  min-width: 3200px;
  padding: 0;
}
.future-stepper-track {
  position: absolute;
  top: 87px;
  left: 1.5%; right: 1.5%;
  height: 2px;
  background: var(--hairline);
  border-radius: 999px;
  overflow: hidden;
}
.future-stepper-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--rise) 0%, var(--rise) 60%, color-mix(in oklab, var(--rise) 30%, var(--drift) 70%) 100%);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(255,204,65,0.4);
  transition: width 1.2s cubic-bezier(0.2,0.7,0.2,1);
}
.future-stepper-nodes {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0 1.5%;
}
.future-step {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  flex: 0 0 auto;
  width: clamp(140px, 13vw, 200px);
  text-align: center;
  position: relative;
  z-index: 2;
  transition: transform 0.35s cubic-bezier(0.2,0.7,0.2,1);
}
.future-step-threshold {
  font-family: var(--display); font-stretch: 88%; font-weight: 600;
  font-size: 22px; letter-spacing: -0.02em;
  color: var(--fg-soft);
  margin-bottom: 10px;
  transition: color 0.3s ease;
  line-height: 1.1;
}
.future-step-tick {
  display: block;
  width: 1px;
  height: 28px;
  background: var(--hairline);
  transition: background 0.3s ease, height 0.3s ease;
}
.future-step.status-unlocked .future-step-tick { background: color-mix(in oklab, var(--rise) 60%, var(--hairline)); }
.future-step.status-current  .future-step-tick { background: var(--rise); }
.future-step.status-loading  .future-step-tick { background: var(--fg-mute); }
.future-step.active .future-step-tick { background: var(--fg); height: 34px; }
.future-step-tags {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
  margin-top: 16px;
  line-height: 1.4;
}
.future-step:hover { transform: translateY(-2px); }
.future-step:focus-visible { outline: none; }
.future-step:focus-visible .future-step-node { box-shadow: 0 0 0 4px rgba(255,255,255,0.25); }

.future-step-node {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--hairline);
  display: grid; place-items: center;
  position: relative;
  transition: border-color 0.35s ease, transform 0.35s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.35s ease;
}
.future-step-node-inner {
  width: 100%; height: 100%;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--fg);
  position: relative;
}
.future-step-node-inner svg { width: 22px; height: 22px; }

/* Unlocked = filled yellow + checkmark */
.future-step.status-unlocked .future-step-node {
  background: var(--rise);
  border-color: var(--rise);
  box-shadow: 0 4px 16px rgba(255,204,65,0.3);
}
.future-step.status-unlocked .future-step-node-inner { color: var(--ink); }
.future-step.status-unlocked .future-step-threshold { color: var(--fg); }

/* Current = ring with pulsing core */
.future-step.status-current .future-step-node {
  border-color: var(--rise);
  background: var(--bg);
  box-shadow: 0 0 0 6px rgba(255,204,65,0.10);
}
.future-step-pulse {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--rise);
  position: relative;
  animation: future-pulse 2.2s ease-in-out infinite;
}
@keyframes future-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,204,65,0.5); }
  50%      { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(255,204,65,0); }
}

/* Locked = subdued */
.future-step.status-locked .future-step-node {
  background: var(--bg);
  border-color: var(--hairline);
}
.future-step.status-locked .future-step-node-inner { color: var(--fg-mute); }
.future-step.status-locked { opacity: 0.7; }
.future-step.status-locked:hover { opacity: 1; }

/* Loading = teased preview (between current and locked) */
.future-step.status-loading .future-step-node {
  background: var(--bg);
  border-color: var(--fg-mute);
}
.future-step.status-loading .future-step-node-inner {
  color: var(--fg-soft);
  animation: future-step-loading-pulse 2.2s ease-in-out infinite;
}
.future-step.status-loading { opacity: 0.85; }
.future-step.status-loading:hover { opacity: 1; }
.future-step.status-loading .future-step-threshold { color: var(--fg-soft); }
@keyframes future-step-loading-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Active state — bigger, brighter outline */
.future-step.active .future-step-node {
  transform: scale(1.18);
  border-color: var(--fg);
}
.future-step.active.status-unlocked .future-step-node { border-color: #fff; }
.future-step.active.status-locked   .future-step-node { border-color: var(--fg); }

.future-step.status-locked .future-step-threshold { color: var(--fg-mute); }
.future-step.active .future-step-threshold { color: var(--fg); }

/* ---- Detail panel ---- */
.future-detail {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: clamp(32px, 4vw, 56px);
  overflow: hidden;
  background: var(--bg-2);
  animation: future-detail-in 0.6s cubic-bezier(0.2,0.7,0.2,1);
  isolation: isolate;
}
@keyframes future-detail-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.future-detail-bg {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.45;
  transition: opacity 0.6s ease;
}
.future-detail-bg[data-primary-sub="rise"]   { background: radial-gradient(ellipse 80% 60% at 80% 20%, rgba(255,204,65,0.16) 0%, transparent 65%); }
.future-detail-bg[data-primary-sub="drift"]  { background: radial-gradient(ellipse 80% 60% at 80% 20%, rgba(66,100,158,0.18) 0%, transparent 65%); }
.future-detail-bg[data-primary-sub="mend"]   { background: radial-gradient(ellipse 80% 60% at 80% 20%, rgba(92,28,18,0.22) 0%, transparent 65%); }
.future-detail-bg[data-primary-sub="flow"]   { background: radial-gradient(ellipse 80% 60% at 80% 20%, rgba(31,50,37,0.22) 0%, transparent 65%); }
.future-detail-bg[data-primary-sub="zone"]   { background: radial-gradient(ellipse 80% 60% at 80% 20%, rgba(19,53,74,0.24) 0%, transparent 65%); }
.future-detail-bg[data-primary-sub="charge"] { background: radial-gradient(ellipse 80% 60% at 80% 20%, rgba(26,61,38,0.24) 0%, transparent 65%); }
.future-detail-bg[data-primary-sub="mix"]    { background: radial-gradient(ellipse 80% 60% at 80% 20%, rgba(120,120,120,0.12) 0%, transparent 65%); }

.future-detail.status-locked .future-detail-bg { opacity: 0.15; }

.future-detail-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.1fr) 1.4fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.future-detail-meta {
  display: flex; flex-direction: column;
  gap: 24px;
}
.future-detail-meta-top {
  display: flex; justify-content: space-between; align-items: center;
}
.future-detail-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--hairline);
  background: var(--bg);
}
.future-detail-status-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--fg-mute);
}
.future-detail-status.status-unlocked { color: var(--rise); border-color: rgba(255,204,65,0.4); }
.future-detail-status.status-unlocked .future-detail-status-dot { background: var(--rise); box-shadow: 0 0 0 3px rgba(255,204,65,0.18); }
.future-detail-status.status-current  { color: var(--rise); border-color: var(--rise); background: rgba(255,204,65,0.05); }
.future-detail-status.status-current  .future-detail-status-dot { background: var(--rise); box-shadow: 0 0 0 3px rgba(255,204,65,0.18); animation: future-pulse 2.2s ease-in-out infinite; }
.future-detail-status.status-locked   { color: var(--fg-mute); }
.future-detail-status.status-loading  { color: var(--fg-soft); border-color: var(--fg-mute); }
.future-detail-status.status-loading .future-detail-status-dot {
  background: transparent;
  border: 1px solid var(--fg-mute);
  width: 8px; height: 8px;
  animation: future-step-loading-pulse 1.6s ease-in-out infinite;
}

.future-detail-threshold-num {
  font-family: var(--display); font-stretch: 85%; font-weight: 700;
  font-size: clamp(56px, 7vw, 104px);
  letter-spacing: -0.045em; line-height: 0.9;
  color: var(--fg);
  background: linear-gradient(180deg, var(--fg) 0%, var(--fg-soft) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.future-detail-threshold-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-mute);
  margin-top: 6px;
}

/* Stage title — the thematic name beneath the threshold number */
.future-detail-title {
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 20px 0 0;
  max-width: 22ch;
}
.future-detail-title em {
  font-style: italic;
  color: var(--fg);
}
.future-detail.status-locked .future-detail-title,
.future-detail.status-loading .future-detail-title {
  color: var(--fg-soft);
}
.future-detail.status-locked .future-detail-title {
  filter: blur(6px);
  opacity: 0.6;
}
.future-detail.status-loading .future-detail-title {
  filter: blur(2px);
  opacity: 0.85;
}

/* Tile glyphs for non-can blocks (merch / app / event / etc.) */
.future-cans-tiles {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px;
}
.future-cans-tiles-aside {
  position: absolute;
  right: 8%; bottom: 12px;
  max-width: 40%;
  justify-content: flex-end;
}
.future-cans-tiles-solo {
  position: relative;
  width: 100%;
  padding: 24px 16px;
  gap: 14px;
}
.future-block-tile {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 84px; height: 96px;
  padding: 10px 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--tile-accent) 18%, var(--bg)) 0%, var(--bg) 100%);
  border: 1px solid color-mix(in oklab, var(--tile-accent) 30%, var(--hairline));
  color: var(--tile-accent);
  animation: future-can-in 0.7s cubic-bezier(0.2,0.7,0.2,1) backwards;
  box-shadow: 0 12px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
}
.future-block-tile.is-small {
  width: 52px; height: 60px;
  padding: 6px 4px;
  border-radius: 10px;
}
.future-block-tile-glyph {
  font-family: var(--display);
  font-size: 28px;
  line-height: 1;
  font-weight: 600;
  margin-bottom: 8px;
}
.future-block-tile.is-small .future-block-tile-glyph {
  font-size: 18px;
  margin-bottom: 4px;
}
.future-block-tile-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-soft);
  opacity: 0.85;
}
.future-block-tile.is-small .future-block-tile-label {
  font-size: 8px;
  letter-spacing: 0.12em;
}

/* Cans stage */
.future-cans-stage {
  position: relative;
  display: grid; place-items: center;
  min-height: 240px;
  padding: 24px 0;
}
.future-cans-stage.is-locked { filter: grayscale(0.4); }
.future-cans-art {
  display: flex; align-items: flex-end;
  gap: 0;
}
.future-cans-art-item {
  animation: future-can-in 0.7s cubic-bezier(0.2,0.7,0.2,1) backwards;
}
.future-cans-art-item img,
.future-cans-art-item .future-can-svg {
  width: clamp(120px, 14vw, 180px);
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 32px rgba(0,0,0,0.55)) drop-shadow(0 3px 8px rgba(0,0,0,0.35));
}
.future-cans-art[data-multi="true"] .future-cans-art-item:nth-child(1) img,
.future-cans-art[data-multi="true"] .future-cans-art-item:nth-child(1) .future-can-svg { transform: none; }
.future-cans-art[data-multi="true"] .future-cans-art-item:nth-child(2) img,
.future-cans-art[data-multi="true"] .future-cans-art-item:nth-child(2) .future-can-svg { transform: none; margin-left: -32px; }
@keyframes future-can-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; }
}

.future-cans-fan {
  display: flex; align-items: flex-end;
}
.future-cans-fan img:nth-child(1) { transform: none; }
.future-cans-fan img:nth-child(2) { z-index: 2; margin-left: -30px; }
.future-cans-fan img:nth-child(3) { transform: none; margin-left: -30px; }
.future-cans-fan img {
  width: clamp(100px, 12vw, 150px);
  height: auto;
  filter: drop-shadow(0 24px 32px rgba(0,0,0,0.55)) drop-shadow(0 3px 8px rgba(0,0,0,0.35));
}

.future-cans-lock {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.future-cans-lock svg {
  width: 48px; height: 48px;
  color: var(--fg-mute);
  background: rgba(10,10,10,0.6);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  padding: 12px;
  backdrop-filter: blur(8px);
}
.future-cans-stage.is-locked .future-cans-art { opacity: 0.35; }

/* Current-stage progress bar */
.future-detail-progress {
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
.future-detail-progress-track {
  height: 6px;
  background: var(--hairline);
  border-radius: 999px;
  overflow: hidden;
}
.future-detail-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--rise), color-mix(in oklab, var(--rise) 40%, var(--drift) 60%));
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(255,204,65,0.35);
  transition: width 1s cubic-bezier(0.2,0.7,0.2,1);
}
.future-detail-progress-foot {
  display: flex; justify-content: space-between;
}

.future-detail-since {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
.future-detail-since-date {
  font-family: var(--display); font-stretch: 90%; font-weight: 600;
  font-size: 18px; letter-spacing: -0.02em;
  color: var(--fg);
}

/* Right column — blocks */
.future-detail-blocks {
  display: flex; flex-direction: column; gap: 14px;
}
.future-block {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: clamp(20px, 2vw, 28px);
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color 0.3s ease, transform 0.4s cubic-bezier(0.2,0.7,0.2,1);
  position: relative;
}
.future-block:hover { border-color: var(--fg-mute); transform: translateY(-2px); }
.future-block::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 3px;
  border-radius: 12px 0 0 12px;
  background: var(--fg-mute);
  opacity: 0.6;
}
.future-block.sub-rise::before   { background: var(--rise); }
.future-block.sub-drift::before  { background: var(--drift); }
.future-block.sub-mend::before   { background: #cb5a3e; }
.future-block.sub-flow::before   { background: #6ea27c; }
.future-block.sub-zone::before   { background: #5b8dba; }
.future-block.sub-charge::before { background: #6aa97e; }
.future-block.sub-mix::before    { background: linear-gradient(180deg, var(--rise), var(--drift)); }
.future-block.sub-plus::before   { background: #d4a356; }
.future-block.sub-merch::before  { background: #a8a39a; }
.future-block.sub-amb::before    { background: #c9b48a; }
.future-block.sub-app::before    { background: #6f9ec0; }
.future-block.sub-event::before  { background: #c08862; }
.future-block.sub-food::before   { background: #8aa370; }
.future-block.sub-region::before { background: linear-gradient(180deg, #b8b8b8, #6a6a6a); }

.future-block-head {
  display: flex; justify-content: space-between; align-items: center;
}
.future-block-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 500;
}
.future-block-tag.sub-rise   { color: var(--rise); }
.future-block-tag.sub-drift  { color: var(--drift); }
.future-block-tag.sub-mend   { color: #d97a5f; }
.future-block-tag.sub-flow   { color: #88b89a; }
.future-block-tag.sub-zone   { color: #7eaad0; }
.future-block-tag.sub-charge { color: #82c193; }
.future-block-tag.sub-mix    { color: var(--fg-soft); }
.future-block-tag.sub-plus   { color: #e2b46a; }
.future-block-tag.sub-merch  { color: #c2bdb3; }
.future-block-tag.sub-amb    { color: #d8c79c; }
.future-block-tag.sub-app    { color: #8db8d4; }
.future-block-tag.sub-event  { color: #d99e7a; }
.future-block-tag.sub-food   { color: #a6bf88; }
.future-block-tag.sub-region { color: #cccccc; }

.future-block-title {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.02em; line-height: 1.05;
  color: var(--fg);
}
.future-block-desc {
  font-size: 14px; line-height: 1.55;
  color: var(--fg-soft);
  text-wrap: pretty;
}

/* Inline prev/next */
.future-detail-nav {
  display: flex; justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}
.future-detail-nav-btn {
  display: inline-flex; align-items: center; gap: 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  color: var(--fg-soft);
  transition: color 0.25s ease;
}
.future-detail-nav-btn:not(:disabled):hover { color: var(--fg); }
.future-detail-nav-btn:disabled { cursor: not-allowed; opacity: 0.5; }
.future-detail-nav-btn.align-end { text-align: right; }
.future-detail-nav-arr {
  font-family: var(--mono); font-size: 24px; line-height: 1;
  color: var(--fg);
  transition: transform 0.3s ease;
}
.future-detail-nav-btn:not(:disabled):hover .future-detail-nav-arr { transform: translateX(3px); }
.future-detail-nav-btn:first-child:not(:disabled):hover .future-detail-nav-arr { transform: translateX(-3px); }
.future-detail-nav-text {
  display: flex; flex-direction: column; gap: 4px;
}
.future-detail-nav-name {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  color: var(--fg);
}

/* Responsive */
@media (max-width: 960px) {
  .future-tree-head { flex-direction: column; align-items: flex-start; }
  .future-stepper { padding-bottom: 80px; }
  .future-stepper-track { left: 1.5%; right: 1.5%; }
  .future-detail-grid { grid-template-columns: 1fr; }
  .future-cans-stage { min-height: 200px; }
}


/* ============================================================
   ABOUT — SUSTAINABILITY SECTION
   ============================================================ */
.planet-section {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(141,224,168,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(66,100,158,0.08) 0%, transparent 60%),
    var(--bg);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
  isolation: isolate;
}
.planet-bg {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 70% at 75% 35%, rgba(141,224,168,0.10) 0%, rgba(80,140,110,0.05) 35%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 25% 70%, rgba(66,100,158,0.10) 0%, transparent 65%),
    linear-gradient(135deg, rgba(20,30,25,0.4) 0%, transparent 60%);
}
.planet-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg,   rgba(255,255,255,0.018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 16px);
  mix-blend-mode: overlay;
}
.planet-bg-label {
  position: absolute; bottom: 18px; right: 18px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-mute);
  background: rgba(0,0,0,0.5);
  padding: 6px 10px; border: 1px solid var(--hairline); border-radius: 2px;
  backdrop-filter: blur(8px);
  opacity: 0.7;
}
.planet-inner { position: relative; z-index: 2; }

.planet-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
  margin-top: 32px;
}
.planet-text p { max-width: 56ch; }

.planet-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.planet-stat {
  padding: clamp(24px, 3vw, 40px) clamp(20px, 2vw, 32px);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-2);
  transition: background 0.3s ease;
}
.planet-stat:hover { background: var(--bg-3); }
.planet-stat-num {
  font-family: var(--display); font-stretch: 85%; font-weight: 600;
  font-size: clamp(72px, 8vw, 128px);
  letter-spacing: -0.045em; line-height: 0.92;
  color: #8DE0A8;
}
.planet-stat-num span {
  font-size: 0.42em;
  color: var(--fg-mute);
  margin-left: 4px;
  letter-spacing: 0.04em;
  font-weight: 400;
  vertical-align: top;
  position: relative;
  top: 0.4em;
}
.planet-stat-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg);
  margin-top: 4px;
}
.planet-stat-desc {
  font-size: 13px; line-height: 1.55;
  color: var(--fg-soft);
  margin-top: 6px;
  text-wrap: pretty;
}

.planet-pledges {
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--hairline);
}
.planet-pledges-head { margin-bottom: 40px; max-width: 56ch; }
.planet-pledges-title {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(32px, 4vw, 56px);
  letter-spacing: -0.025em; line-height: 1.05;
  color: var(--fg); margin-top: 8px;
  text-wrap: balance;
}
.planet-pledges-title em {
  font-family: var(--display); font-stretch: 85%; font-style: normal; font-weight: 600;
}
.planet-pledges-list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.planet-pledges-list li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px; align-items: flex-start;
  padding: clamp(24px, 2.5vw, 32px);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
  transition: background 0.3s ease;
}
.planet-pledges-list li:hover { background: var(--bg-2); }
.planet-pledge-num {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  color: #8DE0A8;
  padding-top: 4px;
}
.planet-pledges-list strong {
  display: block;
  font-size: 17px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--fg);
  text-wrap: balance;
}
.planet-pledges-list p {
  font-size: 14px; line-height: 1.5;
  color: var(--fg-soft);
  margin-top: 6px;
  text-wrap: pretty;
}

@media (max-width: 960px) {
  .planet-grid { grid-template-columns: 1fr; }
  .planet-stats { grid-template-columns: 1fr; }
  .planet-stat:nth-child(odd) { border-right: 0; }
  .planet-pledges-list { grid-template-columns: 1fr; }
  .planet-pledges-list li:nth-child(odd) { border-right: 0; }
}


/* ============================================================
   RHYTHM DIAL — continuously-sweeping clock hands
   ============================================================ */
/* Both <g> wrappers carry inline transform-origin: 160px 160px.
   We deliberately DO NOT set transform-box here — SVG's default
   "view-box" lets the inline origin work in user-space coordinates,
   so the hands pivot around the clock center, not their own bbox. */
.rd-hand-minute {
  animation: rhythm-sweep 6s linear infinite;
  transform-origin: 160px 160px;
}
.rd-hand-hour {
  animation: rhythm-sweep 72s linear infinite;
  transform-origin: 160px 160px;
}
@keyframes rhythm-sweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* ============================================================
   PLAYBOOK DAY ROWS — header banner + stacked layout
   ============================================================ */
.pb-day-row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(28px, 3vw, 44px) clamp(20px, 2vw, 28px);
  margin-left: clamp(-20px, -2vw, -28px);
  margin-right: clamp(-20px, -2vw, -28px);
  border-bottom: 1px solid var(--hairline);
  border-radius: 12px;
  transition: background 0.45s ease, transform 0.45s cubic-bezier(0.2,0.7,0.2,1);
}
.pb-day-row::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 60% 100% at 15% 50%,
    color-mix(in oklab, var(--pb-accent, var(--rise)) 14%, transparent) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.45s ease;
}
.pb-day-row:hover {
  background: var(--bg-2);
}
.pb-day-row:hover::before {
  opacity: 1;
}
.pb-day-row:hover .pb-day-num,
.pb-day-row:hover .pb-day-name,
.pb-day-row:hover .pb-day-label {
  color: var(--fg);
}

/* Day-tag is now a horizontal banner sitting above the day's content,
   not a column to the left. Removes the prior sticky overlap that was
   making day names appear "between" the meal grids. */
.pb-day-tag {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 2.4vw, 28px);
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}
.pb-day-num {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em;
  color: var(--fg-mute);
  display: inline-flex; align-items: center; gap: 8px;
  transition: color 0.3s ease;
}
.pb-day-num::before {
  content: "";
  display: inline-block;
  width: 16px; height: 1px;
  background: var(--pb-accent, var(--rise));
  opacity: 0.4;
  transition: opacity 0.3s ease, width 0.3s ease;
}
.pb-day-row:hover .pb-day-num::before {
  opacity: 1;
  width: 24px;
}
.pb-day-name {
  font-family: var(--display);
  font-stretch: 85%; font-weight: 600;
  font-size: clamp(28px, 3.2vw, 48px);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--fg-soft);
  transition: color 0.3s ease;
}
.pb-day-label {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--bg);
  font-family: var(--serif); font-style: italic;
  font-size: 15px;
  color: var(--fg-soft);
  letter-spacing: -0.005em;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.pb-day-row:hover .pb-day-label {
  color: var(--fg);
  border-color: var(--pb-accent, var(--rise));
  background: color-mix(in oklab, var(--pb-accent, var(--rise)) 10%, var(--bg));
}

/* The meal grid + the totals + the practice cards now live in a single
   column flow beneath the day banner, no more 200px-wide left column. */
.pb-fuel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.pb-fuel-cell {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: clamp(24px, 2.5vw, 36px);
  display: flex; flex-direction: column;
  gap: 16px;
  min-width: 0;
  position: relative;
}
.pb-fuel-cell:last-child { border-right: 1px solid var(--hairline); }
.pb-fuel-cell:nth-child(2n) { border-right: 1px solid var(--hairline); }
.pb-fuel-cell:hover .pb-fuel-label {
  color: var(--fg);
}
.pb-fuel-label {
  font-family: var(--mono);
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--pb-accent);
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 500;
}
.pb-fuel-label svg { flex-shrink: 0; width: 16px; height: 16px; }
.pb-fuel-desc {
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-soft);
  text-wrap: pretty;
  overflow-wrap: anywhere;
  word-break: break-word;
  margin-bottom: 4px;
}
.pb-fuel-portion {
  font-family: var(--mono);
  font-size: 15px; letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--fg);
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  margin-top: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-variant-numeric: stacked-fractions;
}
.pb-fuel-macros {
  display: flex; flex-wrap: wrap;
  gap: 16px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--hairline);
}
.pb-fuel-macros span {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--fg-mute);
}
.pb-fuel-macros strong {
  font-family: var(--display);
  font-stretch: 90%; font-weight: 600;
  font-style: normal;
  font-size: 19px; letter-spacing: -0.02em;
  color: var(--fg);
}
@media (max-width: 720px) {
  .pb-fuel-grid { grid-template-columns: 1fr; border-left: 0; }
  .pb-fuel-cell { border-right: 0; }
}
.pb-fuel-cell:last-child { border-right: 0; }
.pb-fuel-cell:hover .pb-fuel-label {
  color: var(--fg);
}

.pb-prac-grid {
  padding: clamp(28px, 3vw, 44px) clamp(28px, 3vw, 40px);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: rgba(255,255,255,0.015);
  display: flex; flex-direction: column;
  gap: 18px;
}
.pb-prac-title {
  font-family: var(--display);
  font-stretch: 92%; font-weight: 500;
  font-size: clamp(26px, 2.6vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--fg);
  text-wrap: balance;
}
.pb-prac-body {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 64ch;
  text-wrap: pretty;
}

.pb-fuel-totals {
  margin-top: 0;
  padding: 16px clamp(16px, 2vw, 24px);
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
}

@media (max-width: 720px) {
  .pb-fuel-grid { grid-template-columns: 1fr; border-left: 0; }
  .pb-fuel-cell { border-right: 0; }
  .pb-fuel-totals { grid-template-columns: 1fr; }
  .pb-fuel-totals-row { justify-content: flex-start; }
  .pb-day-name { font-size: clamp(28px, 6vw, 40px); }
}

/* FUEL cells — icon + label */
.pb-fuel-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pb-accent);
}
.pb-fuel-label svg {
  flex-shrink: 0;
}
.pb-fuel-cell {
  position: relative;
}

/* MOVE / HEAL / SYNC body — hover lifts the title */
.pb-prac-title {
  transition: color 0.3s ease;
}
.pb-day-row:hover .pb-prac-title {
  color: var(--pb-accent, var(--rise));
}
.pb-day-row:hover .pb-prac-body {
  color: var(--fg);
}


/* ============================================================
   PLAYBOOK FUEL — portion toggle, per-meal macros, day totals
   ============================================================ */

/* Module head — now a two-col layout when the portion toggle appears */
.pb-module-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.pb-module-head > div:first-child { min-width: 0; }
@media (max-width: 860px) {
  .pb-module-head { grid-template-columns: 1fr; }
  .pb-portion-control { width: 100%; }
}

/* Portion toggle */
.pb-portion-control {
  display: flex; flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  /* Lock the width so the hint copy can change between options without
     causing the parent grid (which is `1fr auto`) to reshape. */
  width: 280px;
  flex-shrink: 0;
}
.pb-portion-control-label {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
}
.pb-portion-control-hint {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.12em;
  color: var(--fg-mute);
  /* Reserve two lines so swapping between hints doesn't shift the
     vertical layout. Wraps naturally if a hint is longer. */
  min-height: 2.6em;
  line-height: 1.3;
  white-space: normal;
}
.pb-portion-toggle {
  display: inline-flex;
  flex-wrap: nowrap;
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 4px;
}
.pb-portion-toggle-btn {
  background: transparent; border: 0;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 13px; font-weight: 500;
  color: var(--fg-mute);
  text-transform: capitalize;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
  min-width: 86px;
  padding-left: 14px; padding-right: 14px;
}
.pb-portion-toggle-btn:hover { color: var(--fg); }
.pb-portion-toggle-btn.active {
  background: var(--fg);
  color: var(--ink);
}

/* Per-meal description / portion / macros */
.pb-fuel-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-soft);
  text-wrap: pretty;
  overflow-wrap: anywhere;
  word-break: break-word;
  margin-bottom: 4px;
}
.pb-fuel-portion {
  font-family: var(--mono);
  font-size: 14px; letter-spacing: 0.04em;
  line-height: 1.65;
  color: var(--fg);
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  margin-top: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-variant-numeric: stacked-fractions;
}
.pb-fuel-macros {
  display: flex; flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--hairline);
}
.pb-fuel-macros span {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--fg-mute);
}
.pb-fuel-macros strong {
  font-family: var(--display);
  font-stretch: 90%; font-weight: 600;
  font-style: normal;
  font-size: 16px; letter-spacing: -0.02em;
  color: var(--fg);
}

/* Day totals strip — sits below the 4-column meal row, full-width across the day-row grid */
.pb-fuel-totals {
  margin-top: 18px;
  padding: 16px clamp(16px, 2vw, 24px);
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
  /* Span both grid columns of the parent .pb-day-row so the totals run
     the full section width instead of just the right column. */
  grid-column: 1 / -1;
}
.pb-fuel-totals-label {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pb-accent);
}
.pb-fuel-totals-row {
  display: flex; flex-wrap: wrap;
  gap: clamp(16px, 2.5vw, 32px);
  justify-content: flex-end;
}
.pb-fuel-totals-row > span {
  display: inline-flex; align-items: baseline; gap: 8px;
}
.pb-fuel-totals-row strong {
  font-family: var(--display);
  font-stretch: 85%; font-weight: 700;
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: -0.025em;
  color: var(--fg);
}
.pb-fuel-totals-unit {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
}
@media (max-width: 720px) {
  .pb-fuel-totals { grid-template-columns: 1fr; }
  .pb-fuel-totals-row { justify-content: flex-start; }
}


/* ============================================================
   PRODUCT CARD V2 — media carousel + refined title typography
   ============================================================ */
.product-card.v2 {
  padding: clamp(20px, 2vw, 32px);
  display: flex; flex-direction: column;
  gap: 18px;
  min-height: 520px;
}

/* Media area — replaces .product-card-can; holds the carousel */
.product-card-media {
  position: relative;
  aspect-ratio: 1 / 1.05;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.04) 0%, transparent 65%);
  border-radius: 8px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: background 0.5s ease;
}
.product-card-media.bg-rise  { background: radial-gradient(ellipse at center, rgba(255,204,65,0.10) 0%, transparent 65%); }
.product-card-media.bg-drift { background: radial-gradient(ellipse at center, rgba(66,100,158,0.14) 0%, transparent 65%); }
.product-card:hover .product-card-media { background: transparent; }

.product-card-media-stage {
  flex: 1;
  display: grid; place-items: center;
  padding: clamp(16px, 2vw, 28px);
  position: relative;
}
/* The base rule above uses display:grid, which overrides the browser's
   native [hidden] { display: none } default via specificity. Without
   this rule the 3 non-active tab stages (4pack/nutrition/ingredients
   when "can" is active, etc.) render as empty grid cells ~365×304px
   below the visible can. The .product-card-tabs JS handler toggles
   the .hidden attribute on each stage — this rule lets that toggle
   actually collapse the stage to zero height. */
.product-card-media-stage[hidden] { display: none; }
.product-card-media-stage[data-view="can"] .can-wrap,
.product-card-media-stage[data-view="4pack"] { animation: pc-fade-in 0.45s cubic-bezier(0.2,0.7,0.2,1); }
.product-card-media-stage[data-view="nutrition"] .product-card-nutrition,
.product-card-media-stage[data-view="ingredients"] .product-card-ingredients {
  animation: pc-fade-in 0.45s cubic-bezier(0.2,0.7,0.2,1);
}
@keyframes pc-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tab strip */
.product-card-tabs {
  display: flex;
  gap: 0;
  padding: 6px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  margin: 0 16px 16px;
  backdrop-filter: blur(8px);
}
.product-card-tab {
  flex: 1;
  padding: 6px 10px;
  border: 0; background: transparent;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-mute);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.product-card-tab:hover { color: var(--fg); }
.product-card-tab.active {
  background: var(--fg);
  color: var(--ink);
}

/* Nutrition view */
.product-card-nutrition,
.product-card-ingredients {
  width: 100%;
  display: flex; flex-direction: column; gap: 12px;
  padding: 8px 0;
}
.product-card-nutrition-eyebrow {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
  text-align: center;
}
.product-card-nutrition-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.product-card-nutrition-cell {
  padding: 14px 12px;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(0,0,0,0.15);
}
.product-card-nutrition-label {
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-mute);
}
.product-card-nutrition-value {
  font-family: var(--display);
  font-stretch: 88%; font-weight: 700;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -0.025em;
  color: var(--fg);
  line-height: 1;
  display: inline-flex; align-items: baseline; gap: 6px;
}
.product-card-nutrition-sub {
  font-family: var(--sans);
  font-stretch: 100%; font-weight: 400;
  font-size: 11px; letter-spacing: 0;
  color: var(--fg-mute);
  text-transform: lowercase;
}
.product-card-nutrition-foot {
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
  text-align: center;
  padding-top: 4px;
}

/* Ingredients view */
.product-card-ingredients-list {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(16px, 2vw, 28px);
  row-gap: 0;
  border-top: 1px solid var(--hairline);
}
.product-card-ingredients-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--hairline);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--fg);
}
@media (max-width: 720px) {
  .product-card-ingredients-list { grid-template-columns: 1fr; column-gap: 0; }
}
.product-card-ingredient-num {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em;
  color: var(--fg-mute);
}

/* 4-pack carton illustration */
.four-pack-art {
  position: relative;
  display: grid; place-items: center;
  width: 100%; height: 100%;
}
.four-pack-carton {
  position: relative;
  width: 70%;
  aspect-ratio: 1 / 1.15;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--flavor-color, #888) 18%, var(--bg-2)) 0%,
      color-mix(in oklab, var(--flavor-color, #888) 6%, var(--bg-2)) 100%);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow:
    0 30px 50px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}
.four-pack-carton::before {
  /* the cardboard "fold" line */
  content: ""; position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: rgba(0,0,0,0.18);
}
.four-pack-carton-tag {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.18em;
  color: var(--flavor-color, var(--fg-mute));
  font-weight: 500;
}
.four-pack-carton-name {
  font-family: var(--display);
  font-stretch: 88%; font-weight: 700;
  font-size: clamp(14px, 1.3vw, 18px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--fg);
  text-wrap: balance;
  margin-top: auto;
}
.four-pack-carton-count {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em;
  color: var(--fg-soft);
  margin-top: 4px;
}
.four-pack-carton-wave {
  position: absolute;
  top: 18px; right: 14px;
  width: 28px; height: 8px;
  color: var(--flavor-color, var(--fg-mute));
  opacity: 0.7;
}
.four-pack-cans {
  position: absolute;
  bottom: -12px;
  display: flex;
  align-items: flex-end;
}
.four-pack-cans .can-wrap {
  width: 56px;
}
.four-pack-cans .can-wrap:first-child {
  transform: rotate(-6deg) translateY(0);
  margin-right: -18px;
  z-index: 2;
}
.four-pack-cans .can-wrap:last-child {
  transform: rotate(4deg) translateY(0);
  z-index: 1;
}

/* ============================================================
   Refined title typography — 3-line mix of display + serif
   ============================================================ */
.product-card-title-v2 {
  display: flex; flex-direction: column;
  gap: 2px;
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.0;
  color: var(--fg);
  text-wrap: balance;
  margin: 0;
}
.product-card-title-word.v2 {
  display: block;
  line-height: 1.0;
}
.product-card-title-word.v2.line-1 {
  font-family: var(--display);
  font-stretch: 85%;
  font-weight: 600;
  font-size: clamp(22px, 2.0vw, 30px);
  letter-spacing: -0.025em;
}
.product-card-title-word.v2.line-2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: -0.015em;
  padding-left: 0.6em;
  color: var(--fg);
}
.product-card-title-word.v2.line-3 {
  font-family: var(--display);
  font-stretch: 95%;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -0.02em;
  padding-left: 1.2em;
  color: var(--fg-soft);
}

.product-card.v2 .product-card-moment {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.35;
}

.product-card.v2 .product-card-info {
  align-items: stretch;
  min-height: 0;
  position: relative;
}
.product-card.v2 .product-card-price {
  font-size: 38px;
  letter-spacing: -0.03em;
  line-height: 1;
  align-self: flex-start;
  /* Center vertically against the 3-line title block (not the moment line beneath it).
     Title is 3 lines of clamp(20px, 2vw, 28px) with line-height 1 — approx 60–84px tall.
     Pull price down to ~½ that height, minus its own ½ height, from the top. */
  margin-top: calc(((clamp(20px, 2vw, 28px) * 3) - 38px) / 2);
}

@media (max-width: 720px) {
  .product-card-title-word.v2.line-2 { padding-left: 0; }
  .product-card-title-word.v2.line-3 { padding-left: 0; }
}


/* ============================================================
   FUTURE TREE — locked detail blocks
   ============================================================ */
/* The detail panel on the right now blurs only the prose of locked
   stages, leaving the cans + the threshold number on the left clear. */
.future-block.status-locked {
  position: relative;
  overflow: hidden;
}
.future-block.status-locked .future-block-head,
.future-block.status-locked .future-block-title,
.future-block.status-locked .future-block-desc {
  filter: blur(11px);
  user-select: none;
  pointer-events: none;
}
.future-block.status-locked::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.65) 100%);
  pointer-events: none;
}
.future-block-lockmask {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(10,10,10,0.85);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(10px);
  color: var(--fg-soft);
  z-index: 2;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}
.future-block-lockmask svg {
  color: var(--fg-mute);
  flex-shrink: 0;
}

/* Loading block — lighter teased state. Sub tag stays clear (the hint),
   title + desc get a soft blur, and we show a "Loading…" badge. */
.future-block.status-loading {
  position: relative;
  overflow: hidden;
}
.future-block.status-loading .future-block-title,
.future-block.status-loading .future-block-desc {
  filter: blur(3px);
  user-select: none;
  pointer-events: none;
  opacity: 0.7;
}
.future-block.status-loading::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.10) 0%, rgba(10,10,10,0.35) 100%);
  pointer-events: none;
}
.future-block-loadingmask {
  position: absolute; bottom: 18px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(10,10,10,0.78);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(10px);
  color: var(--fg-soft);
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  white-space: nowrap;
}
.future-block-loadingmask svg {
  color: var(--fg-soft);
  flex-shrink: 0;
  animation: future-loading-hourglass 2.4s ease-in-out infinite;
}
@keyframes future-loading-hourglass {
  0%, 45%, 100% { transform: rotate(0deg); }
  50%, 95%      { transform: rotate(180deg); }
}


/* ============================================================
   JOURNAL — newspaper-style mixed grid
   ============================================================ */
/* 3-column grid where rows cycle through three visual rhythms.
   Every card gets borders on all four sides; we suppress the
   shared edges so duplicate lines don't double up. */
.journal-newsprint {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.journal-newsprint > .journal-card {
  border-right: 1px solid var(--hairline) !important;
  border-bottom: 1px solid var(--hairline);
}
.journal-newsprint > .journal-card:nth-child(3n) {
  border-right: 0 !important;
}
.journal-newsprint > .journal-card .journal-title {
  font-size: clamp(20px, 1.8vw, 28px);
}
.journal-news-tall .journal-title {
  /* Tall cards earn a beefier headline */
  font-size: clamp(24px, 2.2vw, 36px) !important;
  line-height: 1.05;
}
.journal-news-short .journal-title {
  /* Short cards stay tighter */
  font-size: clamp(17px, 1.4vw, 22px) !important;
  line-height: 1.15;
}
.journal-news-short .journal-excerpt {
  font-size: 13px;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.journal-news-tall .journal-excerpt {
  font-size: 16px;
}

/* Add slight padding variation to reinforce the rhythm */
.journal-newsprint > .journal-news-tall { padding: clamp(32px, 3.5vw, 56px); }
.journal-newsprint > .journal-news-short { padding: clamp(20px, 2vw, 32px); }

@media (max-width: 900px) {
  .journal-newsprint { grid-template-columns: repeat(2, 1fr); }
  .journal-newsprint > .journal-card { border-right: 1px solid var(--hairline); }
  .journal-newsprint > .journal-card:nth-child(3n) { border-right: 1px solid var(--hairline); }
  .journal-newsprint > .journal-card:nth-child(2n) { border-right: 0; }
}
@media (max-width: 600px) {
  .journal-newsprint { grid-template-columns: 1fr; }
  .journal-newsprint > .journal-card { border-right: 0; }
}


/* ============================================================
   ROYALTY CALCULATOR — info tooltips + next-tier pills
   ============================================================ */
.royalty-row {
  position: relative;
}
.royalty-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  margin-left: 0;
  color: var(--fg-mute);
  cursor: help;
  opacity: 0;
  transition: opacity 0.25s ease, color 0.25s ease;
  vertical-align: middle;
  position: relative;
  outline: none;
  justify-self: center;
}
.royalty-row:hover .royalty-info,
.royalty-info:focus { opacity: 1; }
.royalty-info:hover { color: var(--rise); }
.royalty-info svg { display: block; }

.royalty-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  z-index: 50;
  min-width: 280px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow:
    0 24px 48px rgba(0,0,0,0.5),
    0 4px 12px rgba(0,0,0,0.3);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  display: flex; flex-direction: column; gap: 8px;
  text-align: left;
  white-space: normal;
}
.royalty-info:hover .royalty-tip,
.royalty-info:focus .royalty-tip {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.royalty-tip-title {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-mute);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}
.royalty-tip-line {
  display: flex; justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--fg-soft);
}
.royalty-tip-line strong {
  font-family: var(--display);
  font-stretch: 90%; font-weight: 600;
  color: var(--fg);
  font-size: 13px;
  letter-spacing: -0.01em;
}
.royalty-tip-rule {
  height: 1px;
  background: var(--hairline);
  margin: 2px 0;
}
.royalty-tip-line-total {
  font-weight: 500;
}
.royalty-tip-line-total strong {
  color: var(--rise);
  font-size: 15px;
}
.royalty-tip-meta {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.12em;
  color: var(--fg-mute);
  margin-top: 4px;
  line-height: 1.5;
}

/* Next-tier pills (replaces the inline "Name · $X bonus" string) */
.royalty-next-tier-pills {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--bg-2);
  padding: 4px;
}
.royalty-next-pill {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.royalty-next-pill-name {
  background: var(--fg);
  color: var(--ink);
  font-weight: 500;
}
.royalty-next-pill-bonus {
  color: var(--rise);
  padding: 6px 14px;
}


/* ============================================================
   PLANET SECTION — header redesign
   ============================================================ */
.planet-header {
  margin-bottom: clamp(40px, 5vw, 64px);
  max-width: 60ch;
}
.planet-label-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  border: 1px solid rgba(141,224,168,0.32);
  background: rgba(141,224,168,0.06);
  border-radius: 999px;
  margin-bottom: 24px;
}
.planet-label-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #8DE0A8;
  box-shadow: 0 0 0 3px rgba(141,224,168,0.18);
}
.planet-label {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #8DE0A8;
  font-weight: 500;
  white-space: nowrap;
}
.planet-headline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 80px);
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--fg);
  text-wrap: balance;
  max-width: 28ch;
}
.planet-headline em {
  font-family: var(--display); font-stretch: 85%; font-style: normal; font-weight: 600;
  color: #8DE0A8;
}
.planet-tagline {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--fg-soft);
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  max-width: 36ch;
}
@media (max-width: 720px) {
  .planet-header { max-width: 100%; }
}


/* ============================================================
   ROYALTY CALCULATOR — full-width footer band
   ============================================================ */
.royalty-calc-footer {
  border-top: 1px solid var(--hairline);
  padding: clamp(24px, 3vw, 36px) clamp(36px, 4vw, 64px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  flex-wrap: wrap;
  background: linear-gradient(170deg, rgba(255,204,65,0.03) 0%, transparent 100%);
}
.royalty-calc-footer .royalty-next-tier {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.royalty-calc-disclaimer {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--fg-mute);
  line-height: 1.6;
  max-width: 62ch;
  margin: 0;
  text-align: right;
}
@media (max-width: 720px) {
  .royalty-calc-footer { flex-direction: column; align-items: flex-start; }
  .royalty-calc-disclaimer { text-align: left; }
}


/* HEAL grid — three columns (stretch / sleep / recover) on a card */
.pb-heal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: rgba(255,255,255,0.015);
  overflow: hidden;
}
.pb-heal-cell {
  padding: clamp(20px, 2.2vw, 32px);
  display: flex; flex-direction: column; gap: 12px;
  border-right: 1px solid var(--hairline);
  min-width: 0;
}
.pb-heal-cell:last-child { border-right: 0; }
.pb-heal-cell .pb-prac-title {
  font-size: clamp(20px, 2vw, 28px);
}
.pb-heal-cell .pb-prac-body {
  font-size: clamp(14px, 1.1vw, 16px);
}
@media (max-width: 720px) {
  .pb-heal-grid { grid-template-columns: 1fr; }
  .pb-heal-cell { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .pb-heal-cell:last-child { border-bottom: 0; }
}


/* ============================================================
   NAV: ABOUT DROPDOWN
   ============================================================ */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  outline: none;
}
.nav-dropdown-toggle {
  font-size: 20px; font-weight: 500;
  letter-spacing: -0.012em;
  text-transform: lowercase;
  color: var(--fg-soft);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: color 0.2s ease;
}
.nav-dropdown-toggle::after {
  content: ""; position: absolute;
  bottom: -2px; left: 0; right: 0; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s ease;
}
.nav-dropdown.is-open .nav-dropdown-toggle,
.nav-dropdown:focus-within .nav-dropdown-toggle,
.nav-dropdown-toggle.active { color: var(--fg); }
.nav-dropdown.is-open .nav-dropdown-toggle::after,
.nav-dropdown:focus-within .nav-dropdown-toggle::after,
.nav-dropdown-toggle.active::after { transform: scaleX(1); }

.nav-dropdown-bridge {
  /* Bridge retained as defense-in-depth; primary close behavior is now
     JS-controlled in circadia-chrome.js (200ms delay tolerates mouse
     traversal gaps). Two prior pure-CSS attempts to size this bridge
     correctly didn't hold up in production — switching to JS sidesteps
     whatever rendering edge case was breaking the hover continuity.
     Geometry below is from the second attempt (commit 4a0bce8); kept
     because removing the element entirely would require markup edits. */
  position: absolute;
  top: calc(100% - 8px); left: -16px; right: -16px;
  height: 32px;
  z-index: 109;
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 280px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 8px;
  display: flex; flex-direction: column;
  gap: 2px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 110;
  box-shadow:
    0 24px 48px rgba(0,0,0,0.45),
    0 4px 12px rgba(0,0,0,0.3);
}
.nav-dropdown.is-open .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s ease;
}
.nav-dropdown-item:hover { background: rgba(255,255,255,0.04); }
.nav-dropdown-item.active { background: rgba(255,255,255,0.06); }
.nav-dropdown-item-label {
  font-size: 17px; font-weight: 500;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.nav-dropdown-item-desc {
  font-size: 12.5px;
  color: var(--fg-soft);
  line-height: 1.4;
}

/* ============================================================
   SUSTAINABILITY PAGE
   ============================================================ */
.page-hero.sustainability-hero {
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}

.planet-stat.planet-stat-highlight {
  border-color: rgba(141,224,168,0.4);
  background: linear-gradient(170deg, rgba(141,224,168,0.07) 0%, transparent 100%);
}
.planet-stat.planet-stat-highlight .planet-stat-num { color: #8DE0A8; }

/* DONATION TRACKER */
.donation-tracker {
  padding: clamp(72px, 9vw, 140px) 0;
  background: var(--bg);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  position: relative;
  isolation: isolate;
}
.donation-tracker::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(141,224,168,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 10% 80%, rgba(141,224,168,0.06) 0%, transparent 65%);
  z-index: 0; pointer-events: none;
}
.donation-tracker > .container { position: relative; z-index: 2; }

.donation-tracker-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
  margin-bottom: 48px;
}
.donation-tracker-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #8DE0A8;
  white-space: nowrap;
}

.donation-tracker-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--hairline);
  background: var(--bg-2);
  margin-bottom: 48px;
}
.donation-tracker-total {
  padding: clamp(32px, 4vw, 56px);
  border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column;
  justify-content: center;
}
.donation-tracker-eyebrow {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 16px;
}
.donation-tracker-num {
  font-family: var(--display);
  font-stretch: 80%; font-weight: 600;
  font-size: clamp(64px, 8vw, 128px);
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: #8DE0A8;
}
.donation-tracker-spark {
  padding: clamp(32px, 4vw, 56px);
  display: flex; flex-direction: column;
  gap: 24px;
}
.donation-tracker-spark .caption {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
}
.donation-tracker-spark-bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: end;
  height: 180px;
  position: relative;
}
.donation-tracker-bar-col {
  display: flex; flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 8px;
}
.donation-tracker-bar-amount {
  font-family: var(--display); font-stretch: 90%; font-weight: 600;
  font-size: 14px; letter-spacing: -0.02em;
  color: var(--fg);
}
.donation-tracker-bar {
  width: 100%;
  background: linear-gradient(180deg, #8DE0A8 0%, rgba(141,224,168,0.4) 100%);
  border-radius: 4px 4px 0 0;
  min-height: 6px;
}
.donation-tracker-bar-label {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.12em;
  color: var(--fg-mute);
}

/* LEDGER TABLE */
.donation-tracker-ledger {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 64px;
}
.donation-tracker-ledger-head,
.donation-tracker-ledger-row {
  display: grid;
  grid-template-columns: 140px 180px 1fr 160px;
  gap: 24px;
  padding: 20px 0;
  align-items: baseline;
}
.donation-tracker-ledger-head {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-mute);
  border-bottom: 1px solid var(--hairline);
  padding: 14px 0;
}
.donation-tracker-ledger-row {
  border-bottom: 1px solid var(--hairline);
}
.donation-tracker-ledger-row:last-child { border-bottom: 0; }
.donation-tracker-q {
  font-family: var(--display); font-stretch: 85%; font-weight: 600;
  font-size: 18px; letter-spacing: -0.01em;
  color: var(--fg);
}
.donation-tracker-date {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--fg-soft);
}
.donation-tracker-recipient {
  font-size: 15px;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.donation-tracker-amt {
  font-family: var(--display); font-stretch: 90%; font-weight: 600;
  font-size: 22px; letter-spacing: -0.02em;
  text-align: right;
  color: #8DE0A8;
}

/* PARTNERS */
.donation-tracker-partners { margin-bottom: 32px; }
.donation-tracker-partner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.donation-tracker-partner {
  padding: clamp(24px, 2.5vw, 36px);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 8px;
}
.donation-tracker-partner-mark {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #8DE0A8 0%, rgba(141,224,168,0.4) 60%, transparent 100%);
  margin-bottom: 12px;
}
.donation-tracker-partner-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.donation-tracker-partner-focus {
  font-size: 13px;
  color: var(--fg-soft);
  line-height: 1.5;
}

.donation-tracker-foot {
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  text-align: center;
}
.donation-tracker-foot .caption { color: var(--fg-soft); }

@media (max-width: 900px) {
  .donation-tracker-head { grid-template-columns: 1fr; }
  .donation-tracker-hero { grid-template-columns: 1fr; }
  .donation-tracker-total { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .donation-tracker-ledger-head,
  .donation-tracker-ledger-row { grid-template-columns: 80px 1fr 100px; gap: 12px; }
  .donation-tracker-ledger-head span:nth-child(2),
  .donation-tracker-ledger-row .donation-tracker-date { display: none; }
  .donation-tracker-partner-grid { grid-template-columns: 1fr; }
}


/* Supporting "clean label" detail row beneath science-doses — smaller scale */
.science-doses-sub {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
  margin-top: -1px;
}
.science-dose-sub {
  display: flex; align-items: baseline; gap: 12px;
  padding: clamp(16px, 1.8vw, 22px) clamp(16px, 1.6vw, 24px);
  border-right: 1px solid var(--hairline);
  min-width: 0;
}
.science-dose-sub:last-child { border-right: 0; }
.science-dose-sub-value {
  font-family: var(--display);
  font-stretch: 85%; font-weight: 600;
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: -0.025em;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.5s ease;
}
.science-dose-sub-mark {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.5s ease;
}
.science-dose-sub-label {
  font-size: 13.5px;
  color: var(--fg-soft);
  letter-spacing: -0.005em;
  line-height: 1.35;
  min-width: 0;
}

@media (max-width: 960px) {
  .science-doses-sub { grid-template-columns: repeat(2, 1fr); }
  .science-dose-sub { border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
  .science-dose-sub:nth-child(2n) { border-right: 0; }
  .science-dose-sub:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 560px) {
  .science-doses-sub { grid-template-columns: 1fr; }
  .science-dose-sub { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .science-dose-sub:last-child { border-bottom: 0; }
}


/* ============================================================
   BRAND — inline lowercase wordmark for "circadia" in body text.
   Matches the logo's typographic character.
   ============================================================ */
.brand {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 95%;
  letter-spacing: -0.055em;
  text-transform: lowercase;
  font-style: normal;
}

/* When .brand sits inside an uppercase mono caption, the lowercase x-height
   reads visually smaller than the surrounding caps. Bump font-size so the
   cap-height of "circadia" optically matches its neighbours. */
.caption .brand,
.eyebrow .brand {
  font-size: 1.35em;
  line-height: 1;
  letter-spacing: -0.04em;
  vertical-align: baseline;
}


/* ============================================================
   FUTURE NAV: prev/next text alignment
   ============================================================ */
.future-detail-nav-text { align-items: flex-start; }
.future-detail-nav-btn.align-end .future-detail-nav-text { align-items: flex-end; }

/* ============================================================
   FUTURE: deeply locked stages (>350k) — heavy blur on cans + nav
   ============================================================ */
.future-cans-stage.is-deep-locked .future-cans-art,
.future-cans-stage.is-deep-locked .future-cans-art-item {
  filter: blur(18px) saturate(0.6);
  opacity: 0.4;
}
.future-cans-stage.is-deep-locked .future-cans-lock {
  opacity: 1;
  filter: none;
}
.future-detail-nav-name.is-deep-locked {
  filter: blur(6px);
  opacity: 0.55;
  letter-spacing: 0.18em;
}
.future-step-tags.is-deep-locked {
  filter: blur(5px);
  opacity: 0.55;
  letter-spacing: 0.18em;
}
.future-step-tags.is-loading {
  filter: blur(2px);
  opacity: 0.75;
  letter-spacing: 0.18em;
  animation: future-loading-glimmer 2.4s ease-in-out infinite;
}
.future-detail-nav-name.is-loading {
  filter: blur(3px);
  opacity: 0.7;
  letter-spacing: 0.18em;
  animation: future-loading-glimmer 2.4s ease-in-out infinite;
}
@keyframes future-loading-glimmer {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 0.95; }
}

/* Loading state — the stage AFTER current. A teased preview with a "Loading…" pulse */
.future-cans-stage.is-loading .future-cans-art,
.future-cans-stage.is-loading .future-cans-art-item {
  filter: blur(3px) saturate(0.75);
  opacity: 0.6;
}
.future-cans-loading {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  z-index: 2;
  pointer-events: none;
}
.future-cans-loading-hourglass {
  width: 36px; height: 36px;
  color: var(--fg-soft);
  opacity: 0.85;
  animation: future-cans-loading-flip 2.4s cubic-bezier(0.6,0,0.4,1) infinite;
  transform-origin: 50% 50%;
}
.future-cans-loading-label {
  text-align: center;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-soft);
}
@keyframes future-cans-loading-flip {
  0%, 45%       { transform: rotate(0deg);   opacity: 0.85; }
  50%, 95%      { transform: rotate(180deg); opacity: 0.85; }
  47%, 48%      { opacity: 0.5; }
  97%, 98%      { opacity: 0.5; }
  100%          { transform: rotate(360deg); opacity: 0.85; }
}

/* ============================================================
   DONATION TRACKER: pre-launch empty state
   ============================================================ */
.donation-tracker-spark.donation-tracker-spark-empty {
  display: flex; flex-direction: column; gap: 16px;
  justify-content: center;
}
.donation-tracker-empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding-top: 8px;
  color: var(--fg-mute);
}
.donation-tracker-empty svg {
  width: 140px; height: auto;
  color: #8DE0A8;
  opacity: 0.55;
}
.donation-tracker-empty-label {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-soft);
  max-width: 30ch;
  line-height: 1.5;
}


/* ============================================================
   INGREDIENT GALLERY — flippable cards on the science page
   ============================================================ */
.ingredient-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1180px) { .ingredient-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .ingredient-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .ingredient-grid { grid-template-columns: 1fr; } }

.ingredient-card {
  position: relative;
  aspect-ratio: 5 / 6;
  perspective: 1400px;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  outline: none;
  transition: transform 0.35s cubic-bezier(0.2,0.7,0.2,1), z-index 0s 0.35s;
  z-index: 1;
}
.ingredient-card:focus-visible { outline: 1px solid var(--fg-mute); outline-offset: 4px; }
.ingredient-card.is-flipped {
  transform: scale(1.06);
  z-index: 5;
  transition: transform 0.35s cubic-bezier(0.2,0.7,0.2,1), z-index 0s 0s;
}

.ingredient-card-inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.2,0.7,0.2,1);
}
.ingredient-card.is-flipped .ingredient-card-inner {
  transform: rotateY(180deg);
}

.ingredient-card-face {
  position: absolute; inset: 0;
  border: 1px solid var(--hairline);
  background: var(--bg-2);
  padding: clamp(20px, 1.8vw, 28px);
  display: flex; flex-direction: column; gap: 12px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 4px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ingredient-card:hover .ingredient-card-face { border-color: var(--fg-mute); background: var(--bg-3); }
.ingredient-card.is-flipped .ingredient-card-face {
  box-shadow: 0 28px 56px rgba(0,0,0,0.4), 0 6px 16px rgba(0,0,0,0.25);
  border-color: var(--fg-mute);
}

.ingredient-card-front { }
.ingredient-card-back  { transform: rotateY(180deg); background: var(--bg-3); }

.ingredient-card-head {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%;
}
.ingredient-card-num {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
}
.ingredient-card-role-tag {
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-soft);
  padding: 4px 8px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  white-space: nowrap;
}
.ingredient-card-icon {
  margin: clamp(6px, 0.8vw, 12px) 0;
  display: flex; align-items: center; justify-content: center;
  height: clamp(72px, 7vw, 104px);
  transition: color 0.4s ease;
}
.ingredient-card-icon svg { width: clamp(56px, 5.6vw, 84px); height: clamp(56px, 5.6vw, 84px); }

.ingredient-card-name {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.1; letter-spacing: -0.015em;
  color: var(--fg);
}

.ingredient-card-dose {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.ingredient-card-dose-value {
  font-family: var(--display);
  font-stretch: 85%; font-weight: 700;
  font-size: clamp(22px, 2vw, 30px);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--fg);
}
.ingredient-card-dose-dv {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.12em;
  color: var(--fg-mute);
}

.ingredient-card-flip-hint {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
  opacity: 0;
  transition: opacity 0.2s ease;
  position: absolute;
  bottom: clamp(20px, 1.8vw, 28px);
  right: clamp(20px, 1.8vw, 28px);
  pointer-events: none;
}
.ingredient-card-back .ingredient-card-flip-hint {
  /* Move the hint to the top of the back so it doesn't overlap the deep-dive link at the bottom. */
  bottom: auto;
  right: clamp(16px, 1.4vw, 22px);
  top: clamp(16px, 1.4vw, 22px);
  opacity: 0.55;
}
.ingredient-card.is-flipped .ingredient-card-back .ingredient-card-flip-hint { opacity: 0.7; }
.ingredient-card.is-flipped .ingredient-card-back .ingredient-card-head { padding-right: 120px; }
.ingredient-card:hover .ingredient-card-flip-hint { opacity: 0.8; }

/* BACK SIDE */
.ingredient-card-back .ingredient-card-name {
  margin-top: 8px;
}
.ingredient-card-desc {
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.55;
  color: var(--fg-soft);
  text-wrap: pretty;
}
.ingredient-card-articles {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.ingredient-card-articles .caption {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
}
.ingredient-card-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: clamp(13px, 1vw, 15px);
  color: var(--fg);
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--fg-mute);
  align-self: flex-start;
  padding-bottom: 2px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.ingredient-card-link:hover { border-color: var(--fg); }
.ingredient-card-link .arr { transition: transform 0.2s ease; }
.ingredient-card-link:hover .arr { transform: translateX(3px); }


/* ============================================================
   SCIENCE PAGE — fade target for the ingredient gallery, ties
   into the toggle's fade transition.
   ============================================================ */
.science-fade {
  opacity: 1;
  transition: opacity 0.24s ease;
}
.science-fade.is-fading { opacity: 0; }

/* Second science-teaser section (ingredients gallery) — share the
   wash/curve atmosphere with the toggle section above. */
.science-teaser + .section-sm.science-teaser {
  padding-top: 0;
}
.science-teaser.section-sm .science-teaser-bg {
  /* The gallery section inherits .science-teaser tone class but should
     just pick up the wash gradient — no curve needed. */
}


/* ============================================================
   FAQ — editorial reference: Aesop, Athletic Brewing, The Sill.
   Oversized typographic hero, sticky sidebar, generous whitespace.
   ============================================================ */
.faq-hero {
  position: relative;
  padding: clamp(28px, 4vw, 56px) 0 clamp(16px, 2vw, 28px);
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
  overflow: hidden;
}
.faq-hero .lifestyle-bands { opacity: 0.35; }
.faq-hero-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6.4vw, 92px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 16px 0 0;
  color: var(--fg);
  width: 100%;
}
.faq-hero-title span {
  display: inline;
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 86%;
  letter-spacing: -0.045em;
}
.faq-hero-title em {
  display: inline;
  font-style: italic;
  color: var(--fg);
  margin-left: 0.18em;
  letter-spacing: -0.025em;
}
.faq-hero-sub {
  margin-top: clamp(12px, 1.4vw, 20px);
  font-size: clamp(16px, 1.3vw, 20px);
  color: var(--fg-soft);
  max-width: 56ch;
  line-height: 1.4;
}

/* Search */
.faq-search-section {
  padding: clamp(16px, 2.4vw, 32px) 0 clamp(20px, 2.6vw, 36px);
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}
.faq-search {
  position: relative;
  width: 100%;
}
.faq-search-field {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.faq-search-field:focus-within {
  border-color: var(--fg);
  background: var(--bg);
}
.faq-search-icon { width: 20px; height: 20px; color: var(--fg-mute); flex-shrink: 0; }
.faq-search-field:focus-within .faq-search-icon { color: var(--fg); }
.faq-search-field input {
  flex: 1; min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--sans);
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--fg);
  letter-spacing: -0.005em;
}
.faq-search-field input::placeholder { color: var(--fg-mute); }
.faq-search-clear {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--fg-mute);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.faq-search-clear:hover { background: var(--hairline); color: var(--fg); }
.faq-search-clear svg { width: 14px; height: 14px; }

.faq-search-pop {
  position: absolute; top: calc(100% + 12px); left: 0; right: 0;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: 0 24px 56px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.25);
  padding: 18px;
  z-index: 30;
  animation: faq-pop-in 0.16s cubic-bezier(0.2,0.7,0.2,1);
}
@keyframes faq-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.faq-search-pop-head {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 12px;
  padding: 0 8px;
}
.faq-search-popular {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 4px 4px;
}
.faq-pop-chip {
  padding: 8px 14px;
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: lowercase;
  color: var(--fg-soft);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.faq-pop-chip:hover { background: var(--bg); border-color: var(--fg); color: var(--fg); }

.faq-search-empty {
  padding: 16px 8px;
  font-size: 14px;
  color: var(--fg-soft);
  line-height: 1.55;
}
.faq-search-empty a { color: var(--fg); border-bottom: 1px solid var(--hairline); }
.faq-search-results { list-style: none; padding: 0; margin: 0; max-height: 380px; overflow-y: auto; }
.faq-search-result {
  display: flex; flex-direction: column; gap: 4px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}
.faq-search-result:hover { background: var(--bg-2); }
.faq-search-result-cat {
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-mute);
}
.faq-search-result-q {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--fg);
  line-height: 1.3;
}

/* Body grid: sidebar + content */
.faq-body { padding: clamp(20px, 3vw, 40px) 0 clamp(36px, 5vw, 72px); }
.faq-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.faq-sidebar { position: relative; }
.faq-sidebar-inner {
  position: sticky;
  top: 120px;
}
.faq-sidebar ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.faq-sidebar-item {
  width: 100%;
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--hairline);
  font: inherit;
  color: var(--fg-mute);
  text-align: left;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.faq-sidebar-item:hover { color: var(--fg); }
.faq-sidebar-item.active {
  color: var(--fg);
  border-left-color: var(--rise);
  background: var(--bg-2);
}
.faq-sidebar-num {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em;
  color: var(--fg-mute);
  flex-shrink: 0;
}
.faq-sidebar-item.active .faq-sidebar-num { color: var(--rise); }
.faq-sidebar-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.25;
}

/* Content */
.faq-content {
  display: flex; flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--hairline);
}
.faq-category {
  scroll-margin-top: 120px;
  border-bottom: 1px solid var(--hairline);
}
.faq-cat-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 0;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition: padding 0.2s ease;
}
.faq-category.is-open .faq-cat-head { padding-bottom: 14px; }
.faq-cat-head-left { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.faq-cat-head-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.faq-cat-count {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
}
.faq-cat-toggle {
  position: relative;
  width: 22px; height: 22px;
  display: inline-block;
}
.faq-cat-toggle .faq-row-toggle-bar {
  position: absolute;
  background: var(--fg);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.faq-cat-toggle .faq-row-toggle-bar.h { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
.faq-cat-toggle .faq-row-toggle-bar.v { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
.faq-category.is-open .faq-cat-toggle .faq-row-toggle-bar.v { transform: translateX(-50%) scaleY(0); opacity: 0; }
.faq-cat-num {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em;
  color: var(--fg-mute);
}
.faq-cat-title {
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--fg);
  margin: 0;
}
.faq-cat-title em { color: var(--fg); }

.faq-list { list-style: none; padding: 0 0 12px; margin: 0; }
.faq-row { border-bottom: 1px solid var(--hairline); }
.faq-row:last-child { border-bottom: 0; }
.faq-row-head {
  width: 100%;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 14px 0;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.faq-row-q {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--fg);
  display: inline-flex; align-items: baseline; gap: 14px;
  flex-wrap: wrap;
}
.faq-row.open .faq-row-q { color: var(--fg); }
.faq-row:hover .faq-row-q { color: var(--fg); }
.faq-row-toggle {
  position: relative;
  width: 22px; height: 22px;
  flex-shrink: 0;
  margin-top: 6px;
}
.faq-row-toggle-bar {
  position: absolute; top: 50%; left: 50%;
  background: var(--fg-soft);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.18s ease;
}
.faq-row-toggle-bar.h { width: 22px; height: 1.5px; transform: translate(-50%, -50%); }
.faq-row-toggle-bar.v { width: 1.5px; height: 22px; transform: translate(-50%, -50%); }
.faq-row.open .faq-row-toggle-bar.v { transform: translate(-50%, -50%) rotate(90deg); }
.faq-row-head:hover .faq-row-toggle-bar { background: var(--fg); }
.faq-row-body {
  padding: 0 0 32px;
  max-width: 92ch;
  padding-right: clamp(0px, 4vw, 56px);
  animation: faq-row-in 0.22s cubic-bezier(0.2,0.7,0.2,1);
}
@keyframes faq-row-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.faq-row-body p {
  font-family: var(--sans);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.62;
  color: var(--fg-soft);
  text-wrap: pretty;
}
.faq-row-body p + p { margin-top: 12px; }
.faq-row-body a { color: var(--fg); border-bottom: 1px solid var(--hairline); }
.faq-row-body a:hover { border-bottom-color: var(--fg); }

/* Wave mark for personality answers */
.faq-wave-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 10px;
  color: var(--rise);
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.faq-wave-mark svg { width: 100%; height: 100%; }
.faq-row.has-wave .faq-row-head:hover .faq-wave-mark { opacity: 1; transform: translateX(2px); }
.faq-wave-mark.is-active { opacity: 1; color: var(--rise); }

/* FAQ foot */
.faq-foot {
  background: var(--bg-2);
  border-top: 1px solid var(--hairline);
  padding: clamp(36px, 5vw, 64px) 0;
}
.faq-foot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 5vw, 80px);
  align-items: start;
}
.faq-foot-title {
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-top: 12px;
  color: var(--fg);
}
.faq-foot-links ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.faq-foot-links li { border-bottom: 1px solid var(--hairline); }
.faq-foot-links li:first-child { border-top: 1px solid var(--hairline); }
.faq-foot-links a {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label arr" "desc arr";
  align-items: center;
  column-gap: 18px;
  padding: 20px 0;
  cursor: pointer;
  transition: transform 0.18s ease;
}
.faq-foot-link-label {
  grid-area: label;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--fg);
  line-height: 1.2;
}
.faq-foot-link-desc {
  grid-area: desc;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
  margin-top: 4px;
}
.faq-foot-link-arr {
  grid-area: arr;
  font-size: 18px;
  color: var(--fg-mute);
  transition: transform 0.18s ease, color 0.18s ease;
}
.faq-foot-links a:hover { transform: translateX(4px); }
.faq-foot-links a:hover .faq-foot-link-arr { color: var(--fg); transform: translateX(4px); }

@media (max-width: 860px) {
  .faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .faq-sidebar-inner { position: relative; top: 0; }
  .faq-sidebar ul { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .faq-sidebar-item { border-left: 0; border: 1px solid var(--hairline); border-radius: 999px; padding: 8px 14px; }
  .faq-sidebar-item.active { border-color: var(--rise); }
  .faq-foot-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CODE OF CONDUCT — editorial document
   ============================================================ */
.code-hero {
  position: relative;
  padding: clamp(80px, 12vw, 160px) 0 clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}
.code-hero .lifestyle-bands { opacity: 0.3; }
.code-hero-title {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 88%;
  font-size: clamp(56px, 11vw, 168px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 24px 0 0;
  color: var(--fg);
}
.code-hero-title em {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.code-hero-sub {
  margin-top: clamp(20px, 2vw, 32px);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2vw, 28px);
  color: var(--fg-soft);
  max-width: 36ch;
  line-height: 1.4;
}
.code-hero-intro {
  margin-top: clamp(40px, 5vw, 72px);
  max-width: 60ch;
}
.code-hero-intro p {
  font-family: var(--sans);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.62;
  color: var(--fg-soft);
}
.code-hero-intro p + p { margin-top: 16px; }
.code-hero-pull {
  font-family: var(--serif) !important;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px) !important;
  line-height: 1.35 !important;
  color: var(--fg) !important;
  margin-top: 28px !important;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  max-width: 28ch;
}

.code-wave {
  display: flex; justify-content: center;
  padding: clamp(40px, 6vw, 80px) 0;
  color: var(--fg-mute);
  opacity: 0.45;
}
.code-wave svg { width: 120px; height: 12px; }

.code-section {
  padding: clamp(32px, 5vw, 56px) 0;
}
.code-section-head {
  max-width: 56ch;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.code-num {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-mute);
  display: block;
  margin-bottom: 14px;
}
.code-section-title {
  font-size: clamp(40px, 5.5vw, 80px);
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--fg);
  margin: 0;
}
.code-section-title em { color: var(--fg); font-weight: 400; }
.code-section-lede {
  font-family: var(--sans);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
  color: var(--fg-soft);
  margin-top: 24px;
  max-width: 52ch;
}

/* Values — 4-column tile grid */
.code-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.code-value {
  padding: clamp(28px, 3vw, 40px);
  background: var(--bg);
  display: flex; flex-direction: column;
  position: relative;
}
.code-value-num {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em;
  color: var(--fg-mute);
}
.code-value-name {
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 16px 0 0;
  color: var(--fg);
}
.code-value-name em { color: var(--fg); }
.code-value-line {
  margin-top: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.4;
  color: var(--fg);
  max-width: 28ch;
}
.code-value-body {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-soft);
}

/* Tone — 2x2 grid */
.code-tone-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 64px;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.code-tone-name {
  font-family: var(--display);
  font-stretch: 88%;
  font-weight: 600;
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 12px;
}
.code-tone-body {
  font-family: var(--sans);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: 36ch;
}
.code-pullquote {
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg);
  padding: clamp(40px, 5vw, 64px) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  max-width: 24ch;
}
.code-pullquote em { color: var(--rise); }

/* People — long-form rows with serif headings */
.code-people {
  display: flex; flex-direction: column;
}
.code-people-row {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(28px, 4vw, 48px) 0;
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}
.code-people-row:first-child { border-top: 1px solid var(--hairline); }
.code-people-who {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -0.015em;
  color: var(--fg);
  margin: 0;
  line-height: 1.15;
}
.code-people-body {
  font-family: var(--sans);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.62;
  color: var(--fg-soft);
  max-width: 60ch;
}

/* Stands for — numbered articles */
.code-stands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.code-stand {
  padding: clamp(28px, 3vw, 40px);
  background: var(--bg);
}
.code-stand-num {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em;
  color: var(--fg-mute);
}
.code-stand-name {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 88%;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 14px 0 0;
}
.code-stand-body {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--fg-soft);
}

/* Asks — numbered list with bold leads */
.code-asks {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: ask;
}
.code-ask {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(24px, 3vw, 40px) 0;
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}
.code-ask:first-child { border-top: 1px solid var(--hairline); }
.code-ask-num {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--rise);
  padding-top: 6px;
}
.code-ask-lead {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 88%;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -0.015em;
  color: var(--fg);
}
.code-ask-body {
  margin-top: 12px;
  font-family: var(--sans);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.62;
  color: var(--fg-soft);
  max-width: 64ch;
}

/* Consequences + living document — narrative text */
.code-consequences,
.code-living {
  max-width: 60ch;
}
.code-consequences p,
.code-living p {
  font-family: var(--sans);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.62;
  color: var(--fg-soft);
}
.code-consequences p + p,
.code-living p + p { margin-top: 18px; }
.code-living a,
.code-consequences a { color: var(--fg); border-bottom: 1px solid var(--hairline); }

/* Foot */
.code-foot {
  background: var(--bg-2);
  border-top: 1px solid var(--hairline);
  padding: clamp(56px, 7vw, 96px) 0;
}
.code-foot-meta {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: clamp(40px, 5vw, 64px);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hairline);
}
.code-foot-date {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--fg);
  letter-spacing: 0.06em;
}
.code-foot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 5vw, 80px);
  align-items: start;
}
.code-foot-title {
  font-size: clamp(32px, 4vw, 52px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--fg);
}
.code-foot-links { list-style: none; padding: 0; margin: 0; }
.code-foot-links li { border-bottom: 1px solid var(--hairline); }
.code-foot-links li:first-child { border-top: 1px solid var(--hairline); }
.code-foot-links a {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label arr" "desc arr";
  align-items: center;
  column-gap: 18px;
  padding: 20px 0;
  cursor: pointer;
  transition: transform 0.18s ease;
}
.code-foot-link-label {
  grid-area: label;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--fg);
}
.code-foot-link-desc {
  grid-area: desc;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
  margin-top: 4px;
}
.code-foot-link-arr {
  grid-area: arr;
  font-size: 18px;
  color: var(--fg-mute);
  transition: transform 0.18s ease, color 0.18s ease;
}
.code-foot-links a:hover { transform: translateX(4px); }
.code-foot-links a:hover .code-foot-link-arr { color: var(--fg); transform: translateX(4px); }

@media (max-width: 860px) {
  .code-tone-grid { grid-template-columns: 1fr; }
  .code-people-row { grid-template-columns: 1fr; gap: 12px; }
  .code-foot-grid { grid-template-columns: 1fr; }
  .code-ask { grid-template-columns: 40px 1fr; }
}


/* ============================================================
   BUNDLE — Buy 3 cases, get a 4th free
   ============================================================ */
.bundle-hero {
  position: relative;
  padding: clamp(64px, 8vw, 120px) 0 clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
  background: var(--bg);
}
.bundle-hero .lifestyle-bands { opacity: 0.35; }
.bundle-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  position: relative;
  z-index: 1;
}
.bundle-hero-flag {
  display: inline-block;
  padding: 6px 12px;
  background: var(--rise);
  color: var(--ink);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600;
}
.bundle-hero-title {
  font-family: var(--display);
  font-stretch: 88%;
  font-weight: 600;
  font-size: clamp(48px, 8.5vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 28px 0 0;
  color: var(--fg);
}
.bundle-hero-title span { display: block; }
.bundle-hero-title em {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--rise);
}
.bundle-hero-sub {
  margin-top: clamp(20px, 2.4vw, 32px);
  font-family: var(--sans);
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.5;
  color: var(--fg-soft);
  max-width: 48ch;
}
.bundle-hero-sub strong { color: var(--fg); font-weight: 500; }
.bundle-hero-stats {
  display: flex;
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(28px, 3.5vw, 48px);
  padding-top: clamp(28px, 3.5vw, 40px);
  border-top: 1px solid var(--hairline);
}
.bundle-hero-stat { display: flex; flex-direction: column; gap: 6px; }
.bundle-hero-stat-num {
  font-family: var(--display);
  font-stretch: 85%;
  font-weight: 700;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg);
}
.bundle-hero-stat.is-savings .bundle-hero-stat-num { color: var(--rise); }
.bundle-hero-stat-label {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
}

/* Four-case visual */
.bundle-hero-cases {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  perspective: 1200px;
}
.bundle-hero-case {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  border: 1px solid var(--hairline);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;
  box-shadow: 0 16px 36px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
}
.bundle-hero-case::before {
  content: "";
  position: absolute; inset: 12px;
  border-radius: 8px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.025) 0 8px,
    transparent 8px 18px
  );
  opacity: 0.5;
  pointer-events: none;
}
.bundle-hero-case.is-filled {
  background: linear-gradient(180deg, color-mix(in oklab, var(--rise) 22%, var(--bg-2)) 0%, var(--bg-2) 100%);
  border-color: var(--rise);
}
.bundle-hero-case.is-free {
  background: var(--bg);
  border: 1.5px dashed var(--rise);
  transform: rotate(-2deg);
}
.bundle-hero-case.is-free.is-filled {
  background: linear-gradient(180deg, var(--rise) 0%, color-mix(in oklab, var(--rise) 50%, var(--bg)) 100%);
  border-style: solid;
  color: var(--ink);
}
.bundle-hero-case-num {
  font-family: var(--display);
  font-stretch: 85%;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 56px);
  letter-spacing: -0.03em;
  color: var(--fg);
  line-height: 1;
}
.bundle-hero-case.is-free .bundle-hero-case-num { color: var(--rise); }
.bundle-hero-case.is-free.is-filled .bundle-hero-case-num { color: var(--ink); }
.bundle-hero-case-label {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-mute);
}
.bundle-hero-case.is-free .bundle-hero-case-label { color: var(--rise); }
.bundle-hero-case.is-free.is-filled .bundle-hero-case-label { color: var(--ink); }

/* Builder header */
.bundle-pool-head {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 32px;
  align-items: end;
  margin-bottom: 16px;
}
.bundle-group-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--fg);
  padding-bottom: 12px;
  margin-bottom: 24px;
}

/* Right column — case track visual */
.bundle-case-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.bundle-case-slot {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-2);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 8px;
}
.bundle-case-slot.is-free {
  border: 1.5px dashed var(--rise);
  background: var(--bg);
}
.bundle-case-slot.is-free.is-filled {
  background: var(--rise);
}
.bundle-case-slot-fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 0%;
  background: linear-gradient(180deg, color-mix(in oklab, var(--rise) 35%, transparent) 0%, color-mix(in oklab, var(--rise) 18%, transparent) 100%);
  border-top: 1px solid var(--rise);
  transition: height 0.4s cubic-bezier(0.2,0.7,0.2,1);
  z-index: 0;
}
.bundle-case-slot.is-free .bundle-case-slot-fill {
  background: var(--rise);
  border-top: 0;
}
.bundle-case-slot-num {
  position: relative; z-index: 1;
  font-family: var(--display);
  font-stretch: 85%;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--fg);
  line-height: 1;
  margin-top: auto;
}
.bundle-case-slot.is-free .bundle-case-slot-num { color: var(--rise); }
.bundle-case-slot.is-free.is-filled .bundle-case-slot-num { color: var(--ink); }
.bundle-case-slot-label {
  position: relative; z-index: 1;
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
  margin-top: 4px;
}
.bundle-case-slot.is-free .bundle-case-slot-label { color: var(--rise); }
.bundle-case-slot.is-free.is-filled .bundle-case-slot-label { color: var(--ink); }

/* Total row */
.bundle-total-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 20px 0;
  border-top: 1px solid var(--fg);
  border-bottom: 1px solid var(--fg);
  margin-top: 32px;
}
.bundle-total-label {
  font-size: 18px;
  font-weight: 500;
  color: var(--fg);
}
.bundle-total-savings {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rise);
  margin-top: 4px;
}
.bundle-total-price {
  font-family: var(--display);
  font-stretch: 85%;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
}

/* The math */
.bundle-math {
  padding: clamp(56px, 7vw, 96px) 0;
  background: var(--bg-2);
  border-top: 1px solid var(--hairline);
}
.bundle-math-grid {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  width: 100%;
}
.bundle-math-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 140px;
  gap: 32px;
  padding: 20px 16px;
  border-top: 1px solid var(--hairline);
  align-items: center;
  transition: background 0.25s ease;
}
.bundle-math-row:first-child { border-top: 0; }
.bundle-math-label {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-mute);
}
.bundle-math-val {
  font-family: var(--sans);
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--fg-soft);
  line-height: 1.5;
}
.bundle-math-row.is-free-row .bundle-math-label { color: var(--rise); }
.bundle-math-row.is-free-row .bundle-math-val { color: var(--rise); }
.bundle-math-row.is-total {
  background: linear-gradient(180deg, color-mix(in oklab, var(--rise) 8%, transparent), transparent);
  padding: 24px 16px;
  margin: 0 -16px;
  border-top: 1px solid var(--rise);
}
.bundle-math-row.is-total .bundle-math-label { color: var(--fg); }
.bundle-math-row.is-total .bundle-math-val { color: var(--fg); font-size: clamp(17px, 1.4vw, 21px); }
.bundle-math-row.is-current {
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--rise) 14%, transparent) 0%,
    color-mix(in oklab, var(--rise) 5%, transparent) 60%,
    transparent 100%);
  border-top: 1px solid color-mix(in oklab, var(--rise) 40%, var(--hairline));
}
.bundle-math-row.is-current + .bundle-math-row { border-top: 1px solid color-mix(in oklab, var(--rise) 40%, var(--hairline)); }
.bundle-math-row.is-current .bundle-math-label { color: var(--rise); }
.bundle-math-row.is-current .bundle-math-val { color: var(--fg); }
.bundle-math-row.is-current .bundle-math-val strong { color: var(--rise); }
.bundle-math-mark {
  display: flex; justify-content: flex-end; align-items: center;
  min-height: 14px;
}
.bundle-math-here {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--rise);
  font-weight: 600;
  white-space: nowrap;
}
.bundle-math-foot {
  margin-top: 32px;
  width: 100%;
  padding: 24px 16px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-sizing: border-box;
  font-family: var(--sans);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: none;
}
.bundle-math-foot strong { color: var(--fg); font-weight: 500; }

/* Who this is for */
.bundle-for-whom {
  padding: clamp(56px, 7vw, 96px) 0;
  border-top: 1px solid var(--hairline);
}
.bundle-for-whom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.bundle-for-whom-title {
  font-size: clamp(32px, 4vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-top: 16px;
}
.bundle-for-whom-points {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.bundle-fact {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--hairline);
  align-items: baseline;
}
.bundle-fact:first-child { border-top: 0; }
.bundle-fact-label {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-mute);
}
.bundle-fact-val {
  font-family: var(--display);
  font-stretch: 88%;
  font-weight: 600;
  font-size: clamp(18px, 1.4vw, 22px);
  letter-spacing: -0.015em;
  color: var(--fg);
}
.bundle-fact-desc {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-soft);
}

@media (max-width: 860px) {
  .bundle-hero-inner { grid-template-columns: 1fr; }
  .bundle-hero-cases { max-width: 320px; }
  .bundle-pool-head { grid-template-columns: 1fr; }
  .bundle-math-row { grid-template-columns: 1fr; gap: 6px; padding: 16px; }
  .bundle-math-mark { justify-content: flex-start; min-height: 0; }
  .bundle-for-whom-grid { grid-template-columns: 1fr; }
  .bundle-fact { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
}

/* ============================================================
   HOMEPAGE — Superfan CTA
   ============================================================ */
.superfan-cta {
  position: relative;
  padding: clamp(64px, 9vw, 140px) 0;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  overflow: hidden;
}
.superfan-bands {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0.22;
  pointer-events: none;
}
.superfan-bands span {
  display: block;
  height: 1px;
  background: var(--hairline);
}
.superfan-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.superfan-flag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--rise);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rise);
}
.superfan-title {
  font-family: var(--display);
  font-stretch: 88%;
  font-weight: 600;
  font-size: clamp(44px, 7vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  margin: 24px 0 0;
  color: var(--fg);
}
.superfan-title span { display: block; }
.superfan-title em {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--rise);
}
.superfan-sub {
  margin-top: clamp(20px, 2.4vw, 32px);
  font-family: var(--sans);
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 50ch;
}
.superfan-sub strong { color: var(--fg); font-weight: 500; }
.superfan-stats {
  display: flex; gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(28px, 3.5vw, 40px);
  padding: 24px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.superfan-stat { display: flex; flex-direction: column; gap: 4px; }
.superfan-stat-num {
  font-family: var(--display);
  font-stretch: 85%;
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 36px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg);
}
.superfan-stat.is-strike .superfan-stat-num {
  color: var(--fg-mute);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.superfan-stat.is-accent .superfan-stat-num { color: var(--rise); }
.superfan-stat-label {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
}
.superfan-cta-row {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: clamp(24px, 3vw, 36px);
}
.superfan-fine {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-mute);
  margin-top: 20px;
  display: flex; flex-direction: column; gap: 4px;
}

.superfan-cases {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-self: stretch;
}
.superfan-case {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  padding: 16px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: transform 0.35s ease;
}
.superfan-case::before {
  content: "";
  position: absolute; inset: 14px;
  border-radius: 10px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.03) 0 9px,
    transparent 9px 20px
  );
  opacity: 0.55;
  pointer-events: none;
}
.superfan-case:nth-child(1) { transform: translateY(8px) rotate(-2deg); }
.superfan-case:nth-child(2) { transform: translateY(-4px) rotate(2deg); }
.superfan-case:nth-child(3) { transform: translateY(0) rotate(1deg); }
.superfan-case:nth-child(4) { transform: translateY(-10px) rotate(-3deg); }

.superfan-case.is-free {
  background: linear-gradient(180deg, var(--rise) 0%, color-mix(in oklab, var(--rise) 60%, var(--bg)) 100%);
  border: 1.5px solid var(--rise);
  color: var(--ink);
}
.superfan-case.is-free::before {
  background: repeating-linear-gradient(
    90deg,
    rgba(0,0,0,0.08) 0 9px,
    transparent 9px 20px
  );
}
.superfan-case-num {
  font-family: var(--display);
  font-stretch: 85%;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 48px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg);
  position: relative; z-index: 1;
}
.superfan-case.is-free .superfan-case-num { color: var(--ink); }
.superfan-case-label {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-mute);
  position: relative; z-index: 1;
}
.superfan-case.is-free .superfan-case-label { color: var(--ink); font-weight: 600; }
.superfan-case-count {
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
  position: relative; z-index: 1;
}
.superfan-case.is-free .superfan-case-count { color: var(--ink); opacity: 0.85; }

@media (max-width: 860px) {
  .superfan-grid { grid-template-columns: 1fr; }
  .superfan-cases { max-width: 360px; margin-top: 16px; }
}

/* ============================================================
   BUNDLE — Hero ladder visual (replaces the four-case stack)
   ============================================================ */
.bundle-hero-ladder {
  display: flex; flex-direction: column;
  gap: 14px;
  align-items: flex-end;
  width: 100%;
  perspective: 1200px;
}
.bundle-hero-rung {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  box-shadow: 0 12px 28px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.04);
}
.bundle-hero-rung::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 14px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.025) 0 8px,
    transparent 8px 20px
  );
  opacity: 0.7; pointer-events: none;
}
.bundle-hero-rung.is-tier-4 {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--rise) 24%, var(--bg-2)) 0%,
    var(--bg-2) 100%);
  border-color: var(--rise);
}
.bundle-hero-rung-num {
  font-family: var(--display);
  font-stretch: 85%;
  font-weight: 700;
  font-size: clamp(26px, 2.8vw, 38px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg);
}
.bundle-hero-rung.is-tier-4 .bundle-hero-rung-num { color: var(--rise); }
.bundle-hero-rung-mid {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.bundle-hero-rung-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 1.3vw, 19px);
  color: var(--fg);
  line-height: 1.1;
}
.bundle-hero-rung-cans {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-mute);
}
.bundle-hero-rung-pct {
  font-family: var(--display);
  font-stretch: 85%;
  font-weight: 700;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: -0.02em;
  color: var(--rise);
}

/* ============================================================
   BUNDLE — Tier ladder section (four-card row)
   ============================================================ */
.tier-ladder {
  padding: clamp(56px, 7vw, 96px) 0;
  background: var(--bg);
  border-top: 1px solid var(--hairline);
}
.tier-ladder-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: end;
  gap: clamp(20px, 3vw, 40px);
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
.tier-ladder-note { color: var(--fg-mute); max-width: 32ch; }
.tier-ladder-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.tier-card {
  position: relative;
  display: flex; flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2vw, 32px) clamp(16px, 1.6vw, 24px);
  background: var(--bg);
  border-left: 1px solid var(--hairline);
  cursor: pointer;
  overflow: hidden;
  transition: background 0.25s ease, transform 0.25s ease;
}
.tier-card:first-child { border-left: 0; }
.tier-card-wave {
  position: absolute; inset: auto 0 0 0;
  height: 60%;
  background:
    radial-gradient(120% 80% at 50% 100%, color-mix(in oklab, var(--rise) 12%, transparent) 0%, transparent 70%),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.02) 0 8px,
      transparent 8px 20px
    );
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.tier-card:hover { background: var(--bg-2); transform: translateY(-2px); }
.tier-card:hover .tier-card-wave { opacity: 0.9; }
.tier-card.is-active {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--rise) 10%, var(--bg-2)) 0%,
    var(--bg-2) 100%);
}
.tier-card.is-active .tier-card-wave { opacity: 1; }
.tier-card.is-tier-4 { background: linear-gradient(180deg,
    color-mix(in oklab, var(--rise) 6%, var(--bg-2)) 0%,
    var(--bg-2) 100%); }
.tier-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  position: relative; z-index: 1;
}
.tier-card-num {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg);
  font-weight: 600;
}
.tier-card-num span { color: var(--fg-mute); font-weight: 400; }
.tier-card-pct {
  font-family: var(--display);
  font-stretch: 85%;
  font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.02em;
  color: var(--rise);
}
.tier-card-name {
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
  position: relative; z-index: 1;
}
.tier-card-count {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-mute);
  position: relative; z-index: 1;
}
.tier-card-price {
  display: flex; align-items: baseline; gap: 12px;
  margin-top: 8px;
  position: relative; z-index: 1;
}
.tier-card-price-num {
  font-family: var(--display);
  font-stretch: 85%;
  font-weight: 700;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--fg);
}
.tier-card-price-was {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--fg-mute);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.tier-card-per {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-soft);
  position: relative; z-index: 1;
}
.tier-card-per span { color: var(--fg-mute); }
.tier-card-status {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  color: var(--fg-soft);
  margin: 4px 0 0;
  position: relative; z-index: 1;
}
.tier-card-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg);
  position: relative; z-index: 1;
}
.tier-card.is-active .tier-card-foot { color: var(--rise); }
.tier-card-foot .arr { transition: transform 0.2s ease; display: inline-block; }
.tier-card:hover .tier-card-foot .arr { transform: translateX(4px); }

/* ============================================================
   BUNDLE — Tier progress (live indicator in sidebar)
   ============================================================ */
.tier-progress { display: flex; flex-direction: column; gap: 16px; }
.tier-progress-status {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px;
}
.tier-progress-currently { color: var(--fg-mute); }
.tier-progress-name {
  font-family: var(--display);
  font-stretch: 88%;
  font-weight: 600;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--fg);
  margin-top: 4px;
}
.tier-progress-name em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--rise);
}
.tier-progress-pay { text-align: right; }
.tier-progress-amount {
  font-family: var(--display);
  font-stretch: 85%;
  font-weight: 700;
  font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--fg);
  margin-top: 4px;
}
.tier-progress-track {
  position: relative;
  height: 10px;
  background: var(--hairline);
  border-radius: 999px;
  margin: 14px 0 60px;
}
.tier-progress-track .tier-progress-fill {
  /* display:block needed to override Dawn base.css's `div:empty {
     display: none; }` blanket rule. Our fill element carries no
     inner content (the width is conveyed via the inline style
     attribute), so it matches the :empty pseudo-class and Dawn
     hides it. Specificity (0,2,0) here beats div:empty's (0,1,1)
     so this wins cleanly. Without this override, the bar was
     fully invisible regardless of width / background / glow —
     verified via DevTools showing computed display:none + zero
     boundingRect on the fill element. */
  display: block;
  position: absolute; inset: 0 auto 0 0;
  /* Solid --rise background matches the active tier-node-dot color.
     Box-shadow mirrors the dot's outset glow (0 0 0 4px var(--rise)
     @25% transparent) so the bar visually unifies with the dots —
     without it, the 10px-tall bar reads as a thin connector between
     14px gold dots with their own 22px glow, and the eye skips
     straight from dot to dot. Glow brings the bar up to the dots'
     visual weight so the "earned" segment reads as a continuous
     accent column. */
  background: var(--rise);
  border-radius: 999px;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--rise) 25%, transparent);
  transition: width 0.5s cubic-bezier(0.2,0.7,0.2,1);
}
.tier-node {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
}
.tier-node-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 2px solid var(--hairline);
  transition: all 0.3s ease;
}
.tier-node.is-reached .tier-node-dot {
  background: var(--rise);
  border-color: var(--rise);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--rise) 25%, transparent);
}
.tier-node.is-current .tier-node-dot {
  transform: scale(1.2);
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--rise) 30%, transparent);
}
.tier-node-label {
  position: absolute;
  top: 22px;
  display: flex; flex-direction: column; align-items: center;
  gap: 2px;
  white-space: nowrap;
}
.tier-node-pct {
  font-family: var(--display);
  font-stretch: 85%;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.02em;
  color: var(--fg-mute);
}
.tier-node.is-reached .tier-node-pct { color: var(--rise); }
.tier-node-pk {
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-mute);
}
.tier-progress-prompt {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-soft);
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}

/* Subscription cadence */
.sub-cadence { margin-top: 16px; }
.sub-cadence-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 10px;
}
.sub-cadence-pill {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 8px 14px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--fg-soft);
  cursor: pointer;
  transition: all 0.2s ease;
}
.sub-cadence-pill:hover { color: var(--fg); border-color: var(--fg-soft); }
.sub-cadence-pill.is-active {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

@media (max-width: 1080px) {
  .tier-ladder-grid { grid-template-columns: repeat(2, 1fr); }
  .tier-card:nth-child(3) { border-left: 0; border-top: 1px solid var(--hairline); }
}
@media (max-width: 860px) {
  .bundle-hero-rung { padding: 12px 14px; gap: 12px; }
  .tier-ladder-head { grid-template-columns: 1fr; }
  .tier-ladder-grid { grid-template-columns: 1fr; }
  .tier-card { border-left: 0; border-top: 1px solid var(--hairline); }
  .tier-card:first-child { border-top: 0; }
  .tier-progress-track { margin-bottom: 56px; }
  .tier-node-label { top: 18px; }
}

/* ============================================================
   HOMEPAGE — Superfan tier grid (replaces the four-case stack)
   ============================================================ */
.superfan-tiers-head {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.superfan-tiers-lede { padding-bottom: 4px; }
.superfan-tier-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.superfan-tier {
  position: relative;
  display: flex; flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2.2vw, 32px);
  background: transparent;
  border-left: 1px solid var(--hairline);
  cursor: pointer;
  overflow: hidden;
  transition: background 0.25s ease, transform 0.25s ease;
}
.superfan-tier:first-child { border-left: 0; }
.superfan-tier-wave {
  position: absolute; inset: auto 0 0 0;
  height: 55%;
  background:
    radial-gradient(120% 80% at 50% 100%, color-mix(in oklab, var(--rise) 10%, transparent) 0%, transparent 70%),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.02) 0 8px,
      transparent 8px 20px
    );
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.superfan-tier:hover { background: var(--bg-2); transform: translateY(-2px); }
.superfan-tier:hover .superfan-tier-wave { opacity: 1; }
.superfan-tier.is-tier-4 { background: linear-gradient(180deg,
    color-mix(in oklab, var(--rise) 6%, transparent) 0%,
    transparent 100%); }
.superfan-tier-head {
  display: flex; justify-content: space-between; align-items: baseline;
  position: relative; z-index: 1;
}
.superfan-tier-num {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg);
  font-weight: 600;
}
.superfan-tier-num span { color: var(--fg-mute); font-weight: 400; }
.superfan-tier-pct {
  font-family: var(--display);
  font-stretch: 85%;
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.02em;
  color: var(--rise);
}
.superfan-tier-name {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
  position: relative; z-index: 1;
}
.superfan-tier-cans {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-mute);
  position: relative; z-index: 1;
}
.superfan-tier-price {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 4px;
  position: relative; z-index: 1;
}
.superfan-tier-price-num {
  font-family: var(--display);
  font-stretch: 85%;
  font-weight: 700;
  font-size: clamp(32px, 3.4vw, 48px);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--fg);
}
.superfan-tier-price-was {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--fg-mute);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.superfan-tier-per {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-soft);
  position: relative; z-index: 1;
  margin-top: auto;
}
.superfan-tier-per span { color: var(--fg-mute); }

@media (max-width: 1080px) {
  .superfan-tiers-head { grid-template-columns: 1fr; }
  .superfan-tier-grid { grid-template-columns: repeat(2, 1fr); }
  .superfan-tier:nth-child(3) { border-left: 0; border-top: 1px solid var(--hairline); }
}
@media (max-width: 640px) {
  .superfan-tier-grid { grid-template-columns: 1fr; }
  .superfan-tier { border-left: 0; border-top: 1px solid var(--hairline); }
  .superfan-tier:first-child { border-top: 0; }
}


/* ============================================================
   SUSTAINABILITY PAGE v2 — annual report meets manifesto
   Deliberately avoids the eco-brand green; uses cream paper for
   the ledger panel and a sparing gold accent borrowed from the
   site palette (rgba(141, 224, 168)).
   ============================================================ */

/* ----- HERO ----- */
.sx-hero {
  position: relative;
  min-height: clamp(560px, 80vh, 820px);
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  isolation: isolate;
  display: flex; align-items: flex-end;
  border-bottom: 1px solid var(--hairline);
}
.sx-hero-photo {
  position: absolute; inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 25% 80%, rgba(141, 224, 168, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 70% 70% at 80% 20%, rgba(66, 100, 158, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, #0c0c0c 0%, #050505 80%);
}
.sx-hero-photo::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 96px);
  pointer-events: none;
}
.sx-hero-photo::after {
  content: "Canadian boreal · stock photo placeholder · Unsplash, Pexels, Burst";
  position: absolute; bottom: 18px; right: 18px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-dim);
}
.sx-hero-overlay {
  position: relative; z-index: 2;
  width: 100%;
  padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 112px);
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.88) 100%);
}
.sx-hero-overlay-inner { max-width: 1280px; }
.sx-hero-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 7.2vw, 132px);
  letter-spacing: -0.025em;
  line-height: 0.92;
  margin-top: 28px;
  margin-bottom: 0;
  max-width: 18ch;
  color: var(--fg);
  text-wrap: balance;
}
.sx-hero-title em {
  font-family: var(--display); font-stretch: 85%; font-style: normal; font-weight: 600;
  letter-spacing: -0.035em;
}
.sx-hero-sub {
  margin-top: 36px;
  max-width: 60ch;
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.55;
  color: var(--fg-soft);
}

/* ----- CALLOUT BAND — the headline 2% commitment ----- */
.sx-callout-band {
  background: var(--bg-2);
  border-bottom: 1px solid var(--hairline);
  padding: clamp(40px, 5vw, 72px) 0;
  position: relative;
}
.sx-callout-band::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 56px);
  pointer-events: none;
}
.sx-callout {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
.sx-callout-eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-mute);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  align-self: start;
  padding-top: 4px;
}
.sx-callout-body { min-width: 0; }
.sx-callout-line {
  font-family: var(--serif); font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 4.2vw, 64px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--fg);
  max-width: 26ch;
  text-wrap: balance;
  margin: 0;
}
.sx-callout-line em {
  font-family: var(--display); font-stretch: 80%; font-style: normal; font-weight: 600;
  font-size: 1.1em;
  color: color-mix(in oklab, var(--green) 95%, transparent);
  letter-spacing: -0.04em;
}
.sx-callout-meta {
  margin-top: 20px;
  display: inline-flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
}
.sx-callout-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-dim); }

@media (max-width: 760px) {
  .sx-callout { grid-template-columns: 1fr; gap: 18px; }
  .sx-callout-eyebrow { writing-mode: horizontal-tb; transform: none; padding: 0; }
}

/* ----- SECTION FRAMING ----- */
.sx-section { padding: clamp(56px, 6.5vw, 104px) 0; }

/* ----- SECTION 1 — Manifesto, two-column essay ----- */
.sx-essay {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.sx-essay-head .eyebrow { color: var(--fg-mute); }
.sx-section-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 76px);
  letter-spacing: -0.02em;
  line-height: 1.0;
  margin: 16px 0 0;
  text-wrap: balance;
  color: var(--fg);
}
.sx-section-title em {
  font-family: var(--display); font-stretch: 85%; font-style: normal; font-weight: 600;
  letter-spacing: -0.035em;
}
.sx-essay-body p {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 62ch;
  margin: 0 0 24px;
}
.sx-essay-body p:last-child { margin-bottom: 0; }
.sx-essay-italic { padding-top: 8px; }
.sx-essay-italic em {
  font-family: var(--serif); font-style: italic;
  color: var(--fg);
}
@media (max-width: 900px) {
  .sx-essay { grid-template-columns: 1fr; }
}

/* ----- SECTION 2 — Numbers, 4-up stat row with massive numerals ----- */
.sx-numbers-section { background: var(--bg); border-top: 1px solid var(--hairline); }
.sx-numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
  margin-top: 8px;
  position: relative;
  isolation: isolate;
}
.sx-stat {
  padding: clamp(28px, 3vw, 48px) clamp(20px, 2vw, 32px);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.sx-stat::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    repeating-linear-gradient(180deg,
      transparent 0 38px,
      rgba(255,255,255,0.025) 38px 39px,
      transparent 39px 76px,
      rgba(255,255,255,0.018) 76px 77px);
  pointer-events: none;
  opacity: 0.6;
}
.sx-stat.is-featured {
  background: linear-gradient(170deg, color-mix(in oklab, var(--green) 6%, transparent) 0%, transparent 70%);
}
.sx-stat-index {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-mute);
}
.sx-stat.is-featured .sx-stat-index { color: color-mix(in oklab, var(--green) 85%, transparent); }
.sx-stat-num {
  font-family: var(--display); font-stretch: 80%; font-weight: 600;
  font-size: clamp(64px, 6.5vw, 112px);
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: var(--fg);
}
.sx-stat-num span {
  font-size: 0.36em;
  color: var(--fg-mute);
  margin-left: 4px;
  font-weight: 400;
  vertical-align: top;
  position: relative;
  top: 0.55em;
}
/* Numerals ride a lighter tint of the accent green (was the pale mint
   rgba(180,240,200)); derived from the token so the pair stays in step. */
.sx-stat.is-featured .sx-stat-num { color: color-mix(in oklab, var(--green) 55%, var(--fg)); }
.sx-stat.is-featured .sx-stat-num span { color: color-mix(in oklab, color-mix(in oklab, var(--green) 55%, var(--fg)) 55%, transparent); }
.sx-stat-label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg);
  margin-top: 4px;
}
.sx-stat-body {
  font-size: 13.5px; line-height: 1.55;
  color: var(--fg-soft);
  margin: 4px 0 0;
}
@media (max-width: 1000px) {
  .sx-numbers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .sx-numbers { grid-template-columns: 1fr; }
}

/* ----- SECTION 3 — Commitments, 2x3 grid of bordered cells ----- */
.sx-commitments-section {
  background: var(--bg-2);
  border-top: 1px solid var(--hairline);
}
.sx-commitments {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.sx-commitment {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  padding: clamp(28px, 3.2vw, 48px);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.sx-commitment-num {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-mute);
  padding-top: 8px;
}
.sx-commitment-head {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(22px, 1.9vw, 30px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--fg);
  margin: 0 0 14px;
  text-wrap: balance;
}
.sx-commitment-body p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: 48ch;
  margin: 0;
}
@media (max-width: 760px) {
  .sx-commitments { grid-template-columns: 1fr; }
  .sx-commitment { grid-template-columns: 56px 1fr; gap: 16px; }
}
@media (max-width: 480px) {
  .sx-commitment { grid-template-columns: 1fr; gap: 8px; }
  .sx-commitment-num { padding-top: 0; }
}

/* ----- SECTION 4 — The 2% Ledger. Dark surface, financial dashboard feel. ----- */
.sx-ledger {
  padding: clamp(64px, 7.5vw, 112px) 0;
  background: var(--bg);
  color: var(--fg);
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--hairline);
}
.sx-ledger::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 38px);
  pointer-events: none;
  opacity: 0.7;
}
.sx-ledger > .container { position: relative; }
.sx-ledger .kicker .num { color: var(--fg-mute); }
.sx-ledger .kicker-title { color: var(--fg); }
.sx-ledger .kicker-title em { color: var(--fg); }
.sx-ledger-intro {
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.55;
  color: var(--fg-soft);
  margin: 0 0 56px;
}

/* Status panel — financial dashboard feel */
.sx-ledger-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--hairline);
  background: var(--bg-2);
  position: relative;
  margin-bottom: 28px;
}
.sx-ledger-cell {
  padding: clamp(36px, 4.5vw, 64px) clamp(24px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 16px;
  border-right: 1px solid var(--hairline);
  min-width: 0;
}
.sx-ledger-cell:last-child { border-right: 0; }
.sx-ledger-cell-label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-mute);
}
.sx-ledger-cell-value {
  font-family: var(--display); font-stretch: 80%; font-weight: 600;
  font-size: clamp(48px, 5.6vw, 96px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--fg);
  white-space: nowrap;
}
/* The date cell takes a few more characters than $0 / 0, so trim it a touch */
.sx-ledger-cell:first-of-type .sx-ledger-cell-value {
  font-size: clamp(40px, 4.6vw, 76px);
}
.sx-ledger-cell-foot {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
  margin-top: auto;
}
.sx-ledger-pulse {
  position: absolute; top: 18px; right: 18px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-soft);
  background: var(--bg);
  z-index: 2;
}
.sx-ledger-pulse-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--green) 55%, transparent);
  animation: sxPulse 2.4s ease-in-out infinite;
}
@keyframes sxPulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in oklab, var(--green) 55%, transparent); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0   transparent; }
}

.sx-ledger-aside {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.55;
  color: var(--fg-soft);
  margin: 16px 0 56px;
}
.sx-ledger-aside em { font-style: italic; }

/* Ledger table — empty until first cheque clears */
.sx-ledger-table {
  border-top: 1px solid var(--hairline);
}
.sx-ledger-table-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-mute);
}
.sx-ledger-empty { padding: clamp(60px, 8vw, 120px) 0; }
.sx-ledger-empty-rule {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 24px;
  font-family: var(--mono); font-size: 14px;
  color: var(--fg-dim);
  margin-bottom: 32px;
}
.sx-ledger-empty-head {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(20px, 1.8vw, 28px);
  color: var(--fg);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.sx-ledger-empty-aside {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-mute);
  margin: 0;
}

@media (max-width: 760px) {
  .sx-ledger-panel { grid-template-columns: 1fr; }
  .sx-ledger-cell { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .sx-ledger-cell:last-child { border-bottom: 0; }
  .sx-ledger-pulse { top: 12px; right: 12px; }
  .sx-ledger-table-head { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sx-ledger-table-head span:nth-child(3),
  .sx-ledger-table-head span:nth-child(4) { display: none; }
  .sx-ledger-empty-rule { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sx-ledger-empty-rule span:nth-child(3),
  .sx-ledger-empty-rule span:nth-child(4) { display: none; }
}

/* ----- SECTION 5 — NCC partner ----- */
.sx-partner-section { background: var(--bg); border-top: 1px solid var(--hairline); }
.sx-partner-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  margin: 0 0 56px;
}
.sx-partner-intro p {
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.55;
  color: var(--fg-soft);
  margin: 0;
  max-width: 56ch;
}
@media (max-width: 760px) {
  .sx-partner-intro { grid-template-columns: 1fr; gap: 20px; }
}

.sx-partner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(40px, 5vw, 88px);
  padding: clamp(36px, 5vw, 72px);
  border: 1px solid var(--hairline);
  background: linear-gradient(170deg, var(--bg-2) 0%, var(--bg) 100%);
  align-items: start;
}
.sx-partner-mark {
  width: 280px;
  height: 280px;
  max-width: 100%;
  border: 1px solid var(--hairline);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.04) 0%, transparent 60%),
    linear-gradient(165deg, #1a1a1a 0%, #050505 80%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  color: var(--fg);
  position: relative;
  overflow: hidden;
}
.sx-partner-mark::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 18px);
  pointer-events: none;
}
.sx-partner-mark-glyph {
  font-family: var(--serif); font-style: italic;
  font-weight: 400;
  font-size: clamp(64px, 8vw, 112px);
  letter-spacing: -0.02em;
  line-height: 1;
}
.sx-partner-mark-foot {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-mute);
}
.sx-partner-info { display: flex; flex-direction: column; }
.sx-partner-info .caption { color: var(--fg-mute); margin-bottom: 12px; }
.sx-partner-name {
  font-family: var(--serif); font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 56px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--fg);
  margin: 0 0 20px;
}
.sx-partner-info > p {
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 54ch;
  margin: 0 0 28px;
}
.sx-partner-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 32px;
  margin: 0 0 32px;
  padding: 24px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.sx-partner-facts > div { display: flex; flex-direction: column; gap: 4px; }
.sx-partner-facts dt {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-mute);
}
.sx-partner-facts dd {
  font-family: var(--display); font-stretch: 90%; font-weight: 600;
  font-size: 18px; letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0;
}
.sx-partner-link {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg);
  border-bottom: 1px solid var(--fg);
  padding-bottom: 6px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.sx-partner-link:hover { opacity: 0.7; }

@media (max-width: 760px) {
  .sx-partner { grid-template-columns: 1fr; }
  .sx-partner-mark { width: 220px; height: 220px; }
}

/* ----- SECTION 6 — Submission form ----- */
.sx-form-section {
  background: var(--bg-3);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: clamp(64px, 7.5vw, 112px) 0;
  position: relative;
}
.sx-form-section::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 60% 40% at 80% 0%, rgba(141, 224, 168, 0.04) 0%, transparent 60%);
  pointer-events: none;
}
.sx-form-section > .container { position: relative; }
.sx-form-intro {
  max-width: 64ch;
  margin: 0 0 56px;
}
.sx-form-intro p {
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.55;
  color: var(--fg-soft);
  margin: 0 0 20px;
}
.sx-form-intro p:last-child { margin-bottom: 0; }

.sx-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px clamp(28px, 4vw, 56px);
  max-width: 880px;
}
.sx-form-field {
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
}
.sx-form-field-full { grid-column: 1 / -1; }
.sx-form-field > span {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg);
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.sx-form-field > span i {
  font-family: var(--mono); font-style: normal;
  font-size: 10px; letter-spacing: 0.14em;
  color: var(--fg-mute);
  text-transform: uppercase;
}
.sx-form-field input,
.sx-form-field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  padding: 14px 0;
  font-family: var(--sans);
  font-size: 17px;
  color: var(--fg);
  border-radius: 0;
  outline: none;
  width: 100%;
  transition: border-color 0.2s ease;
}
.sx-form-field input:focus,
.sx-form-field textarea:focus {
  border-bottom-color: var(--fg);
}
.sx-form-field input::placeholder,
.sx-form-field textarea::placeholder {
  color: var(--fg-dim);
}
.sx-form-field textarea {
  min-height: 140px;
  line-height: 1.5;
  resize: vertical;
}
.sx-form-actions {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
  margin-top: 16px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}
.sx-form-note { color: var(--fg-mute); }
.sx-form-submit {
  font-size: 12px;
  padding: 18px 28px;
}
.sx-form-thanks {
  border: 1px solid var(--hairline);
  background: var(--bg-2);
  padding: clamp(40px, 5vw, 72px);
  max-width: 720px;
  display: flex; flex-direction: column; gap: 12px;
  align-items: flex-start;
}
.sx-form-thanks-head {
  font-family: var(--serif); font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 48px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--fg);
  margin: 4px 0 8px;
}
.sx-form-thanks p {
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 52ch;
  margin: 0 0 16px;
}
@media (max-width: 720px) {
  .sx-form { grid-template-columns: 1fr; gap: 32px; }
}

/* ----- SECTION 7 — Roadmap, what we don't have yet ----- */
.sx-roadmap-section { background: var(--bg); }
.sx-roadmap-intro {
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 64ch;
  margin: 0 0 56px;
}
.sx-roadmap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.sx-roadmap-item {
  padding: clamp(32px, 4vw, 56px);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: flex; flex-direction: column;
}
.sx-roadmap-num {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 20px;
}
.sx-roadmap-head {
  font-family: var(--serif); font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--fg);
  margin: 0 0 16px;
  text-wrap: balance;
}
.sx-roadmap-item p {
  font-size: 15px; line-height: 1.6;
  color: var(--fg-soft);
  margin: 0;
}
@media (max-width: 900px) {
  .sx-roadmap { grid-template-columns: 1fr; }
}

/* ----- SECTION 8 — Story bridge + closing ----- */
.sx-story-section {
  background: var(--bg-2);
  border-top: 1px solid var(--hairline);
}
.sx-story { max-width: 880px; }
.sx-story-text .sx-section-title { margin-bottom: 28px; }
.sx-story-text p {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 62ch;
  margin: 0;
}
.sx-story-ctas {
  margin-top: 36px;
  display: flex; gap: 12px; flex-wrap: wrap;
}

.sx-closing {
  background: var(--bg);
  border-top: 1px solid var(--hairline);
  padding: clamp(64px, 9vw, 140px) 0 clamp(48px, 6vw, 96px);
  display: flex; flex-direction: column; align-items: center; gap: 32px;
  text-align: center;
}
.sx-closing-tag {
  font-family: var(--display); font-stretch: 85%; font-weight: 600;
  font-size: clamp(72px, 14vw, 220px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--fg);
}
.sx-closing-tag em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-stretch: normal;
  letter-spacing: -0.02em;
}


/* ============================================================
   PLAYBOOK DAY ROWS — collapsible toggle
   ============================================================ */
.pb-day-tag-toggle {
  width: 100%;
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  /* Keep the original .pb-day-tag layout intact */
  padding-left: 0;
  padding-right: 0;
}
.pb-day-tag-toggle:focus-visible {
  outline: 1px solid var(--pb-accent, var(--rise));
  outline-offset: 4px;
  border-radius: 4px;
}
.pb-day-chev {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--fg-soft);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.pb-day-row:hover .pb-day-chev {
  color: var(--fg);
  border-color: var(--pb-accent, var(--rise));
}
.pb-day-row.is-open .pb-day-chev {
  color: var(--fg);
  border-color: var(--pb-accent, var(--rise));
  background: color-mix(in oklab, var(--pb-accent, var(--rise)) 18%, transparent);
}
.pb-day-row.is-closed .pb-day-tag {
  border-bottom: 0;
  padding-bottom: 8px;
}
.pb-day-row.is-closed {
  padding-top: clamp(20px, 2.2vw, 28px);
  padding-bottom: clamp(20px, 2.2vw, 28px);
}


/* ============================================================
   PLAYBOOK · Expand-all / Collapse-all bar
   ============================================================ */
.pb-day-bulk {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding: 14px 0;
  margin-bottom: 8px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.pb-day-bulk-label {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
}
.pb-day-bulk-actions {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em;
  color: var(--fg-mute);
}
.pb-day-bulk-btn {
  background: transparent;
  border: 0;
  padding: 4px 0;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
}
.pb-day-bulk-btn::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--pb-accent, var(--rise));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.pb-day-bulk-btn:hover { color: var(--pb-accent, var(--rise)); }
.pb-day-bulk-btn:hover::after { transform: scaleX(1); }
.pb-day-bulk-btn:disabled {
  color: var(--fg-dim);
  cursor: default;
  pointer-events: none;
}


/* ============================================================
   LEGAL & COMPLIANCE PAGES
   Terms, Privacy, Shipping, Refunds, Cookies, Accessibility.
   Editorial document treatment — sticky sidebar TOC, numbered
   sections + clauses, generous whitespace.
   ============================================================ */
.legal-hero {
  position: relative;
  padding: clamp(56px, 8vw, 112px) 0 clamp(40px, 5vw, 72px);
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
  overflow: hidden;
}
.legal-hero .lifestyle-bands { opacity: 0.3; }
.legal-hero-meta {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: clamp(28px, 4vw, 52px);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}
.legal-hero-date {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.legal-hero-title {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 85%;
  font-size: clamp(48px, 9vw, 132px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin-top: 24px;
  color: var(--fg);
  text-wrap: balance;
}
.legal-hero-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.legal-hero-sub {
  margin-top: clamp(20px, 2.4vw, 32px);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 28px);
  letter-spacing: -0.012em;
  color: var(--fg-soft);
  max-width: 56ch;
  line-height: 1.4;
}
.legal-hero-sub .brand { font-style: normal; font-family: var(--display); }

/* Mobile TOC — collapsed dropdown */
.legal-toc-mobile {
  display: none;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
  background: var(--bg-2);
  position: sticky;
  top: 0;
  z-index: 5;
}
.legal-toc-mobile-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  text-align: left;
  color: var(--fg);
}
.legal-toc-mobile-current {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.legal-toc-mobile-arrow {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--fg);
}
.legal-toc-mobile-list {
  list-style: none; padding: 8px 0 0; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
  max-height: 50vh; overflow-y: auto;
}
.legal-toc-mobile-item {
  width: 100%;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 12px 18px;
  text-align: left;
  background: transparent;
  color: var(--fg-soft);
}
.legal-toc-mobile-item.active { background: var(--bg); color: var(--fg); }

/* Body grid */
.legal-body {
  padding: clamp(40px, 5vw, 80px) 0 clamp(56px, 7vw, 96px);
  background: var(--bg);
}
.legal-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}

/* Sidebar TOC */
.legal-sidebar { position: relative; }
.legal-sidebar-inner {
  position: sticky;
  top: 120px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  padding-right: 12px;
}
.legal-sidebar ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.legal-toc-item {
  width: 100%;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 10px 12px 10px 14px;
  text-align: left;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  color: var(--fg-mute);
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  cursor: pointer;
}
.legal-toc-item:hover { color: var(--fg); }
.legal-toc-item.active {
  color: var(--fg);
  border-left-color: var(--fg);
  background: var(--bg-2);
}
.legal-toc-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--fg-mute);
  text-transform: uppercase;
}
.legal-toc-item.active .legal-toc-num { color: var(--fg); }
.legal-toc-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: inherit;
}

/* Content */
.legal-content {
  display: flex; flex-direction: column;
  gap: 0;
  max-width: 72ch;
}
.legal-section {
  padding: clamp(24px, 3vw, 40px) 0;
  scroll-margin-top: 110px;
}
.legal-section:first-child { padding-top: 0; }
.legal-section-head {
  margin-bottom: clamp(28px, 3.4vw, 44px);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}
.legal-section-num {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 10px;
}
.legal-section-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.legal-section-title em { font-style: italic; }

.legal-clauses {
  display: flex; flex-direction: column;
  gap: clamp(22px, 2.4vw, 32px);
}
.legal-clause {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
}
.legal-clause-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg-mute);
  padding-top: 4px;
}
.legal-clause-body {
  display: flex; flex-direction: column;
  gap: 14px;
}
.legal-p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.003em;
  color: var(--fg-soft);
  text-wrap: pretty;
}
.legal-lead {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--fg);
}
.legal-link {
  color: var(--fg);
  border-bottom: 1px solid var(--hairline);
  transition: border-color 0.18s ease;
  cursor: pointer;
}
.legal-link:hover { border-bottom-color: var(--fg); }

.legal-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 10px;
}
.legal-list li {
  position: relative;
  padding-left: 22px;
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--fg-soft);
}
.legal-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 10px; height: 1px;
  background: var(--fg-mute);
}

.legal-address {
  font-style: normal;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--fg);
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-left: 2px solid var(--fg);
  background: var(--bg-2);
  margin-top: 4px;
}
.legal-address .brand { font-family: var(--display); font-size: 1.1em; letter-spacing: -0.02em; }

.legal-clause-emphasis .legal-p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  letter-spacing: -0.012em;
  color: var(--fg);
}

/* Wave divider between sections */
.legal-wave {
  display: flex; justify-content: flex-start;
  padding: clamp(20px, 3vw, 36px) 0;
  color: var(--fg);
  opacity: 0.35;
}
.legal-wave svg { width: 96px; height: 10px; }

/* Footer */
.legal-foot {
  background: var(--bg-2);
  border-top: 1px solid var(--hairline);
  padding: clamp(56px, 7vw, 96px) 0;
}
.legal-foot-meta {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: clamp(40px, 5vw, 64px);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}
.legal-foot-date {
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  color: var(--fg);
  letter-spacing: 0.06em;
}
.legal-foot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.legal-foot-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin-top: 14px;
  color: var(--fg);
}
.legal-foot-links { list-style: none; padding: 0; margin: 0; }
.legal-foot-links li { border-bottom: 1px solid var(--hairline); }
.legal-foot-links li:first-child { border-top: 1px solid var(--hairline); }
.legal-foot-links a {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label arr"
    "desc  arr";
  column-gap: 16px;
  align-items: center;
  padding: 18px 4px;
  color: var(--fg-soft);
  cursor: pointer;
  transition: transform 0.18s ease;
}
.legal-foot-link-label {
  grid-area: label;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.legal-foot-link-desc {
  grid-area: desc;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-top: 4px;
}
.legal-foot-link-arr {
  grid-area: arr;
  font-size: 18px;
  color: var(--fg-mute);
  transition: transform 0.18s ease, color 0.18s ease;
}
.legal-foot-links a:hover { transform: translateX(4px); }
.legal-foot-links a:hover .legal-foot-link-arr { color: var(--fg); transform: translateX(4px); }

@media (max-width: 960px) {
  .legal-grid { grid-template-columns: 1fr; gap: 0; }
  .legal-sidebar { display: none; }
  .legal-toc-mobile { display: block; }
  .legal-foot-grid { grid-template-columns: 1fr; }
  .legal-clause { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  .legal-content { max-width: none; }
}
@media (max-width: 560px) {
  .legal-clause { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; }
  .legal-clause-num { font-size: 11px; }
  .legal-p { font-size: 15px; }
  .legal-foot-link-label { font-size: 19px; }
}

/* ── Favourites heart (FAVORITES.md) ──────────────────────────────────────
   Shared "save for later" toggle, used on PDPs, product cards, journal
   articles/cards, and playbook pages via snippets/favorite-heart.liquid.
   Outlined = not favorited; filled (aria-pressed=true) = favorited. State +
   optimism are driven by assets/favorites.js. */
.fav-heart {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; flex: 0 0 auto;
  border: 1px solid var(--hairline); border-radius: 50%;
  background: transparent; color: var(--fg-mute); cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.fav-heart:hover { color: var(--fg); border-color: var(--fg-mute); }
.fav-heart:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.fav-heart:active { transform: scale(0.92); }
.fav-heart-icon {
  width: 18px; height: 18px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round;
  transition: fill 0.2s ease, stroke 0.2s ease;
}
.fav-heart[aria-pressed="true"] { color: var(--fg); border-color: currentColor; }
.fav-heart[aria-pressed="true"] .fav-heart-icon { fill: currentColor; stroke: currentColor; }
.fav-heart[aria-busy="true"] { opacity: 0.55; pointer-events: none; }

/* Overlay variant — pinned to a card corner (product cards, journal archive
   cards, playbook archive cards). On whole-card-anchor surfaces the heart is a
   <span role="button"> so it stays valid inside the <a>. */
.fav-heart-overlay {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 36px; height: 36px;
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* Favourites dashboard panel cards (populated by customer-dashboard.js). */
.dash-fav-card { display: flex; flex-direction: column; gap: 10px; position: relative; }
.dash-fav-card .fav-heart { position: absolute; top: 16px; right: 16px; }
.dash-fav-card-type { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); }
.dash-fav-card-title { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--fg); text-decoration: none; padding-right: 44px; }
a.dash-fav-card-title:hover { text-decoration: underline; }
.dash-fav-card-notes { color: var(--fg-soft); font-size: 14px; line-height: 1.5; }
.dash-fav-filter { display: inline-flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.dash-fav-chip {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 7px 14px; border: 1px solid var(--hairline); border-radius: 999px;
  background: transparent; color: var(--fg-mute); cursor: pointer; transition: color 0.2s, border-color 0.2s;
}
.dash-fav-chip.is-active { color: var(--fg); border-color: var(--fg); }
.dash-fav-chip:hover { color: var(--fg); }

/* ============ COMPARE — hub + per-brand detail ============ */
/* Ported from design/reference/styles.css (compare block). Token-based, so it
   flips dark<->cream automatically inside .surface-cream. Namespaces cmp-* /
   cmpd-* / compare-hero|manifesto|engine|index|grid|card|detail|cta are clear of
   the older .compare-side/-rise/-drift/-stats can-spec block above. Includes the
   dormant select/pills (Stage 3) + detail (Stage 4) styles so those stages add
   markup only. */
.compare-hero-title { margin-top: 16px; max-width: 18ch; }
.compare-hero-title em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.compare-hero-lede { margin-top: 24px; max-width: 60ch; color: var(--fg-soft); }

/* Manifesto (cream) */
.compare-manifesto-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); }
.compare-manifesto-grid .eyebrow { color: var(--fg-mute); }
.compare-manifesto-body { display: flex; flex-direction: column; gap: 22px; max-width: 64ch; }
.compare-manifesto-body .body-lg { color: var(--fg-soft); }

/* Engine head + selector (select is wired in Stage 3) */
.cmp-engine-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-bottom: 28px; }
.cmp-engine-head .kicker-title { margin-top: 12px; }
.cmp-select-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 240px; }
.cmp-select-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
.cmp-select-shell { position: relative; }
.cmp-select { appearance: none; -webkit-appearance: none; width: 100%; padding: 14px 42px 14px 18px; background: var(--bg-2); color: var(--fg); border: 1px solid var(--hairline); border-radius: 2px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: border-color 0.2s ease; }
.cmp-select:hover { border-color: var(--fg-mute); }
.cmp-select:focus-visible { outline: none; border-color: var(--fg); }
.cmp-select-chev { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--fg-mute); }

/* Verdict lead */
.cmp-verdict { font-size: clamp(18px, 1.7vw, 24px); line-height: 1.45; max-width: 70ch; color: var(--fg); margin-bottom: 40px; padding-left: 22px; position: relative; }
.cmp-verdict-mark { position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 2px; }

/* Variant (sub-line) toggle (wired in Stage 3) */
.cmp-variants { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 32px; }
.cmp-variants-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
.cmp-variants-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.cmp-variant-pill { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 14px; border-radius: 100px; cursor: pointer; background: transparent; color: var(--fg-soft); border: 1px solid var(--hairline); transition: all 0.18s ease; }
.cmp-variant-pill:hover { border-color: var(--fg-mute); color: var(--fg); }
.cmp-variant-pill.is-active { background: #FFCC41; color: #0A0A0A; border-color: #FFCC41; }

/* Detail-page multi-select ("Which lines?") + side-by-side variant columns.
   JS-only (compare.js initDetail); reuses .cmp-variant-pill for the pills. */
.cmp-lines { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 32px; }
.cmp-lines-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
.cmp-lines-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.cmp-lines-action { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; background: transparent; border: 0; padding: 4px 2px; color: var(--fg-mute); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; transition: color 0.18s ease; }
.cmp-lines-action:hover { color: var(--fg); }
.cmp-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; align-items: start; }
.cmp-columns[hidden] { display: none; }
.cmp-col { min-width: 0; }
.cmp-col-label { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg); padding-bottom: 8px; margin-bottom: 20px; border-bottom: 2px solid var(--fg); }
.cmp-col-cites { margin-top: 24px; border-top: 1px solid var(--hairline); }
.cmp-col-point { padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.cmp-col-point-h { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--fg); }
.cmp-col-point-b { font-size: 14px; line-height: 1.55; color: var(--fg-soft); margin: 0; }
.cmp-col-point.is-variant .cmp-col-point-h::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--rise); margin-right: 8px; vertical-align: middle; }
.cmp-col-sources { list-style: none; margin: 20px 0 0; padding: 0; }
.cmp-col-source { font-size: 12px; line-height: 1.5; color: var(--fg-soft); padding: 6px 0; }
.cmp-col-source-num { font-family: var(--mono); color: var(--fg-mute); margin-right: 6px; }
.cmp-col-source-link { color: var(--fg-soft); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* Scoreline + rows */
.cmp-table { display: flex; flex-direction: column; gap: 0; }
.cmp-scoreline { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-bottom: 28px; margin-bottom: 8px; border-bottom: 1px solid var(--hairline); }
.cmp-scoreline-big { font-family: var(--serif); font-size: clamp(44px, 6vw, 76px); font-weight: 400; line-height: 0.9; letter-spacing: -0.02em; }
.cmp-scoreline-of { color: var(--fg-dim); }
.cmp-scoreline-label { font-size: 15px; color: var(--fg-mute); max-width: 32ch; line-height: 1.35; }
.cmp-row { padding: 22px 0; border-bottom: 1px solid var(--hairline-soft); }
.cmp-row-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.cmp-axis { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); }
.cmp-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 9px; border-radius: 100px; white-space: nowrap; }
.cmp-tag-win { background: #FFCC41; color: #0A0A0A; }
.cmp-tag-match { background: transparent; color: var(--fg-mute); border: 1px solid var(--hairline); }
.cmp-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cmp-cell { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--hairline); border-radius: 3px; }
.cmp-cell-c { background: rgba(255,204,65,0.06); border-color: rgba(255,204,65,0.28); }
.cmp-cell-x { background: var(--bg-2); }
.cmp-cell-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cmp-cell-name { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); }
.cmp-cell-name-x { color: var(--fg-dim); }
.cmp-cell-val { font-size: 15px; line-height: 1.35; color: var(--fg); }
.cmp-cell-val-x { color: var(--fg-soft); }
.cmp-mark { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.cmp-mark-check { background: #FFCC41; color: #0A0A0A; }
.cmp-cell-x .cmp-mark-check { background: transparent; color: var(--fg-soft); border: 1px solid var(--hairline); }
.cmp-mark-cross { background: transparent; color: var(--fg-dim); border: 1px solid var(--hairline); }
.cmp-note { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--fg-mute); max-width: 70ch; }
.cmp-engine-foot { margin-top: 36px; }
.compare-accurate { margin-top: 40px; }

/* All-brands grid (cream) */
.compare-index .kicker { margin-bottom: 40px; }
.compare-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.compare-card { display: flex; flex-direction: column; gap: 6px; padding: 28px; background: var(--bg); cursor: pointer; position: relative; transition: background 0.2s ease; text-decoration: none; color: inherit; }
.compare-card:hover { background: var(--bg-2); }
.compare-card-dot { width: 10px; height: 10px; border-radius: 50%; margin-bottom: 10px; }
.compare-card-vs { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-mute); }
.compare-card-name { font-family: var(--serif); font-size: 28px; line-height: 1; letter-spacing: -0.01em; }
.compare-card-cat { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 8px; }
.surface-cream .compare-card-cat { color: var(--fg-mute); } /* AA contrast fix: --fg-dim is only 2.53:1 on cream */
.compare-card-verdict { font-size: 14px; color: var(--fg-soft); line-height: 1.5; flex: 1; margin: 4px 0 0; }
.compare-card-tag { font-size: 13px; color: var(--fg-mute); line-height: 1.4; font-style: italic; }
.compare-card-arrow { margin-top: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg); }
.compare-card:hover .compare-card-arrow .arr { transform: translateX(4px); }
.compare-card-arrow .arr { display: inline-block; transition: transform 0.2s ease; }

/* Detail page (markup built in Stage 4) */
.cmp-back { background: none; border: none; cursor: pointer; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 24px; padding: 0; transition: color 0.2s ease; }
.cmp-back:hover { color: var(--fg); }
.compare-detail-maker { display: block; margin-top: 28px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--fg-mute); }
.compare-detail-table .eyebrow { display: block; margin-bottom: 28px; color: var(--fg-mute); }
.compare-detail-intro { font-size: clamp(24px, 3vw, 40px); line-height: 1.22; max-width: 24ch; margin: 18px 0 clamp(40px, 5vw, 72px); letter-spacing: -0.02em; }
.compare-detail-intro em { font-family: var(--serif); font-style: italic; }
.compare-detail-prose .eyebrow { color: var(--fg-mute); }
.cmpd-points { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--hairline); }
.cmpd-point { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); padding: clamp(28px, 4vw, 44px) 0; border-bottom: 1px solid var(--hairline); }
.cmpd-point-num { font-family: var(--mono); font-size: 13px; color: var(--fg-dim); padding-top: 6px; }
.cmpd-point-h { font-size: clamp(20px, 2vw, 28px); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 14px; }
.cmpd-point-b { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--fg-soft); max-width: 64ch; }
.cmpd-cite { font-size: 0.62em; font-family: var(--mono); color: var(--fg-mute); vertical-align: super; margin-left: 2px; }
.cmpd-cite::before { content: '['; }
.cmpd-cite::after { content: ']'; }
.compare-sources .eyebrow { display: block; margin-bottom: 24px; color: var(--fg-mute); }
.cmpd-sources { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; max-width: 80ch; }
.cmpd-source { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.cmpd-source-num { font-family: var(--mono); font-size: 12px; color: var(--fg-dim); padding-top: 2px; }
.cmpd-source-text { font-size: 14px; line-height: 1.5; color: var(--fg-mute); }
.cmpd-source-link { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--hairline); white-space: nowrap; margin-left: 4px; }
.cmpd-source-link:hover { border-color: var(--fg); }
.cmpd-disclaimer { margin-top: 32px; font-size: 12px; line-height: 1.6; color: var(--fg-dim); max-width: 80ch; }
.compare-cta-card { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding: clamp(32px, 4vw, 56px); border: 1px solid var(--hairline); border-radius: 3px; background: var(--bg-2); }
.compare-cta-card h2 { font-size: clamp(26px, 3vw, 40px); margin-bottom: 10px; }
.compare-cta-card .body-lg { color: var(--fg-soft); }
.compare-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .compare-manifesto-grid { grid-template-columns: 1fr; gap: 20px; }
  .cmp-engine-head { flex-direction: column; align-items: stretch; }
  .cmp-select-wrap { min-width: 0; }
  .cmp-cells { grid-template-columns: 1fr; gap: 10px; }
  .cmpd-point { grid-template-columns: 1fr; gap: 8px; }
  .cmpd-point-num { padding-top: 0; }
  .compare-cta-card { flex-direction: column; align-items: flex-start; }
}

/* ── Public /ambassadors — retainer badges + FAQ (added with the page port).
   New elements layered onto the ported .royalty-* / .tier-* system. ── */
.royalty-tier-card.amb-tier-retainer { border-color: var(--rise); }
.amb-retainer-badge {
  display: inline-block; margin-top: 6px; padding: 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--rise) 16%, transparent);
  color: var(--rise); font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.02em; white-space: nowrap;
}
.royalty-row.amb-retainer-line strong { color: var(--rise); }
.amb-faq { border-top: 1px solid var(--hairline); margin-top: 8px; }
.amb-faq-item { border-bottom: 1px solid var(--hairline); }
.amb-faq-item summary {
  cursor: pointer; list-style: none; padding: 20px 0;
  font-family: var(--display); font-size: clamp(18px, 2vw, 24px);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.amb-faq-item summary::-webkit-details-marker { display: none; }
.amb-faq-item summary::after { content: '+'; color: var(--fg-mute); font-family: var(--mono); font-size: 20px; }
.amb-faq-item[open] summary::after { content: '\2013'; }
.amb-faq-item p { padding: 0 0 20px; max-width: 68ch; color: var(--fg-soft); }

/* ── Wholesale buyer portal: invoice status pills ────────────────────────
   wholesale-dashboard.js emits class="status status-{enum}" on every invoice
   row, but .status rules only ever existed in admin-auth.css, which is loaded
   by page-admin-login.liquid and page-admin.liquid ONLY. The buyer portal
   loads circadia.css, so its status column rendered completely unstyled and
   an OVERDUE invoice looked identical to an open one to the buyer being
   dunned. These live here, in the stylesheet the portal actually loads;
   admin-auth.css is deliberately NOT pulled into a customer-facing page.

   Visual language is copied from .dash-status-pill in customer-dashboard.css
   so the two customer surfaces agree: mono, uppercase, hairline pill.

   NOT using --green. That token's own definition restricts it to offers,
   savings, roadmap, sustainability and science accents, and states that
   STATUS greens are a separate semantic system that deliberately does not use
   it. #8DE0A8 is the status green already used by .dash-status-pill.fulfilled,
   so paid invoices match paid commissions.

   Enum is open | paid | overdue | written_off (wholesale_invoices_status_check).
   Scoped under .wholesale-table so it cannot collide with any other .status. */
.wholesale-table .status {
  display: inline-flex; align-items: center;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  color: var(--fg-soft);
  white-space: nowrap;
}
/* Outstanding, not yet late: neutral, the default pill. */
.wholesale-table .status-open { color: var(--fg-soft); border-color: var(--hairline); }
/* Late. The one status that must draw the eye. Soft alert red rather than a
   harsh #c0392b, which is unreadable on the dark portal background. */
.wholesale-table .status-overdue {
  color: #e8907c;
  border-color: rgba(232,144,124,0.45);
  background: rgba(232,144,124,0.08);
}
/* Settled by payment. */
.wholesale-table .status-paid { color: #8DE0A8; border-color: rgba(141,224,168,0.4); }
/* Settled WITHOUT payment. Muted + dashed so it reads as closed-but-different
   at a glance, and is never mistaken for Paid. */
.wholesale-table .status-written_off {
  color: var(--fg-mute);
  border-color: var(--hairline-soft);
  border-style: dashed;
}