/* =========================================================
   ATTUNE — Front page (v2, Claude Design handoff)
   Loads only on the homepage via functions.php.
   Design tokens come from colors_and_type.css.
   Shared chrome (nav, footer, sticky CTA, common utilities) lives in site.css.
   ========================================================= */

body.attune-home {
  background: var(--bg-1);
  color: var(--fg-1);
}

@media (min-width: 880px) {
  /* Homepage hero needs no extra nav padding adjustment beyond site.css */
}

/* ---------- Hero shell ---------- */
.hero {
  position: relative;
  width: 100%;
  padding-top: 72px;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-1);
}
.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}
@media (min-width: 880px) {
  .hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
  .hero-grid {
    flex: 1;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: var(--space-7);
    padding: 0 var(--space-7);
  }
}

/* =========================================================
   AURORA — full hero, premium subtle
   Three soft blobs drifting on long, de-synced loops +
   a slow parallax conic shimmer behind them.
   ========================================================= */
.aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Conic shimmer — slow rotation, cycles hue */
.aurora-shimmer {
  position: absolute;
  inset: -30%;
  background: conic-gradient(from 0deg at 50% 50%,
    color-mix(in oklab, var(--attune-terracotta) 22%, transparent) 0deg,
    color-mix(in oklab, var(--attune-magenta) 20%, transparent) 90deg,
    color-mix(in oklab, var(--uplift-violet) 18%, transparent) 180deg,
    color-mix(in oklab, var(--ascend-gold) 16%, transparent) 270deg,
    color-mix(in oklab, var(--attune-terracotta) 22%, transparent) 360deg
  );
  filter: blur(90px);
  opacity: 0.6;
  animation: auroraRotate 36s linear infinite;
}
.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform, background, opacity;
}
.aurora-blob.a {
  width: 62%;
  aspect-ratio: 1;
  top: -18%;
  left: -8%;
  animation:
    driftA 16s cubic-bezier(0.45, 0, 0.55, 1) infinite,
    hueA   22s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.aurora-blob.b {
  width: 70%;
  aspect-ratio: 1;
  bottom: -25%;
  right: -10%;
  animation:
    driftB 18s cubic-bezier(0.45, 0, 0.55, 1) infinite,
    hueB   26s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.aurora-blob.c {
  width: 52%;
  aspect-ratio: 1;
  top: 22%;
  right: 8%;
  animation:
    driftC 14s cubic-bezier(0.45, 0, 0.55, 1) infinite,
    hueC   20s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.aurora-blob.d {
  /* Accent; cycles through warm tones */
  width: 40%;
  aspect-ratio: 1;
  bottom: -8%;
  left: 18%;
  animation:
    driftD 19s cubic-bezier(0.45, 0, 0.55, 1) infinite,
    hueD   28s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* Grain — very subtle, gives the aurora a film-like presence */
.aurora-grain {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Canvas wash — softens aurora against the off-white so text stays legible */
.aurora-wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      color-mix(in oklab, var(--canvas) 55%, transparent) 0%,
      color-mix(in oklab, var(--canvas) 20%, transparent) 40%,
      transparent 65%,
      color-mix(in oklab, var(--canvas) 12%, transparent) 100%),
    linear-gradient(180deg,
      color-mix(in oklab, var(--canvas) 28%, transparent) 0%,
      transparent 40%,
      color-mix(in oklab, var(--canvas) 18%, transparent) 100%);
  pointer-events: none;
}

@keyframes auroraRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Drift — larger travel, faster cycles */
@keyframes driftA {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(18%, 14%, 0) scale(1.12); }
  66%  { transform: translate3d(28%, 6%, 0) scale(1.04); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes driftB {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  40%  { transform: translate3d(-22%, -14%, 0) scale(1.14); }
  70%  { transform: translate3d(-10%, -24%, 0) scale(0.96); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes driftC {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  35%  { transform: translate3d(-16%, 20%, 0) scale(0.9); }
  70%  { transform: translate3d(-28%, 8%, 0) scale(1.14); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes driftD {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(20%, -14%, 0) scale(1.18); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* Hue cycles — each blob breathes through the brand palette
   on its own schedule. Together they never repeat. */
@keyframes hueA {
  0%, 100% {
    background: radial-gradient(circle at center,
      color-mix(in oklab, var(--attune-terracotta) 85%, transparent) 0%,
      color-mix(in oklab, var(--attune-terracotta) 38%, transparent) 40%,
      transparent 70%);
    opacity: 0.72;
  }
  50% {
    background: radial-gradient(circle at center,
      color-mix(in oklab, var(--attune-magenta) 78%, transparent) 0%,
      color-mix(in oklab, var(--attune-magenta) 34%, transparent) 42%,
      transparent 72%);
    opacity: 0.65;
  }
}
@keyframes hueB {
  0%, 100% {
    background: radial-gradient(circle at center,
      color-mix(in oklab, var(--attune-magenta) 78%, transparent) 0%,
      color-mix(in oklab, var(--attune-magenta) 30%, transparent) 42%,
      transparent 72%);
    opacity: 0.68;
  }
  50% {
    background: radial-gradient(circle at center,
      color-mix(in oklab, var(--uplift-violet) 72%, transparent) 0%,
      color-mix(in oklab, var(--uplift-violet) 30%, transparent) 45%,
      transparent 74%);
    opacity: 0.76;
  }
}
@keyframes hueC {
  0%, 100% {
    background: radial-gradient(circle at center,
      color-mix(in oklab, var(--uplift-violet) 72%, transparent) 0%,
      color-mix(in oklab, var(--uplift-violet) 28%, transparent) 45%,
      transparent 75%);
    opacity: 0.6;
  }
  50% {
    background: radial-gradient(circle at center,
      color-mix(in oklab, var(--attune-terracotta) 78%, transparent) 0%,
      color-mix(in oklab, var(--attune-terracotta) 30%, transparent) 45%,
      transparent 74%);
    opacity: 0.7;
  }
}
@keyframes hueD {
  0%, 100% {
    background: radial-gradient(circle at center,
      color-mix(in oklab, var(--ascend-gold) 55%, transparent) 0%,
      color-mix(in oklab, var(--ascend-gold) 20%, transparent) 45%,
      transparent 75%);
    opacity: 0.42;
  }
  50% {
    background: radial-gradient(circle at center,
      color-mix(in oklab, var(--ascend-orange) 65%, transparent) 0%,
      color-mix(in oklab, var(--ascend-orange) 22%, transparent) 45%,
      transparent 74%);
    opacity: 0.5;
  }
}

/* ---------- Copy column ---------- */
.hero-copy {
  position: relative;
  z-index: 2;
  padding: var(--space-7) 0 var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
}
@media (min-width: 880px) {
  .hero-copy {
    padding: var(--space-9) 0;
    max-width: 720px;
  }
}

.eyebrow-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-2);
  font-weight: 500;
}
.eyebrow-stars {
  letter-spacing: 0.1em;
  color: var(--attune-terracotta);
  font-size: 0.78rem;
}

.hero-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.15;
  color: var(--fg-1);
  font-size: clamp(2.5rem, 7.2vw, 5rem);
  max-width: 520px;
  text-wrap: pretty;
}
.hero-h1 .grad {
  color: var(--attune-magenta);
}

.hero-lead {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.1875rem, 1.7vw, 1.375rem);
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 40ch;
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* ---------- CTA ---------- */
.cta-group { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 28px;
  background: var(--obsidian);
  color: var(--fg-on-dark);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  overflow: hidden;
  transition:
    transform var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard),
    background-color var(--dur-base) var(--ease-standard);
  box-shadow: 0 2px 6px rgba(15,15,16,0.12), 0 1px 2px rgba(15,15,16,0.08);
  isolation: isolate;
  min-height: 44px;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 900ms var(--ease-calm);
  pointer-events: none;
  z-index: 1;
}
.cta:hover::before { transform: translateX(120%); }
.cta:hover { background: #18181a; box-shadow: 0 10px 28px rgba(15,15,16,0.22), 0 3px 8px rgba(15,15,16,0.1); }
.cta:active { transform: translateY(2px); box-shadow: 0 1px 2px rgba(15,15,16,0.12); }
.cta:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.cta-arrow { position: relative; z-index: 2; transition: transform var(--dur-base) var(--ease-standard); }
.cta:hover .cta-arrow { transform: translateX(3px); }
.cta-label { position: relative; z-index: 2; }

.cta-micro {
  font-size: var(--step--1);
  color: var(--fg-2);
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.cta-micro .dot { display: inline-block; margin: 0 0.55em; color: var(--fg-muted); }

/* ---------- Product column ---------- */
.hero-product {
  position: relative;
  z-index: 2;
  padding-bottom: var(--space-8);
  display: grid;
  place-items: center;
}
@media (min-width: 880px) {
  .hero-product { padding-bottom: 0; padding-top: var(--space-6); }
}
.product-wrap {
  position: relative;
  width: clamp(280px, 78%, 560px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.product-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 36px 48px rgba(15,15,16,0.28))
          drop-shadow(0 14px 22px rgba(15,15,16,0.18));
  animation: float 9s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ---------- Entry animation ---------- */
.fade-up { opacity: 0; transform: translateY(14px); animation: fadeUp 900ms var(--ease-calm) forwards; }
.fade-up-1 { animation-delay: 120ms; }
.fade-up-2 { animation-delay: 260ms; }
.fade-up-3 { animation-delay: 440ms; }
.fade-up-4 { animation-delay: 620ms; }
.fade-up-5 { animation-delay: 780ms; }
.fade-in-product { opacity: 0; animation: fadeIn 1400ms var(--ease-calm) 300ms forwards; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  /* These kill-rules used single-class selectors while the rules that START the
     animation are compound (.aurora-blob.a, .hero-product .product-img, .orbit.o1),
     so the animation always won on specificity. Matched here so it actually stops. */
  .aurora-blob, .aurora-blob.a, .aurora-blob.b, .aurora-blob.c,
  .aurora-shimmer,
  .product-img, .hero-product .product-img,
  .final-aurora, .final-aurora div,
  .bundle-aurora, .bundle-aurora div,
  .page-hero-aurora div, .page-cta-aurora div, .panel-aurora div,
  .word-grad-multi { animation: none !important; }
  .fade-up, .fade-in-product { opacity: 1; transform: none; animation: none; }
  .cta::before { display: none; }
}

/* =========================================================
   SHARED SECTION SCAFFOLD
   ========================================================= */
.section {
  position: relative;
  padding: clamp(64px, 9vw, 128px) var(--space-5);
}
.section--tight { padding: clamp(48px, 6vw, 88px) var(--space-5); }
.section--dark { background: var(--obsidian); color: var(--fg-on-dark); }
.container {
  max-width: var(--container-max);
  margin: 0 auto;
}
.container--narrow { max-width: var(--container-narrow); }

.section-head { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: clamp(40px, 5vw, 72px); align-items: center; text-align: center; }
.section-head.center { align-items: center; text-align: center; }
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-3);
}
.section--dark .eyebrow { color: var(--fg-on-dark-2); }
h1, h2, h3, .h1, .h2, .h3, .hero-h1, .empathy h2 { text-transform: none; }
.h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  text-wrap: pretty;
}
.h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
}
.sub {
  margin: 0;
  font-size: clamp(1.0625rem, 1.4vw, 1.2rem);
  color: var(--fg-2);
  line-height: 1.5;
  max-width: 60ch;
}
.sub.center { margin-left: auto; margin-right: auto; }
.section--dark .sub { color: var(--fg-on-dark-2); }


/* Fade-in on scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 800ms var(--ease-calm), transform 800ms var(--ease-calm); }
.reveal.in { opacity: 1; transform: none; }

/* .reveal (and its reduced-motion rule) is defined once, in site.css. */

/* =========================================================
   TRUST STRIP — infinite marquee
   ========================================================= */
.trust {
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
  padding: 0;
  background: var(--bg-1);
  overflow: hidden;
  position: relative;
}
/* Edge fades so the loop dissolves at left/right */
.trust::before, .trust::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 96px;
  z-index: 2;
  pointer-events: none;
}
.trust::before { left: 0;  background: linear-gradient(90deg, var(--bg-1), transparent); }
.trust::after  { right: 0; background: linear-gradient(270deg, var(--bg-1), transparent); }

.trust-track {
  display: flex;
  width: max-content;
  animation: trustMarquee 46s linear infinite;
  padding: 16px 0;
}
.trust-track:hover { animation-play-state: paused; }

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 32px;
  font-size: 0.9375rem;
  color: var(--fg-2);
  line-height: 1.3;
  white-space: nowrap;
  position: relative;
}
.trust-item + .trust-item::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--border-2);
}
.trust-item svg { flex: 0 0 20px; color: var(--fg-1); }
.trust-item b { color: var(--fg-1); font-weight: 600; }

