/* ============================================
   HARA — Standalone Landing Pages
   Shared styles for /exosomes, /machines, /d-spot,
   /drips, /dr-neo, /pvmax campaign microsites.
   ============================================ */

/* --- Palette override helpers ---
   Each page sets data-palette on a wrapper so we can scope the
   wellness/clinic palette without touching the body[data-brand]
   contract that the router uses. */
.lp[data-palette="wellness"] {
  --lp-bg: var(--ivory);
  --lp-bg-alt: #ebe4d3;
  --lp-text: var(--dark);
  --lp-text-soft: var(--gray);
  --lp-accent: var(--olive);
  --lp-rule: rgba(58, 69, 52, 0.18);
  --lp-shadow: 0 30px 80px -30px rgba(108, 86, 50, 0.35);
}
.lp[data-palette="clinic"] {
  --lp-bg: var(--dark);
  --lp-bg-alt: #2c3528;
  --lp-text: var(--ivory);
  --lp-text-soft: var(--stone);
  --lp-accent: var(--olive);
  --lp-rule: rgba(241, 235, 223, 0.18);
  --lp-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.55);
}

.lp {
  background: var(--lp-bg);
  color: var(--lp-text);
  min-height: 100vh;
  font-family: var(--font-body);
}

/* Buttons need to follow the page palette, not the router's body[data-brand]. */
.lp[data-palette="clinic"] .btn--primary,
.standalone-header[data-palette="clinic"] .btn--primary {
  background: var(--ivory);
  color: var(--dark);
  border-color: var(--ivory);
}
.lp[data-palette="clinic"] .btn--outline,
.standalone-header[data-palette="clinic"] .btn--outline {
  color: var(--ivory);
  border-color: var(--ivory);
}
.lp[data-palette="clinic"] .btn--outline:hover {
  background: var(--ivory);
  color: var(--dark);
}
.lp[data-palette="wellness"] .btn--primary,
.standalone-header[data-palette="wellness"] .btn--primary {
  background: var(--dark);
  color: var(--ivory);
  border-color: var(--dark);
}
.lp[data-palette="wellness"] .btn--outline,
.standalone-header[data-palette="wellness"] .btn--outline {
  color: var(--dark);
  border-color: var(--dark);
}
.lp[data-palette="wellness"] .btn--outline:hover {
  background: var(--dark);
  color: var(--ivory);
}

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

.lp__container--narrow {
  max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.lp__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lp-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.lp__eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
}

.lp__display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--lp-text);
  font-size: clamp(2.5rem, 1.5rem + 4.5vw, 5.5rem);
  margin: 0;
}

.lp__lede {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--lp-text-soft);
  max-width: 56ch;
}

.lp__rule {
  height: 1px;
  background: var(--lp-rule);
  width: 100%;
  border: 0;
  margin: 0;
}

.lp__section {
  padding: clamp(4rem, 8vw, 8rem) 0;
}

.lp__section--tight {
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}

.lp__section--alt {
  background: var(--lp-bg-alt);
}

/* ============================================
   Standalone header
   ============================================ */
.standalone-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 1rem clamp(1rem, 3vw, 2rem);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(241, 235, 223, 0.65);
  border-bottom: 1px solid rgba(58, 69, 52, 0.08);
}
.standalone-header[data-palette="clinic"] {
  background: rgba(58, 69, 52, 0.65);
  border-bottom-color: rgba(241, 235, 223, 0.08);
}
.standalone-header[data-palette="clinic"] .standalone-header__link {
  color: var(--stone);
}
.standalone-header[data-palette="clinic"] .standalone-header__link:hover {
  color: var(--ivory);
}

.standalone-header__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.standalone-header__logo {
  display: inline-flex;
  align-items: center;
}
.standalone-header__logo img {
  height: clamp(40px, 4.5vw, 56px);
  width: auto;
  display: block;
}

.standalone-header__actions {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.standalone-header__link {
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  text-decoration: none;
}
.standalone-header__link:hover {
  color: var(--text-primary);
}

.standalone-header__cta {
  padding: 0.6rem 1.25rem !important;
  font-size: var(--text-sm) !important;
}

@media (max-width: 540px) {
  .standalone-header__link { display: none; }
}

/* Body offset so fixed header doesn't overlap hero */
.lp { padding-top: clamp(82px, 7vw, 96px); }

/* ============================================
   Standalone footer
   ============================================ */
.standalone-footer {
  border-top: 1px solid var(--lp-rule);
  padding: 2.5rem clamp(1rem, 3vw, 2rem);
  background: var(--lp-bg-alt);
  color: var(--lp-text-soft);
}
.standalone-footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.standalone-footer__brand a {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--lp-text);
  text-decoration: none;
}
.standalone-footer__brand p {
  font-size: var(--text-xs);
  margin-top: 0.5rem;
  letter-spacing: 0.05em;
}
.standalone-footer__links {
  display: flex;
  gap: 1.5rem;
  font-size: var(--text-sm);
}
.standalone-footer__links a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 200ms;
}
.standalone-footer__links a:hover {
  border-color: var(--lp-accent);
}

/* ============================================
   /exosomes — Split-screen PenEx / VaginEx
   ============================================ */
.exo-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - clamp(82px, 7vw, 96px));
  position: relative;
  isolation: isolate;
}
.exo-hero__side {
  position: relative;
  padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Grid cells fill the row height (set by .exo-hero min-height) — no
     need for a min-height here, which previously caused gaps when the
     hero was taller than 60vh on wide aspect ratios. */
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
}
.exo-hero__side--penex { background: #2c3528; }
.exo-hero__side--vaginex { background: #6c5a3f; }

/* SVG abstract backdrop sits at the back of each panel, behind the
   content. Slow scale/drift animation gives it a subtle living feel
   without distracting from the headline. */
.exo-hero__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.exo-hero__art-svg {
  width: 100%;
  height: 100%;
  display: block;
  animation: exoHeroDrift 28s ease-in-out infinite alternate;
  transform-origin: center;
}
@keyframes exoHeroDrift {
  from { transform: scale(1.02); }
  to   { transform: scale(1.08); }
}

/* Hero content sits above the art backdrop. */
.exo-hero__content {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .exo-hero__art-svg { animation: none; }
}

.exo-hero__content {
  color: var(--ivory);
  max-width: 32rem;
}
.exo-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  opacity: 0.85;
}
.exo-hero__eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
}
.exo-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
}
.exo-hero__sub {
  font-size: var(--text-base);
  line-height: 1.55;
  color: rgba(241, 235, 223, 0.85);
  margin-bottom: 1.75rem;
  max-width: 28rem;
}
.exo-hero__meta {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(241, 235, 223, 0.75);
}
.exo-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.exo-hero__meta span::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--olive);
}

.exo-hero__divider {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--ivory);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--dark);
  z-index: 5;
  font-size: var(--text-lg);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.6);
}

@media (max-width: 820px) {
  .exo-hero { grid-template-columns: 1fr; }
  .exo-hero__side { min-height: 80vh; }
  .exo-hero__divider {
    width: 64px;
    height: 64px;
    font-size: var(--text-base);
  }
}

.exo-explain {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}
@media (max-width: 760px) { .exo-explain { grid-template-columns: 1fr; } }

.exo-explain__step {
  position: relative;
  padding-top: 2.5rem;
}
.exo-explain__step::before {
  content: attr(data-step);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--lp-accent);
}
.exo-explain__step h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin-bottom: 0.5rem;
}
.exo-explain__step p {
  font-size: var(--text-base);
  color: var(--lp-text-soft);
  line-height: 1.55;
}

.exo-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--lp-rule);
  border-bottom: 1px solid var(--lp-rule);
}
@media (max-width: 760px) { .exo-compare { grid-template-columns: 1fr; } }
.exo-compare > div {
  padding: 2.5rem clamp(1.5rem, 3vw, 2.5rem);
}
.exo-compare > div + div {
  border-left: 1px solid var(--lp-rule);
}
@media (max-width: 760px) {
  .exo-compare > div + div {
    border-left: 0;
    border-top: 1px solid var(--lp-rule);
  }
}
.exo-compare h4 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin-bottom: 0.5rem;
}
.exo-compare ul {
  list-style: none;
  margin-top: 1rem;
}
.exo-compare li {
  position: relative;
  padding-left: 1.5rem;
  padding-block: 0.4rem;
  font-size: var(--text-base);
  color: var(--lp-text-soft);
}
.exo-compare li::before {
  content: '+';
  position: absolute;
  left: 0;
  color: var(--lp-accent);
  font-weight: 500;
}

