/* =============================================================
   NUYU WELLNESS — Stylesheet
   Order: tokens → reset → base → typography → utilities → components
   ============================================================= */

@import url('https://api.fontshare.com/v2/css?f[]=switzer@300,400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300..600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');
@import url('./tokens.css');

/* ---------- RESET ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

button {
  font: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

/* ---------- BASE ---------- */

html, body { min-height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern', 'liga', 'cv11';
  position: relative;
  isolation: isolate;
}

/* Background field — neutral bone only. Colored radials removed so the site
   doesn't read as a constant green + tan wash. Color now appears on specific
   elements (formula drops, plan cards, etc.) not as ambient background. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bone);
  pointer-events: none;
}


::selection {
  background: var(--moss-soft);
  color: var(--ink);
}

/* ---------- TYPOGRAPHY ---------- */

.display-1, .display-2, .display-3, .display-4, h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--ink);
  text-wrap: balance;           /* distribute lines evenly so titles never split badly */
}

/* Display scale — section titles dominate the body. Big jumps between levels. */
.display-1 { font-size: clamp(3rem, 8vw + 1rem, 7rem);   font-weight: 500; }
.display-2 { font-size: clamp(2.5rem, 6vw + 1rem, 5.5rem); font-weight: 500; }
.display-3 { font-size: clamp(2.25rem, 5vw + 1rem, 4.5rem); font-weight: 500; }   /* default section title */
.display-4 { font-size: clamp(1.75rem, 3vw + 1rem, 3rem); line-height: var(--lh-snug); font-weight: 500; }

h1 { font-size: clamp(2.75rem, 5vw + 1rem, 4.5rem); font-weight: 500; }
h2 { font-size: clamp(2.25rem, 4vw + 1rem, 3.5rem); font-weight: 500; }
h3 { font-size: clamp(1.625rem, 1.5vw + 1rem, 2.25rem); line-height: var(--lh-snug); font-weight: 500; }
h4 { font-size: var(--fs-22); line-height: var(--lh-snug); font-weight: 500; }

/* Display-text emphasis — no italic anywhere (Switzer doesn't have a real italic;
   browsers were synthesizing a slanted script which looks broken). Color only. */
.display-1 em, .display-2 em, .display-3 em, .display-4 em,
h1 em, h2 em, h3 em, h4 em,
.hero__display em, .close-cta__display em,
.showcase__name em {
  font-style: normal !important;
  color: var(--moss-deep);
  font-weight: 500;
}

p {
  line-height: var(--lh-loose);
  /* Prevent single-word orphans on the last line. Modern engines will
     re-flow so the last line carries at least two words when there's
     room to do so. Falls back to default wrapping on old browsers. */
  text-wrap: pretty;
}

.lede {
  font-size: clamp(1.125rem, 0.6vw + 1rem, 1.375rem);
  line-height: var(--lh-normal);
  color: var(--ink-2);
  max-width: 60ch;
}

.body-lg { font-size: var(--fs-18); line-height: var(--lh-loose); }
.body    { font-size: var(--fs-16); line-height: var(--lh-loose); }
.body-sm { font-size: var(--fs-14); line-height: var(--lh-normal); }
.caption { font-size: var(--fs-12); line-height: var(--lh-normal); color: var(--ink-3); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--moss-deep);
}

/* Legacy alias from v1 — now renders as moss-tinted condensed display */
.serif-italic {
  font-family: var(--font-display);
  font-style: normal;
  color: var(--moss-deep);
  font-variation-settings: 'opsz' var(--br-opsz-display), 'wdth' var(--br-wdth-narrow);
}

.muted { color: var(--text-muted); }
.text-clay { color: var(--clay-deep); }
.text-moss { color: var(--moss-deep); }

/* ---------- UTILITIES ---------- */

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

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

.section {
  padding-block: clamp(3rem, 8vw, 6rem);
}

.section-tight { padding-block: clamp(2rem, 5vw, 4rem); }

/* Full-bleed background variants (escape the .container width) */
.section--moss-bleed {
  background: linear-gradient(180deg, var(--moss-wash) 0%, rgba(221, 230, 220, 0.85) 100%);
  position: relative;
}
.section--moss-bleed::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(255,255,255,0.55), transparent 70%);
  pointer-events: none;
}
.section--moss-bleed > .container { position: relative; z-index: 1; }

.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-6); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.divider {
  height: 1px;
  background: var(--border);
  border: 0;
  margin-block: var(--space-7);
}

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

/* ---------- BUTTONS ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.875rem 1.5rem;
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 200ms var(--ease-out),
              color 200ms var(--ease-out),
              border-color 200ms var(--ease-out),
              transform 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
}

.btn:active { transform: translateY(1px); }

/* Tier 1 — BOOK / primary conversion. Metallic gold gradient, white text,
   gold glow + lift on hover. The money button. */
.btn--book {
  background: var(--gold-gradient-metallic);
  color: var(--white);
  border-color: transparent;
  box-shadow: var(--shadow-sm);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);   /* keep white legible over light gold highlights */
}
.btn--book:hover {
  color: var(--white);
  box-shadow: var(--glow-gold);
  transform: translateY(-2px);
}

/* Tier 2 — secondary actions. White pill, teal outline + teal text; fills
   teal with white text on hover. Both --primary and --secondary share this
   treatment, so no black button remains anywhere on the site. */
.btn--primary,
.btn--secondary {
  background: var(--white);
  color: var(--teal-deep);
  border-color: var(--teal);
}
.btn--primary:hover,
.btn--secondary:hover {
  background: var(--teal);
  color: var(--white);
  border-color: var(--teal);
  box-shadow: var(--glow-teal);
  transform: translateY(-2px);
}

/* Teal solid fill — optional emphasis variant (kept; never black). */
.btn--moss {
  background: var(--teal);
  color: var(--white);
  border-color: transparent;
}
.btn--moss:hover {
  background: var(--teal-deep);
  transform: translateY(-2px);
}

/* Tier 3 — tertiary / text link. Teal underline, darkens on hover. */
.btn--ghost {
  background: transparent;
  color: var(--teal-deep);
  padding: 0.5rem 0.75rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--teal);
}
.btn--ghost:hover {
  color: var(--teal-darker);
  text-decoration-color: var(--teal-darker);
}

.btn--lg { padding: 1.125rem 1.875rem; font-size: var(--fs-16); }
.btn--sm { padding: 0.625rem 1.125rem; font-size: var(--fs-12); }

.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.btn svg { width: 1em; height: 1em; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--ink);
  font-weight: 500;
  border-bottom: 1px solid var(--ink-4);
  padding-bottom: 2px;
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.link-arrow:hover { color: var(--moss-deep); border-color: var(--moss-deep); }
.link-arrow svg { width: 0.9em; transition: transform 200ms var(--ease-out); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- TAGS / PILLS ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.375rem 0.75rem;
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  background: var(--sand-soft);
  color: var(--ink-2);
  border: 1px solid var(--border);
}

.pill--moss { background: var(--moss-wash); color: var(--moss-deep); border-color: transparent; }
.pill--clay { background: var(--clay-soft); color: var(--clay-deep); border-color: transparent; }
.pill--ink  { background: var(--ink); color: var(--bone); border-color: transparent; }
.pill--soon { background: transparent; color: var(--ink-3); border-color: var(--ink-4); border-style: dashed; }

/* ---------- CARDS ---------- */

.card {
  background: var(--glass-cream);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: var(--glass-highlight);
  transition: transform 250ms var(--ease-out),
              box-shadow 250ms var(--ease-out),
              border-color 250ms var(--ease-out),
              background 250ms var(--ease-out);
}

.card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--glass-highlight), var(--shadow-lg);
  border-color: rgba(255, 255, 255, 0.6);
}

.card--bone { background: var(--glass-bone); }
.card--moss { background: var(--glass-moss); }
.card--clay { background: rgba(226, 203, 185, 0.55); }
.card--ink  {
  background: var(--glass-ink);
  color: var(--bone);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: var(--glass-highlight-ink);
}
.card--ink h2, .card--ink h3, .card--ink h4, .card--ink .display-3, .card--ink .display-4 { color: var(--bone); }