@media (min-width: 880px) {
  .trust-item { padding: 0 40px; font-size: 1rem; }
}

@keyframes trustMarquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .trust-track { animation: none; }
}

/* =========================================================
   PRACTICE (Why Attune + Ritual combined)
   ========================================================= */
.practice-head {
  max-width: 760px;
  margin: 0 auto clamp(56px, 7vw, 96px);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
}
.practice-head .h2 {
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  letter-spacing: -0.02em;
  line-height: 1.02;
  max-width: 22ch;
  text-wrap: balance;
}
.practice-lead {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.55;
  color: var(--fg-2);
  text-wrap: pretty;
}

.practice-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  max-width: 1200px;
  margin: 0 auto;
  justify-content: center;
  perspective: 1400px;
}
.practice-steps--four { max-width: 1320px; }
@media (min-width: 768px) {
  .practice-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 32px);
  }
}

.practice-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(28px, 2.6vw, 36px);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 0.55) 100%),
    var(--bg-1);
  border: 1px solid rgba(30, 30, 30, 0.06);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 1px 2px rgba(30, 30, 30, 0.04),
    0 10px 30px -18px rgba(30, 30, 30, 0.18);
  transform-style: preserve-3d;
  transition:
    transform 560ms var(--ease-calm),
    box-shadow 560ms var(--ease-calm),
    border-color 560ms var(--ease-calm);
  will-change: transform;
}
.practice-step::before {
  /* Sheen — top-edge specular, very faint */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0) 22%);
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.55;
}
.practice-step::after {
  /* Warm glow that blooms on hover, hugging the bottom */
  content: "";
  position: absolute;
  left: 10%; right: 10%;
  bottom: -14px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    color-mix(in oklab, var(--attune-magenta) 22%, transparent) 0%,
    transparent 72%);
  filter: blur(18px);
  opacity: 0;
  transition: opacity 560ms var(--ease-calm);
  pointer-events: none;
  z-index: -1;
}
.practice-step:hover {
  transform: translateY(-4px) rotateX(1.2deg);
  border-color: rgba(30, 30, 30, 0.09);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 2px 4px rgba(30, 30, 30, 0.05),
    0 28px 48px -22px rgba(30, 30, 30, 0.28);
}
.practice-step:hover::after { opacity: 1; }

.practice-num {
  position: relative;
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--attune-magenta);
  font-variant-numeric: tabular-nums;
  padding: 8px 14px;
  border-radius: 999px;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--attune-magenta) 10%, transparent) 0%,
      color-mix(in oklab, var(--attune-magenta) 4%, transparent) 100%);
  border: 1px solid color-mix(in oklab, var(--attune-magenta) 18%, transparent);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 1px 2px rgba(30, 30, 30, 0.04);
}

.practice-text { display: flex; flex-direction: column; gap: 10px; }
.practice-title {
  margin: 0 0 var(--space-3) 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1875rem, 1.55vw, 1.375rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.practice-body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 34ch;
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .practice-step, .practice-step:hover { transform: none; transition: none; }
  .practice-step::after { display: none; }
}

/* =========================================================
   PILLARS
   ========================================================= */
.pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) { .pillars-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }
@media (min-width: 1024px) { .pillars-grid { grid-template-columns: repeat(3, 1fr); } }

.pillar {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.pillar:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-2);
}
.pillar-icon {
  width: 56px; height: 56px;
  color: var(--attune-terracotta);
  display: grid; place-items: center;
}
.pillar-icon svg { width: 100%; height: 100%; display: block; }
.pillar-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.005em;
  font-size: 1.25rem;
  line-height: 1.1;
  min-height: 2.4em;
  color: var(--fg-1);
  margin: 0;
}
.pillar-body {
  font-size: 0.9375rem;
  color: var(--fg-2);
  line-height: 1.5;
  margin: 0;
}

/* =========================================================
   PRODUCT ECOSYSTEM
   ========================================================= */
.products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 880px) { .products-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }

.product-card {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.product-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent, var(--attune-terracotta));
}
.product-card.attune { --accent: linear-gradient(90deg, var(--attune-terracotta), var(--attune-magenta)); }
.product-card.ascend { --accent: linear-gradient(90deg, var(--ascend-orange), var(--ascend-gold)); }
.product-card.uplift { --accent: linear-gradient(90deg, var(--uplift-magenta-soft), var(--uplift-violet)); }

.product-photo {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--bg-2);
  padding: var(--space-6);
}
.product-photo img {
  max-width: 78%;
  max-height: 100%;
  filter: drop-shadow(0 18px 28px rgba(15,15,16,0.18));
}
.product-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.product-tag { font-family: var(--font-mono); font-size: 0.78rem; color: var(--fg-3); letter-spacing: 0.06em; }
.product-name {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--fg-1);
  margin: 0;
}
.product-desc { font-size: 0.9375rem; color: var(--fg-2); line-height: 1.5; margin: 0; }
.product-pricerow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border-1); }
.product-cta {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-4);
  font-family: var(--font-body); font-weight: 500; font-size: 0.9375rem;
  color: var(--fg-1);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.product-cta:hover { color: var(--attune-terracotta); }
.product-cta svg { transition: transform var(--dur-base) var(--ease-standard); }
.product-cta:hover svg { transform: translateX(3px); }

/* =========================================================
   COMPANION
   ========================================================= */
.companion-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-8);
  align-items: center;
}
@media (min-width: 880px) { .companion-grid { grid-template-columns: 1.3fr 1fr; gap: var(--space-8); } }

.companion-features { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: flex; flex-direction: column; gap: var(--space-5); }
.companion-features li { display: flex; gap: var(--space-4); align-items: flex-start; }
.companion-features .f-icon {
  flex: 0 0 36px; height: 36px; border: 1px solid var(--border-1); border-radius: var(--radius-md);
  display: grid; place-items: center; color: var(--fg-1);
}
.companion-features b { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.005em; font-size: 1rem; color: var(--fg-1); display: block; margin-bottom: 2px; }
.companion-features span { color: var(--fg-2); font-size: 0.9375rem; line-height: 1.5; }
.companion-link { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-6); color: var(--fg-1); font-weight: 500; text-decoration: none; }
.companion-link:hover { color: var(--attune-terracotta); }
.companion-link:hover svg { transform: translateX(3px); }
.companion-link svg { transition: transform var(--dur-base) var(--ease-standard); }

/* Phone mockup */
.phone {
  margin: 0 auto;
  width: clamp(234px, 72%, 306px);
  aspect-ratio: 340/680;
  background: #0f0f10;
  border-radius: 40px;
  padding: 12px;
  transform: rotate(-2deg);
  box-shadow: 0 40px 60px -20px rgba(15,15,16,0.35), 0 18px 30px -15px rgba(15,15,16,0.2);
  border: 1px solid rgba(250,249,246,0.08);
}
.phone-screen {
  width: 100%; height: 100%; border-radius: 30px;
  background: var(--obsidian);
  padding: 16px 12px;
  display: flex; flex-direction: column; gap: 10px;
  overflow: hidden;
  position: relative;
}
.phone-header {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(250,249,246,0.08);
}
.phone-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: radial-gradient(circle at 30% 50%, var(--attune-terracotta), var(--attune-magenta));
}
.phone-name { color: var(--fg-on-dark); font-size: 0.82rem; font-weight: 600; }
.phone-sub { color: rgba(250,249,246,0.5); font-size: 0.7rem; }
.bubble {
  max-width: 82%;
  font-size: 0.82rem; line-height: 1.4;
  padding: 9px 12px;
  border-radius: 14px;
}
.bubble.bot { background: var(--obsidian-2); color: rgba(250,249,246,0.92); align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble.user { background: color-mix(in oklab, var(--attune-terracotta) 75%, var(--obsidian)); color: var(--fg-on-dark); align-self: flex-end; border-bottom-right-radius: 4px; font-family: var(--font-mono); font-size: 0.8rem; }
.mood-row { display: flex; gap: 6px; margin-top: -4px; }
.mood {
  flex: 1; aspect-ratio: 1; max-width: 36px;
  background: var(--obsidian-2); border-radius: 10px;
  display: grid; place-items: center;
  font-size: 16px;
  border: 1px solid transparent;
}
.mood.sel {
  background: color-mix(in oklab, var(--attune-magenta) 30%, var(--obsidian));
  border-color: color-mix(in oklab, var(--attune-magenta) 55%, transparent);
}
.energy-row { display: flex; gap: 4px; }
.energy {
  flex: 1; height: 30px;
  background: var(--obsidian-2); border-radius: 8px;
  display: grid; place-items: center;
  color: rgba(250,249,246,0.7); font-size: 0.78rem; font-family: var(--font-mono);
}
.energy.sel {
  background: color-mix(in oklab, var(--attune-magenta) 30%, var(--obsidian));
  color: var(--fg-on-dark);
}
.insight-card {
  margin-top: 6px;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(234,53,241,0.14), rgba(212,91,37,0.1));
  border: 1px solid rgba(234,53,241,0.25);
}
.insight-card .t { color: rgba(255,255,255,0.55); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 4px; }
.insight-card .b { color: #fff; font-size: 0.82rem; line-height: 1.4; }

/* =========================================================
   INGREDIENTS
   ========================================================= */
.ingredients-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-5);
}
@media (min-width: 880px) { .ingredients-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }

.ingredient {
  padding: var(--space-6);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--bg-1);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.ingredient-tag { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--fg-3); text-transform: none; }
.ingredient-name {
  font-family: var(--font-display); font-weight: 700; text-transform: none; letter-spacing: 0;
  font-size: 1.375rem; line-height: 1.15; color: var(--fg-1);
}
.ingredient-desc { font-size: 0.9375rem; color: var(--fg-2); line-height: 1.55; margin: 0; }
.ingredients-footer .dot { margin: 0 0.75em; color: var(--fg-muted); }
@media (min-width: 640px) { }
@media (min-width: 1024px) { }

.review-card {
  scroll-snap-align: start;
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.review-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.review-stars { color: var(--attune-terracotta); letter-spacing: 0.12em; font-size: 0.95rem; }
.review-quote { font-size: 1rem; line-height: 1.55; color: var(--fg-1); margin: 0; text-wrap: pretty; }
.review-meta { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border-1); font-size: 0.8125rem; color: var(--fg-3); display: flex; flex-direction: column; gap: 2px; }
.review-name { color: var(--fg-1); font-weight: 500; font-size: 0.875rem; }
.reviews-link-row { display: flex; justify-content: center; margin-top: var(--space-7); }

/* =========================================================
   GUARANTEE
   ========================================================= */
.guarantee {
  text-align: center;
  padding: clamp(48px, 6vw, 80px) var(--space-5);
}
.guarantee h3 { max-width: 22ch; margin: 0 auto; font-size: clamp(1.25rem, 2.4vw, 1.625rem); }
.guarantee p { max-width: 46ch; margin: var(--space-3) auto 0; color: var(--fg-2); font-size: 0.9375rem; line-height: 1.55; }

/* =========================================================
   FAQ
   ========================================================= */
.faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--border-1); }
.faq-item { border-bottom: 1px solid var(--border-1); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-5) 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(0.8125rem, 1.2vw, 1rem);
  color: var(--fg-1);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--attune-terracotta); }
.faq-chevron {
  flex: 0 0 20px;
  transition: transform var(--dur-base) var(--ease-standard);
}
.faq-item[open] .faq-chevron { transform: rotate(45deg); }
.faq-answer {
  padding: 0 0 var(--space-6);
  color: var(--fg-2);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 68ch;
}

/* =========================================================
   FINAL CTA
   ========================================================= */
.final {
  position: relative; overflow: hidden;
  padding: clamp(56px, 8vw, 100px) var(--space-5) clamp(96px, 13vw, 160px);
  background: var(--obsidian);
  color: var(--fg-on-dark);
  text-align: center;
  isolation: isolate;
}
.final-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.final-aurora > div { position: absolute; border-radius: 50%; filter: blur(90px); }
.final-aurora .f1 {
  width: 60%; aspect-ratio: 1; top: -20%; left: -10%;
  background: radial-gradient(circle, color-mix(in oklab, var(--attune-terracotta) 85%, transparent), transparent 70%);
  opacity: 0.55;
  animation: driftA 16s cubic-bezier(0.45,0,0.55,1) infinite, hueA 22s cubic-bezier(0.45,0,0.55,1) infinite;
}
.final-aurora .f2 {
  width: 70%; aspect-ratio: 1; bottom: -25%; right: -15%;
  background: radial-gradient(circle, color-mix(in oklab, var(--attune-magenta) 80%, transparent), transparent 72%);
  opacity: 0.55;
  animation: driftB 18s cubic-bezier(0.45,0,0.55,1) infinite, hueB 26s cubic-bezier(0.45,0,0.55,1) infinite;
}
.final-aurora .f3 {
  width: 50%; aspect-ratio: 1; top: 20%; right: 5%;
  background: radial-gradient(circle, color-mix(in oklab, var(--uplift-violet) 75%, transparent), transparent 74%);
  opacity: 0.45;
  animation: driftC 14s cubic-bezier(0.45,0,0.55,1) infinite;
}
.final-content { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.final h2 {
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: -0.025em; line-height: 0.95;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  margin: 0 0 var(--space-4) 0;
  color: var(--fg-on-dark);
}
.final .sub { color: rgba(250,249,246,0.75); max-width: 48ch; }
.final-cta {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 11px 32px;
  background: var(--canvas); color: var(--ink);
  border-radius: var(--radius-pill);
  font-weight: 500; font-size: 1.0625rem;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(15,15,16,0.3);
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform var(--dur-base) var(--ease-standard);
  margin-top: var(--space-3);
  min-height: 44px;
}
.final-cta::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(234,53,241,0.22) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 900ms var(--ease-calm); z-index: 1;
}
.final-cta:hover::before { transform: translateX(120%); }
.final-cta:hover { transform: translateY(-2px); }
.final-cta span, .final-cta svg { position: relative; z-index: 2; }

/* =========================================================
   PRODUCT CARD — tiered pricing (sub primary, one-time + 3-pack secondary)
   ========================================================= */
.product-pricerow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-1);
}
.price-sub {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1;
  color: var(--fg-1);
}
.price-sub-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--attune-magenta);
  background: color-mix(in oklab, var(--attune-magenta) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--attune-magenta) 22%, transparent);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.price-secondary .pipe { color: var(--fg-muted); margin: 0 0.5em; }

/* =========================================================
   BUNDLE SPOTLIGHT
   ========================================================= */
.bundle {
  position: relative;
  overflow: hidden;
  background: var(--obsidian);
  color: var(--fg-on-dark);
  isolation: isolate;
  padding: clamp(72px, 10vw, 140px) var(--space-5);
}
.bundle-aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bundle-aurora .b1, .bundle-aurora .b2, .bundle-aurora .b3 {
  position: absolute; border-radius: 50%; filter: blur(90px);
}
.bundle-aurora .b1 {
  width: 55%; aspect-ratio: 1; top: -15%; left: -10%;
  background: radial-gradient(circle, color-mix(in oklab, var(--attune-terracotta) 70%, transparent), transparent 70%);
  opacity: 0.55;
  animation: driftA 18s cubic-bezier(0.45,0,0.55,1) infinite;
}
.bundle-aurora .b2 {
  width: 65%; aspect-ratio: 1; bottom: -20%; right: -15%;
  background: radial-gradient(circle, color-mix(in oklab, var(--attune-magenta) 60%, transparent), transparent 72%);
  opacity: 0.5;
  animation: driftB 22s cubic-bezier(0.45,0,0.55,1) infinite;
}
.bundle-aurora .b3 {
  width: 50%; aspect-ratio: 1; top: 25%; right: 10%;
  background: radial-gradient(circle, color-mix(in oklab, var(--uplift-violet) 60%, transparent), transparent 74%);
  opacity: 0.45;
  animation: driftC 17s cubic-bezier(0.45,0,0.55,1) infinite;
}
.bundle-head {
  position: relative; z-index: 2;
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--space-7);
}
.bundle-head .h2 { margin-top: 0; }
.bundle-head .sub { margin-top: var(--space-4); }
.bundle-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr; gap: var(--space-7);
  align-items: center;
}
@media (min-width: 880px) { .bundle-grid { grid-template-columns: 1.1fr 1fr; gap: var(--space-8); } }

.bundle .eyebrow { color: rgba(250,249,246,0.7); }
.bundle h2 { color: var(--fg-on-dark); }
.bundle .sub { color: rgba(250,249,246,0.78); }

.bundle-cta {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 14px 28px;
  background: var(--canvas); color: var(--ink);
  border-radius: var(--radius-pill);
  font-weight: 500; font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(15,15,16,0.3);
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 44px;
}
.bundle-cta::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(234,53,241,0.18) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 900ms var(--ease-calm); z-index: 1;
}
.bundle-cta:hover::before { transform: translateX(120%); }
.bundle-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15,15,16,0.4); }
.bundle-cta span, .bundle-cta svg { position: relative; z-index: 2; }

.bundle-photo {
  position: relative;
  aspect-ratio: 1;
  display: grid; place-items: center;
}
.bundle-photo picture { display: contents; }
.bundle-photo img {
  max-width: 90%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 34px 52px rgba(0,0,0,0.42));
}

/* =========================================================
   FOUNDER NOTE — pull-quote on obsidian
   ========================================================= */
.founder {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--obsidian);
  color: var(--fg-on-dark);
  padding: clamp(72px, 9vw, 120px) var(--space-5);
}
.founder-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.founder-aurora .fb1, .founder-aurora .fb2 {
  position: absolute; border-radius: 50%; filter: blur(110px);
}
.founder-aurora .fb1 {
  width: 50%; aspect-ratio: 1; top: 8%; left: -18%;
  background: radial-gradient(circle, color-mix(in oklab, var(--attune-terracotta) 55%, transparent), transparent 70%);
  opacity: 0.30;
}
.founder-aurora .fb2 {
  width: 45%; aspect-ratio: 1; bottom: -12%; right: -12%;
  background: radial-gradient(circle, color-mix(in oklab, var(--attune-magenta) 50%, transparent), transparent 72%);
  opacity: 0.22;
}
.founder-inner {
  position: relative; z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: flex-start;
  text-align: left;
}
.founder-quote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.875rem, 3.6vw, 2.875rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--fg-on-dark);
  text-wrap: balance;
}
.founder-supp {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(250,249,246,0.74);
  max-width: 56ch;
  text-wrap: pretty;
}
.founder-mark {
  display: inline-flex;
  margin-top: var(--space-2);
}
@media (min-width: 880px) {
}
.reviews-chev.prev { left: 0; }
.reviews-chev.next { right: 0; }
@media (min-width: 1024px) {
}

