/* =====================================================================
   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;
}

/* ---------- 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
   green = verified · yellow = pending/preprint · gray = protocol-only /
   non-clinical documentation. 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-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); }

/* ---------- 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); }
}

/* =====================================================================
   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).
   Mobile: horizontal scroll, no dropdown.
   ===================================================================== */
body.page-product .pd-subnav{
  position: sticky; top: 64px; 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); }

/* =====================================================================
   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); }
}