/* Drip card — for /menu and homepage preview */
.drip-card {
  background: var(--glass-cream);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: var(--glass-highlight);
  transition: transform 250ms var(--ease-out),
              box-shadow 250ms var(--ease-out),
              border-color 250ms var(--ease-out);
  position: relative;
  overflow: hidden;
}
.drip-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--glass-highlight), var(--shadow-lg);
  border-color: rgba(255, 255, 255, 0.6);
}

.drip-card__index {
  font-family: var(--font-display);
  font-size: var(--fs-14);
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.drip-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-28);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.drip-card__vibe {
  color: var(--ink-2);
  font-family: var(--font-display);
  font-size: var(--fs-18);
}
.drip-card__price {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  color: var(--ink);
}
.drip-card__perfect {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
}
.drip-card__cta { margin-top: var(--space-2); }
.drip-card--soon {
  background: var(--glass-bone);
  border-style: dashed;
  border-color: var(--ink-4);
  box-shadow: none;
}
.drip-card--soon .drip-card__name { color: var(--ink-3); }

/* Shot Bar — horizontal drag carousel. No card boxes. Each item is just a
   vial image stacked with compressed text below. */
.shot-carousel {
  position: relative;
  width: 100%;
  padding-bottom: var(--space-6);   /* room for pagination/progress UI */
}

.shot-carousel__track {
  display: flex;
  gap: clamp(3rem, 6vw, 6rem);   /* more breathing room — cards read as distinct */
  padding: var(--space-3) var(--gutter) var(--space-5);
  margin-inline: calc(var(--gutter) * -1);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  scroll-behavior: smooth;
}
.shot-carousel__track::-webkit-scrollbar { display: none; }
.shot-carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }

/* Scroll progress bar — retired in favor of dots only. Hidden but markup left
   in place so older pages don't break. */
.shot-carousel__progress { display: none; }

/* Pagination dots — clickable. Inactive: small light gray. Active: solid
   ink, slightly larger so the current item reads at a glance. */
.shot-carousel__dots {
  display: flex; gap: var(--space-3); justify-content: center; align-items: center;
  margin-top: var(--space-5);
}
.shot-carousel__dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--ink-4);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.shot-carousel__dot.is-active {
  background: var(--ink);
  transform: scale(1.4);            /* same dot, just bigger; matches the reference */
}
.shot-carousel__dot:hover { background: var(--ink-3); }
.shot-carousel__dot.is-active:hover { background: var(--ink); }

.shot-carousel__item {
  flex: 0 0 auto;
  width: clamp(260px, 24vw, 340px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.shot-carousel__nav {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--glass-bone);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: var(--glass-highlight), var(--shadow);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
  z-index: 2;
}
.shot-carousel:hover .shot-carousel__nav { opacity: 1; }
.shot-carousel__nav:hover { background: var(--bone); transform: translateY(-50%) scale(1.06); }
.shot-carousel__nav:active { transform: translateY(-50%) scale(0.96); }
.shot-carousel__nav--prev { left: var(--gutter); }
.shot-carousel__nav--next { right: var(--gutter); }
.shot-carousel__nav[disabled] { opacity: 0 !important; pointer-events: none; }
.shot-carousel__nav svg { width: 22px; height: 22px; }

/* Vial image — fills its container, full vial visible via object-fit: contain.
   No frame, white PNG background blends via mix-blend-mode. */
.shot-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  text-align: center;
  position: relative;
  transition: transform var(--dur) var(--ease-out);
}
.shot-card { transition: transform var(--dur) var(--ease-out); }
.shot-card:hover { transform: translateY(-8px); }

.shot-card__vial {
  width: 100%;
  aspect-ratio: 2 / 3;       /* matches the vial PNG (1024 x 1536) so the whole vial shows */
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
  position: relative;
  pointer-events: none;
}
/* Colored halos removed — vials now blend cleanly into the page, no card outline.
   Definition comes from the drop-shadow on the image alone. */

.shot-card__vial img {
  width: 100%;
  height: 100%;
  object-fit: contain;        /* full vial visible, never cropped */
  mix-blend-mode: multiply;   /* white PNG background blends into the page tone */
  /* No drop-shadow — multiply + drop-shadow created a dark halo around the vial */
  transition: transform var(--dur-slow) var(--ease-out);
}
.shot-card:hover .shot-card__vial img {
  transform: scale(1.06);
}

/* When a .formula-drop is used inside a shot-carousel card instead of a vial,
   it gets the same height treatment so cards stay uniform. */
.shot-carousel__item .formula-drop {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  margin-bottom: var(--space-4);
  max-width: 100%;
}
.shot-carousel__item .formula-drop__img { mix-blend-mode: multiply; }
.shot-card:hover .formula-drop__img { transform: scale(1.06); }
.shot-card .formula-drop__img { transition: transform var(--dur-slow) var(--ease-out); }

/* CONTAIN the colored aura inside each card so neighboring drops don't blend.
   Each carousel item creates its own stacking context; the aura pseudo-element
   stays inside the drop's own box (inset: 0) with a tighter blur. */
.shot-carousel__item {
  isolation: isolate;
}
.shot-carousel__item .formula-drop::before {
  inset: -2%;           /* was -25% — keeps the glow within the card footprint */
  filter: blur(22px);   /* was 36px — softer halo, no neighbor bleed */
  opacity: 0.85;
}

/* Card content (text block under the vial) — left aligned, compressed.
   Hierarchy:  TITLE (biggest)  →  desc (smaller)  →  price + learn-more row */
.shot-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
}
.shot-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-22);           /* TITLE — clearly largest in the card */
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.shot-card__use {
  font-size: var(--fs-12);
  color: var(--moss-deep);
  letter-spacing: 0.02em;
  margin-top: var(--space-1);
}
.shot-card__use strong {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: 0.85em;
}
.shot-card__desc {
  font-size: var(--fs-14);           /* DESCRIPTION — smaller than title */
  line-height: var(--lh-loose);
  color: var(--ink-2);
  margin-top: var(--space-1);
}
.shot-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.shot-card__price {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}
.shot-card__price em {
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--fs-12);           /* SUBTEXT — smallest */
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
.shot-card__learn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 0.875rem;
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
  white-space: nowrap;
}
.shot-card__learn:hover {
  background: var(--ink);
  color: var(--bone);
}
.shot-card__learn svg { width: 12px; height: 12px; }

/* Event card v2 — image hero with title + venue overlaid, Directions CTA,
   details panel below with date/time/RSVP stats. Inspired by the TrailCard
   pattern but in our palette. */
.event-card {
  background: var(--bone);
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.event-card:hover {
  transform: translateY(-4px);
  border-color: var(--ink-4);
  box-shadow: var(--shadow);
}

.event-card__hero {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--cream);
}
.event-card__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* Default fallback — moss-tinted gradient; override via inline style for real photos */
  background-image: var(--event-image, linear-gradient(135deg, var(--moss-soft) 0%, var(--moss-wash) 50%, var(--cream) 100%));
  transition: transform var(--dur-slow) var(--ease-out);
}
.event-card:hover .event-card__image { transform: scale(1.04); }

.event-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(34, 30, 25, 0.55) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5);
}
.event-card__title-block { color: var(--bone); flex: 1; min-width: 0; }
.event-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--bone);
  text-shadow: 0 1px 2px rgba(0,0,0,0.20);
}
.event-card__venue {
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(250, 247, 241, 0.85);
  margin-top: 4px;
}
.event-card__directions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 0.875rem;
  background: var(--bone);
  color: var(--ink);
  border-radius: var(--radius-pill);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  flex-shrink: 0;
}
.event-card__directions:hover {
  background: var(--moss);
  color: var(--bone);
  transform: scale(1.04);
}
.event-card__directions svg { width: 12px; height: 12px; }

.event-card__details {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.event-card__body {
  color: var(--ink-2);
  font-size: var(--fs-14);
  line-height: var(--lh-loose);
}
.event-card__stats {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-top: 1px solid var(--sand);
  border-bottom: 1px solid var(--sand);
}
.event-card__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.event-card__stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
}
.event-card__stat-label {
  font-size: var(--fs-12);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}
.event-card__cta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

