/* =====================================================================
   product.html — page-scoped design system
   Loaded ONLY by product.html. Every rule below is scoped under
   `body.page-product` (or targets a brand-new class) so corporate.html /
   investor.html / leadership-messages.html — which reuse .card, .tag,
   .narrative-*, .section--gray etc. — are completely unaffected.
   Hero uses the shared .hero--clean variant (style.css) — no page-scoped
   hero rules live here.
   ===================================================================== */

:root{
  /* Type scale 1 — Headings (3 defined steps) */
  --pd-h1: clamp(38px,5vw,60px);
  --pd-h2: clamp(28px,3.4vw,40px);
  --pd-h3: 20px;

  /* Type scale 2 — Body / UI (4 defined steps) */
  --pd-body-lg: 18px;
  --pd-body: 16px;
  --pd-ui: 14px;
  --pd-micro: 12px;

  /* 8px spacing grid */
  --pd-sp-1: 4px;
  --pd-sp-2: 8px;
  --pd-sp-3: 16px;
  --pd-sp-4: 24px;
  --pd-sp-5: 32px;
  --pd-sp-6: 48px;
  --pd-sp-7: 64px;
  --pd-sp-8: 96px;

  /* Core palette: exactly 3 brand colours + neutrals (neutrals reuse the existing --gray-N, --white, --ink tokens) */
  --pd-primary: var(--blue);
  --pd-primary-dim: var(--blue-dim);
  --pd-secondary: var(--teal);
  --pd-secondary-dim: var(--teal-dim);
  --pd-ink: var(--ink);

  /* Semantic status tokens (badges only — functional, not part of the 3-colour brand cap) */
  --pd-green: #1a7a4c;
  --pd-green-bg: #e6f4ec;
  --pd-green-line: #bfe2cd;
  --pd-yellow: #92650a;
  --pd-yellow-bg: #fbf1de;
  --pd-yellow-line: #f0dcae;
  --pd-gray: #565e6c;
  --pd-gray-bg: #eef0f3;
  --pd-gray-line: #dadde3;
  --pd-blue: #1850e1;
  --pd-blue-bg: #eaf0fd;
  --pd-blue-line: #c7d7fb;
}

/* ---------- Section rhythm: alternating backgrounds ---------- */
/* 2026-08-28 IA reorder: how-it-works(cool tint) -> clinical(neutral gray,
   unchanged .section--gray) -> certifications(white) -> story(light gray,
   new rule below so it doesn't sit white-on-white against certifications)
   -> for-clinics(existing accent). ID specificity overrides the shared
   .section--gray rule only on this one section, on this one page. */
body.page-product #how-it-works{
  background: linear-gradient(180deg,#f2f6fc 0%,#eef2f9 100%);
}
body.page-product #certifications{ background: var(--white); }
body.page-product #story{ background: var(--gray-100); }

/* ---------- Eyebrow accent dot: swap lime for teal outside the hero (keeps the 3-colour cap) ---------- */
body.page-product .section .eyebrow::before{ background: var(--pd-secondary); }

/* =====================================================================
   1) Numbered timeline — Story section (#story)
   ===================================================================== */
