/* ============================================================================
   Survival Scripts — "Clinical Trust & Readiness" design system
   ============================================================================ */

/* Custom properties are not validated at parse time, so a plain
   "--x: #hex; --x: oklch(...)" pair does NOT fall back — the oklch always
   wins and then every var() using it fails. @supports is the only technique
   that works: hex ships to everyone, oklch overrides it where supported.
   Flag 118 — the audience skews older, so pre-2023 browsers matter. */
:root {
  --bg: #f9f8f5;
  --surface: #ffffff;
  --panel: #e9f4f6;
  --panel-warm: #f7f1e8;
  --border: #d4ddde;
  --border-strong: #b3c1c3;
  --text: #0f171f;
  --muted: #4e5a62;
  --faint: #788288;

  --teal: #00787d;
  --teal-dark: #004f56;
  --teal-tint: #d5f2f3;
  --teal-tint-2: #bce8ea;

  --amber: #e29936;
  --amber-dark: #b15300;
  --amber-tint: #ffecc9;

  --navy: #07121e;
  --navy-2: #13202f;

  --danger: #b33736;
  --danger-tint: #ffe8e0;
  --ok: #318454;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(17, 17, 34, 0.059), 0 1px 1px rgba(26, 26, 26, 0.039);
  --shadow: 0 8px 24px rgba(13, 26, 26, 0.078), 0 2px 6px rgba(20, 20, 39, 0.051);
  --shadow-lg: 0 24px 60px rgba(12, 25, 31, 0.161), 0 6px 16px rgba(13, 26, 26, 0.078);

  --font-display: "Newsreader", "Iowan Old Style", "Georgia", serif;
  --font-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;

  --container: 1280px;
  color-scheme: light;
}
@supports (color: oklch(50% 0.1 200)) {
  :root {
    --bg: oklch(98% 0.005 95);
    --surface: oklch(100% 0 0);
    --panel: oklch(96% 0.012 210);
    --panel-warm: oklch(96% 0.014 80);
    --border: oklch(89% 0.01 210);
    --border-strong: oklch(80% 0.015 210);
    --text: oklch(20% 0.02 250);
    --muted: oklch(46% 0.02 240);
    --faint: oklch(60% 0.015 240);

    --teal: oklch(52% 0.09 200);
    --teal-dark: oklch(38% 0.085 202);
    --teal-tint: oklch(94% 0.03 200);
    --teal-tint-2: oklch(90% 0.045 200);

    --amber: oklch(74% 0.14 70);
    --amber-dark: oklch(55% 0.15 55);
    --amber-tint: oklch(95% 0.05 80);

    --navy: oklch(18% 0.03 250);
    --navy-2: oklch(24% 0.035 252);

    --danger: oklch(52% 0.16 25);
    --danger-tint: oklch(95% 0.03 40);
    --ok: oklch(55% 0.11 155);

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 2px oklch(20% 0.02 250 / 0.06), 0 1px 1px oklch(20% 0.02 250 / 0.04);
    --shadow: 0 8px 24px oklch(20% 0.02 250 / 0.08), 0 2px 6px oklch(20% 0.02 250 / 0.05);
    --shadow-lg: 0 24px 60px oklch(20% 0.02 250 / 0.16), 0 6px 16px oklch(20% 0.02 250 / 0.08);

    --font-display: "Newsreader", "Iowan Old Style", "Georgia", serif;
    --font-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;

    --container: 1280px;
    color-scheme: light;
  }
}


* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
/* Intrinsic width/height attrs reserve space before load. Zero-specificity so any
   stylesheet height still wins; everything else scales by aspect ratio. */
:where(img[width][height]) { height: auto; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
  color: var(--navy);
}
h1 { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem); }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; color: var(--text); }
.lead { font-size: 1.15rem; color: var(--muted); }
.article-disclaimer { font-size: 0.82rem; color: var(--faint); border-top: 1px solid var(--border); padding-top: 16px; margin-top: 8px; }

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

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 80px;
}
@media (max-width: 900px) {
  .container { padding: 0 24px; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-dark);
}
.eyebrow::before, .eyebrow::after {
  content: "";
  width: 20px;
  height: 2px;
  background: var(--amber);
  display: inline-block;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------- buttons */
.btn-primary, .btn-secondary, .btn-ghost {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  line-height: 1.2;
}
.btn-primary {
  background: var(--amber-dark);
  color: #fefcf4;
  color: #fefcf4; color: oklch(99% 0.01 90);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--amber); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--border-strong);
}
.btn-secondary:hover { border-color: var(--teal); color: var(--teal-dark); background: var(--teal-tint); }
.section.navy .btn-secondary { color: white; border-color: #67737c; border-color: oklch(55% 0.02 240); }
.section.navy .btn-secondary:hover { background: #1b2b36; background: oklch(28% 0.03 240); border-color: white; color: white; }
.btn-ghost {
  background: transparent;
  color: var(--teal-dark);
  padding: 8px 4px;
  border-radius: 4px;
}
.btn-ghost:hover { text-decoration: underline; }
/* Teal fill for a primary that sits beside the amber one (home hero
   "Find my kit"), so two solid buttons don't compete as the same colour. */
.btn-primary.teal { background: var(--teal-dark); color: #f4fefe; color: oklch(99% 0.01 200); }
.btn-primary.teal:hover { background: var(--teal); }

/* Outlined teal, for a secondary sitting beside a teal primary. */
.btn-secondary.teal { color: var(--teal-dark); border-color: var(--teal); }
.btn-secondary.teal:hover { background: var(--teal-tint); border-color: var(--teal-dark); }

.btn-primary.full, .btn-secondary.full { width: 100%; }
.btn-primary[disabled], .btn-secondary[disabled] { opacity: 0.5; cursor: not-allowed; transform: none !important; }
/* Anchor-as-button CTAs (add-on modal Continue/Skip) use this instead of
   [disabled], since an <a> can't carry a real disabled attribute — it still
   needs pointer-events blocked or it stays clickable despite the styling. */
.is-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; transform: none !important; }

/* ------------------------------------------------------------------ chips */
.tag, .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--teal-tint);
  color: var(--teal-dark);
  border: 1px solid var(--teal-tint-2);
}
.tag.amber, .chip.amber { background: var(--amber-tint); color: var(--amber-dark); border-color: #f7d19c; border-color: oklch(88% 0.08 75); }
.tag.rx { background: var(--navy); color: var(--surface); border-color: var(--navy); }
.tag.free { background: var(--ok); color: white; border-color: var(--ok); }

/* ------------------------------------------------------------------ cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.ally-card { padding: 0; display: flex; flex-direction: column; }
.ally-photo { width: 100%; height: 240px; object-fit: cover; display: block; }
.ally-body { padding: 24px; }

.note-box {
  border: 1.5px dashed var(--danger);
  background: var(--danger-tint);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 0.88rem;
  color: #4f1b14;
  color: #4f1b14; color: oklch(30% 0.08 30);
  margin: 16px 0;
}
.note-box strong { color: var(--danger); }
.note-box.info { border-color: var(--border-strong); background: var(--panel); color: var(--muted); }

/* ------------------------------------------------------- audit flag badges */
/* Numbered red badges marking every open item from the 2026-08-31 site
   audit (see AUDIT-FLAGS.md at the zip root). Reference a flag by its
   number ("flag 7, change this...") and it's found instantly, either on
   the page or in that file. Remove a badge + its list entry once resolved. */
.flag-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}
.note-box .flag-badge { margin-right: 8px; vertical-align: middle; }
.ph .flag-badge { position: absolute; top: 10px; right: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.35); z-index: 1; }
.flag-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--danger); font-weight: 600; margin-top: 10px; }
.flag-pill .flag-badge { position: static; }

