/* =========================================================
   PEPTIQE — Design System v2
   Architectural patterns borrowed from premium DTC wellness.
   Clean cream base, massive display type, pill CTAs, image-led cards.
   ========================================================= */

:root {
  /* Palette — cool neutral base, near-black dark sections, indigo accent */
  --cream: #ebebebed;
  --cream-2: #e2e2e2;
  --cream-3: #d6d6d6;
  --bg: var(--cream);
  --bg-warm: var(--cream-2);
  --surface: #FFFFFF;
  --surface-alt: #f4f4f4;

  --ink: #0f1417;
  --ink-soft: #3a4048;
  --ink-muted: #7a7f87;

  --dark: #0f1417;
  --dark-2: #1a2024;

  --accent: #6045f4;
  --accent-hover: #4d36d1;
  --accent-soft: #eae6fe;
  --accent-deep: #1e1565;

  --border: rgba(15, 20, 23, 0.08);
  --border-strong: rgba(15, 20, 23, 0.16);
  --success: #0F9D58;
  --danger: #D14343;

  /* Type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Fraunces', 'Playfair Display', Georgia, serif;

  /* Motion — unified on the ouraring / Material Design curve.
     Short colors/hovers, medium carousel, slow transforms, long theme swaps. */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 150ms;   /* color, background, border, fill, stroke */
  --t-med:  300ms;   /* opacity, backdrop, small layout shifts */
  --t-slow: 500ms;   /* transforms: scale, translate */
  --t-theme: 700ms;  /* large theme / bg transitions */

  /* Multi-prop transition bundles, ouraring-style */
  --trans-color: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), fill var(--t-fast) var(--ease), stroke var(--t-fast) var(--ease);
  --trans-transform: transform var(--t-slow) var(--ease);

  /* Layout */
  --container: 1440px;
  --container-wide: 1560px;
  --gutter: 20px;
  --nav-h: 60px;

  /* Radius */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 9999px;
}

/* =========================================================
   Reset & Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  /* Lock horizontal overflow at the root so pinch-out can't reveal
     any stray content beyond the viewport. `clip` is stronger than
     `hidden` (can't be programmatically scrolled). */
  overflow-x: clip;
  max-width: 100vw;
  max-width: 100svw;
}
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  font-size: 16px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  max-width: 100vw;
  max-width: 100svw;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
input, select, textarea { font-family: inherit; font-size: 16px; color: var(--ink); }

/* =========================================================
   Typography — large display + italic serif accents
   ========================================================= */
h1, h2, h3, h4 { line-height: 1.0; letter-spacing: -0.025em; font-weight: 500; }

.display {
  font-size: clamp(48px, 10vw, 112px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 500;
}
.display em, .serif-accent {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.02em;
}

.h1 { font-size: clamp(40px, 6vw, 80px); font-weight: 500; letter-spacing: -0.028em; }
.h2 { font-size: clamp(32px, 4.5vw, 56px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; }
.h3 { font-size: clamp(24px, 2.5vw, 40px); font-weight: 300; letter-spacing: -0.015em; line-height: 1.1; }
.h3 em { font-family: var(--font-serif); font-style: italic; font-weight: 300; }

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}
.eyebrow-muted { color: var(--ink-muted); }

.lead { font-size: clamp(16px, 1.4vw, 20px); color: var(--ink-soft); line-height: 1.5; font-weight: 400; }
.muted { color: var(--ink-muted); }
.small { font-size: 14px; }
.tiny  { font-size: 12px; }

/* =========================================================
   Layout
   ========================================================= */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container-wide { width: 100%; max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { width: 100%; max-width: 920px; margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: clamp(64px, 8vw, 120px) 0; }
.section-tight { padding: clamp(40px, 5vw, 72px) 0; }
.section-edge { padding: 0 var(--gutter); }

@media (max-width: 640px) {
  :root { --gutter: 16px; }
}

/* =========================================================
   Announcement Bar (pre-nav)
   ========================================================= */
.announce {
  background: transparent;
  color: var(--ink);
  text-align: center;
  padding: 10px 16px;
  font-size: 12px;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 101;
}
.announce strong { font-weight: 600; }
.announce .sep { opacity: 0.35; margin: 0 10px; }

/* =========================================================
   Navigation — transparent over hero, solid on scroll
   ========================================================= */
/* Ōura pattern: full-width sticky transparent <nav>.
   A separate absolute inset-0 ".nav-glass-pill" fades in on scroll to create
   the "liquid glass" effect — only on mobile. Desktop uses ".nav.scrolled" for
   a solid background on scrolled state. */
.nav {
  position: sticky; top: 16px; left: 0; right: 0; z-index: 100;
  background: transparent;
  transition: top var(--t-fast) var(--ease);
  border-bottom: 1px solid transparent;
  min-height: 72px;
  padding: 8px 0;
  pointer-events: auto;
}
/* Legacy .nav.scrolled solid bar — disabled globally. The permanent
   liquid-glass pill is the only nav visual on every breakpoint. */
.nav.scrolled {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
body.has-hero { padding-top: 0; } /* hero provides own space */
body:not(.has-hero) .nav { position: sticky; } /* always sticky */

.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--nav-h);
  gap: 24px;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.nav-left  { justify-self: start; }
.nav-center { justify-self: center; }
.nav-right { justify-self: end; display: flex; align-items: center; gap: 6px; }

.logo {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  line-height: 0;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.logo svg {
  display: block;
  width: 112px;
  height: 28px;
  color: inherit;
  /* Optical correction: the SVG viewBox (206.11 x 50.9) includes the
     descenders of p/q, so its geometric center sits below the wordmark's
     visual weight. Nudge down a hair so the cap-height band lines up with
     the pill's true vertical midpoint. */
  transform: translateY(3px);
}
/* When nav sits over a dark hero (or inside dark footer contexts),
   the logo flips to cream so it stays legible. */
body.nav-dark .nav .logo,
.footer .logo { color: var(--cream); }
/* Legacy — kept as no-op so stale markup doesn't render a stray pill */
.logo-mark,
.logo-dot { display: none; }

.nav-links {
  display: flex; gap: 0; list-style: none; align-items: center;
}
.nav-links > li > a,
.nav-links > li > button {
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-size: 15px; font-weight: 400; color: var(--ink);
  transition: var(--trans-color);
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.nav-links > li > a:hover,
.nav-links > li > button:hover { background-color: rgba(26,26,26,0.05); }
.nav-links .chev {
  width: 10px; height: 10px;
  transition: transform var(--t-slow) var(--ease);
}
.nav-links > li:hover .chev,
.nav-links > li > button[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-links > li > a.active { font-weight: 500; }

/* Mega dropdown */
.mega {
  position: absolute;
  left: 50%; transform: translateX(-50%) translateY(4px);
  top: 100%;
  min-width: 480px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.18);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-med) var(--ease), transform var(--t-slow) var(--ease);
}
.nav-links > li:hover .mega,
.nav-links > li.open .mega {
  opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.mega-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px;
}
.mega-grid a {
  padding: 12px 14px;
  border-radius: var(--r-md);
  font-size: 14px;
  color: var(--ink-soft);
  display: flex; align-items: center; justify-content: space-between;
  transition: var(--trans-color);
}
.mega-grid a:hover { background-color: rgba(26,26,26,0.04); color: var(--ink); }
.mega-grid a .arr { opacity: 0; transform: translateX(-4px); transition: opacity var(--t-med) var(--ease), transform var(--t-slow) var(--ease); }
.mega-grid a:hover .arr { opacity: 1; transform: translateX(0); }

.cart-btn {
  position: relative;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  transition: var(--trans-color);
}
.cart-btn:hover { background-color: rgba(26,26,26,0.06); }
.cart-count {
  position: absolute; top: 3px; right: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 9px; font-weight: 700;
  display: grid; place-items: center;
  opacity: 0; transform: scale(0.5);
  transition: transform var(--t-slow) var(--ease), opacity var(--t-med) var(--ease);
}
.cart-count.visible { opacity: 1; transform: scale(1); }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  place-items: center;
  transition: var(--trans-color);
}
.nav-toggle:hover { background-color: rgba(26,26,26,0.06); }
.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 1020px) {
  .nav-center { display: none; }
  .nav-toggle { display: grid; }
  .nav-inner { grid-template-columns: 1fr auto; }
  .nav-left { justify-self: start; }
  .nav-right { justify-self: end; }
}

/* Mobile drawer — unfurls from the pill itself.
   Positioned to align with the pill's horizontal footprint (12px inset
   sides) and sits just beneath the pill so it reads as one connected
   surface. clip-path reveals it top-down without squishing content. */
.mobile-drawer {
  position: fixed;
  top: 88px;            /* just below shorter 60px pill + 12px inset + 16px gap */
  left: 12px;
  right: 12px;
  bottom: 12px;
  /* Match the pill: sandstone tint at 10% over a strong frost */
  background: rgba(196, 176, 140, 0.10);
  backdrop-filter: blur(32px) saturate(1.4);
  -webkit-backdrop-filter: blur(32px) saturate(1.4);
  border: 0;
  border-radius: 12px;  /* matches new pill corner radius */
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
  z-index: 90;          /* below nav (100) so pill stays above */
  clip-path: inset(0 0 100% 0 round 12px);
  transition: clip-path 520ms cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: none;
  will-change: clip-path;
}
.mobile-drawer.open {
  clip-path: inset(0 0 0 0 round 12px);
  pointer-events: auto;
}
.mobile-drawer.open .mobile-drawer-body {
  overflow-y: auto;
}
.mobile-drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--gutter); height: var(--nav-h);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mobile-drawer-links {
  list-style: none;
  padding: 16px var(--gutter);
  flex: 1;
}
.mobile-drawer-links > li {
  border-bottom: 1px solid var(--border);
}
.mobile-drawer-links > li > a,
.mobile-drawer-links > li > button {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%;
  padding: 22px 4px;
  font-size: 24px;
  font-weight: 400;
  color: var(--ink);
  text-align: left;
}
.mobile-drawer-links .sub {
  display: none;
  padding: 0 4px 20px;
}
.mobile-drawer-links .sub.open { display: block; }
.mobile-drawer-links .sub a {
  display: block;
  padding: 10px 0;
  font-size: 16px;
  color: var(--ink-soft);
}
.mobile-drawer-foot {
  padding: 24px var(--gutter);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.close-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  transition: var(--trans-color);
}
.close-btn:hover { background-color: rgba(26,26,26,0.06); }

/* =========================================================
   Buttons — pill-shaped, minimal
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px;
  border-radius: 9999px;
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.01em;
  /* Ouraring-style hover: only colors animate, on fast timing.
     Transform uses its own slower lane for tactile press. */
  transition: var(--trans-color), box-shadow var(--t-fast) var(--ease), transform var(--t-slow) var(--ease);
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn:active { transform: scale(0.98); transition: transform var(--t-fast) var(--ease); }

.btn-dark {
  background-color: var(--ink);
  color: #fff;
}
.btn-dark:hover { background-color: var(--dark-2); }

.btn-ghost {
  background-color: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ghost:hover { background-color: var(--ink); color: #fff; }

.btn-ghost-light {
  background-color: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-ghost-light:hover { background-color: rgba(255,255,255,0.18); }

.btn-cream {
  background-color: var(--cream);
  color: var(--ink);
}
.btn-cream:hover { background-color: #fff; }

.btn-accent {
  background-color: var(--accent);
  color: #fff;
}
.btn-accent:hover { background-color: var(--accent-hover); }

.btn-lg { padding: 14px 28px; font-size: 15px; }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-full { width: 100%; }

/* =========================================================
   Hero — full-bleed with overlay
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid; align-items: end;
  overflow: hidden;
  background: var(--cream-2);
  padding: 0;
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 75% 30%, rgba(30,91,255,0.06), transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 70%, rgba(30,91,255,0.05), transparent 60%),
    linear-gradient(160deg, var(--cream) 0%, var(--cream-2) 60%, var(--cream-3) 100%);
}
.hero-vignette {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 60%, rgba(26,26,26,0.12) 100%);
  pointer-events: none;
}

.hero-center {
  position: relative;
  width: 100%;
  padding: calc(var(--nav-h) + 48px) var(--gutter) 80px;
  max-width: var(--container-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  min-height: 100vh;
}
@media (max-width: 900px) {
  .hero-center { grid-template-columns: 1fr; padding-bottom: 56px; gap: 24px; }
}

.hero-copy > .eyebrow { display: inline-block; margin-bottom: 20px; }
.hero-copy h1 { margin-bottom: 0; }
.hero-lead { margin-top: 28px; max-width: 480px; color: var(--ink-soft); font-size: 17px; line-height: 1.5; }
.hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 36px; }

.hero-badges {
  display: flex; gap: 8px; margin-top: 24px;
  flex-wrap: wrap;
  align-items: center;
}
.hero-badges .dot { width: 4px; height: 4px; background: var(--accent); border-radius: 50%; }
.hero-badges span.label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); font-weight: 500; }

/* Hero floating visual */
.hero-visual { position: relative; aspect-ratio: 1 / 1; max-width: 560px; width: 100%; margin-inline: auto; }
.hero-visual svg { width: 100%; height: 100%; }
/* Subtle ambient float on hero visual.
   Ouraring leaves hero art static — we use a very slow, low-amplitude
   lift so the eye catches it once without calling attention. */
.vial-float { animation: float 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Hero bottom caption corner — mimics lifestyle-site bottom overlay */
.hero-corner {
  position: absolute;
  left: var(--gutter); bottom: 24px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: 0.06em; color: var(--ink-soft);
}
.hero-corner .ic {
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(26,26,26,0.8); color: #fff;
  display: grid; place-items: center; font-size: 10px;
}
.hero-floating-card {
  position: absolute;
  right: var(--gutter); bottom: 24px;
  background: var(--cream);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; color: var(--ink-soft);
  max-width: 280px;
  border: 1px solid var(--border);
}
.hero-floating-card a { color: var(--ink); font-weight: 500; text-decoration: underline; }
@media (max-width: 640px) {
  .hero-floating-card, .hero-corner { display: none; }
}

/* =========================================================
   Full-bleed image tiles (product showcase rows)
   ========================================================= */
.tile-row {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 8px;
  background: var(--bg);
}
@media (max-width: 720px) { .tile-row { grid-template-columns: 1fr; } }

.tile {
  position: relative;
  aspect-ratio: 4 / 3.4;
  border-radius: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--cream-2), var(--cream-3));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 32px;
  transition: var(--trans-transform);
}
.tile::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(26,26,26,0.55) 100%);
  z-index: 1;
}
.tile-svg {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
.tile-svg svg { width: 40%; height: 60%; opacity: 0.95; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.2)); }
.tile-caption {
  position: relative; z-index: 2;
  color: #fff;
}
.tile-caption h3 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 500; letter-spacing: -0.02em; margin-bottom: 4px; }
.tile-caption p { font-size: 13px; opacity: 0.85; }
.tile-actions { position: relative; z-index: 2; display: flex; gap: 8px; }

