/* ==========================================================================
   Respyre — Marketing site stylesheet
   Harmonized design system: brand core (dominant) + supplementary healthcare
   neutrals/accent (tuned). See design-system notes in the project plan.
   ========================================================================== */

/* ---- 1. Design tokens ---------------------------------------------------- */
:root {
  /* Brand core (identity — dominant) */
  --navy: #1B2347;
  --navy-700: #232c57;
  --navy-600: #2c3766;
  --sky: #4AA8DC;            /* primary accent */
  --sky-300: #8fcdee;
  --offwhite: #F7F5F1;
  --green: #5CB88A;
  --green-700: #3f9d70;
  --charcoal: #2E2E33;
  --white: #FFFFFF;

  /* Supplementary (from ui-ux-pro-max healthcare palette — harmonized) */
  --amber: #C9810B;          /* warm spark only; tuned down from #D97706 */
  --amber-text: #9A6206;     /* amber as TEXT on light bg (AA 4.5:1) */
  --amber-soft: #E9A93A;
  --warm-grey: #6f6962;      /* secondary text on light (AA on offwhite) */
  --warm-grey-soft: #97908a; /* captions / subtle labels */
  --border: #EAE7E2;
  --muted-surface: #F1EEE9;
  --sky-50: #f0f8ff;
  --destructive: #DC2626;

  /* Semantic */
  --bg: var(--offwhite);
  --text: var(--charcoal);
  --text-strong: var(--navy);   /* headings / emphasised text — flips in dark mode */
  --text-muted: var(--warm-grey);
  /* status text (tuned for light surfaces; flipped lighter in dark mode) */
  --status-ok:      #1a7a3c;
  --status-warn:    #7c5a00;
  --status-caution: #b45309;
  --status-bad:     #b91c1c;
  --link: #1f6f9e;           /* sky tuned darker for AA (4.5:1) on light */
  --ring: var(--sky);

  /* Type scale */
  --font-head: 'Sora', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --fs-base: 1.125rem;       /* 18px — audience skews 50–70 */

  /* Space + shape */
  --maxw: 1140px;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(27,35,71,.06), 0 4px 12px rgba(27,35,71,.05);
  --shadow-md: 0 8px 28px rgba(27,35,71,.10);
  --shadow-lg: 0 24px 60px rgba(27,35,71,.16);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --header-h: 74px;
}

/* ---- 2. Reset / base ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--text-strong);
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-weight: 700;
}
h1 { font-size: clamp(2.3rem, 6vw, 4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.85rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
/* p max-width is set per-context below — no global blanket cap here */

:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- 3. Layout helpers -------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}
.container--narrow {
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}
.section { padding-block: clamp(4rem, 9vw, 8rem); position: relative; }
.section--muted { background: var(--muted-surface); }
.section--navy { background: var(--navy); color: rgba(255,255,255,.86); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }
/* cards stay light surfaces inside navy sections — their headings must stay dark (light mode) */
.section--navy .card h3 { color: var(--text-strong); }

.eyebrow {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #1f6f9e;            /* deep sky — small label needs AA 4.5:1 on light */
  display: inline-flex; align-items: center; gap: .5rem;
}
.section--navy .eyebrow { color: var(--sky-300); }
.lead { font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--text-muted); }
.section--navy .lead { color: rgba(255,255,255,.8); }
.muted { color: var(--text-muted); }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--navy); color: #fff; padding: .7rem 1.1rem;
  border-radius: 10px; transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* ---- 4. Buttons --------------------------------------------------------- */
.btn {
  --bg: var(--sky);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-head); font-weight: 600; font-size: 1.02rem;
  line-height: 1; min-height: 52px; padding: 0 1.5rem;
  border-radius: var(--radius-pill); border: 2px solid transparent;
  cursor: pointer; background: var(--bg); color: #fff;
  touch-action: manipulation;
  transition: transform .18s var(--ease-out), box-shadow .2s var(--ease-out), background .2s var(--ease-out);
  text-decoration: none; box-shadow: var(--shadow-sm);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--sky); color: #06263a; font-weight: 700; }
.btn--primary:hover { background: var(--sky-300); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-600); }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; box-shadow: none; }
.btn--ghost:hover { background: rgba(255,255,255,.08); }
.btn--ghost-dark { background: transparent; border-color: var(--border); color: var(--text-strong); box-shadow: none; }
.btn--ghost-dark:hover { background: var(--muted-surface); }
.section--navy .btn--ghost-dark { background: transparent; border-color: rgba(255,255,255,.65); color: #fff; }
.section--navy .btn--ghost-dark:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn .icon { width: 20px; height: 20px; }

/* warm "free" badge — the one place amber leads */
.badge-free {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(201,129,11,.14); color: var(--amber);
  border: 1px solid rgba(201,129,11,.35);
  font-family: var(--font-head); font-weight: 700; font-size: .82rem;
  letter-spacing: .03em; padding: .4rem .85rem; border-radius: var(--radius-pill);
  max-width: 100%; text-align: left;
}
.badge-free span, .badge-free { white-space: normal; }
.section--navy .badge-free { background: rgba(233,169,58,.16); color: var(--amber-soft); border-color: rgba(233,169,58,.4); }

/* ---- 5. Header / nav ---------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  /* Solid fallback eliminates Lenis + backdrop-filter compositing flicker on Safari/iOS */
  background: rgba(27,35,71,.96);
  border-bottom: 1px solid rgba(255,255,255,.08);
  /* Force a stable GPU compositing layer so sticky never drops on momentum scroll */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.scroll-progress {
  position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: left center; will-change: transform;
  background: linear-gradient(90deg, var(--sky), var(--green));
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
}
.nav__brand { display: inline-flex; align-items: center; gap: .65rem; margin-right: auto; }
.nav__brand img {
  height: 42px; width: auto;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.45));
  transition: transform .22s var(--ease-out), filter .22s var(--ease-out);
}
.nav__brand:hover { text-decoration: none; }
.nav__brand:hover img { transform: scale(1.05); filter: drop-shadow(0 5px 16px rgba(74,168,220,.5)); }
.nav__menu { display: flex; align-items: center; gap: .75rem; }
.nav__links { display: flex; align-items: center; gap: .1rem; list-style: none; padding: 0; }
.nav__links a {
  color: rgba(255,255,255,.82); font-family: var(--font-head); font-weight: 500;
  font-size: .92rem; padding: .6rem .65rem; border-radius: 10px;
  white-space: nowrap;
  transition: background .18s var(--ease-out), color .18s var(--ease-out);
}
.nav__links a:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.nav__links a[aria-current="page"] { color: #fff; background: rgba(74,168,220,.22); }
.nav__cta { margin-left: .5rem; }
.nav__cta .btn { min-height: 40px; padding: 0 1.05rem; font-size: .88rem; box-shadow: none; white-space: nowrap; }
.nav__toggle {
  display: none; background: transparent; border: 0; color: #fff; cursor: pointer;
  width: 48px; height: 48px; align-items: center; justify-content: center;
}
.nav__toggle svg { width: 28px; height: 28px; }

@media (max-width: 900px) {
  .nav__toggle { display: inline-flex; }
  .nav__menu {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.1);
    flex-direction: column; align-items: stretch; gap: .25rem;
    padding: 1rem 1.25rem 1.5rem; display: none;
    box-shadow: var(--shadow-lg);
  }
  .nav__menu.open { display: flex; }
  .nav__links { flex-direction: column; align-items: stretch; gap: .15rem; }
  .nav__links a { padding: .85rem 1rem; font-size: 1.05rem; }
  .nav__cta { margin: .5rem 0 0; }
  .nav__cta .btn { width: 100%; min-height: 48px; font-size: 1rem; }
}

/* ---- 6. Hero ------------------------------------------------------------ */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 600px at 78% -10%, rgba(74,168,220,.38), transparent 60%),
    radial-gradient(900px 700px at 8% 110%, rgba(92,184,138,.22), transparent 55%),
    linear-gradient(160deg, #161d3d 0%, var(--navy) 55%, #141a36 100%);
  color: #fff;
  padding-block: clamp(3.5rem, 9vw, 7rem);
}
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: .94; }
/* Lightened per owner feedback (2026-07-12): the video should read through clearly.
   A soft ~12% overall wash plus a tighter, localized gradient centered on the text
   block (not full-cover) protects headline contrast without hiding the footage. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(58% 56% at 50% 42%, rgba(9,13,30,.55) 0%, rgba(9,13,30,.22) 58%, rgba(9,13,30,0) 100%),
    linear-gradient(180deg, rgba(9,13,30,.1) 0%, rgba(9,13,30,.14) 100%);
}
.hero .container { position: relative; z-index: 2; }
.hero__content { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 100%; min-width: 0; }
.hero__logo { width: min(44vw, 420px); max-width: 100%; height: auto; margin-bottom: 1.5rem; filter: drop-shadow(0 2px 12px rgba(0,0,0,.35)); }
/* max-width caps in ch, but a ch cap alone can exceed a narrow viewport before wrapping kicks in
   (390px bug, 2026-07-13) — clamp to a vw ceiling too so the flex item never forces horizontal scroll. */
.hero h1 { color: #fff; max-width: min(20ch, 90vw); width: 100%; text-shadow: 0 2px 16px rgba(0,0,0,.45); overflow-wrap: break-word; letter-spacing: -0.02em; }
.hero__sub { color: rgba(255,255,255,.88); font-size: clamp(1.05rem, 1.8vw, 1.25rem); max-width: min(50ch, 90vw); width: 100%; margin-top: 1.25rem; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; justify-content: center; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 2.5rem; color: rgba(255,255,255,.72); font-size: .95rem; }
.hero__trust span { display: inline-flex; align-items: center; gap: .5rem; }
.hero__trust .icon { width: 20px; height: 20px; color: var(--green); }
@media (max-width: 620px) {
  /* mobile text spans full width, so the localized zone widens, but stays a
     fraction of the frame — the video is still the dominant visual. */
  .hero::after {
    background:
      radial-gradient(92% 74% at 50% 38%, rgba(8,11,26,.62) 0%, rgba(8,11,26,.26) 58%, rgba(8,11,26,0) 100%),
      linear-gradient(180deg, rgba(8,11,26,.12) 0%, rgba(8,11,26,.16) 100%);
  }
}

/* airflow / breath motif */
.airflow { position: absolute; inset: 0; z-index: 1; opacity: .5; pointer-events: none; }
.airflow path { fill: none; stroke: rgba(143,205,238,.55); stroke-width: 2; stroke-linecap: round; }
.airflow .flow { stroke-dasharray: 14 22; animation: flow 7s linear infinite; }
.airflow .flow.f2 { animation-duration: 9s; stroke: rgba(92,184,138,.4); }
.airflow .flow.f3 { animation-duration: 11s; stroke: rgba(255,255,255,.25); }
@keyframes flow { to { stroke-dashoffset: -360; } }

/* scroll cue */
.scroll-cue { margin-top: 3rem; display: inline-flex; align-items: center; gap: .6rem; color: rgba(255,255,255,.6); font-size: .85rem; letter-spacing: .04em; }
.scroll-cue .dot { width: 22px; height: 36px; border: 2px solid rgba(255,255,255,.4); border-radius: 14px; position: relative; }
.scroll-cue .dot::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; border-radius: 4px; background: var(--sky-300); transform: translateX(-50%); animation: cue 1.8s var(--ease-out) infinite; }
@keyframes cue { 0% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 12px); } }