/* ============================================
   /exosomes — Editorial science layout
   Modelled on premium regenerative-medicine landing pages.
   Stays inside the 5-color brand palette (no copper/rust accents).
   ============================================ */

/* Top strip — brand left, science tag right */
.exo-strip {
  background: var(--ivory);
  border-bottom: 1px solid rgba(58, 69, 52, 0.08);
  padding: 1rem clamp(1rem, 3vw, 2rem);
}
.exo-strip__container {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.exo-strip__brand {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--dark);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.exo-strip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--olive);
  display: inline-block;
}
.exo-strip__divider {
  color: var(--gray);
  opacity: 0.6;
  margin: 0 0.15rem;
}
.exo-strip__tag {
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
}

/* Section structure */
.exo-section {
  padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 3vw, 2rem);
  background: var(--ivory);
  color: var(--dark);
}
.exo-section--alt {
  background: #ebe4d3;
}
.exo-section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.exo-section--intro { padding-top: clamp(4rem, 7vw, 6rem); }
.exo-section--cta {
  text-align: center;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(136, 146, 109, 0.18) 0%, transparent 70%),
    var(--ivory);
}

.exo-section__container {
  max-width: var(--container-max);
  margin-inline: auto;
}
.exo-section__container--two {
  display: grid;
  /* Slightly asymmetric so diagrams (which need breathing room) get
     a tighter column than the text. Bigger gap so labels at SVG edges
     don't bleed into the text column. */
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}
.exo-section__container--two .exo-section__diagram {
  /* Cap diagrams so they never crowd the text column. */
  max-width: 100%;
}
.exo-section__container--narrow {
  max-width: 760px;
}
@media (max-width: 820px) {
  .exo-section__container--two { grid-template-columns: 1fr; }
}

.exo-section__head {
  max-width: 760px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  /* Explicit left baseline. Without this, an upstream `text-align` (e.g.
     from a centered ancestor) can shift the eyebrow + number inline-flex
     children, which is what was causing subtitles to look misaligned. */
  text-align: left;
}
.exo-section__head--center {
  margin-inline: auto;
  text-align: center;
}
/* With .exo-section__number now inline-flex, text-align: center on the
   centered parent is what positions it. No extra rules needed here.
   Same for .exo-eyebrow which is already inline-flex. */

.exo-section__number {
  /* Block-level flex that shrinks to its content via width: fit-content.
     Default margin keeps it left-aligned. In centered sections,
     `margin-inline: auto` (below) centers the block. This is more
     reliable than relying on text-align with inline-flex. */
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  width: fit-content;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 1.25rem;
}
.exo-section__head--center .exo-section__number {
  margin-inline: auto;
  margin-bottom: 1.25rem;
}
/* Lede paragraph has max-width: 56ch but is a block element. Inside a
   --center head, that block sits at the LEFT of the centered head unless
   we explicitly auto-center it. Text-align alone centers the text within
   the block, but the block itself stays left-anchored — which is what
   was making centered subtitles look off-center. */
.exo-section__head--center .exo-lede {
  margin-inline: auto;
}
.exo-section__number span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-base);
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--gray);
}

/* Eyebrows */
.exo-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.exo-eyebrow__rule {
  width: 36px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}
.exo-eyebrow--center { display: inline-flex; }

/* Editorial display headline */
.exo-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.5rem + 2.8vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--dark);
  margin: 0 0 1.5rem;
}
.exo-display em {
  font-style: italic;
  /* The reference uses copper; we stay within palette and use olive
     for italic emphasis, which still reads as the "warm accent" register. */
  color: var(--olive);
}

.exo-lede {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--gray);
  max-width: 56ch;
}

.exo-section__body p {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--gray);
  margin-bottom: 1rem;
  max-width: 52ch;
}
.exo-section__body strong { color: var(--dark); font-weight: 600; }

/* Intro: text + diagram side by side, then full-width spec strip */
.exo-intro {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 820px) { .exo-intro { grid-template-columns: 1fr; } }

/* Spec strip — concentration / volume / source / application */
.exo-specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(58, 69, 52, 0.18);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  margin: 0;
}
@media (max-width: 720px) {
  .exo-specs { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}
.exo-specs__item dt {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 0.5rem;
}
.exo-specs__item dd {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--dark);
  line-height: 1.1;
  margin: 0;
}

/* ---- SVG diagrams (cross-section, MSC cargo, distinction, docking) ---- */
.exo-diagram {
  margin: 0;
  text-align: center;
}
.exo-svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.exo-svg--exosome   { max-width: 460px; }
.exo-svg--source    { max-width: 520px; }
/* Distinction diagram fills most of the section width and the SVG
   contents have been redrawn with larger elements + a more vertical
   viewBox so it reads as a proper diagram, not a wide thin strip. */
.exo-svg--distinction { max-width: 1000px; width: 100%; }
.exo-svg--docking   { max-width: 540px; }

.exo-diagram__caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--gray);
  letter-spacing: 0.01em;
  margin: 1.25rem auto 0;
  max-width: 34ch;
  line-height: 1.4;
}
.exo-diagram__caption em { color: var(--olive); }

/* --- Animation: subtle internal rotation of exosome cargo --- */
.exo-svg__cargo {
  transform-origin: 240px 240px;
  animation: exoCargoDrift 14s ease-in-out infinite;
}
@keyframes exoCargoDrift {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(6deg); }
}

/* --- Surface protein spikes: gentle stagger pulse --- */
.exo-svg__spikes line,
.exo-svg__spikes circle {
  transform-origin: center;
  animation: exoSpikePulse 4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.12s);
}
@keyframes exoSpikePulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* --- Vesicle: very slow breathing scale --- */
.exo-svg__vesicle {
  transform-origin: 240px 240px;
  animation: exoBreathe 6s ease-in-out infinite;
}
@keyframes exoBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}

/* --- MSC source diagram: satellite pulse + connector draw --- */
.exo-svg__satellite {
  transform-origin: center;
  animation: exoSatellitePulse 5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.6s);
}
@keyframes exoSatellitePulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-3px) scale(1.04); }
}
.exo-svg__connector {
  stroke-dasharray: 4 6;
  animation: exoConnectorFlow 8s linear infinite;
  animation-delay: calc(var(--i, 0) * 0.4s);
}
@keyframes exoConnectorFlow {
  to { stroke-dashoffset: -100; }
}
.exo-svg__msc {
  transform-origin: center;
  animation: exoBreathe 5s ease-in-out infinite;
}

/* --- Distinction diagram: branches fade in sequence --- */
.exo-svg__branch {
  opacity: 0;
  animation: exoBranchIn 1s ease-out forwards;
  animation-delay: calc(var(--i, 0) * 0.4s + 0.3s);
}
@keyframes exoBranchIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.exo-svg__exo {
  transform-origin: center;
  animation: exoSatellitePulse 4.5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.3s);
}