/* Footer / nav / sticky CTA / newsletter styles all live in site.css now (shared chrome). */

/* =========================================================
   ============================================================
   V3 IMPLEMENTATION (May 8, 2026)
   Aurora untouched. Below: orb overlay + section overrides
   per the locked spec. To roll back: delete from this marker
   to end of file.
   ============================================================
   ========================================================= */

/* ---------- Floating orbital orbs (V5 approved) ---------- */
.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  transform-origin: 0 0;
  pointer-events: none;
  z-index: 1;
}
.orbit.o1 { animation: orbitRotate1 32s linear infinite; }
.orbit.o2 { animation: orbitRotate2 48s linear infinite reverse; }
.orbit.o3 { animation: orbitRotate3 64s linear infinite; }
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
}
.orbit.o1 .orb {
  width: 14vmin; height: 14vmin;
  left: -32vmin; top: -10vmin;
  background: radial-gradient(circle at 35% 35%, rgba(234,53,241,0.85) 0%, rgba(212,91,37,0.55) 50%, transparent 90%);
  box-shadow: 0 0 60px rgba(234,53,241,0.45), 0 0 100px rgba(212,91,37,0.30);
  animation: counterRotateA 32s linear infinite;
}
.orbit.o2 .orb {
  width: 8vmin; height: 8vmin;
  left: -42vmin; top: 18vmin;
  background: radial-gradient(circle at 35% 35%, rgba(202,115,243,0.80) 0%, rgba(226,105,226,0.50) 50%, transparent 90%);
  box-shadow: 0 0 40px rgba(202,115,243,0.45), 0 0 70px rgba(226,105,226,0.25);
  animation: counterRotateB 48s linear infinite;
}
.orbit.o3 .orb {
  width: 5vmin; height: 5vmin;
  left: -50vmin; top: -22vmin;
  background: radial-gradient(circle at 35% 35%, rgba(255,200,92,0.85) 0%, rgba(239,127,65,0.50) 50%, transparent 90%);
  box-shadow: 0 0 30px rgba(255,200,92,0.55), 0 0 50px rgba(239,127,65,0.30);
  animation: counterRotateC 64s linear infinite;
}
@keyframes orbitRotate1 { to { transform: rotate(360deg); } }
@keyframes orbitRotate2 { to { transform: rotate(360deg); } }
@keyframes orbitRotate3 { to { transform: rotate(360deg); } }
@keyframes counterRotateA { to { transform: rotate(-360deg); } }
@keyframes counterRotateB { to { transform: rotate(360deg); } }
@keyframes counterRotateC { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
  .orbit, .orbit.o1, .orbit.o2, .orbit.o3, .orb { animation: none !important; }
}

/* ---------- Hero image +20% (transparent backgrounds) ---------- */
.hero-product .product-img {
  max-width: none;
  width: 120%;
  height: auto;
  margin: 0 auto;
  display: block;
}
@media (max-width: 880px) {
  .hero-product .product-img { width: 100%; }
}

/* ---------- Trust strip A3: elevated marquee ---------- */
.trust { padding: 0; position: relative; background: var(--bg-1); }
.trust-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(212,91,37,0.35) 18%, rgba(234,53,241,0.35) 50%, rgba(212,91,37,0.35) 82%, transparent 100%);
  margin: 0;
}
.trust-track {
  animation-duration: 80s !important;
  padding: 22px 0;
  gap: 80px;
}
.trust-item {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  gap: 12px;
}
.trust-item b { font-weight: 800; color: var(--attune-terracotta); }
.trust::before, .trust::after { width: 140px; }

/* ---------- Pillar icons: img tag instead of inline SVG ---------- */
.pillar-icon {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
}
.pillar-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- Product card: Subscribe & save on its own line ---------- */
.product-pricerow .price-line {
  display: flex; align-items: baseline; gap: 6px;
}
.product-pricerow .price-sub-badge-row {
  margin-top: 6px;
}
.product-pricerow .price-sub-badge {
  display: inline-flex;
  align-items: center;
}

/* ---------- Bundle B2+B1 hybrid (doors framing, no prices) ---------- */
.bundle-doors {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.bundle-doors li {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: 0;
  border: 0;
}
.bundle-door-mark {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(250,249,246,0.18);
  border-radius: 999px;
}
.bdm {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: block;
}
.bdm-attune { background: radial-gradient(circle at 35% 35%, var(--attune-magenta), var(--attune-terracotta)); }
.bdm-ascend { background: radial-gradient(circle at 35% 35%, var(--ascend-gold), var(--ascend-orange)); }
.bdm-uplift { background: radial-gradient(circle at 35% 35%, var(--uplift-magenta-soft), var(--uplift-violet)); }
.bdm-companion { background: radial-gradient(circle at 35% 35%, #faf9f6 0%, rgba(250,249,246,0.5) 100%); }
.bundle-door-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-on-dark);
  margin-bottom: 4px;
}
.bundle-door-for {
  display: block;
  color: rgba(250,249,246,0.78);
  font-size: 0.95rem;
  line-height: 1.5;
}
@media (min-width: 700px) {
}
@media (min-width: 1000px) {
}

/* ---------- Founder section: bigger orb ---------- */
.founder-mark {
  width: 170px;
  height: 170px;
  margin: var(--space-7) auto var(--space-5);
}
.founder-mark svg { width: 100%; height: 100%; }
.founder-supp { max-width: 60ch; margin: 0 auto; }

/* ---------- Practice D1+D3: large numerals + card surface ---------- */
.practice-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
}
.practice-step-card {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5) var(--space-6);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--dur-slow) var(--ease-standard),
    box-shadow var(--dur-slow) var(--ease-standard);
}
.practice-step-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--attune-terracotta), var(--attune-magenta));
  opacity: 0.85;
}
.practice-step:hover .practice-step-card {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* ---------- Ingredients E1+E3: surface + accent strip + photo ---------- */
.ingredients-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 700px) { .ingredients-grid { grid-template-columns: repeat(3, 1fr); } }
.ingredient-card {
  background: var(--bg-2);
  border-radius: var(--radius-lg);
  padding: 0;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform var(--dur-slow) var(--ease-standard),
    box-shadow var(--dur-slow) var(--ease-standard);
}
.ingredient-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.ing-fungi .ingredient-accent {
  background: linear-gradient(90deg, var(--attune-terracotta), var(--attune-magenta));
}
.ing-mush .ingredient-accent {
  background: linear-gradient(90deg, var(--ascend-orange), var(--ascend-gold));
}
.ing-noo .ingredient-accent {
  background: linear-gradient(90deg, var(--uplift-magenta-soft), var(--uplift-violet));
}
.ingredient-photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.ingredient-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ingredient-body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ---------- Companion phone: dose row + new insight card ---------- */
.dose-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
}
.dose-btn {
  background: rgba(250,249,246,0.06);
  border: 1px solid rgba(250,249,246,0.16);
  color: rgba(250,249,246,0.92);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  text-align: left;
  font-family: var(--font-body);
}
.dose-btn.sel {
  background: rgba(234,53,241,0.18);
  border-color: rgba(234,53,241,0.55);
  color: #faf9f6;
}
.insight-card .b-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: rgba(250,249,246,0.78);
  font-family: var(--font-mono);
  margin: 2px 0;
}
.insight-card .b-quote {
  margin-top: 8px;
  font-size: 0.78rem;
  color: rgba(250,249,246,0.92);
  font-style: italic;
  line-height: 1.4;
}

/* ---------- Section eyebrow color uses ink, not gray-3 ---------- */
.eyebrow { color: var(--fg-1); }

/* =========================================================
   ============================================================
   ROUND 2 IMPLEMENTATION (May 8, 2026 PM)
   Per user feedback: smaller logos, trust strip overhaul,
   pillars no-cards, products transparent + simplified pricing,
   reviews carousel, founder no signoff + smaller orb, practice
   numerals smaller + numeric copy, ingredients new copy +
   no accent strips, final CTA cleanup, uniform CTA buttons.
   ============================================================
   ========================================================= */

/* ---------- Trust strip — smaller font, faster scroll, dot-center ---------- */
.trust-track { animation-duration: 50s !important; gap: 60px; }
.trust-item {
  font-size: 0.78rem;     /* down from 0.95rem */
  letter-spacing: 0.12em;
  gap: 10px;
}
.trust-item svg { width: 18px; height: 18px; }
.trust-item span { display: inline-flex; align-items: center; }
/* Center the middle dots (·) in trust copy */
.trust-item span,
.trust-item b { line-height: 1; }
.trust-item span > b + * { margin-left: 0; }

/* ---------- PILLARS — no cards, just centered on bg ---------- */
.pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  max-width: 980px;
  margin: var(--space-7) auto 0;
}
@media (min-width: 700px) {
  .pillars-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}
.pillar {
  background: transparent !important;
  border: 0 !important;
  padding: var(--space-3) var(--space-4) !important;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  box-shadow: none !important;
}
.pillar-icon {
  width: 110px;
  height: 110px;
  margin: 0 auto var(--space-3);
}
.pillar-icon img { width: 100%; height: 100%; object-fit: contain; }
.pillar-title {
  font-size: clamp(1.5rem, 2.4vw, 1.875rem); /* bigger */
  margin: 0;
  letter-spacing: -0.005em;
}
.pillar-body {
  font-size: 1.0625rem;     /* bigger */
  line-height: 1.55;
  color: var(--fg-1);
  max-width: 28ch;
  margin: 0 auto;
}

/* ---------- PRODUCT CARDS — transparent treatment, simpler pricing, clickable ---------- */
.product-photo {
  background: transparent !important;
  padding: var(--space-4) !important;
  aspect-ratio: 1;
}
.product-photo img {
  max-width: 96% !important;
  max-height: 100% !important;
  filter: drop-shadow(0 22px 32px rgba(15,15,16,0.18));
  transition: transform var(--dur-slow) var(--ease-standard);
}
/* When the whole card is a link, make the photo zoom subtly on hover */
a.product-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
a.product-card-link:hover .product-photo img { transform: scale(1.04); }
a.product-card-link:hover .product-card { box-shadow: var(--shadow-lg); }