/* Review card — for reviews strip on home + /reviews */
.review-card {
  background: var(--glass-cream);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: var(--glass-highlight);
  display: flex; flex-direction: column; gap: var(--space-4);
  position: relative;
}
.review-card__stars {
  display: flex; gap: 2px;
  color: var(--clay-deep);
}
.review-card__stars svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.review-card__body {
  font-family: var(--font-display);
  font-size: var(--fs-22);          /* TITLE-equivalent — the quote leads */
  line-height: var(--lh-snug);
  color: var(--ink);
  letter-spacing: -0.01em;
  font-weight: 500;
}
.review-card__attribution {
  font-size: var(--fs-12);          /* SUBTEXT — smaller than quote */
  color: var(--ink-3);
  margin-top: auto;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.review-card--placeholder .review-card__body { color: var(--ink-3); }
.review-card--placeholder::after {
  content: 'Real review coming soon';
  position: absolute;
  top: var(--space-4); right: var(--space-4);
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-family: var(--font-body);
}

/* Start-Here promo strip on the homepage */
.start-strip {
  background: var(--glass-moss);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: var(--glass-highlight);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-6);
  align-items: center;
}
.start-strip__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.start-strip__body { color: var(--ink-2); font-size: var(--fs-16); line-height: var(--lh-loose); margin-top: var(--space-2); }
@media (max-width: 700px) {
  .start-strip { grid-template-columns: 1fr; }
}

/* Section header centered variant */
.section-header--centered {
  text-align: center;
  margin-inline: auto;
}
.section-header--centered .section-header__lede {
  margin-inline: auto;
}

/* Closing CTA — full-bleed moss */
.close-cta {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.close-cta__display {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw + 1rem, 4rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.close-cta__display em { font-style: normal; color: var(--moss-deep); }
.close-cta__lede {
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
  color: var(--ink-2);
  margin-top: var(--space-5);
  line-height: var(--lh-normal);
}
.close-cta__cta {
  display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center;
  margin-top: var(--space-7);
}

/* Plan card v2 — light, on bone with sand border. Featured tier is moss-tinted.
   No more dark Ink variant. Clear vertical hierarchy:
     tier  ·  name  ·  price  ·  description  ·  CTA  ·  divider  ·  includes  */
.plan-card {
  background: var(--bone);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border: 1px solid var(--sand);
  box-shadow: none;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.plan-card:hover {
  transform: translateY(-4px);
  border-color: var(--ink-4);
  box-shadow: var(--shadow);
}

.plan-card__tier {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--moss-deep);
  font-weight: 500;
}
.plan-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-36);            /* TITLE */
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--ink);
}
.plan-card__price {
  font-family: var(--font-display);
  font-size: var(--fs-36);            /* LARGE — equal weight with name */
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.plan-card__price em {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--ink-3);
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
.plan-card__desc {
  font-size: var(--fs-14);             /* BODY — smaller than title/price */
  color: var(--ink-2);
  line-height: var(--lh-loose);
  margin: var(--space-2) 0 var(--space-4);
}
.plan-card__divider {
  height: 1px;
  background: var(--sand);
  margin: var(--space-5) 0 var(--space-2);
}
.plan-card__includes-title {
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--space-1);
}
.plan-card__includes {
  display: flex; flex-direction: column; gap: var(--space-2);
}
.plan-card__includes li {
  display: flex; align-items: flex-start; gap: var(--space-3);
  color: var(--ink-2);
  font-size: var(--fs-14);
}
.plan-card__includes li::before {
  content: '';
  width: 6px; height: 6px;
  margin-top: 0.55em;
  background: var(--moss);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Featured tier — moss-washed, slightly more prominent */
.plan-card--featured {
  background: var(--moss-wash);
  border-color: var(--moss-soft);
  position: relative;
}
.plan-card--featured::after {
  content: 'Most chosen';
  position: absolute;
  top: -12px; right: var(--space-5);
  background: var(--ink);
  color: var(--bone);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}
.plan-card--featured .plan-card__divider { background: var(--moss-soft); }

/* Legacy dark Ink variant removed — neutralized as no-op */
.plan-card--ink { background: var(--bone); color: var(--ink); border-color: var(--sand); box-shadow: none; }
.plan-card--ink .plan-card__name,
.plan-card--ink .plan-card__price { color: var(--ink); }
.plan-card--ink .plan-card__includes li { color: var(--ink-2); }

/* ---------- NAV ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  /* Pure white header — frosted so colored sections/video read softly underneath.
     (Was warm-bone rgba(250,247,241) — the tan the rebrand had to remove.) */
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid transparent;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.6);
  transition: border-color 200ms var(--ease-out),
              background 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out);
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 var(--border);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-4);
}

.nav__brand {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  letter-spacing: 0.05em;
  font-weight: 500;
  font-variation-settings: 'opsz' 48, 'wdth' 100;
}
.nav__brand em {
  font-style: normal;
  color: var(--clay-deep);
  font-variation-settings: 'opsz' 48, 'wdth' 80;
}

.nav__links {
  display: flex; align-items: center; gap: var(--space-6);
}
/* Nav link — clean flat link with expanding underline on hover,
   solid underline when it's the page you're on. */
.nav__link {
  position: relative;
  font-size: var(--fs-14);
  color: var(--teal-deep);
  text-decoration: none;
  padding-block: var(--space-2);
  transition: color 200ms var(--ease-out);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 1.5px;
  background: var(--gold);
  border-radius: 2px;
  transition: left 200ms var(--ease-out),
              right 200ms var(--ease-out),
              background 200ms var(--ease-out);
}
.nav__link:hover { color: var(--gold-600); }
.nav__link:hover::after { left: 0; right: 0; }

/* ACTIVE — the page you're on. Underline fully extended, teal so it's
   visibly different from a normal (gold) hover. */
.nav__link.is-active { color: var(--teal-darker); }
.nav__link.is-active::after {
  left: 0;
  right: 0;
  height: 2px;
  background: var(--teal);
}

.nav__cta { display: flex; align-items: center; gap: var(--space-4); }

/* Sign-in text link — sits before the Book Now button in the nav */
.nav__signin {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--teal-deep);
  text-decoration: none;
  position: relative;
  padding-block: var(--space-2);
  transition: color 200ms var(--ease-out);
}
.nav__signin::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0.6);
  transform-origin: center;
  opacity: 0;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.nav__signin:hover { color: var(--gold-600); }
.nav__signin:hover::after { opacity: 1; transform: scaleX(1); }

@media (max-width: 880px) {
  .nav__signin { display: none; }   /* moved into the mobile drawer */
}

.nav__toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--radius);
  align-items: center; justify-content: center;
}
.nav__toggle:hover { background: var(--surface); }

.nav__mobile {
  display: none;
}

@media (max-width: 880px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__mobile {
    display: block;
    padding: var(--space-3) var(--gutter) var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: var(--glass-highlight);
  }
  .nav__mobile[hidden] { display: none; }
  .nav__mobile nav {
    display: flex; flex-direction: column; gap: var(--space-2);
  }
  .nav__mobile .nav__link {
    padding: var(--space-3) 0;
    font-size: var(--fs-18);
    font-family: var(--font-display);
    letter-spacing: var(--tracking-tight);
    border-bottom: 1px solid var(--border);
  }
  .nav__mobile .nav__link:last-child { border-bottom: 0; }
}

body.is-nav-open { overflow: hidden; }

/* ---------- FOOTER v2 ---------- */

.footer {
  background: var(--cream);
  padding-block: clamp(4rem, 8vw, 6rem) clamp(2rem, 3vw, 3rem);
  margin-top: var(--space-10);
}

/* Top region: brand block + columns + signup */
.footer__top {
  display: grid;
  grid-template-columns: 1.2fr 2fr 1.3fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.footer__columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}