/* --- Docking diagram: incoming exosomes drift toward target --- */
.exo-svg__exo-drift {
  transform-origin: center;
  animation: exoDrift 6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 1.5s);
}
@keyframes exoDrift {
  0%   { transform: translateX(0) translateY(0); opacity: 1; }
  60%  { transform: translateX(40px) translateY(-4px); opacity: 0.85; }
  85%  { transform: translateX(110px) translateY(2px); opacity: 0; }
  100% { transform: translateX(0) translateY(0); opacity: 0; }
}
.exo-svg__docked {
  transform-origin: center;
  animation: exoDockedPulse 3s ease-in-out infinite;
}
@keyframes exoDockedPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* --- Pillar icons: micro-animations --- */
.exo-svg--pillar {
  width: 100%;
  height: 100%;
  display: block;
}
.exo-benefit:hover .exo-svg--pillar {
  animation: exoPillarPing 0.6s ease-out;
}
@keyframes exoPillarPing {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .exo-svg *,
  .exo-svg__cargo,
  .exo-svg__vesicle,
  .exo-svg__msc,
  .exo-svg__satellite,
  .exo-svg__connector,
  .exo-svg__branch,
  .exo-svg__exo,
  .exo-svg__exo-drift,
  .exo-svg__docked,
  .exo-svg__spikes line,
  .exo-svg__spikes circle {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Distinction diagram block — full-width centered */
.exo-distinction-diagram {
  margin-block: clamp(2rem, 5vw, 4rem);
  display: grid;
  place-items: center;
}
.exo-distinction-diagram .exo-placeholder__halo {
  width: min(520px, 70%);
}

/* Compare cards (undifferentiated vs differentiated) */
.exo-compare-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 820px) { .exo-compare-cards { grid-template-columns: 1fr; } }

.exo-compare-card {
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius-md);
  background: var(--ivory);
  border: 1px solid rgba(58, 69, 52, 0.12);
}
.exo-compare-card--dark {
  background: var(--dark);
  color: var(--ivory);
  border-color: transparent;
}
/* Ivory directly on the dark olive bg — maximum readable contrast. */
.exo-compare-card--dark p,
.exo-compare-card--dark li {
  color: var(--ivory) !important;
  font-size: var(--text-base);
}
.exo-compare-card--dark p { line-height: 1.65; }
.exo-compare-card--dark .exo-compare-card__points li {
  color: rgba(241, 235, 223, 0.9) !important;
}

.exo-compare-card__chip {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  background: rgba(136, 146, 109, 0.2);
  color: var(--olive);
  border-radius: 999px;
  margin-bottom: 1.25rem;
}
.exo-compare-card--dark .exo-compare-card__chip {
  background: rgba(136, 146, 109, 0.3);
  color: #c9d2a8;
}

.exo-compare-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  line-height: 1.1;
  margin-bottom: 1rem;
}

.exo-compare-card p {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--gray);
  margin-bottom: 1.25rem;
}

.exo-compare-card__points {
  list-style: none;
  border-top: 1px solid rgba(58, 69, 52, 0.12);
  padding-top: 1rem;
}
.exo-compare-card--dark .exo-compare-card__points {
  border-top-color: rgba(241, 235, 223, 0.15);
}
.exo-compare-card__points li {
  position: relative;
  padding: 0.35rem 0 0.35rem 1.25rem;
  font-size: var(--text-sm);
  color: var(--gray);
  line-height: 1.5;
}
.exo-compare-card--dark .exo-compare-card__points li { color: rgba(241, 235, 223, 0.78); }
.exo-compare-card__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.95rem;
  width: 6px;
  height: 1px;
  background: var(--olive);
}

/* Benefit grid — 4 functional pillars */
.exo-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(58, 69, 52, 0.15);
  border-left: 1px solid rgba(58, 69, 52, 0.15);
  background: rgba(241, 235, 223, 0.6);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 760px) { .exo-benefits { grid-template-columns: 1fr; } }

.exo-benefit {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-right: 1px solid rgba(58, 69, 52, 0.15);
  border-bottom: 1px solid rgba(58, 69, 52, 0.15);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.exo-benefit__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 0.5rem;
}
.exo-benefit__icon svg {
  width: 100%;
  height: 100%;
}

.exo-benefit__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0;
}
.exo-benefit h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.15;
  margin: 0.25rem 0 0.5rem;
}
.exo-benefit p {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--gray);
  margin: 0;
}

/* Application — PenEx | VaginEx editorial split */
.exo-application {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(58, 69, 52, 0.18);
  border-bottom: 1px solid rgba(58, 69, 52, 0.18);
}
@media (max-width: 760px) { .exo-application { grid-template-columns: 1fr; } }

.exo-application__col {
  padding: clamp(2rem, 4vw, 3.5rem);
}
.exo-application__col + .exo-application__col {
  border-left: 1px solid rgba(58, 69, 52, 0.18);
}
@media (max-width: 760px) {
  .exo-application__col + .exo-application__col {
    border-left: 0;
    border-top: 1px solid rgba(58, 69, 52, 0.18);
  }
}

.exo-application__chip {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  background: rgba(136, 146, 109, 0.2);
  color: var(--olive);
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

.exo-application h3 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  line-height: 1.05;
  margin-bottom: 1rem;
}

.exo-application p {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--gray);
  margin-bottom: 1.25rem;
  max-width: 42ch;
}

.exo-application ul {
  list-style: none;
  margin-top: 1rem;
  border-top: 1px solid rgba(58, 69, 52, 0.12);
  padding-top: 1rem;
}
.exo-application li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.5rem;
  font-size: var(--text-sm);
  color: var(--gray);
  line-height: 1.5;
}
.exo-application li::before {
  content: '+';
  position: absolute;
  left: 0;
  color: var(--olive);
  font-weight: 500;
}

/* Disclaimer */
.exo-disclaimer {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--gray);
  text-align: left;
  max-width: 68ch;
  margin-inline: auto;
  padding-block: 1rem;
  border-top: 1px solid rgba(58, 69, 52, 0.12);
  border-bottom: 1px solid rgba(58, 69, 52, 0.12);
}
.exo-disclaimer em { font-style: italic; }

/* Closing CTA actions */
.exo-cta-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.5rem;
}

/* ============================================
   /machines — Emsella + Shockwave (yin-yang hero)
   ============================================ */

/* Hero: split-screen with a yin-yang centerpiece dividing them.
   Left (Emsella) is the dark "yin" half; right (Shockwave) is the
   light "yang" half. */
.mc-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - clamp(82px, 7vw, 96px));
  position: relative;
  isolation: isolate;
}
.mc-hero__side {
  position: relative;
  padding: clamp(3rem, 5vw, 5rem) clamp(1.5rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.mc-hero__side--emsella   { background: #2c3528; color: var(--ivory); }
.mc-hero__side--shockwave { background: var(--ivory); color: var(--dark); }

/* Abstract SVG backdrop sits behind content with a slow ken-burns drift */
.mc-hero__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.mc-hero__art-svg {
  width: 100%;
  height: 100%;
  display: block;
  animation: mcHeroDrift 30s ease-in-out infinite alternate;
  transform-origin: center;
}
@keyframes mcHeroDrift {
  from { transform: scale(1.02); }
  to   { transform: scale(1.08); }
}

.mc-hero__content {
  position: relative;
  z-index: 2;
  /* On the Emsella (left) side, content sits at the LEFT of the panel,
     stepping AWAY from the centered yin-yang. Mirror on Shockwave. */
  max-width: 28rem;
}
.mc-hero__side--emsella .mc-hero__content   { margin-right: auto; padding-right: clamp(2rem, 6vw, 6rem); }
.mc-hero__side--shockwave .mc-hero__content { margin-left: auto;  padding-left:  clamp(2rem, 6vw, 6rem); }

.mc-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  opacity: 0.85;
}
.mc-hero__side--emsella .mc-hero__eyebrow   { color: var(--stone); }
.mc-hero__side--shockwave .mc-hero__eyebrow { color: var(--olive); }

.mc-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 1.5rem + 4vw, 5rem);
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 0 0 0.75rem;
}

.mc-hero__tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 0.8rem + 0.8vw, 1.5rem);
  margin-bottom: 1.25rem;
}
.mc-hero__side--emsella .mc-hero__tag   { color: var(--olive); }
.mc-hero__side--shockwave .mc-hero__tag { color: var(--olive); }

.mc-hero__sub {
  font-size: var(--text-base);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.mc-hero__side--emsella .mc-hero__sub   { color: rgba(241, 235, 223, 0.82); }
.mc-hero__side--shockwave .mc-hero__sub { color: var(--gray); }

.mc-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.mc-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.mc-hero__meta span::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--olive);
}
.mc-hero__side--emsella .mc-hero__meta   { color: rgba(241, 235, 223, 0.7); }
.mc-hero__side--shockwave .mc-hero__meta { color: var(--gray); }

/* Yin-yang centerpiece — straddles the seam between the two panels.
   Two-layer approach: outer wrapper handles centering with translate,
   inner SVG handles the rotation animation. Keeps the two transforms
   from clobbering each other. */
