/* =============================================================
   BONAVIOX · HOMEPAGE EXTRAORDINARY EDITION
   3D, kinetic, interactive — same logical structure
   ============================================================= */

:root {
  --ex-perspective: 1400px;
  --ex-bottle-rotateY: 0deg;
  --ex-bottle-rotateX: 0deg;
  --ex-cursor-x: 50vw;
  --ex-cursor-y: 50vh;
  --ex-scroll: 0;
  --ex-container-wide: 1520px;
}

/* Wide container utility for content-dense sections */
.container.container--wide { max-width: var(--ex-container-wide); }

.ex-body {
  cursor: none;
}
.ex-body a, .ex-body button, .ex-body input { cursor: none; }

/* =============================================================
   GRAIN OVERLAY
   ============================================================= */
.grain {
  position: fixed; inset: 0;
  z-index: 99;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.91 0 0 0 0 0.87 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px;
}

/* =============================================================
   CURSOR HALO
   ============================================================= */
.cursor-halo {
  position: fixed;
  top: 0; left: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(200, 154, 132, 0.7);
  pointer-events: none;
  transform: translate(calc(var(--ex-cursor-x) - 16px), calc(var(--ex-cursor-y) - 16px));
  transition: transform 80ms linear, width 240ms var(--ease-out), height 240ms var(--ease-out), border-color 240ms var(--ease-out);
  z-index: 200;
  mix-blend-mode: difference;
}
.cursor-halo::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 154, 132, 0.18) 0%, transparent 70%);
  filter: blur(8px);
}
.cursor-halo[data-grow="1"] {
  width: 64px; height: 64px;
  transform: translate(calc(var(--ex-cursor-x) - 32px), calc(var(--ex-cursor-y) - 32px));
  border-color: var(--accent);
}
@media (hover: none), (pointer: coarse) {
  .cursor-halo { display: none; }
  .ex-body, .ex-body a, .ex-body button, .ex-body input { cursor: auto; }
}

/* =============================================================
   KINETIC WORD REVEAL
   ============================================================= */
.ex-display { perspective: 1200px; }
.ex-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40%) rotateX(-30deg);
  transform-origin: 50% 100%;
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  margin-right: 0.18em;
}
.ex-word:last-child { margin-right: 0; }
.reveal.is-visible .ex-word {
  opacity: 1;
  transform: translateY(0) rotateX(0deg);
}
.reveal.is-visible .ex-word:nth-child(1) { transition-delay: 80ms; }
.reveal.is-visible .ex-word:nth-child(2) { transition-delay: 160ms; }
.reveal.is-visible .ex-word:nth-child(3) { transition-delay: 240ms; }
.reveal.is-visible .ex-word:nth-child(4) { transition-delay: 320ms; }
.reveal.is-visible .ex-word:nth-child(5) { transition-delay: 400ms; }
.reveal.is-visible .ex-word:nth-child(6) { transition-delay: 480ms; }
.ex-word--em em { color: var(--accent); font-style: italic; }

/* =============================================================
   1 · HERO · 3D BOTTLE STAGE
   ============================================================= */
.ex-hero { padding-top: var(--sp-7); padding-bottom: var(--sp-9); }
.ex-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 80px;
  text-align: left;
  align-items: center;
  padding-top: 24px;
}
.ex-hero-text { position: relative; z-index: 2; }
.ex-hero .hero-badge { margin-left: 0; }
.ex-hero .hero-body, .ex-hero .hero-sub { margin-left: 0; margin-right: 0; max-width: 520px; }
.ex-hero .hero-ctas { justify-content: flex-start; }
.ex-hero .hero-meta { justify-content: flex-start; }

.hero-orbit {
  position: absolute;
  top: 50%; right: 0;
  width: 60vw; height: 60vw;
  max-width: 880px; max-height: 880px;
  transform: translate(20%, -50%);
  pointer-events: none;
  z-index: 0;
}
.orbit-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(200, 154, 132, 0.10);
  animation: ex-spin 60s linear infinite;
}
.orbit-ring--2 { inset: 12%; border-color: rgba(200, 154, 132, 0.14); animation-duration: 90s; animation-direction: reverse; }
.orbit-ring--3 { inset: 28%; border-color: rgba(200, 154, 132, 0.18); animation-duration: 120s; }
@keyframes ex-spin { to { transform: rotate(360deg); } }

.ex-hero-stage {
  position: relative;
  perspective: var(--ex-perspective);
  min-height: 740px;
  padding: 40px 0;
}
.ex-bottle-scene {
  position: absolute;
  top: 24px;
  left: -4%;
  width: 70%;
  max-width: 520px;
  aspect-ratio: 3 / 4;
  transform-style: preserve-3d;
  transform:
    rotateX(var(--ex-bottle-rotateX))
    rotateY(var(--ex-bottle-rotateY));
  transition: transform 400ms var(--ease-out);
  will-change: transform;
}
.ex-bottle-disc {
  position: absolute;
  bottom: 4%;
  left: 50%;
  width: 70%;
  height: 30%;
  transform: translateX(-50%) rotateX(70deg) translateZ(-40px);
  background: radial-gradient(ellipse, rgba(200, 154, 132, 0.18) 0%, transparent 70%);
  filter: blur(20px);
  z-index: 0;
}
.ex-bottle-glow {
  position: absolute;
  inset: 8%;
  background: radial-gradient(closest-side, rgba(200, 154, 132, 0.22) 0%, transparent 70%);
  filter: blur(40px);
  z-index: 0;
  animation: ex-glow-pulse 6s ease-in-out infinite;
}
@keyframes ex-glow-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
.ex-bottle-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(200, 154, 132, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 154, 132, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
  transform: translateZ(-80px);
  z-index: 0;
}
.ex-bottle-img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 60px 80px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 40px rgba(200, 154, 132, 0.20));
  transform: translateZ(40px);
}

/* Spec callouts positioned at stage edges — never overlap bottle */
.ex-spec {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0;
  z-index: 4;
  opacity: 0;
  animation: ex-spec-in 800ms var(--ease-out) forwards;
  pointer-events: none;
  max-width: 280px;
}
.ex-spec--top {
  top: 18%;
  right: 0;
  flex-direction: row-reverse;
  animation-delay: 1.0s;
}
.ex-spec--mid {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  flex-direction: row-reverse;
  animation-delay: 1.25s;
}
.ex-spec--bottom {
  bottom: 18%;
  right: 0;
  flex-direction: row-reverse;
  animation-delay: 1.5s;
}
@keyframes ex-spec-in { to { opacity: 1; } }

.ex-spec-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(10, 28, 51, 0.85);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  padding: 16px 22px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  min-width: 240px;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.ex-spec-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}
.ex-spec-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
}
.ex-spec-name {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.35;
  color: var(--fg-1);
  letter-spacing: 0.015em;
}
.ex-spec-dose {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.ex-spec-leader {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.ex-spec-line {
  display: block;
  height: 1px;
  width: 56px;
  background: linear-gradient(90deg, var(--accent), rgba(200, 154, 132, 0.1));
}
.ex-spec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(200, 154, 132, 0.20), 0 0 14px rgba(200, 154, 132, 0.6);
  flex-shrink: 0;
  margin: 0 -1px;
  animation: ex-spec-pulse 3s ease-in-out infinite;
}
@keyframes ex-spec-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(200, 154, 132, 0.20), 0 0 14px rgba(200, 154, 132, 0.6); }
  50% { box-shadow: 0 0 0 4px rgba(200, 154, 132, 0.10), 0 0 20px rgba(200, 154, 132, 0.8); }
}

.ex-btn-primary {
  position: relative;
  overflow: hidden;
}
.ex-btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: translateX(-100%);
  transition: transform 800ms var(--ease-out);
}
.ex-btn-primary:hover::after { transform: translateX(100%); }
.ex-btn-primary [data-lucide] { transition: transform var(--dur-base) var(--ease-out); }
.ex-btn-primary:hover [data-lucide] { transform: translateX(4px); }

@media (max-width: 1024px) {
  .ex-hero-inner { grid-template-columns: 1fr; text-align: center; gap: 56px; }
  .ex-hero-text .hero-badge { margin-left: auto; margin-right: auto; }
  .ex-hero .hero-body, .ex-hero .hero-sub { margin-left: auto; margin-right: auto; }
  .ex-hero .hero-ctas, .ex-hero .hero-meta { justify-content: center; }
}

/* =============================================================
   2 · TRUST RIBBON · DRAW-IN
   ============================================================= */
.ex-trust .ribbon-item {
  position: relative;
  overflow: hidden;
}
.ex-ribbon-line {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms var(--ease-out);
}
.ex-trust .ribbon-item:hover .ex-ribbon-line { transform: scaleX(1); }
.ex-trust .ribbon-item [data-lucide] {
  transition: transform var(--dur-base) var(--ease-out);
}
.ex-trust .ribbon-item:hover [data-lucide] {
  transform: scale(1.15);
}

/* =============================================================
   3 · PROBLEM · ANIMATED MOMENTS LIST
   ============================================================= */
.ex-problem { padding-bottom: var(--sp-9); }
.ex-moments {
  list-style: none;
  padding: 0;
  margin: var(--sp-7) 0 var(--sp-7);
  border-top: 1px solid var(--hairline);
}
.ex-moment {
  display: grid;
  grid-template-columns: 56px 48px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: center;
  position: relative;
  transition: padding-left var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
  cursor: default;
}
.ex-moment::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, rgba(200, 154, 132, 0.08), transparent);
  transition: width var(--dur-base) var(--ease-out);
}
.ex-moment:hover {
  padding-left: 16px;
}
.ex-moment:hover::before { width: 100%; }
.ex-moment-num {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  position: relative;
  z-index: 1;
}
.ex-moment-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: rgba(200, 154, 132, 0.06);
  color: var(--accent);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
  position: relative;
  z-index: 1;
}
.ex-moment-icon [data-lucide] { width: 18px !important; height: 18px !important; }
.ex-moment:hover .ex-moment-icon {
  transform: rotate(-6deg) scale(1.06);
  background: rgba(200, 154, 132, 0.14);
}
.ex-moment-text {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  color: var(--fg-1);
  letter-spacing: -0.005em;
  position: relative;
  z-index: 1;
}
.ex-problem-close {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.45;
  color: var(--fg-2);
  margin: var(--sp-7) 0 0;
  max-width: 720px;
  letter-spacing: -0.005em;
}
.ex-problem-close em { color: var(--accent); font-style: italic; }

@media (max-width: 767px) {
  .ex-moment { grid-template-columns: 36px 36px 1fr; gap: 16px; }
  .ex-moment-icon { width: 36px; height: 36px; }
}

/* =============================================================
   4 · CATEGORY CRITIQUE · INTERACTIVE CHART
   ============================================================= */
/* Critique section header — full-width centered */
.ex-critique-head {
  max-width: 880px;
  margin: 0 auto var(--sp-7);
  text-align: center;
}
.ex-critique-head .hairline-short { margin: 0 auto var(--sp-5); transform-origin: center; }
.ex-critique-head .section-lead { margin: 0 auto; }

/* Chart shell — prominent, glassy */
.ex-chart {
  position: relative;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(200, 154, 132, 0.05) 0%, transparent 60%),
    linear-gradient(160deg, rgba(244, 242, 238, 0.05) 0%, rgba(244, 242, 238, 0.01) 100%);
  border: 1px solid var(--hairline);
  border-radius: var(--r-4);
  padding: 48px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.ex-chart--wide { padding: 56px; }
.ex-chart::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.6;
}

/* Hover hint banner — pulse + icon, inline above chart head */
.ex-chart-hint {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px 10px 14px;
  margin: 0 0 28px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: rgba(200, 154, 132, 0.10);
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  z-index: 2;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  pointer-events: none;
  width: fit-content;
  max-width: 100%;
}
.ex-chart-hint[data-hidden="true"] {
  opacity: 0;
  transform: translateY(-6px);
}
.ex-chart-hint [data-lucide] { width: 14px !important; height: 14px !important; }
.ex-chart-hint-pulse {
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  animation: ex-hint-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes ex-hint-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.18); opacity: 0; }
}

/* Chart head */
.ex-chart-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hairline);
  align-items: end;
}
.ex-chart-head-title { display: flex; flex-direction: column; gap: 8px; max-width: 540px; }
.ex-chart-head-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
.ex-chart-head-h {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 400;
  color: var(--fg-1);
  letter-spacing: -0.012em;
  line-height: 1.18;
}
.ex-chart-legends {
  display: flex;
  gap: 24px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: 500;
  white-space: nowrap;
}
.ex-chart-legend { display: inline-flex; align-items: center; gap: 10px; }
.ex-legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.ex-legend-dot--typical { background: rgba(244, 242, 238, 0.30); }
.ex-legend-dot--bonaviox { background: var(--accent); box-shadow: 0 0 12px rgba(200, 154, 132, 0.6); }

/* Chart rows — big, hover-able */
.ex-chart-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ex-chart-row {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.8fr);
  gap: 40px;
  align-items: center;
  padding: 22px 20px;
  border-radius: var(--r-3);
  position: relative;
  cursor: default;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  border: 1px solid transparent;
}
.ex-chart-row::before {
  content: "";
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
}
.ex-chart-row:hover,
.ex-chart-row:focus-within,
.ex-chart-row.is-tip-active {
  background: rgba(200, 154, 132, 0.05);
  border-color: var(--hairline);
}
.ex-chart-row:hover::before,
.ex-chart-row:focus-within::before,
.ex-chart-row.is-tip-active::before { transform: scaleY(1); }

.ex-chart-label {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
}
.ex-chart-label-num {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
.ex-chart-label-text {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 400;
  color: var(--fg-1);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.ex-chart-info {
  width: 16px !important;
  height: 16px !important;
  color: var(--fg-3);
  transition: color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ex-chart-row:hover .ex-chart-info,
.ex-chart-row:focus-within .ex-chart-info,
.ex-chart-row.is-tip-active .ex-chart-info {
  color: var(--accent);
  transform: rotate(15deg) scale(1.15);
}

/* Bars + visible % */
.ex-chart-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ex-bar-track {
  display: grid;
  grid-template-columns: 1fr 96px;
  align-items: center;
  gap: 16px;
}
.ex-bar {
  height: 14px;
  background: rgba(244, 242, 238, 0.06);
  border-radius: 7px;
  overflow: hidden;
  position: relative;
}
.ex-bar-value {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 7px;
  transition: width 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ex-bar--typical .ex-bar-value {
  background: linear-gradient(90deg, rgba(244, 242, 238, 0.20), rgba(244, 242, 238, 0.32));
}
.ex-bar--bonaviox .ex-bar-value {
  background: linear-gradient(90deg, var(--accent), #E5C2A8);
  box-shadow: 0 0 18px rgba(200, 154, 132, 0.45);
  position: relative;
}
.ex-bar--bonaviox .ex-bar-value::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: translateX(-100%);
  animation: ex-bar-shimmer 3.6s ease-out infinite;
  animation-delay: 1.5s;
}
@keyframes ex-bar-shimmer {
  0%, 30% { transform: translateX(-100%); }
  50%, 100% { transform: translateX(100%); }
}
.ex-chart-row.is-active .ex-bar-value { width: var(--w, 0%); }

.ex-bar-pct {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--fg-2);
  text-align: right;
  letter-spacing: -0.005em;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 600ms var(--ease-out) 1000ms, transform 600ms var(--ease-out) 1000ms, color var(--dur-base) var(--ease-out);
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
  line-height: 1;
}
.ex-chart-row.is-active .ex-bar-pct { opacity: 1; transform: translateX(0); }
.ex-bar-pct--bonaviox { color: var(--accent); }
.ex-bar-pct--neg { color: var(--fg-3); }

/* "Often Absent" text — italic, fits the cell */
.ex-bar-pct--text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--fg-3);
}
.ex-bar-pct [data-lucide],
.ex-bar-pct svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2;
}
.ex-bar-pct--bonaviox [data-lucide],
.ex-bar-pct--bonaviox svg { color: var(--accent); }
.ex-bar-pct--neg [data-lucide],
.ex-bar-pct--neg svg { color: rgba(244, 242, 238, 0.35); }

/* Check-only rows: rail instead of bar */
.ex-chart-row--check .ex-bar {
  height: 1px;
  background: var(--hairline-soft);
  border-radius: 0;
  align-self: center;
}
.ex-chart-row--check .ex-bar-value { display: none; }
.ex-chart-row--check .ex-bar-pct { font-size: 22px; }

/* Footer note */
.ex-chart-footer {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline-soft);
}
.ex-chart-footer-label {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-style: italic;
}

/* Floating tooltip */
.ex-chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(10, 28, 51, 0.96);
  border: 1px solid var(--accent);
  border-radius: var(--r-3);
  padding: 18px 22px;
  max-width: 340px;
  font-family: var(--font-sans);
  opacity: 0;
  transform: translate(-50%, -100%) translateY(-12px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  z-index: 10;
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 32px rgba(200, 154, 132, 0.20);
}
.ex-chart-tooltip[data-visible="true"] {
  opacity: 1;
  transform: translate(-50%, -100%) translateY(-22px);
}
.ex-tooltip-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
}
.ex-tooltip-body {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-1);
}
.ex-chart-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 12px; height: 12px;
  background: inherit;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  transform: translateX(-50%) rotate(45deg);
}

@media (max-width: 1024px) {
  .ex-chart, .ex-chart--wide { padding: 32px; }
  .ex-chart-head { grid-template-columns: 1fr; gap: 20px; }
  .ex-chart-hint { position: relative; top: auto; right: auto; margin-bottom: 16px; }
}
@media (max-width: 767px) {
  .ex-chart, .ex-chart--wide { padding: 20px; }
  .ex-chart-row {
    grid-template-columns: 1fr;
    gap: 16px;
    /* More breathing room so the 01 number, mg value, and bars
       never touch the row border once the hover-active card appears. */
    padding: 22px 18px;
  }
  .ex-chart-row::before { display: none; }
  .ex-bar-track { grid-template-columns: 1fr 56px; }

  /* MG values · bigger and easier to read */
  .ex-bar-pct { font-size: 14px; }
  .ex-bar-pct--text { font-size: 14px; }
  .ex-chart-row--check .ex-bar-pct { font-size: 22px; }

  /* Legend wraps onto next line on 320px so it never escapes the section */
  .ex-chart-legends {
    flex-wrap: wrap;
    gap: 12px 18px;
    white-space: normal;
  }

  /* Tooltip · pin horizontal position + width so it never narrows or clips,
     regardless of where the cursor hovers in the row. */
  .ex-chart-tooltip {
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    max-width: none !important;
    transform: translate(0, -100%) translateY(-12px) !important;
  }
  .ex-chart-tooltip[data-visible="true"] {
    transform: translate(0, -100%) translateY(-22px) !important;
  }
  .ex-chart-tooltip::after { display: none; }
}

/* =============================================================
   5 · FOUNDER · PHARMACIST PORTRAIT PLACEHOLDER
   ============================================================= */
.ex-portrait {
  transform-style: preserve-3d;
  transition: transform 400ms var(--ease-out);
  will-change: transform;
  overflow: hidden;
}
.ex-portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* cover with object-position: center top — image fills the frame edge to
     edge (no shrinking on mobile) while keeping the head fully visible.
     The minor crop happens at the bottom of the shoulders, never the hair. */
  object-fit: cover;
  object-position: center top;
  z-index: 3;
  display: block;
  background: linear-gradient(160deg, var(--bv-navy-800) 0%, var(--bv-navy-1000) 100%);
}
/* Scrim · darkens the top and bottom strips of the frame so the rose-gold
   eyebrow and white signature stay legible even when the image is bright/white.
   z-index sits above the image (z:3) but below signature/eyebrow (z:5 below). */
.ex-portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 28, 51, 0.78) 0%, rgba(10, 28, 51, 0) 24%, rgba(10, 28, 51, 0) 60%, rgba(10, 28, 51, 0.92) 100%);
}
.ex-portrait .portrait-eyebrow,
.ex-portrait .portrait-signature { z-index: 5; }
.ex-portrait-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.ex-portrait-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.ex-portrait-caption-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  padding: 4px 10px;
  background: rgba(10, 28, 51, 0.7);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.ex-portrait-caption-path {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--fg-3);
}
/* When image loads successfully, hide caption + svg fallback */
.ex-portrait[data-no-image="true"] .ex-portrait-img { display: none; }
.ex-portrait:not([data-no-image="true"]) .ex-portrait-caption,
.ex-portrait:not([data-no-image="true"]) .ex-portrait-svg {
  /* Image loaded; SVG and caption hidden (img covers them above z-index 1) */
}
.ex-portrait .portrait-eyebrow,
.ex-portrait .portrait-signature {
  z-index: 6;
}
.ex-portrait-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at var(--ex-cursor-x, 50%) var(--ex-cursor-y, 50%), rgba(200, 154, 132, 0.18) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.ex-portrait:hover .ex-portrait-glow { opacity: 1; }
.ex-portrait-figure {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(40px);
  pointer-events: none;
}
.ex-portrait-silhouette {
  width: 60%;
  aspect-ratio: 3 / 4;
  background:
    radial-gradient(circle at 50% 32%, rgba(244, 242, 238, 0.12) 0%, rgba(244, 242, 238, 0.04) 30%, transparent 50%),
    linear-gradient(180deg, transparent 0%, transparent 40%, rgba(244, 242, 238, 0.06) 60%, rgba(244, 242, 238, 0.10) 100%);
  clip-path: ellipse(38% 18% at 50% 28%);
  position: relative;
}
.ex-portrait-silhouette::after {
  content: "";
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 70%;
  background: linear-gradient(180deg, rgba(244, 242, 238, 0.06) 0%, rgba(244, 242, 238, 0.10) 100%);
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}
.ex-portrait-arc {
  position: absolute;
  inset: 14% 14% 8% 14%;
  border: 1px solid rgba(200, 154, 132, 0.20);
  border-radius: 50% 50% 8px 8px;
  pointer-events: none;
}

/* =============================================================
   6 · FORMULA · OPEN-CAPSULE ANATOMICAL DIAGRAM
   ============================================================= */
.ex-capsule-wrap {
  position: relative;
  margin: var(--sp-7) 0 var(--sp-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* Hover affordance hint */
.ex-capsule-hint {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px 10px 14px;
  margin: 0;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: rgba(200, 154, 132, 0.10);
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  pointer-events: none;
  width: fit-content;
}
.ex-capsule-hint [data-lucide] { width: 14px !important; height: 14px !important; }
.ex-capsule-hint-pulse {
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  animation: ex-hint-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
.ex-capsule-wrap[data-engaged="true"] .ex-capsule-hint {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

/* Stage */
.ex-capsule-stage {
  position: relative;
  width: 100%;
  max-width: 1320px;
  aspect-ratio: 1200 / 720;
}
.ex-capsule-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* SVG capsule halves — animate open on reveal */
.ex-cap-half {
  transition: transform 900ms var(--ease-out);
  transform-origin: 600px 360px;
}
.ex-cap-half--left { transform: translateX(-30px); }
.ex-cap-half--right { transform: translateX(30px); }
.reveal.is-visible.ex-capsule-wrap .ex-cap-half--left { transform: translateX(-60px); }
.reveal.is-visible.ex-capsule-wrap .ex-cap-half--right { transform: translateX(60px); }
.ex-capsule-wrap.is-visible[data-active] .ex-cap-half--left { transform: translateX(-100px); }
.ex-capsule-wrap.is-visible[data-active] .ex-cap-half--right { transform: translateX(100px); }

/* Granules — float gently */
.ex-granule-cluster {
  transition: opacity 360ms var(--ease-out), filter 360ms var(--ease-out), transform 360ms var(--ease-out);
  transform-box: fill-box;
  transform-origin: center;
  animation: ex-granule-float 6s ease-in-out infinite;
}
.ex-granule-cluster[data-cluster="chondroitin"] { animation-delay: -1.5s; }
.ex-granule-cluster[data-cluster="boswellia"] { animation-delay: -3s; }
.ex-granule-cluster[data-cluster="mesoporosil"] { animation-delay: -4.5s; }
@keyframes ex-granule-float {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-4px) translateX(2px); }
}
.ex-capsule-wrap[data-active] .ex-granule-cluster {
  opacity: 0.18;
  filter: saturate(0.4);
}
.ex-capsule-wrap[data-active="hma"] .ex-granule-cluster[data-cluster="hma"],
.ex-capsule-wrap[data-active="chondroitin"] .ex-granule-cluster[data-cluster="chondroitin"],
.ex-capsule-wrap[data-active="boswellia"] .ex-granule-cluster[data-cluster="boswellia"],
.ex-capsule-wrap[data-active="mesoporosil"] .ex-granule-cluster[data-cluster="mesoporosil"] {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(200, 154, 132, 0.7)) saturate(1.2);
  transform: scale(1.18);
}

/* Leader lines — dashed, draw-in on reveal, brighten on active */
.ex-leader {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1600ms var(--ease-out), stroke 360ms var(--ease-out), stroke-width 360ms var(--ease-out);
  opacity: 0.55;
}
.reveal.is-visible.ex-capsule-wrap .ex-leader { stroke-dashoffset: 0; opacity: 0.55; }
.ex-capsule-wrap.is-visible[data-active] .ex-leader { stroke: rgba(244, 242, 238, 0.12); opacity: 0.35; }
.ex-capsule-wrap.is-visible[data-active="hma"] .ex-leader[data-leader="hma"],
.ex-capsule-wrap.is-visible[data-active="chondroitin"] .ex-leader[data-leader="chondroitin"],
.ex-capsule-wrap.is-visible[data-active="boswellia"] .ex-leader[data-leader="boswellia"],
.ex-capsule-wrap.is-visible[data-active="mesoporosil"] .ex-leader[data-leader="mesoporosil"] {
  stroke: var(--accent);
  stroke-width: 2;
  opacity: 1;
}
.ex-leader-dot {
  transition: r 360ms var(--ease-out), opacity 360ms var(--ease-out), filter 360ms var(--ease-out);
}
.ex-capsule-wrap[data-active] .ex-leader-dot { opacity: 0.3; }
.ex-capsule-wrap[data-active="hma"] .ex-leader-dot[data-leader-dot="hma"],
.ex-capsule-wrap[data-active="chondroitin"] .ex-leader-dot[data-leader-dot="chondroitin"],
.ex-capsule-wrap[data-active="boswellia"] .ex-leader-dot[data-leader-dot="boswellia"],
.ex-capsule-wrap[data-active="mesoporosil"] .ex-leader-dot[data-leader-dot="mesoporosil"] {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(200, 154, 132, 0.9));
}

/* Callout cards */
.ex-callout {
  position: absolute;
  z-index: 3;
  width: clamp(240px, 22vw, 320px);
  padding: 18px 22px;
  background: rgba(10, 28, 51, 0.84);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}
.ex-callout::before {
  content: "";
  position: absolute;
  top: 16px;
  width: 14px; height: 1px;
  background: var(--accent);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.ex-callout--tl, .ex-callout--bl { left: -2%; }
.ex-callout--tr, .ex-callout--br { right: -2%; }
.ex-callout--tl, .ex-callout--tr { top: 4%; }
.ex-callout--bl, .ex-callout--br { bottom: 4%; }
.ex-callout--tl::before, .ex-callout--bl::before { right: -14px; }
.ex-callout--tr::before, .ex-callout--br::before { left: -14px; }

.ex-callout:hover,
.ex-callout[data-active="true"] {
  border-color: var(--accent);
  background: rgba(200, 154, 132, 0.10);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55), 0 0 36px rgba(200, 154, 132, 0.25);
  transform: translateY(-4px);
}
.ex-capsule-wrap[data-active] .ex-callout { opacity: 0.45; }
.ex-capsule-wrap[data-active] .ex-callout[data-active="true"],
.ex-capsule-wrap[data-active] .ex-callout:hover { opacity: 1; }

.ex-callout-num {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
.ex-callout-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 400;
  color: var(--fg-1);
  letter-spacing: -0.01em;
  line-height: 1.18;
  margin: 0;
}
.ex-callout-title sup { font-size: 0.5em; color: var(--accent); vertical-align: top; margin-left: 1px; }
.ex-callout-dose {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  padding: 5px 10px;
  background: rgba(200, 154, 132, 0.12);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  align-self: flex-start;
  width: fit-content;
}
.ex-callout-hairline {
  display: block;
  height: 1px;
  width: 36px;
  background: var(--accent);
  opacity: 0.5;
  margin: 4px 0;
}
.ex-callout-role {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
}

/* =============================================================
   VERTICAL-PILL · LEFT-STACK · 1200–767px
   ---------------------------------------------------------------
   The horizontal pill SVG above stays for ≥1201px. Below 1201 the stage
   becomes a 2-column CSS Grid:
       LEFT  · 4 ingredient callouts, one per grid-row (true vertical spacing)
       RIGHT · `.ex-capsule-svg-v` — full vertical capsule SVG that matches
               the horizontal one: navy + rose-gold halves, shine, seam, halo,
               and all four granule clusters (spheres / crystals / resin /
               hex lattice) in the same drawing language.
   Four horizontal leader lines live INSIDE that vertical SVG (so they share
   the same coordinate system as the clusters), running from the left edge
   of the SVG over to each cluster. Because the callout grid-rows are 1fr
   each and the leader y-coords are at the same 1/8, 3/8, 5/8, 7/8 marks,
   every leader is perfectly horizontal and lands on its cluster.

   `.ex-capsule-svg-v` is hidden by default — desktop ≥1201 stays untouched.
   ============================================================= */
.ex-capsule-svg-v { display: none; }

/* Capsule halves animate apart on reveal — same affordance as horizontal */
.ex-vcap-half {
  transition: transform 900ms var(--ease-out);
  transform-origin: 740px 600px;
}
.ex-vcap-half--top    { transform: translateY(-12px); }
.ex-vcap-half--bottom { transform: translateY(12px); }
.reveal.is-visible .ex-vcap-half--top    { transform: translateY(-24px); }
.reveal.is-visible .ex-vcap-half--bottom { transform: translateY(24px); }
.ex-capsule-wrap.is-visible[data-active] .ex-vcap-half--top    { transform: translateY(-40px); }
.ex-capsule-wrap.is-visible[data-active] .ex-vcap-half--bottom { transform: translateY(40px); }

/* Granule clusters · all 4 visible all the time, each at its own y position
   matching its callout row. Active state emphasizes the focused one (scale +
   glow); non-active clusters dim slightly when something is focused. */
.ex-vcap-cluster {
  opacity: 1;
  transition: opacity 360ms var(--ease-out), filter 360ms var(--ease-out), transform 360ms var(--ease-out);
  transform-box: fill-box;
  transform-origin: center;
  animation: ex-granule-float 6s ease-in-out infinite;
}
.ex-vcap-cluster[data-cluster="boswellia"]   { animation-delay: -1.5s; }
.ex-vcap-cluster[data-cluster="chondroitin"] { animation-delay: -3s; }
.ex-vcap-cluster[data-cluster="hma"]         { animation-delay: -4.5s; }
/* When a callout is active, dim the other three clusters slightly so the
   focused one stands out — but they stay visible. */
.ex-capsule-wrap[data-active] .ex-vcap-cluster { opacity: 0.45; filter: saturate(0.55); }
.ex-capsule-wrap[data-active="mesoporosil"] .ex-vcap-cluster[data-cluster="mesoporosil"],
.ex-capsule-wrap[data-active="boswellia"]   .ex-vcap-cluster[data-cluster="boswellia"],
.ex-capsule-wrap[data-active="chondroitin"] .ex-vcap-cluster[data-cluster="chondroitin"],
.ex-capsule-wrap[data-active="hma"]         .ex-vcap-cluster[data-cluster="hma"] {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(200, 154, 132, 0.7)) saturate(1.2);
  transform: scale(1.18);
}

/* Spotlight halos behind active cluster */
.ex-vcap-spotlight { transition: opacity 360ms var(--ease-out); }
.ex-capsule-wrap[data-active="mesoporosil"] .ex-vcap-spotlight[data-spotlight="mesoporosil"],
.ex-capsule-wrap[data-active="boswellia"]   .ex-vcap-spotlight[data-spotlight="boswellia"],
.ex-capsule-wrap[data-active="chondroitin"] .ex-vcap-spotlight[data-spotlight="chondroitin"],
.ex-capsule-wrap[data-active="hma"]         .ex-vcap-spotlight[data-spotlight="hma"] {
  opacity: 1;
}

/* Leader lines · all 4 visible by default (dim) so the user sees every
   anatomical connection. Active state brightens the focused one. */
.ex-vcap-leader {
  opacity: 0.45;
  transition: opacity 360ms var(--ease-out), stroke 360ms var(--ease-out), stroke-width 360ms var(--ease-out);
}
.ex-capsule-wrap[data-active] .ex-vcap-leader { opacity: 0.25; }
.ex-capsule-wrap[data-active="mesoporosil"] .ex-vcap-leader[data-leader="mesoporosil"],
.ex-capsule-wrap[data-active="boswellia"]   .ex-vcap-leader[data-leader="boswellia"],
.ex-capsule-wrap[data-active="chondroitin"] .ex-vcap-leader[data-leader="chondroitin"],
.ex-capsule-wrap[data-active="hma"]         .ex-vcap-leader[data-leader="hma"] {
  stroke: var(--accent);
  stroke-width: 1.75;
  opacity: 1;
}

/* Anchor ticks on the callout side · all visible (dim), active is full bright */
.ex-vcap-leader-tick {
  opacity: 0.55;
  transition: opacity 360ms var(--ease-out);
  filter: drop-shadow(0 0 4px rgba(200, 154, 132, 0.7));
}
.ex-capsule-wrap[data-active] .ex-vcap-leader-tick { opacity: 0.35; }
.ex-capsule-wrap[data-active="mesoporosil"] .ex-vcap-leader-tick[data-tick="mesoporosil"],
.ex-capsule-wrap[data-active="boswellia"]   .ex-vcap-leader-tick[data-tick="boswellia"],
.ex-capsule-wrap[data-active="chondroitin"] .ex-vcap-leader-tick[data-tick="chondroitin"],
.ex-capsule-wrap[data-active="hma"]         .ex-vcap-leader-tick[data-tick="hma"] {
  opacity: 1;
}

@media (max-width: 1200px) and (min-width: 768px) {
  /* Ensure the flex parent centers its block child along the cross axis. */
  .ex-capsule-wrap { align-items: center !important; }

  /* Stage = 2-column · 4-row grid · column ratio 55:45 so the callout right
     edge always falls at stage-x 55% (= viewBox x 550), matching the SVG
     leader-line start coordinate. */
  .ex-capsule-stage {
    display: grid !important;
    grid-template-columns: 55fr 45fr;
    grid-template-rows: repeat(4, 1fr);
    column-gap: 0;
    /* row-gap MUST be 0 so each row-center sits at exactly 12.5/37.5/62.5/87.5%
       of stage — which matches the SVG leader y-coords (150/450/750/1050 of
       viewBox 1200). The visual spacing between callouts is created by the
       cards being shorter than their grid row + align-self:center. */
    row-gap: 0;
    aspect-ratio: 5 / 6 !important;
    max-width: 920px !important;
    margin: 0 auto !important;
    width: 100% !important;
    align-self: center !important;
    position: relative;
  }

  /* Hide horizontal pill, show vertical pill SVG spanning the FULL stage
     so its viewBox lines up with the callout grid cells. SVG sits in the
     visual background; callouts paint on top. */
  .ex-capsule-svg { display: none; }
  .ex-capsule-svg-v {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
  }

  /* Callouts · one per grid row, left column. No max-width — card fills the
     full grid column so its right edge always lands at viewBox x=550, which
     is exactly where the SVG leader line starts. align-self:center centers
     each card within its row so the card vertical center sits at the same y
     as the SVG leader line. */
  .ex-callout {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    padding: 16px 20px;
    grid-column: 1;
    grid-row: auto;
    align-self: center;
    justify-self: stretch;
    transform: none !important;
    font-size: 13px;
    z-index: 2;
  }
  .ex-callout-title    { font-size: 16px; line-height: 1.22; }
  .ex-callout-role     { font-size: 12.5px; line-height: 1.55; }
  .ex-callout-dose-val { font-size: 26px; }
  /* Suppress the original tick stub — the SVG leader lines own the connector. */
  .ex-callout::before { display: none; }

  /* Top→bottom row order matches cluster order in the pill. */
  .ex-callout--br { grid-row: 1 !important; }   /* MESOPOROSIL · top */
  .ex-callout--bl { grid-row: 2 !important; }   /* BOSWELLIA */
  .ex-callout--tr { grid-row: 3 !important; }   /* CHONDROITIN */
  .ex-callout--tl { grid-row: 4 !important; }   /* HMA · bottom */
}

/* <767px · clean single-column stack with the original horizontal SVG on top. */
@media (max-width: 767px) {
  .ex-capsule-svg-v { display: none; }
  .ex-capsule-stage {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-template-areas:
      "svg"
      "tl"
      "tr"
      "bl"
      "br" !important;
    aspect-ratio: auto !important;
    max-width: 100% !important;
    padding: 0;
    column-gap: 0;
    row-gap: 16px;
  }
  .ex-capsule-svg {
    display: block;
    grid-area: svg;
    grid-column: 1 !important;
    grid-row: auto !important;
    position: relative;
    top: auto; left: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 720;
    transform: none;
  }
  .ex-callout {
    position: relative;
    width: 100% !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    transform: none;
    grid-column: 1 !important;
  }
  .ex-callout::before { display: none; }
  .ex-callout--tl { grid-area: tl; grid-row: auto !important; }
  .ex-callout--tr { grid-area: tr; grid-row: auto !important; }
  .ex-callout--bl { grid-area: bl; grid-row: auto !important; }
  .ex-callout--br { grid-area: br; grid-row: auto !important; }
  .ex-ruler text, .ex-foot-ruler text { display: none; }
}

/* =============================================================
   7 · BENEFITS / INGREDIENT BRIDGE · TRANSLATION ROWS
   ============================================================= */
.ex-bridge {
  background:
    radial-gradient(60% 50% at 80% 0%, rgba(200, 154, 132, 0.05) 0%, transparent 70%),
    radial-gradient(50% 40% at 0% 100%, rgba(22, 54, 92, 0.55) 0%, transparent 70%),
    var(--bv-navy-1000);
}
.ex-bridge-head {
  max-width: 880px;
  margin: 0 auto var(--sp-8);
  text-align: center;
}
.ex-bridge-head .hairline-short { margin: 0 auto var(--sp-5); transform-origin: center; }
.ex-bridge-lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-2);
  margin: 0 auto;
  max-width: 600px;
}

.ex-bridge-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--hairline);
}
.ex-bridge-row {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) 80px minmax(0, 1.4fr);
  gap: 24px;
  align-items: center;
  padding: 48px 0;
  border-bottom: 1px solid var(--hairline);
  position: relative;
  transition: background var(--dur-base) var(--ease-out);
}
.ex-bridge-row::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.ex-bridge-row:hover { background: linear-gradient(90deg, rgba(200, 154, 132, 0.02), transparent 50%, rgba(200, 154, 132, 0.04)); }
.ex-bridge-row:hover::before { opacity: 0.7; }

/* LEFT — science side */
.ex-bridge-science {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: clamp(20px, 3vw, 56px);
}
.ex-bridge-num {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.ex-bridge-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.ex-bridge-name {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}
.ex-bridge-name sup { font-size: 0.45em; color: var(--accent); vertical-align: top; }
.ex-bridge-dose {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  padding: 6px 12px;
  background: rgba(200, 154, 132, 0.10);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  align-self: flex-start;
  width: fit-content;
  margin-top: 4px;
}

/* CENTER — arrow */
.ex-bridge-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;
}
.ex-bridge-arrow-line {
  position: absolute;
  left: 0; right: 24px; top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(200, 154, 132, 0.15), var(--accent));
  transform: translateY(-50%);
  transform-origin: left;
  transform: scaleX(0) translateY(-50%);
  transition: transform 1200ms var(--ease-out) 200ms;
}
.reveal.is-visible .ex-bridge-arrow-line { transform: scaleX(1) translateY(-50%); }
.ex-bridge-arrow [data-lucide] {
  position: relative;
  width: 22px !important;
  height: 22px !important;
  color: var(--accent);
  background: var(--bv-navy-1000);
  padding: 4px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--bv-navy-1000);
  transition: transform var(--dur-base) var(--ease-out);
}
.ex-bridge-row:hover .ex-bridge-arrow [data-lucide] {
  transform: translateX(4px) scale(1.08);
  border-color: var(--accent);
}

/* RIGHT — real-life side */
.ex-bridge-real {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ex-bridge-real-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
.ex-bridge-real-quote {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--fg-1);
  margin: 0;
  max-width: 640px;
  text-wrap: balance;
}
.ex-bridge-real-quote em {
  font-style: italic;
  color: var(--accent);
}
.ex-bridge-real-body {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--fg-2);
  margin: 0;
  max-width: 560px;
}

@media (max-width: 1024px) {
  .ex-bridge-row {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 36px 0;
    text-align: left;
  }
  .ex-bridge-arrow { height: 32px; justify-content: flex-start; }
  .ex-bridge-arrow-line { right: auto; width: 64px; }
  .ex-bridge-real-quote { font-size: clamp(22px, 4vw, 28px); }
}

/* =============================================================
   8 · LIFESTYLE · SCROLLY TIMELINE (on paper)
   ============================================================= */
.ex-lifestyle .hairline-short { background: var(--bv-rose-600); }
.ex-timeline {
  position: relative;
  margin-top: var(--sp-8);
  padding-left: 56px;
}
.ex-timeline-track {
  position: absolute;
  top: 0; bottom: 0; left: 23px;
  width: 2px;
  background: rgba(27, 27, 27, 0.10);
  border-radius: 2px;
  overflow: hidden;
}
.ex-timeline-fill {
  display: block;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, var(--bv-rose-600), var(--bv-rose-500));
  transition: height 200ms linear;
}
.ex-timeline-step {
  position: relative;
  padding: 24px 0 40px;
}
.ex-timeline-step:last-child { padding-bottom: 0; }
.ex-timeline-dot {
  position: absolute;
  top: 32px; left: -41px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bv-paper);
  border: 2px solid var(--bv-rose-500);
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  z-index: 1;
}
.ex-timeline-step.is-active .ex-timeline-dot,
.ex-timeline-step:hover .ex-timeline-dot {
  background: var(--bv-rose-500);
  transform: scale(1.25);
  box-shadow: 0 0 0 6px rgba(200, 154, 132, 0.15);
}
.ex-timeline-eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bv-rose-600);
  margin-bottom: 8px;
}
.ex-timeline-step h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 400;
  color: var(--bv-navy-900);
  margin: 0 0 12px;
  letter-spacing: -0.012em;
  line-height: 1.1;
}
.ex-timeline-step p {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(27, 27, 27, 0.72);
  margin: 0;
  max-width: 560px;
}

/* =============================================================
   9 · REVIEWS · GAUGE + TILT CARDS
   ============================================================= */
.ex-rating-block {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 56px;
  align-items: center;
  margin: var(--sp-7) auto var(--sp-7);
  max-width: 720px;
  padding: 32px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-4);
  background: rgba(244, 242, 238, 0.04);
}
.ex-rating-gauge {
  position: relative;
  width: 140px; height: 140px;
}
.ex-rating-gauge svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.gauge-track {
  fill: none;
  stroke: var(--hairline-soft);
  stroke-width: 6;
}
.gauge-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 326.7;
  stroke-dashoffset: 326.7;
  filter: drop-shadow(0 0 8px rgba(200, 154, 132, 0.5));
  transition: stroke-dashoffset 1400ms var(--ease-out);
}
.ex-rating-gauge[data-animated="true"] .gauge-fill { stroke-dashoffset: calc(326.7 - (326.7 * 4.9 / 5)); }
.ex-rating-num {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.ex-rating-value {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--fg-1);
  line-height: 1;
  letter-spacing: -0.015em;
}
.ex-rating-of {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.ex-rating-breakdown { display: flex; flex-direction: column; gap: 12px; }
.ex-rating-total {
  margin: 0 0 8px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ex-rating-total-num {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.015em;
}
.ex-rating-total-label {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.ex-rating-bars { display: flex; flex-direction: column; gap: 6px; }
.ex-rating-bar {
  display: grid;
  grid-template-columns: 32px 1fr 40px;
  gap: 12px;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg-2);
}
.ex-rating-bar .bar {
  height: 4px;
  background: rgba(244, 242, 238, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.ex-rating-bar .fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 1200ms var(--ease-out);
}
.ex-rating-block.is-visible .ex-rating-bar .fill { width: var(--w, 0%); }
.ex-rating-bar .pct {
  text-align: right;
  color: var(--fg-2);
}

@media (max-width: 767px) {
  .ex-rating-block { grid-template-columns: 1fr; gap: 28px; text-align: left; }
  .ex-rating-gauge { margin: 0 auto; }
}

.ex-reviews-grid { perspective: 1200px; }
.ex-review-card {
  transform-style: preserve-3d;
  transition: transform 400ms var(--ease-out), border-color var(--dur-base) var(--ease-out);
  will-change: transform;
}
.ex-review-card .review-quote,
.ex-review-card .review-quote-mark,
.ex-review-card .review-byline,
.ex-review-card .hairline {
  transform: translateZ(20px);
}

/* =============================================================
   10 · PREMIUM · IMAGE + PILLAR LIST SPLIT
   ============================================================= */
.ex-premium-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 80px;
  align-items: center;
}

/* LEFT figure */
.ex-premium-figure {
  position: relative;
  margin: 0;
  perspective: 1200px;
  transform-style: preserve-3d;
  transition: transform 400ms var(--ease-out);
  will-change: transform;
}
.ex-premium-figure-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-4);
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 30% 30%, rgba(200, 154, 132, 0.10) 0%, transparent 65%),
    linear-gradient(160deg, var(--bv-navy-800) 0%, var(--bv-navy-1000) 100%);
  border: 1px solid var(--hairline);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  transform: translateZ(20px);
}
.ex-premium-figure-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(108%) contrast(102%);
  transition: transform 1200ms var(--ease-out);
}
.ex-premium-figure:hover .ex-premium-figure-img { transform: scale(1.025); }

/* Fallback content only shown when image fails (parent gets [data-no-image]) */
.ex-premium-figure-fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px;
  text-align: center;
  color: var(--fg-2);
  background:
    radial-gradient(60% 50% at 50% 50%, rgba(200, 154, 132, 0.06) 0%, transparent 70%),
    repeating-linear-gradient(45deg,
      rgba(244, 242, 238, 0.02) 0 12px,
      transparent 12px 24px);
  z-index: 0;
}
.ex-premium-figure-frame[data-no-image] .ex-premium-figure-fallback { display: flex; }
.ex-premium-figure-frame[data-no-image] .ex-premium-figure-img { display: none; }
.ex-premium-figure-img { position: relative; z-index: 1; }

.ex-fallback-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.ex-fallback-name {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--fg-1);
  letter-spacing: -0.005em;
}
.ex-fallback-path {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  padding: 6px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  background: rgba(0, 0, 0, 0.25);
}

/* Corner crop marks — editorial pharmacy frame */
.ex-premium-figure-frame-line {
  position: absolute;
  width: 22px;
  height: 22px;
  z-index: 2;
  pointer-events: none;
}
.ex-premium-figure-frame-line::before,
.ex-premium-figure-frame-line::after {
  content: "";
  position: absolute;
  background: var(--accent);
}
.ex-premium-figure-frame-line::before { height: 1px; width: 100%; }
.ex-premium-figure-frame-line::after { width: 1px; height: 100%; }
.ex-premium-figure-frame-line--tl { top: 14px; left: 14px; }
.ex-premium-figure-frame-line--tl::before { top: 0; left: 0; }
.ex-premium-figure-frame-line--tl::after { top: 0; left: 0; }
.ex-premium-figure-frame-line--tr { top: 14px; right: 14px; }
.ex-premium-figure-frame-line--tr::before { top: 0; right: 0; }
.ex-premium-figure-frame-line--tr::after { top: 0; right: 0; }
.ex-premium-figure-frame-line--bl { bottom: 14px; left: 14px; }
.ex-premium-figure-frame-line--bl::before { bottom: 0; left: 0; }
.ex-premium-figure-frame-line--bl::after { bottom: 0; left: 0; }
.ex-premium-figure-frame-line--br { bottom: 14px; right: 14px; }
.ex-premium-figure-frame-line--br::before { bottom: 0; right: 0; }
.ex-premium-figure-frame-line--br::after { bottom: 0; right: 0; }

.ex-premium-figure-caption {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 0 4px;
  flex-wrap: wrap;
}
.ex-figure-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-3);
}
.ex-figure-meta-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(200, 154, 132, 0.5);
}
.ex-figure-spec {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--fg-2);
  letter-spacing: -0.005em;
}
.ex-figure-spec sup { font-size: 0.55em; color: var(--accent); vertical-align: top; }

/* RIGHT body */
.ex-premium-body { display: flex; flex-direction: column; gap: var(--sp-6); }
.ex-premium-head { display: flex; flex-direction: column; gap: var(--sp-3); }
.ex-premium-head .hairline-short { margin-bottom: var(--sp-2); }
.ex-premium-head .display-2 { margin: 0; }
.ex-premium-head .section-lead { margin: var(--sp-2) 0 0; max-width: 520px; }

.ex-premium-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--hairline);
}
.ex-premium-row {
  display: grid;
  grid-template-columns: 56px 1fr 32px;
  gap: 28px;
  align-items: start;
  padding: 26px 0;
  border-bottom: 1px solid var(--hairline);
  position: relative;
  transition: padding var(--dur-base) var(--ease-out);
  cursor: default;
}
.ex-premium-row::before {
  content: "";
  position: absolute;
  left: -20px; top: 50%; transform: translateY(-50%) scaleX(0);
  width: 12px; height: 1px;
  background: var(--accent);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease-out);
}
.ex-premium-row:hover { padding-left: 20px; }
.ex-premium-row:hover::before { transform: translateY(-50%) scaleX(1); }
.ex-premium-row-num {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 4px;
}
.ex-premium-row-body { display: flex; flex-direction: column; gap: 8px; }
.ex-premium-row-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 400;
  color: var(--fg-1);
  margin: 0;
  letter-spacing: -0.012em;
  line-height: 1.18;
}
.ex-premium-row-text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-2);
  margin: 0;
  max-width: 480px;
}
.ex-premium-row-arrow {
  width: 18px !important;
  height: 18px !important;
  color: var(--fg-3);
  align-self: center;
  transition: color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ex-premium-row:hover .ex-premium-row-arrow {
  color: var(--accent);
  transform: translate(4px, -4px);
}

@media (max-width: 1024px) {
  .ex-premium-split { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 767px) {
  .ex-premium-figure-frame { aspect-ratio: 4 / 3; }
  .ex-premium-row { grid-template-columns: 40px 1fr 24px; gap: 16px; padding: 22px 0; }
  .ex-premium-row:hover { padding-left: 0; }
}

/* =============================================================
   11 · CLINICIAN AI · PULSING ORB
   ============================================================= */
.ex-clinician-card { position: relative; }
.ex-clinician-orb {
  position: absolute;
  top: -36px; left: 50%;
  transform: translateX(-50%);
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--bv-navy-900);
  border: 1px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  z-index: 2;
  box-shadow: 0 12px 40px rgba(200, 154, 132, 0.25);
}
.ex-clinician-orb [data-lucide] { width: 28px !important; height: 28px !important; stroke-width: 1.25; }
.orb-pulse {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  animation: orb-ping 2.4s ease-out infinite;
  opacity: 0;
}
.orb-pulse:nth-child(2) { animation-delay: 0.8s; }
.orb-pulse:nth-child(3) { animation-delay: 1.6s; }
@keyframes orb-ping {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.9); opacity: 0; }
}
.ex-clinician .clinician-card {
  padding-top: var(--sp-8);
  text-align: center;
}
.ex-clinician .clinician-titles { align-items: center; text-align: center; }
.ex-clinician .clinician-body { margin-left: auto; margin-right: auto; }
.ex-clinician .clinician-actions { justify-content: center; }

/* =============================================================
   12 · DECISION · DEPTH GRID
   ============================================================= */
.ex-decision-grid { perspective: 1000px; }
.ex-decision-point {
  transform-style: preserve-3d;
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.ex-decision-point::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(200, 154, 132, 0) 0%, rgba(200, 154, 132, 0) 50%, rgba(200, 154, 132, 0.06) 100%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.ex-decision-point:hover {
  transform: translateZ(16px);
  background: rgba(200, 154, 132, 0.04);
}
.ex-decision-point:hover::after { opacity: 1; }

/* =============================================================
   14 · FINAL CTA · KINETIC
   ============================================================= */
.ex-final-display em {
  display: inline-block;
  position: relative;
}
.ex-final-display em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 900ms var(--ease-out);
}
.reveal.is-visible.ex-final-display em::after { transform: scaleX(1); }

/* =============================================================
   6 · CAPSULE REFINEMENTS — blueprint, engravings, spotlight, dose
   ============================================================= */

/* Blueprint backdrop fades in on reveal */
.ex-blueprint {
  opacity: 0;
  transition: opacity 1400ms var(--ease-out) 200ms;
}
.reveal.is-visible.ex-capsule-wrap .ex-blueprint { opacity: 1; }

/* Cross-section header ruler + foot-ruler · slight fade-in */
.ex-ruler, .ex-foot-ruler {
  opacity: 0;
  transition: opacity 900ms var(--ease-out) 600ms;
}
.reveal.is-visible.ex-capsule-wrap .ex-ruler,
.reveal.is-visible.ex-capsule-wrap .ex-foot-ruler { opacity: 1; }

/* Spotlight on active cluster — appears only when callout is active */
.ex-cap-spotlight {
  transition: opacity 420ms var(--ease-out);
}
.ex-capsule-wrap[data-active="hma"] .ex-cap-spotlight[data-spotlight="hma"],
.ex-capsule-wrap[data-active="chondroitin"] .ex-cap-spotlight[data-spotlight="chondroitin"],
.ex-capsule-wrap[data-active="boswellia"] .ex-cap-spotlight[data-spotlight="boswellia"],
.ex-capsule-wrap[data-active="mesoporosil"] .ex-cap-spotlight[data-spotlight="mesoporosil"] {
  opacity: 1;
}

/* Dose engravings — dim ambient navy, bright white on active */
.ex-engraving {
  color: rgba(15, 39, 68, 0.75);
  opacity: 0.45;
  transition: opacity 420ms var(--ease-out), color 420ms var(--ease-out), transform 420ms var(--ease-out);
  transform-origin: 690px 360px;
}
.reveal.is-visible.ex-capsule-wrap .ex-engraving { opacity: 0.7; }
.ex-capsule-wrap[data-active] .ex-engraving { opacity: 0.2; }
.ex-capsule-wrap[data-active="hma"] .ex-engraving[data-engraving="hma"],
.ex-capsule-wrap[data-active="chondroitin"] .ex-engraving[data-engraving="chondroitin"],
.ex-capsule-wrap[data-active="boswellia"] .ex-engraving[data-engraving="boswellia"],
.ex-capsule-wrap[data-active="mesoporosil"] .ex-engraving[data-engraving="mesoporosil"] {
  opacity: 1;
  color: var(--fg-1);
}

/* Refined callout internals — top row + dose composition */
.ex-callout-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}
.ex-callout-tag {
  font-family: var(--font-sans);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 3px 8px;
  border: 1px solid var(--hairline-soft);
  border-radius: 999px;
  background: rgba(244, 242, 238, 0.03);
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.ex-callout:hover .ex-callout-tag,
.ex-callout[data-active="true"] .ex-callout-tag {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(200, 154, 132, 0.08);
}

/* Dose row — large numeral + note */
.ex-callout-dose-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.ex-callout-dose-val {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--accent);
}
.ex-callout-dose-val--word {
  font-size: clamp(22px, 2vw, 26px);
  font-style: italic;
}
.ex-callout-dose-unit {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-left: 4px;
  vertical-align: baseline;
}
.ex-callout-dose-note {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* =============================================================
   9 · REVIEWS · FEATURED PRODUCT IMAGE STRIP
   ============================================================= */
.ex-reviews-feature {
  margin: var(--sp-7) auto var(--sp-8);
  max-width: 1100px;
  perspective: 1400px;
  transform-style: preserve-3d;
  transition: transform 360ms var(--ease-out);
}
.ex-reviews-feature-frame {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: var(--r-4);
  border: 1px solid var(--hairline);
  background: linear-gradient(135deg, var(--bv-navy-1000), var(--bv-navy-800));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
}
.ex-reviews-feature-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05);
  transition: transform 1400ms var(--ease-out);
}
.ex-reviews-feature:hover .ex-reviews-feature-img { transform: scale(1.04); }

.ex-reviews-feature-fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 0;
  text-align: center;
  padding: 24px;
  background: linear-gradient(135deg, var(--bv-navy-1000), var(--bv-navy-800));
}
.ex-reviews-feature-frame[data-no-image] .ex-reviews-feature-fallback { display: flex; }
.ex-reviews-feature-frame[data-no-image] .ex-reviews-feature-img { display: none; }
.ex-reviews-feature-img { position: relative; z-index: 1; }
.ex-reviews-feature-fallback .ex-fallback-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
}
.ex-reviews-feature-fallback .ex-fallback-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  color: var(--fg-1);
}
.ex-reviews-feature-fallback .ex-fallback-path {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
}

/* Editorial overlay caption */
.ex-reviews-feature-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: clamp(24px, 4vw, 56px);
  background: linear-gradient(180deg, rgba(10,28,51,0) 35%, rgba(10,28,51,0.55) 75%, rgba(10,28,51,0.85) 100%);
  z-index: 1;
}
.ex-reviews-feature-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  align-self: flex-start;
  padding: 6px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(10, 28, 51, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ex-reviews-feature-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(200, 154, 132, 0.18);
  animation: ex-status-pulse 2.4s ease-in-out infinite;
}
.ex-reviews-feature-quote {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--fg-1);
  margin: 0;
  max-width: 720px;
  text-wrap: balance;
}
.ex-reviews-feature-quote em {
  font-style: italic;
  color: var(--accent);
}
.ex-reviews-feature-byline {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-2);
}

@keyframes ex-status-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(200, 154, 132, 0.20); }
  50%      { box-shadow: 0 0 0 8px rgba(200, 154, 132, 0.05); }
}

@media (max-width: 767px) {
  .ex-reviews-feature-frame { aspect-ratio: 4 / 5; }
}


/* =============================================================
   CANONICAL RESPONSIVE LAYER · 1366 / 1200 / 1024 / 880 / 767
   Loaded last; refines + overrides earlier @media blocks.
   ============================================================= */

/* ----- 1366px · large-desktop trim ----- */
@media (max-width: 1366px) {
  .ex-hero-inner { gap: 32px; }
  .ex-hero-stage { min-height: 620px; }
  .ex-bottle-scene { max-width: 500px; }
  /* Make space for bigger specs by trimming hero typography */
  .display-hero, .ex-display { font-size: clamp(40px, 5.6vw, 78px); line-height: 1.02; }
  .ex-hero .hero-body { font-size: clamp(15px, 1.25vw, 16.5px); line-height: 1.62; }
  .ex-hero .hero-sub { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.45; }
  /* Specs · larger, sharper, easier to read */
  .ex-spec-card { padding: 14px 20px; min-width: 240px; }
  .ex-spec-name { font-size: 15.5px; line-height: 1.32; }
  .ex-spec-eyebrow { font-size: 10px; letter-spacing: 0.26em; }
  .ex-spec-dose { font-size: 11px; }
  /* Tighten spec spacing — specs follow bottle as stage shrinks */
  .ex-spec--top    { top: 20%; }
  .ex-spec--bottom { bottom: 20%; }
  .ex-capsule-stage { max-width: 1100px; }
  .ex-callout { width: clamp(220px, 22vw, 280px); padding: 16px 18px; }
  .ex-bridge-row { gap: 18px; }
  .ex-premium-split { gap: 64px; }
}

/* ----- 1200px · standard laptop / smaller desktop ----- */
@media (max-width: 1200px) {
  .container { padding-left: 32px; padding-right: 32px; }

  .ex-hero-stage { min-height: 620px; }
  .ex-bottle-scene { max-width: 460px; }
  /* Hero typography tightens further */
  .display-hero, .ex-display { font-size: clamp(38px, 5.2vw, 68px); }
  .ex-hero .hero-body { font-size: 16px; }
  .ex-hero .hero-sub { font-size: 16px; }
  /* Specs stay sharp — NO scale-transform (caused sub-pixel blur).
     Tighten by adjusting position + padding only. */
  .ex-spec-card { padding: 12px 16px; min-width: 220px; }
  .ex-spec-name { font-size: 14.5px; line-height: 1.3; }
  .ex-spec-eyebrow { font-size: 9.5px; letter-spacing: 0.24em; }
  .ex-spec-dose { font-size: 10.5px; }
  /* Push top/bottom further from mid so 3-line spec cards don't collide */
  .ex-spec--top    { top: 10%; }
  .ex-spec--bottom { bottom: 10%; }

  /* .ex-capsule-stage max-width is governed by the vertical-pill block
     earlier in this file (1200–768) — don't override it here. */
  .ex-callout-title { font-size: clamp(16px, 1.5vw, 19px); }
  .ex-callout-dose-val { font-size: clamp(24px, 2.4vw, 30px); }

  .ex-bridge-name { font-size: clamp(20px, 2.2vw, 26px); }
  .ex-bridge-real-quote { font-size: clamp(22px, 2.4vw, 30px); }

  .ex-premium-split { gap: 48px; }
  .ex-reviews-feature-quote { font-size: clamp(22px, 2.8vw, 34px); }

  .ex-chart-head-h { font-size: clamp(18px, 2vw, 24px); }

  /* Trust ribbon — give icon+text breathing room from the vertical separators */
  .ribbon-item { padding: 18px 24px; }
}

/* ----- 1024px · tablet landscape · first major reflow ----- */
@media (max-width: 1024px) {
  /* Overflow safety — guarantees nothing escapes the viewport on the right
     and that every section has equal left/right breathing room.
     `clip` (not `hidden`) so position:sticky still works downstream. */
  html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; }
  .section { overflow-x: clip; }
  .container,
  .container.container--wide { padding-left: 28px; padding-right: 28px; max-width: 100%; box-sizing: border-box; }
  /* Out-of-container hero sub-line gets matching gutter so it lines up with body content */
  .hero-soft-launch { padding-left: 28px; padding-right: 28px; box-sizing: border-box; }

  /* Hero — stage becomes grid: bottle on top, 3 specs as row below */
  .ex-hero-stage {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "bottle bottle bottle"
      "s1     s2     s3";
    column-gap: 16px;
    row-gap: 0;
    min-height: auto;
    padding: 24px 0 8px;
    perspective: var(--ex-perspective);
  }
  .ex-bottle-scene {
    grid-area: bottle;
    position: relative;
    top: auto; left: auto;
    margin: 0 auto;
    width: 60%;
    max-width: 360px;
  }
  /* Specs flip from absolute-edge to grid cells — column-reverse so the
     leader line sits ABOVE the card and connects up toward the bottle. */
  .ex-spec {
    position: relative;
    top: auto !important;
    bottom: auto !important;
    right: auto !important;
    transform: none !important;
    flex-direction: column-reverse;
    align-items: stretch;
    max-width: none;
    pointer-events: auto;
    gap: 4px;
  }
  .ex-spec--top    { grid-area: s1; }
  .ex-spec--mid    { grid-area: s2; }
  .ex-spec--bottom { grid-area: s3; }
  /* Vertical leader: line drops down from the bottle, dot lands just above
     the spec card. Markup is dot→line; column-reverse stacks line on top. */
  .ex-spec-leader {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    align-self: center;
    height: 44px;
    width: 1px;
    margin-bottom: 2px;
  }
  .ex-spec-line {
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, rgba(200, 154, 132, 0.05), var(--accent));
    animation: none;
  }
  .ex-spec-dot {
    margin: 0;
    width: 6px;
    height: 6px;
  }
  .ex-spec-card {
    min-width: 0;
    width: 100%;
    padding: 14px 16px;
    text-align: left;
    align-items: flex-start;
  }

  /* Critique chart · keep horizontal padding so 01 / mg / bars never touch
     the row border when the hover-active card lights up. */
  .ex-chart { padding: 28px; }
  .ex-chart-row { padding: 20px 18px; }
  .ex-bar-track { height: 26px; }

  /* Reviews · keep 2-col here (override home.css 1-col) ; mobile shifts to 1-col */
  .reviews-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .ex-reviews-feature-frame { aspect-ratio: 16 / 9; }

  /* Premium split · stack */
  .ex-premium-split { grid-template-columns: 1fr; gap: 48px; }
  .ex-premium-figure-frame { aspect-ratio: 4 / 3; max-width: 720px; margin: 0 auto; }
  .ex-premium-head { align-items: flex-start; }

  /* Bridge translation · 3-col → 1-col, override gap */
  .ex-bridge-row { grid-template-columns: 1fr; gap: 20px; padding: 36px 0; }
  .ex-bridge-arrow { height: 32px; justify-content: flex-start; }
  .ex-bridge-arrow-line { right: auto; width: 64px; }
  .ex-bridge-science { padding-left: 0; }
  .ex-bridge-real-quote { font-size: clamp(22px, 4vw, 28px); }

  /* Chat */
  .ex-chat { max-width: 100%; }

  /* Critique stats fix · keep 3-col here so home.css 1024 doesn't single-col yet */
  .critique-stats { grid-template-columns: repeat(3, 1fr); }
}

/* ----- 880px · tablet portrait ----- */
@media (max-width: 880px) {
  .container,
  .container.container--wide { padding-left: 24px; padding-right: 24px; }
  .hero-soft-launch { padding-left: 24px; padding-right: 24px; }

  /* Body & subhead copy — tighter line-height, smaller font (floor at 16px) */
  .hero-body { font-size: 16px; line-height: 1.55; }
  .hero-sub { font-size: 16px; line-height: 1.4; }
  .section-lead { font-size: 16px; line-height: 1.55; }
  .ex-bridge-lead { font-size: 16px; line-height: 1.55; }

  /* Hero compact — bottle smaller, specs stay as 3-up row but shrink */
  .ex-bottle-scene { max-width: 280px; }
  .ex-hero { padding-top: var(--sp-7); padding-bottom: var(--sp-7); }
  .ex-hero-stage { column-gap: 12px; row-gap: 28px; }
  /* Specs at 880 — keep readable; don't shrink below 13.5px */
  .ex-spec-card { padding: 12px 14px; gap: 6px; }
  .ex-spec-name { font-size: 13.5px; line-height: 1.3; }
  .ex-spec-eyebrow { font-size: 9px; letter-spacing: 0.22em; }
  .ex-spec-dose { font-size: 10px; letter-spacing: 0.18em; }

  /* Trust ribbon padding */
  .ribbon-item { padding: 24px 12px; }

  /* Founder portrait — no internal padding so the photo fills the frame
     and reads at considerable size on tablet/mobile. */
  .portrait-frame { padding: 0; max-width: 420px; }

  /* Reviews · feature aspect 16:10 */
  .ex-reviews-feature-frame { aspect-ratio: 16 / 10; }
  .ex-reviews-feature-overlay { padding: 28px; }

  /* Chat header compact */
  .ex-chat-header { padding: 14px 16px; }
  .ex-chat-thread { padding: 22px 18px; }
  .ex-chat-suggestions { padding: 12px 16px 14px; }

  /* Decision points compact */
  .ex-decision-point { padding: var(--sp-6) var(--sp-4); }

  /* Premium pillar list rows tighter */
  .ex-premium-row { padding: 22px 0; }
}

/* ----- 767px · mobile ----- */
@media (max-width: 767px) {
  .container,
  .container.container--wide { padding-left: 20px; padding-right: 20px; }
  .hero-soft-launch { padding-left: 20px; padding-right: 20px; }
  .section { padding-top: var(--sp-7); padding-bottom: var(--sp-7); }

  /* Typography compaction · body floor stays at 16px */
  .display-hero, .ex-display { font-size: clamp(40px, 11vw, 60px); line-height: 1.05; }
  .display-2 { font-size: clamp(28px, 8vw, 40px); line-height: 1.1; }
  .display-3 { font-size: clamp(22px, 6vw, 30px); }
  .hero-body { font-size: 16px; line-height: 1.55; }
  .hero-sub { font-size: 16px; line-height: 1.4; }

  /* Hero — bottle smaller, specs hide entirely (too cramped on mobile) */
  .ex-bottle-scene { max-width: 220px; width: 80%; }
  .ex-hero-stage {
    grid-template-columns: 1fr;
    grid-template-areas: "bottle";
    row-gap: 0;
  }
  .ex-spec { display: none !important; }
  .hero-ctas { flex-direction: column; gap: 12px; width: 100%; }
  .hero-ctas .btn { width: 100%; }
  .hero-meta { justify-content: center; flex-wrap: wrap; gap: 10px; }

  /* Trust ribbon · 1-col stack */
  .ribbon-grid { grid-template-columns: 1fr !important; }
  .ribbon-item {
    border-right: 0 !important;
    border-bottom: 1px solid var(--hairline-soft);
    padding: 18px 12px;
  }
  .ribbon-item:last-child { border-bottom: 0; }

  /* Problem moments tighter grid */
  .ex-moment { grid-template-columns: 36px 36px 1fr; gap: 14px; padding: 18px 0; }
  .ex-moment-icon { width: 36px; height: 36px; }
  .ex-moment-text { font-size: clamp(17px, 5.2vw, 22px); }

  /* Critique chart compact */
  .ex-chart { padding: 18px; }
  .ex-chart-hint { font-size: 9px; padding: 8px 14px 8px 10px; letter-spacing: 0.18em; }
  .ex-chart-head { flex-direction: column; gap: 12px; align-items: flex-start; }
  .ex-chart-head-h { font-size: clamp(16px, 4.5vw, 22px); }
  /* Legend wraps to second line at 320px so it never escapes the card */
  .ex-chart-legends { gap: 12px 18px; flex-wrap: wrap; white-space: normal; }
  /* Row keeps internal padding so 01 / mg / bars don't touch the hover border */
  .ex-chart-row { padding: 20px 16px; }
  .ex-bar-track { height: 22px; }
  /* MG values · bigger so they read clearly on small screens */
  .ex-bar-pct { font-size: 14px; }
  .ex-bar-pct--text { font-size: 14px; }

  /* Capsule */
  .ex-capsule-stage { max-width: 100%; }
  .ex-callout { padding: 14px 16px; }
  .ex-callout-top { gap: 8px; }
  .ex-callout-tag { font-size: 8px; padding: 2px 6px; }
  .ex-callout-title { font-size: 16px; }
  .ex-callout-dose-val { font-size: 22px; }
  .ex-callout-dose-note { font-size: 9px; }
  .ex-callout-role { font-size: 12px; }

  /* Bridge · single col compact */
  .ex-bridge-row { padding: 28px 0; gap: 14px; }
  .ex-bridge-name { font-size: clamp(20px, 6vw, 26px); }
  .ex-bridge-real-quote { font-size: clamp(20px, 5.5vw, 26px); }
  .ex-bridge-real-body { font-size: 14px; }
  .ex-bridge-dose { font-size: 10px; padding: 5px 10px; }

  /* Lifestyle timeline */
  .ex-timeline { padding-left: 44px; }
  .ex-timeline-track { left: 19px; }

  /* Reviews · 1-col */
  .reviews-grid { grid-template-columns: 1fr; }
  .ex-reviews-feature-frame { aspect-ratio: 4 / 5; }
  .ex-reviews-feature-overlay { padding: 20px; gap: 8px; }
  .ex-reviews-feature-quote { font-size: clamp(18px, 5.5vw, 24px); }
  .ex-reviews-feature-eyebrow { font-size: 9px; padding: 5px 12px; }
  .ex-rating-block {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
    justify-items: center;
  }
  .ex-rating-breakdown { width: 100%; }

  /* Premium pillar list rows */
  .ex-premium-row { gap: 14px; padding: 18px 0; }
  .ex-premium-row-num { font-size: 14px; }
  .ex-premium-row-title { font-size: 17px; }
  .ex-premium-row-text { font-size: 13.5px; }

  /* Chat compact */
  .ex-chat-thread { min-height: 220px; max-height: 380px; padding: 18px 14px; }
  .ex-chat-msg { max-width: 100%; }
  .ex-chat-msg-text { font-size: 13.5px; padding: 12px 14px; }
  .ex-chat-header { padding: 12px 14px; }
  .ex-chat-suggestions { padding: 12px 14px 14px; }
  .ex-chat-input { padding: 10px 10px; }
  .ex-chat-input input { font-size: 13.5px; padding: 12px 0; }
  .ex-chat-input-counter { display: none; }
  .ex-chat-send { width: 42px; }
  .ex-chat-chips { gap: 6px; }
  .ex-chat-chip { font-size: 11px; padding: 6px 10px; }

  /* Decision · 1-col, kill all right borders */
  .ex-decision-grid { grid-template-columns: 1fr; }
  .ex-decision-point { padding: var(--sp-5) var(--sp-3); }

  /* Final CTA */
  .final-ctas { flex-direction: column; gap: 10px; }
  .final-ctas .btn { width: 100%; }
}

/* =============================================================
   PREFER REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .orbit-ring, .ex-orbit-ring, .ex-bottle-glow, .orb-pulse,
  .ex-chat-avatar-pulse, .ex-chat-status-dot, .ex-chat-typing-dot,
  .ex-reviews-feature-dot { animation: none !important; }
  .ex-bottle-scene { transform: none !important; }
  .ex-body, .ex-body a, .ex-body button { cursor: auto; }
  .cursor-halo { display: none; }
  .grain { display: none; }
}