@media (max-width: 1000px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__signup { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .footer__top { grid-template-columns: 1fr; }
  .footer__columns { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .footer__columns { grid-template-columns: 1fr; }
}

.footer__brand { display: flex; flex-direction: column; gap: var(--space-4); }
.footer__title-link { text-decoration: none; display: inline-block; }
.footer__title {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  margin: 0;
  letter-spacing: 0.05em;
}
.footer__title em {
  font-style: normal;
  color: var(--clay-deep);
}
.footer__desc {
  font-size: var(--fs-14);
  color: var(--ink-2);
  line-height: var(--lh-loose);
  max-width: 32ch;
}

.footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.footer__social a {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bone);
  color: var(--ink-2);
  border: 1px solid var(--sand);
  transition: color var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.footer__social a:hover {
  color: var(--bone);
  background: var(--moss-deep);
  border-color: var(--moss-deep);
  transform: translateY(-2px);
}

.footer__heading {
  font-size: var(--fs-12);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-3);
  margin-bottom: var(--space-4);
}
.footer__list { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__list a {
  color: var(--ink-2);
  font-size: var(--fs-14);
  text-decoration: none;
  position: relative;
  white-space: nowrap;          /* never break footer link text mid-word */
  display: inline-block;
  transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.footer__list a:hover {
  color: var(--moss-deep);
  transform: translateX(4px);   /* slide instead of padding so it doesn't bump the column width */
}

/* Newsletter signup */
.footer__signup-desc {
  margin-bottom: var(--space-4);
}
.footer__signup-form {
  display: flex;
  align-items: center;
  background: var(--bone);
  border: 1px solid var(--sand);
  border-radius: var(--radius-pill);
  padding: 4px;
  transition: border-color var(--dur) var(--ease-out);
}
.footer__signup-form:focus-within { border-color: var(--ink); }
.footer__signup-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0.625rem 0.875rem;
  font-size: var(--fs-14);
  color: var(--ink);
  outline: none;
}
.footer__signup-input::placeholder { color: var(--ink-4); }
.footer__signup-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 200ms var(--ease-out), box-shadow 200ms var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.footer__signup-btn:hover { background: var(--teal-deep); box-shadow: var(--glow-teal); transform: scale(1.06); }
.footer__signup-btn:active { transform: scale(0.96); }
.footer__signup-btn svg { width: 14px; height: 14px; }
.footer__signup-status {
  font-size: var(--fs-12);
  margin-top: var(--space-2);
  transition: opacity var(--dur) var(--ease-out);
}
.footer__signup-status[hidden] { display: none; }

/* Bottom region: copyright + legal links */
.footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-12);
  color: var(--ink-3);
}
.footer__copyright { margin: 0; }
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2rem);
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__legal a {
  color: var(--ink-3);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}
.footer__legal a:hover { color: var(--ink); }

/* ---------- COOKIE BANNER ---------- */
.cookie-banner {
  position: fixed;
  bottom: var(--space-5);
  left: var(--space-5);
  right: auto;
  max-width: 460px;
  z-index: var(--z-sticky);
  background: var(--glass-ink);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  color: var(--bone);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--glass-highlight-ink), 0 24px 60px -24px rgba(42, 38, 32, 0.45);
  padding: var(--space-4) var(--space-5);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.cookie-banner.is-visible { opacity: 1; transform: translateY(0); }
.cookie-banner.is-dismissed { opacity: 0; transform: translateY(20px); }

.cookie-banner__body {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.cookie-banner__text {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-12);
  line-height: var(--lh-loose);
  color: rgba(250, 247, 241, 0.85);
  margin: 0;
}
.cookie-banner__text a {
  color: var(--moss-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner__text a:hover { color: var(--bone); }
.cookie-banner__actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}
.cookie-banner__btn {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.cookie-banner__btn--ghost {
  background: transparent;
  color: rgba(250, 247, 241, 0.7);
  border-color: rgba(255, 255, 255, 0.18);
}
.cookie-banner__btn--ghost:hover { color: var(--bone); border-color: rgba(255, 255, 255, 0.4); }
.cookie-banner__btn--solid {
  background: var(--bone);
  color: var(--ink);
}
.cookie-banner__btn--solid:hover { background: var(--moss); color: var(--ink); }

@media (max-width: 600px) {
  .cookie-banner {
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
    max-width: none;
    padding: var(--space-3) var(--space-4);
  }
  .cookie-banner__body { flex-direction: column; align-items: stretch; }
  .cookie-banner__actions { justify-content: flex-end; }
}

/* ---------- FORMS ---------- */

.field { display: flex; flex-direction: column; gap: var(--space-2); }

.field__label {
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--ink-2);
}
.field__label em { color: var(--clay-deep); font-style: normal; font-weight: 500; }

.field__hint {
  font-size: var(--fs-12);
  color: var(--ink-3);
  line-height: var(--lh-normal);
}

.input, .textarea, .select {
  display: block;
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--bone);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--fs-16);
  color: var(--ink);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--moss);
  box-shadow: var(--ring);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }

.textarea { min-height: 8rem; resize: vertical; line-height: var(--lh-normal); }

.field--error .input,
.field--error .textarea,
.field--error .select { border-color: var(--error); }
.field__error {
  font-size: var(--fs-12);
  color: var(--error);
}

/* ---------- FAQ / ACCORDION ---------- */

.faq { display: flex; flex-direction: column; gap: var(--space-2); }

.faq__item {
  border-radius: var(--radius);
  background: var(--glass-cream);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: var(--glass-highlight);
  transition: border-color var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out);
}
.faq__item[open] {
  border-color: rgba(255, 255, 255, 0.6);
  background: var(--glass-bone);
}

.faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  font-size: var(--fs-18);
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
  list-style: none;
}
.faq__summary::-webkit-details-marker { display: none; }
.faq__summary::after {
  content: '';
  width: 14px; height: 14px;
  flex-shrink: 0;
  background: transparent;
  border-right: 1.5px solid var(--ink-2);
  border-bottom: 1.5px solid var(--ink-2);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease-out);
  margin-top: -4px;
}
.faq__item[open] .faq__summary::after { transform: rotate(-135deg); margin-top: 4px; }

.faq__body {
  padding: 0 var(--space-6) var(--space-5);
  color: var(--ink-2);
  line-height: var(--lh-loose);
  font-size: var(--fs-16);
}

/* ---------- TABS ---------- */

.tabs {
  display: inline-flex;
  padding: 4px;
  background: var(--cream);
  border-radius: var(--radius-pill);
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Five-tab variant used on /faqs — wider sizing, wrapping support */
.faq-tabs { border-radius: var(--radius-lg); padding: 6px; }
@media (max-width: 700px) {
  .faq-tabs { width: 100%; }
  .faq-tabs .tab { flex: 1 1 calc(50% - 4px); text-align: center; font-size: var(--fs-12); }
}

.tab {
  padding: 0.625rem 1.25rem;
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--ink-2);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
  white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.is-active {
  background: var(--ink);
  color: var(--bone);
}

.tabpanel { display: none; }
.tabpanel.is-active {
  display: block;
  animation: fadeIn var(--dur) var(--ease-out);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- SECTION HEADER ---------- */

.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 720px;
  margin-bottom: var(--space-7);
}
.section-header__lede { color: var(--ink-2); font-size: var(--fs-18); line-height: var(--lh-loose); }

/* ---------- HERO ---------- */

.hero {
  min-height: 100vh;
  padding-block: clamp(6rem, 14vh, 10rem) clamp(3rem, 8vw, 6rem);
  position: relative;
  background: linear-gradient(180deg, var(--bone) 0%, var(--cream) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__display {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 12vw + 1rem, 11rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 18ch;
  font-weight: 500;
  font-variation-settings: 'opsz' var(--br-opsz-display), 'wdth' var(--br-wdth-normal);
}

.hero__lede {
  max-width: 50ch;
  font-size: clamp(1.125rem, 0.6vw + 1rem, 1.375rem);
  color: var(--ink-2);
  margin-top: var(--space-5);
}

.hero__cta-row {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-7);
}

/* ---------- BOOK NOW STICKY (mobile) ---------- */

.book-sticky {
  display: none;
}
@media (max-width: 600px) {
  .book-sticky {
    position: fixed;
    bottom: var(--space-4);
    right: var(--space-4);
    z-index: var(--z-sticky);
    display: inline-flex;
    box-shadow: var(--shadow-lg);
  }
}

/* ---------- REVEAL (scroll-triggered) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-1 { transition-delay: 80ms; }
.reveal--delay-2 { transition-delay: 160ms; }
.reveal--delay-3 { transition-delay: 240ms; }
.reveal--delay-4 { transition-delay: 320ms; }

/* Reduced-motion: skip scroll-reveal entirely — content shows immediately. */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .reveal--delay-1,
  .reveal--delay-2,
  .reveal--delay-3,
  .reveal--delay-4 { transition-delay: 0ms; }
}

/* ---------- STYLEGUIDE-ONLY ---------- */

.sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-5); }