/* ---- 7. Cards / grids --------------------------------------------------- */
.grid { display: grid; gap: 1.5rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #dcd7cf; }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--text-muted); max-width: none; }
.card__icon {
  width: 54px; height: 54px; border-radius: 14px;
  display: grid; place-items: center; margin-bottom: 1.1rem;
  background: linear-gradient(140deg, rgba(74,168,220,.16), rgba(92,184,138,.14));
  color: var(--text-strong);
}
.card__icon svg { width: 28px; height: 28px; }
.card--feature { padding: 2rem; }
.respiratory-route-grid { width: 100%; align-items: stretch; text-align: left; hyphens: none; }
.respiratory-route-grid p { text-align: left; hyphens: none; text-align-last: auto; }

/* numbered step */
.step { position: relative; }
.step__num {
  font-family: var(--font-head); font-weight: 800; font-size: 1.1rem;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: #fff; margin-bottom: 1.1rem;
}

/* ---- 8. Section heading block ------------------------------------------- */
.sec-head { max-width: 640px; margin-bottom: 3rem; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head h2 { margin: .8rem 0 1rem; }
.sec-head p { max-width: 58ch; }

/* highlight underline (amber spark) */
.mark { background: linear-gradient(transparent 62%, rgba(201,129,11,.28) 0); padding: 0 .1em; }

/* ---- 9. Stats ----------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
@media (max-width: 620px) { .stats { grid-template-columns: 1fr; } }
.stat { text-align: center; padding: 1.5rem; }
.stat__num { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.4rem,5vw,3.4rem); color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.stat__num .suffix { color: var(--sky-300); }
.stat__label { margin-top: .6rem; color: rgba(255,255,255,.72); font-size: .98rem; }

/* ---- 10. Split / story -------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
/* brands split: give the equipment photo more visual weight than the copy column */
@media (min-width: 861px) { .split--brands { grid-template-columns: .78fr 1.22fr; } }
.split--brands .media-frame { aspect-ratio: 4/3.1; }
/* referring-doctors split: enlarge the RT/patient photo without crowding the copy column (owner 2026-07-13) */
@media (min-width: 861px) { .split--referral { grid-template-columns: .82fr 1.18fr; } }
.split--referral .media-frame { aspect-ratio: 4/3.1; }
.media-frame {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(150deg, var(--navy), var(--navy-600));
  aspect-ratio: 4/3; box-shadow: var(--shadow-lg); display: grid; place-items: center;
  color: rgba(255,255,255,.5); text-align: center; padding: 1.5rem;
}
.media-frame .ph-label { font-size: .85rem; letter-spacing: .03em; }
.media-frame .ph-icon { width: 56px; height: 56px; margin: 0 auto .8rem; color: rgba(143,205,238,.7); }
.media-frame--soft { background: linear-gradient(150deg, #e7eef5, #eef3ec); color: var(--warm-grey); }
.media-frame--soft .ph-icon { color: var(--sky); }

/* ---- 11. Bundles / pricing --------------------------------------------- */
.bundle {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-sm); height: 100%;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.bundle:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.bundle--featured { border: 2px solid var(--sky); box-shadow: var(--shadow-md); position: relative; }
.bundle__tag { position: absolute; top: -14px; left: 2rem; background: var(--sky); color: #06263a; font-family: var(--font-head); font-weight: 700; font-size: .8rem; padding: .35rem .8rem; border-radius: var(--radius-pill); }
.bundle h3 { margin-bottom: .35rem; }
.bundle__price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem;
  margin: .5rem 0 1.25rem;
}
.bundle__price-from {
  font-family: var(--font-body); font-weight: 600; font-size: .95rem; color: var(--text-muted);
}
.bundle__price-amount {
  font-family: var(--font-head); font-weight: 800; color: var(--text-strong);
  font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bundle__price-suffix {
  font-family: var(--font-body); font-weight: 500; font-size: .92rem; color: var(--text-muted);
}
.bundle__price-was {
  font-family: var(--font-head); font-weight: 600; font-size: .95rem; color: var(--text-muted);
  text-decoration: line-through; text-decoration-thickness: 2px;
  font-variant-numeric: tabular-nums;
}
/* legacy fallback (pages without the from/amount/suffix split, e.g. machines.html) */
.bundle__price .amount { color: var(--warm-grey); font-weight: 600; font-family: var(--font-head); font-size: 1.05rem; }
.feature-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .7rem; }
.feature-list li { display: flex; gap: .65rem; align-items: flex-start; color: var(--text); text-align: left; }
.feature-list .icon { width: 22px; height: 22px; color: var(--green-700); flex: none; margin-top: 2px; }
/* single flex item per bullet so inline emphasis spans don't pick up the li flex gap as word-spacing */
.feature-list__text { flex: 1 1 auto; min-width: 0; }
.bundle .btn { margin-top: auto; }

/* emphasis on "Lifetime free" inside bundle bullets */
.bundle__emph { color: var(--navy); font-weight: 700; }

/* Featured bundle card (middle) — light mode: navy fill standout */
.bundle--featured {
  background: linear-gradient(160deg, var(--navy), var(--navy-600));
  border-color: var(--navy);
}
.bundle--featured h3,
.bundle--featured .bundle__price-amount { color: #fff; }
.bundle--featured .bundle__price-from,
.bundle--featured .bundle__price-suffix { color: rgba(255,255,255,.78); }
.bundle--featured .bundle__price-was { color: rgba(255,255,255,.62); }
.bundle--featured .feature-list li { color: rgba(255,255,255,.9); }
.bundle--featured .feature-list .icon { color: var(--sky-300); }
.bundle--featured .bundle__emph { color: #fff; }
.bundle--featured .bundle__tag { background: var(--sky); color: #06263a; }
.bundle--featured .btn--ghost-dark { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.bundle--featured .btn--ghost-dark:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* note row */
.note {
  display: flex; gap: .75rem; align-items: flex-start;
  background: var(--muted-surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 1rem 1.15rem; color: var(--text-muted); font-size: .98rem;
}
.note .icon { width: 22px; height: 22px; color: var(--sky); flex: none; margin-top: 2px; }

/* ---- 12. RT profile cards ---------------------------------------------- */
.rt-card { text-align: left; }
.rt-card__photo {
  aspect-ratio: 1/1; border-radius: 16px; background: linear-gradient(150deg,#dde8f1,#e8f0e8);
  display: grid; place-items: center; color: var(--sky); margin-bottom: 1.1rem;
}
.rt-card__photo svg { width: 56px; height: 56px; }
.rt-card h3 { margin-bottom: .15rem; }
.rt-card .role { color: var(--sky); font-family: var(--font-head); font-weight: 600; font-size: .95rem; }
.rt-card .prc { color: var(--warm-grey-soft); font-size: .85rem; margin-top: .25rem; }

/* ---- RT figure (hands-on mask fitting, illustrative) ------------------- */
.rt-figure { margin: 0; }
.rt-figure img {
  width: 100%; aspect-ratio: 16/10; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow-md); display: block;
}
.rt-figure__caption {
  margin-top: .85rem; font-size: .9rem; color: var(--warm-grey); line-height: 1.5;
}
@media (min-width: 861px) {
  /* These source photos are landscape; force a landscape display box on desktop
     instead of letting the split-grid column stretch them tall (owner feedback
     2026-07-12: "does the hero injustice"). Mobile keeps its own ratio below. */
  .rt-figure img {
    aspect-ratio: 3 / 2; max-height: 540px; width: 100%;
    margin-inline: auto; object-fit: cover;
  }
}

/* ---- Problem figure (the lonely box) ----------------------------------- */
.problem-figure { margin: 0; }
.problem-figure img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow-md); display: block;
}
.problem-figure figcaption {
  margin-top: .6rem; font-size: .82rem; color: var(--warm-grey-soft);
  font-style: italic; line-height: 1.45;
}
@media (min-width: 861px) {
  /* Same landscape-display fix as .rt-figure (owner feedback 2026-07-12). */
  .problem-figure img {
    aspect-ratio: 3 / 2; max-height: 520px; width: 100%;
    margin-inline: auto; object-fit: cover;
  }
}

/* ---- 13. Testimonials --------------------------------------------------- */
.quote {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.9rem; box-shadow: var(--shadow-sm);
}
.quote p { font-size: 1.1rem; color: var(--text); font-style: italic; max-width: none; text-align: justify; hyphens: auto; text-align-last: left; }
.quote .icon-quote { width: 34px; height: 34px; color: var(--sky-300); margin-bottom: .8rem; }
.quote__by { margin-top: 1.1rem; font-family: var(--font-head); font-weight: 600; color: var(--text-strong); font-style: normal; }
.quote__note { color: var(--warm-grey-soft); font-size: .82rem; font-style: normal; }

/* ---- 14. Accordion (FAQ) ----------------------------------------------- */
.faq { max-width: 800px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
  width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-head); font-weight: 600; font-size: 1.12rem; color: var(--text-strong);
  padding: 1.3rem 3rem 1.3rem 0; position: relative; display: block;
  touch-action: manipulation;
}
.faq__q .chev { position: absolute; right: .2rem; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; color: var(--sky); transition: transform .25s var(--ease-out); }
.faq__q[aria-expanded="true"] .chev { transform: translateY(-50%) rotate(180deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease-out); }
.faq__a-inner { overflow: hidden; min-height: 0; }
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }
.faq__a p { padding: 0 0 1.3rem; color: var(--text-muted); max-width: none; text-align: justify; hyphens: auto; text-align-last: left; }

/* ---- 15. Forms ---------------------------------------------------------- */
.form-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--shadow-md);
}
.field { margin-bottom: 1.25rem; }
.field label { display: block; font-family: var(--font-head); font-weight: 600; color: var(--text-strong); margin-bottom: .45rem; font-size: 1rem; }
.field .req { color: var(--amber-text); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 1.05rem; color: var(--text);
  background: var(--muted-surface); border: 1.5px solid var(--border); border-radius: 12px;
  padding: .85rem 1rem; min-height: 52px; transition: border-color .18s var(--ease-out), background .18s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sky); background: #fff; box-shadow: 0 0 0 3px rgba(74,168,220,.18); }
.field .help { color: var(--warm-grey); font-size: .9rem; margin-top: .4rem; }
.field .error { color: var(--destructive); font-size: .92rem; margin-top: .4rem; display: none; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--destructive); }
.field.invalid .error { display: block; }
.form-success {
  display: none; text-align: center; padding: 1rem;
}
.form-success.show { display: block; }
.form-success .icon { width: 64px; height: 64px; color: var(--green); margin: 0 auto 1rem; }
.form-error {
  display: block; text-align: center; padding: 1rem;
  border: 1px solid var(--border); border-radius: 12px; background: var(--muted-surface);
}
.form-error[hidden] { display: none; }
.form-error__actions {
  display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem;
}
.consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; color: var(--text-muted); }
.consent input { width: auto; min-height: 0; margin-top: .25rem; }

/* ---- 16. Footer --------------------------------------------------------- */
.site-footer { background: var(--navy); color: rgba(255,255,255,.7); padding-block: 3.5rem 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr; gap: 2rem; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
/* min-width:0 on every grid item prevents content from inflating the track on focus/resize */
.footer-brand, .footer-col { min-width: 0; }
.footer-brand__logo { display: block; width: min(100%, 320px); height: auto; }
.footer-brand p { color: rgba(255,255,255,.6); margin-top: .9rem; font-size: .95rem; max-width: none; }
.footer-col__h {
  color: #fff; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  /* was <h4>; downgraded to a styled <p> so footer nav labels don't skip heading levels against
     each page's own outline (audit fix 2026-07-27). margin-top matches the h4 UA-default 1.33em
     top margin it used to inherit (this rule never reset it); margin-bottom is the same explicit
     1rem the old .footer-col h4 rule always set. A plain <p> resets to the browser's paragraph
     margin otherwise, which is what actually broke the spacing (fix 2026-07-27b: NOT the heading
     removal itself, see .footer-col a below for the real regression). */
  margin: 1.33em 0 1rem;
}
.footer-col ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
/* Tap-target fix (audit 2026-07-27) REGRESSED footer spacing: giving every link a real
   min-height:44px box inflated each item from a ~25px line to a 44px box, which combined
   with the list's .55rem gap nearly doubled the vertical rhythm between links ("large gaps
   between every link") — diagnosed by comparing computed getBoundingClientRect().height
   before (25px, natural line-height) vs after (44px, forced) on the same element. Root
   cause was NOT the <h4> to styled <p> heading-order change.
   Fix (2026-07-27c): keep the anchor's own box at its NATURAL size (so visual spacing is
   byte-for-byte what it was pre-batch), and grow the TAP TARGET only via an invisible
   ::after box centered on the link and expanded to 44px tall with position:absolute —
   it sits outside document flow, so it can't push sibling links apart, but it still
   receives clicks/taps because pseudo-elements are part of their parent's hit area. */
.footer-col a {
  position: relative;
  display: inline-block;
  color: rgba(255,255,255,.7);
  font-size: .98rem;
}
.footer-col a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  min-height: 44px;
  transform: translateY(-50%);
}
.footer-col a:hover { color: #fff; }
.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
  font-size: .85rem; color: rgba(255,255,255,.5);
}
.footer-disclaimer { font-size: .82rem; color: rgba(255,255,255,.55); margin-top: 1.25rem; max-width: 70ch; }

/* ---- 17. Page hero (interior pages) ------------------------------------ */
.page-hero {
  background:
    radial-gradient(800px 400px at 85% -20%, rgba(74,168,220,.3), transparent 60%),
    linear-gradient(160deg, #161d3d, var(--navy));
  color: #fff; padding-block: clamp(3rem, 7vw, 5.5rem);
}
.page-hero h1 { color: #fff; }
.page-hero p { color: rgba(255,255,255,.82); margin-top: 1rem; max-width: 60ch; }
.breadcrumb { font-size: .9rem; color: rgba(255,255,255,.6); margin-bottom: 1rem; }

/* ---- 17b. Page hero PHOTO modifier (cpap-santa-rosa 2026-08-04, rolled out
   sitewide 2026-08-04) --
   Reusable modifier: makes the hero photo itself the full-bleed background of
   the header, replacing the separate navy-block-then-image-below layout, so
   the two occupy one space. Owner-explicit constraint: the IMAGE loses this
   fight, not the text — a heavy scrim guarantees a dark, low-variance backdrop
   even over the brightest sky/pavement patch in the source photo, rather than
   relying on a single flat opacity value. The scrim is heaviest on the text
   (left) side and eases off toward the right so the photo still reads as a
   photo, never a flat navy card with a photo memory.

   CROP IS PER-PAGE, NEVER GLOBAL: every photo's subject sits somewhere
   different, so the zoom/pan/anchor is driven by custom properties set
   inline on each page's .page-hero__bg (see each *.html for its own
   --hero-zoom/--hero-x/--hero-pos/--hero-pos-m). This block only supplies
   sane, conservative defaults; it is never the thing doing the composing. */
.page-hero--photo { position: relative; overflow: hidden; }
.page-hero--photo .page-hero__bg {
  position: absolute; inset: 0; z-index: 0;
}
/* object-fit:cover on a plain 100%/100% box establishes the base per-axis
   crop from object-position (this is what actually gives control over BOTH
   axes — the earlier "explicit oversized width + translateX" approach fixed
   height to exactly 100% of the box, which silently made object-position's
   vertical component a no-op, verified empirically 2026-08-04). The extra
   --hero-zoom scale + --hero-x/--hero-y translate on top is for pushing a
   subject further out of frame than object-position alone can reach. */
.page-hero--photo .page-hero__bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--hero-pos, 50% 30%); display: block;
  transform: scale(var(--hero-zoom, 1)) translate(var(--hero-x, 0%), var(--hero-y, 0%));
  transform-origin: center;
}
.page-hero--photo .page-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(8,11,26,.96) 0%, rgba(8,11,26,.92) 30%, rgba(8,11,26,.76) 52%, rgba(8,11,26,.54) 70%, rgba(8,11,26,.38) 100%),
    linear-gradient(to bottom, rgba(8,11,26,.36) 0%, rgba(8,11,26,.16) 35%, rgba(8,11,26,.46) 100%);
}
.page-hero--photo > .container { position: relative; z-index: 2; }
@media (max-width: 640px) {
  /* Narrower viewport re-crops the same frame taller and the text now runs
     the full 360px width, so there is no "right-hand quiet zone" left to
     lean on. Each page can re-aim the mobile crop independently via
     --hero-pos-m/--hero-zoom-m/--hero-x-m/--hero-y-m (falling back to the
     desktop values if it never needs a different mobile crop); the scrim
     switches to a uniform top-to-bottom gradient, since a left-heavy
     horizontal gradient stops making sense once the column is this narrow. */
  .page-hero--photo .page-hero__bg img {
    object-position: var(--hero-pos-m, var(--hero-pos, 50% 30%));
    transform: scale(var(--hero-zoom-m, var(--hero-zoom, 1))) translate(var(--hero-x-m, var(--hero-x, 0%)), var(--hero-y-m, var(--hero-y, 0%)));
  }
  .page-hero--photo .page-hero__scrim {
    background:
      linear-gradient(to bottom, rgba(8,11,26,.84) 0%, rgba(8,11,26,.70) 40%, rgba(8,11,26,.87) 100%);
  }
}
.breadcrumb a { color: rgba(255,255,255,.8); }