.mc-hero__yinyang {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: clamp(100px, 11vw, 180px);
  height: clamp(100px, 11vw, 180px);
  display: grid;
  place-items: center;
  pointer-events: none;
}
.mc-yinyang {
  width: 100%;
  height: 100%;
  animation: mcYinYangSpin 80s linear infinite;
  transform-origin: center;
}
@keyframes mcYinYangSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Button overrides — Emsella side uses the "dark panel" button treatment */
.mc-hero__side--emsella .btn--primary {
  background: var(--ivory);
  color: var(--dark);
  border-color: var(--ivory);
}
.mc-hero__side--shockwave .btn--primary {
  background: var(--dark);
  color: var(--ivory);
  border-color: var(--dark);
}

/* Mobile: stack the two panels vertically with the yin-yang between */
@media (max-width: 820px) {
  .mc-hero { grid-template-columns: 1fr; min-height: auto; }
  .mc-hero__side {
    min-height: 60vh;
    padding: clamp(3rem, 8vw, 5rem) clamp(1.5rem, 5vw, 2rem);
  }
  .mc-hero__side--emsella .mc-hero__content,
  .mc-hero__side--shockwave .mc-hero__content {
    margin: 0 auto;
    padding: 0;
  }
  .mc-hero__yinyang {
    top: 50%;
    left: 50%;
    width: clamp(120px, 30vw, 180px);
    height: clamp(120px, 30vw, 180px);
  }
}

/* ============================================
   /machines — Protocol steps + image placeholders
   ============================================ */

/* Machine product photo — clean editorial frame with caption */
.mc-image {
  margin: 0;
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
}
.mc-image__frame {
  position: relative;
  width: 100%;
  background: linear-gradient(160deg, rgba(241, 235, 223, 0.6) 0%, rgba(193, 194, 176, 0.35) 100%);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2rem);
  box-shadow: 0 30px 80px -30px rgba(58, 69, 52, 0.25);
}
.mc-image__photo {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  /* Soft inner glow under the device for that catalog-elegant feel */
  filter: drop-shadow(0 16px 32px rgba(58, 69, 52, 0.15));
}
.mc-image__caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--gray);
  letter-spacing: 0.04em;
  margin: 1rem 0 0;
  text-align: center;
}

/* Protocol step grid (Better Together section) */
.mc-protocol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 820px) {
  .mc-protocol { grid-template-columns: 1fr; }
}
.mc-protocol__step {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--lp-rule);
  border-radius: var(--radius-md);
  background: rgba(241, 235, 223, 0.5);
}
.mc-protocol__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-2xl);
  color: var(--olive);
  margin-bottom: 0.5rem;
}
.mc-protocol__step h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.1;
  margin-bottom: 0.75rem;
}
.mc-protocol__step p {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--gray);
}

/* Small machines SVG icons (in benefit grids) — match exo pillar sizing */
.mc-svg-icon {
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .mc-hero__art-svg,
  .mc-hero__yinyang { animation: none; }
}

/* ============================================
   /d-spot — Podcast page with TV-broadcast hero
   ============================================ */
.ds-hero {
  position: relative;
  min-height: calc(100vh - clamp(82px, 7vw, 96px));
  display: grid;
  place-items: center;
  overflow: hidden;
  /* Wall/room behind the TV — darker than the screen so the rounded
     CRT silhouette reads as an object sitting on a wall. */
  background:
    radial-gradient(80% 70% at 50% 50%, #14180f 0%, #0a0d07 100%);
  /* Bezel space around the CRT. The video lives inside this padding. */
  padding: clamp(0.5rem, 2.5vw, 2rem);
  isolation: isolate;
}

/* The CRT itself — rounded, owns all the screen effects. */
.ds-hero__crt {
  position: absolute;
  inset: clamp(0.5rem, 2.5vw, 2rem);
  border-radius: clamp(20px, 3vw, 42px);
  overflow: hidden;
  isolation: isolate;
  container-type: size;
  background: linear-gradient(180deg, #2c3528 0%, #1a1f17 100%);
  z-index: 0;
  /* Subtle ambient drop so the TV feels lifted off the wall. */
  box-shadow:
    0 30px 90px -30px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(241, 235, 223, 0.04);
}

/* YouTube background video — sized to cover the CRT in any aspect ratio
   using container query units, so portrait phones don't show black bars. */
.ds-hero__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.ds-hero__video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 16:9 cover using container-query units — works for any aspect ratio
     including portrait phones. Whichever dimension needs more, wins. */
  width: max(100cqw, calc(100cqh * 16 / 9));
  height: max(100cqh, calc(100cqw * 9 / 16));
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  /* Treatment: heavy CRT — near-monochrome, olive-warm tint, deep crush
     so the headline owns the screen. The video is texture, not subject. */
  filter:
    grayscale(0.92)
    sepia(0.55)
    hue-rotate(38deg)
    saturate(0.85)
    contrast(1.35)
    brightness(0.38);
  /* Slow ken-burns. Baseline scale is high so the video is always
     punched in — the animation just shifts between two zoomed states. */
  animation: ds-video-drift 28s ease-in-out infinite alternate;
}
@keyframes ds-video-drift {
  from { transform: translate(-50%, -50%) scale(1.55); }
  to   { transform: translate(-50%, -50%) scale(1.8); }
}

/* Reverse vignette — DARK at the center where the headline sits,
   transparent toward the corners so the video's color survives at the
   edges. A separate bottom gradient guarantees type contrast for the
   tagline + waveform without darkening the periphery. */
.ds-hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 72% 65% at 50% 50%,
      rgba(8, 10, 7, 0.98) 0%,
      rgba(14, 17, 12, 0.94) 30%,
      rgba(20, 24, 18, 0.6) 65%,
      rgba(26, 31, 23, 0.15) 90%,
      rgba(26, 31, 23, 0) 100%
    );
}
.ds-hero__vignette::after {
  /* Bottom-only fade to ensure tagline + waveform + button always have
     contrast, without killing the colorful top/side edges. */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(26,31,23,0) 0%,
    rgba(26,31,23,0) 55%,
    rgba(26,31,23,0.55) 100%
  );
}

/* CRT phosphor stripes — fine vertical RGB lines like a tube monitor's
   shadow mask. Subtle (overlay-blended) so it reads as screen texture,
   not a costume. */
.ds-hero__phosphor {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 80, 80, 0.06) 0px,
    rgba(80, 255, 120, 0.06) 1px,
    rgba(80, 120, 255, 0.06) 2px,
    transparent 3px,
    transparent 4px
  );
  mix-blend-mode: overlay;
  opacity: 0.55;
}

/* CRT bezel curvature — inset corner darkening that sits on top of every
   screen layer. The rounded corners come from the parent .ds-hero__crt;
   this just deepens the corner falloff so it feels like a tube. */
.ds-hero__tube {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  box-shadow:
    inset 0 0 200px 50px rgba(0, 0, 0, 0.92),
    inset 0 0 80px 0 rgba(0, 0, 0, 0.55);
}

/* Reduced motion: hide the video entirely so we don't blast people who
   asked the OS not to autoplay things. The gradient bg already looks great. */
@media (prefers-reduced-motion: reduce) {
  .ds-hero__video { display: none; }
  .ds-hero__vignette { display: none; }
  .ds-hero__phosphor { display: none; }
  .ds-hero__tube { display: none; }
}
.ds-hero__scanlines {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(241, 235, 223, 0.025) 0px,
    rgba(241, 235, 223, 0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 4;
}
.ds-hero__noise {
  position: absolute;
  inset: -20%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.945 0 0 0 0 0.921 0 0 0 0 0.875 0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.5;
  pointer-events: none;
  animation: ds-noise 0.9s steps(4) infinite;
  z-index: 3;
}
@keyframes ds-noise {
  0% { transform: translate(0,0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); }
  75% { transform: translate(-1%, -1%); }
  100% { transform: translate(0,0); }
}

.ds-hero__broadcast {
  position: absolute;
  top: clamp(1.2rem, 4vw, 2.2rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ivory);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 10;
  background: rgba(0,0,0,0.55);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(241, 235, 223, 0.18);
  backdrop-filter: blur(8px);
}
.ds-hero__broadcast::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d24a3a;
  animation: ds-blink 1.4s ease-in-out infinite;
}
@keyframes ds-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 10px #d24a3a; }
  50% { opacity: 0.3; box-shadow: 0 0 0 #d24a3a; }
}