.sg-swatch {
  display: flex; flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--sand);
  background: var(--cream);
}
.sg-swatch__color {
  height: 110px;
  border-bottom: 1px solid rgba(42, 38, 32, 0.14);
}
.sg-swatch__meta {
  padding: var(--space-3) var(--space-4);
  background: var(--bone);
  font-size: var(--fs-12);
  display: flex; flex-direction: column; gap: 2px;
}
.sg-swatch__name { font-weight: 500; color: var(--ink); }
.sg-swatch__hex { font-family: var(--font-mono); color: var(--ink-3); }

.sg-block {
  padding: var(--space-7) 0;
  border-bottom: 1px solid var(--border);
}
.sg-block:last-child { border-bottom: 0; }
.sg-block__heading {
  display: flex; align-items: baseline; gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.sg-block__heading .eyebrow { color: var(--ink-3); }

.sg-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.sg-stack { display: flex; flex-direction: column; gap: var(--space-2); }

.sg-typescale > * { margin-block: var(--space-2); }
.sg-typescale .meta {
  display: inline-block;
  margin-left: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--ink-3);
  font-style: normal;
  letter-spacing: 0;
}

.sg-iconwall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: var(--space-3);
}
.sg-icon {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-4);
  background: var(--bone);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: var(--fs-12);
  color: var(--ink-3);
}
.sg-icon svg { width: 24px; height: 24px; color: var(--ink); }

/* =============================================================
   FORMULA CAROUSEL — big formula names in a horizontal scroller.
   Inspired by the ruler-carousel pattern but WITHOUT the ruler lines.
   Active item is full-color and full-size, neighbors fade and shrink.
   Click a name to scroll-snap to it and jump to its detail section.
   ============================================================= */
.formula-carousel {
  position: relative;
  width: 100%;
  padding-block: clamp(2rem, 4vw, 3rem);
  isolation: isolate;
}
.formula-carousel::before,
.formula-carousel::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(2rem, 8vw, 7rem);
  z-index: 2;
  pointer-events: none;
}
.formula-carousel::before { left: 0;  background: linear-gradient(90deg, var(--bone), transparent); }
.formula-carousel::after  { right: 0; background: linear-gradient(270deg, var(--bone), transparent); }

.formula-carousel__track {
  display: flex;
  gap: clamp(2rem, 4vw, 4rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-inline: 50%;       /* allows first + last items to center */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.formula-carousel__track::-webkit-scrollbar { display: none; }
.formula-carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }

.formula-carousel__item {
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw + 1rem, 4.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-4);
  opacity: 0.45;
  transform: scale(0.85);
  transform-origin: center bottom;
  transition: color var(--dur) var(--ease-out),
              opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
  white-space: nowrap;
}
.formula-carousel__item:hover { color: var(--ink-2); opacity: 0.75; }
.formula-carousel__item.is-active {
  color: var(--ink);
  opacity: 1;
  transform: scale(1);
}
.formula-carousel__item .formula-carousel__sub {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color var(--dur) var(--ease-out);
}
.formula-carousel__item.is-active .formula-carousel__sub { color: var(--moss-deep); }

/* Formula detail block — each formula's own deep card on /menu */
.formula-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 6rem);
  border-bottom: 1px solid var(--sand);
}
.formula-detail:last-child { border-bottom: 0; }
.formula-detail__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.2;
  display: flex; align-items: center; justify-content: center;
  isolation: isolate;
}
.formula-detail__visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 30px 50px rgba(42, 38, 32, 0.18));
}
.formula-detail__visual::before {
  content: '';
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at 50% 55%, var(--detail-aura, rgba(122, 179, 200, 0.55)), transparent 60%);
  filter: blur(40px);
  z-index: -1;
  animation: aura-drift 24s var(--ease-soft) infinite alternate;
}
.formula-detail--reset    { --detail-aura: rgba(122, 179, 200, 0.55); }
.formula-detail--recovery { --detail-aura: rgba(190, 165, 145, 0.55); }
.formula-detail--skin     { --detail-aura: rgba(220, 200, 155, 0.55); }
.formula-detail--immunity { --detail-aura: rgba(216, 156, 122, 0.65); }
.formula-detail--classic  { --detail-aura: rgba(168, 162, 153, 0.50); }
.formula-detail--active   { --detail-aura: rgba(143, 168, 142, 0.65); }
.formula-detail--nad      { --detail-aura: rgba(195, 195, 195, 0.40); }

.formula-detail__content { display: flex; flex-direction: column; gap: var(--space-4); }
.formula-detail__index {
  font-family: var(--font-display);
  font-size: var(--fs-14);
  font-style: normal;
  color: var(--moss-deep);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
}
.formula-detail__name {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw + 1rem, 4.5rem);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.02em;
}
.formula-detail__name em { font-style: normal; color: var(--moss-deep); }
.formula-detail__vibe {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  color: var(--ink-2);
}
.formula-detail__body { color: var(--ink-2); font-size: var(--fs-16); line-height: var(--lh-loose); max-width: 56ch; }
.formula-detail__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--sand);
  border-bottom: 1px solid var(--sand);
}
.formula-detail__meta-block { display: flex; flex-direction: column; gap: var(--space-1); }
.formula-detail__meta-label {
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-3);
}
.formula-detail__meta-value { font-size: var(--fs-14); color: var(--ink-2); line-height: var(--lh-loose); }
.formula-detail__price {
  font-family: var(--font-display);
  font-size: var(--fs-36);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.formula-detail__pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.formula-detail__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }

.formula-detail--nad .formula-detail__visual { opacity: 0.7; }
.formula-detail--nad .formula-detail__price { color: var(--ink-3); }

@media (max-width: 900px) {
  .formula-detail { grid-template-columns: 1fr; }
  .formula-detail__visual { max-width: 320px; margin-inline: auto; }
  .formula-detail__meta { grid-template-columns: 1fr; }
}

/* Reverse layout for alternating formula detail rows */
.formula-detail--reverse .formula-detail__visual { order: 2; }
.formula-detail--reverse .formula-detail__content { order: 1; }
@media (max-width: 900px) {
  .formula-detail--reverse .formula-detail__visual { order: 1; }
  .formula-detail--reverse .formula-detail__content { order: 2; }
}

/* =============================================================
   ETHEREAL SHADOW — SVG turbulence + displacement, organic warping
   cloud-shape with a film-grain noise overlay on top.
   Mounts wherever <div class="ethereal-shadow"> sits inside a relative parent.
   ============================================================= */
.ethereal-shadow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--bone);
  z-index: 0;
}
.ethereal-shadow__filter {
  position: absolute;
  width: 0;
  height: 0;
}
.ethereal-shadow__shape {
  position: absolute;
  inset: -80px;
  background-color: rgba(143, 168, 142, 0.55);   /* moss — our brand color */
  -webkit-mask-image: url('https://framerusercontent.com/images/ceBGguIpUU8luwByxuQz79t7To.png');
          mask-image: url('https://framerusercontent.com/images/ceBGguIpUU8luwByxuQz79t7To.png');
  -webkit-mask-size: cover;
          mask-size: cover;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  filter: url(#ethereal-filter) blur(4px);
}
.ethereal-shadow__noise {
  position: absolute;
  inset: 0;
  background-image: url('https://framerusercontent.com/images/g0QcWrxr87K0ufOxIUFBakwYA8.png');
  background-size: 240px;
  background-repeat: repeat;
  opacity: 0.45;
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  .ethereal-shadow__shape { animation: none; filter: blur(20px); }
}
/* =============================================================
   QUIZ — inline 5-step formula finder. Boxed, single panel at a time,
   panels cross-fade as you answer. Lives on the homepage.
   ============================================================= */
.quiz {
  max-width: 720px;
  margin: 0 auto;
  background: var(--bone);
  border: 1px solid var(--sand);
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow: 0 24px 50px -30px rgba(42, 38, 32, 0.15);
  position: relative;
}

.quiz__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.quiz__step {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
}
.quiz__progress {
  display: flex;
  gap: var(--space-2);
}
.quiz__progress-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--ink-4);
  transition: background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              width var(--dur) var(--ease-out);
}
.quiz__progress-dot.is-active {
  background: var(--ink);
  border-color: var(--ink);
  width: 24px;
}