/* ------------------------------------------------------------- dev nav
   TEMPORARY — added 2026-08-31 so the /lp/ landing pages (deliberately
   left out of the real nav and sitemap, see LANDING-PAGES.md) are still
   reachable during review. Deliberately styled to read as build tooling,
   not real site chrome — remove this whole block, and its one call site
   in src/partials.mjs (devNav(), called from page() and landingPage()),
   before this site goes live or converts to Shopify. */
.dev-nav { background: var(--navy-2, #13202f); background: var(--navy-2, oklch(24% 0.035 252)); border-bottom: 2px solid var(--amber); padding: 8px 0; }
.dev-nav-inner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dev-nav-label { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); flex-shrink: 0; }
.dev-nav nav { display: flex; gap: 6px; flex-wrap: wrap; }
.dev-nav nav a { font-size: 0.74rem; font-weight: 600; color: #cfd9e1; color: oklch(88% 0.015 240); text-decoration: none; padding: 5px 10px; border-radius: 999px; border: 1px solid #404952; border: 1px solid oklch(40% 0.02 250); white-space: nowrap; }
.dev-nav nav a:hover { background: #20303b; background: oklch(30% 0.03 240); border-color: var(--teal); color: white; }
@media (max-width: 780px) {
  .dev-nav-inner { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dev-nav-label { display: none; }
}

/* ---------------------------------------------------------------- header */
/*
   Two-tier header, the pattern most DTC health brands (Ro, Hims, Keeps) use:
   a quiet utility strip up top for company/informational pages and account
   access, and a focused main row below for the thing people came to do —
   shop a collection. Keeps the primary nav to 3 items so it never wraps,
   and keeps the "clinical" register by keeping the utility strip small,
   muted, and un-decorated rather than icon-heavy or retail-loud.
*/
.utility-bar {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
}
.utility-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 9px;
  padding-bottom: 9px;
}
.utility-trust {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.utility-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
.utility-nav a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.utility-nav a:hover, .utility-nav a[aria-current="page"] { color: var(--teal-dark); }
.utility-nav .utility-login { color: var(--teal-dark); }
@media (max-width: 1080px) { .utility-bar { display: none; } }
@media (max-width: 640px) { .utility-trust { display: none; } }

/* "Shop all" in the home hero jumps here; offset so the section's top edge
   lands just below the sticky header instead of under it. */
#collections { scroll-margin-top: 72px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.922);
  background: rgba(255, 255, 255, 0.922); background: oklch(100% 0 0 / 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--navy);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.logo .mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: block;
}
.primary-nav {
  display: flex;
  align-items: center;
}
.nav-group-primary {
  display: flex;
  align-items: center;
  gap: 4px;
}
.primary-nav a {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.primary-nav a:hover, .primary-nav a[aria-current="page"] { background: var(--teal-tint); color: var(--teal-dark); }
/* the company links + login are duplicated here for the mobile dropdown
   only — on desktop they live in .utility-bar instead, so this group stays
   hidden until the nav collapses to a toggle (see media query below). */
.nav-group-company { display: none; }
.header-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
@media (max-width: 480px) {
  .header-bar { padding-left: 16px; padding-right: 16px; gap: 12px; }
  /* Shrink the wordmark itself (it is text, so max-width alone just lets it
     overflow into the CTA) and the mark with it. */
  .site-header .logo { max-width: none; font-size: 1.1rem; gap: 8px; }
  .site-header .logo .mark { width: 26px; height: 26px; }
  .logo img { max-width: 100%; height: auto; }
  /* The CTA was eating the header: 14px type on 14px of side padding left the
     logo, the button and the hamburger crowded together. Narrower padding and
     smaller type buy back the whitespace between all three, and the gap goes
     UP rather than down so they read as separate objects. Vertical padding is
     held at 12px so the button still clears the 44px tap floor. */
  .header-cta { gap: 12px; }
  .header-cta .btn-primary {
    padding: 12px 12px;
    min-height: 44px;
    font-size: 12px;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
}
@media (max-width: 420px) {
  .header-bar { gap: 8px; }
  .site-header .logo { font-size: 1rem; gap: 7px; }
  .site-header .logo .mark { width: 24px; height: 24px; }
  .header-cta { gap: 8px; }
  .header-cta .btn-primary { padding: 12px 10px; font-size: 11.5px; }
}
@media (max-width: 380px) { .header-cta .btn-primary { display: none; } }
.nav-toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--border-strong);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--navy); margin: 4px 0; }

@media (max-width: 1080px) {
  .primary-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); flex-direction: column; align-items: stretch; padding: 12px; border-bottom: 1px solid var(--border); box-shadow: var(--shadow); gap: 2px; max-height: 65vh; max-height: 65dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .primary-nav.open { display: flex; }
  .nav-group-primary { flex-direction: column; align-items: stretch; gap: 2px; }
  .primary-nav a { padding: 12px 14px; }
  .nav-group-company {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }
  .nav-group-label {
    margin: 4px 14px 2px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faint);
  }
  .nav-toggle { display: block; }
}