.ds-hero__inner {
  position: relative;
  z-index: 20;
  text-align: center;
  padding: clamp(3rem, 8vw, 6rem) 1.5rem clamp(2.5rem, 6vw, 4rem);
  max-width: 980px;
}

.ds-hero__actions {
  margin-top: 1.5rem;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  opacity: 0;
  animation: ds-fade-up 1s var(--ease-out) 0.9s forwards;
}

.ds-hero__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--olive);
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
  opacity: 0;
  animation: ds-fade-up 1s var(--ease-out) 0.3s forwards;
}

.ds-hero__title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 1.5rem + 9vw, 10rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ivory);
  margin: 0;
  opacity: 0;
  animation: ds-fade-up 1s var(--ease-out) 0.5s forwards;
  /* Layered glow + RGB split — sits brighter so it cuts through the
     crushed CRT video underneath. */
  text-shadow:
    0 0 60px rgba(241, 235, 223, 0.35),
    0 0 24px rgba(136, 146, 109, 0.55),
    2px 0 0 rgba(210, 74, 58, 0.55),
    -2px 0 0 rgba(136, 146, 109, 0.55);
}
.ds-hero__title em {
  font-style: italic;
  color: var(--olive);
}

.ds-hero__tagline {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--stone);
  margin: 1.5rem 0 2rem;
  opacity: 0;
  animation: ds-fade-up 1s var(--ease-out) 0.7s forwards;
}
.ds-hero__tagline em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ivory);
}

.ds-hero__waveform {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  height: 56px;
  margin: 2rem auto;
  max-width: 320px;
}
.ds-hero__waveform span {
  display: block;
  width: 4px;
  background: var(--olive);
  border-radius: 2px;
  animation: ds-wave 1.4s ease-in-out infinite;
}
.ds-hero__waveform span:nth-child(1) { animation-delay: 0s; height: 30%; }
.ds-hero__waveform span:nth-child(2) { animation-delay: 0.1s; height: 60%; }
.ds-hero__waveform span:nth-child(3) { animation-delay: 0.2s; height: 90%; }
.ds-hero__waveform span:nth-child(4) { animation-delay: 0.3s; height: 70%; }
.ds-hero__waveform span:nth-child(5) { animation-delay: 0.4s; height: 50%; }
.ds-hero__waveform span:nth-child(6) { animation-delay: 0.5s; height: 80%; }
.ds-hero__waveform span:nth-child(7) { animation-delay: 0.6s; height: 100%; }
.ds-hero__waveform span:nth-child(8) { animation-delay: 0.5s; height: 80%; }
.ds-hero__waveform span:nth-child(9) { animation-delay: 0.4s; height: 50%; }
.ds-hero__waveform span:nth-child(10) { animation-delay: 0.3s; height: 70%; }
.ds-hero__waveform span:nth-child(11) { animation-delay: 0.2s; height: 90%; }
.ds-hero__waveform span:nth-child(12) { animation-delay: 0.1s; height: 60%; }
.ds-hero__waveform span:nth-child(13) { animation-delay: 0s; height: 30%; }
@keyframes ds-wave {
  0%, 100% { transform: scaleY(0.4); opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 1; }
}

@keyframes ds-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.ds-tune {
  text-align: center;
  padding: clamp(3rem, 6vw, 5rem) 1rem;
  background: var(--lp-bg-alt);
  border-top: 1px solid var(--lp-rule);
  border-bottom: 1px solid var(--lp-rule);
}
.ds-tune__label {
  font-size: var(--text-xs);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--lp-accent);
  margin-bottom: 1rem;
}
.ds-tune__date {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1rem + 3vw, 3.5rem);
  line-height: 1.1;
  margin-bottom: 0.5rem;
}
.ds-tune__channels {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
  font-size: var(--text-sm);
  color: var(--lp-text-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ds-tune__channels span {
  border-bottom: 1px solid var(--lp-rule);
  padding-bottom: 0.25rem;
}

.ds-host {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 800px) { .ds-host { grid-template-columns: 1fr; } }
.ds-host__photo {
  aspect-ratio: 3/4;
  background: linear-gradient(135deg, #4a5240, #2c3528);
  background-image: url('../assets/images/dspot-deano.jpg'), url('../assets/images/hero-clinic-dean.JPG');
  background-size: cover;
  background-position: center 20%;
  border-radius: var(--radius-md);
  box-shadow: var(--lp-shadow);
}
.ds-host__body h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);
  line-height: 1.05;
  margin-bottom: 1rem;
}
.ds-host__body p {
  font-size: var(--text-base);
  line-height: 1.6;
  margin-bottom: 1rem;
  color: var(--lp-text-soft);
}

.ds-topics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.ds-topics li {
  list-style: none;
  padding: 1rem 1.25rem;
  border: 1px solid var(--lp-rule);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--lp-text);
  background: rgba(241, 235, 223, 0.03);
}

/* ============================================
   /d-spot — sticky-note submission wall
   ============================================ */
.ds-hero__stickies {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
}
.ds-hero__stickies .ds-sticky {
  pointer-events: auto;
}

.ds-sticky {
  position: absolute;
  width: clamp(140px, 18vw, 200px);
  padding: 0.85rem 0.9rem 0.7rem;
  font-family: var(--font-body);
  color: #2c2418;
  background: #d9c896;
  border-radius: 2px;
  box-shadow:
    0 8px 16px -4px rgba(0,0,0,0.45),
    0 2px 4px rgba(0,0,0,0.2),
    inset 0 0 0 1px rgba(0,0,0,0.04);
  transform: rotate(var(--r, 0deg)) translate(var(--ox, 0), var(--oy, 0));
  transition: transform 250ms var(--ease-out), box-shadow 250ms;
  /* Slight crinkle via clip-path so they don't read as perfect squares. */
  clip-path: polygon(0 0, 100% 0.4%, 99.5% 100%, 0.3% 99.4%);
}
.ds-sticky:hover {
  transform: rotate(0deg) translate(var(--ox, 0), var(--oy, 0)) scale(1.04);
  box-shadow:
    0 14px 28px -6px rgba(0,0,0,0.55),
    0 3px 6px rgba(0,0,0,0.25),
    inset 0 0 0 1px rgba(0,0,0,0.04);
  z-index: 5;
}