.quiz__panel {
  display: none;
  animation: quiz-fade-in 400ms var(--ease-out);
}
.quiz__panel.is-active { display: block; }

@keyframes quiz-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.quiz__question {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2.25rem);     /* TITLE within the box */
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--space-5);
  text-wrap: balance;
}
.quiz__hint {
  font-size: var(--fs-14);
  color: var(--ink-3);
  margin-top: calc(-1 * var(--space-3));
  margin-bottom: var(--space-5);
  line-height: var(--lh-loose);
}

.quiz__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.quiz__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  padding: var(--space-4) var(--space-5);
  background: var(--cream);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.quiz__option::after {
  content: '→';
  color: var(--ink-4);
  font-family: var(--font-body);
  transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.quiz__option:hover {
  background: var(--sand);
  border-color: var(--ink-4);
}
.quiz__option:hover::after { color: var(--ink); transform: translateX(3px); }
.quiz__option.is-selected {
  background: var(--sand);
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.quiz__option.is-selected::after { color: var(--ink); }

/* Result panel */
.quiz__panel--result { text-align: center; padding: var(--space-3) 0; }
.quiz__result-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--moss-deep);
  margin-bottom: var(--space-3);
}
.quiz__result-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw + 1rem, 3.25rem);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.quiz__result-vibe {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  color: var(--moss-deep);
  margin-top: var(--space-2);
}
.quiz__result-desc {
  font-size: var(--fs-16);
  color: var(--ink-2);
  line-height: var(--lh-loose);
  max-width: 50ch;
  margin: var(--space-4) auto 0;
}
.quiz__result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-6);
}

/* Footer — Back · position · Next */
.quiz__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--sand);
}
.quiz__foot[hidden] { display: none; }
.quiz__back, .quiz__next {
  background: transparent;
  border: 0;
  padding: var(--space-2) 0;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.quiz__back:hover:not(:disabled),
.quiz__next:hover:not(:disabled) { color: var(--ink); }
.quiz__back:disabled, .quiz__next:disabled { opacity: 0.3; cursor: not-allowed; }
.quiz__pos {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* =============================================================
   VERTICAL CUT REVEAL — text rises into place from below.
   Inspired by Daniel Petho's pattern. JS splits text into char spans,
   each clipped by overflow: hidden, and translated from 100% → 0%
   with a staggered transition-delay.
   ============================================================= */
.vcr-word {
  display: inline-flex;
  vertical-align: top;
  overflow: hidden;
}
.vcr-char {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.vcr.is-revealed .vcr-char { transform: translateY(0); }

/* =============================================================
   v2 ADDITIONS — Light effects, showcase, quiz badge, motion
   ============================================================= */

/* ---------- LIGHT BLOBS ---------- */
/* Slowly drifting soft radial glows for product/plan card backdrops.
   Wrap a card in .has-aura, then drop .aura inside. */

.has-aura { position: relative; isolation: isolate; }

.aura {
  position: absolute;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  filter: blur(40px);
  opacity: 0.65;
  animation: aura-drift 22s var(--ease-soft) infinite alternate;
}
.aura--moss {
  background:
    radial-gradient(circle at 30% 40%, rgba(143, 168, 142, 0.55), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(183, 199, 181, 0.45), transparent 60%);
}
.aura--clay {
  background:
    radial-gradient(circle at 30% 40%, rgba(201, 163, 139, 0.50), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(226, 203, 185, 0.45), transparent 60%);
}
.aura--ink {
  background:
    radial-gradient(circle at 30% 30%, rgba(201, 163, 139, 0.40), transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(143, 168, 142, 0.40), transparent 60%);
}

@keyframes aura-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(2%, -3%) scale(1.08); }
  100% { transform: translate(-2%, 3%) scale(1.04); }
}

/* ---------- HERO LIGHT FIELD ---------- */

.hero {
  overflow: hidden;
}
.hero__lights {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero__light {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  animation: hero-light 24s var(--ease-soft) infinite alternate;
}
/* Neutral hero lights — slate only, lower opacity. No green or tan tint. */
.hero__light--a { top: -10%; left: -10%; width: 65%; aspect-ratio: 1; background: radial-gradient(circle, rgba(149, 165, 170, 0.20), transparent 65%); animation-duration: 26s; }
.hero__light--b { bottom: -15%; right: -10%; width: 55%; aspect-ratio: 1; background: radial-gradient(circle, rgba(193, 205, 209, 0.18), transparent 65%); animation-duration: 30s; animation-delay: -8s; }
.hero__light--c { top: 30%; right: 10%; width: 40%; aspect-ratio: 1; background: radial-gradient(circle, rgba(149, 165, 170, 0.15), transparent 65%); animation-duration: 22s; animation-delay: -12s; }

.hero .container { position: relative; z-index: 1; }

@keyframes hero-light {
  0%   { transform: translate(0, 0)   scale(1);     opacity: 0.5; }
  50%  { transform: translate(5%, 4%) scale(1.12);  opacity: 0.7; }
  100% { transform: translate(-3%, -2%) scale(1.05); opacity: 0.55; }
}

.hero__scroll-cue {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-3);
  animation: cue-bounce 2.4s var(--ease-soft) infinite;
}
.hero__scroll-cue::after {
  content: '';
  width: 1px; height: 36px;
  background: linear-gradient(180deg, var(--ink-3), transparent);
}
@keyframes cue-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.8; }
  50%      { transform: translateX(-50%) translateY(8px); opacity: 1; }
}

/* ---------- SHOWCASE — scroll-pinned product reveal ---------- */

.showcase {
  position: relative;
  padding-block: clamp(2rem, 5vw, 4rem);
}

.showcase__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 8vw, 8rem);     /* bigger gap pushes content right, away from drop */
  align-items: flex-start;
}

.showcase__sticky {
  position: sticky;
  top: 12vh;
  height: 76vh;
  display: flex; align-items: center; justify-content: center;
  isolation: isolate;
}

.showcase__visual {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  pointer-events: none;
  z-index: 0;
}
.showcase__visual.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

/* Drop — bare water droplet on the page, no frame. The SVG renders as a
   glass-clear droplet; the per-formula COLOR comes from a soft radial aura
   behind it, which bleeds through the drop's refraction-like transparency. */
.formula-drop {
  position: relative;
  /* Bigger bag for more emphasis (was 82%/380px). */
  width: min(94%, 460px);
  /* Match the actual photo aspect (1052x1495 ≈ 0.704) so the wrapper hugs
     the bag without padding. */
  aspect-ratio: 1052 / 1495;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  filter: drop-shadow(0 30px 40px rgba(42, 38, 32, 0.12));
}
.formula-drop__img,
.formula-drop svg {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
  /* Bag photos have a near-white (#FDFDFD–#EFEFEF) backdrop that reads as
     seamless on the white page; the per-formula aura behind glows as a
     halo around the bag (each --drop-aura unchanged). No blend / mask. */
}

/* Soft colored aura behind the drop — drives the per-formula "color change". */
.formula-drop::before {
  content: '';
  position: absolute;
  inset: -25%;
  background: radial-gradient(circle at 50% 55%, var(--drop-aura, rgba(122, 179, 200, 0.65)), transparent 60%);
  filter: blur(36px);
  z-index: 0;
  animation: aura-drift 22s var(--ease-soft) infinite alternate;
  transition: background var(--dur-slow) var(--ease-out);
}

/* Per-formula aura tints. Gender-neutral palette — no pink, no violet.
   The auras bleed through the droplet image's bright areas via mix-blend-mode:
   multiply, so the same droplet "becomes" each color. */