body.page-product #story .narrative-beats{ counter-reset: pd-step; }
body.page-product #story .narrative-beat{ counter-increment: pd-step; gap: var(--pd-sp-4); padding: var(--pd-sp-5) 0; }
body.page-product #story .narrative-beat__node{
  width: 40px; height: 40px; margin-top: 0; flex: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); border: 2px solid var(--gray-300);
}
body.page-product #story .narrative-beat__node::before{
  content: counter(pd-step);
  font-size: var(--pd-ui); font-weight: 700; color: var(--gray-500);
  transition: color .5s var(--ease);
}
body.page-product #story .narrative-beat.in .narrative-beat__node{ background: var(--pd-primary); border-color: var(--pd-primary); }
body.page-product #story .narrative-beat.in .narrative-beat__node::before{ color: var(--white); }
body.page-product #story .narrative-beat--outcome .narrative-beat__node::before{ color: var(--gray-500); }
body.page-product #story .narrative-beat--outcome.in .narrative-beat__node{ background: var(--pd-secondary); border-color: var(--pd-secondary); }
body.page-product #story .narrative-beat--outcome.in .narrative-beat__node::before{ color: var(--pd-ink); }
/* recentre the connecting line under the new 40px badge (was tuned for the old 14px dot) */
body.page-product #story .narrative-track__base,
body.page-product #story .narrative-track__progress{ left: 19px; }
@media (max-width: 640px){
  body.page-product #story .narrative-beat{ gap: var(--pd-sp-3); padding: var(--pd-sp-4) 0; }
  body.page-product #story .narrative-beat__node{ width: 32px; height: 32px; }
  body.page-product #story .narrative-beat__node::before{ font-size: var(--pd-micro); }
  body.page-product #story .narrative-track__base,
  body.page-product #story .narrative-track__progress{ left: 15px; }
}

/* =====================================================================
   2) Pathway — real horizontal process graphic w/ SVG arrows (#how-it-works)
   ===================================================================== */
body.page-product .pathway-flow{
  display: flex; align-items: flex-start; gap: var(--pd-sp-2);
  margin-top: var(--pd-sp-6);
}
body.page-product .pathway-flow__node{ flex: 1 1 0; min-width: 0; gap: var(--pd-sp-3); }
body.page-product .pathway-flow__arrow{
  flex: none; width: 24px; height: 24px; margin-top: 18px; /* centres on the 60px icon circle */
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-300); opacity: 0; transform: translateX(-6px);
  transition: opacity .6s var(--ease) .3s, transform .6s var(--ease) .3s, color .4s var(--ease);
}
body.page-product .pathway-flow__arrow svg{ width: 20px; height: 20px; }
body.page-product .pathway-flow.in .pathway-flow__arrow{ opacity: 1; transform: translateX(0); color: var(--pd-secondary); }
body.page-product .pathway-flow__icon{ border-color: var(--gray-100); }
/* Arrow spans were inserted between nodes, shifting nth-child positions —
   restore the correct per-node stagger delay (was tuned for node-only children). */
body.page-product .pathway-flow.in .pathway-flow__node:nth-child(3){ transition-delay: 0s; }
body.page-product .pathway-flow.in .pathway-flow__node:nth-child(4){ transition-delay: .12s; }
body.page-product .pathway-flow.in .pathway-flow__node:nth-child(5){ transition-delay: 0s; }
body.page-product .pathway-flow.in .pathway-flow__node:nth-child(6){ transition-delay: .24s; }
body.page-product .pathway-flow.in .pathway-flow__node:nth-child(7){ transition-delay: 0s; }
body.page-product .pathway-flow.in .pathway-flow__node:nth-child(8){ transition-delay: .36s; }
body.page-product .pathway-flow.in .pathway-flow__node:nth-child(9){ transition-delay: 0s; }
body.page-product .pathway-flow.in .pathway-flow__node:nth-child(10){ transition-delay: .48s; }
@media (max-width: 760px){
  body.page-product .pathway-flow{ flex-direction: column; gap: 0; }
  body.page-product .pathway-flow__arrow{
    width: 100%; height: auto; margin: 0; padding: var(--pd-sp-2) 0;
    transform: none; justify-content: flex-start; padding-left: 15px;
  }
  body.page-product .pathway-flow__arrow svg{ transform: rotate(90deg); }
  body.page-product .pathway-flow.in .pathway-flow__arrow{ transform: none; }
}

/* =====================================================================
   3) Evidence & certification cards -> colour-coded status badges.
   Phase 5: recoded to a STATUS taxonomy, not an approval taxonomy —
   blue = analytical/lab-only info · amber = preprint/protocol/ongoing ·
   gray = contextual or expert-support (non-clinical). Green is reserved
   and intentionally UNUSED here: no card on this page is a completed,
   peer-reviewed clinical-performance validation, so no badge should read
   as an approval stamp. Card + chip share one status modifier.
   ===================================================================== */