/* Simplified pricerow */
.product-pricerow {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-1);
  margin-top: var(--space-3);
}
.product-pricerow .price-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.product-pricerow .price-aslowas {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-right: 2px;
}
.product-pricerow .price-sub {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--fg-1);
}
.product-pricerow .price-sub-cadence {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--fg-3);
}
.product-pricerow .price-sub-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--attune-magenta) 12%, transparent);
  color: var(--attune-magenta);
  border: 1px solid color-mix(in oklab, var(--attune-magenta) 30%, transparent);
}
.product-pricerow .price-secondary { display: none; }   /* hide one-time / 3-pack */
.product-pricerow .price-sub-badge-row { margin-top: 0; } /* compact */

/* "View product" line -> larger, more prominent */
.product-cta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-1);
  margin-top: var(--space-5);
}

/* ---------- BUNDLE — uniform CTA, clickable photo, no micro ---------- */
a.bundle-photo-link { display: block; }
a.bundle-photo-link img { transition: transform var(--dur-slow) var(--ease-standard); }
a.bundle-photo-link:hover img { transform: scale(1.03); }

/* Uniform CTA — same height/padding as hero .cta, inverse colors for dark bg */
.bundle .bundle-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 16px 28px;            /* match hero CTA */
  border-radius: 8px;
  text-decoration: none;
  border: 0;
  box-shadow: none;
  margin-top: var(--space-6);
}
.bundle .bundle-cta:hover { background: var(--ascend-gold); }
.bundle .bundle-cta::before { display: none; }   /* user removed */

/* ---------- REVIEWS CAROUSEL — 2 visible desktop, 1 mobile, paginated dots ---------- */
.reviews-carousel {
  position: relative;
  margin-top: var(--space-7);
  overflow-x: hidden;
  overflow-y: visible;
  padding: 16px 0 8px;
}
.reviews-track {
  display: flex;
  gap: var(--space-5);
  transition: transform 600ms cubic-bezier(0.2, 0, 0, 1);
  will-change: transform;
}
.reviews-track .review-card {
  flex: 0 0 100%;
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
@media (min-width: 700px) {
  .reviews-track .review-card { flex: 0 0 calc((100% - var(--space-5)) / 2); }
}
.reviews-track .review-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-1);
}
.reviews-track .review-tag .product-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: #faf9f6;
  font-size: 0.7rem;
}
.reviews-track .review-stars { color: var(--attune-terracotta); letter-spacing: 0.14em; font-size: 1rem; }
.reviews-track .review-quote {
  font-size: 1rem; line-height: 1.55; color: var(--fg-1); margin: 0;
}
.reviews-track .review-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--fg-1);
}
.reviews-track .review-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #2e7d4f;
  font-size: 0.78rem;
  margin-left: auto;
}
.reviews-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-6);
  padding-bottom: 6px;
}
.reviews-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(30,30,30,0.18);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.reviews-dot[aria-current="true"] {
  background: var(--attune-magenta);
  transform: scale(1.2);
}

/* ---------- FOUNDER — orb 30% smaller (170 -> 119), no signoff ---------- */
.founder-mark { width: 119px; height: 119px; margin: var(--space-7) auto var(--space-4); }

/* ---------- PRACTICE — step numerals -25%, fits on one line ---------- */
.practice-num-big { font-size: clamp(2.625rem, 6vw, 4.5rem); }
.practice-title { white-space: nowrap; font-size: 1.0625rem; letter-spacing: -0.005em; }
@media (max-width: 600px) {
  .practice-title { white-space: normal; }
}

/* ---------- INGREDIENTS — remove accent, simpler ---------- */
.ingredient-accent { display: none !important; }
.ingredient-card { box-shadow: var(--shadow-sm); }
.ingredient-photo { aspect-ratio: 16/10; }

/* ---------- FINAL CTA — uniform with hero, guarantee under, no disclaimer ---------- */
.final-cta {
  padding: 16px 28px !important;        /* match hero */
  border-radius: 8px !important;
}
.final-cta::before { display: none !important; }    /* user removed */

.final-guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: var(--space-5);
  text-align: center;
}
.final-guarantee-icon {
  width: 24px; height: 24px;
  flex: 0 0 24px;
  color: rgba(250,249,246,0.85);
}

/* ---------- Hide the entire Guarantee section block ---------- */
.guarantee { display: none !important; }

/* =========================================================
   ============================================================
   ROUND 3 IMPLEMENTATION (May 8, 2026 PM late)
   ============================================================
   ========================================================= */

@keyframes wordGradShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ---------- HERO image ---------- */
.hero-product .product-img {
  width: 457px;
  max-width: none;
  animation: heroFloat 6s ease-in-out infinite alternate;
}
@keyframes heroFloat {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-14px); }
}
@media (max-width: 880px) {
  .hero-product .product-img { width: 99%; max-width: 100%; animation-duration: 5s; }
}

/* ---------- TRUST STRIP — bigger icons, smaller bolder display font, dot center ---------- */
.trust-track { animation-duration: 50s !important; gap: 56px; }
.trust-item {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  gap: 10px;
  line-height: 1;
  align-items: center;
}
.trust-item svg { width: 22px !important; height: 22px !important; flex: 0 0 22px; }
.trust-item span { line-height: 1; vertical-align: middle; }
/* Center the · separator within the line */
.trust-item span { display: inline-flex; align-items: center; }

/* ---------- PILLARS — more space between heading and icons ---------- */
.pillars-grid { margin-top: var(--space-9); }   /* was --space-7 */
.pillar { gap: var(--space-4); }
.pillar-icon { margin-bottom: var(--space-2); width: 132px; height: 132px; }

/* ---------- PRODUCT PHOTOS — actually show transparent without crop ---------- */
.product-photo {
  background: transparent !important;
  padding: var(--space-3) !important;
  aspect-ratio: 1;
  overflow: visible;
}
.product-photo img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  filter: drop-shadow(0 22px 32px rgba(15,15,16,0.18));
  transition: transform var(--dur-slow) var(--ease-standard);
}
/* Bundle photo too */
.bundle-photo {
  background: transparent !important;
  padding: 0;
}
.bundle-photo img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 30px 50px rgba(15,15,16,0.30));
  transition: transform var(--dur-slow) var(--ease-standard);
}

/* ---------- UNIFORM PILL CTA BUTTONS (everywhere) ---------- */
.cta,
.bundle .bundle-cta,
.final-cta,
.cta-light {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px !important;
  border-radius: var(--radius-pill) !important;       /* PILL not 8px */
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  line-height: 1;
}
/* Hero / final = dark on light */
.cta, .final-cta {
  background: var(--ink);
  color: var(--canvas);
}
.cta:hover, .final-cta:hover { background: var(--attune-terracotta); }
/* Bundle = inverse: light on dark */
.bundle .bundle-cta {
  background: var(--canvas);
  color: var(--ink);
}
.bundle .bundle-cta:hover { background: var(--ascend-gold); }

/* ---------- REVIEWS CAROUSEL — match previous-site layout ---------- */
.reviews-track .review-card {
  padding: var(--space-5) var(--space-6);
  gap: var(--space-3);
}
@media (min-width: 700px) {
  /* Wider cards: keep 2 per page but with proportionally wider feel via reduced gap */
  .reviews-track { gap: var(--space-4); }
  .reviews-track .review-card {
    flex: 0 0 calc((100% - var(--space-4)) / 2);
  }
}
/* Top row: pill + age | stars right */
.reviews-track .review-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.reviews-track .review-tag-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.reviews-track .product-pill {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  background: var(--ink);
  color: var(--canvas);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}
.reviews-track .review-age {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--fg-3);
  text-transform: uppercase;
}
.reviews-track .review-stars {
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  color: var(--attune-terracotta);
}
.reviews-track .review-quote {
  font-size: 1.05rem;       /* bigger */
  line-height: 1.5;
  color: var(--fg-1);
  margin: 0;
  font-weight: 500;          /* slightly bolder */
}
/* Bottom row: name | verified */
.reviews-track .review-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-1);
}
.reviews-track .review-name {
  font-family: var(--font-display);
  font-weight: 700;       /* bolder */
  font-size: 0.95rem;
  color: var(--fg-1);
}
.reviews-track .review-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2e7d4f;
  font-size: 0.78rem;
  font-weight: 500;
}
.reviews-track .review-verified-circle {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #2e7d4f;
  color: #faf9f6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex: 0 0 16px;
}

/* ---------- COMPANION feature icons — colorize ---------- */
.companion-features li:nth-child(1) .f-icon {
  border-color: color-mix(in oklab, var(--attune-terracotta) 50%, transparent);
  color: var(--attune-terracotta);
  background: color-mix(in oklab, var(--attune-terracotta) 8%, transparent);
}
.companion-features li:nth-child(2) .f-icon {
  border-color: color-mix(in oklab, var(--attune-magenta) 50%, transparent);
  color: var(--attune-magenta);
  background: color-mix(in oklab, var(--attune-magenta) 8%, transparent);
}
.companion-features li:nth-child(3) .f-icon {
  border-color: color-mix(in oklab, var(--uplift-violet) 50%, transparent);
  color: var(--uplift-violet);
  background: color-mix(in oklab, var(--uplift-violet) 8%, transparent);
}
@media (min-width: 700px) { }

/* ---------- FINAL CTA Guarantee block — restore original centered design ---------- */
.final-guarantee {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding: var(--space-6);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.final-guarantee-icon {
  width: 36px;
  height: 36px;
  flex: none;
  color: rgba(250,249,246,0.85);
}

/* ---------- VIDEO SPOTLIGHT (between Pillars and Reviews) ---------- */
.video-spotlight { padding-top: 0; }
.video-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 880px) {
  .video-grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-8); }
}
.video-text { max-width: 36ch; }
.video-text h2 { margin-bottom: var(--space-4); }
.video-text .lead {
  font-size: 1.125rem;
  color: var(--fg-1);
  line-height: 1.5;
}