/* ------------------------------------------------------------ hero / photo placeholders */
.ph {
  background: linear-gradient(155deg, var(--navy) 0%, var(--teal-dark) 55%, var(--teal) 100%);
  color: rgba(234, 244, 244, 0.851);
  color: rgba(234, 244, 244, 0.851); color: oklch(96% 0.01 200 / 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 24px;
  line-height: 1.5;
  position: relative;
  min-height: 180px;
}
.ph::before {
  content: "◆ PHOTO PLACEHOLDER";
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  opacity: 0.7;
}
.ph span { max-width: 34ch; margin-top: 14px; }
/* Blog post photos: color block only, no "PHOTO PLACEHOLDER" tag, no title
   overlay, no flag badge — per client instruction. */
.ph.ph-plain::before { content: none; }

/* --------------------------------------------------------------- sections */
/* Section padding is SYMMETRIC — equal top and bottom. The 2026-08-31 trim
   (below) cut only the top, which left every section visibly bottom-heavy;
   2026-09-09 rebalanced it, keeping the same total space between stacked
   sections (48+48 = the old 72+24; 36+36 = the old 48+24) so no page got
   longer. Change both numbers together, never one.

   Original note — top padding/margin trimmed site-wide 2026-08-31 (72px -> 24px
   on .section, 48px -> 24px on .section.tight, 40px -> 24px on .section-head)
   — extends the landing-page-only spacing fix to every page built from
   these shared classes: home, product pages, About, FAQs, Blog, Contact,
   Trusted Allies, collections, the quiz, and the landing pages (whose
   per-section inline overrides already matched 24px, so they're
   unaffected). Bottom padding/margin is untouched, same one-sided
   approach as the landing-page version — only the gap coming *into* a
   section is trimmed. The "How it works" section is the one exception:
   per the client, it stays at its original spacing (already considered
   tight enough) — see the inline style overrides on its `<section>` and
   `.section-head` in howItWorksSection() (src/build.mjs) that hold it at
   the pre-2026-08-31 48px/40px values against this now-tighter default. */
/* Inline overrides of these MUST use padding-block, not the `padding: Ax 0`
   shorthand — some sections carry .container themselves, and the shorthand's
   implicit 0 wipes .container's 80px side gutters. */
.section { padding: 48px 0; }
.section.tight { padding: 36px 0; }
.section.panel { background: var(--panel); }
.section.navy { background: var(--navy); color: #e5ecf1; color: oklch(94% 0.01 240); }
.section.navy h2, .section.navy h3 { color: white; }
.section.navy p { color: #c5cfd7; color: oklch(85% 0.015 240); }
.section-head { max-width: 760px; margin: 0 0 24px; }
.section-head.center { margin-inline: auto; text-align: center; }

/* ------------------------------------------------------------------ hero */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  padding-top: 56px;
  padding-bottom: 72px;
}
.hero .ph { border-radius: var(--radius-lg); min-height: 420px; box-shadow: var(--shadow-lg); }
.hero .hero-photo { width: 100%; height: 100%; min-height: 420px; max-height: 560px; object-fit: contain; object-position: center; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: block; }
.hero-figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.photo-disclaimer { margin: 0; font-size: 0.72rem; color: var(--muted); text-align: right; }
.kit-media .photo-disclaimer { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 8px; background: rgba(255,255,255,0.9); text-align: center; opacity: 0; transition: opacity 0.2s ease; }
.kit-card:hover .kit-media .photo-disclaimer, .kit-card:focus-visible .kit-media .photo-disclaimer { opacity: 0; }
/* Landing-page variant: large medication photo first; the spinning bag/case appears on hover */
.kit-card .kit-media-tall { height: auto; aspect-ratio: 1600 / 1594; }
.kit-card .kit-media-tall .kit-photo { object-fit: cover; object-position: center; }
.kit-card .kit-media-tall .kit-photo-hover { object-fit: cover; }
.kit-media .photo-disclaimer-static { opacity: 1; }
.kit-card:hover .kit-media .photo-disclaimer-static, .kit-card:focus-visible .kit-media .photo-disclaimer-static { opacity: 0; }
.gallery-main.is-ph ~ .photo-disclaimer, .gallery-main.no-meds ~ .photo-disclaimer { visibility: hidden; }
.hero-badges { display: grid; grid-template-columns: max-content max-content; gap: 10px 22px; margin: 24px 0 28px; }
.hero-badge { white-space: nowrap; }
@media (max-width: 560px) { .hero-badges { grid-template-columns: 1fr; } .hero-badge { white-space: normal; } }
.hero-badge { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }
.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 32px; padding-bottom: 48px; }
  /* Keep the hero eyebrow on one line: shrink type + tracking with the viewport instead of wrapping */
  .hero .eyebrow { display: flex; min-width: 0; max-width: 100%; white-space: nowrap; font-size: clamp(0.55rem, 2.2vw, 0.75rem); letter-spacing: clamp(0.01em, 0.25vw, 0.14em); gap: clamp(4px, 1.2vw, 8px); }
  .hero .eyebrow::before, .hero .eyebrow::after { width: clamp(6px, 1.6vw, 20px); flex-shrink: 0; }
  .hero .ph { min-height: 260px; order: -1; }
  .hero .hero-photo { min-height: 260px; max-height: 340px; }
  .hero .hero-figure { order: -1; }
}