/* Palette variants — each picked at random per render */
.ds-sticky--olive  { background: #b8b88a; }
.ds-sticky--cream  { background: #e8dcb7; }
.ds-sticky--stone  { background: #cfc5a3; }
.ds-sticky--rust   { background: #c8a07a; color: #2a1d12; }

.ds-sticky__type {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(44, 36, 24, 0.7);
  margin-bottom: 0.45rem;
}
.ds-sticky__type[data-type="question"] { color: #6b4a1d; }
.ds-sticky__type[data-type="topic"]    { color: #4a5d2e; }

.ds-sticky__type-mark {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(44, 36, 24, 0.12);
  font-size: 0.7rem;
  line-height: 1;
  font-family: var(--font-display);
  font-style: italic;
  color: inherit;
}

.ds-sticky__msg {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  line-height: 1.35;
  margin: 0 0 0.6rem;
  /* Cap to ~4 lines so very long messages don't blow up the sticky. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.ds-sticky__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px dashed rgba(44, 36, 24, 0.2);
}

.ds-sticky__author {
  font-size: 0.7rem;
  font-style: italic;
  color: rgba(44, 36, 24, 0.7);
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-sticky__vote {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(44, 36, 24, 0.08);
  border: 0;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  color: inherit;
  transition: background 180ms, transform 180ms;
}
.ds-sticky__vote:hover {
  background: rgba(44, 36, 24, 0.15);
  transform: translateY(-1px);
}
.ds-sticky__vote-arrow {
  font-size: 0.6rem;
  line-height: 1;
}
.ds-sticky.is-upvoted .ds-sticky__vote {
  background: rgba(74, 93, 46, 0.5);
  color: var(--ivory);
  cursor: default;
}
.ds-sticky.is-upvoted .ds-sticky__vote:hover {
  transform: none;
}

/* Drop-in animation when a sticky is added after a successful submit */
.ds-sticky--drop {
  transform: rotate(0deg) translate(0, -40px) scale(0.85) !important;
  opacity: 0;
  transition: transform 600ms var(--ease-out), opacity 400ms;
}

/* Mobile: hide the sticky wall entirely. The CRT is too small on a phone
   for stickies to read; the full collated list in the mailbox section
   below is the canonical view there. */
@media (max-width: 720px) {
  .ds-hero__stickies { display: none; }
}

/* ============================================
   /d-spot — submission modal
   ============================================ */
.ds-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease-out);
}
.ds-modal:not([hidden]) { pointer-events: auto; }
.ds-modal.is-open { opacity: 1; }

.ds-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 13, 7, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ds-modal__card {
  position: relative;
  z-index: 1;
  width: min(540px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--dark);
  color: var(--ivory);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(241, 235, 223, 0.1);
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.7);
  transform: translateY(20px) scale(0.98);
  transition: transform 320ms var(--ease-out);
}
.ds-modal.is-open .ds-modal__card {
  transform: translateY(0) scale(1);
}

.ds-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(241, 235, 223, 0.08);
  border: 0;
  color: var(--ivory);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 180ms;
}
.ds-modal__close:hover { background: rgba(241, 235, 223, 0.18); }

.ds-modal__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 0.5rem;
}
.ds-modal__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  line-height: 1.1;
  margin: 0 0 0.75rem;
}
.ds-modal__title em { font-style: italic; color: var(--olive); }

.ds-modal__note {
  font-size: var(--text-sm);
  color: var(--stone);
  line-height: 1.55;
  background: rgba(241, 235, 223, 0.04);
  border-left: 2px solid var(--olive);
  padding: 0.75rem 0.9rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
}
.ds-modal__note strong { color: var(--ivory); }

.ds-modal__toggle {
  display: flex;
  gap: 0.5rem;
  background: rgba(241, 235, 223, 0.05);
  padding: 0.25rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}
.ds-modal__toggle-opt {
  flex: 1;
  position: relative;
  cursor: pointer;
}
.ds-modal__toggle-opt input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.ds-modal__toggle-opt span {
  display: block;
  text-align: center;
  padding: 0.55rem 0.75rem;
  font-size: var(--text-sm);
  color: var(--stone);
  border-radius: 999px;
  transition: background 180ms, color 180ms;
}
.ds-modal__toggle-opt input:checked + span {
  background: var(--olive);
  color: var(--dark);
  font-weight: 600;
}

.ds-modal__field {
  display: block;
  margin-bottom: 1rem;
  position: relative;
}
.ds-modal__label {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.4rem;
}
.ds-modal__field input,
.ds-modal__field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  background: rgba(241, 235, 223, 0.06);
  border: 1px solid rgba(241, 235, 223, 0.12);
  border-radius: var(--radius-sm);
  color: var(--ivory);
  resize: vertical;
  transition: border-color 180ms, background 180ms;
}
.ds-modal__field input:focus,
.ds-modal__field textarea:focus {
  outline: 0;
  border-color: var(--olive);
  background: rgba(241, 235, 223, 0.1);
}
.ds-modal__field input::placeholder,
.ds-modal__field textarea::placeholder {
  color: rgba(241, 235, 223, 0.35);
}
.ds-modal__counter {
  position: absolute;
  right: 0.6rem;
  bottom: 0.5rem;
  font-size: 0.7rem;
  color: rgba(241, 235, 223, 0.45);
  pointer-events: none;
}

.ds-modal__submit {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.85rem 1.5rem !important;
}

.ds-modal__error {
  margin-top: 0.75rem;
  padding: 0.6rem 0.8rem;
  background: rgba(210, 74, 58, 0.15);
  border-left: 2px solid #d24a3a;
  font-size: var(--text-sm);
  color: #f1c8c0;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .ds-modal, .ds-modal__card, .ds-sticky {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================
   /d-spot — Mailbox section (collated submissions list)
   ============================================ */
.ds-mailbox-section {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.ds-mailbox__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.ds-mailbox__head .lp__eyebrow {
  justify-content: center;
}
.ds-mailbox__head .lp__display {
  font-size: clamp(2rem, 1rem + 3vw, 3.5rem);
  margin: 1rem 0;
  color: var(--lp-text);
}
.ds-mailbox__head .lp__lede {
  margin-inline: auto;
  margin-bottom: 1.75rem;
}
.ds-mailbox__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.ds-mailbox {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1rem;
  max-width: 1100px;
  margin-inline: auto;
}
@media (max-width: 640px) {
  .ds-mailbox { grid-template-columns: 1fr; }
}

.ds-mailbox__empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--lp-text-soft);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  padding: 3rem 1rem;
  border: 1px dashed var(--lp-rule);
  border-radius: var(--radius-md);
}

.ds-mailbox-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  align-items: start;
  padding: 1.1rem 1.25rem;
  background: rgba(241, 235, 223, 0.04);
  border: 1px solid var(--lp-rule);
  border-radius: var(--radius-md);
  transition: background 200ms, border-color 200ms, transform 200ms;
}
.ds-mailbox-item:hover {
  background: rgba(241, 235, 223, 0.07);
  border-color: rgba(136, 146, 109, 0.45);
  transform: translateY(-1px);
}

.ds-mailbox-item__rank {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--lp-accent);
  min-width: 2rem;
  padding-top: 0.15rem;
}

.ds-mailbox-item__body {
  min-width: 0;
}

.ds-mailbox-item__type {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.5rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(241, 235, 223, 0.08);
}
.ds-mailbox-item__type[data-type="question"] {
  color: #d8c89a;
  background: rgba(180, 130, 50, 0.18);
}
.ds-mailbox-item__type[data-type="topic"] {
  color: #b8d18a;
  background: rgba(120, 150, 70, 0.18);
}
.ds-mailbox-item__type-mark {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: currentColor;
  color: var(--lp-bg);
  font-size: 0.65rem;
  line-height: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
}

.ds-mailbox-item__msg {
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--lp-text);
  margin: 0 0 0.5rem;
  word-break: break-word;
}

.ds-mailbox-item__author {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--lp-text-soft);
  margin: 0;
}

.ds-mailbox-item__vote {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  background: rgba(241, 235, 223, 0.06);
  border: 1px solid var(--lp-rule);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.65rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--lp-text);
  cursor: pointer;
  transition: background 180ms, border-color 180ms, transform 180ms;
  min-width: 56px;
}
.ds-mailbox-item__vote:hover:not(:disabled) {
  background: rgba(136, 146, 109, 0.2);
  border-color: var(--lp-accent);
  transform: translateY(-1px);
}
.ds-mailbox-item__vote:disabled {
  cursor: default;
}
.ds-mailbox-item__vote-arrow {
  font-size: 0.7rem;
  line-height: 1;
  color: var(--lp-accent);
}
.ds-mailbox-item__vote-count {
  font-variant-numeric: tabular-nums;
}
.ds-mailbox-item.is-upvoted .ds-mailbox-item__vote {
  background: rgba(136, 146, 109, 0.35);
  border-color: var(--lp-accent);
  color: var(--ivory);
}
.ds-mailbox-item.is-upvoted .ds-mailbox-item__vote-arrow {
  color: var(--ivory);
}

/* ============================================
   /drips — Glow / Energy / Recovery
   ============================================ */

/* Hero: three converging drip streams + headline.
   The hero is intentionally TALLER than the viewport so the streams
   have room to extend below the centered text content, with the Hara
   focal point landing below the Book A Consultation button. */
.dr-hero {
  position: relative;
  min-height: calc(100vh - clamp(82px, 7vw, 96px));
  /* Force a minimum aspect ratio that gives the streams real vertical
     real estate on desktop (where viewport is wide-landscape). */
  min-height: max(calc(100vh - 96px), 920px);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 3vw, 2rem);
  background:
    radial-gradient(80% 60% at 50% 50%, rgba(193, 194, 176, 0.4) 0%, transparent 70%),
    var(--ivory);
}
.dr-hero__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.dr-hero__art-svg {
  /* Desktop: meet-fit, capped at a sensible width so the composition
     stays focused on ultra-wide screens. */
  width: 100%;
  height: 100%;
  max-width: 1000px;
  max-height: 100%;
  display: block;
}