.video-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  background: #0f0f10;
  box-shadow: 0 30px 60px -25px rgba(15,15,16,0.45), 0 18px 36px -20px rgba(15,15,16,0.25);
  transition: transform var(--dur-slow) var(--ease-standard), box-shadow var(--dur-slow) var(--ease-standard);
}
.video-frame:hover { transform: translateY(-3px); box-shadow: 0 36px 70px -25px rgba(15,15,16,0.5), 0 22px 40px -20px rgba(15,15,16,0.30); }
.video-frame:focus-visible { outline: 2px solid var(--attune-magenta); outline-offset: 4px; }
.video-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-standard), filter var(--dur-slow) var(--ease-standard);
}
.video-frame:hover img { transform: scale(1.04); filter: brightness(0.85); }
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 84px; height: 84px;
  border-radius: 50%;
  background: rgba(250,249,246,0.95);
  border: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(15,15,16,0.3);
  transition: transform var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.video-frame:hover .video-play { transform: translate(-50%, -50%) scale(1.06); background: var(--ascend-gold); }
.video-play svg {
  width: 28px; height: 28px;
  margin-left: 4px; /* visual centering for triangle */
  color: var(--ink);
}

/* ---------- MOBILE polish ---------- */
@media (max-width: 600px) {
  .pillar-icon { width: 96px; height: 96px; }
  .practice-num-big { font-size: 2.4rem; }
  .reviews-track .review-card { padding: var(--space-5); }
  .reviews-track .review-quote { font-size: 1rem; }
  .video-play { width: 64px; height: 64px; }
  .video-play svg { width: 22px; height: 22px; }
  .final-guarantee-text b { font-size: 1.25rem; }
}

/* ---------- TRUST STRIP edge fade widths ---------- */
.trust::before, .trust::after { width: 110px; }

/* =========================================================
   ============================================================
   ROUND 4 IMPLEMENTATION (May 8, 2026 ~01:30)
   - Single-purple .word-grad (revert from multi).
   - .word-grad-multi reserved for Three/One only.
   - Trust strip dots centered between items.
   - Pillar titles use display font.
   - Video section vertical layout, centered.
   - Reviews: name+verified same row, no date, outline circle.
   - Bundle photo bigger.
   - CTA buttons: 8px radius rectangular, all matching hero.
   - Final guarantee: original .guarantee section CSS restored.
   - Practice + Timeline merged via H1 (steps map to phases).
   ============================================================
   ========================================================= */


/* ---------- TRUST STRIP — dots centered between items ---------- */
.trust-track { gap: 0 !important; }
.trust-item + .trust-item::before {
  content: "·";
  display: inline-flex;
  align-items: center;
  margin: 0 28px;             /* equal whitespace both sides */
  padding: 0;
  color: var(--fg-3);
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 700;
  position: relative;
  top: -1px;                  /* visual baseline correction */
}
.trust-track .trust-item:first-child::before { content: none; }

/* ---------- PILLAR titles use display font ---------- */
.pillar-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
}

/* ---------- VIDEO section: vertical, centered, normal padding ---------- */
.video-grid {
  grid-template-columns: 1fr !important;       /* stack vertical */
  gap: var(--space-7) !important;
  text-align: center;
  align-items: center;
}
.video-text {
  max-width: 56ch;
  margin: 0 auto;
  text-align: center;
}
.video-text .lead { margin-left: auto; margin-right: auto; }
.video-frame {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}
.video-spotlight {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
}

/* ---------- REVIEWS: name + verified same row, no date, outline circle ---------- */
.reviews-track .review-age { display: none !important; }
.reviews-track .review-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-1);
}
.reviews-track .review-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--fg-1);
}
.reviews-track .review-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2e7d4f;
  font-size: 0.85rem;
  font-weight: 500;
}
.reviews-track .review-verified-circle {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: transparent;          /* outline only */
  border: 1.5px solid #2e7d4f;
  color: #2e7d4f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 18px;
  line-height: 1;
}

/* ---------- BUNDLE photo bigger and aligned ---------- */
.bundle-grid {
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (max-width: 880px) {
  .bundle-grid { grid-template-columns: 1fr; }
}
.bundle-photo {
  background: transparent !important;
  padding: 0;
  display: block;
}
.bundle-photo img {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
  filter: drop-shadow(0 30px 50px rgba(15,15,16,0.30));
}

/* ---------- CTA BUTTONS: original rectangular 8px radius, uniform ---------- */
.cta,
.bundle .bundle-cta,
.final-cta,
.cta-light,
.cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px !important;
  border-radius: 8px !important;     /* rectangular, NOT pill */
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  line-height: 1;
}
.cta, .final-cta {
  background: var(--ink);
  color: var(--canvas);
}
.cta:hover, .final-cta:hover { background: var(--attune-terracotta); }
.bundle .bundle-cta {
  background: var(--canvas);
  color: var(--ink);
}
.bundle .bundle-cta:hover { background: var(--ascend-gold); }

/* ---------- FINAL GUARANTEE: restore EXACT original .guarantee styling ---------- */
.final-guarantee {
  display: block;
  text-align: center;
  margin: var(--space-8) auto 0;
  padding: 0;
  max-width: 640px;
}
.final-guarantee-icon {
  width: 36px;
  height: 36px;
  display: block;
  margin: 0 auto var(--space-4);
  color: rgba(250,249,246,0.9);
}
.final-guarantee h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: #faf9f6;
  margin: 0 0 var(--space-3);
  text-align: center;
}
.final-guarantee p {
  font-family: var(--font-body);
  font-size: 1rem;
  color: rgba(250,249,246,0.85);
  line-height: 1.55;
  text-align: center;
  margin: 0 auto;
  max-width: 56ch;
}
/* Restyle practice steps for H1 markup */
.practice-step .practice-num-big { display: none !important; }
.practice-phase-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--attune-terracotta);
  margin-bottom: var(--space-2);
}

/* ---------- Hero h1 stays — but no special override needed if word-grad reverted ---------- */

/* =========================================================
   ROUND 5 — every item from user's 1:30am follow-up
   ========================================================= */

/* ---------- CTA buttons: REVERT to ORIGINAL style ---------- */
/* Original was sentence-case, body font, 8px radius, smaller padding */
.cta,
.bundle .bundle-cta,
.final-cta,
.cta-light,
.cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px !important;       /* original size */
  border-radius: 8px !important;
  font-family: var(--font-body) !important;   /* body font, NOT display */
  text-transform: none !important;            /* NOT uppercase */
  letter-spacing: 0 !important;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  line-height: 1.2;
}
.cta, .final-cta {
  background: var(--ink);
  color: var(--canvas);
}
.cta:hover, .final-cta:hover { background: var(--attune-terracotta); }
.bundle .bundle-cta {
  background: var(--canvas);
  color: var(--ink);
}
.bundle .bundle-cta:hover { background: var(--ascend-gold); }

/* ---------- TRUST STRIP — remove dot separators entirely ---------- */
.trust-track { gap: 56px !important; }
.trust-item + .trust-item::before { content: none !important; }

/* ---------- PILLARS — bolder headings, bigger icons ---------- */
.pillar-icon {
  width: 150px !important; height: 150px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  margin-bottom: var(--space-6) !important;
}
.pillar-icon img { object-position: center bottom !important; }
.pillar-title { min-height: 2.4em; }
.pillar-body { min-height: 3.2em; }
@media (max-width: 600px) {
  .pillar-icon {
    width: 106px !important; height: 106px !important;
    margin-bottom: var(--space-5) !important;
  }
}
.pillar-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: clamp(1.625rem, 2.6vw, 2.125rem) !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
}

/* ---------- VIDEO section — only heading + video, no extra copy, smaller on desktop ---------- */
.video-text .lead,
.video-text .video-bullets { display: none !important; }
.video-frame { max-width: 760px !important; }   /* was 980px, smaller */
@media (max-width: 880px) { .video-frame { max-width: 100% !important; } }

/* ---------- REVIEWS — heading on ONE LINE ---------- */
.section [data-screen-label]::nope {} /* placeholder to keep selector unique above */
section[data-screen-label="04 Reviews"] .h2 {
  white-space: nowrap;
  font-size: clamp(1.875rem, 3.6vw, 2.875rem) !important;
}
@media (max-width: 700px) {
  section[data-screen-label="04 Reviews"] .h2 {
    white-space: normal;
    font-size: clamp(1.875rem, 7vw, 2.5rem) !important;
  }
}
/* Mobile: match every other section heading (1.625rem). Reviews was the one
   outlier at 30px, which read as the others being undersized. Aug 30. */
@media (max-width: 600px) {
  section[data-screen-label="04 Reviews"] .h2 { font-size: 1.625rem !important; }
}

/* ---------- PRODUCT CARDS — distinct background from section ---------- */
.product-card {
  background: #ffffff !important;             /* solid white, distinct from canvas off-white */
  border: 1px solid var(--border-1) !important;
  box-shadow: var(--shadow-sm) !important;
}
.product-card:hover { box-shadow: var(--shadow-lg) !important; }

/* ---------- REVIEW META — force same row even on narrow ---------- */
.reviews-track .review-meta {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

/* =========================================================
   ROUND 6 — restore EXACT original hero CTA spec, all buttons match
   ========================================================= */

.cta,
.bundle .bundle-cta,
.final-cta,
.cta-light,
.cta-ghost {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-3) !important;          /* 12px */
  padding: 10px 28px !important;            /* original */
  border-radius: var(--radius-pill) !important;  /* PILL */
  font-family: var(--font-body) !important; /* Hanken Grotesk */
  font-size: 1rem !important;               /* var(--step-0) = 16px */
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;          /* sentence case */
  text-decoration: none !important;
  white-space: nowrap;
  border: 0 !important;
  line-height: 1.2;
  min-height: 44px !important;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard),
    background-color var(--dur-base) var(--ease-standard);
  box-shadow: 0 2px 6px rgba(15,15,16,0.12), 0 1px 2px rgba(15,15,16,0.08) !important;
}

/* Default colors: dark on light (hero, final, default) */
.cta, .final-cta {
  background: var(--obsidian) !important;
  color: var(--fg-on-dark) !important;
}
.cta:hover, .final-cta:hover {
  background: #18181a !important;
  box-shadow: 0 10px 28px rgba(15,15,16,0.22), 0 3px 8px rgba(15,15,16,0.1) !important;
}
.cta:active, .final-cta:active { transform: translateY(2px); }

/* Inverse colors: light on dark (bundle section has dark bg) */
.bundle .bundle-cta {
  background: var(--canvas) !important;
  color: var(--ink) !important;
}
.bundle .bundle-cta:hover {
  background: var(--ascend-gold) !important;
  box-shadow: 0 10px 28px rgba(15,15,16,0.22) !important;
}
.bundle .bundle-cta:active { transform: translateY(2px); }