/* ---- 17c. reya-fab mobile clearance (fix, 2026-08-04) --------------------
   The floating chat FAB is fixed bottom:20px/right:20px at 60x60px on every
   viewport, so on a short mobile hero its circle can sit directly over the
   tail of the hero's lead paragraph / CTA row. Contained fix: shrink the FAB
   on narrow screens and give the hero's own content column enough bottom
   clearance that its last line never reads under that fixed corner, without
   touching chat-widget.js. */
@media (max-width: 480px) {
  .page-hero .container { padding-bottom: 64px; }
}

/* PDP breadcrumb sits directly on the page/card background (not a navy hero like
   every other page's breadcrumb), so it needs its own light-background-safe colours
   instead of the white-on-navy default above. Semantic tokens flip with the theme
   toggle automatically; unlike the navy-hero .breadcrumb this one is never inside
   .section--navy, so no white-text override is needed here. */
.pdp-breadcrumb { color: var(--text-muted); }
.pdp-breadcrumb a { color: var(--text); }
.pdp-breadcrumb a:hover { color: var(--sky); }

/* ---- 18. Misc ----------------------------------------------------------- */
.center { text-align: center; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: .9rem; }
.cta-row.center { justify-content: center; }
.pill-list { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; }
.pill-list li { background: var(--muted-surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: .5rem 1rem; font-size: .95rem; color: var(--text); }

/* ---- 19. Scroll reveal -------------------------------------------------- */
.reveal { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); will-change: opacity, transform; }
.reveal-motion-ready .reveal:not(.in) { opacity: 0; transform: translateY(28px); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }

/* parallax target (JS-driven, transform only) */
.parallax { will-change: transform; }
[data-parallax-img] { will-change: transform; }

/* ---- 19b. STOP-BANG quiz modal ----------------------------------------- */
.quiz-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  background: rgba(15,20,40,.62);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .28s var(--ease-out), visibility .28s;
}
.quiz-overlay.open { opacity: 1; visibility: visible; }

.quiz-modal {
  width: min(100%, 560px); max-height: calc(100dvh - 2.5rem);
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transform: translateY(18px) scale(.98); transition: transform .3s var(--ease-out);
}
.quiz-overlay.open .quiz-modal { transform: none; }

.quiz-head {
  background: linear-gradient(150deg, #161d3d, var(--navy));
  color: #fff; padding: 1.4rem 1.5rem; position: relative;
}
.quiz-head .badge-free { margin-bottom: .6rem; }
.quiz-head h2 { color: #fff; font-size: 1.5rem; }
.quiz-head p { color: rgba(255,255,255,.8); font-size: .98rem; margin-top: .4rem; }
.quiz-intro-sub { color: rgba(255,255,255,.82); font-size: 1rem; margin-top: .6rem; line-height: 1.55; }
.quiz-intro-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.4rem; }
.quiz-start-btn { width: 100%; justify-content: center; min-height: 52px; font-size: 1.05rem; }
.quiz-start-btn.pulse { animation: quiz-pulse 1.6s ease-in-out 2; }
@keyframes quiz-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(74,168,220,.0); }
  50%      { box-shadow: 0 0 0 12px rgba(74,168,220,.35); }
}
.quiz-maybe-later {
  background: transparent; border: 0; color: rgba(255,255,255,.55);
  font-family: var(--font-head); font-weight: 500; font-size: .93rem;
  cursor: pointer; padding: .4rem; text-decoration: underline;
  transition: color .18s var(--ease-out);
}
.quiz-maybe-later:hover { color: rgba(255,255,255,.85); }
.quiz-disclaimer-mini {
  font-size: .82rem; color: rgba(255,255,255,.45); margin-top: 1rem;
  font-style: italic; line-height: 1.4;
}
/* Stronger overlay backdrop on home auto-open for extra presence */
.quiz-overlay.open { background: rgba(10,14,30,.78); }
.quiz-close {
  position: absolute; top: .85rem; right: .85rem;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: rgba(255,255,255,.12); border: 0; border-radius: 50%;
  color: #fff; cursor: pointer; transition: background .18s var(--ease-out);
}
.quiz-close:hover { background: rgba(255,255,255,.24); }
.quiz-close svg { width: 22px; height: 22px; }

.quiz-progress { height: 5px; background: var(--border); }
.quiz-progress > span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, var(--sky), var(--green)); transition: transform .3s var(--ease-out); }