.formula-drop--reset    { --drop-aura: rgba(122, 179, 200, 0.65); }   /* water blue */
.formula-drop--recovery { --drop-aura: rgba(216, 165, 130, 0.70); }   /* warm amber */
.formula-drop--skin     { --drop-aura: rgba(220, 200, 155, 0.65); }   /* warm champagne (was blush pink) */
.formula-drop--immunity { --drop-aura: rgba(232, 178, 120, 0.70); }   /* golden citrus */
.formula-drop--classic  { --drop-aura: rgba(190, 175, 140, 0.60); }   /* warm cream */
.formula-drop--active   { --drop-aura: rgba(143, 168, 142, 0.75); }   /* moss green */
.formula-drop--nad      { --drop-aura: rgba(149, 165, 170, 0.65); }   /* slate (was violet) */
.formula-drop--more     { --drop-aura: rgba(168, 162, 153, 0.55); }

.showcase__content {
  display: flex; flex-direction: column;
  gap: clamp(8rem, 30vh, 24rem);
  padding-block: 18vh 30vh;
}

.showcase__stage {
  min-height: 70vh;
  display: flex; flex-direction: column; justify-content: center;
  /* Subtle parallax: stages fade and shift based on distance from viewport center.
     Driven by --p (proximity, 0 = active center, 1 = farthest). */
  --p: 0;
  opacity: calc(1 - var(--p) * 0.6);
  transform: translateY(calc(var(--p) * var(--p-dir, 0px)));
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  will-change: opacity, transform;
}
.showcase__stage.is-active { --p: 0; }

/* Final stage — "Not sure which one?" breaks out of the right column and
   centers across BOTH columns of the showcase. Width = right column +
   gap + left column. Margin-left pulls it back to start of the left column. */
.showcase__stage--final {
  width: calc(200% + clamp(3rem, 8vw, 8rem));
  margin-left: calc(-100% - clamp(3rem, 8vw, 8rem));
  text-align: center;
  align-items: center;
  /* translateX is driven by --parallax-x set in JS from scroll position. */
  transform: translateX(var(--parallax-x, 0px));
  transition: opacity 700ms var(--ease-out);
  will-change: transform;
}
.showcase__stage--final > * { margin-inline: auto; }
.showcase__stage--final .showcase__name { font-size: clamp(2.75rem, 7vw + 1rem, 6rem); max-width: 16ch; }
.showcase__stage--final .showcase__body { max-width: 50ch; }
.showcase__stage--final .showcase__cta { justify-content: center; }

.showcase__index {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 24, 'wdth' 100;
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--moss-deep);
  margin-bottom: var(--space-3);
}

.showcase__name {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw + 1rem, 5rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
  font-weight: 500;
  font-variation-settings: 'opsz' 96, 'wdth' 100;
  color: var(--ink);
}
.showcase__name em {
  font-style: normal;
  color: var(--moss-deep);
  font-variation-settings: 'opsz' 96, 'wdth' 85;
}

.showcase__vibe {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 36, 'wdth' 90;
  font-size: var(--fs-22);
  color: var(--ink-2);
  margin-top: var(--space-4);
}

.showcase__body {
  margin-top: var(--space-5);
  color: var(--ink-2);
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
  max-width: 44ch;
}

.showcase__pills {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-5);
}

.showcase__cta {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
  margin-top: var(--space-6);
}

.showcase__price {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 48;
  font-size: var(--fs-28);
  color: var(--ink);
}

/* Mobile: drop to single column, drop the pin */
@media (max-width: 900px) {
  .showcase__inner { grid-template-columns: 1fr; }
  .showcase__sticky { position: static; height: auto; min-height: 50vh; margin-bottom: var(--space-6); }
  .showcase__content { gap: var(--space-9); padding-block: 0 var(--space-9); }
  .showcase__stage { min-height: auto; }
}

/* ---------- MARQUEE (events + plans) ---------- */

.marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-3);
  mask-image: linear-gradient(90deg, transparent, var(--mask-fill) 10%, var(--mask-fill) 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--mask-fill) 10%, var(--mask-fill) 90%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: clamp(2rem, 4vw, 4rem);
  animation: marquee-scroll 50s linear infinite;
}
.marquee__item {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 36, 'wdth' 100;
  font-size: var(--fs-18);
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: var(--space-3);
  white-space: nowrap;
}
.marquee__item::after {
  content: '';
  width: 6px; height: 6px;
  background: var(--moss);
  border-radius: 50%;
}
.marquee--tiny .marquee__item {
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-eyebrow);
}
.marquee--moss .marquee__item { color: var(--moss-deep); }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- PLAN CARD — tilt & pulse on hover ---------- */

.plan-card {
  transform-style: preserve-3d;
  perspective: 1000px;
  will-change: transform;
}
.plan-card:hover {
  transform: translateY(-4px) rotateX(2deg) rotateY(-2deg);
}

/* Pulsing dot for event date pills */
.date-pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--moss-deep);
}
.date-pill::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--moss);
  box-shadow: 0 0 0 0 rgba(143, 168, 142, 0.6);
  animation: pulse 2.4s var(--ease-soft) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(143, 168, 142, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(143, 168, 142, 0); }
  100% { box-shadow: 0 0 0 0 rgba(143, 168, 142, 0); }
}

/* ---------- FLOATING QUIZ BADGE ---------- */

/* Quiz badge — bottom-right corner, slides in from below the viewport.
   Out of the way of right-side product info during scroll. */
.quiz-badge {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
  background: var(--glass-ink);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  color: var(--bone);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-pill);
  box-shadow: var(--glass-highlight-ink), 0 20px 60px -20px rgba(42, 38, 32, 0.5);
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
  cursor: pointer;
  text-decoration: none;
  font-size: var(--fs-14);
  font-weight: 500;
  white-space: nowrap;
  max-width: 280px;
  opacity: 0;
  transform: translateY(120%);
  animation: none;
}
.quiz-badge.is-visible {
  opacity: 1;
  transform: translateY(0);
  animation: badge-breathe 4s var(--ease-soft) infinite;
}
.quiz-badge:hover { transform: translateY(-3px); }

.quiz-badge__label {
  display: flex; flex-direction: column; line-height: 1.2;
}
.quiz-badge__title {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 36, 'wdth' 100;
  font-size: var(--fs-16);
  font-weight: 500;
}
.quiz-badge__sub {
  font-size: var(--fs-12);
  color: var(--moss-soft);
  letter-spacing: 0.04em;
}
.quiz-badge__icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--moss);
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.quiz-badge__icon svg { width: 18px; height: 18px; }

.quiz-badge__close {
  position: absolute;
  top: -8px; left: -8px;
  width: 22px; height: 22px;
  background: var(--bone);
  color: var(--ink);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.quiz-badge:hover .quiz-badge__close { opacity: 1; }
.quiz-badge__close svg { width: 12px; height: 12px; }
.quiz-badge.is-dismissed { opacity: 0 !important; transform: translateY(120%) !important; pointer-events: none; animation: none !important; }

@keyframes badge-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2px) scale(1.02); }
}

.quiz-badge__close {
  position: absolute;
  top: -8px; right: -8px;
  left: auto;
}

@media (max-width: 600px) {
  .quiz-badge { max-width: 220px; padding: var(--space-2) var(--space-3); bottom: var(--space-4); right: var(--space-4); }
  .quiz-badge__sub { display: none; }
  .quiz-badge__icon { width: 32px; height: 32px; }
}

/* =============================================================
   PHASE C — HOMEPAGE REBUILD (2026-05-31)
   Two-column hero, labeled asset slots (no stock placeholders),
   welcome + founder, white-dominant membership cards, partnerships,
   and a logo-shine hook. White-dominant per color lock: gold
   gradient borders + gold price pill, teal includes-dividers +
   teal check badges. Tokens only — no raw hex.
   ============================================================= */

/* ---------- LABELED ASSET SLOT ---------- */
/* Clean, intentional placeholder boxes that name the asset the client
   needs to drop in. Not stock imagery — a labeled, on-brand frame. */