/* Shimmer pseudo on all */
.cta::before,
.bundle .bundle-cta::before,
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 900ms var(--ease-calm);
  pointer-events: none;
  z-index: 1;
}
.cta:hover::before,
.bundle .bundle-cta:hover::before,
.final-cta:hover::before { transform: translateX(120%); }

/* For dark-bg button, shimmer needs to be slightly darker tint */
.bundle .bundle-cta::before {
  background: linear-gradient(100deg, transparent 30%, rgba(255,200,92,0.30) 50%, transparent 70%);
}

/* Single-line section headings (Nature's Best, FAQ) — desktop only */
.h2--single {
  white-space: nowrap;
  max-width: none;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 920px) {
  .h2--single {
    white-space: normal;
    width: auto;
    max-width: 100%;
  }
}

/* ---------- Hero check-circle (matches reviews verified-circle) ---------- */
.cta-micro .check-circle {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #2e7d4f;
  color: #faf9f6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 18px;
  line-height: 1;
}

/* ---------- Reviews 3 & 4: pill color variants ---------- */
.reviews-track .review-tag .product-pill--ascend {
  background: var(--ascend-orange);
  color: var(--canvas);
}
.reviews-track .review-tag .product-pill--uplift {
  background: var(--uplift-violet);
  color: var(--canvas);
}

/* ---------- Reviews section: tighten above heading, more breathing below ---------- */
section[data-screen-label="04 Reviews"] {
  padding-top: clamp(40px, 5vw, 80px);
  padding-bottom: clamp(56px, 7vw, 110px);
}
section[data-screen-label="04 Reviews"] .section-head {
  margin-bottom: clamp(48px, 6.2vw, 96px);
}

/* ---------- Ecosystem (products) section: tighten above heading, more breathing below ---------- */
section[data-screen-label="05 Ecosystem"] {
  padding-top: clamp(40px, 5vw, 80px);
}
section[data-screen-label="05 Ecosystem"] .section-head {
  margin-bottom: clamp(56px, 7vw, 96px);
}


/* ---------- Ingredient cards: static 3D depth + heading/body breathing + hover lift ---------- */
.ingredient-body {
  gap: 14px;
}
.ingredient-card {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  box-shadow:
    0 14px 28px -14px rgba(15,15,16,0.18),
    0 6px 14px -8px rgba(15,15,16,0.12),
    inset 0 1px 0 rgba(255,255,255,0.55);
  transition:
    transform 380ms cubic-bezier(0.2,0,0,1),
    box-shadow 380ms cubic-bezier(0.2,0,0,1);
}
.ingredient-card:hover {
  transform: translateY(-6px) scale(1.012);
  box-shadow:
    0 28px 50px -18px rgba(15,15,16,0.28),
    0 14px 28px -12px rgba(15,15,16,0.18),
    inset 0 1px 0 rgba(255,255,255,0.55);
}

/* ---------- Practice 4-card layout ---------- */
@media (min-width: 768px) and (max-width: 1099px) {
  .practice-steps--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .practice-steps--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
  .practice-steps--four .practice-step { padding: 12px; }
  .practice-steps--four .practice-step-card { padding: var(--space-5) var(--space-5); }
  .practice-steps--four .practice-title {
    font-size: clamp(1rem, 1.1vw, 1.125rem);
    line-height: 1.2;
    white-space: nowrap;
    margin: 0 0 var(--space-3) 0;
  }
  .practice-steps--four .practice-body {
    font-size: 0.9375rem;
    line-height: 1.55;
  }
  .practice-steps--four .practice-phase-tag {
    font-size: 0.72rem;
    margin-bottom: var(--space-3);
  }
}
.practice-steps--four .practice-phase-tag { white-space: nowrap; flex-wrap: nowrap; }
.practice-steps--four .practice-phase-tag > span:last-child { white-space: nowrap; }

/* =========================================================
   MOBILE OPTIMIZATION PASS — May 10, 2026
   Goal: tighter rhythm, no clipped text, smaller headlines,
   no oversized cards. Desktop unchanged.
   ========================================================= */
@media (max-width: 600px) {

  /* --- General section rhythm --- */
  .section { padding: 56px var(--space-5); }
  .section-head { margin-bottom: 32px; gap: var(--space-3); }

  /* --- Headlines: smaller mobile h2 so long phrases don't tower --- */
  .h2 { font-size: 1.625rem !important; line-height: 1.28; }
  .practice-head .h2 { font-size: 1.625rem !important; line-height: 1.28 !important; }
  .final h2 { font-size: 2rem !important; line-height: 1.22; }
  .h2--single { white-space: normal !important; max-width: none !important; }

  /* --- Pillars: tighter rhythm --- */
  .pillars-grid { margin-top: 8px !important; gap: var(--space-7); }
  .pillar { padding: 0 !important; gap: var(--space-3) !important; }

  /* --- Companion features: fix horizontal text clipping --- */
  .companion-features li > div:last-child { flex: 1 1 auto; min-width: 0; }
  .companion-features b,
  .companion-features span { overflow-wrap: break-word; word-wrap: break-word; }

  /* --- Companion phone mockup: scale down on mobile --- */
  .phone { width: clamp(220px, 62%, 260px) !important; }

  /* --- Product cards: less photo padding so card height is reasonable --- */
  .product-photo { padding: var(--space-4) !important; aspect-ratio: 0.92 !important; }
  .product-photo img { max-width: 68% !important; }
  .product-body { padding: var(--space-5) !important; gap: var(--space-2) !important; }
  .products-grid { gap: var(--space-4); }

  /* --- Practice timeline cards: tighter --- */
  .practice-step { padding: 24px !important; }
  .practice-steps { gap: var(--space-4); }

  /* --- Bundle (Complete Practice) tighter --- */
  .bundle-head { margin-bottom: var(--space-5) !important; }
  .bundle-doors li { gap: 12px; }

  /* --- Founder text body: smaller and tighter on mobile --- */
  .founder-quote { font-size: 1.5rem !important; line-height: 1.3 !important; }
  .founder-supp { font-size: 0.9375rem !important; line-height: 1.55 !important; }

  /* --- Reviews: tighter --- */
  .reviews-section { padding-top: 8px; }

  /* --- FAQ: tighter row padding --- */
  .faq-item summary { padding: var(--space-4) 0 !important; }

  /* --- Ingredients cards: tighter padding inside --- */
  .ingredient-body { padding: var(--space-5) !important; }

  /* --- Bundle CTA: center align under door list on mobile --- */
  .bundle-grid > div:first-child { text-align: center; }
  .bundle-grid .bundle-doors { text-align: left; }
  .bundle-cta { margin-left: auto !important; margin-right: auto !important; }

  /* --- Companion-link: keep left-aligned, slight nudge --- */
  .companion-link { margin-top: var(--space-5); }

  /* --- Section-head text-wrap for long headlines so wraps are smarter --- */
  .section-head .h2 { text-wrap: balance; }

  /* --- Hero CTA + 30-day badge: tighter spacing --- */
  .hero-cta-row { gap: var(--space-3) !important; }

  /* --- Reviews: a touch less padding above carousel on mobile --- */
  .reviews-section .section-head { margin-bottom: var(--space-5); }

  /* --- Trust strip: vertical padding tighter --- */
  .trust { padding-top: 14px; padding-bottom: 14px; }
  .trust-item { font-size: 0.7rem; }

  /* --- Footer: tighter on mobile --- */
  .footer { padding-top: 48px; padding-bottom: 24px; }
}

/* =========================================================
   MOBILE PASS 2 — May 10, 2026
   User feedback: wider full-width content, hero badge smaller,
   pillar/title spacing fix, bundle photo above doors, phone
   mockup matches desktop content, product photos fill more.
   ========================================================= */
@media (max-width: 600px) {

  /* --- WIDER CONTENT: minimize side gutters --- */
  .section { padding-left: 12px !important; padding-right: 12px !important; }
  .container { padding: 0 !important; }
  /* Hero is full-bleed; just narrow its inner padding */
  .hero, .hero-grid { padding-left: 16px; padding-right: 16px; }

  /* --- HERO: eyebrow 25% smaller --- */
  .eyebrow-row { font-size: 0.6875rem !important; letter-spacing: 0.16em; }
  .eyebrow-stars { font-size: 0.65rem !important; }
  /* Hero copy full width (no constraint) */
  .hero-h1 { max-width: none !important; }
  .hero-lead { max-width: none !important; }

  /* --- TRUST STRIP: tighter band --- */
  .trust-track { padding: 12px 0 !important; gap: 56px !important; }
  .trust-item { font-size: 0.78rem !important; padding: 0 !important; }
  .trust-item svg { width: 18px !important; height: 18px !important; flex: 0 0 18px !important; }

  /* --- PILLARS: more space heading→first icon, less title→body --- */
  .pillars-grid { margin-top: 32px !important; }
  .pillar { gap: 0 !important; padding: 0 !important; }
  .pillar-icon { margin-bottom: 32px !important; }
  .pillar-title { margin-bottom: 4px !important; min-height: 0 !important; }
  .pillar-body { margin-top: 0 !important; min-height: 0 !important; }

  /* --- SECTION-HEAD: full width, more breathing room below --- */
  .section-head { max-width: 100% !important; padding: 0 !important; }
  .section-head .h2 { text-wrap: balance; }

  /* --- COMPANION: wider section, larger phone matching desktop --- */
  .companion-grid { gap: var(--space-6) !important; }
  .phone { width: clamp(280px, 82%, 320px) !important; }
  .phone-screen { padding: 12px 10px !important; gap: 8px !important; }
  .phone-screen .bubble { font-size: 0.78rem !important; padding: 8px 12px !important; }
  .phone-screen .dose-btn { font-size: 0.78rem !important; padding: 7px 12px !important; }
  .phone-screen .insight-card { font-size: 0.72rem !important; padding: 10px 12px !important; }
  .phone-screen .insight-card .t { font-size: 0.68rem !important; }
  .phone-screen .b-quote { font-size: 0.72rem !important; }

  /* --- PRODUCT CARDS: photos fill more like desktop --- */
  .product-photo { padding: var(--space-3) !important; aspect-ratio: 1 !important; }
  .product-photo img { max-width: 92% !important; max-height: 96% !important; }

  /* --- BUNDLE: photo above doors on mobile, centered --- */
  .bundle-grid { display: flex !important; flex-direction: column !important; align-items: center; gap: var(--space-6) !important; }
  .bundle-grid > div:first-child { order: 2; width: 100%; }
  .bundle-grid > div:nth-child(2) { order: 1; width: 100%; max-width: 360px; margin: 0 auto; }
  .bundle-photo { margin: 0 auto; }

  /* --- PRACTICE TIMELINE: wider cards --- */
  .practice-step { padding: 20px !important; }

  /* --- FAQ: full-width (no max-width container) --- */
  .faq-list-detailed, .faq-list { max-width: 100% !important; }

  /* --- FAQ answer: 1px smaller than question on mobile --- */
  .faq-answer { font-size: 0.75rem !important; }
}