.quiz-body { padding: 1.6rem 1.5rem; overflow-y: auto; }
.quiz-step-count { font-family: var(--font-head); font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: #1f6f9e; }
.quiz-q { font-family: var(--font-head); font-weight: 700; color: var(--text-strong); font-size: 1.3rem; line-height: 1.25; margin: .5rem 0 .4rem; }
.quiz-hint { color: var(--text-muted); font-size: .98rem; margin-bottom: 1.3rem; }
.quiz-options { display: grid; gap: .8rem; }
.quiz-opt {
  display: flex; align-items: center; gap: .7rem;
  width: 100%; text-align: left; cursor: pointer;
  font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: var(--text-strong);
  background: var(--muted-surface); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 1rem 1.15rem; min-height: 56px;
  transition: border-color .15s var(--ease-out), background .15s var(--ease-out), transform .12s var(--ease-out);
}
.quiz-opt:hover { border-color: var(--sky); background: #fff; }
.quiz-opt:active { transform: scale(.99); }
.quiz-opt .tick { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--warm-grey-soft); display: grid; place-items: center; flex: none; }
.quiz-opt .tick svg { width: 16px; height: 16px; color: #fff; opacity: 0; }
.quiz-opt.selected { border-color: var(--sky); background: rgba(74,168,220,.1); }
.quiz-opt.selected.yes .tick { background: var(--green); border-color: var(--green); }
.quiz-opt.selected.no .tick { background: var(--warm-grey); border-color: var(--warm-grey); }
.quiz-opt.selected .tick svg { opacity: 1; }

.quiz-nav { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: 1.5rem; }
.quiz-back {
  background: transparent; border: 0; color: var(--warm-grey); cursor: pointer;
  font-family: var(--font-head); font-weight: 600; font-size: .98rem; padding: .6rem .4rem;
}
.quiz-back:hover { color: var(--text-strong); }
.quiz-back[hidden] { visibility: hidden; }

/* result */
.quiz-result { text-align: center; }
.quiz-score-ring {
  width: 132px; height: 132px; border-radius: 50%; margin: 0 auto 1.2rem;
  display: grid; place-items: center; color: #fff;
  font-family: var(--font-head);
}
.quiz-score-ring .n { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.quiz-score-ring .of { font-size: .9rem; opacity: .85; }
.tier-low .quiz-score-ring { background: linear-gradient(150deg, var(--green), var(--green-700)); }
.tier-int .quiz-score-ring { background: linear-gradient(150deg, var(--amber-soft), var(--amber)); }
.tier-high .quiz-score-ring { background: linear-gradient(150deg, #2c3766, var(--navy)); box-shadow: inset 0 0 0 4px rgba(74,168,220,.4); }
.quiz-tier { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: var(--text-strong); }
.quiz-tier .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: .5rem; vertical-align: middle; }
.tier-low .quiz-tier .dot { background: var(--green); }
.tier-int .quiz-tier .dot { background: var(--amber); }
.tier-high .quiz-tier .dot { background: var(--sky); }
.quiz-result p { color: var(--text); margin: .8rem auto 0; }
.quiz-disclaimer {
  margin-top: 1.3rem; text-align: left;
  background: var(--muted-surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 1rem 1.15rem;
  color: var(--text-muted); font-size: .92rem; display: flex; gap: .65rem;
}
.quiz-disclaimer svg { width: 22px; height: 22px; color: var(--sky); flex: none; margin-top: 2px; }
.quiz-result .cta-row { margin-top: 1.5rem; }
.quiz-result .btn { width: 100%; }

@media (max-width: 480px) {
  .quiz-head { padding: 1.2rem 1.2rem; }
  .quiz-head h2 { font-size: 1.3rem; }
  .quiz-body { padding: 1.3rem 1.2rem; }
  .quiz-q { font-size: 1.15rem; }
}

/* ---- 19c. Persistent quiz side tab ------------------------------------- */
.quiz-tab {
  position: fixed; left: 0; bottom: 1.5rem; top: auto; transform: none;
  z-index: 90; cursor: pointer;
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--navy); color: #fff;
  font-family: var(--font-head); font-weight: 600; font-size: .9rem;
  border: 0; border-radius: 0 14px 14px 0;
  padding: .7rem .9rem .7rem .7rem;
  box-shadow: var(--shadow-md);
  transition: background .18s var(--ease-out), padding-right .18s var(--ease-out);
}
/* padding-right kept (not transform): hover-only, low-frequency micro-interaction that reflows the pill to reveal more of the label; a transform-based version would require a fixed max-width reserve that changes the resting layout. */
.quiz-tab:hover { background: var(--navy-600); padding-right: 1.15rem; }
.quiz-tab svg { width: 22px; height: 22px; color: var(--sky-300); flex: none; }
.quiz-tab__txt { white-space: nowrap; }
@media (max-width: 600px) {
  .quiz-tab { top: auto; bottom: 92px; transform: none; padding: .6rem .75rem; }
  .quiz-tab__txt { display: none; }
}
/* ---- 19d. Floating Messenger / Viber chat ------------------------------ */
.chat-widget { position: fixed; right: 20px; bottom: 20px; z-index: 95; display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; }
.chat-fab {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 56px; padding: 0 1.1rem; border: 0; border-radius: var(--radius-pill);
  background: var(--sky); color: #06263a; cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem;
  box-shadow: var(--shadow-lg);
  transition: transform .18s var(--ease-out), background .18s var(--ease-out);
}
.chat-fab:hover { transform: translateY(-2px); background: var(--sky-300); }
.chat-fab svg { width: 26px; height: 26px; }
.chat-fab__close { display: none; }
.chat-widget.open .chat-fab__open { display: none; }
.chat-widget.open .chat-fab__close { display: block; }
.chat-widget.open .chat-fab__label { display: none; }
.chat-widget.open .chat-fab { padding: 0; width: 56px; justify-content: center; }

.chat-panel {
  width: 268px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden;
  transform-origin: bottom right; animation: chatIn .22s var(--ease-out);
}
@keyframes chatIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.chat-panel__head { background: var(--navy); color: #fff; padding: 1rem 1.15rem; }
.chat-panel__head strong { font-family: var(--font-head); font-size: 1.05rem; }
.chat-panel__head p { color: rgba(255,255,255,.72); font-size: .85rem; margin-top: .25rem; }
.chat-opt {
  display: flex; align-items: center; gap: .7rem;
  padding: .95rem 1.15rem; font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  color: var(--text-strong); border-top: 1px solid var(--border); text-decoration: none;
  transition: background .15s var(--ease-out);
}
.chat-opt:hover { text-decoration: none; background: var(--muted-surface); }
.chat-opt svg { width: 26px; height: 26px; flex: none; }
.chat-opt--messenger svg { color: #0084FF; }
.chat-opt--whatsapp svg  { color: #25D366; }
.chat-opt--viber svg     { color: #7360F2; }
@media (max-width: 480px) {
  .chat-widget { right: 14px; bottom: 14px; }
  .chat-panel { width: min(78vw, 268px); }
}

/* ---- 19e. Trust bar ---------------------------------------------------- */
.trustbar { background: var(--navy); color: rgba(255,255,255,.92); border-top: 1px solid rgba(255,255,255,.08); }
.trustbar__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem 1.5rem; padding: 1.1rem 0; }
.trustbar__item { display: flex; align-items: center; gap: .6rem; font-family: var(--font-head); font-weight: 600; font-size: .92rem; line-height: 1.25; }
.trustbar__item svg { width: 22px; height: 22px; color: var(--green); flex: none; }
@media (max-width: 760px) { .trustbar__row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .trustbar__row { grid-template-columns: 1fr; } }

/* ---- 19f. Article prose ------------------------------------------------- */
.prose { max-width: 740px; margin-inline: auto; }
.prose h2 { margin: 2.3rem 0 .8rem; }
.prose h3 { margin: 1.7rem 0 .5rem; }
.prose p { margin-bottom: 1.1rem; max-width: none; text-align: justify; hyphens: auto; text-align-last: left; }
.prose ul, .prose ol { margin: 0 0 1.2rem 1.4rem; }
.prose li { margin-bottom: .55rem; text-align: justify; hyphens: auto; text-align-last: left; }
.prose .lead { color: var(--text-muted); margin-bottom: 1.6rem; max-width: none; text-align: justify; hyphens: auto; text-align-last: left; }
.prose .note { margin: 1.6rem 0; }
.article-meta { color: var(--warm-grey); font-size: .92rem; margin-bottom: 1.5rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: .98rem; }
.prose th, .prose td { padding: .7rem .85rem; text-align: left; border: 1px solid var(--border); vertical-align: top; }
.prose thead th { background: var(--navy); color: #fff; font-weight: 700; }
.prose tbody tr:nth-child(even) { background: var(--muted-surface); }
.prose td strong { color: var(--text-strong); }
@media (max-width: 540px) {
  .prose table { font-size: .9rem; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .prose th, .prose td { padding: .55rem .6rem; }
}

/* ---- 19g. Blog / resources hub — image cards, category tag, read time --
   Placeholder header-image treatment: a brand gradient panel carrying the
   existing Respyre heart/breath-curve motif (the same mark as favicon.svg),
   enlarged and set at low opacity, so an article without a real photo yet
   still reads as a deliberate editorial card, never a broken/missing image.
   Swap in a real <img> inside .card__media / .article-hero__media later;
   the CSS does not change, only the markup (img replaces the SVG motif). */
.card--post { padding: 0; overflow: hidden; }
.card--post .card__media {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-600) 55%, var(--sky) 140%);
}
.card--post .card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Shared placeholder-motif base (position/opacity), reused by both the listing
   card media AND the article header hero below — only the icon SIZE differs
   per context. Scoped to the class alone (not .card--post), so it applies
   wherever the motif markup is dropped in. */
.card__media-motif {
  position: absolute; inset: 0; display: grid; place-items: center; opacity: .32;
}
.card__media-motif svg { width: 30%; height: 30%; min-width: 56px; min-height: 56px; }
.card--post .card__body { padding: 1.4rem 1.6rem 1.75rem; }
.card--post .card__toprow {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem;
}
.cat-tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: .72rem;
  letter-spacing: .03em; text-transform: uppercase;
  padding: .32rem .7rem; border-radius: var(--radius-pill);
  background: rgba(74,168,220,.14); color: var(--navy);
  white-space: nowrap;
}
[data-theme="dark"] .cat-tag { color: var(--sky-300); }
.section--navy .cat-tag { background: rgba(255,255,255,.14); color: #fff; }
.read-time { font-size: .82rem; color: var(--text-muted); white-space: nowrap; }
.card--post h3 { margin-bottom: .4rem; }
.card--post p.muted { margin: 0; }

/* Article header-image treatment (same placeholder motif, 16:9, above the H1
   dek). Lives in the page-hero / first section of the article template. */
.article-hero__media {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius); margin: 1.5rem 0 0;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-600) 55%, var(--sky) 140%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow-lg);
}
.article-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-hero__media .card__media-motif svg { width: 16%; height: 16%; min-width: 44px; min-height: 44px; }

/* Table of contents (always-open list, no accordion state to theme-test) */
.toc {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--muted-surface); padding: 1.25rem 1.5rem; margin: 1.75rem 0;
}
.toc__label {
  font-family: var(--font-head); font-weight: 700; font-size: .82rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted);
  margin-bottom: .7rem; display: block;
}
.toc ol { margin: 0; padding-left: 1.2rem; }
.toc li { margin-bottom: .4rem; }
.toc a { color: var(--text-strong); font-weight: 600; }
.toc a:hover { color: var(--sky); }

/* Funnel hand-off box — the structural "where to go next" every writeup
   owes to the stage below it (memory/standing-rules.md, owner 2026-08-02).
   Visibly distinct from .note (which is a caution/disclaimer), so a reader
   reads it as a next step, not a warning. */
.funnel-handoff {
  border: 1px solid rgba(74,168,220,.35); border-radius: var(--radius-sm);
  background: rgba(74,168,220,.08); padding: 1.4rem 1.6rem; margin: 2rem 0;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.funnel-handoff .icon { width: 26px; height: 26px; color: var(--sky); flex: none; }
.funnel-handoff__text { flex: 1 1 260px; }
.funnel-handoff__text strong { color: var(--text-strong); }
.section--navy .funnel-handoff { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); }
.section--navy .funnel-handoff .eyebrow,
[data-theme="dark"] .funnel-handoff .eyebrow { color: var(--sky-300); }

/* ---- 20a. Paragraph alignment — context-specific caps ------------------- */
/* Unconstrained by default; we cap only where content is intentionally narrow */
.note p,
.bundle p,
.rt-card p,
.quote p,
.chat-panel p,
.form-card p,
.footer-col p,
.footer-disclaimer,
.quiz-result p { max-width: none; }

/* Hero / intro copy: keep a comfortable reading measure */
.lead { max-width: 62ch; }
.section--navy .lead { max-width: 62ch; }

/* ---- 20. Reduced motion / no-JS fallbacks ------------------------------ */
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .airflow .flow { animation: none; }
  .scroll-cue .dot::after { animation: none; }
  .btn:hover, .card:hover, .bundle:hover { transform: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero__video { display: none; }
}

/* ==========================================================================
   21. Multi-level dropdown nav (nav.js-injected)
   ========================================================================== */
/* nav badge chip (e.g. "Like-new", "Free") */
.nav-badge {
  display: inline-block; margin-left: .4rem;
  font-size: .72rem; font-weight: 700; line-height: 1;
  background: rgba(74,168,220,.22); color: var(--sky-300);
  border-radius: var(--radius-pill); padding: .2rem .5rem;
  vertical-align: middle; letter-spacing: .02em;
}

/* nav actions area (cart + CTA) */
.nav__actions {
  display: flex; align-items: center; gap: .55rem; margin-left: .5rem;
}

/* cart icon button */
.nav__cart {
  position: relative; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: rgba(255,255,255,.8);
  cursor: pointer; border-radius: 10px;
  transition: background .18s var(--ease-out), color .18s var(--ease-out);
}
.nav__cart:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav__cart svg { width: 24px; height: 24px; }
.nav__cart-badge {
  position: absolute; top: 3px; right: 3px;
  min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--sky); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: .72rem; line-height: 18px;
  text-align: center; padding: 0 4px;
}

/* ── level-1 dropdown panel ── */
.nav__dropdown {
  position: absolute; top: 100%; left: 0;
  /* negative margin-top overlaps the trigger so cursor can travel without crossing a gap */
  margin-top: -2px;
  padding: .5rem 0 .45rem; list-style: none;
  min-width: 240px; z-index: 200;
  background: #1c2550; border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  /* hidden by default */
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s var(--ease-out), transform .15s var(--ease-out);
  pointer-events: none;
}
.nav__dropdown.open {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
}
/* keep dropdown within viewport on right-side items */
.nav__item.has-dropdown:nth-last-child(-n+2) .nav__dropdown { left: auto; right: 0; }
.nav__item.has-dropdown { position: relative; }

.nav__dropdown li > a {
  display: flex; align-items: center; gap: .35rem;
  padding: .6rem 1.05rem; color: rgba(255,255,255,.82);
  font-family: var(--font-head); font-weight: 500; font-size: .95rem;
  white-space: nowrap; text-decoration: none;
  transition: background .14s var(--ease-out), color .14s var(--ease-out);
}
.nav__dropdown li > a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.nav__item-desc {
  font-size: .78rem; color: rgba(255,255,255,.45);
  padding: 0 1.05rem .45rem; margin: 0; line-height: 1.3;
}

/* ── top-level dropdown-parent chevron (down-pointing; mobile tap-to-open indicator) ── */
.nav__chev-down { display: none; } /* hidden on desktop — hover is the desktop affordance */
@media (max-width: 900px) {
  .nav__item.has-dropdown > a {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  }
  .nav__chev-down {
    display: inline-flex; flex: none; width: 18px; height: 18px;
    color: rgba(255,255,255,.55);
    transition: transform .2s var(--ease-out), color .2s var(--ease-out);
  }
  .nav__item.has-dropdown > a[aria-expanded="true"] .nav__chev-down {
    transform: rotate(180deg); color: var(--sky-300);
  }
}

/* ── flyout expand chevron (right-pointing; rotates on mobile) ── */
.nav__chev-r {
  width: 14px; height: 14px; flex: none; margin-left: auto;
  color: rgba(255,255,255,.45);
  transition: color .14s var(--ease-out), transform .14s var(--ease-out);
}
.nav__dropdown li.has-flyout > a:hover .nav__chev-r { color: var(--sky); }
@media (max-width: 900px) {
  .nav__chev-r { transform: rotate(90deg); }
  .nav__flyout.open ~ * .nav__chev-r,
  .has-flyout .nav__flyout.open + .nav__chev-r { transform: rotate(-90deg); }
}

/* ── level-2 flyout panel ── */
.has-flyout { position: relative; }
.nav__flyout {
  position: absolute; left: 100%; top: -4px;
  /* slight left overlap so cursor never crosses a bare seam */
  margin-left: -2px;
  min-width: 230px; z-index: 210;
  background: #1a2348; border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: .45rem 0; list-style: none;
  opacity: 0; visibility: hidden; transform: translateX(-6px);
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility .18s;
  pointer-events: none;
}
.nav__flyout.open {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
}
.nav__flyout li > a {
  display: block; padding: .55rem 1rem;
  color: rgba(255,255,255,.78); font-size: .93rem; font-family: var(--font-head);
  font-weight: 500; white-space: nowrap; text-decoration: none;
  transition: background .14s var(--ease-out), color .14s var(--ease-out);
}
.nav__flyout li > a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }

/* ── mobile dropdown overrides ── */
@media (max-width: 900px) {
  .nav__actions { display: none; } /* shown differently in mobile open state */
  .nav__dropdown, .nav__flyout {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-radius: 0; background: transparent;
    padding: 0 0 0 1rem; display: none;
    pointer-events: auto;
  }
  .nav__dropdown.open, .nav__flyout.open { display: block; }
  .nav__dropdown li > a, .nav__flyout li > a {
    color: rgba(255,255,255,.7); font-size: 1rem; padding: .7rem .9rem;
    white-space: normal;
  }
  /* show cart in mobile menu open state */
  .nav__menu.open .nav__actions {
    display: flex; padding: .5rem 1rem 0; order: 10;
  }
}

/* ==========================================================================
   22. Machine catalog pages (cpap.html, bipap.html, value-units.html)
   ========================================================================== */
/* filter bar */
.catalog-filters {
  display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1.25rem;
  background: var(--muted-surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .85rem 1.1rem; margin-bottom: 2rem;
}
.catalog-filters label { font-family: var(--font-head); font-weight: 600; font-size: .95rem; color: var(--text-strong); display: flex; align-items: center; gap: .4rem; cursor: pointer; }
.catalog-filters input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--sky); cursor: pointer; }
.catalog-sort {
  margin-left: auto;
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-head); font-size: .93rem; color: var(--warm-grey);
}
.catalog-sort select {
  font-family: var(--font-head); font-size: .95rem; font-weight: 600;
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: .38rem .7rem; background: #fff; color: var(--text-strong);
  cursor: pointer; min-height: 44px; min-width: 190px;
}
.catalog-sort select:focus { outline: 2px solid var(--sky); outline-offset: 2px; }

/* machine card grid */
.machine-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.5rem;
}
.machine-card {
  position: relative; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: box-shadow .2s var(--ease-out), transform .2s var(--ease-out);
}
.machine-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }

/* photo box */
.machine-card__photo {
  aspect-ratio: 4/3; background: var(--muted-surface);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.machine-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.machine-card__photo-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: var(--warm-grey-soft); font-family: var(--font-head); font-size: .85rem;
}
.machine-card__photo-placeholder svg { width: 48px; height: 48px; }

/* badge stack: sold-out ("Available on request") + on-promo, upper-left of the photo.
   Wrapper is absolutely positioned once; badges inside stack vertically so the two never
   overlap when a machine is both preorder and on-promo (sold-out badge sits on top, promo
   badge below it). */
.machine-card__badges {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
}
.badge-sold-out {
  background: rgba(30,30,30,.82); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: .78rem;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .28rem .65rem; border-radius: var(--radius-pill);
  backdrop-filter: blur(4px); pointer-events: none;
}
.badge-promo {
  background: #D7263D; color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: .72rem;
  letter-spacing: .05em; text-transform: uppercase;
  padding: .24rem .6rem; border-radius: var(--radius-pill);
  box-shadow: 0 2px 6px rgba(0,0,0,.22); pointer-events: none;
}
.badge-modality {
  display: inline-block;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: color-mix(in srgb, var(--sky) 15%, transparent);
  color: var(--sky); padding: .15rem .55rem; border-radius: var(--radius-pill);
  vertical-align: middle;
}
.badge-value-pick {
  position: absolute; top: 10px; right: 10px;
  background: #5CB88A; color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: .72rem;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .2rem .6rem; border-radius: var(--radius-pill); pointer-events: none;
}