body.page-product .pd-card{ position: relative; overflow: hidden; }
body.page-product .pd-card::before{
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--gray-200, var(--gray-300));
}
body.page-product .pd-card--green::before{ background: var(--pd-green); }
body.page-product .pd-card--yellow::before{ background: var(--pd-yellow); }
body.page-product .pd-card--gray::before{ background: var(--pd-gray); }
body.page-product .pd-card--blue::before{ background: var(--pd-blue); }

body.page-product .pd-badge{
  display: inline-flex; align-items: center; gap: var(--pd-sp-2);
  font-size: var(--pd-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  padding: var(--pd-sp-1) var(--pd-sp-3);
  border-radius: 999px; border: 1px solid transparent;
}
body.page-product .pd-badge::before{ content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none; }
body.page-product .pd-badge--green{ background: var(--pd-green-bg); color: var(--pd-green); border-color: var(--pd-green-line); }
body.page-product .pd-badge--green::before{ background: var(--pd-green); }
body.page-product .pd-badge--yellow{ background: var(--pd-yellow-bg); color: var(--pd-yellow); border-color: var(--pd-yellow-line); }
body.page-product .pd-badge--yellow::before{ background: var(--pd-yellow); }
body.page-product .pd-badge--gray{ background: var(--pd-gray-bg); color: var(--pd-gray); border-color: var(--pd-gray-line); }
body.page-product .pd-badge--gray::before{ background: var(--pd-gray); }
body.page-product .pd-badge--blue{ background: var(--pd-blue-bg); color: var(--pd-blue); border-color: var(--pd-blue-line); }
body.page-product .pd-badge--blue::before{ background: var(--pd-blue); }

/* =====================================================================
   3b) Phase 5 — evidence filters + card anatomy (What this shows /
   Important limitation / Details and source accordion). The limitation
   block must never be visually de-emphasised below the "shows" text —
   same size, same weight, just colour-flagged.
   ===================================================================== */
body.page-product .evidence-filters{
  display: flex; flex-wrap: wrap; gap: var(--pd-sp-2);
  margin-top: var(--pd-sp-5); margin-bottom: var(--pd-sp-5);
}
body.page-product .evidence-filter{
  flex: none; font-family: inherit; font-size: var(--pd-ui); font-weight: 600;
  color: var(--gray-700); background: var(--white); border: 1px solid var(--gray-300);
  border-radius: 999px; padding: 9px 18px; cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
body.page-product .evidence-filter:hover{ border-color: var(--pd-primary); color: var(--pd-primary); }
body.page-product .evidence-filter:focus-visible{ outline: 2px solid var(--pd-primary); outline-offset: 2px; }
body.page-product .evidence-filter.is-active{
  background: var(--pd-primary); border-color: var(--pd-primary); color: var(--white);
}
@media (max-width: 640px){
  body.page-product .evidence-filters{
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  body.page-product .evidence-filters::-webkit-scrollbar{ display: none; }
}

body.page-product .evidence-card{
  display: flex; flex-direction: column;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
body.page-product .evidence-card.is-filtered-out{ opacity: 0; transform: translateY(6px); }
body.page-product .evidence-card__label{
  margin-top: var(--pd-sp-4); margin-bottom: var(--pd-sp-1);
  font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--gray-500);
}
body.page-product .evidence-card__limitation{
  margin-top: var(--pd-sp-3); padding: var(--pd-sp-3) var(--pd-sp-4);
  background: var(--gray-100); border-left: 3px solid var(--pd-yellow); border-radius: 0 10px 10px 0;
}
body.page-product .evidence-card--blue .evidence-card__limitation,
body.page-product .pd-card--blue .evidence-card__limitation{ border-left-color: var(--pd-blue); }
body.page-product .pd-card--gray .evidence-card__limitation{ border-left-color: var(--pd-gray); }
body.page-product .evidence-card__limitation .evidence-card__label--limitation{ margin-top: 0; color: var(--pd-ink); }
body.page-product .evidence-card__limitation p:last-child{ margin: 0; font-size: var(--pd-body); color: var(--gray-700); }

body.page-product .evidence-card__details{
  margin-top: var(--pd-sp-3); padding-top: var(--pd-sp-3); border-top: 1px solid var(--gray-100);
}
body.page-product .evidence-card__details summary{
  display: flex; align-items: center; justify-content: space-between; gap: var(--pd-sp-3);
  font-size: var(--pd-ui); font-weight: 600; color: var(--pd-primary);
  cursor: pointer; list-style: none; padding: var(--pd-sp-1) 0;
}
body.page-product .evidence-card__details summary::-webkit-details-marker{ display: none; }
body.page-product .evidence-card__details-icon{
  flex: none; width: 18px; height: 18px; color: var(--pd-primary);
  transition: transform .25s var(--ease);
}
body.page-product .evidence-card__details[open] .evidence-card__details-icon{ transform: rotate(45deg); }
body.page-product .evidence-card__details summary:focus-visible{
  outline: 2px solid var(--pd-primary); outline-offset: 4px; border-radius: 8px;
}
body.page-product .evidence-card__details-body{
  margin-top: var(--pd-sp-2); font-size: var(--pd-ui); color: var(--gray-500); line-height: 1.6;
}
body.page-product .evidence-empty{
  margin-top: var(--pd-sp-5); text-align: center; font-size: var(--pd-body); color: var(--gray-500);
}
@media (prefers-reduced-motion: reduce){
  body.page-product .evidence-filter,
  body.page-product .evidence-card,
  body.page-product .evidence-card__details-icon{ transition: none !important; }
}

/* ---------- Heading / body scale applied to the new sections ---------- */
body.page-product .section-head h2{ font-size: var(--pd-h2); }
body.page-product #story .narrative-beat h3{ font-size: var(--pd-h3); }
body.page-product .card h3{ font-size: var(--pd-h3); }
body.page-product .pathway-flow__label{ font-size: var(--pd-ui); }
body.page-product .card p,
body.page-product .caveat{ font-size: var(--pd-body); }
body.page-product .section-head p{ font-size: var(--pd-body-lg); }

/* =====================================================================
   4) "At a glance" strip — directly under the hero, 4 fact bullets
   ===================================================================== */
body.page-product .pd-glance{ padding: 0 32px var(--pd-sp-7); background: var(--white); }
body.page-product .pd-glance__list{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4,1fr); gap: var(--pd-sp-3);
  max-width: var(--max); margin-left: auto; margin-right: auto;
}
body.page-product .pd-glance__item{
  position: relative; padding: var(--pd-sp-4) var(--pd-sp-4) var(--pd-sp-4) 40px;
  background: var(--gray-100); border-radius: 14px;
  font-size: var(--pd-ui); line-height: 1.5; color: var(--gray-700);
}
body.page-product .pd-glance__item::before{
  content: ''; position: absolute; left: var(--pd-sp-4); top: var(--pd-sp-4);
  width: 8px; height: 8px; border-radius: 50%; background: var(--pd-secondary);
}
@media (max-width: 960px){
  body.page-product .pd-glance__list{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  body.page-product .pd-glance{ padding: 0 20px var(--pd-sp-6); }
  body.page-product .pd-glance__list{ grid-template-columns: 1fr; }
}
@media (max-width: 430px){
  body.page-product .pd-glance{ padding: 0 16px var(--pd-sp-5); }
}

/* =====================================================================
   4b) Announcement marquee banner pushes .nav (and its mobile dropdown)
   and .pd-subnav down by its 36px height. The real values already live
   in product.html's critical inline <style> (first paint); these are
   the higher-specificity (body.page-product ...) counterparts so the
   offset survives once css/style.css's own .nav{top:0} swaps in —
   without touching style.css, which every other page also loads.
   ===================================================================== */
body.page-product .nav{ top: 36px; }
@media (max-width:860px){
  body.page-product .nav__links{ top: 100px; }
}

/* =====================================================================
   5) Sticky sub-navigation — 5 main sections, scroll-spy active state
   (see [data-pd-subnav-link] observer in js/main.js). Sits below the
   fixed .nav (64px tall, same convention as .nav__links top offset) —
   now +36px for the announcement banner above it (see 4b).
   Mobile: horizontal scroll, no dropdown.
   ===================================================================== */
body.page-product .pd-subnav{
  position: sticky; top: 100px; z-index: 40;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(11,14,20,.06);
}
body.page-product .pd-subnav__wrap{
  display: flex; align-items: center; gap: var(--pd-sp-2);
  overflow-x: auto; scrollbar-width: none;
  padding-top: var(--pd-sp-3); padding-bottom: var(--pd-sp-3);
}
body.page-product .pd-subnav__wrap::-webkit-scrollbar{ display: none; }
body.page-product .pd-subnav__link{
  flex: none; font-size: var(--pd-ui); font-weight: 600; color: var(--gray-500);
  padding: 8px 16px; border-radius: 999px; white-space: nowrap;
  transition: all .25s var(--ease);
}
body.page-product .pd-subnav__link:hover{ color: var(--pd-ink); background: var(--gray-100); }
body.page-product .pd-subnav__link.is-active{ color: var(--white); background: var(--pd-primary); }
@media (max-width: 640px){
  body.page-product .pd-subnav__wrap{ padding-left: 4px; }
}

/* ---------- Standalone one-sentence lede (sections without .section-head, e.g. #for-clinics) ---------- */
body.page-product .section-lede{ margin-top: var(--pd-sp-3); font-size: var(--pd-body-lg); color: var(--gray-700); }

/* =====================================================================
   5b) Kit contents video — "What's in the box" (#box-contents .box-hero)
   Ambient looping clip in the split layout's right column, replacing the
   static packshot photo. Plain autoplay/muted/loop, no scroll-scrub.
   ROOT CAUSE of the visible "Kante" (measured via ffmpeg frame extraction
   + PIL pixel sampling, not guessed): the clip's own background was only
   NEAR-white (~#f2f3f6-#fafbfd, byte-close to --gray-100 but never
   identical) and had its own soft radial vignette darkening toward the
   edges. mix-blend-mode:multiply COMPOUNDS two near-white-but-not-pure
   values, so the blended result landed ~8-14 RGB units darker than the
   true section bg — a uniformly duller rectangle, darkest right at the
   vignette's edges — which is exactly what read as a hard boundary.
   (A mask-image feather was tried first to hide that boundary instead of
   fixing it, but relocating a real color mismatch just traded a
   rectangular edge for an equally visible soft oval one — masking a
   wrong color is not a fix.) Correct fix, applied at the source: the
   video was re-encoded (ffmpeg curves filter, master '0/0 205/205
   230/255 255/255') so every near-white background/vignette pixel clips
   to pure #ffffff, verified via PIL sampling all 4 edges/corners across
   the whole encoded loop = exactly (255,255,255) everywhere, while the
   product graphics (well below the 205 knee) are untouched pixel-for-
   pixel. multiply(white, X) = X identically for any X, so the blended
   result now matches the section's true --gray-100 background exactly,
   not approximately — no mask needed. Background is set explicitly on
   .box-hero (not inherited) because .reveal's scroll-in transform
   establishes a new stacking context on this element, which would
   otherwise cut the blend off from the page's own background. Column
   ratio (0.77fr/1.23fr, was 1fr/1fr) and the raised wrap max-width make
   the video noticeably bigger at every viewport without shrinking the
   left contents list or breaking the 900px stacking breakpoint.
   ===================================================================== */
#box-contents .wrap.split{
  max-width: 1400px;
  grid-template-columns: 0.77fr 1.23fr;
}
@media (max-width: 900px){ #box-contents .wrap.split{ grid-template-columns: 1fr; } }
body.page-product .box-hero{
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: var(--pd-sp-5) 0; background: var(--gray-100);
}
body.page-product .box-video{
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; mix-blend-mode: multiply;
}

/* =====================================================================
   6) 3-path CTA structure — For clinics footer + repeated strip after
   Clinical Evidence. Buttons (not links): they open the enquiry modal
   with the matching "Interest" preselected via [data-cta-interest].
   ===================================================================== */
body.page-product .pd-ctapaths{
  display: grid; grid-template-columns: repeat(3,1fr); gap: var(--pd-sp-3);
}
body.page-product .pd-ctapath{
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--pd-sp-2);
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--white); border: 1px solid var(--gray-100); border-radius: 16px;
  padding: var(--pd-sp-4); width: 100%;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
body.page-product .pd-ctapath:hover,
body.page-product .pd-ctapath:focus-visible{
  box-shadow: 0 20px 40px -22px rgba(11,14,20,.2); border-color: transparent;
}
body.page-product .pd-ctapath__icon{
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  background: var(--gray-100); color: var(--pd-secondary);
  display: flex; align-items: center; justify-content: center;
}
body.page-product .pd-ctapath__icon svg{ width: 20px; height: 20px; }
body.page-product .pd-ctapath__label{ font-size: var(--pd-body); font-weight: 700; color: var(--pd-ink); }
body.page-product .pd-ctapath__audience{ font-size: var(--pd-ui); color: var(--gray-500); }

/* Compact variant used in the repeated mid-page strip: horizontal row, icon + label only. */
body.page-product .pd-ctapaths--compact{ grid-template-columns: repeat(3,1fr); gap: var(--pd-sp-3); margin-top: var(--pd-sp-5); }
body.page-product .pd-ctapath--compact{
  flex-direction: row; align-items: center; gap: var(--pd-sp-3); padding: var(--pd-sp-3) var(--pd-sp-4);
}
body.page-product .pd-ctapath--compact .pd-ctapath__icon{ width: 36px; height: 36px; }
body.page-product .pd-ctapath--compact .pd-ctapath__label{ font-size: var(--pd-ui); }

body.page-product .pd-cta-strip{ padding: var(--pd-sp-7) 32px; background: linear-gradient(180deg,#f2f6fc 0%,#eef2f9 100%); }
body.page-product .pd-cta-strip__head{ max-width: 520px; margin: 0 auto; text-align: center; }
body.page-product .pd-cta-strip__head h2{ font-size: var(--pd-h3); }
body.page-product .pd-cta-strip__head p{ margin-top: var(--pd-sp-1); font-size: var(--pd-body); color: var(--gray-700); }
body.page-product .pd-cta-strip .pd-ctapaths--compact{ max-width: var(--max); margin: var(--pd-sp-5) auto 0; }

@media (max-width: 760px){
  body.page-product .pd-ctapaths,
  body.page-product .pd-ctapaths--compact{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  body.page-product .pd-cta-strip{ padding: var(--pd-sp-6) 20px; }
}

/* =====================================================================
   7) Enquiry modal + form
   ===================================================================== */
html.pd-modal-open,
html.pd-modal-open body{ overflow: hidden; }
body.page-product .pd-modal{
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: var(--pd-sp-3);
}
body.page-product .pd-modal[hidden]{ display: none; }
body.page-product .pd-modal__backdrop{
  position: absolute; inset: 0; background: rgba(11,14,20,.5); backdrop-filter: blur(3px);
}
body.page-product .pd-modal__panel{
  position: relative; z-index: 1; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  background: var(--white); border-radius: 20px; padding: var(--pd-sp-6) var(--pd-sp-5) var(--pd-sp-5);
  box-shadow: 0 40px 80px -24px rgba(11,14,20,.4);
  animation: pdModalIn .28s var(--ease);
}
@keyframes pdModalIn{ from{ opacity:0; transform: translateY(16px) scale(.98); } to{ opacity:1; transform: translateY(0) scale(1); } }
body.page-product .pd-modal__close{
  position: absolute; top: var(--pd-sp-4); right: var(--pd-sp-4);
  width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--gray-100); color: var(--gray-700);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
body.page-product .pd-modal__close:hover{ background: var(--gray-300); color: var(--pd-ink); }
body.page-product .pd-modal__close svg{ width: 16px; height: 16px; }
body.page-product .pd-modal__panel h3{ font-size: var(--pd-h2); padding-right: var(--pd-sp-6); }
body.page-product .pd-modal__sub{ margin-top: var(--pd-sp-2); font-size: var(--pd-body); color: var(--gray-700); }

body.page-product .pd-form{ margin-top: var(--pd-sp-5); display: flex; flex-direction: column; gap: var(--pd-sp-4); }
body.page-product .pd-form__row{ display: flex; flex-direction: column; gap: 6px; }
body.page-product .pd-form__row-split{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--pd-sp-4); }
body.page-product .pd-form__row-split > .pd-form__row{ min-width: 0; }
body.page-product .pd-form__row-split input{ width: 100%; }
body.page-product .pd-form label{ font-size: var(--pd-ui); font-weight: 700; color: var(--pd-ink); }
body.page-product .pd-form label span{ color: var(--pd-yellow); font-weight: 700; }
body.page-product .pd-form input,
body.page-product .pd-form select,
body.page-product .pd-form textarea{
  font: inherit; font-size: var(--pd-body); color: var(--pd-ink);
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--gray-300); background: var(--white);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
body.page-product .pd-form input:focus,
body.page-product .pd-form select:focus,
body.page-product .pd-form textarea:focus{
  outline: none; border-color: var(--pd-primary); box-shadow: 0 0 0 3px rgba(24,80,225,.14);
}
body.page-product .pd-form textarea{ resize: vertical; min-height: 88px; }
body.page-product .pd-form__row.has-error input,
body.page-product .pd-form__row.has-error select,
body.page-product .pd-form__row.has-error textarea{
  border-color: var(--pd-yellow);
}
body.page-product .pd-form__error{
  font-size: var(--pd-micro); color: var(--pd-yellow); min-height: 1em; display: none;
}
body.page-product .pd-form__row.has-error .pd-form__error{ display: block; }
body.page-product .pd-form__privacy{ font-size: var(--pd-micro); color: var(--gray-500); line-height: 1.5; }
body.page-product .pd-form__privacy a{ color: var(--pd-primary); text-decoration: underline; }
body.page-product .pd-form__submit{ align-self: flex-start; }
body.page-product .pd-form__success{
  font-size: var(--pd-body); color: var(--pd-green); background: var(--pd-green-bg);
  border: 1px solid var(--pd-green-line); border-radius: 12px; padding: var(--pd-sp-3) var(--pd-sp-4);
}
body.page-product .pd-form__success a{ color: var(--pd-green); font-weight: 700; }
body.page-product .pd-form.is-submitted input,
body.page-product .pd-form.is-submitted select,
body.page-product .pd-form.is-submitted textarea,
body.page-product .pd-form.is-submitted .pd-form__submit,
body.page-product .pd-form.is-submitted .pd-form__privacy{ display: none; }

@media (max-width: 640px){
  body.page-product .pd-form__row-split{ grid-template-columns: 1fr; }
  body.page-product .pd-modal__panel{ padding: var(--pd-sp-5) var(--pd-sp-4) var(--pd-sp-4); border-radius: 16px; }
}

/* =====================================================================
   8) Sticky mobile CTA bar — the 3 paths, always reachable at the
   viewport bottom on small screens only. Sits ABOVE page content
   (fixed, own stacking context) so it never collides with the
   top-sticky .pd-subnav (different edge, no overlap possible); z-index
   kept below the fixed .nav (100) and the modal (200).
   ===================================================================== */
body.page-product .pd-stickycta{ display: none; }
@media (max-width: 760px){
  body.page-product .pd-stickycta{
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: rgba(255,255,255,.92); backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-top: 1px solid rgba(11,14,20,.08);
    padding: 8px max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right));
    box-shadow: 0 -8px 24px -16px rgba(11,14,20,.16);
  }
  body.page-product .pd-stickycta__btn{
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 4px; border: none; background: none; font: inherit; cursor: pointer;
    color: var(--gray-500); border-radius: 12px; transition: color .2s var(--ease), background .2s var(--ease);
  }
  body.page-product .pd-stickycta__btn:active,
  body.page-product .pd-stickycta__btn:focus-visible{ color: var(--pd-primary); background: var(--gray-100); }
  body.page-product .pd-stickycta__icon{ width: 20px; height: 20px; }
  body.page-product .pd-stickycta__icon svg{ width: 100%; height: 100%; }
  body.page-product .pd-stickycta__btn span:last-child{ font-size: 12px; font-weight: 600; white-space: nowrap; }
  /* keep the last section's content clear of the fixed bar */
  body.page-product .footer{ padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* =====================================================================
   9) Trust table ("Status at a glance") — semantic <table> summarising
   the Certifications cards above; content is a 1:1 restatement of those
   cards, not new claims. Reuses the existing pd-badge status-chip system.
   ===================================================================== */
body.page-product .pd-trust{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.page-product .pd-trust table{
  width: 100%; border-collapse: collapse; min-width: 640px;
  background: var(--white); border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 0 var(--gray-100);
}
body.page-product .pd-trust caption{
  text-align: left; font-size: var(--pd-body); font-weight: 700; color: var(--pd-ink);
  padding: 0 0 var(--pd-sp-3);
}
body.page-product .pd-trust th,
body.page-product .pd-trust td{
  text-align: left; padding: var(--pd-sp-3) var(--pd-sp-4); font-size: var(--pd-ui);
  border-bottom: 1px solid var(--gray-100); vertical-align: top;
}
body.page-product .pd-trust thead th{
  font-size: var(--pd-micro); text-transform: uppercase; letter-spacing: .07em;
  color: var(--gray-500); background: var(--gray-100); font-weight: 700;
}
body.page-product .pd-trust tbody th{ font-weight: 700; color: var(--pd-ink); white-space: nowrap; }
body.page-product .pd-trust tbody tr:last-child td,
body.page-product .pd-trust tbody tr:last-child th{ border-bottom: none; }
body.page-product .pd-trust__open{ color: var(--pd-yellow); font-style: italic; font-weight: 600; }

/* =====================================================================
   10) FAQ accordion — native <details>/<summary> (built-in keyboard +
   AT semantics, no custom ARIA/JS needed).
   ===================================================================== */
body.page-product .pd-faq{ max-width: 820px; margin: 0 auto; }
body.page-product .pd-faq__item{
  border-bottom: 1px solid var(--gray-100); padding: var(--pd-sp-3) 0;
}
body.page-product .pd-faq__item summary{
  display: flex; align-items: center; justify-content: space-between; gap: var(--pd-sp-3);
  font-size: var(--pd-body-lg); font-weight: 600; color: var(--pd-ink);
  cursor: pointer; list-style: none; padding: var(--pd-sp-2) 0;
}
body.page-product .pd-faq__item summary::-webkit-details-marker{ display: none; }
body.page-product .pd-faq__icon{
  flex: none; width: 22px; height: 22px; color: var(--gray-500);
  transition: transform .25s var(--ease);
}
body.page-product .pd-faq__item[open] .pd-faq__icon{ transform: rotate(45deg); }
body.page-product .pd-faq__item summary:focus-visible{
  outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 8px;
}
body.page-product .pd-faq__answer{
  font-size: var(--pd-body); color: var(--gray-700); line-height: 1.65;
  padding: 0 0 var(--pd-sp-2);
  max-width: 68ch;
}
body.page-product .pd-faq__answer .pd-trust__open{ display: inline; }
@media (max-width: 640px){
  body.page-product .pd-faq__item summary{ font-size: var(--pd-body); }
}