/* Mobile: pin the SVG to fill the viewport height (width determined by
   aspect ratio, overflowing the container). The container's overflow:
   hidden clips the sides. This preserves the vertical drama of the
   converging streams instead of squashing them into a short strip. */
@media (max-width: 820px) {
  .dr-hero {
    /* Tall enough on mobile too — gives the focal point room to breathe
       below the button without forcing too much scroll. */
    min-height: max(calc(100vh - 96px), 760px);
  }
  .dr-hero__art-svg {
    /* aspect-ratio is what actually lets the browser compute the SVG's
       width from its height × viewBox aspect. Without it, `width: auto`
       on an <svg> with no explicit width attribute renders at the raw
       viewBox width (900px), overflowing one side instead of centering. */
    height: 100%;
    width: auto;
    aspect-ratio: 9 / 10;
    max-width: none;
    max-height: 100%;
    display: block;
  }
}

.dr-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}
.dr-hero__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 1.5rem + 7vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 1rem 0 1.25rem;
  color: var(--dark);
}
.dr-hero__title em {
  font-style: italic;
  color: var(--olive);
}
.dr-hero__sub {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--gray);
  max-width: 52ch;
  margin: 0 auto 1.75rem;
}
.dr-hero__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* Droplet animation: subtle pulse so the markers feel alive even when
   their motion path is paused at the start of the loop. */
.dr-droplet {
  filter: drop-shadow(0 2px 4px rgba(58, 69, 52, 0.25));
}
@media (prefers-reduced-motion: reduce) {
  .dr-svg__droplets { display: none; }
}

/* Pillar section eyebrow icon — sits above the heading in each pillar block */
.dr-pillar__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 1.25rem;
  display: grid;
  place-items: center;
}
.dr-pillar__icon svg {
  width: 100%;
  height: 100%;
}

/* Drip card grid — luxurious, editorial */
.dr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  max-width: 1100px;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
}
.dr-card {
  position: relative;
  padding: 1.75rem;
  background: var(--ivory);
  border: 1px solid rgba(58, 69, 52, 0.12);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: transform 300ms var(--ease-out), border-color 300ms, box-shadow 300ms;
}
.exo-section--alt .dr-card {
  background: var(--ivory);
}
.dr-card:hover {
  transform: translateY(-2px);
  border-color: rgba(136, 146, 109, 0.55);
  box-shadow: 0 20px 40px -20px rgba(58, 69, 52, 0.18);
}

.dr-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dr-card__format {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--olive);
  font-weight: 600;
}
.dr-card__format-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
}
.dr-card__format-icon svg {
  width: 100%;
  height: 100%;
}
.dr-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 0.8vw, 1.85rem);
  line-height: 1.1;
  color: var(--dark);
  margin: 0;
}
.dr-card__use {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gray);
  font-size: var(--text-base);
  margin: 0;
}
.dr-card__benefits {
  list-style: none;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px dashed rgba(58, 69, 52, 0.18);
}
.dr-card__benefits li {
  position: relative;
  padding: 0.25rem 0 0.25rem 1rem;
  font-size: var(--text-sm);
  color: var(--gray);
  line-height: 1.5;
}
.dr-card__benefits li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 5px;
  height: 1px;
  background: var(--olive);
}

/* Format spectrum cards (three-way comparison) */
.dr-formats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 820px) {
  .dr-formats { grid-template-columns: 1fr; }
}
.dr-format {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid rgba(58, 69, 52, 0.12);
  border-radius: var(--radius-md);
  background: var(--ivory);
  text-align: center;
}
.dr-format__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.25rem;
  display: grid;
  place-items: center;
}
.dr-format__icon svg {
  width: 100%;
  height: 100%;
}
.dr-format h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 1rem + 1vw, 1.85rem);
  color: var(--dark);
  margin-bottom: 0.75rem;
}
.dr-format p {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--gray);
  margin: 0;
}

/* ============================================
   /dr-neo — Vogue-style layered hero
   ============================================ */
.neo-hero {
  position: relative;
  min-height: calc(100vh - clamp(82px, 7vw, 96px));
  /* Full photo becomes the section background. The foreground portrait
     layer (with a silhouette mask) sits on top of the brand text so it
     looks like Dr. Neo is physically in front of the HARA masthead. */
  background-color: var(--dark);
  background-image: url('../assets/images/neo-1.jpg');
  background-size: cover;
  background-position: center 30%;
  color: var(--ivory);
  isolation: isolate;
  overflow: hidden;
}
.neo-hero__inner {
  max-width: 1400px;
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 4vw, 4rem);
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  min-height: calc(100vh - clamp(82px, 7vw, 96px));
}

/* "VOGUE"-style masthead. LEFT-anchored to Dr. Neo's horizontal position
   in the photo so the first letters land behind his head while the rest
   of the word emerges to the right. Both `left` and the mask `at` value
   use the SAME % anchor so any tuning stays in sync. */
.neo-hero__brand {
  position: absolute;
  /* Anchored to the SAME horizontal position as the silhouette mask
     (`at 32% 60%` below) and translated -50% so the word's visual center
     lands directly on Dr. Neo's head at every viewport size. */
  top: clamp(-1rem, -0.5vh, 0.25rem);
  left: 32%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 400;
  /* Tiny bit bigger. */
  font-size: clamp(7rem, 22vw, 30rem);
  line-height: 0.85;
  letter-spacing: -0.015em;
  /* Whisper-thin, whisper-translucent. The letterforms read as a hint
     rather than a statement — luxury fashion uses this for mastheads
     when the subject should win the eye. */
  color: rgba(241, 235, 223, 0.06);
  -webkit-text-stroke: 0.4px rgba(241, 235, 223, 0.15);
  text-stroke: 0.4px rgba(241, 235, 223, 0.15);
  white-space: nowrap;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  /* Drop the heavy shadow — translucent text needs less weight underneath
     or it looks dirty. Keep just a soft glow for separation from the wall. */
  text-shadow: 0 0 24px rgba(241, 235, 223, 0.08);
}

/* Foreground portrait: same photo, but masked to a soft silhouette
   centered on Dr. Neo so only HE punches forward on top of the brand
   text. Outside the mask the section's background photo (identical
   pixels) shows through seamlessly, so the wall + context stay intact
   and you only perceive HIM stepping in front of the masthead.
   --------------------------------------------------------------------
   Tuning knobs (CSS only, no asset change needed):
   - ellipse SIZE: first two values = horizontal/vertical radius
   - ellipse POSITION: `at X% Y%` = where the doctor sits in the photo
   - fade stops: tighten to sharpen the silhouette edge, loosen to blur
   -------------------------------------------------------------------- */
.neo-hero__portrait {
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/neo-1.jpg');
  background-size: cover;
  background-position: center 30%;
  z-index: 2;
  mask-image: radial-gradient(
    ellipse 16% 62% at 32% 60%,
    #000 0%,
    #000 50%,
    rgba(0, 0, 0, 0.65) 68%,
    rgba(0, 0, 0, 0.2) 82%,
    transparent 92%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 16% 62% at 32% 60%,
    #000 0%,
    #000 50%,
    rgba(0, 0, 0, 0.65) 68%,
    rgba(0, 0, 0, 0.2) 82%,
    transparent 92%
  );
}

.neo-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(26, 31, 23, 0.85) 100%);
  z-index: 3;
}

/* Editorial cover credits — lower right, sits in front of subject */
.neo-hero__credit {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2rem;
  width: 100%;
}
.neo-hero__masthead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 1rem;
}
.neo-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.5rem + 3vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  max-width: 22ch;
}
.neo-hero__title em {
  font-style: italic;
  color: var(--olive);
}
.neo-hero__byline {
  font-size: var(--text-sm);
  color: var(--stone);
  letter-spacing: 0.06em;
  max-width: 30ch;
  line-height: 1.55;
}

.neo-hero__date {
  text-align: right;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--stone);
  font-size: var(--text-base);
  letter-spacing: 0.05em;
  border-left: 1px solid rgba(241, 235, 223, 0.3);
  padding-left: 1.25rem;
}
.neo-hero__date strong {
  display: block;
  font-size: var(--text-2xl);
  font-style: italic;
  color: var(--ivory);
  font-weight: 400;
  letter-spacing: 0;
  margin-top: 0.5rem;
}

@media (max-width: 760px) {
  /* Re-frame Dr. Neo so he sits center-frame on portrait mobile.
     The source image has him in the left portion; shifting bg-pos-x
     to ~15% slides the visible window left, which moves him toward
     viewport center. Both the section bg and the foreground masked
     portrait MUST use the same value to stay aligned. */
  .neo-hero {
    background-position: 15% 30%;
  }
  .neo-hero__portrait {
    background-position: 15% 30%;
    /* Mask re-centered to viewport center (where the doctor now sits)
       with a vertical ellipse covering his head + body. */
    mask-image: radial-gradient(
      ellipse 32% 60% at 50% 55%,
      #000 0%,
      #000 50%,
      rgba(0, 0, 0, 0.65) 68%,
      rgba(0, 0, 0, 0.2) 82%,
      transparent 92%
    );
    -webkit-mask-image: radial-gradient(
      ellipse 32% 60% at 50% 55%,
      #000 0%,
      #000 50%,
      rgba(0, 0, 0, 0.65) 68%,
      rgba(0, 0, 0, 0.2) 82%,
      transparent 92%
    );
  }
  /* Brand re-centered to the same 50% anchor as the mask. Super big. */
  .neo-hero__brand {
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(8rem, 42vw, 16rem);
  }

  .neo-hero__credit { grid-template-columns: 1fr; }
  .neo-hero__date {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(241,235,223,0.2);
    padding-top: 1rem;
    text-align: left;
  }

  /* Legibility shadows for the credit/title/byline copy, which on mobile
     overlaps Dr. Neo's clothing and the lighter parts of the photo.
     Two-layer shadow: a soft far blur for ambient depth + a tight near
     blur for crisp edge contrast. Tuned to read on light backgrounds
     without darkening the text on dark backgrounds. */
  .neo-hero__masthead,
  .neo-hero__title,
  .neo-hero__byline,
  .neo-hero__date,
  .neo-hero__date strong {
    text-shadow:
      0 2px 14px rgba(0, 0, 0, 0.65),
      0 1px 3px rgba(0, 0, 0, 0.5);
  }
}

/* Editorial supplemental images (neo-2, neo-3) */
.neo-spread {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  background: var(--ivory);
  color: var(--dark);
}
.neo-spread__image {
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center 25%;
}
.neo-spread__image[data-img="2"] { background-image: url('../assets/images/neo-2.jpg'); }
.neo-spread__image[data-img="3"] { background-image: url('../assets/images/neo-3.jpg'); }
.neo-spread__body {
  padding: clamp(2rem, 5vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.neo-spread__body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  line-height: 1.1;
  margin-bottom: 1rem;
}
.neo-spread__body p {
  font-size: var(--text-base);
  color: var(--gray);
  line-height: 1.65;
  margin-bottom: 1rem;
  max-width: 50ch;
}
.neo-spread--reverse { grid-template-columns: 1fr 1.2fr; }
.neo-spread--reverse .neo-spread__image { order: 2; }
@media (max-width: 760px) {
  .neo-spread, .neo-spread--reverse { grid-template-columns: 1fr; }
  .neo-spread--reverse .neo-spread__image { order: 0; }
}

.neo-quote {
  text-align: center;
  padding: clamp(4rem, 8vw, 7rem) 1.5rem;
  background: var(--lp-bg-alt);
  border-block: 1px solid var(--lp-rule);
}
.neo-quote blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  line-height: 1.25;
  max-width: 24ch;
  margin: 0 auto 1.5rem;
}
.neo-quote cite {
  font-style: normal;
  font-size: var(--text-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lp-text-soft);
}

/* ============================================
   /pvmax — Hara-rebranded long-form treatment page
   ============================================ */
.pv-hero {
  position: relative;
  min-height: calc(100vh - clamp(82px, 7vw, 96px));
  display: grid;
  align-items: center;
  background:
    radial-gradient(50% 60% at 80% 30%, rgba(136, 146, 109, 0.35) 0%, transparent 60%),
    radial-gradient(70% 50% at 10% 80%, rgba(193, 194, 176, 0.45) 0%, transparent 70%),
    var(--ivory);
  overflow: hidden;
  isolation: isolate;
}
.pv-hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/pvmax-hero.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  mix-blend-mode: multiply;
  z-index: -1;
}
.pv-hero__inner {
  max-width: 1100px;
  margin-inline: auto;
  padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.pv-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 1.5rem + 7vw, 8rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0;
}
.pv-hero h1 em {
  font-style: italic;
  color: var(--lp-accent);
}
.pv-hero__lede {
  font-size: var(--text-lg);
  color: var(--lp-text-soft);
  max-width: 56ch;
  line-height: 1.55;
}
.pv-hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
  border-top: 1px solid var(--lp-rule);
  padding-top: 2rem;
  max-width: 720px;
}
.pv-hero__stats div {
  font-family: var(--font-display);
}
.pv-hero__stats strong {
  display: block;
  font-size: var(--text-3xl);
  font-weight: 400;
  color: var(--lp-accent);
}
.pv-hero__stats span {
  font-size: var(--text-sm);
  color: var(--lp-text-soft);
  letter-spacing: 0.06em;
}

.pv-section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}
.pv-section-head__eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--lp-accent);
  margin-bottom: 0.75rem;
  display: block;
}
.pv-section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1rem + 3vw, 3.5rem);
  line-height: 1.05;
  margin: 0 0 1rem;
}

.pv-treats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.pv-treat {
  padding: 1.75rem;
  border-radius: var(--radius-md);
  background: var(--lp-bg-alt);
  border: 1px solid var(--lp-rule);
}
.pv-treat__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--lp-accent);
  display: grid;
  place-items: center;
  color: var(--ivory);
  font-family: var(--font-display);
  font-style: italic;
  margin-bottom: 1rem;
}
.pv-treat h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: 0.4rem;
}
.pv-treat p {
  font-size: var(--text-sm);
  color: var(--lp-text-soft);
  line-height: 1.55;
}

.pv-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  position: relative;
}
@media (max-width: 780px) { .pv-process { grid-template-columns: repeat(2, 1fr); } }
.pv-step {
  padding: 1.5rem;
  border-left: 1px solid var(--lp-rule);
  position: relative;
}
.pv-step__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-2xl);
  color: var(--lp-accent);
  margin-bottom: 0.5rem;
}
.pv-step h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: 0.4rem;
}
.pv-step p {
  font-size: var(--text-sm);
  color: var(--lp-text-soft);
  line-height: 1.55;
}

.pv-faq {
  max-width: 760px;
  margin: 0 auto;
}
.pv-faq details {
  border-bottom: 1px solid var(--lp-rule);
  padding: 1.25rem 0;
}
.pv-faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.pv-faq summary::-webkit-details-marker { display: none; }
.pv-faq summary::after {
  content: '+';
  font-family: var(--font-display);
  font-style: italic;
  color: var(--lp-accent);
  font-size: var(--text-xl);
  transition: transform 300ms;
}
.pv-faq details[open] summary::after { transform: rotate(45deg); }
.pv-faq details p {
  margin-top: 0.75rem;
  color: var(--lp-text-soft);
  line-height: 1.65;
}

.pv-cta {
  text-align: center;
  padding: clamp(4rem, 8vw, 7rem) 1.5rem;
  background:
    radial-gradient(50% 60% at 50% 0%, rgba(136, 146, 109, 0.25) 0%, transparent 70%),
    var(--lp-bg-alt);
}
.pv-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1rem + 3vw, 3.5rem);
  line-height: 1.05;
  max-width: 18ch;
  margin: 0 auto 1.25rem;
}
.pv-cta h2 em { font-style: italic; color: var(--lp-accent); }
.pv-cta p {
  max-width: 50ch;
  margin: 0 auto 2rem;
  color: var(--lp-text-soft);
}