/* card body */
.machine-card__body { padding: 1.1rem 1.15rem; flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.machine-card__brand { font-size: .83rem; font-weight: 700; color: var(--sky); text-transform: uppercase; letter-spacing: .06em; }
.machine-card__model { font-family: var(--font-head); font-weight: 700; color: var(--text-strong); font-size: 1.08rem; line-height: 1.2; }
.machine-card__price { color: var(--text-strong); font-family: var(--font-head); font-weight: 700; font-size: 1.12rem; }
.machine-card__price .from { font-size: .8rem; font-weight: 500; color: var(--warm-grey); margin-right: .15rem; }
.machine-card__price .no-price { font-size: .9rem; color: var(--warm-grey); font-weight: 500; font-style: italic; }

/* ── Promo slash effect (struck-through Original price) — GATED, see data/config.json
   promo_display_enabled. Do not show publicly until the DTI sales-promotion permit is filed
   (SOPs/pricing-tiers.md, owner ruling 2026-07-08). ─────────────────────────────────────── */
.price-promo-wrap { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.price-promo-wrap .price-now { color: var(--text-strong); font-weight: 700; }
.price-original { font-size: .82rem; font-weight: 500; color: var(--warm-grey); text-decoration: line-through; text-decoration-thickness: 1px; }
.section--navy .price-original { color: rgba(255,255,255,.62); }
.machine-card .btn { margin-top: auto; width: 100%; justify-content: center; min-height: 48px; }

/* no results message */
.catalog-empty { text-align: center; padding: 3rem 1rem; color: var(--warm-grey); }
.catalog-empty svg { width: 48px; height: 48px; margin: 0 auto 1rem; color: var(--border); }

/* ==========================================================================
   23. Machine product detail page (PDP)
   ========================================================================== */
.pdp-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem;
  align-items: start;
}
@media (max-width: 800px) { .pdp-layout { grid-template-columns: 1fr; } }

/* gallery */
.pdp-gallery {}
.pdp-gallery__main {
  aspect-ratio: 4/3; background: var(--muted-surface); border-radius: var(--radius);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.pdp-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.pdp-gallery__thumbs {
  display: flex; gap: .5rem; margin-top: .65rem; flex-wrap: wrap;
}
.pdp-gallery__thumb {
  width: 72px; height: 72px; border-radius: 10px; overflow: hidden;
  border: 2px solid transparent; cursor: pointer; flex: none;
  transition: border-color .15s var(--ease-out);
}
.pdp-gallery__thumb.active { border-color: var(--sky); }
.pdp-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* info panel */
.pdp-info {}
.pdp-brand { font-size: .85rem; font-weight: 700; color: var(--sky); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .3rem; }
.pdp-model { font-family: var(--font-head); font-weight: 800; color: var(--text-strong); font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.1; margin: 0 0 .6rem; }

/* PDP direct-answer lead: styled callout, not a bare text wall */
.pdp-lead {
  background: var(--muted-surface); border: 1px solid var(--border); border-left: 3px solid var(--sky);
  border-radius: 10px; padding: 1rem 1.2rem; margin: 0 0 1.2rem;
}
.pdp-lead .eyebrow { margin-bottom: .4rem; }
.pdp-lead p { font-size: 1.02rem; line-height: 1.55; color: var(--text); margin: 0; }
.pdp-price { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: var(--text-strong); margin-bottom: 1rem; }
.pdp-price .from { font-size: .9rem; font-weight: 500; color: var(--warm-grey); margin-right: .2rem; }
.pdp-price-note { font-size: .84rem; color: var(--warm-grey); margin-top: .3rem; font-style: italic; }

/* PDP CTA buttons */
.pdp-actions { display: flex; flex-direction: column; gap: .75rem; margin: 1.4rem 0; }
.pdp-actions .btn { min-height: 52px; justify-content: center; font-size: 1.05rem; }

/* PDP accordion (Product Info / Specs / Returns / Shipping) */
.pdp-accordion { border-top: 1px solid var(--border); margin-top: 1.5rem; }
.pdp-acc__item { border-bottom: 1px solid var(--border); }
.pdp-acc__trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem;
  color: var(--text-strong); text-align: left;
  padding: 1rem 0; min-height: 56px;
  transition: color .15s var(--ease-out);
}
.pdp-acc__trigger:hover { color: var(--sky); }
.pdp-acc__icon {
  width: 24px; height: 24px; flex: none; color: var(--warm-grey);
  transition: transform .25s var(--ease-out), color .15s var(--ease-out);
}
.pdp-acc__item.open .pdp-acc__icon { transform: rotate(45deg); color: var(--sky); }
.pdp-acc__body {
  display: grid; grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows .32s var(--ease-out);
}
.pdp-acc__item.open .pdp-acc__body { grid-template-rows: 1fr; }
.pdp-acc__body-inner { overflow: hidden; min-height: 0; }
.pdp-acc__item.open .pdp-acc__body-inner { padding: .2rem 0 1.3rem; }
.pdp-acc__body-inner ul { margin: .5rem 0 0 1.2rem; }
.pdp-acc__body-inner li { margin-bottom: .4rem; color: var(--text); font-size: .97rem; }
.pdp-acc__body-inner p { color: var(--text); font-size: .97rem; margin-bottom: .6rem; }
.pdp-acc__body-inner strong { color: var(--text-strong); }

/* related products strip */
.related-section { margin-top: 3rem; }
.related-section h2 { font-size: 1.4rem; margin-bottom: 1.25rem; }
.pdp-related .sec-head { margin-bottom: 2.2rem; }
.related-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.2rem;
}