/* ------------------------------------------------------------------ grids */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- collection card */
.collection-card { text-decoration: none; color: inherit; display: block; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.collection-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.collection-card .ph { min-height: 200px; }
.collection-card .card-photo { width: 100%; height: 200px; object-fit: contain; background: #fff; display: block; }
/* Turntable GIFs carry wide side margins (the stills are cropped tight), so each is zoomed to read
   the same size as its still. --hover-zoom is set per collection card in the markup. */
.collection-card .card-photo.is-hover-wide { object-fit: contain; object-position: center top; transform: translateY(var(--hover-shift, 0)) scale(var(--hover-zoom, 1.3)); transform-origin: center top; }
.collection-card .body { position: relative; z-index: 1; background: var(--surface); }
.collection-card { overflow: hidden; position: relative; }
.collection-card .body { padding: 20px 22px 24px; }
.collection-card h3 { margin-bottom: 6px; }
.collection-card .cta-line { margin-top: 12px; font-size: 0.85rem; font-weight: 700; color: var(--teal-dark); display: flex; align-items: center; gap: 6px; }

/* ---------------------------------------------------------------- kit card */
.kit-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.kit-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.kit-card .ph { min-height: 170px; }
.kit-media { position: relative; height: 170px; background: #fff; overflow: hidden; }
.kit-media .kit-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.2s ease; }
.kit-media .kit-photo-hover { opacity: 0; }
.kit-media .kit-photo.kit-photo-contain { object-fit: contain; }
.kit-media .ph.kit-photo-hover { position: absolute; inset: 0; min-height: 0; }
.kit-card:hover .kit-photo-hover, .kit-card:focus-visible .kit-photo-hover { opacity: 1; }
.kit-card:hover .kit-media .kit-photo:not(.kit-photo-hover), .kit-card:focus-visible .kit-media .kit-photo:not(.kit-photo-hover) { opacity: 0; }
.kit-card .body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.kit-card .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.kit-card .blurb { color: var(--muted); font-size: 0.95rem; line-height: 1.5; flex: 1; }
.kit-card .price-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.kit-card .price { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--navy); }
.kit-card .price small { font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; color: var(--faint); }
.kit-card .best-if { font-size: 0.78rem; font-weight: 700; color: var(--teal-dark); text-transform: uppercase; letter-spacing: 0.02em; }

/* ------------------------------------------------------- landing pages */
.trust-strip { background: var(--panel); border-bottom: 1px solid var(--border); padding: 10px 0; font-size: 0.8rem; font-weight: 600; color: var(--muted); text-align: center; }
.lp-header { padding: 20px 0; }
.lp-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* -------------------------------------------------------------- journey */
.journey { display: flex; flex-direction: column; gap: 0; counter-reset: step; }
.journey-step { display: grid; grid-template-columns: 44px 1fr; gap: 18px; position: relative; padding-bottom: 34px; }
.journey-step:last-child { padding-bottom: 0; }
.journey-step .num {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--teal); color: white;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  z-index: 1;
}
.journey-step::before {
  content: "";
  position: absolute;
  left: 21px; top: 44px; bottom: 0;
  width: 2px;
  background: var(--border-strong);
}
.journey-step:last-child::before { display: none; }
.journey-step h4 { margin-bottom: 4px; font-size: 1.1rem; }
.journey-step p { color: var(--muted); margin-bottom: 0; font-size: 0.98rem; }
.journey-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); box-sizing: border-box; width: 100%; }

/* ----------------------------------------------------------------- stats */
.stat-tile { text-align: center; padding: 28px 16px; }
.stat-tile .num { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--teal-dark); }
.stat-tile .label { font-size: 0.82rem; color: var(--muted); margin-top: 4px; }

/* ------------------------------------------------------------- testimonials */
/* One shared review pool (site-wide, not per-kit) scrolls past edge-to-edge
   as a marquee — see reviewsMarquee() in build.mjs. The track renders the
   review list twice back-to-back and animates -50%, so the loop is
   seamless no matter how many reviews are in the pool. */
.reviews-marquee {
  overflow: hidden;
  padding: 8px 0 4px;
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.reviews-track {
  display: flex;
  gap: 20px;
  width: max-content;
  padding: 0 20px;
  animation: reviews-scroll 200s linear infinite;
}
.reviews-marquee:hover .reviews-track,
.reviews-track:focus-within {
  animation-play-state: paused;
}
@keyframes reviews-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-track { animation: none; }
}
.testimonial-card { width: 340px; flex-shrink: 0; padding: 26px 24px; }
.testimonial-card .stars { color: var(--amber-dark); letter-spacing: 2px; font-size: 0.9rem; margin-bottom: 10px; }
.testimonial-card .quote { font-family: var(--font-display); font-size: 1.05rem; color: var(--navy); margin-bottom: 14px; }
.testimonial-card .name { font-size: 0.82rem; font-weight: 700; color: var(--muted); }
@media (max-width: 560px) {
  .testimonial-card { width: 78vw; }
}

/* ----------------------------------------------------------------- FAQ */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 20px 4px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-q .icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; transition: transform 0.2s ease; color: var(--teal-dark); }
.faq-item[data-open="true"] .icon { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.faq-a-inner { padding: 0 4px 20px; color: var(--muted); font-size: 0.94rem; }

/* --------------------------------------------------------------- table */
.med-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.med-table-caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 12px;
  font-size: 0.86rem;
  color: var(--muted);
  max-width: 76ch;
}
.med-table th[scope="row"] { text-align: left; font-size: 0.94rem; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--navy); white-space: nowrap; padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.med-table tr:last-child th[scope="row"] { border-bottom: none; }
.med-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 0.94rem; }
.med-table th { text-align: left; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); font-weight: 700; padding: 10px 14px; border-bottom: 2px solid var(--border-strong); white-space: nowrap; }
.med-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.med-table tr:last-child td { border-bottom: none; }
.med-table td:first-child, .med-table th:first-child { font-weight: 600; color: var(--navy); white-space: nowrap; }
.med-table td:nth-child(2), .med-table th:nth-child(2) { color: var(--muted); white-space: nowrap; }
.med-table td:nth-child(3) { color: var(--muted); min-width: 300px; line-height: 1.45; }
.med-table td:nth-child(4), .med-table td:nth-child(5) { white-space: nowrap; }
@media (max-width: 640px) { .med-table { font-size: 0.88rem; } .med-table td, .med-table th { padding: 10px; } }
/* Included-medications table: rendered as a grid of cards at every width.
   The header row is kept for screen readers but visually removed; cell labels
   come from data-label. One column on phones, two from 720px up. */