/* =========================================================
   MOBILE PASS 3 — May 10, 2026
   User round-2 polish: tighter trust band, more pillar spacing,
   bring sides in slightly for companion/products/bundle/timeline/FAQ,
   center bundle photo, phone -20%.
   ========================================================= */
@media (max-width: 600px) {

  /* --- TRUST: restore inner padding; remove gap ABOVE/BELOW the colored rules --- */
  .trust-track { padding: 16px 0 !important; gap: 56px !important; }
  .trust-item { font-size: 0.78rem !important; }
  .trust-item svg { width: 18px !important; height: 18px !important; flex: 0 0 18px !important; }
  /* Hero ends flush against trust strip top rule */
  .hero { padding-bottom: 0 !important; }
  /* Pillars section starts flush against trust strip bottom rule */
  section[data-screen-label="03 Pillars"] { padding-top: 32px !important; }

  /* --- PILLARS: more headline→first icon space + tiny bump title→body --- */
  .pillars-grid { margin-top: 56px !important; }
  .pillar-title { margin-bottom: 10px !important; }

  /* --- SECTIONS THAT NEED A BIT MORE SIDE PADDING --- */
  /* Use section identifier attributes — keep hero/trust/pillars/reviews/video tight */
  section[data-screen-label="05 Companion"],
  section[data-screen-label="06 Ingredients"],
  section[data-screen-label="05 Ecosystem"],
  section.bundle,
  section[data-screen-label="07 Founder"],
  section[data-screen-label="08 Practice"],
  section[data-screen-label="12 FAQ"],
  section[data-screen-label="13 Final CTA"] {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* --- COMPANION PHONE: -20% from prior size --- */
  .phone { width: clamp(224px, 66%, 256px) !important; }

  /* --- BUNDLE PHOTO: bottles big, background stays small --- */
  /* Photo container = ~80% of viewport (10% margin each side) */
  a.bundle-photo-link {
    display: block !important;
    margin: 0 auto !important;
    max-width: 80vw;
    width: 100%;
    text-align: center;
  }
  .bundle-grid > div:nth-child(2) {
    width: 100% !important;
    max-width: 80vw !important;
    margin: 0 auto !important;
    display: flex;
    justify-content: center;
  }
  /* Photo box scales with width — square box for the bottles */
  .bundle-photo {
    width: 100%;
    margin: 0 auto !important;
    aspect-ratio: 1 !important;
    height: auto !important;
    overflow: hidden;
    display: grid;
    place-items: center;
    position: relative;
  }
  /* Bottles fill the box width — wider, more prominent */
  .bundle-photo img {
    display: block;
    margin: 0 auto;
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: auto !important;
  }

  /* --- BUNDLE GRID: tighter gap between photo and doors so visible photo-bottom matches the top spacing --- */
  .bundle-grid { gap: var(--space-3) !important; }
}

/* =========================================================
   HERO MOBILE REORDER (May 12, 2026 — locked v6)
   Mobile-only. Desktop layout UNTOUCHED (no rules outside the
   @media block, so desktop falls through to original CSS).

   How it works:
   - .eyebrow-row stays inside .hero-copy in the PHP (original DOM).
   - On mobile (<880px) only, .hero-copy uses `display: contents`,
     which makes its children act as direct grid items of
     .hero-grid for layout purposes. That lets us reorder each
     piece individually alongside .hero-product.

   Mobile visual order:
     1. H1
     2. Lead
     3. Product image (size unchanged)
     4. CTA button         (centered)
     5. Reviews + stars    (centered)
     6. 30-day guarantee   (centered)

   Font sizes (locked): H1 2rem (32px), Lead 1.0625rem (17px).
   Both fit 2 lines max at 390px viewport — confirmed.
   ========================================================= */
@media (max-width: 879px) {
  .hero-grid > .hero-copy { display: contents; }

  /* Order */
  .hero-grid .hero-h1       { order: 1; }
  .hero-grid .hero-lead     { order: 2; }
  .hero-grid > .hero-product { order: 3; }
  .hero-grid .cta-group     { order: 4; }
  .hero-grid .eyebrow-row   { order: 5; }
  .hero-grid .cta-micro     { order: 6; }

  /* Spacing + fonts */
  .hero-grid .hero-h1       { margin: var(--space-4) 0 0; max-width: none !important; font-size: 2rem; line-height: 1.25; text-wrap: balance; }
  .hero-grid .hero-lead     { margin: var(--space-3) 0 0; max-width: none !important; font-size: 1.0625rem; line-height: 1.45; }
  .hero-grid > .hero-product { padding-top: 1.25rem; padding-bottom: var(--space-4); }
  .hero-grid .cta-group     { margin: var(--space-2) 0 0; align-items: center; }
  .hero-grid .eyebrow-row   { margin: var(--space-3) 0 0; justify-content: center; }
  /* .cta-micro has inline style="display:inline-flex" — override with !important
     and full-width flex so justify-content actually centers its contents */
  .hero-grid .cta-micro     { display: flex !important; justify-content: center; margin: var(--space-2) 0 var(--space-4); }
}

/* ---------- Explainer video frame (restored Aug 19, 2026) ----------
   front-page.php has always asked for .video-frame--native, but the matching
   rules were missing from this file (lost in the May 12 stale-file overwrite),
   so the block fell back to the base .video-frame: 16/9 + object-fit:cover.
   Both source files are 3:2 (1620x1080 desktop, 1080x720 mobile) and the
   captions are burned into the lower third, so cover was cropping them off.
   Match the source ratio and never crop. */
.video-frame--native { aspect-ratio: 3 / 2; }

.video-frame--native img,
.video-frame--native video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #0f0f10;
}

/* The base hover zoom would crop the burned-in captions. Keep the dim as the
   hover affordance, drop the scale. */
.video-frame--native:hover img { transform: none; }

/* =========================================================
   MOBILE EDIT PASS — August 28, 2026 (owner notes, homepage)
   Mobile only. No rule outside the @media block, so desktop
   falls through to everything above unchanged.
   ========================================================= */
@media (max-width: 600px) {

  /* --- TRUST STRIP (Aug 30 owner note): the Aug 28 squeeze was wrong.
     Restore the inner air between the rules and the copy, and take the
     space off the OUTSIDE of the two rules instead. --- */
  .trust-track { padding: 16px 0 !important; }
  .trust { padding-top: 4px !important; padding-bottom: 4px !important; }

  /* --- COMPANION: phone sits directly under the heading + lead ---
     Same technique as the hero reorder: display:contents dissolves the
     copy wrapper so each piece becomes its own grid item and can be
     ordered against the phone. Grid gap goes to 0 because the children
     already carry their own margins; leaving the 32px gap in place would
     blow apart the eyebrow/heading/lead rhythm. */
  .companion-grid { gap: 0 !important; align-items: stretch; }
  .companion-grid > div:first-child { display: contents; }
  .companion-grid .eyebrow            { order: 1; }
  .companion-grid .h2                 { order: 2; }
  .companion-grid .sub                { order: 3; }
  .companion-grid > div:nth-child(2)  { order: 4; margin-top: var(--space-6); }
  .companion-grid .companion-features { order: 5; margin-top: var(--space-6) !important; }
  .companion-grid .companion-link     { order: 6; }

  /* --- INGREDIENTS: close the gap between photo and copy --- */
  .ingredient-body { padding: var(--space-4) var(--space-5) var(--space-5) !important; }

  /* --- PRODUCT CARDS (Aug 31 owner note): centre the category tag, the name,
     the description, "As low as" and the price. Only "View product" stays
     left. Aug 28 centred the whole card (wrong), Aug 30 reverted the lot
     (also wrong); this is the middle the owner asked for.
     .product-pricerow is a flex column with align-items:flex-start, so
     text-align alone cannot move the price line — it needs align-items. That
     is why the price kept staying left through the earlier passes. --- */
  .product-body { padding-top: 14px !important; }
  .product-tag { text-align: center; margin-bottom: 8px; }
  .product-name { text-align: center; }
  .product-desc { text-align: center; }
  .product-pricerow { align-items: center; }

  /* --- PRACTICE CARDS: centre the title and the body copy. The phase tag
     stays left — owner note, Aug 30. --- */
  .practice-steps--four .practice-title { text-align: center; }
  .practice-steps--four .practice-body { text-align: center; }

  /* --- COMPANION PHONE (Aug 31 owner note): 70% of its previous size.
     zoom, not transform: zoom scales the element's layout box too, so the
     section closes up behind it. transform:scale() would leave ~190px of
     dead space where the full-size phone used to be. --- */
  .companion-grid .phone { zoom: 0.7; }

  /* --- FOOTER: no sticky CTA on the homepage, so no clearance for it --- */
  body.attune-home .site-footer { padding-bottom: 24px; }
}

/* --- INGREDIENT PHOTO: make the image actually fill its 16/10 box ---
   The <picture> wrapper is inline by default, so `height:100%` on the img
   had no containing block to resolve against and fell back to auto. The
   image rendered short and left ~21px of dead card between the photo and
   the copy — the gap the owner flagged on Aug 28. Not mobile-only; the
   same slack existed at every width. */
.ingredient-photo picture { display: block; width: 100%; height: 100%; }

/* --- COMPANION PHONE: stop clipping the mock ---
   .phone carries aspect-ratio 340/680, and at the mobile widths set in the
   May 10 passes the derived height was shorter than the conversation inside
   it, so .phone-screen (overflow:hidden) cut off the "Logged." bubble and
   the whole Sunday recap card. Below the desktop breakpoint the phone is the
   only thing in its column, so let it size to its content and cap the width.
   Result at 390px: 320x624, ratio 0.513 against the intended 0.500. */
@media (max-width: 879px) {
  .companion-grid .phone {
    width: min(100%, 320px) !important;
    aspect-ratio: auto !important;
  }
}