.pdp-link-list { list-style: none; margin: 1.5rem auto 0; padding: 0; max-width: 640px; display: flex; flex-direction: column; gap: .6rem; }
.pdp-link-item a {
  display: block; padding: .9rem 1.1rem; min-height: 44px; border-radius: 10px;
  background: var(--card-bg, #fff); border: 1px solid var(--border); color: var(--text);
  text-decoration: none; transition: border-color .2s, transform .2s;
}
.pdp-link-item a:hover { border-color: var(--sky); transform: translateY(-2px); }
.pdp-link-item a strong { color: var(--text-strong); }
[data-theme="dark"] .pdp-link-item a { background: #22222f; }


/* ==========================================================================
   23b. PDP v2 - static NAP topbar + full-bleed photo hero with a translucent
   overlay panel (desktop). REVISION (2026-07-26, owner correction): the
   earlier build hard-split the hero into a photo column and a plain-surface
   text column. That is wrong. The photo now fills the ENTIRE hero
   (full-bleed background); a translucent navy glass panel overlays its
   right portion, and the machine photo shows through the panel because the
   panel's own fill is translucent, not because it is a second image. New
   classes only - .pdp-layout / .pdp-gallery / .pdp-info above are left
   untouched because machine.html (the legacy JS-driven fallback template)
   still depends on them.
   ========================================================================== */

/* static NAP strip - served as raw HTML (prerender_pdps.py), not via nav.js,
   so it is readable to non-JS crawlers/AI engines. Sits above the JS-injected
   header; always navy so it reads correctly regardless of light/dark theme. */
/* Owner review 2026-07-26: read as a slim utility bar, not a band - smaller
   type/height than the original build - and carry the extra entity signals
   (descriptor + country) that help search engines / AI answer engines match
   this strip to the GBP listing. */
.pdp-topbar { background: var(--navy); color: rgba(255,255,255,.82); font-family: var(--font-body); }
.pdp-topbar__inner {
  display: flex; align-items: center; flex-wrap: nowrap; overflow-x: hidden; gap: .3rem .55rem;
  padding-block: .3rem; font-size: .72rem; line-height: 1.3;
}
.pdp-topbar__brand { font-family: var(--font-head); font-weight: 700; color: #fff; letter-spacing: .02em; flex: none; }
.pdp-topbar__descriptor { color: rgba(255,255,255,.72); white-space: nowrap; }
.pdp-topbar__sep { color: rgba(255,255,255,.32); flex: none; }
.pdp-topbar__addr { color: rgba(255,255,255,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Phone + email travel together, right-aligned, and never drop at any width
   (owner ruling 2026-07-27: the bar can shed the descriptor/address text
   first, but never the two contact methods). */
.pdp-topbar__contact { display: flex; align-items: center; gap: .55rem; flex: none; margin-left: auto; min-width: 0; }
.pdp-topbar__email,
.pdp-topbar__phone {
  color: var(--sky-300); font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 30px; white-space: nowrap; flex: none;
}
.pdp-topbar__email:hover,
.pdp-topbar__phone:hover { color: #fff; text-decoration: underline; }
/* Owner ruling 2026-07-27: never drop phone or email themselves. On a
   narrow phone the email link truncates with an ellipsis instead of
   wrapping or disappearing — it stays in the DOM, visible, and tappable. */
@media (max-width: 400px) {
  .pdp-topbar__email { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }
}

/* Present in the raw HTML for crawlers at every width; only visually hidden
   below the point where the full line would wrap or clip on a phone. */
@media (max-width: 480px) {
  .pdp-topbar__hide-sm { display: none; }
  .pdp-topbar__inner { font-size: .68rem; padding-block: .3rem; }
}
/* Narrowest phones (360-390px): shed the address text too so brand + phone +
   email still fit on one line without wrapping or horizontal scroll. */
@media (max-width: 400px) {
  .pdp-topbar__addr { display: none; }
  /* With the descriptor and the locality both hidden at this width, the
     middle dot separators have nothing left to separate, so they read as
     stray dots next to the brand. Drop them too. */
  .pdp-topbar__sep { display: none; }
}

/* Tap-to-call / tap-to-email are primary actions on a phone, so the two
   contact links in the info bar carry a full 44px touch target below the
   tablet breakpoint (the label size is unchanged, only the hit area grows).
   Canonical contact block confirmed by the owner 2026-07-27. */
@media (max-width: 640px) {
  .pdp-topbar__email,
  .pdp-topbar__phone { min-height: 44px; padding-block: .35rem; }
  .pdp-topbar__inner { align-items: center; }
}

/* full-bleed hero: media and panel occupy the SAME grid cell (stacked), so
   the photo is a genuine full-viewport-width background and the panel is an
   overlay on top of it, never a second column beside it. */
.pdp-hero {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;

  /* --- Bounded, persistent machine/panel overlap (owner corrections ---
     2026-07-26 passes 4-5). Pass 4: "I like that overlap to be
     persistent... roughly 15 to 20 percent of the panel's width, and never
     far enough to touch any text." Pass 5, after pass 4's first attempt
     scaled/cropped the photo to hit the target: "the machine must remain
     WHOLE, at its natural size and framing... that framing was already
     approved. The ONLY thing that needed changing was to put a LIMIT on how
     far the machine intrudes into the navy panel... solve for the PANEL."

     So: the photo/cut-out framing below (object-position / background-
     position) is 100% UNCHANGED from the originally-approved per-machine
     hero_pos_x/hero_pos_y - still "cover", still the same crop, still the
     same scale, at every width. Nothing here ever touches those values.

     Instead this block computes where the machine's real right edge lands
     in the viewport UNDER that fixed, unchanged framing (using the exact
     same background-size:cover math the browser itself uses: draw width =
     max(box width, box height * aspect), offset = (box width - draw width)
     * posXfrac), then solves for the PANEL width that makes the panel's
     left edge sit exactly overlap_frac * panel_width behind that machine
     edge - i.e. slides the panel to meet the machine, never the reverse.

     Algebra: let R = machine's right edge (viewport px), f = overlap
     fraction, panel_left = R - f * panel_width, and panel_width =
     100vw - panel_left (panel always runs from its left edge to the
     viewport's right edge). Substituting and solving for panel_left:
       panel_left = (R - f * 100vw) / (1 - f)
     panel_width is then 100vw - panel_left, clamped to a sane reading
     measure (420px..800px) so text never gets too cramped or too wide even
     if the raw solve pushes past that range at extreme viewports - per
     owner priority order, the overlap fraction is allowed to drift outside
     15-20% before either the photo or the reading measure is touched. */
  --pdp-draw-w: max(
    100vw,
    max(calc(100vh - var(--header-h)), 480px) * var(--cutout-aspect, 1.79)
  );
  --pdp-machine-right-x: calc(
    (100vw - var(--pdp-draw-w)) * var(--hero-pos-x, .7) +
    (var(--cutout-bbox-right-frac, .6) * var(--pdp-draw-w))
  );
  --pdp-overlap-frac: .17; /* owner-approved 15-20% band, middle value */
  --pdp-panel-left-raw: calc(
    (var(--pdp-machine-right-x) - var(--pdp-overlap-frac) * 100vw) /
    (1 - var(--pdp-overlap-frac))
  );

  /* --- Measure-governs-panel rule (owner corrections 2026-07-26 passes ---
     6-7). Pass 6: the wide-viewport dead-space bug (a 470px void next to a
     736px fixed text column inside an 800-1200px+ panel) happened because
     panel width was the SOLE output of the machine-overlap solve above,
     and the text column was then a fixed pixel width dropped inside
     whatever panel that produced - two independent numbers with no
     relationship. Small machine silhouette (e.g. AirMini, hero-pos-x .62)
     or a very wide viewport both push the raw overlap solve toward a wide
     panel; the fixed 736px column could never fill it. Pass 6's first fix
     let the column fill the panel unconditionally, which cleared the void
     but broke readability the other way: at 2560px on a far-left machine
     the panel can be forced past 1200px to keep the overlap non-zero, and
     a full-width column there ran to 145 characters/line - far past any
     comfortable prose measure.

     Pass 7's fix: READING MEASURE governs panel width (as in pass 6) for
     sizing the PANEL, but the text COLUMN itself now carries its own hard
     ceiling (--pdp-measure-max, 75ch, never exceeded at any viewport -
     this is a real cap, not a soft target). When the panel is wide enough
     to hold that capped column plus comfortable margins, the column
     simply sits inside it (a small deliberate gutter, the pass-6 result).
     When the panel is forced WIDER than the capped column can use (the
     reach-floor case below), the leftover width is NOT left as a
     one-sided void on the right - the capped column is CENTERED in the
     panel's padded content box (.pdp-hero__panel-inner, margin-inline:
     auto below), so the surplus splits into two balanced margins. A
     symmetric margin reads as deliberate layout; the same space stacked
     entirely on one side reads as a bug - that distinction is the whole
     of the original complaint. The panel's own text-safety padding-left
     (derived from --pdp-text-safe-x, below) is still always present
     underneath that centering and never shrinks, so centering can only
     ever ADD clearance from the machine, never reduce it below the safety
     floor; in practice this means the centered column already reads
     slightly right-biased on the machine side, which is the "bias right
     if centering pushes too close to the machine" instruction, achieved
     structurally rather than as a separate rule to hand-tune.

     The whole panel column (Quick answer, price, CTAs, accordion,
     specs table) shares one 75ch-capped, centered measure rather than
     letting tabular rows run wider than prose: the accordion/specs table
     already reads comfortably at this width (it was doing so at the
     pass-6 ~68ch panel before this even applied), and one consistent
     column edge throughout the panel is a cleaner composition than a
     panel where table rows and paragraphs stop at different x-positions.

     --pdp-panel-min-w/-max-w below still derive the PANEL's own width
     from the same measure band (plus a padding budget) for the ordinary
     case, and the reach-floor term still guarantees the panel is wide
     enough to keep the overlap visible at extreme viewports - none of
     that changed. Only what happens to the TEXT once the panel is wider
     than the capped column changed, at .pdp-hero__panel-inner below.
     When the reach-floor clamp binds, the overlap fraction is still
     explicitly allowed to drift outside 15-20% (owner priority order:
     bounded overlap and readable text both outrank the exact
     percentage), and .pdp-hero__cutout's clip-path remains an
     independent, unconditional text-safety backstop, so drift here can
     only ever change how much overlap there is, never let the machine
     paint over text. */
  --pdp-measure-min: 60ch;
  --pdp-measure-max: 75ch;
  --pdp-panel-pad-min: 3rem;
  --pdp-panel-pad-max: 6rem;
  /* The "overlap must stay visible and non-zero at every width" requirement
     is a FLOOR on panel width, not a ceiling: panel_left = 100vw - panel_w,
     so panel_w must be at least (100vw - machine_right_x + a minimum
     visible sliver) or the panel's left edge drifts past the machine
     entirely at wide viewports and the overlap silently goes to zero/
     negative (caught by the alpha-probe + overlap-percentage QA pass,
     2026-07-26 pass 6). --pdp-machine-right-x grows with vw at wide
     widths (its own --pdp-draw-w is max(100vw, ...)), so this floor grows
     with it automatically - no per-width tuning required. The measure-
     derived floor still governs at ordinary widths (this max() only wins
     once the reach floor exceeds it, i.e. very wide viewports). */
  --pdp-min-overlap-px: 32px;
  --pdp-panel-min-w: max(
    calc(var(--pdp-measure-min) + var(--pdp-panel-pad-min)),
    calc(100vw - var(--pdp-machine-right-x) + var(--pdp-min-overlap-px))
  );
  --pdp-panel-max-w: calc(var(--pdp-measure-max) + var(--pdp-panel-pad-max));
  --pdp-panel-w: clamp(
    var(--pdp-panel-min-w),
    calc(100vw - var(--pdp-panel-left-raw)),
    var(--pdp-panel-max-w)
  );
  /* Text starts a deliberate clear gutter beyond the machine's real right
     edge - never a per-machine guess, and independent of any clamping
     above (it reads --pdp-machine-right-x directly, not the panel's
     raw/clamped width), so text safety holds even at the extremes where
     the panel width gets clamped and the overlap fraction drifts. */
  --pdp-text-gutter: 2.5rem;
  --pdp-text-safe-x: calc(var(--pdp-machine-right-x) + var(--pdp-text-gutter));

  /* --- The measure floor (rectification 2026-07-28) ---------------------
     --pdp-text-safe-x above is derived purely from where the machine is;
     it knows nothing about how much panel is left over behind it. Until
     now it landed straight on .pdp-hero__panel-inner as padding-left with
     NOTHING clamping it against --pdp-panel-w, while --pdp-panel-w itself
     was clamped. So a cut-out whose machine sits further right than the
     five reference photos could ask for more padding than the panel is
     wide, and the text column collapsed instead of the padding yielding:
     measured 46ch / 26ch / 12ch / 2ch at 1440 / 1200 / 1024 / 900 on the
     new machines (reference AirMini: 57 / 51 / 50 / 45), with the H1
     rendering as "ResMe / AirSens / 11 / AutoSe" and running past the
     viewport edge. The framing derivation in prerender_pdps.py is the
     primary fix for that; this is the structural guarantee that no future
     cut-out can reopen it, whatever its alpha box looks like.

     Everything below is one derivation with a single output,
     --pdp-text-start-x, which BOTH the panel's padding and the cut-out's
     clip-path read. That is the point: when the floor binds, the text
     stops moving right AND the machine stops being drawn at exactly the
     same x, so the copy is never obscured (owner priority #1, which
     outranks both "machine whole" and "reading measure"). If these two
     ever read different variables again, the clamp would silently let the
     machine paint over the first characters of every line.

     The floor is deliberately low - a backstop, not a competing
     constraint. The reference PDPs sit at 45-57ch and the fixed new ones
     at 39-48ch, so at 34ch this never binds on any current machine; it
     only catches a genuinely pathological cut-out, and even then it
     degrades gracefully instead of shipping a one-word-per-line ribbon. */
  --pdp-measure-floor: 34ch;
  --pdp-panel-left: calc(100vw - var(--pdp-panel-w, 58vw));
  --pdp-pad-right: clamp(1.5rem, 4vw, 4rem);
  --pdp-pad-left-min: clamp(1.25rem, 3vw, 2rem);
  /* the most padding the panel can give up and still hold the floor */
  --pdp-pad-left-max: max(
    var(--pdp-pad-left-min),
    calc(var(--pdp-panel-w, 58vw) - var(--pdp-measure-floor) - var(--pdp-pad-right))
  );
  --pdp-pad-left: max(
    var(--pdp-pad-left-min),
    min(
      calc(var(--pdp-text-safe-x) - var(--pdp-panel-left)),
      var(--pdp-pad-left-max)
    )
  );
  --pdp-text-start-x: calc(var(--pdp-panel-left) + var(--pdp-pad-left));
}
.pdp-hero__media,
.pdp-hero__panel {
  grid-column: 1;
  grid-row: 1;
}
.pdp-hero__media {
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h)); min-height: 480px;
  overflow: hidden; background: var(--muted-surface);
  z-index: 1;
}
.pdp-hero__media img { width: 100%; height: 100%; object-fit: contain; object-position: 50% var(--hero-pos-y, 50%); }
.pdp-hero__media .pdp-noimg {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--warm-grey-soft);
}
@media (min-width: 801px) {
  /* immersive edge-to-edge product shot on desktop, the whole scene visible
     (machine, lamp, pillows, nightstand) behind the overlay panel - framing
     UNCHANGED from the originally-approved hero_pos_x/hero_pos_y, always. */
  .pdp-hero__media img { object-fit: cover; object-position: calc(var(--hero-pos-x, .5) * 100%) var(--hero-pos-y, 50%); }
}

/* Pop-out cut-out layer: a transparent PNG of ONLY the machine, cut from the
   exact same lifestyle photo as .pdp-hero__media at the same 900x506 canvas
   with the machine at its original pixel position (owner request 2026-07-26 -
   "the machine is jumping over to the navy blue rectangle... it's popping
   out"). Shares .pdp-hero__media's grid cell, sticky box, and background
   sizing/position rules so the two stay pixel-registered at every viewport
   width - it must NEVER be hand-tuned independently of .pdp-hero__media or it
   will ghost/double against the photo underneath it. Rendered as a
   background-image (not an <img>) driven by the --cutout-url custom property
   set inline per page, and kept entirely inside this desktop media query so
   mobile never lays it out or fetches the extra file. aria-hidden + empty
   content + pointer-events:none: it duplicates the background photo, so it
   must not be announced twice or intercept clicks on the panel's CTAs. */
.pdp-hero__cutout { display: none; }
@media (min-width: 801px) {
  .pdp-hero__cutout {
    display: block;
    grid-column: 1; grid-row: 1;
    position: sticky; top: var(--header-h);
    height: calc(100vh - var(--header-h)); min-height: 480px;
    overflow: hidden;
    pointer-events: none;
    z-index: 3; /* above .pdp-hero__panel (z-index: 2) so the machine sits on
                   top of the navy panel at full clarity; only the machine's
                   opaque pixels show, everywhere else is alpha-zero so the
                   panel's copy and CTAs stay fully visible and clickable. */
    background-image: var(--cutout-url);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: calc(var(--hero-pos-x, .5) * 100%) var(--hero-pos-y, 50%); /*
                                      MUST read the SAME hero-pos-x/y as
                                      .pdp-hero__media img above (both set
                                      once, unchanged, on the ancestor
                                      .pdp-hero in prerender_pdps.py) so the
                                      two layers can never drift apart. The
                                      bounded overlap is achieved entirely by
                                      .pdp-hero__panel's width below, NOT by
                                      touching this position. */

    /* Safety net, not a competing constraint: this clip sits at EXACTLY
       the x where the panel's text column starts (--pdp-text-start-x, the
       single clamped output derived on .pdp-hero above and read by the
       panel's own padding-left too), so in the ordinary case it is the
       machine's real right edge plus the gutter and catches nothing but
       measurement/rounding noise. It does not compete with, shrink, or
       hide the intended bounded overlap, and it never touches the photo's
       scale or framing.

       It reads the CLAMPED value on purpose (2026-07-28): if the measure
       floor ever forces the text column to stop travelling right, the
       machine must stop at the same x, or the clamp would buy readable
       line length by letting the machine paint over the start of every
       line - trading away owner priority #1 to satisfy priority #5. */
    clip-path: inset(0 calc(100% - var(--pdp-text-start-x)) 0 0);
  }
}

/* Measure-governs-panel rule, part 2 (owner correction 2026-07-26 pass 7 -
   see the full --pdp-measure-min/max comment on .pdp-hero above). The
   text column has a HARD ceiling at --pdp-measure-max (75ch) applied on
   the border-box (global box-sizing: border-box, so it folds in the
   panel-inner's own padding - the effective text run is a little under
   75ch, intentional headroom, not a bug). This is a real cap: it is
   NEVER exceeded, at any viewport, unlike the pass-6 attempt that let the
   column fill the panel unconditionally and ran to 145 characters/line
   on a far-left machine at 2560px.

   width: 100% + max-width + margin-inline: auto is the standard
   "fill up to a cap, then center the remainder" pattern: when the panel
   is narrow enough that 100% is under the cap, this is a no-op and the
   column simply fills the panel as before (the pass-6 result, still
   correct - AirMini at 1440px keeps its clean, consistent ~58px gutter).
   When the panel is forced wider than the cap (the reach-floor case,
   --pdp-panel-min-w above), the leftover width no longer collects
   entirely on the right - margin-inline: auto splits it into two equal
   margins, so extra space reads as deliberate breathing room rather than
   a one-sided void. The panel's own text-safety padding-left (derived
   from --pdp-text-safe-x, unchanged, on .pdp-hero__panel above) still
   sits underneath this and is never reduced by the centering, so the
   column can only ever end up with MORE clearance from the machine than
   the safety floor guarantees, never less - in practice this makes the
   centered column read slightly right-of-true-center on wide panels,
   which is the requested "bias right if centering pushes toward the
   machine" behavior, produced structurally rather than as a separate
   rule. */
.pdp-hero__panel-inner { width: 100%; max-width: var(--pdp-measure-max, 75ch); margin-inline: auto; }
.pdp-hero__panel .pdp-breadcrumb { margin-bottom: 1.7rem; font-size: .84rem; }
.pdp-hero__panel .pdp-brand { font-size: .88rem; margin-bottom: .4rem; }
.pdp-hero__panel .pdp-model { font-size: clamp(1.9rem, 3vw, 2.7rem); margin-bottom: 1.2rem; }
.pdp-hero__panel .pdp-price { font-size: 2rem; margin-top: .3rem; }
.pdp-hero__panel .pdp-price-note { margin-bottom: .2rem; }
.pdp-hero__panel .pdp-actions { margin: 1.7rem 0 2.1rem; }
.pdp-hero__panel section + section { margin-top: 2.3rem; }
.pdp-hero__panel h2 { font-size: 1.32rem; margin-bottom: .75rem; }

/* Quick answer: a small pill eyebrow instead of the old left accent rule
   (owner note 2026-07-26: content is right, only the UI needed cleaning up).
   Base look works on a plain surface; the desktop-panel block below swaps it
   to the light-on-glass variant. */
.pdp-quickanswer { margin: 0 0 2rem; }
.pdp-quickanswer .eyebrow {
  display: inline-flex; align-items: center;
  padding: .32rem .75rem; border-radius: 999px; margin-bottom: .6rem;
  background: rgba(74,168,220,.12); border: 1px solid rgba(74,168,220,.35);
  color: var(--sky); font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.pdp-quickanswer p { font-size: 1.14rem; line-height: 1.62; color: var(--text-strong); font-weight: 500; margin: 0; }

@media (min-width: 801px) {
  /* translucent navy glass panel overlaying the right portion of the photo.
     The gradient (not a hard-edged solid fill) is what lets the machine
     read continuously across the seam: fully saturated on the bare-photo
     left, tinted-through on the panel side. Opacity history: the owner's
     initial ~70% estimate failed WCAG contrast over the AirCurve 10's
     lamp-glow region, so it was raised to .82/.9. Owner review 2026-07-26
     asked to lighten by 5-10% (liked the gradient, wanted it less dense) -
     re-measured (brightest pixel of the photo region behind the panel per
     machine, composited under the panel fill, actual computed text colors)
     and a full 10-point reduction to .72/.80 still clears 4.5:1 for the
     smallest panel text (breadcrumb/price-note at 70% white), 4.59:1 on the
     AirCurve 10 (the binding machine, same lamp-glow region as before).
     backdrop-filter blur is a secondary legibility aid, kept light so the
     photo still reads through it. */
  .pdp-hero__panel {
    position: relative;
    z-index: 2;
    /* --pdp-panel-w (computed above on .pdp-hero, clamped 420-800px) puts
       the panel's left edge exactly overlap_frac * panel_width behind the
       machine's real right edge under its fixed, unchanged framing - this
       is the entire mechanism for the bounded/persistent overlap (owner
       correction 2026-07-26 pass 5: solve for the panel, never the photo). */
    width: var(--pdp-panel-w, min(58%, 800px));
    margin-left: auto;
    min-height: 100%;
    background: linear-gradient(
      100deg,
      rgba(15, 19, 42, 0) 0%,
      rgba(15, 19, 42, .72) 18%,
      rgba(15, 19, 42, .8) 100%
    );
    backdrop-filter: blur(5px) saturate(115%);
    -webkit-backdrop-filter: blur(5px) saturate(115%);
  }
  .pdp-hero__panel-inner {
    /* Left padding is derived, not per-machine-tuned: it is whatever
       distance from the panel's own left edge (100vw - --pdp-panel-w) out
       to --pdp-text-safe-x (the machine's real right edge + the fixed
       2.5rem gutter, both set on .pdp-hero above) works out to, now
       CLAMPED by the measure floor so it can never consume the whole
       panel (--pdp-pad-left, see the long note on .pdp-hero). Since the
       panel's left edge already sits close behind the machine by design,
       this padding is normally small and consistent - the machine crosses
       the panel's outer seam, but text always starts a fixed gutter clear
       of the machine itself, regardless of viewport width. */
    padding: clamp(2.25rem, 5vw, 4rem) var(--pdp-pad-right) 4rem var(--pdp-pad-left);
  }

  /* light-on-navy overrides: the panel is a permanent dark glass surface, so
     its text never uses the theme-flipping --text tokens (which are dark
     charcoal in light mode and would vanish on the navy fill). Mirrors the
     .section--navy doctrine (memory/departments/growth.md), applied to a
     photo-backed panel instead of a solid navy section. */
  .pdp-hero__panel .pdp-breadcrumb,
  .pdp-hero__panel .pdp-breadcrumb a { color: rgba(255,255,255,.7); }
  .pdp-hero__panel .pdp-breadcrumb a:hover { color: #fff; }
  .pdp-hero__panel .pdp-breadcrumb span { color: rgba(255,255,255,.95); }
  .pdp-hero__panel .pdp-brand { color: var(--sky-300); }
  .pdp-hero__panel .pdp-model,
  .pdp-hero__panel h2,
  .pdp-hero__panel strong,
  .pdp-hero__panel .pdp-price { color: #fff; }
  .pdp-hero__panel p,
  .pdp-hero__panel li { color: rgba(255,255,255,.88); }
  .pdp-hero__panel .pdp-price .from { color: rgba(255,255,255,.68); }
  .pdp-hero__panel .pdp-price-note,
  .pdp-hero__panel .article-meta { color: rgba(255,255,255,.7); }
  .pdp-hero__panel .badge-sold-out { background: rgba(255,255,255,.16); color: #fff; }

  .pdp-hero__panel .pdp-quickanswer .eyebrow {
    background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff;
  }
  .pdp-hero__panel .pdp-quickanswer p { color: #fff; }

  .pdp-hero__panel .btn--ghost-dark { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
  .pdp-hero__panel .btn--ghost-dark:hover { background: rgba(255,255,255,.14); border-color: #fff; }

  /* accordion (now including the promoted Specifications item) on glass */
  .pdp-hero__panel .pdp-accordion { border-top-color: rgba(255,255,255,.22); }
  .pdp-hero__panel .pdp-acc__item { border-bottom-color: rgba(255,255,255,.22); }
  .pdp-hero__panel .pdp-acc__trigger { color: #fff; }
  .pdp-hero__panel .pdp-acc__trigger:hover { color: var(--sky-300); }
  .pdp-hero__panel .pdp-acc__icon { color: rgba(255,255,255,.75); }
  .pdp-hero__panel .pdp-acc__item.open .pdp-acc__icon { color: var(--sky-300); }
  .pdp-hero__panel .pdp-acc__body-inner li,
  .pdp-hero__panel .pdp-acc__body-inner p { color: rgba(255,255,255,.88); }
  .pdp-hero__panel .pdp-acc__body-inner strong { color: #fff; }
  .pdp-hero__panel .pdp-acc__body-inner a { color: var(--sky-300); }

  .pdp-hero__panel .specs-table th,
  .pdp-hero__panel .specs-table td { border-bottom-color: rgba(255,255,255,.2); }
  .pdp-hero__panel .specs-table th { color: rgba(255,255,255,.75); }
  .pdp-hero__panel .specs-table td { color: rgba(255,255,255,.94); }
}

/* Mobile: keep the pre-existing stacked / boxed-image / plain-surface
   treatment. The overlay effect is desktop-only - on narrow screens the
   panel simply has no background (the desktop rule above only fires past
   801px), so it renders as a normal light/dark-mode-aware content block. */
@media (max-width: 800px) {
  .pdp-hero { display: block; }
  .pdp-hero__media {
    position: static; height: auto; min-height: 0; aspect-ratio: 4/3;
    border-radius: var(--radius);
    margin: 1.5rem clamp(1.25rem, 5vw, 2.5rem) 0;
  }
  .pdp-hero__panel { padding: 1.5rem clamp(1.25rem, 5vw, 2.5rem) 0; }
  .pdp-hero__panel-inner { max-width: none; }
  .pdp-hero__panel .pdp-breadcrumb { margin-bottom: 1.2rem; }
}


/* ==========================================================================
   24. Quote basket cart drawer
   ========================================================================== */
.cart-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(10,14,30,.55);
  opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease-out), visibility .25s;
}
.cart-overlay.open { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 100%);
  background: #fff; box-shadow: -4px 0 32px rgba(0,0,0,.18);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .28s var(--ease-out);
  z-index: 1101;
}
.cart-drawer.open { transform: none; }
.cart-drawer__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--border);
  background: var(--navy); color: #fff;
}
.cart-drawer__head h2 { color: #fff; font-size: 1.15rem; margin: 0; }
.cart-drawer__close {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: rgba(255,255,255,.12); border: 0; border-radius: 50%;
  color: #fff; cursor: pointer; transition: background .18s var(--ease-out);
}
.cart-drawer__close:hover { background: rgba(255,255,255,.24); }
.cart-drawer__close svg { width: 22px; height: 22px; }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: 1.2rem 1.4rem; }
.cart-drawer__footer { padding: 1.2rem 1.4rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: .75rem; }
.cart-drawer__footer .btn { min-height: 52px; justify-content: center; font-size: 1.05rem; }

.cart-item {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: .85rem 0; border-bottom: 1px solid var(--border);
}
.cart-item:last-child { border-bottom: 0; }
.cart-item__photo {
  width: 70px; height: 70px; border-radius: 10px; overflow: hidden;
  background: var(--muted-surface); flex: none;
  display: flex; align-items: center; justify-content: center;
}
.cart-item__photo img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__info { flex: 1; }
.cart-item__brand { font-size: .8rem; font-weight: 700; color: var(--sky); text-transform: uppercase; letter-spacing: .05em; }
.cart-item__model { font-family: var(--font-head); font-weight: 700; color: var(--text-strong); font-size: .98rem; line-height: 1.2; }
.cart-item__remove {
  background: transparent; border: 0; color: var(--warm-grey-soft);
  cursor: pointer; font-size: .85rem; font-family: var(--font-head);
  padding: 0; transition: color .15s var(--ease-out); flex: none;
  min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;
}
.cart-item__remove:hover { color: var(--text-strong); }

.cart-empty { text-align: center; padding: 2.5rem 1rem; color: var(--warm-grey); }
.cart-empty svg { width: 48px; height: 48px; margin: 0 auto 1rem; color: var(--border); }
.cart-note { font-size: .84rem; color: var(--warm-grey); font-style: italic; line-height: 1.45; }
.cart-total { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; padding: .9rem 1rem; background: rgba(27,35,71,.06); border-radius: 10px; border: 1px solid var(--border); }
.cart-total__label { font-size: .85rem; color: var(--warm-grey); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.cart-total__amount { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; color: var(--navy); }

/* ==========================================================================
   25. Newsletter footer widget
   ========================================================================== */
.footer-newsletter { margin-top: 1.2rem; }
.footer-newsletter__label { font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: rgba(255,255,255,.7); margin-bottom: .55rem; }
.newsletter-form {}
.newsletter-row { display: flex; gap: .5rem; }
.newsletter-row input[type="email"] {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 .85rem;
  border: 1px solid rgba(255,255,255,.2); border-radius: 10px;
  background: rgba(255,255,255,.08); color: #fff; font-size: 1rem;
  font-family: var(--font-body);
  transition: border-color .18s var(--ease-out), background .18s var(--ease-out);
}
.newsletter-row input[type="email"]:focus {
  outline: none;
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(74,168,220,.35);
  background: rgba(255,255,255,.12);
}
.newsletter-row { transition: box-shadow .18s var(--ease-out), border-color .18s var(--ease-out); }
.newsletter-row input[type="email"]::placeholder { color: rgba(255,255,255,.4); }
.newsletter-row button {
  min-height: 44px; padding: 0 1rem; border: 0; border-radius: 10px;
  background: var(--sky); color: #04243a;
  font-family: var(--font-head); font-weight: 700; font-size: .92rem; cursor: pointer;
  transition: background .18s var(--ease-out), transform .15s var(--ease-out);
  white-space: nowrap;
}
.newsletter-row button:hover { background: var(--sky-300); transform: translateY(-1px); }
.newsletter-consent {
  display: flex; align-items: flex-start; gap: .5rem; margin-top: .55rem; cursor: pointer;
}
.newsletter-consent input[type="checkbox"] {
  width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--sky); cursor: pointer;
}
.newsletter-consent span { font-size: .82rem; color: rgba(255,255,255,.55); line-height: 1.4; }
.newsletter-consent a { color: rgba(255,255,255,.6); }
.newsletter-success { font-size: .9rem; color: var(--green); font-family: var(--font-head); font-weight: 600; margin-top: .5rem; }

/* ==========================================================================
   26. Mobile UI/UX — global touch target & readability hardening
   ========================================================================== */
@media (max-width: 900px) {
  /* Enforce minimum touch targets on all interactive elements */
  button, [type="button"], [type="submit"], [type="reset"], a.btn {
    min-height: 44px;
    touch-action: manipulation;
  }
  /* Prevent horizontal scroll */
  body { overflow-x: hidden; }

  /* Catalog filters: stack vertically on small screens */
  .catalog-filters { flex-direction: column; align-items: flex-start; }
  .catalog-filters label { min-height: 44px; width: 100%; }
  .catalog-sort { margin-left: 0; width: 100%; }
  .catalog-sort select { width: 100%; }

  /* PDP accordion: easier tap target */
  .pdp-acc__trigger { min-height: 60px; padding: 1.1rem 0; }

  /* Cart drawer full-width on small screens */
  .cart-drawer { width: 100%; }

  /* Footer links: increase tap area */
  .footer-col a { display: inline-block; padding-block: .35rem; }
  /* Contact column: email + tap-to-call get a full 44px touch target. */
  .footer-col a[href^="tel:"],
  .footer-col a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }

  /* Quiz "maybe later" button: larger tap area */
  .quiz-maybe-later { padding: .65rem .4rem; }
}

@media (max-width: 600px) {
  .machine-grid { grid-template-columns: 1fr; }
  .pdp-gallery__thumbs { gap: .4rem; }
  .pdp-gallery__thumb { width: 60px; height: 60px; }
  .newsletter-row { flex-direction: column; }
  .newsletter-row button { width: 100%; }
}

/* ==========================================================================
   27. FAQ page
   ========================================================================== */
.faq-section { max-width: 760px; margin-inline: auto; }
.faq-category { margin-bottom: 2.5rem; }
.faq-category h2 { font-size: 1.25rem; color: var(--text-strong); margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--sky); display: inline-block; }
/* reuses existing .faq__q / .faq__a accordion from main.js */

/* ==========================================================================
   28. Logo marquee (continuous credential / brand strip)
   ========================================================================== */
.logo-marquee-section .sec-head { margin-bottom: 2rem; }
.logo-marquee {
  overflow: hidden;
  width: 100%;
  padding-block: .25rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logo-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: logo-scroll 60s linear infinite;
}
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }
.logo-marquee__track img {
  height: 80px;
  width: auto;
  margin-right: 5rem;
  object-fit: contain;
  flex: 0 0 auto;
  opacity: .9;
  transition: opacity .3s ease;
}
.logo-marquee__track img:hover { opacity: 1; }
/* Track holds 6 identical sets; shifting by 3 sets (-50%) loops seamlessly. */
@keyframes logo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .logo-marquee { -webkit-mask-image: none; mask-image: none; }
  .logo-marquee__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    gap: 2.5rem 4.5rem;
  }
  .logo-marquee__track img { margin-right: 0; }
}

/* ---- Specs table (PDP) --------------------------------------------------- */
.specs-table { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: .5rem; }
.specs-table th, .specs-table td { padding: .55rem .75rem; text-align: left; border-bottom: 1px solid var(--border, #e8ecf0); }
.specs-table th { font-weight: 600; color: var(--text); width: 44%; }
.specs-table td { color: var(--text-body, #444); }
.specs-table tr:last-child th, .specs-table tr:last-child td { border-bottom: none; }

/* ---- Peripheral card grid ------------------------------------------------- */
.peripheral-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
.peripheral-card { background: var(--white); border: 1px solid var(--border, #e8ecf0); border-radius: 1rem; overflow: hidden; display: flex; flex-direction: column; }
.peripheral-card__photo { aspect-ratio: 4/3; background: var(--muted-surface, #f5f5f3); display: flex; align-items: center; justify-content: center; color: var(--warm-grey, #999); }
.peripheral-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.peripheral-card__photo-placeholder { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.5rem; color: var(--warm-grey, #aaa); font-size: .8rem; }
.peripheral-card__photo-placeholder svg { width: 40px; height: 40px; opacity: .45; }
.peripheral-card__body { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.peripheral-card__brand { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sky); }
.peripheral-card__name { font-family: var(--font-head); font-weight: 700; font-size: .98rem; color: var(--text); line-height: 1.3; }
.peripheral-card__compat { font-size: .8rem; color: var(--warm-grey, #888); }
.peripheral-card__price { font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; color: var(--text-strong); margin-top: auto; padding-top: .5rem; }
.peripheral-card__price.no-price { font-size: .9rem; color: var(--warm-grey); font-weight: 500; font-style: italic; }
.peripheral-card__actions { display: flex; flex-direction: column; gap: .45rem; margin-top: .75rem; }
}

/* ==========================================================================
   29. Footer social icons
   ========================================================================== */
.footer-social { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.1rem; }
.footer-social__label { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.footer-social__icons { display: flex; gap: .6rem; align-items: center; }
.footer-social__link { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -8px; opacity: .75; transition: opacity .2s ease, transform .2s ease; }
.footer-social__link:hover { opacity: 1; transform: translateY(-2px); text-decoration: none; }
.footer-social__link img { width: 28px; height: 28px; object-fit: contain; }

/* ==========================================================================
   30. Light / dark mode
   ========================================================================== */

/* ---- Theme toggle button in nav ---------------------------------------- */
.nav__theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: none; cursor: pointer;
  color: rgba(255,255,255,.85); flex: none;
  transition: background .2s ease, color .2s ease;
}
.nav__theme-toggle:hover { background: rgba(255,255,255,.18); color: #fff; }
.nav__theme-toggle svg { width: 20px; height: 20px; pointer-events: none; }
/* show sun in dark mode, moon in light mode */
.nav__theme-toggle .icon-moon { display: block; }
.nav__theme-toggle .icon-sun  { display: none; }
[data-theme="dark"] .nav__theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .nav__theme-toggle .icon-sun  { display: block; }

/* ---- Dark mode semantic token overrides -------------------------------- */
[data-theme="dark"] {
  --bg:           #16161f;
  --text:         rgba(255,255,255,.90);
  --text-strong:  rgba(255,255,255,.95);
  --text-muted:   rgba(255,255,255,.55);
  --warm-grey:      rgba(255,255,255,.62);
  --warm-grey-soft: rgba(255,255,255,.45);
  --white:        #22222f;
  --status-ok:      #5dd58a;
  --status-warn:    #e0b94a;
  --status-caution: #f0a35e;
  --status-bad:     #f87171;
  --border:       rgba(255,255,255,.11);
  --muted-surface: #1e1e2a;
  --sky-50:       rgba(74,168,220,.12);
  --link:         var(--sky-300);
  --shadow-sm:    0 1px 2px rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.22);
  --shadow-md:    0 8px 28px rgba(0,0,0,.35);
  --shadow-lg:    0 24px 60px rgba(0,0,0,.48);
}

/* ---- Surface overrides for cards, panels, etc. ------------------------- */
[data-theme="dark"] body           { background: var(--bg); color: var(--text); }
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4             { color: rgba(255,255,255,.95); }
/* navy sections stay navy — class wins, no override needed */
[data-theme="dark"] .section--muted { background: var(--muted-surface); }
[data-theme="dark"] .card          { background: #22222f; border-color: var(--border); }
[data-theme="dark"] .section--navy .card h3 { color: rgba(255,255,255,.95); }
[data-theme="dark"] .machine-card  { background: #22222f; border-color: var(--border); }
[data-theme="dark"] .machine-card__name { color: rgba(255,255,255,.92); }
[data-theme="dark"] .machine-card__brand { color: var(--sky-300); }
[data-theme="dark"] .faq__q        { color: rgba(255,255,255,.88); background: #22222f; border-color: var(--border); }
[data-theme="dark"] .faq__a        { background: #22222f; border-color: var(--border); }
[data-theme="dark"] .chat-panel    { background: #22222f; border-color: var(--border); }
[data-theme="dark"] .chat-opt      { color: rgba(255,255,255,.88); border-color: var(--border); }
[data-theme="dark"] .chat-opt:hover { background: #1a1a27; }
[data-theme="dark"] .peripheral-card { background: #22222f; border-color: var(--border); }
[data-theme="dark"] .peripheral-card__name { color: rgba(255,255,255,.9); }
[data-theme="dark"] .specs-table th { color: rgba(255,255,255,.8); }
[data-theme="dark"] .specs-table td { color: rgba(255,255,255,.65); }
[data-theme="dark"] .specs-table th,
[data-theme="dark"] .specs-table td { border-color: var(--border); }
[data-theme="dark"] .catalog-filter-bar { background: #22222f; border-color: var(--border); }
[data-theme="dark"] .catalog-sort select { background: #22222f; color: rgba(255,255,255,.85); border-color: var(--border); }
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea        { background: #22222f; color: rgba(255,255,255,.88); border-color: var(--border); }
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] .field input:focus,
[data-theme="dark"] .field select:focus,
[data-theme="dark"] .field textarea:focus { background: #1a1a27; }
/* hardcoded-#fff surfaces that don't flip via a token — pair them so flipped text stays legible */
[data-theme="dark"] .bundle,
[data-theme="dark"] .quote,
[data-theme="dark"] .form-card,
[data-theme="dark"] .cart-drawer { background: #22222f; border-color: var(--border); }
/* dark mode: "Lifetime free" emphasis on non-featured cards (dark #22222f surface) */
[data-theme="dark"] .bundle__emph { color: var(--sky-300); }
/* dark mode: featured bundle card — navy fill disappears against the page bg,
   so stand out via an elevated indigo surface + sky accent ring/glow instead */
[data-theme="dark"] .bundle--featured {
  background: linear-gradient(160deg, #232a45, #2c3566);
  border-color: var(--sky);
  box-shadow: 0 0 0 1px rgba(74,168,220,.45), 0 14px 40px rgba(74,168,220,.22);
}
[data-theme="dark"] .bundle--featured .btn--ghost-dark { border-color: rgba(255,255,255,.55); color: #fff; }
[data-theme="dark"] .bundle--featured .btn--ghost-dark:hover { background: rgba(255,255,255,.12); border-color: #fff; }
[data-theme="dark"] .quiz-opt:hover { background: #1a1a27; }
[data-theme="dark"] .cart-total { background: rgba(255,255,255,.06); border-color: var(--border); }
[data-theme="dark"] .cart-total__label { color: var(--warm-grey); }
[data-theme="dark"] .cart-total__amount { color: rgba(255,255,255,.95); }
/* trustbar stays navy — no override */
/* logo marquee on light bg: invert logos that are dark-on-light */
[data-theme="dark"] .logo-marquee-section { background: var(--muted-surface); }

/* ---- Section-context fixes: components that use var(--text) directly ------
   Classes with an explicit color rule lose the section's inherited color.
   Re-declare them here for each dark-background section context so they stay
   legible in BOTH light and dark mode without needing per-element overrides. */
.section--navy .feature-list li   { color: rgba(255,255,255,.86); }
.section--navy .feature-list .icon { color: var(--green); }
.section--navy .note               { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.75); }
.section--navy .note .icon         { color: var(--sky-300); }

/* ---- Smooth transition for mode changes (opt-in) ----------------------- */
body, .card, .machine-card, .faq__q, .faq__a, .chat-panel, input, select {
  transition: background-color .25s ease, border-color .25s ease, color .15s ease;
}
/* but NOT on initial page load — only after JS has run */
.no-transition * { transition: none !important; }

/* ---- Share row + selection "Share this" affordance (quiet, icon-only) ---
   Owner correction 2026-07-26 (revision 2): the row must be clearly PART of
   a composition, not floating chrome. Two placements only, each anchored to
   an existing rhythm:
     .rsp-share-row--hero -> lives INSIDE .page-hero .container, directly
       under the deck/subheader, sharing the container's own left padding so
       it lines up with the breadcrumb/H1 above it (never a sibling of the
       hero section, so it cannot straddle the hero/body seam).
     .rsp-share-row--pdp -> lives inside .pdp-hero__panel-inner, right after
       the accordion (before the "Reviewed by..." line), right-aligned and
       quiet so it never competes with the primary CTA above it.
   A "Share" label makes the icon group legible as a unit (previously six
   bare circles gave the eye no reason to group them). Buttons keep the
   44x44px touch target in both variants — "quiet" is colour/weight/position,
   never a sub-44px hit area. */
.rsp-share-row {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: 0; padding: 0;
}
.rsp-share-label {
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); flex: 0 0 auto;
}
.rsp-share-icons { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

.rsp-share-row--hero { margin-top: 1.6rem; }
.rsp-share-row--hero .rsp-share-label { color: rgba(255,255,255,.6); }

.rsp-share-row--pdp { margin: 1.1rem 0 1.7rem; justify-content: flex-end; }

.rsp-share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; min-width: 44px; min-height: 44px;
  padding: 4px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.rsp-share-btn svg { width: 17px; height: 17px; }
.rsp-share-btn:hover, .rsp-share-btn:focus-visible {
  color: var(--sky); border-color: var(--sky); background: rgba(74,168,220,.08);
  outline: none;
}
.rsp-share-btn--native { color: var(--text-strong); border-color: var(--border); }

/* --hero sits on the permanent-navy .page-hero background (not a theme-
   flipping surface, same as .page-hero h1/p above) so it always needs the
   white-on-navy treatment regardless of data-theme. */
.rsp-share-row--hero .rsp-share-btn { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.28); }
.rsp-share-row--hero .rsp-share-btn:hover, .rsp-share-row--hero .rsp-share-btn:focus-visible {
  color: var(--sky-300); border-color: var(--sky-300); background: rgba(255,255,255,.08);
}
.rsp-share-row--hero .rsp-share-btn--native { color: rgba(255,255,255,.92); }

.rsp-share-popover {
  /* z-index above .site-header (100, styles.css line ~181) so the pill is
     never rendered behind the sticky header near the top of a page — the
     positioning JS also flips it below the passage if it would otherwise
     collide with the header, belt-and-braces against the exact bug that
     shipped (owner 2026-07-26: pill appeared to do nothing because it was
     effectively unreachable/off-screen). */
  position: absolute; z-index: 110; display: none;
  background: var(--navy); color: #fff; border: none; border-radius: var(--radius-pill, 999px);
  padding: .5rem 1rem; font-size: .85rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.22); min-height: 44px; min-width: 44px;
}
.rsp-share-popover:hover { background: var(--navy-600, #141c38); }

/* Fallback channel menu opened from the selection pill (desktop, no Web
   Share API). Floats over arbitrary page content — could land over a navy
   section or a light one — so unlike --hero/--pdp it carries its own
   opaque, theme-aware card surface rather than relying on what's behind it. */
.rsp-share-row--selection {
  background: var(--white, #fff); border: 1px solid var(--border); border-radius: 14px;
  padding: .5rem .7rem; box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
[data-theme="dark"] .rsp-share-row--selection { background: var(--muted-surface); }

.section--navy .rsp-share-btn { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.28); }
.section--navy .rsp-share-btn:hover, .section--navy .rsp-share-btn:focus-visible {
  color: var(--sky-300); border-color: var(--sky-300); background: rgba(255,255,255,.08);
}
.section--navy .rsp-share-btn--native { color: rgba(255,255,255,.92); }
.section--navy .rsp-share-label { color: rgba(255,255,255,.6); }

[data-theme="dark"] .rsp-share-btn { border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .rsp-share-btn:hover, [data-theme="dark"] .rsp-share-btn:focus-visible {
  color: var(--sky); border-color: var(--sky);
}
[data-theme="dark"] .section--navy .rsp-share-btn { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.28); }
[data-theme="dark"] .section--navy .rsp-share-btn:hover, [data-theme="dark"] .section--navy .rsp-share-btn:focus-visible {
  color: var(--sky-300); border-color: var(--sky-300);
}
[data-theme="dark"] .rsp-share-row--hero .rsp-share-btn { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.28); }
[data-theme="dark"] .rsp-share-row--hero .rsp-share-btn:hover, [data-theme="dark"] .rsp-share-row--hero .rsp-share-btn:focus-visible {
  color: var(--sky-300); border-color: var(--sky-300);
}
[data-theme="dark"] .rsp-share-row--hero .rsp-share-btn--native { color: rgba(255,255,255,.92); }

/* PDP panel: on desktop (>=801px) the panel is a permanent dark glass
   surface (see .pdp-hero__panel light-on-navy overrides above), so the PDP
   share row needs the same unconditional white-on-navy treatment there. On
   mobile the panel is a normal theme-aware card, so the base .rsp-share-btn
   rules (light/dark tokens) already apply correctly with no override. */
@media (min-width: 801px) {
  .pdp-hero__panel .rsp-share-label { color: rgba(255,255,255,.6); }
  .pdp-hero__panel .rsp-share-btn { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.28); }
  .pdp-hero__panel .rsp-share-btn:hover, .pdp-hero__panel .rsp-share-btn:focus-visible {
    color: var(--sky-300); border-color: var(--sky-300); background: rgba(255,255,255,.1);
  }
  .pdp-hero__panel .rsp-share-btn--native { color: rgba(255,255,255,.92); }
}

/* Seven icons (Copy link, Instagram, Viber, Messenger, Facebook, WhatsApp,
   Email, +1 native-share when supported) at 44px touch targets do not fit
   on one inline row next to the "Share" label at 390px width without either
   wrapping awkwardly or shrinking below the touch-target minimum. Fix: stack
   the label above the icon row at narrow widths, so the icon row gets the
   container's full inline width to lay out on ONE line at full 44px size
   (owner brief 2026-07-26: solve the layout, never shrink below 44px). */
@media (max-width: 480px) {
  .rsp-share-row { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .rsp-share-row--pdp { align-items: flex-end; }
  .rsp-share-icons { width: 100%; justify-content: flex-start; }
  .rsp-share-row--pdp .rsp-share-icons { justify-content: flex-end; }
}

/* ---- Share confirmation toast (Copy link / Instagram desktop fallback) --
   Same brief on-screen confirmation both channels use when they write to
   the clipboard instead of opening a link (Instagram has no share-intent
   URL to open). Fixed, low-key, auto-dismisses; safe in light, dark, and on
   navy since it always renders on its own solid navy chip regardless of
   the page's theme. */
.rsp-share-toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%) translateY(8px);
  z-index: 80; background: var(--navy); color: #fff; font-size: .88rem; font-weight: 600;
  padding: .7rem 1.1rem; border-radius: var(--radius-pill, 999px);
  box-shadow: 0 8px 24px rgba(0,0,0,.28); max-width: min(90vw, 380px); text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.rsp-share-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Contact links inside legal/long-form prose lists (privacy, terms) are inline
   text links, so their natural hit box is only the ~25px line height. On touch
   widths we pad the inline box vertically to clear the 44px tap-target floor.
   Padding on an inline box grows the hit area WITHOUT growing the line box, so
   there is no layout shift, and no colour is set here, so light, dark and
   .section--navy all stay exactly as they were. */
@media (hover: none), (max-width: 640px) {
  .prose li > a[href^="tel:"],
  .prose li > a[href^="mailto:"] {
    padding-block: 10px;
  }
}