/* =========================================================
   Generic product card (used in shop grid)
   ========================================================= */
.product-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
@media (max-width: 960px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .product-grid { grid-template-columns: 1fr; } }

.product-card {
  position: relative;
  aspect-ratio: 4 / 4.6;
  background: linear-gradient(170deg, var(--cream-2), var(--cream-3));
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 24px;
  transition: var(--trans-transform);
}
.product-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(26,26,26,0.5) 100%);
  z-index: 1;
  opacity: 0.9;
  transition: opacity var(--t-slow) var(--ease);
}
.product-card:hover::before { opacity: 1; }
.product-card-art {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  transition: var(--trans-transform);
}
.product-card-art svg { width: 55%; height: 55%; filter: drop-shadow(0 16px 32px rgba(0,0,0,0.18)); }
/* Photo variant: real product render. object-fit cover + 100% so the
   photograph fills the card edge-to-edge (matches the Ōura product-card
   pattern where the image IS the tile, not an inset placeholder). The
   gradient scrim on .product-card::before keeps the bottom overlay
   (name/price) legible over the vial's studio background. */
.product-card-art .product-photo,
.product-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: none;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.product-card:hover .product-card-art { transform: scale(1.04); }

.product-card-top {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
}
.product-card-cat {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  color: var(--ink);
  background: var(--cream);
  padding: 5px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--border);
}
.product-card-chip {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--accent-deep);
  background: var(--accent-soft);
  padding: 5px 10px; border-radius: var(--r-pill);
}
.product-card-bottom {
  position: relative; z-index: 2;
  color: #fff;
}
.product-card-bottom h3 {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.product-card-bottom .sub {
  font-size: 13px;
  opacity: 0.88;
  margin-bottom: 12px;
  line-height: 1.4;
}
.product-card-bottom .price {
  font-size: 13px;
  opacity: 0.95;
}

/* =========================================================
   Horizontal benefit carousel
   ========================================================= */
.benefits {
  padding: clamp(64px, 8vw, 120px) 0 32px;
}
.benefits-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 var(--gutter);
  max-width: var(--container-wide);
  margin: 0 auto 32px;
  gap: 24px; flex-wrap: wrap;
}
.benefits-track-wrap {
  position: relative;
  overflow: hidden;
  padding: 0 var(--gutter);
}
.benefits-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 0 32px;
  max-width: var(--container-wide);
  margin: 0 auto;
}
.benefits-track::-webkit-scrollbar { display: none; }
.benefit-card {
  flex: 0 0 clamp(260px, 30%, 340px);
  aspect-ratio: 3/4;
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  scroll-snap-align: start;
  background: linear-gradient(180deg, var(--dark-2), var(--dark));
  display: flex; align-items: flex-end;
  padding: 28px;
  color: var(--cream);
}
.benefit-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 20%, rgba(30,91,255,0.22), transparent 60%);
}
.benefit-card-art {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  opacity: 0.55;
}
.benefit-card-art svg { width: 80%; height: 80%; }
.benefit-card-txt {
  position: relative; z-index: 2;
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.benefit-card-txt em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
}
.benefits-nav {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; justify-content: flex-end; gap: 8px;
}
.car-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  display: grid; place-items: center;
  transition: var(--trans-color);
  cursor: pointer;
}
.car-btn:hover:not(:disabled) { background-color: var(--ink); color: var(--cream); }
.car-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* =========================================================
   Tabbed "moments" section
   ========================================================= */
.moments {
  padding: clamp(64px, 8vw, 120px) 0;
  background: var(--cream-2);
}
.moments-tabs {
  display: flex; gap: 0;
  max-width: var(--container-wide);
  margin: 0 auto 40px;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.moments-tabs::-webkit-scrollbar { display: none; }
.mtab {
  position: relative;
  padding: 16px 28px;
  font-size: 15px; color: var(--ink-muted); font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: 0;
  transition: color var(--t-fast) var(--ease);
}
.mtab:hover { color: var(--ink); }
.mtab.active { color: var(--ink); font-weight: 500; }
.mtab.active::after {
  content: ''; position: absolute; bottom: 0; left: 16px; right: 16px;
  height: 2px; background: var(--ink);
}

.moment-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 16px;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: 380px;
}
@media (max-width: 900px) {
  .moment-grid { grid-template-columns: 1fr; gap: 12px; }
}
.moment-img {
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, #bda58a, #776454);
  aspect-ratio: 4/5;
  position: relative;
  overflow: hidden;
}
.moment-img svg { width: 100%; height: 100%; object-fit: cover; }
.moment-cards { display: grid; gap: 12px; }
.moment-card {
  background: #EFD9BA;
  border-radius: var(--r-lg);
  padding: 20px;
  color: #4E3A1F;
  display: flex; flex-direction: column;
  justify-content: space-between;
}
.moment-card .big { font-size: 40px; font-weight: 500; margin-bottom: 4px; letter-spacing: -0.02em; }
.moment-card .label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; margin-bottom: 12px; }
.moment-card .body { font-size: 14px; opacity: 0.85; line-height: 1.4; }
.moment-card .chart {
  display: flex; gap: 2px; align-items: flex-end; height: 60px; margin-top: auto;
}
.moment-card .chart div {
  flex: 1; background: var(--accent); opacity: 0.7;
  border-radius: 2px 2px 0 0;
}
.moment-quote {
  background: var(--surface-alt);
  border-radius: var(--r-lg);
  padding: 32px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.moment-quote .quote-mark { font-family: var(--font-serif); font-size: 32px; color: var(--ink-muted); line-height: 0.5; }
.moment-quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2vw, 28px);
  color: var(--ink);
  line-height: 1.25;
  margin: 16px 0 24px;
}
.moment-quote .attr { font-size: 13px; color: var(--ink-muted); }

/* =========================================================
   In the Research (dark press section)
   ========================================================= */
.research-press {
  background: var(--dark);
  color: var(--cream);
  padding: clamp(64px, 8vw, 120px) 0;
}
.press-head {
  padding: 0 var(--gutter);
  max-width: var(--container-wide);
  margin: 0 auto 32px;
}
.press-head .eyebrow { color: var(--cream); }
.press-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (max-width: 900px) { .press-grid { grid-template-columns: 1fr; } }

.press-feature {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(160deg, #3d4963, #1e2540);
  padding: 24px;
  display: flex; flex-direction: column; justify-content: space-between;
  color: #fff;
}
.press-feature::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(30,91,255,0.2), transparent 60%);
}
.press-feature-art {
  position: absolute; inset: 0;
  overflow: hidden;
}
.press-feature-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0.62;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1), opacity 600ms var(--ease);
}
.press-feature:hover .press-feature-art img {
  transform: scale(1.04);
  opacity: 0.72;
}
.press-feature-art::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,15,28,0.22) 0%, rgba(10,15,28,0.55) 70%, rgba(10,15,28,0.78) 100%);
  pointer-events: none;
}
.press-feature-tag {
  position: relative; z-index: 2;
  align-self: flex-start;
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  padding: 6px 12px; border-radius: var(--r-pill);
}
.press-feature-cap {
  position: relative; z-index: 2;
}
.press-feature-cap h3 {
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.press-stack { display: grid; gap: 12px; }
.press-item {
  background: var(--dark-2);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 140px;
  text-decoration: none;
  color: #fff;
  transition:
    transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 300ms var(--ease);
}
.press-item:hover {
  background: #222;
  transform: translateY(-2px);
}
.press-item p { color: #fff; font-size: 14px; line-height: 1.45; margin: 0; }
.press-item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.03em;
}
.press-item .arr {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.1); color: #fff;
  display: grid; place-items: center;
  transition:
    background-color 300ms var(--ease),
    transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.press-item:hover .arr {
  background-color: rgba(255,255,255,0.24);
  transform: translateX(2px);
}
/* Non-interactive testimonial variant — reset figure margins, suppress hover */
figure.press-item, .press-item--quote {
  margin: 0;
}
.press-item--quote:hover {
  background: var(--dark-2);
  transform: none;
}
.press-item--quote p {
  font-style: italic;
  font-family: var(--font-serif, 'Fraunces', serif);
  font-size: 15px;
  line-height: 1.5;
}
.press-item--quote .press-item-foot {
  justify-content: flex-start;
}

.press-feature-link {
  display: inline-block;
  margin-top: 14px;
  color: rgba(255,255,255,0.88);
  font-size: 13px;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: color 300ms var(--ease), transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.press-feature:hover .press-feature-link {
  color: #fff;
  transform: translateX(3px);
}
.press-feature {
  transition:
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.press-feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 56px rgba(0,0,0,0.45);
}

/* =========================================================
   Megatype callout — "gives your body a brain"
   ========================================================= */
.mega-callout {
  padding: clamp(100px, 12vw, 200px) 0;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 40% at 50% 30%, rgba(30,91,255,0.08), transparent 60%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
}
.mega-callout h2 {
  font-size: clamp(44px, 7vw, 96px);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.028em;
  max-width: 14ch;
  margin: 0 auto 32px;
  color: var(--ink);
}
.mega-callout h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}

/* =========================================================
   Product Detail Page
   ========================================================= */
body.has-pdp { padding-top: calc(var(--nav-h) + 20px); }
.pdp {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  padding: 20px 0 96px;
  align-items: start;
}
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; gap: 24px; } }

.pdp-gallery {
  position: sticky; top: calc(var(--nav-h) + 20px);
  background: linear-gradient(160deg, var(--cream-2), var(--cream-3));
  border-radius: var(--r-lg);
  aspect-ratio: 4/5;
  overflow: hidden;
  padding: 0;
}
.pdp-gallery > svg { width: 70%; height: 70%; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.18)); }

.pdp-info > .eyebrow { display: inline-block; margin-bottom: 14px; }
.pdp-info h1 {
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.0;
  margin-bottom: 12px;
}
.pdp-tagline { color: var(--ink-soft); font-size: 18px; margin-bottom: 28px; font-weight: 300; }
.pdp-tagline em { font-family: var(--font-serif); font-style: italic; }
.pdp-price { font-size: 28px; font-weight: 500; margin-bottom: 32px; letter-spacing: -0.02em; }

.pdp-specs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 28px;
}
.pdp-spec {
  padding: 16px 20px;
  border-right: 1px solid var(--border);
}
.pdp-spec:last-child { border-right: 0; }
.pdp-spec .eyebrow { font-size: 10px; display: block; margin-bottom: 4px; color: var(--ink-muted); }
.pdp-spec strong { font-size: 16px; font-weight: 500; }

@media (max-width: 520px) {
  .pdp-specs { grid-template-columns: 1fr; }
  .pdp-spec { border-right: 0; border-bottom: 1px solid var(--border); }
  .pdp-spec:last-child { border-bottom: 0; }
}

.qty {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-right: 8px;
}
.qty button {
  width: 40px; height: 40px;
  font-size: 16px; color: var(--ink);
  transition: var(--trans-color);
}
.qty button:hover { background-color: var(--ink); color: var(--cream); }
.qty span { min-width: 28px; text-align: center; font-weight: 500; font-size: 14px; }

.pdp-cta-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 32px; }

.pdp-sec { border-top: 1px solid var(--border); padding: 24px 0; }
.pdp-sec h3 { font-size: 16px; margin-bottom: 12px; font-weight: 500; }
.pdp-sec p, .pdp-sec li { color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.pdp-sec ul { list-style: none; }
.pdp-sec ul li {
  padding-left: 22px; position: relative; margin-bottom: 6px;
}
.pdp-sec ul li::before {
  content: ''; position: absolute; left: 0; top: 11px;
  width: 10px; height: 1.5px; background: var(--accent);
}

.pdp-spec-table {
  border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
.pdp-spec-row {
  display: grid; grid-template-columns: 180px 1fr;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.pdp-spec-row:last-child { border-bottom: 0; }
.pdp-spec-row dt { color: var(--ink-muted); }
.pdp-spec-row dd { color: var(--ink); word-break: break-word; }

@media (max-width: 600px) {
  .pdp-spec-row { grid-template-columns: 1fr; gap: 4px; }
}

.research-warn {
  margin-top: 20px;
  padding: 18px 20px;
  background: #FFF6D6;
  border: 1px solid #E6D388;
  border-radius: var(--r-md);
  font-size: 13px; line-height: 1.55; color: #665016;
}
.research-warn strong { color: #3F2F06; display: block; margin-bottom: 4px; font-size: 13px; }

/* =========================================================
   Cart & Checkout layouts
   ========================================================= */
.cart-wrap, .checkout-wrap {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  padding: 24px 0 96px;
}
@media (max-width: 900px) { .cart-wrap, .checkout-wrap { grid-template-columns: 1fr; gap: 24px; } }

.cart-line {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.cart-line-thumb {
  width: 96px; height: 96px;
  background: linear-gradient(160deg, var(--cream-2), var(--cream-3));
  border-radius: var(--r-md);
  display: grid; place-items: center;
  overflow: hidden;
}
.cart-line-thumb svg { width: 65%; height: 65%; }
.cart-line-thumb .product-photo,
.cart-line-thumb img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  display: block;
}
.cart-line-meta h4 { font-size: 16px; margin-bottom: 4px; font-weight: 500; }
.cart-line-meta p  { color: var(--ink-muted); font-size: 13px; }
.cart-line-meta .remove {
  color: var(--ink-muted); font-size: 13px;
  margin-top: 8px; display: inline-block;
  text-decoration: underline;
  background: transparent; border: 0; padding: 0;
  font: inherit; cursor: pointer;
  align-self: flex-start;
}
.cart-line-meta .remove:hover { color: var(--danger); }
.cart-line-meta .remove:focus-visible {
  outline: 2px solid var(--accent, #6045f4);
  outline-offset: 2px; border-radius: 2px;
}
.cart-line-right { text-align: right; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.cart-line-right .price { font-size: 15px; font-weight: 500; }

@media (max-width: 560px) {
  .cart-line { grid-template-columns: 72px 1fr; }
  .cart-line-right { grid-column: 2; align-items: flex-start; text-align: left; }
  .cart-line-thumb { width: 72px; height: 72px; }
}

.cart-summary, .order-summary {
  position: sticky; top: calc(var(--nav-h) + 20px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  align-self: start;
}
.cart-summary h3, .order-summary h3 { margin-bottom: 20px; font-size: 18px; font-weight: 500; }
.cart-summary .row, .order-summary .row {
  display: flex; justify-content: space-between;
  padding: 8px 0; font-size: 14px; color: var(--ink-soft);
}
.cart-summary .row.total, .order-summary .row.total {
  font-size: 18px; font-weight: 500; color: var(--ink);
  border-top: 1px solid var(--border);
  margin-top: 12px; padding-top: 16px;
}

.cart-empty {
  text-align: center;
  padding: 72px 24px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.cart-empty h3 { margin-bottom: 10px; font-size: 22px; font-weight: 500; }
.cart-empty p { color: var(--ink-muted); margin-bottom: 24px; }

/* Checkout form */
.checkout-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  margin-bottom: 16px;
}
.checkout-step h3 {
  display: flex; align-items: center; gap: 12px;
  font-size: 17px; margin-bottom: 20px; font-weight: 500;
}
.checkout-step h3 .num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); color: var(--cream);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 500;
}

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  background: var(--surface);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.attest {
  padding: 18px;
  background: #FFF6D6;
  border: 1px solid #E6D388;
  border-radius: var(--r-md);
  margin-bottom: 12px;
}
.attest label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; color: #3F2F06; font-size: 13px; line-height: 1.5; }
.attest input[type="checkbox"] {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px;
  accent-color: var(--accent);
}
.attest strong { display: block; color: #271d03; margin-bottom: 4px; font-size: 13px; }

.order-line {
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: 14px; padding: 12px 0;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.order-line:last-of-type { border-bottom: 0; }
.order-line-thumb {
  width: 56px; height: 56px;
  background: linear-gradient(160deg, var(--cream-2), var(--cream-3));
  border-radius: 8px;
  display: grid; place-items: center;
  overflow: hidden;
}
.order-line-thumb svg { width: 65%; height: 65%; }
.order-line-thumb .product-photo,
.order-line-thumb img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  display: block;
}
.order-line-meta { font-size: 14px; }
.order-line-meta h4 { font-size: 14px; font-weight: 500; margin-bottom: 2px; }
.order-line-meta p { color: var(--ink-muted); font-size: 12px; }
.order-line-price { font-weight: 500; font-size: 14px; }

.promo-row { display: flex; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.promo-row input {
  flex: 1;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 13px;
}
.promo-msg.is-ok { color: #2b7a4e; }
.promo-msg.is-error { color: var(--danger, #b54334); }
.totals { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.totals .row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; color: var(--ink-soft); }
.totals .row.total {
  font-weight: 500; color: var(--ink); font-size: 18px;
  border-top: 1px solid var(--border);
  margin-top: 10px; padding-top: 16px;
}

/* Breadcrumb */
.crumbs { padding: 0 0 12px; font-size: 13px; color: var(--ink-muted); }
.crumbs a { color: var(--ink-muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs span { margin: 0 8px; }

/* =========================================================
   Shop / Filters
   ========================================================= */
.shop-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 24px;
  margin-bottom: 32px;
}
.shop-head h1 {
  font-size: clamp(44px, 6vw, 80px);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.0;
}
.shop-head h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
}

.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.filter-pill {
  padding: 8px 16px;
  border-radius: 9999px;
  border: 1px solid var(--border-strong);
  background: transparent;
  font-size: 13px; font-weight: 400;
  color: var(--ink-soft);
  transition: var(--trans-color);
  cursor: pointer;
}
.filter-pill:hover { border-color: var(--ink); color: var(--ink); }
.filter-pill.active { background-color: var(--ink); color: var(--cream); border-color: var(--ink); }

/* =========================================================
   Footer — dark, wordmark left, italic serif heading
   ========================================================= */
.footer {
  background: var(--dark);
  color: rgba(244, 239, 228, 0.68);
  padding: 80px 0 40px;
  margin-top: 0;
}
.footer-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 32px;
}
@media (max-width: 960px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 480px) { .footer-top { grid-template-columns: 1fr; } }

.footer h5 {
  color: var(--cream);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-weight: 500;
}
.footer ul { list-style: none; }
.footer li { margin-bottom: 10px; }
.footer a { color: rgba(244,239,228,0.58); font-size: 13px; transition: color var(--t-fast) var(--ease); }
.footer a:hover { color: var(--cream); }
.footer a .arr { display: inline-block; margin-left: 4px; transform: translateY(-1px); opacity: 0.6; }

.footer-brand .logo { color: var(--cream); margin-bottom: 16px; }
/* Footer centerpiece — the inline logo SVG scales to the wordmark size.
   We target it via .footer-wordmark > svg (rather than .logo svg) so the
   nav/drawer logo keeps its smaller dimensions. */
.footer-wordmark {
  color: var(--cream);
  line-height: 0;
  display: flex;
  justify-content: center;
}
.footer-wordmark > svg {
  display: block;
  width: clamp(280px, 60vw, 720px);
  height: auto;
  color: inherit;
}
.footer-logo-mark { display: none; }
.footer-heading {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.2;
  color: var(--cream);
  max-width: 280px;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.newsletter {
  display: flex; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  padding: 8px 0;
  margin-top: 12px;
}
.newsletter input {
  flex: 1; min-width: 0;
  background: transparent;
  border: 0;
  color: var(--cream);
  padding: 4px 0;
  font-size: 14px;
}
.newsletter input::placeholder { color: rgba(244,239,228,0.4); }
.newsletter button {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--cream);
  display: grid; place-items: center;
  transition: var(--trans-color);
}
.newsletter button:hover { background-color: rgba(255,255,255,0.22); }
.newsletter { flex-wrap: wrap; }
.newsletter-msg {
  flex-basis: 100%;
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.4;
  min-height: 0;
  color: rgba(244,239,228,0.72);
  letter-spacing: 0.01em;
  transition: color 200ms var(--ease, ease);
}
.newsletter-msg:empty { margin-top: 0; }
.newsletter-msg.is-ok { color: rgba(180, 229, 192, 0.95); }
.newsletter-msg.is-error { color: rgba(255, 180, 170, 0.95); }
.newsletter input:disabled { opacity: 0.55; cursor: not-allowed; }
.newsletter button:disabled { opacity: 0.8; cursor: default; }
.newsletter-help { font-size: 11px; margin-top: 8px; color: rgba(244,239,228,0.4); }
.newsletter-help a { color: rgba(244,239,228,0.58); text-decoration: underline; }

.footer-bottom {
  display: flex; justify-content: space-between;
  font-size: 11px;
  color: rgba(244,239,228,0.4);
  flex-wrap: wrap; gap: 16px;
  padding-top: 16px;
}

.payments {
  display: flex; gap: 8px; align-items: center; margin-top: 24px; flex-wrap: wrap;
}
.pay-badge {
  padding: 6px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  font-size: 10px; letter-spacing: 0.08em;
  color: var(--cream);
  font-weight: 600;
}

/* =========================================================
   Age Gate Modal
   ========================================================= */
.age-gate {
  position: fixed; inset: 0;
  background: rgba(26,26,26,0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 500;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
.age-gate.active { display: flex; }
.age-gate-card {
  background: var(--cream);
  border-radius: var(--r-xl);
  padding: 40px;
  max-width: 460px; width: 100%;
  text-align: center;
  box-shadow: 0 40px 80px rgba(0,0,0,0.3);
}
.age-gate h2 {
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.age-gate h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 300; }
.age-gate p { color: var(--ink-soft); margin-bottom: 28px; font-size: 14px; line-height: 1.55; }
.age-gate-actions { display: flex; gap: 10px; }
.age-gate-actions .btn { flex: 1; }
.age-gate-foot { font-size: 11px; color: var(--ink-muted); margin-top: 20px; letter-spacing: 0.02em; }

/* =========================================================
   Success page
   ========================================================= */
.success-wrap {
  max-width: 520px; margin: 0 auto;
  padding: 120px 24px 80px; text-align: center;
}
.success-ic {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
  margin: 0 auto 24px;
}
.success-wrap h1 {
  font-size: 40px; font-weight: 500;
  margin-bottom: 12px; letter-spacing: -0.025em;
}
.success-wrap h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 300; }
.success-wrap p { color: var(--ink-soft); margin-bottom: 28px; font-size: 15px; }
.order-ref {
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 28px;
  font-family: 'SF Mono', 'Courier New', monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* =========================================================
   Utility
   ========================================================= */
.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;
}
/* =========================================================
   Premium scroll-triggered reveal system.
   Elements with [data-reveal] start hidden (opacity 0, +24px)
   and fade+rise when the IntersectionObserver adds .is-revealed.
   Stagger is handled inline via JS (transitionDelay).
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
[data-reveal="fade"] { transform: none; }
[data-reveal="rise"] { transform: translate3d(0, 40px, 0); }
[data-reveal="zoom"] { transform: scale(0.96); }
[data-reveal="zoom"].is-revealed { transform: scale(1); }
[data-reveal="left"] { transform: translate3d(-28px, 0, 0); }
[data-reveal="right"] { transform: translate3d(28px, 0, 0); }

.fade-in, .delay-1, .delay-2, .delay-3, .delay-4, .delay-5 { animation: none; }

/* Respect reduced motion — disable all transitions and animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
  }
  .vial-float { animation: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

section[id] { scroll-margin-top: 80px; }

/* =========================================================
   V3 REBUILD — Oura-matching components
   Everything below overrides or extends prior V2 styles.
   ========================================================= */

/* ---------- Announcement bar (Oura-style, on cream) ---------- */
.announce {
  background: var(--cream-2);
  color: var(--ink-soft);
  padding: 10px 16px;
  font-size: 12.5px;
  letter-spacing: 0.01em;
}
.announce strong { color: var(--ink); font-weight: 600; }
.announce .sep { opacity: 0.4; margin: 0 8px; }

/* On pages with a full-bleed video hero, float the announce + nav over the
   video so there's no plain-color strip between them. Video fills from the
   very top of the viewport; pill + announce sit on top of it. */
body.has-hero .announce {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 101;
  background: rgba(15, 20, 23, 0.22);
  color: rgba(244, 239, 228, 0.92);
  backdrop-filter: blur(12px) saturate(0.9);
  -webkit-backdrop-filter: blur(12px) saturate(0.9);
}
body.has-hero .announce strong { color: var(--cream); }
body.has-hero .announce .sep { opacity: 0.55; }
body.has-hero .nav {
  position: fixed;
  top: 44px;
}

/* ---------- Nav: cleaner, larger, Oura proportions ---------- */
.nav-inner { height: 68px; }
.nav-links > li > a,
.nav-links > li > button {
  font-size: 14.5px;
  font-weight: 400;
  padding: 9px 16px;
}
.logo svg { width: 118px; height: 28px; }

/* Nav-right spacing on mobile: cart + hamburger, no extra button */
.nav-right .cta-btn { display: none; }
@media (max-width: 1020px) {
  .nav-right .cta-btn { display: none; }
}

/* ---------- Mega menu v3: image callouts + text links + pill CTA ---------- */
.mega-slot { /* the dropdown holder; actual .mega lives inside */ }
.mega.mega-v3 {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 680px;
  max-width: 760px;
  /* Hover bridge: the outer mega touches the button's bottom edge (no dead
     zone) and provides 14px of padding above the visible panel so the mouse
     can traverse from button -> dropdown without dropping :hover. */
  padding-top: 14px;
  background: transparent;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-med) var(--ease);
  z-index: 120;
}
.mega.mega-v3::before {
  /* Extra wide invisible bridge so diagonal mouse motion toward the
     dropdown stays within the hover area even before reaching the panel. */
  content: '';
  position: absolute;
  top: 0;
  left: -40px;
  right: -40px;
  height: 14px;
}
.nav-links > li.open .mega.mega-v3,
.nav-links > li:hover .mega.mega-v3 {
  opacity: 1;
  pointer-events: auto;
}
.mega-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 20px;
  box-shadow: 0 40px 80px -28px rgba(0,0,0,0.22);
  transform: translateY(6px);
  transition: transform var(--t-slow) var(--ease);
}
.nav-links > li.open .mega.mega-v3 .mega-inner,
.nav-links > li:hover .mega.mega-v3 .mega-inner {
  transform: translateY(0);
}
.mega-callouts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.mega-callout-card {
  --accent: #6045f4;
  position: relative;
  aspect-ratio: 16/10;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--cream-2);
  display: flex;
  align-items: flex-end;
  padding: 14px;
  transition: var(--trans-transform);
}
.mega-callout-card:hover { transform: translateY(-2px); }
.mega-callout-img {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.mega-callout-img svg { width: 42%; height: 82%; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.12)); }
.mega-callout-img .product-photo,
.mega-callout-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: none;
}
.mega-callout-foot {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  gap: 10px;
  padding: 6px 6px 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.mega-callout-title {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.mega-callout-arrow {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  display: grid; place-items: center;
  border: 1px solid var(--border);
  transition: var(--trans-color);
}
.mega-callout-card:hover .mega-callout-arrow {
  background: var(--ink); color: var(--cream);
  border-color: var(--ink);
}

.mega-divider { height: 1px; background: var(--border); }

.mega-text-list {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}
.mega-text-link {
  padding: 10px 10px;
  font-size: 14px;
  color: var(--ink);
  display: flex; align-items: center; gap: 10px;
  border-radius: var(--r-md);
  transition: var(--trans-color);
  position: relative;
}
.mega-text-link:hover { background-color: rgba(26,26,26,0.04); }
.mega-text-link::before {
  content: '';
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(26,26,26,0.06);
  flex-shrink: 0;
}

.mega-cta-pill {
  align-self: flex-start;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  padding: 10px 16px 10px 12px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 500;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  transition: var(--trans-color);
}
.mega-cta-pill:hover { background: var(--accent); color: #fff; }
.mega-cta-pill .pill-dot {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); display: inline-block;
  flex-shrink: 0;
}

/* Hide legacy .mega-grid if anything still uses it */
.mega-grid { display: none; }

/* ---------- Mobile drawer v3 (Oura-style) ---------- */
.mobile-drawer-head-right {
  display: flex; align-items: center; gap: 6px;
}
.mobile-drawer-head-right .cart-btn {
  color: var(--ink);
}
.mobile-drawer-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  padding: 24px var(--gutter) 32px;
  min-height: 0;
}
.md-primary, .md-secondary { list-style: none; }
.md-primary {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 8px;
}
.md-primary > li > a {
  display: block;
  padding: 6px 2px;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.05;
}
.md-secondary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  margin-top: 24px;
}
.md-secondary > li > a {
  display: block;
  padding: 10px 2px;
  font-size: 14px;
  color: var(--ink-muted);
}
.md-secondary > li > a:hover { color: var(--ink); }

/* Override old mobile-drawer rules that don't apply to v3 body */
.mobile-drawer-links, .mobile-drawer-foot { display: none !important; }

/* Hide duplicate logo/close head — the pill itself stays visible on top
   and its hamburger toggles the drawer closed. */
@media (max-width: 1020px) {
  .mobile-drawer-head { display: none; }
  .mobile-drawer-body { padding-top: 28px; }
  /* Morph hamburger to X when drawer is open for clear affordance. */
  body.nav-open .nav-toggle svg line:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
    transform-origin: center;
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  body.nav-open .nav-toggle svg line:nth-child(2) {
    transform: translateY(-4px) rotate(-45deg);
    transform-origin: center;
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nav-toggle svg line {
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* ---------- Hero v3 — full-bleed video, Oura layout ---------- */
.hero-v3 {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  padding: 0;
  background: #0f1417;
  overflow: hidden;
}
/* Full-bleed looping video sits behind everything — nav pill, eyebrow, headline, CTA all float over it. */
.hero-v3-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-v3-media .hero-v3-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Scrim for text legibility over the video — subtle top + stronger bottom,
   plus a centered vignette so the headline has contrast without tinting the
   whole frame. */
.hero-v3-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15,20,23,0.35) 0%, rgba(15,20,23,0.08) 28%, rgba(15,20,23,0.25) 62%, rgba(15,20,23,0.55) 100%),
    radial-gradient(ellipse 70% 50% at 50% 40%, rgba(15,20,23,0.30), transparent 70%);
  pointer-events: none;
}
.hero-v3-inner {
  position: relative; z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  /* Clear the fixed announce (~40px) + floating pill nav (~108px) so content
     starts well below them. Bottom padding leaves breathing room before the
     next section. */
  padding: calc(var(--nav-h) + 88px) var(--gutter) 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  color: var(--cream);
  min-height: 100vh;
}
.hero-v3-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 16px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--cream);
  font-size: 13px;
  font-weight: 500;
  margin-top: 40px;
  margin-bottom: 8px;
}
.hero-v3-eyebrow-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(96, 69, 244, 0.3);
  display: inline-block;
}
.hero-v3-headline {
  font-family: var(--font-sans);
  font-size: clamp(40px, 7.4vw, 96px);
  font-weight: 500;
  letter-spacing: -0.032em;
  line-height: 0.96;
  color: var(--cream);
  max-width: 14ch;
  text-shadow: 0 2px 30px rgba(0,0,0,0.25);
}
.hero-v3-headline > span {
  display: block;
}
.hero-v3-headline em {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: #a89cfa; /* lighter accent so it reads on dark video */
  letter-spacing: -0.022em;
  margin-top: 2px;
}
/* Legacy boxed centerpiece — no longer rendered; video is now the bg. */
.hero-v3-visual,
.hero-v3-bg { display: none !important; }

.hero-v3-cta {
  margin-top: 8px;
}
.hero-v3-sublink {
  display: inline-block;
  margin-top: 14px;
  font-size: 13.5px;
  color: rgba(244,239,228,0.8);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(244,239,228,0.45);
  transition: var(--trans-color);
}
.hero-v3-sublink:hover {
  color: var(--cream);
  text-decoration-color: var(--cream);
}

.hero-float-card {
  position: absolute;
  right: 24px; bottom: 24px;
  z-index: 2;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 310px;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.12);
}
.hero-float-card-logo {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(30,91,255,0.1);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.hero-float-card-body { min-width: 0; }
.hero-float-card-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.hero-float-card-sub {
  font-size: 11.5px;
  color: var(--ink-muted);
  line-height: 1.35;
  margin-top: 2px;
}
.hero-float-card-link {
  display: inline-block;
  font-size: 11.5px;
  color: var(--ink);
  font-weight: 500;
  margin-top: 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 900px) {
  .hero-v3-inner {
    padding-top: calc(var(--nav-h) + 96px);
    padding-bottom: 96px;
    min-height: 100vh;
  }
  .hero-v3-eyebrow { margin-top: 20px; }
  .hero-float-card { display: none; }
}
@media (max-width: 560px) {
  .hero-v3-headline { font-size: clamp(40px, 11vw, 64px); }
  .hero-v3-inner { padding-bottom: 56px; gap: 6px; }
}

/* ---------- Lifestyle carousel (4-tile row with arrows) ---------- */
.lifestyle {
  padding: clamp(72px, 9vw, 120px) 0 clamp(40px, 6vw, 64px);
  background: var(--bg);
}
.lifestyle-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  max-width: var(--container-wide);
  margin: 0 auto 28px;
  padding: 0 var(--gutter);
}
.lifestyle-h2 { max-width: 18ch; }
.lifestyle-h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: #6045f4;
}
.lifestyle-nav {
  display: flex; gap: 8px;
}
.lifestyle-track-wrap { position: relative; overflow: hidden; }
.lifestyle-track {
  display: flex;
  gap: 12px;
  padding: 4px var(--gutter) 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  max-width: var(--container-wide);
  margin: 0 auto;
}
.lifestyle-track::-webkit-scrollbar { display: none; }

.life-card {
  flex: 0 0 clamp(280px, 24vw, 380px);
  aspect-ratio: 280/370;
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  scroll-snap-align: start;
  display: flex;
  align-items: flex-end;
  padding: 28px;
  color: #fff;
  transition:
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.life-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.18);
}
.life-card-art {
  position: absolute; inset: 0;
  transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.life-card:hover .life-card-art { transform: scale(1.06); }
.life-card-art svg,
.life-card-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.life-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55) 100%);
}
.life-card-cap {
  position: relative; z-index: 2;
}
.life-card-cap h3 {
  font-family: var(--font-sans);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  max-width: 14ch;
}
.life-card-cap h3 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: #F0C8A6;
  letter-spacing: -0.01em;
}

@media (max-width: 560px) {
  .life-card { flex: 0 0 78vw; }
}

/* ---------- Form Meets Function (Oura text module) — LEFT aligned w/ italic offset right ---------- */
.form-function {
  padding: clamp(72px, 9vw, 120px) 0;
  background: var(--cream-2);
  text-align: left;
}
.ff-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.ff-head {
  font-family: var(--font-sans);
  font-size: clamp(36px, 5.4vw, 72px);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.02;
  color: var(--ink);
  margin: 14px 0 24px;
  max-width: 20ch;
}
.ff-head em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: #6045f4;
  margin-left: 1.4em; /* italic serif line offset right */
  display: inline-block;
}
.ff-body {
  font-size: clamp(15px, 1.3vw, 17px);
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 58ch;
  margin: 0 0 28px;
}
.ff-cta { }

/* ---------- Showcase grid (featured catalog, Oura-style) ---------- */
.showcase {
  padding: clamp(72px, 9vw, 120px) 0;
}
.showcase-head {
  max-width: var(--container-wide);
  margin: 0 auto 28px;
  padding: 0 var(--gutter);
  text-align: center;
}
.showcase-h2 {
  max-width: 20ch; margin: 14px auto 0;
}
.showcase-h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: #6045f4;
}
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (max-width: 960px)  { .showcase-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .showcase-grid { grid-template-columns: 1fr; } }

.showcase-card {
  position: relative;
  background: linear-gradient(170deg, var(--cream-2), var(--cream-3));
  border-radius: var(--r-lg);
  aspect-ratio: 4/5;
  overflow: hidden;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: var(--trans-transform);
}
.showcase-card:hover { transform: translateY(-2px); }
.showcase-card-img {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: var(--trans-transform);
}
.showcase-card-img svg { width: 56%; height: 70%; filter: drop-shadow(0 14px 28px rgba(0,0,0,0.14)); }
.showcase-card:hover .showcase-card-img { transform: scale(1.03); }

.showcase-card-foot {
  position: relative; z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.showcase-card-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.showcase-card-meta {
  font-size: 13px;
  color: var(--ink-soft);
}
.showcase-card-shop {
  position: absolute; right: 16px; bottom: 16px;
  z-index: 2;
  background: var(--ink);
  color: var(--cream);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--trans-color);
}
.showcase-card:hover .showcase-card-shop { background: var(--accent); color: #fff; }

.showcase-cta {
  display: flex; justify-content: center;
  margin-top: 36px;
  padding: 0 var(--gutter);
}

/* =========================================================
   Feature Pair — two commanding full-bleed tiles (Oura Ring 4 /
   Ring 4 Ceramic pattern). Large, premium, hover-scale art.
   ========================================================= */
.feature-pair {
  padding: clamp(72px, 9vw, 120px) 0 clamp(48px, 6vw, 88px);
  background: var(--bg);
}
.feature-pair-head {
  max-width: var(--container-wide);
  margin: 0 auto 36px;
  padding: 0 var(--gutter);
  text-align: center;
}
.feature-pair-h2 {
  max-width: 22ch;
  margin: 14px auto 0;
}
.feature-pair-h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: #6045f4;
}
.feature-pair-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (max-width: 820px) { .feature-pair-grid { grid-template-columns: 1fr; } }

.feature-tile {
  position: relative;
  display: block;
  aspect-ratio: 4/5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--cream-2);
  color: var(--ink);
  text-decoration: none;
  transition:
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 600ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 2px 16px rgba(0,0,0,0.04);
}
.feature-tile:nth-child(2) {
  background: var(--cream-2);
  color: var(--ink);
}
.feature-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.15);
}
.feature-tile-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.feature-tile-art svg {
  width: 56%;
  height: 66%;
  filter: drop-shadow(0 24px 44px rgba(0,0,0,0.22));
}
/* Photo variant — when .feature-tile-art holds an <img> (real product
   photograph) instead of the legacy SVG. Fills the tile corner-to-corner
   so the photo can carry its own background/lighting. */
.feature-tile-art img,
.feature-tile-art .product-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: none;
}
.feature-tile:hover .feature-tile-art { transform: scale(1.04); }
/* Subtle corner scrims so the name/price (top-left) and CTA pill
   (bottom-right) stay legible across any product photograph. */
.feature-tile:has(.feature-tile-art img)::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse at top left,
      rgba(0, 0, 0, 0.18) 0%,
      rgba(0, 0, 0, 0) 45%);
}
.feature-tile.feature-tile--dark:has(.feature-tile-art img)::before {
  background:
    radial-gradient(ellipse at top left,
      rgba(0, 0, 0, 0.28) 0%,
      rgba(0, 0, 0, 0) 50%);
}
.feature-tile-info {
  position: absolute;
  left: clamp(20px, 3vw, 36px);
  top: clamp(20px, 3vw, 32px);
  z-index: 2;
}
.feature-tile-name {
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: inherit;
}
.feature-tile-price {
  margin-top: 4px;
  font-size: 13px;
  opacity: 0.75;
  color: inherit;
}
.feature-tile-cta {
  position: absolute;
  right: clamp(16px, 2.4vw, 24px);
  bottom: clamp(16px, 2.4vw, 24px);
  z-index: 2;
  background: var(--ink);
  color: var(--cream);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition:
    background-color 300ms var(--ease),
    color 300ms var(--ease),
    transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.feature-tile:nth-child(2) .feature-tile-cta {
  background: var(--cream);
  color: var(--ink);
}
.feature-tile:hover .feature-tile-cta {
  transform: translateX(2px);
}

/* ---------- Press row (3 equal cards) ---------- */
.press {
  padding: clamp(72px, 9vw, 120px) 0;
  background: var(--bg);
  text-align: center;
}
.press-head {
  max-width: var(--container-wide);
  margin: 0 auto 32px;
  padding: 0 var(--gutter);
}
.press-head h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: #6045f4;
}
.press-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: left;
}
@media (max-width: 820px) { .press-row { grid-template-columns: 1fr; } }

.press-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: 0 0 20px;
  display: flex;
  flex-direction: column;
  transition: var(--trans-transform);
}
.press-card:hover { transform: translateY(-2px); }
.press-card-media {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--cream-2);
}
.press-card-media svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.press-card p {
  font-size: 15px;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.4;
  padding: 20px 20px 10px;
  letter-spacing: -0.005em;
}
.press-card-src {
  padding: 0 20px;
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}

/* ---------- Mega callout copper serif ---------- */
.mega-callout h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: #6045f4;
}

/* ---------- Footer v3 (Oura-style dark footer with centered newsletter) ---------- */
.footer {
  background: var(--dark);
  color: rgba(244, 239, 228, 0.65);
  padding: 80px 0 36px;
}
.footer-wordmark {
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.4em;
  font-size: clamp(48px, 9vw, 120px);
  color: var(--cream);
  margin-bottom: 40px;
  padding-right: 0;
  display: flex;
  justify-content: center;
}
.footer-newsletter {
  max-width: 540px;
  margin: 0 auto 56px;
  text-align: center;
}
.footer-newsletter-copy {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  color: var(--cream);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 24px;
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: 0;
}
@media (max-width: 820px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .footer-cols { grid-template-columns: 1fr; } }
.footer-pay {
  display: flex; gap: 8px; justify-content: center;
  margin: 0 auto 20px;
  padding-inline: var(--gutter);
  flex-wrap: wrap;
}
/* Legacy .footer-top/.footer-brand hidden (we use new structure) */
.footer-top, .footer-brand, .footer-heading, .newsletter-help, .payments { display: none !important; }

/* Center the newsletter form */
.footer-newsletter .newsletter {
  max-width: 360px;
  margin: 0 auto;
}

/* ---------- PDP gallery — auto-advance carousel with dot pill ---------- */
.pdp-gallery-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 650ms cubic-bezier(0.32, 0.72, 0, 1);
}
.pdp-gallery-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pdp-slide-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pdp-slide-inner svg {
  width: 64%;
  max-width: 420px;
  height: auto;
  filter: drop-shadow(0 22px 44px rgba(0, 0, 0, 0.22));
}
/* Real product photo inside a gallery slide — fills the entire slide
   edge-to-edge so the vial is the full hero, not a tile sitting on cream. */
.pdp-slide-photo {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdp-slide-photo img,
.pdp-slide-photo .product-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* When the slide contains a full-bleed photo, drop the inner padding so the
   image really reaches the edges of the gallery frame. */
.pdp-slide-inner:has(.pdp-slide-photo) {
  padding: 0;
}
/* Zoom variant — slide 2 is the same product shot cropped tighter for a
   macro feel without the jarring rotation. */
.pdp-slide-photo--zoom img,
.pdp-slide-photo--zoom .product-photo {
  transform: scale(1.35);
  transform-origin: center 42%;
}

/* Dot pagination pill — measured from ouraring.com live DOM
   h:18px / bottom:56px / rounded-xl 12px / bg gray-600@20% / blur 4px / dots 6×6 */
.pdp-gallery-dots {
  position: absolute;
  left: 50%;
  bottom: 56px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  height: 18px;
  padding: 0 12px;
  border-radius: 12px;
  background: rgba(60, 60, 60, 0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 3;
}
.pdp-gallery-arrow {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.92);
  background: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
}
.pdp-gallery-arrow:hover { color: #fff; }
.pdp-gallery-arrow svg { width: 10px; height: 10px; }
.pdp-gallery-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color 300ms var(--ease);
}
.pdp-gallery-dot.active {
  background: #fff;
}

/* ---------- Mobile PDP — full-bleed gallery with swipe-up info sheet ---------- */
@media (max-width: 1020px) {
  body.has-pdp { padding-top: 0; }
  body.has-pdp .nav {
    position: sticky;
    top: 0;
    background: transparent;
    border-bottom: 0;
  }
  body.has-pdp main.container { padding: 0; max-width: 100%; }
  body.has-pdp .crumbs { display: none; }

  .pdp {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  /* Gallery — measured from ouraring.com mobile PDP
     sticky top:0 + 70svh + full-bleed. Gallery stays pinned while info scrolls. */
  .pdp-gallery {
    position: sticky !important;
    top: 0 !important;
    aspect-ratio: auto !important;
    width: 100vw;
    height: 70svh;
    min-height: 460px;
    max-height: 780px;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    background: var(--cream);
    /* iOS Safari fallback when svh not supported */
    height: 70vh;
    height: 70svh;
  }
  .pdp-slide-inner svg {
    width: 74%;
    max-width: 420px;
  }
  /* Mobile: photo also goes full-bleed (no max-width clamp) */
  .pdp-slide-photo {
    width: 100%;
    max-width: none;
  }

  /* Info panel becomes a "swipe-up" sheet with rounded top, overlapping the image */
  .pdp-info {
    position: relative;
    background: var(--cream);
    border-radius: 24px 24px 0 0;
    margin-top: -28px;
    padding: 28px 20px 60px !important;
    z-index: 2;
    box-shadow: 0 -10px 40px -18px rgba(0, 0, 0, 0.18);
  }
  .pdp-info h1 { font-size: clamp(30px, 8.2vw, 42px) !important; }
  .pdp-tagline { font-size: 15px !important; margin-bottom: 20px !important; }

  /* Make sure the eligibility chip feels full-width inside the sheet */
  .pdp-elig {
    width: 100%;
    box-sizing: border-box;
  }
}

/* ---------- Mobile: bigger nav-links text on tablet, smaller at md ---------- */
@media (max-width: 1180px) {
  .nav-links > li > a,
  .nav-links > li > button { padding: 8px 12px; font-size: 14px; }
}

/* ---------- Nav over dark: inherits ink on cream; keep high contrast ---------- */
.nav:not(.scrolled) .cart-btn:hover,
.nav:not(.scrolled) .nav-toggle:hover { background-color: rgba(26,26,26,0.06); }

/* ---------- Safety: hide v2 hero block if still in DOM on other pages ---------- */
.hero:not(.hero-v3) .hero-floating-card { display: none; }

/* =========================================================
   V5 — Ōura mobile patterns (corrected from real DOM inspection)
   Full-width sticky transparent header + absolute "liquid glass"
   inner pill that fades in on scroll (mobile only).
   Simple lifestyle tiles (no data overlays, no tag pills).
   Mobile PDP: HSA/FSA chip + sans headline + italic serif subtitle
   + horizontal photo swatch row + stacked radio cards + inline
   blue Add-to-Cart + Affirm trust row.
   ========================================================= */

/* ---------- Header: liquid-glass inner pill ---------- */

/* The pill is an absolute layer BEHIND the nav content.
   Inset-0 with horizontal margins, 12px radius, warm cream tint,
   28px backdrop blur + 1.8× saturation. Starts invisible; JS toggles
   [data-glass="on"] on .nav once scrollY crosses the hero threshold.
   NOTE: .nav is position:sticky from line ~161 — we do NOT override
   that here (sticky already creates a containing block for the
   absolute-positioned .nav-glass-pill). */
/* Values measured live from ouraring.com DOM (see OURA_INSPECTION_REPORT.md):
   mx-3 (12px) / rounded-lg (8px) / bg-sandstone-500/10 / backdrop-blur-[2rem] (32px)
   / border-sandstone-500/25 / transition-opacity duration-400 ease standard. */
/* ============================================================
   iOS 26 LIQUID GLASS — authentic Apple recipe

   Three-layer construction (the actual technique Apple uses):

   Layer 1 (.nav-glass-pill)    — the glass body shape, crisp rim/border,
                                   outer shadow. Fully transparent body.
   Layer 2 (::before)           — the REFRACTION layer. Applies an SVG
                                   turbulence-displacement filter to the
                                   backdrop for real lens distortion, then
                                   blurs + saturates the result.
   Layer 3 (::after)            — the SPECULAR layer. Bright diagonal
                                   light sweep across the top + rim
                                   highlights that sell "polished glass."
   ============================================================ */
/* Single-element iOS 26 liquid glass. Using one element (no pseudos
   with overflow:hidden clipping them) for maximum browser reliability.
   The key traits:
   - backdrop-filter does the blur + saturation + refractive distortion
   - Vertical gradient inside simulates cylindrical-lens light refraction
   - Multiple box-shadows give rim highlight + drop shadow + inner glow
   - Border gives a crisp light-catching edge */
.nav-glass-pill {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 12px;
  right: 12px;
  border-radius: 12px;

  /* Oura recipe: sandstone-500/10 on a backdrop-blur-[2rem]. Very
     translucent — the image behind should clearly show through. */
  background: rgba(196, 176, 140, 0.10);

  /* Strong blur + gentle saturation boost. No distortion filter — Oura
     does not use refractive distortion. */
  backdrop-filter: blur(32px) saturate(1.4);
  -webkit-backdrop-filter: blur(32px) saturate(1.4);

  /* No visible stroke — Oura's pill has no border. */
  border: 0;

  /* Soft, diffuse shadow only. No inset highlights. */
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);

  /* Pill is now the permanent nav visual — always visible on every
     viewport (desktop + mobile), regardless of scroll position. */
  opacity: 1;
  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}
.nav[data-glass="on"] .nav-glass-pill { opacity: 1; }
.nav-inner { position: relative; z-index: 1; }

/* Desktop: enable the same liquid-glass pill, with wider margins to suit
   the larger nav height and ensure it doesn't run edge-to-edge. */
@media (min-width: 1021px) {
  /* Give the nav a 16px gap from viewport top when sticky, so the
     pill has air above it and doesn't hug the browser chrome. */
  .nav { top: 16px; padding: 12px 0; min-height: 80px; }

  .nav-glass-pill {
    top: 12px;
    bottom: 12px;
    left: 24px;
    right: 24px;
    border-radius: 12px;
    display: block;  /* ensure it's not hidden by previous rule */
  }

  /* Kill the desktop .nav.scrolled solid bg — the pill is now the
     primary visual on scroll, matching mobile. */
  .nav.scrolled {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom-color: transparent !important;
  }
}

/* ---------- Header icons: 40×40 transparent circle with 1px border ---------- */
@media (max-width: 1020px) {
  /* Tighten the whole nav on mobile so the pill reads as a short pill.
     top: 24px drops the pill further from the viewport top on scroll so
     it sits comfortably below the browser chrome rather than hugging it.
     padding: 14px 0 extends the nav's visible area so the pill sits
     lower within it. */
  .nav { min-height: 68px; padding: 14px 0; top: 24px; }

  /* CRITICAL: on mobile, the pill handles all visual weight.
     Kill the desktop .nav.scrolled solid background and its backdrop-filter
     so the pill isn't obscured by a cream bar behind it, and so we don't
     double-apply backdrop-filter (which causes the clipping seen in
     some browsers). */
  .nav.scrolled {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom-color: transparent !important;
  }

  .nav-right { gap: 8px; }
  .nav-right .cart-btn,
  .nav-toggle {
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid rgba(26, 26, 26, 0.25);
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  }
  .nav-right .cart-btn:hover,
  .nav-toggle:hover {
    background: rgba(26, 26, 26, 0.06);
    border-color: rgba(26, 26, 26, 0.4);
  }
  .nav-right .cart-btn svg,
  .nav-toggle svg { width: 18px; height: 18px; }
  .nav-right .cart-count {
    top: -2px; right: -2px;
    width: 16px; height: 16px;
    border: 2px solid var(--cream);
  }

  /* On dark hero (body has .has-hero-dark or .nav over dark) icons
     invert — transparent bg, 25% white border, white stroke. */
  body.nav-dark .nav-right .cart-btn,
  body.nav-dark .nav-toggle {
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
  }
  body.nav-dark .nav-right .cart-btn:hover,
  body.nav-dark .nav-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.55);
  }

  .nav-inner {
    height: 56px;
    /* Pill is inset 12px; give 8px breathing room inside the pill edge
       so content sits 20px from the nav edge (12 + 8). Symmetric on both
       sides so logo-to-pill-edge matches icon-to-pill-edge. */
    padding: 0 20px;
    gap: 8px;
    grid-template-columns: 1fr auto;
  }
  .nav .logo { align-self: center; }
  .nav .logo svg {
    width: 96px;
    height: 23px;
    /* Mobile: neutralize the desktop translateY(3px) descender correction.
       At this size the nudge over-compensates and visibly drops the
       wordmark toward the pill's bottom rim. */
    transform: translateY(1px);
  }
  /* Tighten icon circles so they fit cleanly inside the pill, and keep
     them on the pill's vertical centerline. */
  .nav-right { align-self: center; }
  .nav-right .cart-btn,
  .nav-toggle { width: 36px; height: 36px; }
  .nav-right .cart-btn svg,
  .nav-toggle svg { width: 16px; height: 16px; }
}

/* ---------- Lifestyle tiles — small category pill + plus circle ---------- */
/* Kill only the large data-overlay block. Keep the tag pill + plus button. */
.life-card-data { display: none !important; }
.life-card-cap { max-width: 100%; }

/* Category pill — matches ouraring.com pattern:
   bg-blend-multiply + backdrop-blur-xl (24px). Uses mix-blend-mode: multiply
   so the tint darkens the image below rather than sitting as a lighter overlay. */
.life-card { position: relative; }
.life-card-tag {
  position: absolute;
  top: 24px; left: 24px;                 /* Oura uses pt-6 pl-6 (24px) */
  display: inline-flex;
  align-items: center;
  gap: 10px;                             /* Oura gap-x-2.5 (10px) */
  padding: 12px 16px;                    /* Oura px-4 py-3 mobile */
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);                   /* sandstone-200 light cream text */
  background: rgba(26, 22, 18, 0.55);
  mix-blend-mode: multiply;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  max-width: calc(100% - 82px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
  pointer-events: none;
}
.life-card-tag svg {
  width: 14px; height: 14px;
  flex: none;
}
/* Per-tone tints (kept as accents — each tile still darkens via multiply) */
.life-card-tag.tag-warm  { background: rgba(58, 30, 16, 0.62); }
.life-card-tag.tag-cool  { background: rgba(18, 24, 44, 0.62); }
.life-card-tag.tag-sage  { background: rgba(20, 34, 22, 0.60); }
.life-card-tag.tag-amber { background: rgba(62, 40, 18, 0.60); }

/* Cream plus circle (sandstone-200 — matches the site surface, NOT white) */
.life-card-plus {
  position: absolute;
  top: 24px; right: 24px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #ebebeb;                   /* sandstone-200 equivalent */
  color: var(--ink);
  display: grid;
  place-items: center;
  border: 0;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  z-index: 3;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.life-card-plus:hover { transform: scale(1.08); background: #fff; }
.life-card-plus svg { width: 18px; height: 18px; }

/* Carousel arrows: moved BELOW tiles as a cream + dark pair */
.life-carousel-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  padding: 0 var(--gutter);
}
.life-carousel-nav button {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  transition: background-color var(--t-fast) var(--ease);
}
.life-carousel-nav .prev {
  background: var(--cream-2);
  color: var(--ink);
  border: 1px solid var(--border);
}
.life-carousel-nav .prev:hover { background: var(--cream-3); }
.life-carousel-nav .next {
  background: var(--ink);
  color: var(--cream);
}
.life-carousel-nav .next:hover { background: var(--dark-2); }
.life-carousel-nav svg { width: 18px; height: 18px; }

/* ---------- "Why PEPTIQE" pitch — LEFT-aligned with italic offset right ---------- */
.pitch {
  padding: clamp(80px, 10vw, 140px) 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(184, 114, 70, 0.08), transparent 65%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
  text-align: center;
}
.pitch-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pitch-eyebrow { margin-bottom: 20px; display: inline-block; }
.pitch-head {
  font-size: clamp(40px, 7vw, 96px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 28px;
  max-width: 18ch;
}
.pitch-head em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
}
.pitch-body {
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 56ch;
  margin: 0 auto 32px;
}
.pitch-cta {
  padding: 14px 28px;
  font-size: 15px;
  border-radius: 999px;
  background: #2F2A26;
  color: #ebebeb;
}
.pitch-cta:hover { background: #1A1614; }

/* ---------- Vignette section (photo + large centered frosted data card) ---------- */
.vignette {
  padding: clamp(48px, 6vw, 96px) 0;
}
.vignette-head {
  padding: 0 var(--gutter);
  max-width: var(--container-wide);
  margin: 0 auto clamp(32px, 4vw, 56px);
}
.vignette-head h2 {
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}
.vignette-head h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: #6045f4;
}
.vignette-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 0;
  overflow: hidden;
  background: #2A2620;
}
.vignette-photo svg,
.vignette-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.vignette-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.35) 90%),
    radial-gradient(ellipse 80% 60% at 50% 75%, rgba(0,0,0,0.25), transparent 65%);
}
.vignette-card {
  position: absolute;
  left: 50%;
  bottom: clamp(32px, 6vw, 72px);
  transform: translateX(-50%);
  width: min(460px, 86%);
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 24px;
  padding: 28px 28px 30px;
  color: #fff;
  text-align: center;
  box-shadow: 0 26px 50px -20px rgba(0, 0, 0, 0.45);
}
.vignette-card-ring {
  display: inline-block;
  margin: 0 auto 10px;
}
.vignette-card-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 9vw, 88px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 4px 0 2px;
}
.vignette-card-phrase {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 2vw, 22px);
  opacity: 0.92;
  margin-bottom: 14px;
}
.vignette-card-body {
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.86;
  max-width: 36ch;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .vignette-photo {
    aspect-ratio: 4 / 5;
  }
  .vignette-card {
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
    transform: none;
    bottom: 16px;
    padding: 20px 18px 22px;
    border-radius: 18px;
  }
  .vignette-card-ring { margin-bottom: 6px; }
  .vignette-card-ring svg {
    width: 56px;
    height: 56px;
  }
  .vignette-card-num {
    font-size: 46px;
    margin: 2px 0 2px;
  }
  .vignette-card-phrase {
    font-size: 15px;
    margin-bottom: 10px;
  }
  .vignette-card-body {
    font-size: 13px;
    line-height: 1.5;
    max-width: 100%;
  }
}

/* =========================================================
   Mobile PDP — corrected form-card pattern
   HSA/FSA chip → big sans headline → italic serif subtitle →
   horizontal photo swatch row → stacked radio cards →
   blue pill Add-to-Cart + Affirm trust row + chat bubble.
   ========================================================= */

/* HSA/FSA chip */
.pdp-elig {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border-radius: 9999px;
  background: rgba(26, 26, 26, 0.04);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 14px;
  border: 1px solid rgba(26, 26, 26, 0.05);
}
.pdp-elig .check-icon {
  width: 14px;
  height: 14px;
  stroke: var(--ink);
}
.pdp-elig .info-i {
  margin-left: auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(26,26,26,0.08);
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 500;
  display: grid; place-items: center;
}

/* Horizontal color/lot swatch row */
.pdp-swatches {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  margin: 10px 0 10px;
  padding: 6px 0 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.pdp-swatches::-webkit-scrollbar { display: none; }
.pdp-swatch {
  --sw: #C0C4CC;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.5), transparent 55%), var(--sw);
  box-shadow: inset 0 -4px 10px rgba(0,0,0,0.15), 0 0 0 0 transparent;
  cursor: pointer;
  position: relative;
  transition: box-shadow var(--t-med) var(--ease), transform var(--t-fast) var(--ease);
  scroll-snap-align: start;
}
.pdp-swatch:hover { transform: translateY(-1px); }
.pdp-swatch.is-on {
  box-shadow: inset 0 -4px 10px rgba(0,0,0,0.15), 0 0 0 2px var(--ink);
}

/* Selected finish label */
.pdp-finish-label {
  font-size: 17px;
  color: var(--ink);
  margin: 14px 0 32px;
  font-weight: 400;
}
.pdp-finish-label .dash { margin: 0 8px; opacity: 0.55; }
.pdp-finish-label .price { color: var(--ink); }

/* Section label: bold sans + italic serif subtitle + info (i) right */
.pdp-sec-label {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 10px;
}
.pdp-sec-label-text h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 4px;
}
.pdp-sec-label-text .sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  color: var(--ink-muted);
  line-height: 1.2;
}
.pdp-info-btn {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(26, 26, 26, 0.08);
  color: var(--ink-muted);
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.pdp-info-btn:hover { background: rgba(26, 26, 26, 0.14); }

/* Stacked radio cards (no grid — stack 100% width) */
.pdp-radio-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 36px;
}
.pdp-radio {
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 18px 54px 18px 20px;
  cursor: pointer;
  background: transparent;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
  display: block;
  min-height: 66px;
}
.pdp-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pdp-radio .bullet {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(26,26,26,0.2);
  background: transparent;
  transition: var(--trans-color);
}
.pdp-radio .bullet::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ink);
  transform: scale(0);
  transition: transform var(--t-med) var(--ease);
}
.pdp-radio .bullet::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 13 10 18 20 6'/></svg>") center/55% 55% no-repeat;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
  z-index: 2;
}
.pdp-radio.is-on {
  border-color: var(--ink);
  border-width: 1.5px;
}
.pdp-radio.is-on .bullet { border-color: var(--ink); }
.pdp-radio.is-on .bullet::after { transform: scale(1); }
.pdp-radio.is-on .bullet::before { opacity: 1; }
.pdp-radio-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.pdp-radio-sub {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 4px;
  line-height: 1.3;
}

/* ---------- Add-to-Cart block: blue pill + Affirm trust row ---------- */
.pdp-cta-block {
  background: var(--cream-2);
  border-radius: 20px;
  padding: 18px 16px 16px;
  margin: 8px 0 40px;
}

/* ---------- Floating CTA pill (mobile PDP) ----------
   Mirrors the nav pill: sandstone tint + 32px backdrop blur, 12px
   side insets, 12px radius. Fades in once the inline .pdp-cta-block
   scrolls out of view so the primary action is always reachable. */
.pdp-float-cta {
  position: fixed;
  bottom: 12px;
  left: 12px;
  right: 12px;
  z-index: 95;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 8px 8px 18px;
  border-radius: 12px;
  background: rgba(196, 176, 140, 0.10);
  backdrop-filter: blur(32px) saturate(1.4);
  -webkit-backdrop-filter: blur(32px) saturate(1.4);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 280ms var(--ease), transform 280ms var(--ease);
  pointer-events: none;
}
body.has-pdp .pdp-float-cta { display: flex; }
.pdp-float-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.pdp-float-cta-price {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  color: var(--ink);
  flex-shrink: 0;
}
.pdp-float-cta-label {
  font-size: 10px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}
.pdp-float-cta-amount {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.pdp-float-cta-btn {
  flex: 1;
  max-width: 240px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 9999px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.pdp-float-cta-btn:hover { background: var(--accent-hover); }
.pdp-float-cta-btn:active { transform: scale(0.985); }

/* Desktop never shows the floater */
@media (min-width: 1021px) {
  body.has-pdp .pdp-float-cta { display: none !important; }
}
.pdp-add-btn {
  display: block;
  width: 100%;
  background: var(--accent);
  color: #fff;
  border-radius: 9999px;
  padding: 16px 24px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-align: center;
  transition: background-color var(--t-fast) var(--ease);
  cursor: pointer;
  border: 0;
}
.pdp-add-btn:hover { background: var(--accent-hover); }
.pdp-add-btn:active { transform: scale(0.985); }

.pdp-trust-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--ink-soft);
  flex-wrap: wrap;
  justify-content: center;
}
.pdp-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #EAE4F8;
  color: #5B42B8;
  padding: 4px 10px 4px 8px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.pdp-trust-pill svg { width: 11px; height: 11px; }
.pdp-affirm {
  font-family: var(--font-sans);
  font-weight: 700;
  font-style: italic;
  color: #0FA0CE;
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* ---------- Mobile PDP — typography / info-block tuning (<900px)
   (gallery layout is handled in the 1020px block above — DO NOT re-declare .pdp-gallery here) ---------- */
@media (max-width: 900px) {
  body.has-pdp .pdp-info h1 {
    font-size: clamp(34px, 9vw, 44px) !important;
    letter-spacing: -0.028em;
    font-weight: 500;
    line-height: 1.05;
    margin: 6px 0 10px;
  }
  body.has-pdp .pdp-tagline {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 20px;
    color: var(--ink-soft);
    line-height: 1.25;
    margin-bottom: 18px;
  }
  body.has-pdp .pdp-specs,
  body.has-pdp .pdp-price,
  body.has-pdp .pdp-cta-row { display: none; } /* replaced by sticky CTA block */
  body.has-pdp .research-warn,
  body.has-pdp .pdp-sec { margin-top: 24px; }
}

/* ---------- Floating chat bubble ---------- */
.chat-bubble {
  position: fixed;
  right: 18px;
  bottom: 24px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  display: grid; place-items: center;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,0.25), 0 0 0 1px rgba(26,26,26,0.06);
  z-index: 40;
  transition: transform var(--t-slow) var(--ease), background-color var(--t-fast) var(--ease);
}
.chat-bubble:hover { transform: translateY(-2px); background: var(--cream); }
.chat-bubble svg { width: 22px; height: 22px; }

/* ---------- Cart empty state ---------- */
.cart-empty-v4 {
  padding: clamp(48px, 8vw, 96px) var(--gutter);
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.cart-empty-v4 h2 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.cart-empty-v4 h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: #6045f4;
}
.cart-empty-v4 p {
  color: var(--ink-soft);
  margin-bottom: 24px;
}
.cart-empty-v4 .btn { padding: 12px 26px; }

/* =========================================================
   SCIENCE v2 — interactive lab report
   Left: tabbed analytical chart card with real SVG data viz.
   Right: animated purity ring + method list + CTA.
   Uses `currentColor` inside SVGs so colors inherit from the
   section's ink, which flips on dark backgrounds if needed.
   ========================================================= */
.science-v2 {
  color: var(--ink);
  padding: clamp(72px, 9vw, 140px) 0;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(96,69,244,0.06) 0%, rgba(96,69,244,0) 60%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
}
.science-v2 .science-head { max-width: 780px; margin-bottom: clamp(32px, 4vw, 56px); }

.science-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 40px);
  align-items: stretch;
}
@media (max-width: 980px) {
  .science-grid { grid-template-columns: 1fr; }
}

/* ---------- Lab report card ---------- */
.lab-report {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: clamp(18px, 2vw, 28px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 30px 60px -30px rgba(15, 20, 23, 0.18),
    0 8px 20px -12px rgba(15, 20, 23, 0.08);
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
}
.lab-report::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(15, 20, 23, 0.015) 0 1px, transparent 1px 28px);
  pointer-events: none;
  z-index: 0;
}
.lab-report > * { position: relative; z-index: 1; }

.lab-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border);
}
.lab-report-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}
.lab-report-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #1cb56d;
  box-shadow: 0 0 0 4px rgba(28, 181, 109, 0.15);
  animation: lab-pulse 2.4s ease-in-out infinite;
}
@keyframes lab-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(28, 181, 109, 0.15); }
  50%      { box-shadow: 0 0 0 7px rgba(28, 181, 109, 0.05); }
}
.lab-report-batch {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.lab-report-batch-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink);
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(15, 20, 23, 0.05);
}

/* ---------- Tabs ---------- */
.lab-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(15, 20, 23, 0.04);
  border-radius: 9999px;
  align-self: flex-start;
  flex-wrap: wrap;
}
.lab-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 9999px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: var(--trans-color), box-shadow var(--t-fast) var(--ease);
}
.lab-tab:hover { color: var(--ink); }
.lab-tab.is-active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(15, 20, 23, 0.06), 0 8px 20px -12px rgba(15, 20, 23, 0.12);
}
.lab-tab-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
}
.lab-tab.is-active .lab-tab-dot { background: var(--accent); opacity: 1; }

/* ---------- Panels ---------- */
.lab-panels {
  position: relative;
  min-height: 320px;
}
.lab-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-slow) var(--ease);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lab-panel.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.lab-panel-axis-y {
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lab-panel-caption {
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.01em;
}

.lab-chart {
  width: 100%;
  height: auto;
  display: block;
  color: var(--ink);
  max-height: 320px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(96, 69, 244, 0.02) 0%, rgba(96, 69, 244, 0) 100%);
}

/* Trace draw-in animation (triggered when panel becomes active) */
.lab-trace {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  transition: stroke-dashoffset 1800ms cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--accent);
}
.lab-trace-fill {
  opacity: 0;
  transition: opacity 1200ms ease 400ms;
  color: var(--accent);
}
.lab-panel.is-active .lab-trace { stroke-dashoffset: 0; }
.lab-panel.is-active .lab-trace-fill { opacity: 1; }

/* MS bars rise-in */
.lab-ms-bars line {
  transform-origin: center bottom;
  transform: scaleY(0);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--accent);
}
.lab-panel.is-active .lab-ms-bars line { transform: scaleY(1); }
.lab-panel.is-active .lab-ms-bars line:nth-child(1)  { transition-delay: 40ms; }
.lab-panel.is-active .lab-ms-bars line:nth-child(2)  { transition-delay: 80ms; }
.lab-panel.is-active .lab-ms-bars line:nth-child(3)  { transition-delay: 120ms; }
.lab-panel.is-active .lab-ms-bars line:nth-child(4)  { transition-delay: 160ms; }
.lab-panel.is-active .lab-ms-bars line:nth-child(5)  { transition-delay: 200ms; }
.lab-panel.is-active .lab-ms-bars line:nth-child(6)  { transition-delay: 240ms; }
.lab-panel.is-active .lab-ms-bars line:nth-child(7)  { transition-delay: 280ms; }
.lab-panel.is-active .lab-ms-bars line:nth-child(8)  { transition-delay: 320ms; }
.lab-panel.is-active .lab-ms-bars line:nth-child(9)  { transition-delay: 360ms; }
.lab-panel.is-active .lab-ms-bars line:nth-child(10) { transition-delay: 400ms; }
.lab-panel.is-active .lab-ms-bars line:nth-child(11) { transition-delay: 440ms; }
.lab-panel.is-active .lab-ms-bars line:nth-child(12) { transition-delay: 480ms; }
.lab-panel.is-active .lab-ms-bars line:nth-child(13) { transition-delay: 520ms; }
.lab-panel.is-active .lab-ms-bars line:nth-child(14) { transition-delay: 560ms; }
.lab-panel.is-active .lab-ms-bars line:nth-child(15) { transition-delay: 600ms; }

/* Endotoxin strip */
.lab-endo { padding: 10px 6px 0; display: flex; flex-direction: column; gap: 28px; }
.lab-endo-scale { position: relative; padding-bottom: 28px; }
.lab-endo-bar {
  position: relative;
  height: 12px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #1cb56d 0%, #1cb56d 45%, #f5b133 70%, #e5614a 100%);
  box-shadow: inset 0 0 0 1px rgba(15, 20, 23, 0.06);
}
.lab-endo-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: left 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lab-panel[data-lab-panel="endo"] .lab-endo-marker { left: 0 !important; }
.lab-panel[data-lab-panel="endo"].is-active .lab-endo-marker { left: 2.4% !important; }
.lab-endo-marker-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #1cb56d;
  box-shadow: 0 4px 10px -2px rgba(28, 181, 109, 0.4);
}
.lab-endo-marker-label {
  position: absolute;
  top: -30px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #1cb56d;
  white-space: nowrap;
  background: rgba(28, 181, 109, 0.08);
  padding: 2px 8px;
  border-radius: 6px;
}
.lab-endo-ticks {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.lab-endo-ticks small {
  display: block;
  color: #e5614a;
  font-weight: 500;
  margin-top: 2px;
}
.lab-endo-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 16px;
  background: rgba(15, 20, 23, 0.03);
  border-radius: 14px;
}
@media (max-width: 640px) {
  .lab-endo-stats { grid-template-columns: 1fr; }
}
.lab-endo-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: var(--ink);
}
.lab-pass {
  color: #1cb56d;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- Report footer stamp ---------- */
.lab-report-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  flex-wrap: wrap;
}
.lab-stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1cb56d;
  font-size: 12.5px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(28, 181, 109, 0.08);
  border: 1px solid rgba(28, 181, 109, 0.18);
}
.lab-sign {
  font-size: 12.5px;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.lab-sign-name {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  font-size: 14px;
}

/* ---------- Right side: purity + methods + CTA ---------- */
.science-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.purity-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 22px 22px 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  color: var(--ink);
  box-shadow: 0 20px 40px -30px rgba(15, 20, 23, 0.15);
  overflow: hidden;
}
.purity-card::after {
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(96,69,244,0.08) 0%, rgba(96,69,244,0) 70%);
  border-radius: 50%;
  pointer-events: none;
}
.purity-ring {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  color: var(--accent);
}
.purity-ring-arc {
  transition: stroke-dashoffset 1800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.purity-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.purity-value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-feature-settings: "tnum" 1;
}
.purity-pct {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--ink-soft);
  margin-left: 2px;
}
.purity-label {
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-top: 6px;
  font-weight: 500;
}

/* ---------- Method list ---------- */
.method-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
}
.method-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  transition: background-color var(--t-fast) var(--ease);
}
.method-item:last-child { border-bottom: 0; }
.method-item:hover { background: rgba(96, 69, 244, 0.03); }
.method-icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: rgba(96, 69, 244, 0.08);
  border-radius: 12px;
  color: var(--accent);
}
.method-title {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.method-desc {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.45;
}
.method-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  background: rgba(96, 69, 244, 0.08);
  padding: 4px 10px;
  border-radius: 9999px;
  white-space: nowrap;
}

/* ---------- Science CTA pill ---------- */
.science-cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 9999px;
  background: var(--ink);
  color: var(--cream);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), transform var(--t-slow) var(--ease);
}
.science-cta:hover { background: #000; transform: translateX(2px); }
.science-cta svg { transition: transform var(--t-slow) var(--ease); }
.science-cta:hover svg { transform: translateX(3px); }

/* =========================================================
   RESEARCH PAGE — authoritative layout
   Hero with eyebrow + serif headline + lead
   Credibility stat bar (4 numeric stats)
   Attestation preview card (what you confirm at checkout)
   "Who we sell to" 4-tile grid
   Batch release flow (4 numbered steps with connector line)
   Quality instrument cards (3)
   Policy accordion (collapsible sections)
   Contact CTA
   ========================================================= */
.research-page {
  color: var(--ink);
  padding-bottom: 96px;
}
.research-hero {
  padding: clamp(56px, 8vw, 120px) 0 clamp(32px, 4vw, 56px);
  position: relative;
}
.research-hero-inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.research-hero h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(44px, 6.5vw, 88px);
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 14px 0 20px;
}
.research-hero h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}
.research-hero .lead {
  margin: 0 auto 32px;
  max-width: 620px;
}
.research-warn-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: rgba(229, 97, 74, 0.08);
  color: #c14a34;
  border: 1px solid rgba(229, 97, 74, 0.25);
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
}
.research-warn-inline svg { width: 14px; height: 14px; }

/* Credibility stat bar */
.research-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  max-width: 980px;
  margin: 40px auto 0;
  padding: 32px 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 20px 60px -30px rgba(15, 20, 23, 0.12);
}
.research-stat {
  text-align: center;
  padding: 0 16px;
  border-right: 1px solid var(--border);
}
.research-stat:last-child { border-right: 0; }
.research-stat-num {
  font-family: var(--font-serif);
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  font-feature-settings: "tnum" 1;
}
.research-stat-num em {
  font-size: 0.55em;
  color: var(--ink-muted);
  font-style: normal;
  font-family: var(--font-sans);
  font-weight: 500;
  margin-left: 2px;
}
.research-stat-label {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
@media (max-width: 760px) {
  .research-stats { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .research-stat { border-right: 0; padding: 8px 8px; }
  .research-stat:nth-child(odd) { border-right: 1px solid var(--border); }
}

/* Section spacing for research page */
.research-section {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) 24px 0;
}
.research-section .eyebrow {
  display: block;
  margin-bottom: 12px;
}
.research-section h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  line-height: 1.08;
}
.research-section h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}
.research-section-head {
  max-width: 680px;
  margin-bottom: 36px;
}
.research-section-head p {
  color: var(--ink-soft);
  font-size: 16.5px;
  line-height: 1.6;
}

/* Attestation preview card — shows what the user confirms at checkout */
.attest-card {
  background: linear-gradient(160deg, #fff 0%, var(--cream) 100%);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: clamp(24px, 3vw, 40px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 40px);
  box-shadow: 0 30px 60px -30px rgba(15, 20, 23, 0.15);
}
@media (max-width: 820px) {
  .attest-card { grid-template-columns: 1fr; }
}
.attest-card-head { display: flex; flex-direction: column; gap: 12px; }
.attest-card-head h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 32px);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.attest-card-head p {
  color: var(--ink-soft);
  line-height: 1.55;
  font-size: 14.5px;
}
.attest-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.attest-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
  transition: transform var(--t-slow) var(--ease), box-shadow var(--t-med) var(--ease);
}
.attest-checklist li:hover {
  transform: translateX(2px);
  box-shadow: 0 8px 20px -12px rgba(15, 20, 23, 0.1);
}
.attest-check {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #1cb56d;
  color: #fff;
  display: grid;
  place-items: center;
}
.attest-check svg { width: 12px; height: 12px; }

/* Who we sell to — 4-tile grid */
.sell-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 820px) { .sell-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sell-grid { grid-template-columns: 1fr; } }
.sell-tile {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform var(--t-slow) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-fast) var(--ease);
}
.sell-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -20px rgba(15, 20, 23, 0.12);
  border-color: rgba(96, 69, 244, 0.3);
}
.sell-tile-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(96, 69, 244, 0.08);
  color: var(--accent);
  display: grid;
  place-items: center;
}
.sell-tile h4 {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.sell-tile p {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* Batch-release flow — 4 numbered steps with connector */
.flow-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  position: relative;
  padding: 0;
}
@media (max-width: 900px) { .flow-steps { grid-template-columns: 1fr; } }
.flow-step {
  padding: 28px 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-right: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.flow-step:first-child { border-top-left-radius: 20px; border-bottom-left-radius: 20px; }
.flow-step:last-child { border-top-right-radius: 20px; border-bottom-right-radius: 20px; border-right: 1px solid var(--border); }
@media (max-width: 900px) {
  .flow-step {
    border-right: 1px solid var(--border);
    border-radius: 0;
  }
  .flow-step:first-child { border-radius: 20px 20px 0 0; }
  .flow-step:last-child { border-radius: 0 0 20px 20px; border-top: 0; }
  .flow-step:not(:first-child) { border-top: 0; }
}
.flow-step::after {
  content: '';
  position: absolute;
  right: -1px; top: 50%;
  width: 20px; height: 2px;
  background: var(--border);
  transform: translateY(-50%);
  z-index: 2;
}
.flow-step:last-child::after { display: none; }
@media (max-width: 900px) { .flow-step::after { display: none; } }
.flow-step-num {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 14px;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.flow-step-num::before {
  content: '';
  display: inline-block;
  width: 18px; height: 1.5px;
  background: var(--accent);
  vertical-align: middle;
  margin-right: 8px;
  transform: translateY(-3px);
}
.flow-step h4 {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.flow-step p {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* Instrument cards (3 quality methods) */
.instr-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 820px) { .instr-grid { grid-template-columns: 1fr; } }
.instr-card {
  background: var(--ink);
  color: var(--cream);
  border-radius: 24px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: transform var(--t-slow) var(--ease);
}
.instr-card:hover { transform: translateY(-3px); }
.instr-card::before {
  content: '';
  position: absolute;
  right: -60px; top: -60px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(96,69,244,0.25) 0%, rgba(96,69,244,0) 70%);
  border-radius: 50%;
  pointer-events: none;
}
.instr-card > * { position: relative; z-index: 1; }
.instr-card-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(235, 235, 237, 0.55);
}
.instr-card h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.instr-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(235, 235, 237, 0.72);
}
.instr-card-spec {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(235, 235, 237, 0.12);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(235, 235, 237, 0.72);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.instr-card-spec b {
  color: var(--cream);
  font-weight: 500;
}

/* Policy accordion */
.policy-accordion {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}
.policy-item {
  border-bottom: 1px solid var(--border);
}
.policy-item:last-child { border-bottom: 0; }
.policy-summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: background-color var(--t-fast) var(--ease);
}
.policy-summary::-webkit-details-marker { display: none; }
.policy-item:hover .policy-summary { background: rgba(15, 20, 23, 0.02); }
.policy-summary h4 {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.policy-chev {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(15, 20, 23, 0.04);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  transition: transform var(--t-slow) var(--ease), background-color var(--t-fast) var(--ease);
}
.policy-item[open] .policy-chev {
  transform: rotate(180deg);
  background: rgba(96, 69, 244, 0.1);
  color: var(--accent);
}
.policy-body {
  padding: 0 24px 24px;
  color: var(--ink-soft);
  line-height: 1.65;
  font-size: 14.5px;
}
.policy-body p + p { margin-top: 10px; }

/* Final contact CTA on research page */
.research-contact {
  max-width: 1120px;
  margin: clamp(48px, 6vw, 88px) auto 0;
  padding: 0 24px;
}
.research-contact-card {
  background:
    radial-gradient(600px 300px at 50% -30%, rgba(96,69,244,0.18) 0%, rgba(96,69,244,0) 70%),
    var(--ink);
  color: var(--cream);
  border-radius: 28px;
  padding: clamp(40px, 5vw, 72px);
  text-align: center;
  overflow: hidden;
  position: relative;
}
.research-contact-card h3 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 12px;
}
.research-contact-card h3 em {
  font-family: var(--font-serif);
  font-style: italic;
  color: #b3a5fa;
}
.research-contact-card p {
  color: rgba(235, 235, 237, 0.72);
  max-width: 520px;
  margin: 0 auto 28px;
  font-size: 15px;
  line-height: 1.55;
}
.research-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  background: #fff;
  color: var(--ink);
  border-radius: 9999px;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: transform var(--t-slow) var(--ease);
}
.research-contact-btn:hover { transform: translateY(-2px); }

/* =========================================================
   CART DRAWER — slide-in from right, site-wide
   Intercepts .cart-btn clicks on every page. Shows empty
   state or line items + checkout. Listens to cart:change
   for live re-render. Backdrop fade + panel slide are
   driven off .is-open on .cart-drawer.
   ========================================================= */
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear var(--t-med);
}
.cart-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s linear 0s;
}
.cart-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 23, 0.42);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.cart-drawer.is-open .cart-drawer-backdrop { opacity: 1; }

.cart-drawer-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 100%);
  background: var(--cream);
  display: flex;
  flex-direction: column;
  box-shadow: -24px 0 60px -20px rgba(15, 20, 23, 0.28);
  transform: translateX(102%);
  transition: transform 420ms var(--ease);
  will-change: transform;
}
.cart-drawer.is-open .cart-drawer-panel { transform: translateX(0); }
@media (max-width: 560px) {
  .cart-drawer-panel { width: 100%; }
}

/* Head */
.cart-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--cream);
}
.cart-drawer-head .eyebrow {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
.cart-drawer-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.015em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.1;
}
.cart-drawer-count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}
.cart-drawer-close {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: var(--trans-color), transform var(--t-slow) var(--ease);
}
.cart-drawer-close:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
  transform: rotate(90deg);
}

/* Body (scrollable) */
.cart-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0;
  -webkit-overflow-scrolling: touch;
}

/* Empty state */
.cart-drawer-empty {
  padding: clamp(32px, 8vh, 80px) 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 60%;
  justify-content: center;
}
.cart-drawer-empty-icon {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: rgba(15, 20, 23, 0.04);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.cart-drawer-empty h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.2;
}
.cart-drawer-empty p {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
  max-width: 300px;
}
.cart-drawer-shop { margin-top: 8px; }

/* Line items */
.cart-drawer-lines {
  display: flex;
  flex-direction: column;
}
.cart-drawer-line {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  gap: 14px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.cart-drawer-line:last-child { border-bottom: 0; }
.cart-drawer-line-thumb {
  width: 68px; height: 78px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--border);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.cart-drawer-line-thumb svg,
.cart-drawer-line-thumb img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.cart-drawer-line-meta h5 {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin-bottom: 3px;
}
.cart-drawer-line-meta p {
  font-size: 12px;
  color: var(--ink-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}
.cart-drawer-line-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cart-drawer-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}
.cart-drawer-qty button {
  width: 28px; height: 28px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}
.cart-drawer-qty button:hover { background: rgba(15, 20, 23, 0.06); }
.cart-drawer-qty span {
  min-width: 24px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.cart-drawer-remove {
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font-size: 12px;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease);
}
.cart-drawer-remove:hover { color: var(--danger); }
.cart-drawer-line-price {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  padding-top: 2px;
}

/* Foot */
.cart-drawer-foot {
  padding: 18px 24px 22px;
  border-top: 1px solid var(--border);
  background: var(--cream);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cart-drawer-foot.is-hidden { display: none; }

.cart-drawer-ship {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(96, 69, 244, 0.06);
  border-radius: 12px;
}
.cart-drawer-ship-line {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.3;
}
.cart-drawer-ship-line b { color: var(--ink); font-weight: 600; }
.cart-drawer-ship-line.is-met { color: var(--success); font-weight: 500; }
.cart-drawer-ship-bar {
  position: relative;
  height: 4px;
  background: rgba(15, 20, 23, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.cart-drawer-ship-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--accent) 0%, #8a73ff 100%);
  border-radius: 999px;
  transition: width 500ms var(--ease);
}

.cart-drawer-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  padding: 2px 2px 4px;
}
.cart-drawer-subtotal span:last-child {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.cart-drawer-checkout {
  margin-top: 2px;
  padding: 14px 24px;
  font-size: 14.5px;
  letter-spacing: 0.01em;
}
.cart-drawer-viewall {
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease);
}
.cart-drawer-viewall:hover { color: var(--ink); }
.cart-drawer-foot-note {
  font-size: 11.5px;
  color: var(--ink-muted);
  text-align: center;
  line-height: 1.45;
  margin-top: 2px;
}

@media (max-width: 560px) {
  .cart-drawer-head { padding: 18px 20px 14px; }
  .cart-drawer-title { font-size: 22px; }
  .cart-drawer-line { padding: 16px 20px; grid-template-columns: 60px 1fr auto; gap: 12px; }
  .cart-drawer-line-thumb { width: 60px; height: 70px; }
  .cart-drawer-foot { padding: 16px 20px 20px; }
}

/* =========================================================
   LEGAL / POLICY PAGES — Terms, Privacy, Shipping, About
   Shared prose-heavy layout: centered column, serif h1 with
   italic accent, grey subtitles, generous line-height.
   ========================================================= */
.legal-page { background: var(--cream); }
.legal-hero {
  padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 3vw, 40px);
  text-align: left;
}
.legal-hero .container-wide {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
}
.legal-hero .eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
  margin-bottom: 12px;
}
.legal-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 72px);
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--ink);
  margin-bottom: 14px;
}
.legal-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.legal-updated {
  font-size: 13px;
  color: var(--ink-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
}
.legal-body {
  padding: 0 0 clamp(64px, 8vw, 120px);
}
.legal-prose {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.72;
}
.legal-prose .lede {
  font-size: 18px;
  color: var(--ink);
  line-height: 1.55;
  padding-bottom: 28px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--border);
}
.legal-prose h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.2;
  margin-top: 40px;
  margin-bottom: 12px;
}
.legal-prose h2:first-of-type { margin-top: 8px; }
.legal-prose p { margin-bottom: 16px; }
.legal-prose p:last-child { margin-bottom: 0; }
.legal-prose strong { color: var(--ink); font-weight: 600; }
.legal-prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease);
}
.legal-prose a:hover { color: var(--accent-hover); }
.legal-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: rgba(15, 20, 23, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--ink);
}
.legal-prose ul,
.legal-prose ol {
  margin: 0 0 16px 22px;
  padding: 0;
}
.legal-prose li { margin-bottom: 8px; }
.legal-note {
  margin-top: 48px;
  padding: 16px 20px;
  background: rgba(96, 69, 244, 0.06);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink-soft);
}
@media (max-width: 640px) {
  .legal-prose { font-size: 15.5px; }
  .legal-prose .lede { font-size: 17px; }
}

/* =========================================================
   ABOUT page — hero + principles grid + lab spec card +
   who-we-serve tiles. Reuses the research-contact-card
   footer for the closing CTA.
   ========================================================= */
.about-page { background: var(--cream); }

.about-hero {
  padding: clamp(40px, 6vw, 80px) 0 clamp(32px, 4vw, 64px);
}
.about-hero .container-wide {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
}
.about-hero .eyebrow {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 14px;
}
.about-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(40px, 6.4vw, 84px);
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--ink);
  margin-bottom: 20px;
  max-width: 900px;
}
.about-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.about-lede {
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 720px;
}

/* Principles — 3-column with monospace numbers */
.about-principles {
  padding: clamp(48px, 6vw, 96px) 0;
  border-top: 1px solid var(--border);
}
.about-principles .container-wide {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}
.about-princ-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
}
@media (max-width: 900px) {
  .about-princ-grid { grid-template-columns: 1fr; }
}
.about-princ {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.about-princ-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.about-princ h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
}
.about-princ p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* Laboratory — 2-column copy + spec list */
.about-lab {
  padding: clamp(64px, 8vw, 120px) 0;
  background: var(--cream-2);
}
.about-lab .container-wide {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}
.about-lab-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}
@media (max-width: 900px) {
  .about-lab-grid { grid-template-columns: 1fr; }
}
.about-lab-copy .eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
  margin-bottom: 12px;
}
.about-lab-copy .h2 {
  margin-bottom: 20px;
}
.about-lab-copy p {
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 16px;
  font-size: 16px;
  max-width: 580px;
}
.about-lab-spec {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 22px;
  box-shadow: 0 1px 0 rgba(15, 20, 23, 0.02);
}
.about-lab-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
}
.about-lab-spec-row:last-child { border-bottom: 0; }
.about-lab-spec-row span {
  color: var(--ink-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.about-lab-spec-row b {
  color: var(--ink);
  font-weight: 500;
  font-size: 15px;
  text-align: right;
}

/* Who we serve — 4-tile grid */
.about-serve {
  padding: clamp(64px, 8vw, 120px) 0;
}
.about-serve .container-wide {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}
.about-serve .eyebrow {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 12px;
  text-align: center;
}
.about-serve .h2 {
  text-align: center;
  margin-bottom: 40px;
}
.about-serve-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 980px) {
  .about-serve-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .about-serve-grid { grid-template-columns: 1fr; }
}
.about-serve-tile {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.about-serve-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -24px rgba(15, 20, 23, 0.2);
}
.about-serve-tile h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 8px;
}
.about-serve-tile p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* =========================================================
   404 page — centered column with monospace code mark
   ========================================================= */
.not-found-page { background: var(--cream); }
.not-found {
  min-height: calc(100vh - var(--nav-h));
  display: grid;
  place-items: center;
  padding: clamp(48px, 8vw, 96px) 24px;
  text-align: center;
}
.not-found .container-wide {
  max-width: 640px;
  margin: 0 auto;
}
.nf-code {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--accent);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(96, 69, 244, 0.08);
  margin-bottom: 20px;
}
.nf-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 72px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 16px;
}
.nf-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.nf-lede {
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 28px;
}
.nf-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.nf-note {
  font-size: 14px;
  color: var(--ink-muted);
}
.nf-note a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}