.med-table-wrap:has(.med-table-stack) { overflow: visible; }
.med-table-stack { min-width: 0; display: block; font-size: 0.92rem; }
.med-table-stack .med-table-caption { display: block; max-width: 76ch; width: 100%; margin: 0 0 16px; }
.med-table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.med-table-stack tbody { display: grid; grid-template-columns: 1fr; grid-auto-rows: auto; align-items: stretch; gap: 14px; }
@media (min-width: 720px) { .med-table-stack tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.med-table-stack tr { display: block; position: relative; height: auto; min-height: 0; padding: 18px 18px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.med-table-stack th[scope="row"], .med-table-stack td { display: block; padding: 0; border: 0; white-space: normal; min-width: 0; line-height: 1.45; text-align: left; }
.med-table-stack th[scope="row"] .med-card-glyph { position: absolute; top: 10px; right: 10px; width: 64px; height: 64px; overflow: visible; stroke: var(--teal); opacity: 0.16; pointer-events: none; }
.med-table-stack th[scope="row"] { padding-right: 64px; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--navy); line-height: 1.2; letter-spacing: 0; text-transform: none; }
.med-table-stack td[data-label="Common Name"] { color: var(--muted); font-size: 0.85rem; margin-top: 3px; }
.med-table-stack td[data-label="Usage(s)"] { color: var(--muted); font-size: 0.9rem; margin-top: 10px; }
.med-table-stack td[data-label="Dose"], .med-table-stack td[data-label="Quantity"], .med-table-stack td[data-label="Add-on"] { display: inline-flex; vertical-align: top; align-items: baseline; gap: 6px; margin: 12px 8px 0 0; padding: 5px 10px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); font-size: 0.8rem; font-weight: 600; color: var(--navy); }
.med-table-stack td[data-label="Add-on"] { background: var(--teal-tint); border-color: var(--teal); color: var(--teal-dark); }
.med-table-stack td[data-label="Dose"]::before, .med-table-stack td[data-label="Quantity"]::before, .med-table-stack td[data-label="Add-on"]::before { content: attr(data-label); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }

/* Coverage-by-kit matrix: check marks, medication column fixed via <colgroup> */
#coverage-matrix .container, #by-medication .container { max-width: none; }
.cov-table { width: 100%; min-width: 1444px; table-layout: fixed; }
.cov-table col.cov-col-med { width: 17%; }
.cov-table col.cov-col-kit { width: auto; }
.cov-table thead th:first-child { padding: 10px 40px 10px 0; }
.cov-table th[scope="row"] { white-space: normal; padding: 12px 40px 12px 0; line-height: 1.3; font-size: 0.92rem; }
.cov-table th.cov-kit { white-space: normal; overflow-wrap: normal; font-size: 0.64rem; letter-spacing: 0.03em; line-height: 1.35; padding: 10px 6px 12px; text-align: center; vertical-align: bottom; color: var(--faint); font-weight: 700; text-transform: uppercase; }
.cov-table td.cov-cell { padding: 12px 6px; text-align: center; vertical-align: middle; min-width: 0; white-space: normal; font-size: 0.85rem; color: var(--faint); }
.cov-table td.cov-none { color: var(--border-strong); }
.cov-table td.cov-cell:has(.cov-check) { background: rgba(31, 138, 76, 0.07); color: #1f8a4c; }
.cov-table tbody tr:hover td.cov-cell { background: rgba(31, 138, 76, 0.04); }
.cov-table tbody tr:hover td.cov-cell:has(.cov-check) { background: rgba(31, 138, 76, 0.13); }
.cov-table td.cov-cell:nth-child(2), .cov-table th.cov-kit:nth-child(2) { border-left: 1px solid var(--border); }
.cov-table td.cov-cell, .cov-table th.cov-kit { overflow: hidden; }
.cov-count { display: block; margin-top: 4px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0; color: var(--navy); font-variant-numeric: tabular-nums; }
.cov-check { display: inline-block; vertical-align: middle; color: #1f8a4c; }
@media (max-width: 640px) { .cov-table { min-width: 1060px; } .cov-table col.cov-col-med { width: 19%; } .cov-table th[scope="row"] { font-size: 0.84rem; padding: 10px 24px 10px 0; } .cov-table th.cov-kit { font-size: 0.6rem; letter-spacing: 0.02em; padding: 8px 4px; } .cov-table td.cov-cell { padding: 10px 4px; } .cov-check { width: 15px; height: 15px; } }
.supply-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; }
.supply-list li { padding-left: 22px; position: relative; font-size: 1.05rem; }
.supply-list li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
.supply-list.negative li::before { content: "✕"; color: var(--danger); }
@media (max-width: 640px) { .supply-list { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- tabs */

/* --------------------------------------------------------- product page */
.product-hero { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 48px; padding-top: 40px; padding-bottom: 24px; align-items: start; }
.product-hero .ph { min-height: 460px; border-radius: var(--radius-lg); }
.product-gallery { display: flex; flex-direction: column; gap: 12px; min-width: 0; max-width: 620px; width: 100%; }
.gallery-main { position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); aspect-ratio: 1 / 1; overflow: hidden; cursor: zoom-in; }
.gallery-img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
.gallery-main { transition: aspect-ratio 0.25s ease; }
.gallery-main.contain .gallery-img, .gallery-thumb[data-contain] img { object-fit: contain; }
.gallery-badge { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); margin: 0; padding: 8px 16px; font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; color: var(--surface); background: var(--teal); border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,0.18); pointer-events: none; z-index: 2; }
.gallery-badge[hidden] { display: none; }
@media (max-width: 480px) { .gallery-badge { font-size: 0.8rem; padding: 6px 12px; white-space: normal; text-align: center; max-width: calc(100% - 28px); } }
.gallery-ph { position: absolute; inset: 0; min-height: 0; border-radius: 0; }
.gallery-ph[hidden], .gallery-img[hidden] { display: none; }
.gallery-lens { position: absolute; width: 220px; height: 220px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 6px 22px rgba(0,0,0,0.3); background: #fff no-repeat; pointer-events: none; opacity: 0; transition: opacity 0.12s ease; }
.gallery-main.zooming .gallery-lens { opacity: 1; }
.gallery-hint { position: absolute; bottom: 10px; right: 12px; margin: 0; font-size: 0.72rem; font-weight: 600; color: var(--muted); background: rgba(255,255,255,0.88); border: 1px solid var(--border); padding: 3px 9px; border-radius: 999px; pointer-events: none; }
.gallery-main.zooming .gallery-hint, .gallery-main.is-ph .gallery-hint { display: none; }
.gallery-thumbs { display: flex; gap: 10px; }
.gallery-thumb { width: 76px; height: 76px; padding: 0; border: 2px solid var(--border); border-radius: var(--radius); background: #fff; cursor: pointer; overflow: hidden; }
.gallery-thumb:hover { border-color: var(--teal-dark); }
.gallery-thumb.selected { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(0, 120, 124, 0.251); box-shadow: 0 0 0 2px oklch(52% 0.09 200 / 0.25); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb .ph.ph-thumb { display: block; width: 100%; height: 100%; min-height: 0; padding: 0; }
.ph.ph-thumb::before { content: none; }
.ph.ph-thumb .flag-badge { top: 4px; right: 4px; }
@media (hover: none) { .gallery-lens, .gallery-hint { display: none; } .gallery-main { cursor: default; } }
.product-meta { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 14px 0 20px; }
.product-price { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; color: var(--navy); }
.product-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
@media (max-width: 900px) {
  .product-hero { grid-template-columns: 1fr; }
  .product-hero .ph { min-height: 260px; }
}

.breadcrumb { font-size: 0.82rem; color: var(--faint); padding-top: 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb a { text-decoration: none; color: var(--faint); }
.breadcrumb a:hover { color: var(--teal-dark); }

/* --------------------------------------------------------------- footer */
.site-footer { background: var(--navy); color: #cfd9e1; color: oklch(88% 0.015 240); padding: 64px 0 10px; margin-top: 96px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 0.9fr 1.2fr 1.1fr 0.9fr; gap: 32px; padding-bottom: 36px; border-bottom: 1px solid #404952; border-bottom: 1px solid oklch(40% 0.02 250); }
.footer-col { min-width: 0; }
.footer-col h4 { color: white; font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col a { display: block; color: #b5bfc7; color: oklch(80% 0.015 240); text-decoration: none; font-size: 0.9rem; margin-bottom: 10px; }
.footer-col a:hover { color: white; }
.footer-brand .logo { display: flex; align-items: center; color: white; margin-bottom: 14px; }
.footer-brand p { color: #9da6ad; color: oklch(72% 0.015 240); font-size: 0.88rem; max-width: 34ch; }
.footer-badges { display: flex; align-items: center; gap: 20px; margin-top: 14px; flex-wrap: nowrap; }
.footer-badge { height: 64px; width: auto; display: block; }
.footer-badge[alt="GoGoMeds"] { height: 34px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-size: 0.8rem; color: #879198; color: oklch(65% 0.015 240); flex-wrap: wrap; gap: 12px; }
.footer-bottom .legal-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-bottom a { text-decoration: none; color: #879198; color: oklch(65% 0.015 240); }
.footer-bottom a:hover { color: white; }
/* The credit band is exactly the logo plus equal breathing room top and
   bottom, so the mark reads centred rather than sitting in a tall box. The
   footer's own bottom padding matches the padding-top here. */
.footer-sub { display: flex; justify-content: flex-start; align-items: center; gap: 16px; padding-top: 10px; min-height: 0; }
.footer-sub-logo { display: block; height: 44px; flex-shrink: 0; }
.footer-sub-logo img { height: 100%; width: auto; display: block; }
.footer-sub-logo svg { height: 100%; width: auto; display: block; }
.footer-sub-copy { font-size: 0.8rem; color: #879198; color: oklch(65% 0.015 240); text-align: right; }
@media (max-width: 560px) { .footer-sub { flex-direction: column; align-items: flex-start; justify-content: flex-start; } .footer-sub-copy { text-align: left; } }
.placeholder-flag { color: var(--amber); font-weight: 700; }
@media (max-width: 1100px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } .footer-badges { flex-wrap: wrap; } }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; align-items: flex-start; } }

/* -------------------------------------------------------------- forms */
.form-field { margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 0.84rem; font-weight: 700; color: var(--navy); }
.form-field input, .form-field select, .form-field textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--teal); }
.form-field .error { color: var(--danger); font-size: 0.8rem; display: none; }
.form-field.invalid input, .form-field.invalid select, .form-field.invalid textarea { border-color: var(--danger); }
.form-field.invalid .error { display: block; }
.form-status { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-sm); font-size: 0.9rem; display: none; }
.form-status.show { display: block; }
.form-status.ok { background: #d4f5da; background: oklch(94% 0.05 150); color: var(--ok); }

/* --------------------------------------------------------------- quiz */
.quiz-card { max-width: 680px; margin: 0 auto; transition: max-width 0.2s ease; }
.quiz-card.wide { max-width: 980px; }
.quiz-progress { height: 6px; background: var(--panel); border-radius: 4px; overflow: hidden; margin-bottom: 28px; }
.quiz-progress-bar { height: 100%; background: var(--teal); border-radius: 4px; transition: width 0.3s ease; width: 0%; }
.quiz-option { display: block; width: 100%; text-align: left; padding: 16px 18px; border: 1.5px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); font-family: var(--font-body); font-size: 0.98rem; font-weight: 600; cursor: pointer; margin-bottom: 10px; transition: border-color 0.15s, background 0.15s; }
.quiz-option:hover { border-color: var(--teal); background: var(--teal-tint); }
.quiz-option.selected { border-color: var(--teal); background: var(--teal-tint-2); }
.quiz-step { display: none; }
.quiz-step.active { display: block; }
.quiz-hint { color: var(--muted); font-size: 0.88rem; margin: -8px 0 18px; }
.quiz-check { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1.5px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); margin-bottom: 10px; cursor: pointer; transition: border-color 0.15s, background 0.15s; font-weight: 600; font-size: 0.96rem; }
.quiz-check:hover { border-color: var(--teal); background: var(--teal-tint); }
.quiz-check input { width: 18px; height: 18px; accent-color: var(--teal-dark); flex-shrink: 0; }
.quiz-check:has(input:checked) { border-color: var(--teal); background: var(--teal-tint-2); }
.quiz-check-none { margin-top: 4px; border-top: 1px dashed var(--border); padding-top: 14px; font-weight: 500; color: var(--muted); }
.quiz-nav-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.quiz-nav-row .btn-ghost { margin: 0; width: auto; }
.quiz-nav-row .btn-primary { flex: 1; }
.quiz-result { text-align: center; }
.quiz-result .eyebrow { justify-content: center; }
.quiz-result-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin-top: 24px; text-align: left; }
.quiz-sorry { text-align: center; padding: 12px 0; }

/* ---------------------------------------------------- optional add-ons modal */
.addon-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(15, 24, 31, 0.549);
  /* No backdrop-filter: blurring the whole page on open is the slow part
     (it re-rasterizes everything underneath, stacked on the header's own
     blur). A slightly deeper scrim gives the same separation for free. */
  background: rgba(15, 24, 31, 0.64); background: oklch(20% 0.02 250 / 0.64);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.addon-modal-backdrop.open { display: flex; }
.addon-modal {
  background: var(--surface);
  width: 100%;
  max-width: 760px;
  padding: 36px 40px 40px;
  position: relative;
  animation: addon-modal-in 0.16s ease-out;
  will-change: transform, opacity; /* own compositor layer so the entrance is GPU-only */
  contain: layout paint;
}
@keyframes addon-modal-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.addon-modal-header { display: flex; align-items: flex-start; justify-content: space-between; }
.addon-modal-close {
  background: none;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
}
.addon-modal-close:hover { border-color: var(--teal); color: var(--teal-dark); }
.addon-modal h2 { margin-bottom: 8px; }
.addon-modal-sub { color: var(--muted); font-size: 0.94rem; margin-bottom: 20px; }
.addon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 24px; }
@media (max-width: 640px) { .addon-grid { grid-template-columns: 1fr; } }
.addon-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.addon-card:hover { border-color: var(--teal); background: var(--teal-tint); }
.addon-card:has(.addon-checkbox:checked) { border-color: var(--teal); background: var(--teal-tint-2); }
.addon-card.selected { border-color: var(--teal); background: var(--teal-tint-2); }
.addon-checkbox { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--teal-dark); flex-shrink: 0; cursor: pointer; }
.addon-card-body { flex: 1; }
.addon-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.addon-name { font-weight: 700; font-size: 0.94rem; color: var(--navy); }
.addon-price { font-weight: 700; font-size: 0.92rem; color: var(--amber-dark); white-space: nowrap; }
.addon-meta { font-size: 0.76rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.03em; margin: 4px 0; }
.addon-indication { font-size: 0.85rem; color: var(--muted); margin: 0; }
.addon-modal-footer { border-top: 1px solid var(--border); padding-top: 20px; }
/* Upsell strip under the "What it treats" infographic (product pages) */
.treats-upsell { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.treats-upsell-text { margin: 0; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--navy); }
@media (max-width: 640px) { .treats-upsell-text { font-size: 1.15rem; } }
.addon-summary { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.addon-total { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--navy); }
.addon-modal-footer .btn-primary.full { margin-bottom: 10px; }
.addon-order-summary { margin-top: 24px; padding-top: 20px; border-top: 1px dashed var(--border-strong); font-size: 0.85rem; color: var(--muted); }
.addon-order-line { display: flex; justify-content: space-between; padding: 4px 0; }
@media (max-width: 640px) { .addon-modal { padding: 28px 22px 30px; } .addon-modal-backdrop { padding: 12px; align-items: flex-start; } }
@media (max-width: 480px) { .addon-modal-backdrop { padding: 0; } .addon-modal { min-height: 100%; border-radius: 0; padding: 24px 18px 32px; } }

.order-confirm {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: #d4f5da;
  background: #d4f5da; background: oklch(94% 0.05 150);
  color: var(--ok);
  font-size: 0.9rem;
  border: 1px solid #99cda3;
  border: 1px solid #99cda3; border: 1px solid oklch(80% 0.08 150);
}
.order-confirm strong { display: block; margin-bottom: 4px; color: #154f27; color: oklch(38% 0.09 150); }

/* ------------------------------------------------------------- utility */
.mt-0 { margin-top: 0 !important; }
.text-center { text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: white; padding: 12px 18px; z-index: 200; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------------------------------------------------------------------------
   Legal pages (/legal/*) — added 2026-09-06 with the legal-page rebuild.
   Long-form policy documents: generous measure, clear heading hierarchy, and
   an "On this page" contents block matching how the source pages present.
   --------------------------------------------------------------------------- */
.legal-page h2 {
  margin-top: 40px;
  margin-bottom: 12px;
  scroll-margin-top: 24px; /* so anchor jumps don't hide the heading under the header */
}
.legal-page h3 {
  margin-top: 28px;
  margin-bottom: 10px;
}
.legal-page p { margin-bottom: 14px; }
.legal-page ul { margin: 0 0 18px 20px; }
.legal-page li { margin-bottom: 8px; }
.legal-updated {
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 24px;
}
.legal-toc {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  padding: 20px 24px;
  margin: 28px 0 36px;
}
.legal-toc ul {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 32px;
}
.legal-toc li { margin-bottom: 6px; break-inside: avoid; }
@media (max-width: 640px) {
  .legal-toc ul { columns: 1; }
}
.kit-card:hover .kit-media-tall .ph, .kit-card:focus-visible .kit-media-tall .ph { opacity: 0; }
.kit-media-tall .ph { transition: opacity .25s ease; }


/* ---- Android / narrow-phone pass ------------------------------------------
   Chrome on Android paints a grey-blue flash on every tap; replace it with a
   faint teal from the palette. 360px is the common Galaxy width — 10% tighter
   than the iPhone width the earlier mobile audit used. */
a, button, .btn, summary, [role="button"], input, select, textarea {
  -webkit-tap-highlight-color: rgba(0, 121, 128, 0.149);
  -webkit-tap-highlight-color: rgba(0, 121, 128, 0.149); -webkit-tap-highlight-color: oklch(52% 0.09 200 / 0.15);
}
@media (max-width: 380px) {
  .footer-badge { height: 52px; }
  .footer-badge[alt="GoGoMeds"] { height: 28px; }
  .footer-badges { gap: 14px; }
  .hero-badges { gap: 8px; }
  .med-table td:nth-child(3) { min-width: 0; }
}

/* Touch devices have no hover, so the medication photo would never be seen.
   .is-revealed is applied by app.js as a kit card passes the middle of the
   viewport; it mirrors the :hover swap exactly. */
.kit-card.is-revealed .kit-photo-hover { opacity: 1; transition: none; }
.kit-card.is-revealed .kit-media .kit-photo:not(.kit-photo-hover) { opacity: 0; }
.kit-card.is-revealed .kit-media .photo-disclaimer,
.kit-card.is-revealed .kit-media .photo-disclaimer-static { opacity: 0; }
.kit-card.is-revealed .kit-media-tall .ph { opacity: 0; }

.footer-copy-legal { display: block; margin-top: 14px; color: #9da6ad; color: oklch(72% 0.015 240); font-size: 0.82rem; }

@media (max-width: 860px) { .section.navy .grid-2 { grid-template-columns: 1fr !important; gap: 28px !important; } }

/* Looping turntable video, layered over the still product photo. Fades in only
   once it can play, so a slow or missing file never shows a blank card. Same
   geometry and the same locked --hover-zoom / --hover-shift crop as the still. */
.collection-card .card-video {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 200px;
  object-fit: contain; background: #fff;
  display: block; opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.collection-card .card-video.is-ready { opacity: 1; }
.collection-card .card-video.is-hover-wide {
  object-fit: contain; object-position: center top;
  transform: translateY(var(--hover-shift, 0)) scale(var(--hover-zoom, 1.3));
  transform-origin: center top;
}

/* Set by app.js once the turntable video is playing. Opacity rather than
   display, so the still keeps holding the card's 200px height. */
.collection-card .card-photo.is-video-covered { opacity: 0; transition: opacity 0.3s ease; }

/* ---------------------------------------------------- mobile input / safe area */

/* iOS zooms the viewport when a focused field's text is under 16px, and the
   page never zooms back. 0.95rem is 15.2px, so touch devices get 16px flat.
   Keyed on (hover: none) rather than a width, because an iPad in landscape is
   wider than any breakpoint here and still does it. */
@media (hover: none) {
  .form-field input,
  .form-field select,
  .form-field textarea,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px;
  }
}

/* Standalone (added to home screen) has no browser chrome, so the notch and the
   home indicator overlap the page. env() resolves to 0 in a normal tab, so the
   max() calls are a no-op there. */
.site-header { padding-top: env(safe-area-inset-top, 0px); }
@media (max-width: 900px) {
  .container {
    padding-left: max(24px, env(safe-area-inset-left, 0px));
    padding-right: max(24px, env(safe-area-inset-right, 0px));
  }
}
.site-footer { padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
.addon-modal-backdrop {
  padding-top: max(5vh, env(safe-area-inset-top, 0px));
  padding-bottom: max(5vh, env(safe-area-inset-bottom, 0px));
}

/* --------------------------------------------------- kit detail, un-tabbed */
/* These four blocks used to be tabs. Google indexes `display: none` tab
   content but heavily discounts it for featured snippets and rich results,
   and the medications table is exactly the content that needs to win those.
   Stacked and always visible instead — the infographic still comes first. */
.kit-detail { display: flex; flex-direction: column; gap: 8px; }
.kit-detail-section { padding: 28px 0; border-top: 1px solid var(--border); }
.kit-detail-section:first-of-type { padding-top: 8px; border-top: none; }
.kit-detail-section > p { font-size: 1.05rem; }
.kit-detail-h {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
  color: var(--navy);
  margin: 0 0 18px;
}
@media (max-width: 640px) {
  .kit-detail-section { padding: 22px 0; }
  .kit-detail-section > p { font-size: 1.05rem; }
.kit-detail-h { margin-bottom: 14px; }
}

/* ------------------------------------------------- medication kit filter */
/* The collection pages' filter uses `.tag.selected`, for which no rule
   exists — so the active state there is invisible. This one styles its own
   pressed state off aria-pressed, which is also what assistive tech reads. */
.med-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.med-filter button {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 14px;
  min-height: 38px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--navy);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.med-filter button:hover { border-color: var(--teal); background: var(--teal-tint); color: var(--teal-dark); }
.med-filter button[aria-pressed="true"] { background: var(--teal-dark); border-color: var(--teal-dark); color: #f4fefe; color: oklch(99% 0.01 200); }
.med-filter button[aria-pressed="true"] span { opacity: 0.75; }
@media (hover: none) { .med-filter button { min-height: 44px; } }


/* ------------------------------------------------- medication cards */
/* Layout lives here rather than inline: an inline `display:flex` outranks
   the UA's `[hidden]{display:none}`, so the kit filter's hidden attribute
   had no effect. The [hidden] rules below are author-level and more specific
   than the base class, which is what makes hiding actually win. */
.med-card { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.med-chip-row { display: flex; flex-wrap: wrap; gap: 5px; }
.med-card[hidden], .med-chip-row[hidden] { display: none; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }