/* ═══════════════════════════════════════════════════════════════
   TAO Clean — PDP sections (everything below the hero)
   All color derives from the theme custom properties set by main.js,
   so every section re-dresses itself with the colorway picker.
   ═══════════════════════════════════════════════════════════════ */

/* ── shared scaffolding ──────────────────────────────────────── */
.sec-inner { width: min(1140px, 100%); margin: 0 auto; }
.press, .problem, .how, .science, .lab, .pros, .whiter, .gentle, .fix,
.stories, .compare, .details, .colorshop, .manifesto, .promise, .reviews,
.heads, .box, .specs, .certs, .story, .faq, .finale, .signup {
  padding: clamp(52px, 7.5vh, 92px) clamp(16px, 4vw, 56px);
}
.certs { padding-block: clamp(44px, 6vh, 72px); }
/* specs card and FAQ read as one run of "the details" — half rhythm between them */
.specs { padding-bottom: clamp(26px, 3.5vh, 44px); }
.faq { padding-top: clamp(26px, 3.5vh, 44px); }
/* sections whose base padding lives in site.css, brought onto the same rhythm:
   .about/.demo ships 0 top + 140px bottom; the feature card otherwise sits a
   sliver above the press band; trust gets pinched between sonic and whiter */
.about.demo { padding-block: clamp(52px, 7.5vh, 92px); }
.features { padding-bottom: clamp(44px, 6vh, 72px); }
.trust { padding-top: clamp(26px, 4vh, 52px); padding-bottom: clamp(48px, 7vh, 88px); }

/* alternating tinted bands give neighbouring sections an edge */
.sec-tint {
  background: color-mix(in srgb, var(--ink) 4%, var(--bg-2));
  border-block: 1px solid var(--hairline);
  transition: background-color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
}

.press h2, .problem h2, .how h2, .science h2, .lab h2, .pros h2, .whiter h2,
.gentle h2, .fix h2, .stories h2, .compare h2, .details h2, .colorshop h2,
.promise h2, .rev-meta h2, .heads h2, .box h2, .certs h2, .vtest h2,
.story h2, .faq h2, .finale h2, .signup h2 {
  font-size: clamp(32px, 3.9vw, 50px);
  font-weight: 580;
  letter-spacing: -.018em;
  line-height: 1.08;
  margin-bottom: 14px;
  text-wrap: balance;
}
.sec-head { max-width: 780px; margin: 0 auto clamp(36px, 5vh, 56px); text-align: center; }
.sec-head-slim { margin-bottom: clamp(26px, 4vh, 40px); }
.sec-sub {
  font-size: 18px; line-height: 1.6;
  color: var(--muted);
  transition: color var(--theme-fade) var(--ease);
}
.disclosure {
  font-size: 12.5px; color: var(--muted);
  margin-top: 22px;
  transition: color var(--theme-fade) var(--ease);
}
.disclosure-center { text-align: center; }

/* checked bullet lists */
.check-list { list-style: none; display: grid; gap: 12px; margin-top: 22px; }
.check-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 16.5px; line-height: 1.5;
}
.check-list svg {
  width: 19px; height: 19px; flex: 0 0 auto; margin-top: 3px;
  color: var(--accent-strong, var(--accent));
  transition: color var(--theme-fade) var(--ease);
}
.check-grid { grid-template-columns: 1fr 1fr; gap: 14px 34px; max-width: 880px; margin-inline: auto; }

/* CTA block */
.cta-block { text-align: center; margin-top: clamp(34px, 5vh, 52px); }
.cta-block.cta-left { text-align: left; }
.cta-micro {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px;
  margin-top: 14px;
  font-size: 14px; color: var(--muted);
  transition: color var(--theme-fade) var(--ease);
}
.cta-left .cta-micro { justify-content: flex-start; }
.cta-micro svg { width: 15px; height: 15px; color: var(--accent-strong, var(--accent)); }
.btn-big { font-size: 18.5px; padding: 18px 34px; border-radius: 14px; }
/* add-to-cart buttons (mock): button reset + divider dot */
button.btn-primary, button.btn-cart { appearance: none; border: 0; cursor: pointer; font-family: inherit; }
.js-atc .atc-div { width: 1px; height: 20px; background: color-mix(in srgb, var(--accent-ink) 38%, transparent); margin: 0 2px; }
.js-atc svg { width: 20px; height: 20px; }
button.text-link.js-atc { appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; }
.js-atc.added { filter: saturate(1.15); }

/* dark derived band: goes near-black on light themes, deepens dark ones */
.band-dark {
  --d-ink: #f2f5f8;
  --d-muted: rgba(235, 240, 246, .62);
  --d-accent: color-mix(in srgb, var(--accent) 40%, #fff);
  --d-hairline: rgba(255, 255, 255, .14);
  background: color-mix(in srgb, var(--bg-2) 26%, #05070b);
  color: var(--d-ink);
  transition: background-color var(--theme-fade) var(--ease);
}
.band-dark .eyebrow { color: var(--d-accent); }
.band-dark .sec-sub { color: var(--d-muted); }

/* scroll reveal (enabled only when pdp.js is running) */
html.rv-enabled [data-rv] {
  opacity: 0;
  translate: 0 20px;
  transition: opacity .75s var(--ease), translate .75s var(--ease);
  transition-delay: var(--rvd, 0s);
}
html.rv-enabled .rv-in { opacity: 1; translate: 0 0; }
/* content already in view on load appears instantly — reveals are for
   scrolling INTO things, not for the first paint */
html.rv-enabled .rv-noanim { transition: none; }

/* press-band textures hold until their medallion has fully faded in,
   then bloom in behind it */
html.rv-enabled .pstat[data-rv] .tex {
  opacity: 0;
  transition: opacity .9s var(--ease), fill var(--theme-fade) var(--ease);
  transition-delay: calc(var(--rvd, 0s) + .8s), 0s;
}
html.rv-enabled .pstat.rv-in .tex { opacity: 1; }
html.rv-enabled .pstat.rv-noanim .tex { transition: none; }

/* two-layer crossfade: new image fades IN while the old fades OUT, on
   the exact same clock and easing as every theme color transition */
.xfade { position: relative; }
.xfade img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: opacity var(--theme-fade) var(--ease);
}
.xfade .xb { opacity: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ── S3 press band ───────────────────────────────────────────── */
.press { text-align: center; padding-block: clamp(52px, 7.5vh, 88px); }
.press-inner { width: min(1080px, 100%); margin: 0 auto; }
.press-kicker {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  font-size: 13.5px; font-weight: 620; letter-spacing: .26em; text-transform: uppercase;
  color: var(--d-accent);
  margin-bottom: 26px;
}
.pk-rule {
  height: 1px; width: clamp(36px, 11vw, 150px);
  background: linear-gradient(to left, rgba(255,255,255,.28), transparent);
}
.pk-rule-r { background: linear-gradient(to right, rgba(255,255,255,.28), transparent); }

/* glass rail holding the wordmarks */
.press-panel {
  display: flex; align-items: center;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 24px;
  background: linear-gradient(165deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 18px 44px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: clamp(22px, 3vw, 34px) clamp(8px, 1.5vw, 18px);
  margin-bottom: clamp(40px, 6vh, 60px);
}
.pm {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  color: var(--d-ink);
  border-left: 1px solid rgba(255, 255, 255, .09);
  min-height: 44px;
}
.pm:first-child { border-left: 0; }
.pm svg { height: var(--lh, 26px); width: auto; display: block; }
.pm-today svg  { --lh: clamp(44px, 4.2vw, 56px); }
.pm-people svg { --lh: clamp(22px, 2.2vw, 28px); }
.pm-allure svg { --lh: clamp(22px, 2.2vw, 28px); }
.pm-vogue svg  { --lh: clamp(19px, 1.9vw, 24px); }
.pm-rstone svg { --lh: clamp(22px, 2.2vw, 28px); }

/* stats with animated textures behind glass medallions */
.press-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--d-hairline);
  padding-top: clamp(26px, 4vh, 40px);
}
.pstat { position: relative; padding: 0 12px; }
.pstat + .pstat { border-left: 1px solid var(--d-hairline); }
.pstat-stage {
  position: relative;
  height: 150px;
  display: grid; place-items: center;
  margin-bottom: 14px;
}
.pstat-medal {
  position: relative; z-index: 2;
  width: 96px; height: 96px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 14px 30px rgba(0,0,0,.30);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--d-accent);
}
.pstat-medal svg { width: 38px; height: 38px; }
/* the palm reads lighter than cart/star at equal size — bump to match visual weight */
.pstat-medal.pm-palm svg { width: 44px; height: 44px; }
.tex { position: absolute; left: 50%; top: 50%; translate: -50% -50%; pointer-events: none; }
/* halftone dots: each dot occasionally pings bright — orders coming in */
.tex-dots { width: min(330px, 110%); height: 150px; fill: var(--d-accent); animation: texDrift 14s ease-in-out infinite alternate;
  transition: fill var(--theme-fade) var(--ease); }
.tex-dots circle {
  opacity: .26;
  transform-box: fill-box;
  transform-origin: center;
  animation: dotPing 11s ease-in-out infinite;
  /* NEGATIVE delay = each dot starts partway through its cycle, so the
     field twinkles from the first visible moment (the ping keyframe
     sits at 91%, so positive delays meant a 10-21s dead zone) */
  animation-delay: calc(var(--pd, 0s) * -1);
}
@keyframes dotPing {
  0%, 88%, 100% { opacity: .26; transform: scale(1); }
  91% { opacity: 1; transform: scale(1.6); }
  95% { opacity: .45; transform: scale(1); }
}
@keyframes texDrift { from { transform: translateX(-5px); } to { transform: translateX(5px); } }
/* sonic rings: slow expanding pulses */
.tex-rings { width: 240px; height: 240px; }
.pr {
  fill: none; stroke: var(--d-accent); stroke-width: 1;
  transition: stroke var(--theme-fade) var(--ease);
  transform-origin: 130px 130px;
  opacity: 0;
  animation: ringPulse 5.4s cubic-bezier(.2, .45, .45, 1) infinite;
}
.pr2 { animation-delay: 1.8s; }
.pr3 { animation-delay: 3.6s; }
@keyframes ringPulse {
  0% { transform: scale(.5); opacity: 0; }
  22% { opacity: .42; }
  100% { transform: scale(1.06); opacity: 0; }
}
/* golden-hour halo + slowly wheeling rays for California */
.tex-sun { width: 240px; height: 240px; }
.sun-halo {
  fill: none; stroke: var(--d-accent); stroke-width: 1;
  transition: stroke var(--theme-fade) var(--ease);
  opacity: .25;
  transform-origin: 130px 130px;
  animation: haloPulse 6.5s ease-in-out infinite;
}
@keyframes haloPulse { 0%, 100% { opacity: .14; transform: scale(.96); } 50% { opacity: .38; transform: scale(1.03); } }
.sun-rays { transform-origin: 130px 130px; animation: sunSpin 80s linear infinite; }
.sr line { stroke: var(--d-accent); stroke-width: 1; stroke-linecap: round; opacity: .3;
  transition: stroke var(--theme-fade) var(--ease); }
@keyframes sunSpin { to { transform: rotate(360deg); } }

.pstat strong {
  display: block;
  font-size: clamp(27px, 3vw, 38px);
  font-weight: 620; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--d-ink);
}
.ps-label {
  display: block; margin-top: 4px;
  font-size: 12.5px; font-weight: 560; letter-spacing: .18em; text-transform: uppercase;
  color: var(--d-accent);
}
.ps-over {
  display: block;
  font-size: 12.5px; font-weight: 560; letter-spacing: .18em; text-transform: uppercase;
  color: var(--d-accent);
  /* optical align: drop the small caps to the big numerals' cap line
     (padding, not margin — a margin would collapse into the stage's) */
  padding-top: clamp(4px, .5vw, 7px);
  margin-bottom: 4px;
}
.pstat .ps-word {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 460; letter-spacing: .2em; text-transform: uppercase;
  color: var(--d-ink);
}

/* ── S4 demo (reuses .about video frame) ─────────────────────── */


/* ── S5 problem: cinematic scene, fixed slate-teal to match the plate ── */
.problem {
  position: relative;
  overflow: hidden;
  /* the band paints each scene's own left-edge color (sampled per image,
     set by pdp.js) so the photo dissolves into it with no color shift */
  background-color: var(--p-scene, #0e1c1e);
  --p-ink: #eef4f2;
  --p-muted: rgba(226, 233, 231, .68);
  --p-mint: color-mix(in srgb, var(--accent) 45%, #fff);
  --p-line: rgba(255, 255, 255, .14);
  color: var(--p-ink);
  padding-block: clamp(64px, 9vh, 108px);
  transition: background-color var(--theme-fade) var(--ease);
}
.problem::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(128deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 28%, rgba(0,0,0,.16) 68%, rgba(0,0,0,.26) 100%);
  pointer-events: none;
}
.problem .eyebrow { color: var(--p-mint); }
.problem-stage {
  position: absolute; right: 0; top: 0;
  height: 100%; width: min(58%, 920px);
  mask-image: linear-gradient(to left, #000 74%, transparent 100%);
  -webkit-mask-image: linear-gradient(to left, #000 74%, transparent 100%);
}
.problem-scene { width: 100%; height: 100%; }
.problem-scene img { object-fit: cover; object-position: right center; }
.problem-scene video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: right center;
  opacity: 0;
  transition: opacity var(--theme-fade) var(--ease);
}
.scene-pause {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(8, 12, 12, .45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff; cursor: pointer;
  display: grid; place-items: center;
  opacity: .7;
  transition: opacity .2s var(--ease);
}
.scene-pause:hover { opacity: 1; }
.scene-pause svg { width: 15px; height: 15px; }
.scene-pause[hidden] { display: none; }
/* the MythBusters card, in type instead of pixels */
.plume-quote {
  position: absolute;
  top: clamp(24px, 4.5vh, 52px); right: clamp(18px, 3vw, 52px);
  width: min(380px, 78%);
  padding: 24px 28px 0;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(16, 29, 27, .72), rgba(11, 21, 19, .58));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #eef4f2;
}
.pq-over {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 620;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--p-mint);
}
.pq-over svg { width: 15px; height: 15px; flex: 0 0 auto; }
.pq-big {
  font-family: Didot, 'Bodoni 72', Georgia, serif;
  font-size: clamp(42px, 4.4vw, 62px);
  font-weight: 500; line-height: 1; letter-spacing: .005em;
  color: #fff;
  margin: 10px 0 6px;
  font-variant-numeric: lining-nums;
}
.pq-big em {
  font-style: italic;
  font-size: .62em;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .92);
}
.pq-sub { font-size: 15px; line-height: 1.45; color: rgba(222, 233, 229, .78); }
.pq-cite {
  margin-top: 18px;
  padding: 12px 0 14px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 560;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(222, 233, 229, .55);
}
.pq-cite svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--p-mint); opacity: .8; }
.pq-cite svg + svg { margin-left: -2px; }
.pq-cite span { padding-top: 1px; }
.problem-inner { position: relative; z-index: 2; width: min(1140px, 100%); margin: 0 auto; }
.problem-copy { max-width: 500px; }
.problem h2 { margin-bottom: 18px; font-size: clamp(28px, 3vw, 40px); }
.problem h2 em { font-style: normal; color: var(--p-mint); }
.problem-lead {
  font-size: 16.5px; line-height: 1.65;
  color: var(--p-muted);
  padding-bottom: 26px;
  border-bottom: 1px solid var(--p-line);
}
.pfacts { display: grid; gap: 22px; margin: 26px 0 30px; }
.pfact { display: flex; gap: 16px; align-items: flex-start; }
.pf-ic {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--p-line);
  background: rgba(255, 255, 255, .05);
  color: var(--p-mint);
}
.pf-ic svg { width: 21px; height: 21px; }
.pfact h3 { font-size: 17.5px; font-weight: 580; margin-bottom: 4px; }
.pfact p { font-size: 14px; line-height: 1.55; color: var(--p-muted); max-width: 34ch; }
.problem-callout {
  display: flex; align-items: center; gap: 15px;
  border: 1px solid var(--p-line);
  background: rgba(255, 255, 255, .055);
  border-radius: 16px;
  padding: 17px 20px;
  max-width: 420px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.pc-ic {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(169, 217, 196, .14);
  color: var(--p-mint);
}
.pc-ic svg { width: 21px; height: 21px; }
.problem-callout p { font-size: 14px; line-height: 1.55; color: var(--p-ink); }
/* the resolution line earns gold */
.callout-gold {
  border-color: rgba(219, 186, 122, .55);
  background: linear-gradient(120deg, rgba(219, 186, 122, .17), rgba(219, 186, 122, .06));
  box-shadow: 0 10px 34px rgba(219, 186, 122, .13), inset 0 1px 0 rgba(255, 255, 255, .09);
}
.callout-gold .pc-ic { background: rgba(219, 186, 122, .22); color: #ecd5a4; }
.callout-gold p { font-size: 14.5px; font-weight: 490; color: #f6eedd; }

/* ── S6 how it works — brush · dock · done video cards ───────── */
.vsteps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
}
.vstep { display: flex; flex-direction: column; }
.vstep-media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--surface);
  border: 1px solid var(--hairline);
  transition: border-color var(--theme-fade) var(--ease);
}
.vstep-vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.vstep-copy {
  display: flex; align-items: baseline; gap: 14px;
  padding: 18px 4px 0;
}
.vstep-n {
  font-size: 20px; font-weight: 600;
  color: var(--accent-strong, var(--accent));
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  flex: 0 0 auto;
  transition: color var(--theme-fade) var(--ease);
}
.vstep-copy h3 { font-size: 22px; font-weight: 580; margin: 0 0 5px; }
.vstep-copy p {
  font-size: 15px; line-height: 1.5; color: var(--muted);
  transition: color var(--theme-fade) var(--ease);
}

.ready-band {
  margin-top: clamp(46px, 7vh, 74px);
  padding-top: clamp(30px, 4.4vh, 46px);
  border-top: 1px solid var(--hairline);
  text-align: center;
  transition: border-color var(--theme-fade) var(--ease);
}
.ready-eyebrow {
  font-size: 12.5px; font-weight: 620; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-strong, var(--accent));
  margin-bottom: 14px;
  transition: color var(--theme-fade) var(--ease);
}
.ready-lead {
  font-size: clamp(21px, 2.6vw, 30px);
  font-weight: 560; letter-spacing: -.012em; margin-bottom: 8px;
}
.ready-sub {
  font-size: clamp(16px, 1.9vw, 20px);
  font-weight: 430; color: var(--muted);
  transition: color var(--theme-fade) var(--ease);
}
@media (max-width: 720px) {
  .vsteps { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}

/* ── pull quote — open, under the film ───────────────────────── */
.pullq {
  padding: 0 clamp(20px, 5vw, 64px) clamp(48px, 7vh, 84px);
  text-align: center;
}
.pq-glyph {
  display: block;
  font-size: clamp(44px, 5vw, 60px);
  font-weight: 700; line-height: .9;
  color: var(--accent-strong, var(--accent));
  margin-bottom: 2px;
  transition: color var(--theme-fade) var(--ease);
}
.pq-l1 {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(20px, 4vw, 56px);
}
.pq-l1 > span:nth-child(2) { white-space: nowrap; }
.pq-rule {
  flex: 0 1 200px; height: 1px;
  background: color-mix(in srgb, var(--accent-strong, var(--accent)) 38%, transparent);
  transition: background-color var(--theme-fade) var(--ease);
}
.pq-l1, .pq-l2 {
  font-size: clamp(23px, 2.9vw, 34px);
  font-weight: 600; letter-spacing: -.015em; line-height: 1.35;
}
.pq-l2 {
  color: var(--accent-strong, var(--accent));
  transition: color var(--theme-fade) var(--ease);
}

/* ── S7 science ──────────────────────────────────────────────────────── */
.science-inner {
  width: min(1140px, 100%); margin: 0 auto;
  display: grid; grid-template-columns: 1.08fr .92fr;
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}
.sci-lead {
  display: flex; align-items: center; gap: 15px;
  margin: 22px 0 0;
  padding-bottom: 26px; border-bottom: 1px solid var(--hairline);
  font-size: 18px; line-height: 1.5;
  color: var(--muted);
  transition: color var(--theme-fade) var(--ease);
}
.sci-lead strong { color: var(--ink); font-weight: 620; }
.sci-lead em { font-style: normal; font-weight: 640; color: var(--accent-strong, var(--accent)); }
.sci-lead-ic {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid var(--hairline); display: grid; place-items: center;
  color: var(--accent-strong, var(--accent));
}
.sci-lead-ic svg { width: 25px; height: 25px; }
.sci-grid {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px 14px; padding: 26px 0 0; margin: 0 0 28px;
}
.sci-grid li { text-align: center; }
.sci-ic {
  width: 58px; height: 58px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--accent-strong, var(--accent)) 55%, transparent);
  display: grid; place-items: center; margin: 0 auto 12px;
  color: var(--accent-strong, var(--accent));
  transition: color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
}
.sci-ic svg { width: 26px; height: 26px; }
.sci-grid h3 { font-size: 15.5px; font-weight: 620; line-height: 1.3; margin-bottom: 6px; }
.sci-grid p { font-size: 13.5px; line-height: 1.45; color: var(--muted); transition: color var(--theme-fade) var(--ease); }
.sci-pill {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  border: 1px solid var(--hairline); border-radius: 14px;
  padding: 15px 20px;
  font-size: 16.5px;
  background: var(--surface-strong);   /* same porcelain as the lab cards below */
  transition: border-color var(--theme-fade) var(--ease), background-color var(--theme-fade) var(--ease);
}
body[data-mode="dark"] .sci-pill { background: color-mix(in srgb, var(--bg-2) 26%, #05070b); }
.sci-pill svg { width: 19px; height: 19px; flex: 0 0 auto; }
.sci-pill strong { font-weight: 620; }
.sci-pill em { font-style: normal; font-weight: 600; color: var(--accent-strong, var(--accent)); }
.sci-media { position: relative; margin: 0; }
.sci-media video {
  display: block; width: 100%; height: auto;
  border-radius: 26px; border: 1px solid var(--hairline);
  box-shadow: 0 22px 54px rgba(0, 0, 0, .18);
}
.sci-badge {
  position: absolute; top: -18px; right: -14px;
  width: 110px; height: 110px; border-radius: 50%;
  /* UV light: violet-blue glow to match the chamber footage it overlaps */
  background: radial-gradient(circle at 35% 28%, #9d8bff, #6a53ee 55%, #4634c9 100%);
  border: 1px solid rgba(255, 255, 255, .4);
  display: grid; place-content: center; justify-items: center; gap: 7px;
  text-align: center;
  font-size: 10.5px; font-weight: 620; letter-spacing: .13em; text-transform: uppercase; line-height: 1.5;
  color: #fff;
  text-shadow: 0 1px 6px rgba(40, 20, 140, .45);
  box-shadow: 0 10px 30px rgba(94, 70, 235, .45), 0 0 22px rgba(124, 100, 255, .35);
}
.sci-badge svg { width: 23px; height: 23px; color: #fff; filter: drop-shadow(0 0 5px rgba(255, 255, 255, .6)); }
@media (max-width: 640px) {
  .sci-grid { grid-template-columns: repeat(2, 1fr); }
  .sci-badge { right: 4px; }
}

/* ── S8 lab results — three stacked report cards ─────────────── */
/* tokens live on the section: porcelain cards on light colorways,
   derived dark cards on dark ones; the microbe line icons recolor
   through --lab-ic1/2, so no raster assets are involved */
.lab {
  --d-ink: var(--ink);
  --d-muted: var(--muted);
  --d-accent: var(--accent-strong, var(--accent));
  --d-hairline: var(--hairline);
  --lab-card: var(--surface-strong);
  --lab-line: var(--hairline);
  --lab-fill: color-mix(in srgb, var(--ink) 3%, transparent);
  --lab-ic1: var(--accent-strong, var(--accent));
  --lab-ic2: color-mix(in srgb, var(--accent-strong, var(--accent)) 45%, var(--muted));
}
body[data-mode="dark"] .lab {
  --d-ink: #f2f5f8;
  --d-muted: rgba(235, 240, 246, .62);
  --d-accent: color-mix(in srgb, var(--accent) 40%, #fff);
  --d-hairline: rgba(255, 255, 255, .14);
  --lab-card: color-mix(in srgb, var(--bg-2) 26%, #05070b);
  --lab-line: rgba(255, 255, 255, .12);
  --lab-fill: rgba(255, 255, 255, .04);
  --lab-ic1: color-mix(in srgb, var(--accent) 40%, #fff);
  --lab-ic2: color-mix(in srgb, var(--accent) 28%, #8b949c);
}
.lab-hero, .lab-path, .lab-cert {
  background: var(--lab-card);
  border: 1px solid var(--lab-line);
  border-radius: 28px;
  color: var(--d-ink);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: background-color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease),
              color var(--theme-fade) var(--ease);
}
.lab-hero + .lab-path, .lab-path + .lab-cert { margin-top: clamp(14px, 2vh, 22px); }

/* card 1: claim + giant number */
.lab-hero {
  display: grid; grid-template-columns: 1.35fr auto;
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
  padding: clamp(26px, 4vw, 52px) clamp(22px, 4vw, 56px);
}
.lab-badge {
  display: inline-flex; align-items: center; gap: 9px;
  width: fit-content;
  font-size: 12px; font-weight: 630; letter-spacing: .14em; text-transform: uppercase;
  color: var(--d-accent);
  border: 1px solid var(--lab-line);
  border-radius: 999px;
  padding: 8px 16px;
  margin-bottom: clamp(16px, 2.4vh, 26px);
  transition: color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
}
.lab-badge svg { width: 15px; height: 15px; flex: 0 0 auto; }
.lab-hero h2 { font-size: clamp(27px, 2.9vw, 40px); margin-bottom: 14px; }
.lab-sub {
  font-size: 16.5px; line-height: 1.6;
  color: var(--d-muted);
  max-width: 520px;
  transition: color var(--theme-fade) var(--ease);
}
.lab-stat {
  text-align: center;
  padding-left: clamp(26px, 3.5vw, 56px);
  border-left: 1px solid var(--lab-line);
}
.ls-wrap { position: relative; display: inline-block; }
.ls-num {
  display: block;
  font-size: clamp(56px, 6.5vw, 92px);
  font-weight: 640; letter-spacing: -.03em; line-height: 1;
  background: linear-gradient(135deg, var(--d-accent), color-mix(in srgb, var(--d-accent) 55%, var(--d-ink)));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.ls-num span { font-size: .5em; font-weight: 560; }
.ls-spark {
  position: absolute; top: -14px; right: -30px;
  width: 34px; height: 48px;
  fill: var(--d-accent);
  transition: fill var(--theme-fade) var(--ease);
}
.lab-stat-cap {
  display: block; margin-top: 8px;
  font-size: 12.5px; font-weight: 620; letter-spacing: .15em; text-transform: uppercase;
  color: var(--d-ink);
}
.lab-power {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 18px;
  padding: 9px 16px;
  border: 1px solid var(--lab-line);
  border-radius: 999px;
  font-size: 12px; font-weight: 630; letter-spacing: .15em; text-transform: uppercase;
  color: var(--d-accent);
  transition: color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
}
/* a live little UV LED */
.lab-led {
  width: 9px; height: 9px; flex: 0 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, #b9e0ff 55%, #7db6f0);
  box-shadow: 0 0 6px 1.5px rgba(125, 182, 240, .9), 0 0 16px 4px rgba(125, 182, 240, .45);
  animation: ledGlow 2.6s ease-in-out infinite alternate;
}
@keyframes ledGlow {
  from { box-shadow: 0 0 5px 1px rgba(125, 182, 240, .75), 0 0 12px 3px rgba(125, 182, 240, .35); }
  to   { box-shadow: 0 0 7px 2px rgba(125, 182, 240, 1), 0 0 20px 6px rgba(125, 182, 240, .55); }
}

/* card 2: the pathogen board */
.lab-path { padding: clamp(24px, 3.4vw, 40px) clamp(18px, 3vw, 40px); }
.lab-eyebrow {
  font-size: 12.5px; font-weight: 630; letter-spacing: .16em; text-transform: uppercase;
  color: var(--d-accent);
  text-align: center;
  margin: 0 0 clamp(20px, 3vh, 30px);
  transition: color var(--theme-fade) var(--ease);
}
.lab-grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.lab-grid-4 { grid-template-columns: repeat(4, 1fr); max-width: 760px; margin-inline: auto; }

/* ── pathogen carousel (paginated) ───────────────────────────── */
.lab-carousel {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(6px, 1.5vw, 20px);
  max-width: 820px; margin: 0 auto;
}
.lp-viewport { overflow: hidden; display: grid; }
.lp-track { display: grid; }
.lp-page {
  grid-area: 1 / 1;                    /* both pages share one cell, stacked */
  display: grid; grid-template-columns: repeat(4, 1fr);
}
/* "microscope focus": cards resolve out of a blur, staggered, when their
   page is active AND the board has scrolled into view */
.lp-item:nth-child(1) { --i: 0; }
.lp-item:nth-child(2) { --i: 1; }
.lp-item:nth-child(3) { --i: 2; }
.lp-item:nth-child(4) { --i: 3; }
.lp-item { opacity: 0; }                 /* hidden until its page enters */
.lp-page:not(.is-active) .lp-item { pointer-events: none; }
/* ENTER — arriving page's cards spring in, staggered left-to-right */
.lab-carousel.in-view .lp-page.is-active .lp-item {
  animation: cardIn .5s cubic-bezier(.22,.8,.3,1) both;
  animation-delay: calc(var(--i, 0) * .06s);
}
.lab-carousel.in-view[data-dir="next"] .lp-page.is-active .lp-item { animation-name: cardInNext; }
.lab-carousel.in-view[data-dir="prev"] .lp-page.is-active .lp-item { animation-name: cardInPrev; }
/* EXIT — leaving page's cards blur out the opposite way */
.lab-carousel.in-view .lp-page.is-leaving .lp-item {
  animation: cardOutNext .34s ease-in both;
  animation-delay: calc(var(--i, 0) * .04s);
}
.lab-carousel.in-view[data-dir="prev"] .lp-page.is-leaving .lp-item { animation-name: cardOutPrev; }
@keyframes cardIn {       /* first reveal: gentle rise into focus */
  from { opacity: 0; transform: translateY(18px) scale(.95); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes cardInNext {   /* NEXT: cards ease in from the right */
  from { opacity: 0; transform: translateX(64px) scale(.96); filter: blur(3px); }
  60%  { filter: blur(0); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes cardInPrev {   /* PREV: cards ease in from the left */
  from { opacity: 0; transform: translateX(-64px) scale(.96); filter: blur(3px); }
  60%  { filter: blur(0); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes cardOutNext {  /* NEXT: leaving cards ease off to the left */
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateX(-48px) scale(.95); filter: blur(2px); }
}
@keyframes cardOutPrev {  /* PREV: leaving cards ease off to the right */
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateX(48px) scale(.95); filter: blur(2px); }
}
.lp-arrow {
  appearance: none; border: 1px solid var(--lab-line); background: var(--lab-fill);
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: var(--d-accent); flex: 0 0 auto;
  transition: background-color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease), opacity .2s;
}
.lp-arrow svg { width: 18px; height: 18px; }
.lp-arrow:hover { background: color-mix(in srgb, var(--d-accent) 14%, var(--lab-card)); }
.lp-dots { display: flex; justify-content: center; gap: 9px; margin-top: 22px; }
.lp-dot {
  appearance: none; border: 0; padding: 0; cursor: pointer;
  width: 8px; height: 8px; border-radius: 50%;
  background: color-mix(in srgb, var(--d-accent) 28%, transparent);
  transition: background-color .25s var(--ease), width .25s var(--ease);
}
.lp-dot.is-on { width: 22px; border-radius: 5px; background: var(--d-accent); }
@media (prefers-reduced-motion: reduce) {
  .lp-item { animation: none !important; filter: none; transform: none; }
  .lab-carousel .lp-page.is-active .lp-item { opacity: 1; }
  .lp-page.is-leaving .lp-item { opacity: 0; }
}
@media (max-width: 620px) {
  .lp-page { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
  .lab-carousel { gap: 4px; }
  .lp-arrow { width: 34px; height: 34px; }
  .lp-ic svg { width: 40px; height: 40px; }
  .lp-item h3 { font-size: 14px; }
  .lp-item p { font-size: 11.5px; }
}
.lp-item {
  text-align: center;
  padding: 4px clamp(8px, 1.2vw, 18px) 6px;
  border-left: 1px solid var(--lab-line);
  display: flex; flex-direction: column; align-items: center;
  transition: border-color var(--theme-fade) var(--ease);
}
.lp-item:first-child { border-left: 0; }
.lp-ic {
  display: grid; place-items: center;
  width: 74px; height: 74px;
  border-radius: 50%;
  border: 1px solid var(--lab-line);
  background: var(--lab-fill);
  margin-bottom: 14px;
  transition: background-color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
}
.lp-ic svg {
  width: 50px; height: 50px;
  animation: microbeDrift 4s ease-in-out calc(var(--i, 0) * -1.15s) infinite alternate;
}
.lp-item:nth-child(even) .lp-ic svg { animation-direction: alternate-reverse; animation-duration: 4.8s; }
/* traced 2-colour pathogens: .b = light body fill, .a = dark linework */
.lp-svg path { fill-rule: evenodd; }   /* nested trace loops → thin lines, not solid discs */
.lp-ic .a { fill: var(--lab-ic1); transition: fill var(--theme-fade) var(--ease); }
.lp-ic .b { fill: var(--lab-ic2); transition: fill var(--theme-fade) var(--ease); }
.lp-item h3 { font-size: 16.5px; font-weight: 580; margin-bottom: 6px; }
.lp-item p {
  font-size: 13px; line-height: 1.45;
  color: var(--d-muted);
  transition: color var(--theme-fade) var(--ease);
}
.lp-status {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: auto; padding-top: 14px;
  font-size: 11px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase;
  color: var(--d-accent);
  transition: color var(--theme-fade) var(--ease);
}
.lp-status svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* card 3: the certification — rotating seal + proof points */
.lab-cert {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(22px, 3.5vw, 48px);
  padding: clamp(24px, 3.4vw, 42px) clamp(22px, 4vw, 56px);
}
.lab-seal { width: clamp(120px, 13vw, 150px); flex: 0 0 auto; }
.lab-seal svg { width: 100%; height: auto; display: block; }
/* sparkle shimmer: a soft light sweep across the seal + twinkling glints */
.lab-seal { position: relative; }
.lab-seal::after {
  content: ""; position: absolute; inset: 1.5%;
  border-radius: 50%; pointer-events: none;
  background: linear-gradient(115deg, transparent 43%, rgba(255,255,255,.5) 50%, transparent 57%);
  background-repeat: no-repeat; background-size: 220% 100%; background-position: 165% 0;
  animation: sealShine 8.8s ease-in-out infinite;
}
@keyframes sealShine {
  0%        { background-position: 165% 0; }
  19%, 100% { background-position: -65% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-seal::after { animation: none; opacity: 0; }
}
.seal2-edge {
  fill: none;
  stroke: var(--d-accent); stroke-width: 1.6;
  transition: stroke var(--theme-fade) var(--ease);
}
.seal2-band {
  fill: none;
  stroke: var(--d-accent); stroke-width: 23;
  transition: stroke var(--theme-fade) var(--ease);
}
.seal2-disc {
  fill: var(--lab-fill);
  stroke: var(--lab-line); stroke-width: 1;
  transition: fill var(--theme-fade) var(--ease), stroke var(--theme-fade) var(--ease);
}
.seal2-text {
  font-weight: 700;
  fill: var(--lab-card);
  transition: fill var(--theme-fade) var(--ease);
}
.seal2-top { font-size: 11px; letter-spacing: .24em; }
.seal2-bot { font-size: 8.8px; letter-spacing: .1em; }
.seal2-text textPath { text-anchor: middle; }
.seal2-dot { fill: var(--lab-card); transition: fill var(--theme-fade) var(--ease); }
.seal2-glass {
  fill: none;
  stroke: var(--d-accent); stroke-width: 2.4;
  stroke-linejoin: round;
  transition: stroke var(--theme-fade) var(--ease);
}
.seal2-liquid { fill: var(--d-accent); transition: fill var(--theme-fade) var(--ease); }
.seal2-check {
  fill: none;
  stroke: var(--lab-card); stroke-width: 2.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke var(--theme-fade) var(--ease);
}
.lab-cert-copy h3 { font-size: clamp(21px, 2.3vw, 28px); font-weight: 590; margin-bottom: 10px; }
.lab-cert-copy > p {
  font-size: 15.5px; line-height: 1.6;
  color: var(--d-muted);
  max-width: 560px;
  transition: color var(--theme-fade) var(--ease);
}
.lab-cert-points {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin-top: 16px; padding: 0;
}
.lab-cert-points li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 620; letter-spacing: .08em; text-transform: uppercase;
  color: var(--d-ink);
}
.lab-cert-points svg {
  width: 15px; height: 15px; flex: 0 0 auto;
  color: var(--d-accent);
  transition: color var(--theme-fade) var(--ease);
}

@media (max-width: 1000px) {
  .lab-grid { grid-template-columns: repeat(3, 1fr); row-gap: 26px; }
  .lab-grid-4 { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .lp-item:nth-child(4) { border-left: 0; }
}
@media (max-width: 640px) {
  .lab-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-item:nth-child(odd) { border-left: 0; }
  .lp-item:nth-child(4) { border-left: 1px solid var(--lab-line); }
  .lab-cert { flex-direction: column; text-align: center; }
  .lab-cert-points { justify-content: center; }
}

/* ── S9 professionals ────────────────────────────────────────── */
/* accent word inside band-dark headlines ("clean", "ever") */
.hl-accent {
  font-style: normal;
  color: var(--d-accent, var(--accent-strong, var(--accent)));
  transition: color var(--theme-fade) var(--ease);
}

.pro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.6vw, 30px); }
.pro-card {
  display: grid; grid-template-columns: 44% 1fr;
  margin: 0;
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.pro-photo { width: 100%; height: 100%; object-fit: cover; min-height: 430px; }
.pro-card figcaption {
  display: flex; flex-direction: column;
  padding: clamp(20px, 2.4vw, 34px);
}
.pc-mark {
  font-family: Didot, 'Bodoni MT', 'Playfair Display', Georgia, serif;
  font-size: 56px; line-height: .55;
  color: var(--d-accent);
  transition: color var(--theme-fade) var(--ease);
}
.pro-card blockquote { margin: 18px 0 0; }
.pro-card blockquote p {
  font-size: 16.5px; line-height: 1.62;
  color: var(--d-ink);
  margin-bottom: 14px;
}
.pro-card footer {
  display: flex; align-items: center; gap: 13px;
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 16px;
}
.pf-badge {
  width: 30px; height: 30px; flex: 0 0 auto;
  color: var(--d-accent);
  transition: color var(--theme-fade) var(--ease);
}
.pro-card footer strong { display: block; font-size: 15.5px; font-weight: 560; color: var(--d-ink); }
.pro-card footer em { font-style: normal; font-size: 13.5px; color: var(--d-muted); }

/* ── S10 sonic additions ─────────────────────────────────────── */
/* breathing room above the eyebrow; the brush head is allowed to run
   past the section bottom and tuck BEHIND the trust bar card */
.sonic {
  padding-top: clamp(64px, 9vh, 116px);
  padding-bottom: 0;
  overflow: visible;
  /* let the brush run ~120px past the section bottom so it tucks behind
     the trust card (whose top now sits lower), then cut it before it
     reaches the next section */
  clip-path: inset(0 0 -120px 0);
}
.sonic-copy h2 { line-height: 1.14; padding-top: .05em; }
.trust { position: relative; z-index: 6; }
.vib-count { font-variant-numeric: tabular-nums; }
/* the word buzzes while the counter runs; amplitude (--va) decays as the
   number settles, then the animation stops dead at 40,000 */
.vib-word { display: inline-block; }
.vib-word.on { animation: vibWord .09s linear infinite; will-change: transform; }
@keyframes vibWord {
  0%   { transform: translate(calc(var(--va, 1) *  1.2px), calc(var(--va, 1) * -0.8px)) rotate(calc(var(--va, 1) *  0.25deg)); }
  25%  { transform: translate(calc(var(--va, 1) * -1.1px), calc(var(--va, 1) *  0.7px)) rotate(calc(var(--va, 1) * -0.20deg)); }
  50%  { transform: translate(calc(var(--va, 1) *  0.9px), calc(var(--va, 1) *  1.0px)) rotate(calc(var(--va, 1) *  0.18deg)); }
  75%  { transform: translate(calc(var(--va, 1) * -1.2px), calc(var(--va, 1) * -0.9px)) rotate(calc(var(--va, 1) * -0.24deg)); }
  100% { transform: translate(calc(var(--va, 1) *  1.0px), calc(var(--va, 1) * -0.6px)) rotate(calc(var(--va, 1) *  0.20deg)); }
}
@media (prefers-reduced-motion: reduce) { .vib-word.on { animation: none; } }
.sonic-sub {
  font-size: clamp(17px, 1.9vw, 21px);
  color: var(--accent-strong, var(--accent));
  font-weight: 480;
  margin: -8px 0 16px;
  transition: color var(--theme-fade) var(--ease);
}
.mode-switch {
  position: relative;
  display: inline-grid; grid-template-columns: 1fr 1fr;
  padding: 4px; margin-bottom: 22px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(255, 255, 255, .38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ms-thumb {
  position: absolute; z-index: 0;
  top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  /* --accent (not -strong): --accent-ink is designed to sit on it, so
     the selected label holds contrast on every colorway */
  background: var(--accent);
  box-shadow: 0 5px 14px rgba(0, 0, 0, .22);
  /* the ring the focus outline used to draw, promoted to a permanent
     selected-state marker (Ryan liked the bug) */
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  transition: transform .34s cubic-bezier(.55, 0, .25, 1.25), background var(--theme-fade) var(--ease),
              outline-color var(--theme-fade) var(--ease);
}
body[data-mode="dark"] .mode-switch {
  background: rgba(13, 16, 18, .32);
  border-color: rgba(255, 255, 255, .14);
}
.mode-switch[data-on="gentle"] .ms-thumb { transform: translateX(100%); }
.ms-opt {
  position: relative; z-index: 1;
  appearance: none; border: 0; background: none; cursor: pointer;
  font: inherit;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 26px 13px;
  border-radius: 999px;
  color: var(--muted);
  transition: color .28s var(--ease);
}
.ms-ic { width: 19px; height: 19px; flex: 0 0 auto; }
.ms-txt { display: grid; gap: 2px; text-align: left; }
.ms-txt strong { font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.ms-txt span { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; opacity: .82; }
.ms-opt.is-on { color: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) { .ms-thumb { transition: none; } }
.sonic-facts { list-style: none; display: grid; gap: 11px; }
.sonic-facts li {
  display: flex; align-items: center; gap: 12px;
  font-size: 15.5px;
}
.sonic-facts svg {
  width: 19px; height: 19px; flex: 0 0 auto;
  color: var(--accent-strong, var(--accent));
  transition: color var(--theme-fade) var(--ease);
}

/* ── S11 the whitening promise ───────────────────────────────── */

/* before/after wipe: --wh (0%..100%) is driven by pdp.js on .wh-proof and
   moves the clip edge, the light seam, the day tag, and the timeline dot
   on one clock. Static fallback (no JS / reduced motion): half and half. */
.whiter { --wh: 50%; }

.wh-proof { max-width: 920px; margin: 0 auto clamp(40px, 6vh, 60px); }
.wh-stage {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 1408 / 768;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
}
.wh-stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.wh-after { clip-path: inset(0 calc(100% - var(--wh)) 0 0); }

/* the sweeping light seam at the reveal edge */
.wh-seam { position: absolute; top: 0; bottom: 0; left: var(--wh); width: 0; z-index: 2; }
.wh-seam::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -22px; width: 44px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
}
.wh-seam::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -1px; width: 2px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 0 14px rgba(255, 255, 255, .75);
}
.wh-daytag {
  display: none;
  position: absolute; top: 14px; z-index: 3;
  /* rides the seam but never slides off the rounded corners */
  left: clamp(52px, var(--wh), calc(100% - 52px));
  translate: -50% 0;
  font-size: 11px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(5, 8, 12, .72); color: #fff;
  border: 1px solid rgba(255, 255, 255, .28);
  white-space: nowrap;
}
html.rv-enabled .wh-daytag { display: inline-block; }

/* day 1 ←——●——→ day 14 */
.wh-timeline {
  display: flex; align-items: center; gap: 16px;
  max-width: 640px; margin: 22px auto 0;
}
.wh-chip {
  font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--d-muted);
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--d-hairline);
}
.wh-track {
  position: relative; flex: 1;
  height: 3px; border-radius: 999px;
  background: rgba(255, 255, 255, .16);
}
.wh-track::before {
  content: "";
  position: absolute; inset: 0 auto 0 0; width: var(--wh);
  border-radius: 999px;
  background: var(--d-accent);
  transition: background-color var(--theme-fade) var(--ease);
}
.wh-dot {
  position: absolute; top: 50%; left: var(--wh); translate: -50% -50%;
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .18), 0 2px 8px rgba(0, 0, 0, .5);
}
/* floats inside the stage, over the smile */
.wh-avg {
  position: absolute; left: 50%; bottom: 16px; translate: -50% 0; z-index: 3;
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #fff;
  padding: 9px 18px; border-radius: 999px;
  background: rgba(5, 8, 12, .55);
  border: 1px solid rgba(255, 255, 255, .28);
  white-space: nowrap;
  max-width: calc(100% - 24px);
}
.wh-avg strong { color: var(--d-accent); font-weight: 680; transition: color var(--theme-fade) var(--ease); }

/* the vow card — badge left, vow copy right, creds row under a rule */
.wh-vowcard {
  max-width: 880px;
  margin: clamp(40px, 6vh, 64px) auto 0;
  padding: clamp(26px, 3.6vw, 46px) clamp(24px, 4vw, 56px);
  background: linear-gradient(170deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 28px;
  text-align: left;
}
.wh-vowtop {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(24px, 4.5vw, 60px);
  align-items: center;
}
.wh-badge {
  width: clamp(168px, 17vw, 204px);
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .45));
}
.wh-badge svg { width: 100%; height: auto; display: block; }
.wb-shield {
  fill: color-mix(in srgb, var(--bg-2) 30%, #070b10);
  stroke: #f2f5f8; stroke-width: 5;
  transition: fill var(--theme-fade) var(--ease);
}
.wb-inner {
  fill: none;
  stroke: color-mix(in srgb, var(--d-accent) 70%, #fff);
  stroke-width: 1.6; opacity: .75;
  transition: stroke var(--theme-fade) var(--ease);
}
.wb-star { fill: #f2f5f8; }
.wb-star-s { fill: #c9d4de; }
.wh-badge text { font-family: inherit; text-anchor: middle; }
.wb-day { fill: #fff; font-size: 36px; font-weight: 760; letter-spacing: .015em; }
.wb-sub { fill: #dfe7ee; font-size: 12px; font-weight: 640; letter-spacing: .18em; }
.wb-tail { fill: color-mix(in srgb, var(--d-accent) 52%, #000); transition: fill var(--theme-fade) var(--ease); }
.wb-fold { fill: color-mix(in srgb, var(--d-accent) 26%, #000); transition: fill var(--theme-fade) var(--ease); }
.wb-ribbon { fill: var(--d-accent); transition: fill var(--theme-fade) var(--ease); }
.wb-promise { fill: #0b1014; font-size: 20px; font-weight: 720; letter-spacing: .16em; }

.wh-vow {
  font-size: clamp(22px, 2.7vw, 31px);
  font-weight: 580; letter-spacing: -.012em; line-height: 1.32;
  margin-bottom: 14px;
}
.wh-vowsub {
  font-size: 16.5px; line-height: 1.62;
  color: var(--d-muted);
  max-width: 520px;
  transition: color var(--theme-fade) var(--ease);
}
.wh-vowsub strong {
  color: var(--d-accent);
  font-weight: 640;
  transition: color var(--theme-fade) var(--ease);
}
.wh-creds {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 18px clamp(36px, 7vw, 88px);
  margin-top: clamp(22px, 3.4vh, 32px);
  padding-top: clamp(22px, 3.4vh, 32px);
  border-top: 1px solid var(--d-hairline);
  transition: border-color var(--theme-fade) var(--ease);
}
.wh-cred {
  display: flex; align-items: center; gap: 13px;
  font-size: 12.5px; font-weight: 640; letter-spacing: .13em; text-transform: uppercase;
  line-height: 1.5; text-align: left;
}
.wh-cred svg { width: 42px; height: 42px; flex: 0 0 auto; color: var(--d-accent); transition: color var(--theme-fade) var(--ease); }
.wh-fine {
  font-size: 13px; line-height: 1.6;
  color: var(--d-muted);
  max-width: 560px; margin: clamp(22px, 3.5vh, 32px) auto 0;
  text-align: center;
  transition: color var(--theme-fade) var(--ease);
}
@media (max-width: 760px) {
  .wh-vowtop { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .wh-vowsub { max-width: 100%; }
}

/* ── S12 gentle ──────────────────────────────────────────────── */

.gentle-panel {
  max-width: 1080px; margin: 0 auto clamp(22px, 3.5vh, 34px);
  background: var(--surface-strong);
  border: 1px solid var(--hairline);
  border-radius: 26px;
  padding: clamp(24px, 3.4vw, 40px);
  text-align: center;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background-color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
}
.gd-stage {
  position: relative;
  height: clamp(160px, 22vw, 210px);
  margin-bottom: 26px;
  overflow: hidden;
  border-radius: 16px;
}
/* dot grid behind the wave, fading toward the edges */
.gd-stage::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--ink) 22%, transparent) 1px, transparent 1.2px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 78%);
}
.gd-waves {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.wf { transition: opacity .55s var(--ease), stroke var(--theme-fade) var(--ease); vector-effect: non-scaling-stroke; }
/* the sonic-ring recipe: heavy-blur glow under a sharp line */
.wf-glow {
  stroke: var(--accent-strong, var(--accent));
  stroke-width: 7;
  opacity: .5;
  filter: blur(6px);
  animation: wfBreathe 3.2s var(--ease) infinite;
}
.wf-line { stroke: var(--accent-strong, var(--accent)); stroke-width: 2.4; }
@keyframes wfBreathe { 50% { opacity: .8; } }
.gentle-demo[data-mode="gentle"] .wf-clean,
.gentle-demo[data-mode="clean"] .wf-gentle { opacity: 0; animation: none; }
.mode-toggle {
  display: inline-flex;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 4px; gap: 4px;
  margin-bottom: 16px;
}
.mt-btn {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  font: inherit; font-size: 14.5px; font-weight: 540;
  color: var(--muted);
  background: transparent;
  padding: 10px 22px; border-radius: 999px;
  transition: background-color .25s, color .25s;
}
.mt-btn svg { width: 17px; height: 17px; }
.mt-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.mode-note {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  font-size: 15px; color: var(--muted); min-height: 34px;
  transition: color var(--theme-fade) var(--ease);
}
.mode-note strong { font-weight: 640; color: var(--accent-strong, var(--accent)); transition: color var(--theme-fade) var(--ease); }
.mn-ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--hairline);
  color: var(--accent-strong, var(--accent));
  transition: color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
}
.mn-ic svg { width: 16px; height: 16px; grid-area: 1 / 1; transition: opacity .3s var(--ease); }
.gentle-demo[data-mode="gentle"] .mn-clean, .gentle-demo[data-mode="clean"] .mn-gentle { opacity: 0; }
.mn-ic { display: grid; }
.gentle-points { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); }
.gpoint {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 26px 28px;
  transition: background-color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
}
.gpoint > svg {
  width: 52px; height: 52px;
  padding: 14px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--accent-strong, var(--accent));
  margin-bottom: 14px;
  transition: color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
}
.gpoint h3 { font-size: 17px; font-weight: 590; margin-bottom: 10px; }
/* the mockup's small accent underline beneath each title */
.gpoint h3::after {
  content: "";
  display: block;
  width: 30px; height: 2px; border-radius: 1px;
  margin-top: 9px;
  background: var(--accent-strong, var(--accent));
  transition: background-color var(--theme-fade) var(--ease);
}
.gpoint p { font-size: 14.5px; line-height: 1.55; color: var(--muted); transition: color var(--theme-fade) var(--ease); }

/* ── S13 concern tabs ────────────────────────────────────────── */
.fix-tabs { max-width: 1080px; margin: 0 auto; }
.tablist {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.tab {
  appearance: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font: inherit; font-size: 15px; font-weight: 520;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px 10px;
  transition: background-color .25s, color .25s, border-color .25s;
}
.tab svg { width: 19px; height: 19px; }
.tab[aria-selected="true"] {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: transparent;
}
/* all four panels stack in ONE grid cell so the tallest sets the height
   for every tab — switching tabs never reflows the page below */
.tabpanels { display: grid; }
.tabpanel {
  grid-area: 1 / 1;
  display: grid; align-content: center;   /* shorter panels center in the shared height */
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 22px;
  padding: clamp(26px, 3.5vw, 44px);
  transition: background-color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
}
.tabpanel[hidden] { display: grid; visibility: hidden; }   /* keeps its height in the stack */
/* problem on the left, the fix as a stacked list on the right */
.fp-grid {
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
}
.fp-problem h3 {
  font-size: clamp(21px, 2.3vw, 27px);
  font-weight: 580; letter-spacing: -.015em; line-height: 1.2;
  margin-bottom: 10px;
  text-wrap: balance;
}
.fp-problem > p {
  font-size: 15.5px; line-height: 1.6;
  color: var(--muted);
  max-width: 50ch;
  transition: color var(--theme-fade) var(--ease);
}
.fp-label {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-size: 11.5px; font-weight: 620;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
  transition: color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
}
.fp-chips { display: flex; align-items: flex-start; margin-top: 14px; }
.fp-chip {
  flex: 1 1 0; min-width: 0;
  margin: 0; padding: 0 8px;
  text-align: center;
  border-left: 1px solid var(--hairline);
}
.fp-chip:first-child { border-left: 0; padding-left: 0; }
.fp-chip:last-child { padding-right: 0; }
.fp-chip img { width: 100%; height: auto; display: block; }
.fp-chips-photo .fp-chip img,
.fp-chips-stage .fp-chip img { aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.fp-chips-stage { gap: 2px; }
.fp-chips-stage .fp-chip { border-left: 0; padding: 0 2px; }
.fp-chips-stage .fp-chip img { border-radius: 50%; border: 1px solid var(--hairline); }
.fp-arr { align-self: center; margin-top: -22px; color: var(--muted); font-size: 17px; flex: 0 0 auto; }
.fp-chip figcaption { font-size: 12px; font-weight: 560; line-height: 1.3; margin-top: 8px; }
.fp-chip figcaption b { font-weight: 680; }
.fp-solution {
  display: grid; gap: clamp(18px, 3vh, 28px);
  border-left: 1px solid var(--hairline);
  padding-left: clamp(20px, 3vw, 44px);
  transition: border-color var(--theme-fade) var(--ease);
}
.fp-sol { display: flex; align-items: flex-start; gap: 15px; }
.fp-sol-ic {
  flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent-strong, var(--accent));
  transition: background-color var(--theme-fade) var(--ease), color var(--theme-fade) var(--ease);
}
.fp-sol-ic svg { width: 21px; height: 21px; }
.fp-sol h4 { font-size: 16.5px; font-weight: 600; margin: 3px 0 3px; }
.fp-sol p { font-size: 14.5px; line-height: 1.5; color: var(--muted); transition: color var(--theme-fade) var(--ease); }
@media (max-width: 880px) {
  .fp-grid { grid-template-columns: 1fr; }
  .fp-solution { border-left: 0; padding-left: 0; border-top: 1px solid var(--hairline); padding-top: 22px; }
  .fp-chips { flex-wrap: wrap; row-gap: 14px; }
  .fp-chips-photo .fp-chip { flex: 1 1 30%; }
}

/* ── S14 story rail ──────────────────────────────────────────── */
}

/* ── S15 comparison ──────────────────────────────────────────── */
/* redesigned per Ryan's comp (2026-07-11): a wide soft card with tall,
   airy rows — the TAO column answers as a filled accent pill, the other
   column mutters its excuse beside a small mark */
.cmp-card {
  max-width: 1080px; margin: 0 auto;
  background: var(--surface-strong);
  border: 1px solid var(--hairline);
  border-radius: 30px;
  overflow: hidden;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .10);
  transition: background-color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease),
              box-shadow var(--theme-fade) var(--ease);
}
.cmp-row {
  display: grid; grid-template-columns: 1.25fr 1fr 1fr;
  align-items: stretch;   /* the TAO cells' tint joins into one continuous band */
  border-bottom: 1px solid var(--hairline);
  font-size: 16px;
  transition: border-color var(--theme-fade) var(--ease);
}
.cmp-row:last-child { border-bottom: 0; }
.cmp-row > span {
  display: flex; align-items: center; gap: 13px;
  padding: clamp(13px, 1.9vh, 19px) clamp(14px, 2vw, 26px);
}
.cmp-row > .cmp-feat { font-weight: 550; padding-left: clamp(20px, 3vw, 40px); }
.cmp-ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent-strong, var(--accent));
  transition: background-color var(--theme-fade) var(--ease), color var(--theme-fade) var(--ease);
}
.cmp-ic svg { width: 20px; height: 20px; }
.cmp-row > .cmp-tao {
  background: color-mix(in srgb, #fff 42%, transparent);
  font-weight: 570;
  transition: background-color var(--theme-fade) var(--ease);
}
body[data-mode="dark"] .cmp-row > .cmp-tao { background: rgba(255, 255, 255, .07); }
.cmp-row > .cmp-other {
  color: var(--muted);
  font-size: 15px;
  transition: color var(--theme-fade) var(--ease);
}
.cmp-pill {
  flex: 0 0 auto; width: 23px; height: 23px; border-radius: 50%;
  display: grid; place-items: center;
  transition: background-color var(--theme-fade) var(--ease), color var(--theme-fade) var(--ease);
}
.cmp-pill svg { width: 13px; height: 13px; }
.cmp-yes { background: var(--accent-strong, var(--accent)); color: var(--accent-ink, #fff); }
.cmp-no { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--muted); }
.cmp-head {
  font-size: 12.5px; font-weight: 620; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
}
.cmp-head > span {
  flex-direction: column; justify-content: flex-end; gap: 9px;
  text-align: center;
  padding-block: 22px 16px;
}
.cmp-head .cmp-tao { color: var(--accent-strong, var(--accent)); }
.cmp-mark { width: 30px; height: 30px; }
.cmp-mark-sm { width: 24px; height: 24px; margin-bottom: 3px; }

/* ── S16 details ─────────────────────────────────────────────── */
/* craft film tiles — featured + side stack, captions as dark glass cards
   (the layout the UGC section pioneered) */
.detail-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; max-width: 1140px; margin: 0 auto; }
.dg-side { display: grid; gap: 18px; }
.detail-tile {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--hairline);
  min-height: 231px;
  margin: 0;
  transition: background-color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
}
.dt-featured { min-height: 480px; }
.detail-img { position: absolute; inset: 0; }
.detail-tile .xfade img { object-fit: cover; }
.detail-img.swap { opacity: 0; }
.detail-tile figcaption {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  padding: 13px 16px;
  border-radius: 14px;
  background: rgba(10, 14, 20, .60);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
}
.detail-tile figcaption h3 {
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 75%, #fff);
  margin-bottom: 4px;
}
.dt-featured figcaption h3 { font-size: 13.5px; }
.detail-tile figcaption p { font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.dt-featured figcaption p { font-size: 15px; }
.dt-play {
  position: absolute; left: 50%; top: 42%;
  translate: -50% -50%;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 55%, rgba(10, 14, 22, .38));
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: scale .25s var(--ease), background-color var(--theme-fade) var(--ease);
}
.dt-play svg { width: 17px; height: 17px; margin-left: 2px; }
.detail-tile:hover .dt-play { scale: 1.12; }
.craft-pick { text-align: center; margin: clamp(32px, 5vh, 52px) auto clamp(16px, 2.5vh, 26px); }
.craft-pick h3 { font-size: clamp(24px, 2.8vw, 34px); font-weight: 580; letter-spacing: -.018em; margin: 4px 0 8px; }
.craft-sub { font-size: 15.5px; color: var(--muted); transition: color var(--theme-fade) var(--ease); }

/* ── S17 color gallery ───────────────────────────────────────── */
.tier { margin-bottom: clamp(34px, 5vh, 52px); }
.tier-head {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 20px;
  border-bottom: 1px solid var(--hairline);
  transition: border-color var(--theme-fade) var(--ease);
}
.tier-head h3 { font-size: 21px; font-weight: 580; letter-spacing: -.01em; }
.tier-price {
  font-size: 15px; font-weight: 600;
  color: var(--accent-strong, var(--accent));
  font-variant-numeric: tabular-nums;
  transition: color var(--theme-fade) var(--ease);
}
.tier-tag { font-size: 14px; color: var(--muted); transition: color var(--theme-fade) var(--ease); }
.tier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; }
.cw-card {
  appearance: none; cursor: pointer;
  font: inherit; text-align: center;
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: var(--surface);
  padding: 14px 10px 16px;
  display: grid; gap: 10px; justify-items: center;
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s,
              background-color var(--theme-fade) var(--ease);
}
.cw-card[aria-pressed="true"] {
  border-color: var(--accent-strong, var(--accent));
  box-shadow: 0 0 0 1.6px var(--accent-strong, var(--accent)),
              0 14px 30px color-mix(in srgb, var(--accent) 22%, transparent);
}
.cw-well {
  width: 100%;
  aspect-ratio: 4 / 4.4;
  border-radius: 12px;
  display: grid; place-items: center;
  /* neutral porcelain tinted by the colorway swatch — the renders were
     shot on their own scene color, so a bg2 well would camouflage them */
  background: color-mix(in srgb, var(--cw-sw, #9aa) 16%, #f2f3f3);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04), inset 0 -14px 22px rgba(0,0,0,.05);
  overflow: hidden;
}
.cw-well img { width: 100%; height: 100%; object-fit: contain; padding: 12px 16px; }
.cw-name { font-size: 14px; font-weight: 540; line-height: 1.25; }
.cw-badge {
  font-size: 10px; font-weight: 640; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 4px 9px; border-radius: 999px;
  margin-top: -4px;
  transition: background-color var(--theme-fade) var(--ease), color var(--theme-fade) var(--ease);
}

/* ── S18 manifesto ───────────────────────────────────────────── */
.manifesto {
  text-align: center;
  padding-block: clamp(48px, 6.5vh, 76px);
  border-block: 1px solid var(--hairline);
  transition: border-color var(--theme-fade) var(--ease);
}
.manifesto .eyebrow { margin-bottom: 30px; }
.mani-lines { display: grid; gap: 14px; max-width: 820px; margin: 0 auto; }
.mani-lines p {
  font-size: clamp(23px, 3.1vw, 40px);
  font-weight: 570; letter-spacing: -.018em; line-height: 1.18;
  text-wrap: balance;
}
.mani-banner {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  width: min(680px, 100%);
  margin: 10px auto;
  padding: 20px 36px;
  border-radius: 20px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: background-color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
}
.mb-price {
  font-size: clamp(38px, 4.5vw, 54px); font-weight: 640; letter-spacing: -.02em;
  color: var(--accent-strong, var(--accent));
  transition: color var(--theme-fade) var(--ease);
}
.mb-rest {
  font-size: clamp(16px, 1.8vw, 21px); font-weight: 540; text-align: left;
  border-left: 1px solid var(--hairline);
  padding-left: 24px;
  transition: border-color var(--theme-fade) var(--ease);
}
@media (max-width: 640px) {
  .mani-banner { flex-direction: column; gap: 8px; }
  .mb-rest { border-left: 0; padding-left: 0; text-align: center; }
}
.mani-next {
  margin-top: clamp(30px, 4vh, 44px);
  font-size: 16.5px; color: var(--muted);
  transition: color var(--theme-fade) var(--ease);
}
.mani-micro { margin-top: 10px; font-size: 13.5px; color: var(--muted); }

/* ── S19 promise ─────────────────────────────────────────────── */
.promise-inner {
  width: min(1080px, 100%); margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(34px, 6vw, 90px);
  align-items: center;
}
.promise-seal {
  width: clamp(235px, 27vw, 310px);
  aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 24px 60px rgba(0,0,0,.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--d-accent, var(--accent-strong, var(--accent)));
  transition: color var(--theme-fade) var(--ease);
}
.promise-seal svg { width: 88%; height: auto; }
.seal-text {
  font-size: 13.2px; font-weight: 600; letter-spacing: .22em;
  fill: currentColor;
}
.seal-spin { animation: sealSpin 44s linear infinite; transform-origin: 110px 110px; }
@keyframes sealSpin { to { transform: rotate(360deg); } }

.promise-terms { display: grid; gap: 14px; margin-top: 8px; }
.pterm {
  display: flex; gap: 18px; align-items: center;
  background: linear-gradient(160deg, rgba(255,255,255,.065), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  padding: 18px 22px;
}
.pt-medal {
  flex: 0 0 auto;
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.14), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  color: var(--d-accent, var(--accent-strong, var(--accent)));
  transition: color var(--theme-fade) var(--ease);
}
.pt-medal svg { width: 34px; height: 34px; }
.pterm > div { border-left: 1px solid rgba(255,255,255,.12); padding-left: 18px; }
.pterm h3 { font-size: 17.5px; font-weight: 580; margin-bottom: 4px; color: var(--d-ink); }
.pterm p { font-size: 14.5px; line-height: 1.6; color: var(--d-muted); }
.pterm strong { color: var(--d-ink); font-weight: 580; }
/* glowing CTA + secure line (per the comp) */
.cta-glow .btn-primary {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent),
              0 10px 44px color-mix(in srgb, var(--accent) 42%, transparent);
}
.promise-secure {
  display: flex; align-items: center; gap: 9px;
  margin-top: 16px;
  font-size: 14px; color: var(--d-muted);
}
.promise-secure svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* ── S20 reviews ─────────────────────────────────────────────── */
.rev-band {
  display: flex; align-items: center; gap: clamp(24px, 4vw, 52px);
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.rev-score { text-align: center; }
.rev-score strong {
  display: block;
  font-size: clamp(60px, 7vw, 92px);
  font-weight: 640; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rev-score .stars { justify-content: center; margin-top: 6px; }
.rev-score .stars svg { width: 19px; height: 19px; }
.rev-meta h2 { margin-bottom: 8px; }
.rev-meta p { font-size: 16px; color: var(--muted); transition: color var(--theme-fade) var(--ease); }
.rev-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip {
  appearance: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 520;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--hairline);
  padding: 9px 18px; border-radius: 999px;
  transition: background-color .25s, color .25s, border-color .25s;
}
.chip[aria-pressed="true"] {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: transparent;
}
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* filter switch: staggered re-entrance (see animateFilteredCards) */
.rev-card.rev-flip {
  animation: revFilterIn .5s cubic-bezier(.2,.8,.3,1) both;
  animation-delay: calc(var(--fi, 0) * .055s);
}
@keyframes revFilterIn {
  from { opacity: 0; translate: 0 16px; }
  to   { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) { .rev-card.rev-flip { animation: none; } }
.rev-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 26px 26px 22px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
}
.rev-stars {
  font-size: 14px; letter-spacing: .18em;
  color: var(--accent-strong, var(--accent));
  transition: color var(--theme-fade) var(--ease);
}
.rev-card h3 { font-size: 17.5px; font-weight: 570; margin: 10px 0 8px; }
.rev-card p { font-size: 14.5px; line-height: 1.6; color: var(--muted); transition: color var(--theme-fade) var(--ease); }
.rev-card footer {
  margin-top: 16px;
  display: flex; align-items: center; gap: 11px;
  font-size: 13.5px; font-weight: 520;
}
.rev-ava {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-strong, var(--accent)) 45%, transparent);
}
.rev-card footer em {
  font-style: normal; font-weight: 420;
  color: var(--accent-strong, var(--accent));
  transition: color var(--theme-fade) var(--ease);
}
.rev-more-wrap { text-align: center; margin-top: 26px; }
.rev-more {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; padding: 8px 4px;
}
.rev-more svg { width: 16px; height: 16px; }

/* reviews on a dark band — a clear break from the light stories rail above */
.reviews.band-dark .rev-meta p,
.reviews.band-dark .rev-card p { color: var(--d-muted); }
.reviews.band-dark .stars,
.reviews.band-dark .rev-stars,
.reviews.band-dark .rev-card footer em { color: var(--d-accent); }
.reviews.band-dark .chip { color: var(--d-muted); border-color: var(--d-hairline); }
.reviews.band-dark .chip[aria-pressed="true"] { color: #08130d; background: var(--d-accent); border-color: transparent; }
.reviews.band-dark .rev-card { background: rgba(255,255,255,.055); border-color: var(--d-hairline); }
.reviews.band-dark .rev-ava { box-shadow: 0 0 0 2px color-mix(in srgb, var(--d-accent) 45%, transparent); }
.reviews.band-dark .btn-ghost { color: var(--d-ink); }

/* ── S21 brush heads ─────────────────────────────────────────── */
.heads-layout {
  display: grid; grid-template-columns: 1fr minmax(280px, 340px);
  gap: clamp(18px, 2.6vw, 30px);
  align-items: start;
}
.head-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.head-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 16px 14px 18px;
  text-align: center;
  transition: background-color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
}

.head-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 16px); }
.hp-vitrine {
  text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, #fff 12%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, #fff 30%, var(--hairline));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 14px 30px rgba(0, 0, 0, .10);
}
.hp-vitrine .hp-img {
  height: 150px;
  aspect-ratio: auto;   /* the base 16/10 ratio + fixed height forced a 240px width that overflowed the card */
  margin: 12px 12px 0;
  border-radius: 12px;
  background: #fff;   /* the CDN photos are shot on pure white — seamless well */
}
.hp-vitrine .hp-img img {
  /* house rule: % sizing dies inside grid wells (the auto row grows to the
     img's intrinsic size and overflows the fixed-height well) — fixed px */
  width: 100%; height: 126px;
  max-width: 100%; max-height: none;
  object-fit: contain;
  padding: 0 12px;
}
.hp-vitrine .hp-body { padding: 14px 14px 18px; }
.hp-vitrine h3 { font-size: 15px; }
.hp-vitrine p { font-size: 12.5px; min-height: 3.2em; margin-bottom: 10px; }
.hp-vitrine .hp-meta { justify-content: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 880px) { .head-products { grid-template-columns: 1fr 1fr; } }
.hp-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  overflow: hidden;
  transition: background-color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
}
.hp-img {
  background: #f6f6f5;
  display: grid; place-items: center;
  aspect-ratio: 16 / 10;
}
.hp-img img { max-height: 88%; max-width: 70%; object-fit: contain; }
.hp-body { padding: 20px 22px 22px; }
.hp-body h3 { font-size: 17px; font-weight: 570; margin-bottom: 6px; }
.hp-body p { font-size: 14px; line-height: 1.55; color: var(--muted); margin-bottom: 14px; transition: color var(--theme-fade) var(--ease); }
.hp-meta { display: flex; align-items: center; justify-content: space-between; }
.hp-price {
  font-size: 17px; font-weight: 620; font-variant-numeric: tabular-nums;
  color: var(--accent-strong, var(--accent));
  transition: color var(--theme-fade) var(--ease);
}
.hp-chip {
  font-size: 11.5px; font-weight: 560; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--hairline);
  color: var(--muted);
  padding: 5px 11px; border-radius: 999px;
}
.refill-math {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
  border-radius: 22px;
  padding: 30px 28px;
  position: sticky; top: 92px;
  transition: background-color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
}
.refill-math h3 { font-size: 22px; font-weight: 580; letter-spacing: -.01em; margin-bottom: 20px; }
.rm-bars { display: grid; gap: 14px; margin-bottom: 18px; }
.rm-row { display: grid; gap: 5px; }
.rm-label { font-size: 13px; font-weight: 540; color: var(--muted); transition: color var(--theme-fade) var(--ease); }
.rm-hero .rm-label { color: var(--ink); }
.rm-bar {
  height: 14px; border-radius: 7px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  overflow: hidden;
}
.rm-bar i {
  display: block; height: 100%;
  width: var(--w, 50%);
  border-radius: 7px;
  background: color-mix(in srgb, var(--muted) 55%, transparent);
}
.rm-mid i  { background: color-mix(in srgb, var(--accent) 55%, var(--muted)); }
.rm-best i { background: var(--accent); transition: background-color var(--theme-fade) var(--ease); }
.rm-val { font-size: 14.5px; font-weight: 620; font-variant-numeric: tabular-nums; }
.rm-val em { font-style: normal; font-weight: 420; font-size: 12px; color: var(--muted); }
.rm-note { font-size: 13.5px; line-height: 1.6; color: var(--muted); transition: color var(--theme-fade) var(--ease); }


/* ── S23 what's in the box ───────────────────────────────────── */
.box-inner {
  width: min(1080px, 100%); margin: 0 auto;
  display: grid; grid-template-columns: 1fr .9fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}
.box-list { list-style: none; counter-reset: boxn; display: grid; gap: 12px; margin-top: 30px; }
.box-list li {
  counter-increment: boxn;
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  align-items: baseline;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 14px 18px;
  transition: background-color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
}
.box-list li::before {
  content: counter(boxn);
  grid-row: 1 / 3;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  align-self: start;
  font-size: 14.5px; font-weight: 620;
  border-radius: 50%;
  color: var(--accent-ink);
  background: var(--accent);
  transition: background-color var(--theme-fade) var(--ease), color var(--theme-fade) var(--ease);
}
.box-list strong { font-size: 17.5px; font-weight: 560; }
.box-list span { grid-column: 2; font-size: 14.5px; color: var(--muted); line-height: 1.5; margin-top: 3px; transition: color var(--theme-fade) var(--ease); }
.box-visual {
  position: relative;
  border-radius: 26px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: clamp(20px, 3vw, 40px);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
}
.box-img { width: 100%; aspect-ratio: 640 / 760; }
.box-img.swap { opacity: 0; }
.callout { position: absolute; translate: -50% -50%; }
.callout i {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  font-style: normal; font-size: 13.5px; font-weight: 620;
  border-radius: 50%;
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent);
  transition: background-color var(--theme-fade) var(--ease), color var(--theme-fade) var(--ease);
}

/* ── S24 specs + accordions ──────────────────────────────────── */
.acc {
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: var(--surface);
  padding: 0 clamp(20px, 3vw, 34px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
}
.acc + .acc { margin-top: 12px; }
.acc summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 0;
  cursor: pointer;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary h2, .acc summary .acc-h2 { display: block; font-size: clamp(20px, 2.4vw, 27px); font-weight: 580; letter-spacing: -.018em; margin: 0; }
.acc summary h3, .acc summary .acc-h3 { display: block; font-size: 17px; font-weight: 550; margin: 0; }
.acc-ic { width: 20px; height: 20px; flex: 0 0 auto; color: var(--muted); transition: rotate .3s var(--ease); }
.acc[open] .acc-ic { rotate: 180deg; }
.acc > p { padding: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: var(--muted); max-width: 70ch; transition: color var(--theme-fade) var(--ease); }
/* ── S24 tech specs — "Built to perform. Proven by the details." ── */
.specs-card {
  border: 1px solid var(--hairline);
  border-radius: clamp(22px, 3vw, 34px);
  background: var(--surface);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: clamp(24px, 4vw, 56px);
  transition: background-color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
}
.specs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 350px);
  gap: clamp(28px, 4.5vw, 68px);
  align-items: center;
}
.specs-head { margin-bottom: clamp(22px, 3.2vh, 34px); }
.specs-head h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 580;
  letter-spacing: -.018em;
  line-height: 1.1;
  margin: 0 0 20px;
}
.specs-rule {
  display: block; width: 44px; height: 2px; border-radius: 1px;
  background: var(--accent-strong, var(--accent));
  transition: background-color var(--theme-fade) var(--ease);
}
.specd { margin: 0; }
.specd > div {
  display: grid;
  grid-template-columns: 42px minmax(150px, 200px) 1fr;
  gap: 4px 18px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid var(--hairline);
  transition: border-color var(--theme-fade) var(--ease);
}
.specd > div:last-child { border-bottom: 1px solid var(--hairline); }
.specd-ic {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--muted);
  transition: color .3s var(--ease), border-color .3s var(--ease),
              background-color var(--theme-fade) var(--ease);
}
.specd-ic svg { width: 20px; height: 20px; }
.specd > div:hover .specd-ic {
  color: var(--accent-strong, var(--accent));
  border-color: color-mix(in srgb, var(--accent-strong, var(--accent)) 45%, var(--hairline));
}
.specd dt {
  font-size: 12.5px; font-weight: 580;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  transition: color var(--theme-fade) var(--ease);
}
.specd dd { margin: 0; font-size: 15.5px; line-height: 1.45; }
.spec-pkg { margin: 0; text-align: center; }
.spec-pkg-card {
  border: 1px solid var(--hairline);
  border-radius: 22px;
  background: var(--surface);
  padding: clamp(14px, 1.8vw, 20px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
}
.pkg-frame { position: relative; border-radius: 14px; overflow: hidden; }
.pkg-frame video {
  display: block; width: 100%; height: auto;
  transition: opacity var(--theme-fade) var(--ease);
}
/* the twin stacks on top; whichever holds the incoming colorway fades
   over the other, time-synced so the box never jumps mid-rotation */
#pkg-vid-b { position: absolute; inset: 0; height: 100%; opacity: 0; }
.spec-pkg figcaption {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 13px 0 5px;
  font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
  transition: color var(--theme-fade) var(--ease);
}
.spec-pkg figcaption svg { width: 16px; height: 16px; color: var(--accent-strong, var(--accent)); }
@media (max-width: 880px) {
  .specs-grid { grid-template-columns: 1fr; }
  .spec-pkg { max-width: 320px; margin: 10px auto 0; }
}
@media (max-width: 560px) {
  .specd > div { grid-template-columns: 40px 1fr; align-items: start; padding: 12px 0; }
  .specd-ic { width: 40px; height: 40px; grid-row: span 2; }
  .specd dt, .specd dd { grid-column: 2; }
}

/* ── S25 certifications ──────────────────────────────────────── */
.badge-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 30px 14px;
  max-width: 980px; margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 26px;
  padding: clamp(26px, 3.5vw, 46px);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .10), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: background-color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
}
.badge {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 540; text-align: center; line-height: 1.35;
  color: var(--muted);
  transition: color var(--theme-fade) var(--ease);
}
.badge svg {
  width: 64px; height: 64px;
  padding: 18px;
  border-radius: 50%;
  color: var(--accent-strong, var(--accent));
  border: 1px solid var(--hairline);
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, #fff 16%, transparent), transparent 72%);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(255, 255, 255, .30), 0 6px 16px rgba(0, 0, 0, .10);
  transition: color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
}
@media (max-width: 720px) { .badge-row { grid-template-columns: repeat(2, 1fr); } }


/* ── S29 finale ──────────────────────────────────────────────── */
.finale { min-height: 92svh; display: grid; align-items: center; overflow: hidden; }
.finale-inner {
  width: min(1140px, 100%); margin: 0 auto;
  display: grid; grid-template-columns: .82fr 1.18fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}
.finale-art { position: relative; display: grid; place-items: center; }
.finale-glow {
  position: absolute; inset: -8%;
  background: radial-gradient(circle at 50% 55%,
    color-mix(in srgb, var(--accent) 44%, transparent) 0%,
    transparent 64%);
  filter: blur(34px);
  transition: background var(--theme-fade) var(--ease);
}
/* the lit pedestal ring behind the product — the closing image */
.finale-glow::after {
  content: "";
  position: absolute;
  left: 50%; top: 48%;
  width: min(440px, 92%); aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: conic-gradient(from 210deg,
    transparent 0deg,
    color-mix(in srgb, var(--accent-strong, var(--accent)) 90%, #fff) 70deg,
    color-mix(in srgb, var(--accent) 55%, transparent) 150deg,
    transparent 250deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 70%, transparent));
}
.finale .btn-big {
  box-shadow: 0 0 38px color-mix(in srgb, var(--accent) 45%, transparent),
              0 10px 26px rgba(0, 0, 0, .22);
}
.finale-img { width: min(100%, 400px); aspect-ratio: 640 / 760; }
.finale-img.swap { opacity: 0; }
.finale-beats { display: grid; gap: 9px; margin: 22px 0 8px; }
.finale-beats p {
  font-size: clamp(17px, 1.9vw, 21px);
  color: var(--muted);
  transition: color var(--theme-fade) var(--ease);
}
.finale-beats .fb-last { margin-top: 8px; }
.finale-beats .fb-last strong {
  color: var(--ink);
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 580;
}
.finale-closer { margin-top: 16px; font-size: 13.5px; color: var(--muted); transition: color var(--theme-fade) var(--ease); }


/* ── S31 signup ──────────────────────────────────────────────── */
.signup { text-align: center; }
.signup-inner { width: min(900px, 100%); margin: 0 auto; }
.signup-ic { width: 34px; height: 34px; margin: 0 auto 18px; color: var(--accent-strong, var(--accent)); transition: color var(--theme-fade) var(--ease); }
/* community section — matches the reference: eyebrow, headline, a row of
   five brushing-in-action photos, the form, a tagline, then three perks */
.signup-head { width: min(760px, 100%); margin: 0 auto clamp(28px, 4vh, 44px); }
.signup-eyebrow {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  margin-bottom: 16px;
}
.se-line { width: 34px; height: 1px; background: currentColor; opacity: .45; }
.signup-sub {
  font-size: 16px; color: var(--muted); margin-top: 10px;
  transition: color var(--theme-fade) var(--ease);
}
.comm-wall {
  display: flex; justify-content: center; align-items: flex-start;
  gap: clamp(10px, 1.3vw, 18px);
  width: min(1120px, 100%); margin: 0 auto clamp(30px, 4.5vh, 48px);
}
.comm-tile {
  flex: 1 1 0; min-width: 0; position: relative;
  aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 38px rgba(20, 28, 40, .18);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.comm-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: opacity .7s var(--ease);
}
/* form: field with inline mail glyph + accent submit with arrow */
.signup-form { width: min(500px, 100%); margin: 0 auto; display: flex; align-items: stretch; gap: 12px; }
.sf-field {
  flex: 1; display: flex; align-items: center; gap: 12px;
  height: 58px; padding: 0 20px; border-radius: 15px;
  border: 1.5px solid var(--hairline);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color var(--theme-fade) var(--ease);
}
.sf-field:focus-within {
  border-color: var(--accent-strong, var(--accent));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
.sf-mail { width: 20px; height: 20px; flex: 0 0 auto; color: var(--muted); }
.sf-field input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: 15.5px; color: var(--ink);
}
.sf-field input::placeholder { color: var(--muted); opacity: .8; }
.sf-submit {
  flex: 0 0 auto; height: 58px; gap: 9px;
  padding-inline: 30px; border-radius: 15px; font-size: 15.5px;
}
.sf-submit svg { width: 18px; height: 18px; }
/* tagline divider + perks */
.comm-tagline {
  position: relative; margin: clamp(26px, 4vh, 40px) auto 0 !important;
  width: min(880px, 100%); text-align: center;
  font-size: 14.5px; color: var(--muted);
}
.comm-tagline::before, .comm-tagline::after {
  content: ""; position: absolute; top: 50%;
  width: clamp(20px, 8%, 90px); height: 1px;
  background: var(--hairline);
}
.comm-tagline::before { left: 0; }
.comm-tagline::after { right: 0; }
.comm-perks {
  list-style: none; display: flex; justify-content: center; flex-wrap: wrap;
  gap: clamp(20px, 3.5vw, 46px);
  margin-top: clamp(22px, 3vh, 32px);
}
.comm-perks li {
  display: flex; align-items: center; gap: 11px; text-align: left;
  font-size: 14.5px; font-weight: 480; white-space: nowrap;
}
.cp-ic {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--hairline);
  color: var(--accent-strong, var(--accent));
  transition: color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
}
.cp-ic svg { width: 20px; height: 20px; }
@media (max-width: 760px) {
  .comm-wall {
    justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 6px; -webkit-overflow-scrolling: touch;
  }
  .comm-tile { flex: 0 0 62%; scroll-snap-align: center; }
  .comm-perks { flex-direction: column; align-items: flex-start; gap: 16px; width: fit-content; margin-inline: auto; }
  .comm-perks li { white-space: normal; }
  .signup-form { flex-wrap: wrap; }
  .sf-submit { width: 100%; }
}
.signup p { font-size: 16px; color: var(--muted); margin-bottom: 26px; transition: color var(--theme-fade) var(--ease); }
.signup-form[hidden] { display: none; }
.signup-error { margin-top: 14px; font-size: 14px; font-weight: 520; color: var(--ink); }
.signup-done { margin-top: 18px; font-size: 16px; font-weight: 540; color: var(--accent-strong, var(--accent)) !important; }

/* ── footer (expanded) ───────────────────────────────────────── */
/* extra bottom padding keeps the fineprint clear of the sticky cart bar */
.footer { display: block; text-align: left; padding: clamp(48px, 7vh, 72px) clamp(20px, 4.5vw, 64px) 120px; }
.foot-social { display: flex; gap: 8px; margin-top: 18px; }
.foot-social a {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--muted);
  border: 1px solid var(--hairline);
  transition: color .2s, border-color .2s;
}
.foot-social a:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.foot-social svg { width: 17px; height: 17px; }
.foot-top {
  width: min(1240px, 100%); margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: clamp(24px, 3.5vw, 48px);
  padding-bottom: 40px;
}
.foot-tag { margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--muted); transition: color var(--theme-fade) var(--ease); }
.foot-col { display: grid; gap: 11px; align-content: start; }
.foot-col h3, .foot-col h4 {
  font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
  transition: color var(--theme-fade) var(--ease);
}
.foot-col a { font-size: 14.5px; color: var(--ink); opacity: .82; transition: opacity .2s; }
.foot-col a:hover { opacity: 1; }
.foot-bottom {
  width: min(1240px, 100%); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid var(--hairline);
  padding-top: 26px;
  transition: border-color var(--theme-fade) var(--ease);
}
.pay-row { display: flex; flex-wrap: wrap; gap: 7px; }
.pay {
  font-size: 11.5px; font-weight: 560; letter-spacing: .04em;
  color: var(--muted);
  border: 1px solid var(--hairline);
  padding: 5px 11px; border-radius: 7px;
  transition: color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
}
.pay-fsa { color: var(--accent-strong, var(--accent)); border-color: color-mix(in srgb, var(--accent-strong, var(--accent)) 40%, transparent); }

/* ── sticky add-to-cart bar ──────────────────────────────────── */
.stickybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  translate: 0 110%;
  visibility: hidden;
  transition: translate .45s var(--ease), visibility 0s linear .45s,
              background-color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
  background: color-mix(in srgb, var(--bg-2) 78%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.stickybar.on {
  translate: 0 0;
  visibility: visible;
  transition: translate .45s var(--ease),
              background-color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
}
.sb-inner {
  position: relative;
  width: min(1240px, 100%);
  margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 12px clamp(16px, 4vw, 56px);
}
/* colorway menu popped above the bar, anchored to the swatch */
.sb-pop {
  position: absolute;
  left: clamp(16px, 4vw, 56px);
  bottom: calc(100% + 10px);
  width: min(300px, calc(100vw - 32px));
  max-height: min(72vh, 600px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 8px;
  /* opaque on purpose: backdrop-filter is dead inside the bar's own
     backdrop root, so translucency would ghost the page through sharp */
  background-color: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  opacity: 0; visibility: hidden; translate: 0 8px;
  transition: opacity .28s var(--ease), translate .28s var(--ease),
              background-color var(--theme-fade) var(--ease),
              border-color var(--theme-fade) var(--ease),
              visibility 0s linear .28s;
}
.sb-pop.on {
  opacity: 1; visibility: visible; translate: 0 0;
  transition: opacity .28s var(--ease), translate .28s var(--ease),
              background-color var(--theme-fade) var(--ease),
              border-color var(--theme-fade) var(--ease);
}
.sbp-tier {
  display: block;
  padding: 10px 10px 4px;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  transition: color var(--theme-fade) var(--ease);
}
.sbp-item {
  appearance: none; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 10px;
  border-radius: 10px;
  font: inherit; font-size: 14px; color: var(--ink);
  transition: background-color .15s var(--ease), color var(--theme-fade) var(--ease);
}
.sbp-item:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.sbp-dot {
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
  /* same softly-dimensional recipe as the hero picker swatches */
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.34), rgba(255,255,255,.06) 42%, transparent 62%),
    var(--sw, #888);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.16),
    0 2px 5px rgba(0,0,0,.16),
    inset 0 -2px 3px rgba(0,0,0,.10);
  transition: outline-color var(--theme-fade) var(--ease);
}
.sbp-item[aria-pressed="true"] .sbp-dot {
  /* same selected treatment as the hero picker: crisp white ring + lift */
  outline: none;
  box-shadow:
    0 0 0 1px #fff,
    0 4px 9px rgba(0,0,0,.26),
    inset 0 -2px 3px rgba(0,0,0,.10);
}
.sbp-item[aria-pressed="true"] .sbp-name { font-weight: 620; }
.sbp-name { flex: 1; text-align: left; white-space: nowrap; }
.sbp-price {
  font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums;
  transition: color var(--theme-fade) var(--ease);
}
/* the picker rides on a frosted glass pill: a quiet neutral plate that
   lifts tone-on-tone swatches off the bar tint without shouting. The
   bar's own backdrop blur supplies the frost — nested backdrop-filter
   is dead inside it, so the pill is just a milk layer. */
.sb-pick {
  display: flex; align-items: center; gap: 10px;
  flex: 0 0 auto;
  padding: 6px 12px;
  background: rgba(255, 255, 255, .80);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 10px rgba(0, 0, 0, .07);
  transition: background-color var(--theme-fade) var(--ease), border-color var(--theme-fade) var(--ease);
}
/* dark colorways: smoked glass instead of milk */
body[data-mode="dark"] .sb-pick {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 10px rgba(0, 0, 0, .18);
}
.sb-step {
  appearance: none; border: 0; background: none; padding: 0;
  cursor: pointer; flex: 0 0 auto;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  color: var(--muted);
  transition: color .15s var(--ease);
}
.sb-step:hover { color: var(--ink); }
.sb-step svg { width: 16px; height: 16px; }
.sb-prev { margin-right: -6px; }
.sb-prev svg { transform: rotate(90deg); }
.sb-next { margin-left: -6px; }
.sb-next svg { transform: rotate(-90deg); }
.sb-swatch {
  appearance: none; border: 0; cursor: pointer; padding: 0;
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
  /* same softly-dimensional recipe as the hero picker swatches */
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.34), rgba(255,255,255,.06) 42%, transparent 62%),
    var(--sb-sw, #888);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.16),
    0 2px 5px rgba(0,0,0,.16),
    inset 0 -2px 3px rgba(0,0,0,.10);
  transition: transform .2s var(--ease);
}
.sb-swatch:hover { transform: scale(1.18); }
.sb-name {
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; font-size: 15px; font-weight: 560;
  color: inherit; cursor: pointer;
  white-space: nowrap;
}
.sb-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.sb-rotate {
  flex: 1;
  text-align: center;
  /* deeper than --muted: the 13.5px line must clear 4.5:1 on every
     colorway, including the low-contrast warm palettes */
  font-size: 13.5px; color: color-mix(in srgb, var(--ink) 60%, var(--muted));
  transition: opacity .5s var(--ease), color var(--theme-fade) var(--ease);
}
.sb-rotate.fade { opacity: 0; }
.sb-rotate svg {
  display: inline-block;
  width: 15px; height: 15px;
  vertical-align: -3px; margin-right: 6px;
  color: var(--accent-strong, var(--accent));
  transition: color var(--theme-fade) var(--ease);
}
.sb-rotate .sep { font-style: normal; margin: 0 10px; opacity: .55; }
.sb-price { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sb-btn { padding: 12px 22px; font-size: 15px; }
.sb-btn svg { width: 18px; height: 18px; }

/* ── responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .rev-grid { grid-template-columns: 1fr 1fr; }
  .heads-layout { grid-template-columns: 1fr; }
  .subscribe-card { position: static; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 920px) {
  .science-inner, .box-inner,
  .promise-inner, .finale-inner { grid-template-columns: 1fr; }
  .problem-stage {
    position: relative;
    width: 100%; height: auto;
    margin-top: 30px;
    mask-image: none; -webkit-mask-image: none;
    border-radius: 18px;
    overflow: hidden;
  }
  .problem-scene { height: auto; aspect-ratio: 1; }
  .plume-quote { top: 14px; right: 14px; width: min(300px, 84%); padding: 16px 20px 0; }
  .pq-big { font-size: 34px; }
  .problem-copy { max-width: 560px; }
  .promise-seal { margin: 0 auto; }
  .finale-art { max-width: 320px; margin: 0 auto; }
  .finale { text-align: center; }
  .finale .cta-block.cta-left { text-align: center; }
  .finale .cta-left .cta-micro { justify-content: center; }
  .steps { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .pro-grid { grid-template-columns: 1fr; }
  .pro-card { grid-template-columns: 1fr; }
  .pro-photo { min-height: 0; height: 320px; }
  .gentle-points { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .head-products { grid-template-columns: 1fr; }
  .check-grid { grid-template-columns: 1fr; }
  .tablist { grid-template-columns: 1fr 1fr; }
  .lab-hero { grid-template-columns: 1fr; }
  .lab-stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--lab-line); padding-top: 18px; }
  .cmp-row { grid-template-columns: 1.1fr 1fr 1fr; font-size: 13.5px; }
  .cmp-row > span { gap: 8px; padding-inline: 10px; }
  .cmp-row > .cmp-feat { padding-left: 14px; }
  .cmp-ic { display: none; }
  .cmp-row > .cmp-other { font-size: 12.5px; }
  .cmp-pill { width: 19px; height: 19px; }
  .cmp-pill svg { width: 11px; height: 11px; }
  .detail-grid { grid-template-columns: 1fr; }
  .dt-featured { min-height: 340px; }
  .sb-rotate { display: none; }
}
@media (max-width: 560px) {
  .press-stats { grid-template-columns: 1fr; gap: 10px; }
  .pstat + .pstat { border-left: 0; border-top: 1px solid var(--d-hairline); padding-top: 18px; margin-top: 8px; }
  .press-panel { flex-wrap: wrap; gap: 14px 0; }
  .pm { flex: 1 1 33%; border-left: 0; }
  .signup-form { flex-direction: column; }
  .signup-form .btn-primary { justify-content: center; }
  .rev-grid { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .sb-name { display: none; }
  .box-visual { padding: 16px; }
}

/* ── motion preferences ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.rv-enabled [data-rv] { opacity: 1; translate: none; transition: none; }
  .anim-brush .tk, .anim-dock .dock-brush, .anim-dock .dock-lid,
  .anim-uv .uv-glow, .anim-uv .uv-rays,
  .seal-spin,
  .wf-glow,
  .tex-dots, .tex-dots circle, .pr, .sun-halo, .sun-rays, .lab-led, .lp-ic svg { animation: none; }
  .pr { opacity: .2; transform: scale(.85); }
  /* whitening wipe rests at half/half; pdp.js skips the driver */
  .wh-daytag { display: none !important; }
  .stickybar { transition: none; }
  .sb-pop { transition: none; }
  .xfade img { transition: none; }
}

/* ── bristle hum tuner (B key, dev tool) ─────────────────────── */
.btuner {
  position: fixed; top: 18px; right: 18px; z-index: 400;
  width: 270px;
  background: rgba(13, 18, 24, .94);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  padding: 16px 16px 12px;
  color: #eef2f6;
  font-size: 12.5px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.btuner h3 { font-size: 13.5px; font-weight: 620; margin-bottom: 12px; }
.bt-row { display: block; margin-bottom: 10px; }
.bt-row span { display: flex; justify-content: space-between; margin-bottom: 3px; color: #c3ccd5; }
.bt-row em { font-style: normal; color: #7cc4ff; font-variant-numeric: tabular-nums; }
.bt-row input { width: 100%; accent-color: #7cc4ff; }
.bt-foot { display: flex; gap: 8px; margin-top: 4px; }
.bt-foot button {
  flex: 1; appearance: none; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08); color: #eef2f6;
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 7px 0; border-radius: 8px; cursor: pointer;
}
.bt-foot .bt-copy { background: #2563eb; border-color: #2563eb; }
.bt-hint { margin-top: 9px; font-size: 10.5px; color: #8b96a1; }

@media (max-width: 620px) {
  .gentle .sec-head h2 br { display: none; }
}

.gentle .sec-head { max-width: 900px; }

/* ── lab section: light life (twinkle, drift, check draw-on) ─────── */
@media (prefers-reduced-motion: no-preference) {
  .ls-spark path {
    --tw-base: 1;
    transform-box: fill-box; transform-origin: center;
    animation: sparkTwinkle 3.4s ease-in-out infinite;
  }
  .ls-spark path:nth-child(2) { --tw-base: .7; animation-delay: -1.2s; }
  .ls-spark path:nth-child(3) { --tw-base: .45; animation-delay: -2.3s; }

  /* checks draw on the first time a page's items appear */
  .lp-status path { stroke-dasharray: 14; stroke-dashoffset: 14; }
  .lab-carousel.in-view .lp-page.is-active .lp-status path {
    animation: checkDraw .42s var(--ease) both;
    animation-delay: calc(var(--i, 0) * .42s + .3s);   /* one check finishes before the next starts */
  }
}
@keyframes sparkTwinkle {
  0%, 100% { opacity: var(--tw-base); transform: scale(1); }
  50% { opacity: calc(var(--tw-base) * .35); transform: scale(.8); }
}
@keyframes microbeDrift {
  from { transform: translateY(2.5px) rotate(-3.5deg); }
  to   { transform: translateY(-2.5px) rotate(3.5deg); }
}
@keyframes checkDraw { from { stroke-dashoffset: 14; } to { stroke-dashoffset: 0; } }

/* ── H key: the demo cut — the extended sections are parked after the
   signup, hidden by default; H brings them back for review ── */
body.secs-hidden section[data-hidable] { display: none; }

/* ═══════════ S19c · video stories (testimonial carousel) ═══════════ */
.vtest { padding: clamp(60px, 9vh, 108px) 0; overflow: hidden; }
.vt-head { text-align: center; max-width: 780px; margin: 0 auto clamp(8px, 1.5vh, 22px); }
.vt-head .eyebrow { justify-content: center; }
.vt-sub { font-size: 18px; line-height: 1.6; color: var(--muted); margin: 0; }
.vt-rating { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; font-size: 17px; color: var(--muted); }
.vt-rating .stars svg { width: 19px; height: 19px; }
.vt-count strong { color: var(--ink); font-weight: 700; }

.vt-carousel { position: relative; }
.vt-viewport { overflow: hidden; padding: 76px 0 108px; margin-inline: calc(50% - 50vw); }
.vt-track { display: flex; align-items: center; gap: 22px; transition: transform .55s cubic-bezier(.4,0,.2,1); will-change: transform; }
.vt-card { flex: 0 0 auto; width: clamp(190px, 24vw, 300px); cursor: pointer;
  transform: scale(.82); opacity: .5; filter: brightness(.8) saturate(.92);
  transition: transform .5s cubic-bezier(.34,1.2,.4,1), opacity .5s var(--ease), filter .5s var(--ease); }
.vt-card.is-active { transform: scale(1.12); opacity: 1; filter: none; z-index: 3; }
.vt-media { position: relative; aspect-ratio: 9/16; border-radius: 20px; overflow: hidden; background: #101312;
  box-shadow: 0 12px 30px rgba(0,0,0,.16); }
.vt-card.is-active .vt-media { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 62%, transparent), 0 20px 46px rgba(0,0,0,.26); }
.vt-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vt-mute { position: absolute; top: 11px; right: 11px; width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.5); color: #fff; display: none; place-items: center; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 0; }
.vt-card.is-active .vt-mute { display: grid; }
.vt-mute svg { width: 19px; height: 19px; }
.vt-mute:hover { background: rgba(0,0,0,.74); }
/* progress doubles as a scrubber — tall transparent hitbox, thin visible bar */
.vt-progress { position: absolute; left: 12px; right: 12px; bottom: 4px; height: 22px; cursor: pointer;
  opacity: 0; transition: opacity .3s; touch-action: none; }
.vt-progress::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px;
  border-radius: 3px; background: rgba(255,255,255,.3); }
.vt-card.is-active .vt-progress { opacity: 1; }
.vt-progress span { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; width: 0;
  background: var(--accent-strong, var(--accent)); border-radius: 3px; }
.vt-progress:hover::before, .vt-progress:hover span { height: 6px; margin-top: -3px; }

.vt-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid var(--hairline); background: var(--surface, #fff); color: var(--ink); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.14); transition: background .2s, color .2s, border-color .2s; }
.vt-arrow:hover { background: var(--accent); color: #08130d; border-color: var(--accent); }
.vt-prev { left: max(8px, 3%); } .vt-next { right: max(8px, 3%); }
.vt-prev svg { width: 22px; height: 22px; transform: rotate(90deg); }
.vt-next svg { width: 22px; height: 22px; transform: rotate(-90deg); }

.vt-trust { --vt-gap: clamp(22px, 4vw, 56px); list-style: none; display: flex; justify-content: center; flex-wrap: wrap;
  gap: var(--vt-gap); margin: 0 auto; padding: 0; max-width: 920px; }
.vt-trust li { position: relative; display: flex; align-items: center; gap: 13px; }
.vt-trust li:not(:first-child)::before { content: ""; position: absolute; left: calc(var(--vt-gap) / -2); top: 3px; bottom: 3px; width: 1px; background: var(--hairline); }
.vt-ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--hairline); display: grid; place-items: center; color: var(--accent-strong, var(--accent)); }
.vt-ic svg { width: 22px; height: 22px; }
.vt-bt { display: flex; flex-direction: column; text-align: left; font-size: 14.5px; color: var(--muted); line-height: 1.4; }
.vt-bt strong { color: var(--ink); font-weight: 650; font-size: 17px; }

@media (max-width: 720px) {
  .vt-card { width: clamp(160px, 62vw, 220px); }
  .vt-arrow { width: 42px; height: 42px; }
  .vt-trust { flex-direction: column; align-items: flex-start; gap: 16px; width: -moz-fit-content; width: fit-content; }
  .vt-trust li:not(:first-child)::before { display: none; }
}