.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-6);
  width: 100%;
  border: 1.5px dashed var(--teal);
  border-radius: var(--radius-lg);
  background: var(--teal-wash);
  color: var(--teal-darker);
}
.slot__icon { color: var(--teal-deep); display: inline-flex; }
.slot__icon svg { width: 1.6em; height: 1.6em; }
.slot__label {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--teal-darker);
}
.slot__hint {
  font-size: var(--fs-12);
  color: var(--ink-3);
  line-height: var(--lh-normal);
  max-width: 34ch;
}

/* ---------- HERO (home, two-column) ---------- */
.hero--home {
  min-height: auto;
  padding-block: clamp(5rem, 12vh, 9rem) clamp(3rem, 8vw, 6rem);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; }
.hero__brand { margin-bottom: var(--space-5); }
.slot--brand {
  max-width: 320px;
  min-height: 96px;
  padding: var(--space-4) var(--space-5);
}
/* "Nourish · Restore · Thrive" — tab/pill eyebrow */
.hero__rhythm {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--teal-wash);
  border: 1px solid var(--teal-soft);
  color: var(--teal-darker);
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.hero--home .hero__display {
  font-size: clamp(2.75rem, 5vw + 1rem, 5rem);
  line-height: 0.98;
  max-width: 14ch;
}
.hero--home .hero__lede { margin-top: var(--space-5); }
.hero--home .hero__cta-row { margin-top: var(--space-6); }
.hero__visual { width: 100%; }
.slot--gif { aspect-ratio: 4 / 5; max-width: 460px; margin-inline: auto; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .slot--gif { aspect-ratio: 16 / 10; max-width: none; }
}

/* ---------- LOGO SHINE HOOK ---------- */
/* Subtle diagonal sheen that sweeps across the brand lockup. Ready for
   the finalized logo to drop in. Honors reduced-motion. */
.logo-shine { position: relative; overflow: hidden; isolation: isolate; }
.logo-shine::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 2;
  animation: logo-sheen 6s var(--ease-soft) infinite;
}
@keyframes logo-sheen {
  0%, 70% { left: -60%; }
  100% { left: 140%; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-shine::after { animation: none; }
}

/* ---------- SUB-LOGO ---------- */
.sublogo { display: flex; justify-content: center; }
.slot--sublogo {
  width: auto;
  min-width: 200px;
  flex-direction: row;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
}

/* ---------- WELCOME STATEMENT ---------- */
.welcome { text-align: center; }
.welcome__body {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1vw + 1rem, 1.75rem);
  line-height: 1.7;
  color: var(--ink-2);
}
.welcome__body + .welcome__body { margin-top: var(--space-6); }
.welcome__body--accent { color: var(--teal-deep); }

/* ---------- PULL-QUOTE (script accent, gold metallic, Issue 5) ---------- */
.pull-quote {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.15;
  text-align: center;
  max-width: 22ch;
  margin-inline: auto;
  color: var(--gold-600);   /* fallback before clip */
  background: var(--gold-gradient-metallic);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Gold flourish above + below the script line */
.pull-quote::before,
.pull-quote::after {
  content: '';
  display: block;
  width: 72px;
  height: 2px;
  margin: var(--space-5) auto;
  border-radius: 2px;
  background: var(--gold-gradient);
  opacity: 0.85;
  -webkit-text-fill-color: initial;
}

/* Thin gold gradient divider between major paragraphs */
.rule-gold {
  height: 1px;
  border: 0;
  width: 100%;
  margin-block: var(--space-5);
  background: var(--gold-gradient);
  opacity: 0.45;
}

/* Off-white wash + soft gold radial corner (Issue 5 section backgrounds) */
.section--wash {
  background-color: var(--off-white);
  background-image: var(--gold-radial-wash);
}

/* ---------- MEET THE FOUNDER ---------- */
.founder {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.founder__media {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: var(--space-8);
}
.slot--headshot { aspect-ratio: 4 / 5; }
.slot--video { aspect-ratio: 16 / 10; cursor: pointer; }
.founder__play {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--teal);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--glow-teal);
}
.founder__play::before {
  content: '';
  width: 0; height: 0;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--white);
  margin-left: 3px;
}
.founder__bio {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  color: var(--ink-2);
  font-size: var(--fs-16);
  line-height: 1.7;
}
.founder__bio .rule-gold { margin-block: 0; }
.founder__name {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.founder__credential {
  font-size: var(--fs-14);
  color: var(--teal-darker);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-top: calc(-1 * var(--space-2));
}

@media (max-width: 900px) {
  .founder { grid-template-columns: 1fr; }
  .founder__media { position: static; flex-direction: row; }
  .slot--headshot, .slot--video { flex: 1; }
}
@media (max-width: 560px) {
  .founder__media { flex-direction: column; }
}

/* ---------- FOUNDER FULL-BLEED VIDEO (homepage only, Issue 4) ---------- */
.founder-bg {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.founder-bg__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  background: var(--teal-gradient);   /* shows while video loads / if missing */
}
.founder-bg__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--teal-overlay);
}
.founder-bg__inner {
  padding-block: clamp(var(--space-8), 12vh, var(--space-10));
}
.founder-bg__content {
  max-width: 640px;
  color: var(--white);
}
.founder-bg__content .eyebrow { color: var(--gold-200); }
.founder-bg__title { color: var(--white); margin-top: var(--space-3); }
.founder-bg__content h2 em { color: var(--gold-200); }
.founder-bg__lede {
  margin-top: var(--space-4);
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
  max-width: 52ch;
}
.founder-bg__cta { margin-top: var(--space-6); }
@media (max-width: 760px) {
  .founder-bg { min-height: 62vh; }
  .founder-bg__overlay { background: var(--teal-overlay-strong); }
}

/* ---------- WHY BECOME A MEMBER ---------- */
.why-member {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  color: var(--ink-2);
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
}
.why-member__kicker {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1vw + 1rem, 1.625rem);
  color: var(--teal-deep);
  line-height: var(--lh-snug);
}

/* ---------- MEMBERSHIP CARDS (white-dominant) ---------- */
.member-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 900px) {
  .member-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}

.member-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  /* gold gradient border on a white card (padding-box / border-box trick) */
  border: 1.5px solid transparent;
  background-image:
    linear-gradient(var(--white), var(--white)),
    var(--gold-gradient-border);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: var(--shadow-sm);
  transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out);
}
.member-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.member-card--featured { border-width: 2.5px; box-shadow: var(--shadow); }
.member-card--featured::after {
  content: 'Most chosen';
  position: absolute;
  top: -12px; right: var(--space-5);
  background: linear-gradient(135deg, var(--gold-100), var(--gold-200) 55%, var(--gold-300));
  color: var(--ink);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}

.member-card__tier {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--teal-darker);
}
.member-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-36);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--ink);
}
.member-card__price-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-block: var(--space-1);
  padding: 0.4rem 1rem;
  border-radius: var(--radius-pill);
  /* light gold gradient — keeps ink text well above AA contrast */
  background: linear-gradient(135deg, var(--gold-100) 0%, var(--gold-200) 55%, var(--gold-300) 100%);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-28);
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: var(--shadow-sm);
}
.member-card__price-pill span {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.member-card__desc {
  font-size: var(--fs-14);
  color: var(--ink-2);
  line-height: var(--lh-loose);
  margin-bottom: var(--space-2);
}
.member-card__cta { width: 100%; }
.member-card__divider {
  height: 2px;
  border-radius: 2px;
  background: var(--teal-gradient);
  margin: var(--space-5) 0 var(--space-3);
}
.member-card__includes-title {
  font-size: var(--fs-12);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--teal-darker);
}
.member-card__includes {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.member-card__includes li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--ink-2);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
}
.member-card__check {
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.member-card__check svg { width: 12px; height: 12px; }

/* ---------- PARTNERSHIPS (Bring NUYU to your business) ---------- */
.partners {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  background: var(--teal-wash);
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 5vw, 4rem);
  transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out);
}
.partners:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.partners__list { display: flex; flex-direction: column; gap: var(--space-4); }
.partners__list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-16);
  font-weight: 500;
  color: var(--ink);
}
.partners__badge {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--white);
  color: var(--teal-deep);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 760px) {
  .partners { grid-template-columns: 1fr; }
}