/* ============================================================
   NexLifeRx — consolidated design system v7
   One source of truth. Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64
   cream #F7F4EE · ink #10333A · teal #2E8B8B · deep #14555A · sand #E9C892
   ============================================================ */
:root {
  --cream: #F7F4EE; --cream-2: #F1EDE3; --paper: #FFFFFF;
  /* text greys are WCAG AA (>=4.5:1) on every surface in this palette;
     --hairline is the old --faint value, kept for non-text UI only (rules, ticks, bars) */
  --ink: #10333A; --ink-soft: #274A50; --muted: #556360; --faint: #5F6E6B; --hairline: #8B9694;
  --teal: #2E8B8B; --teal-text: #267676; --teal-deep: #14555A; --teal-tint: #E3F0EE;
  --sand: #E9C892; --sand-deep: #C89B55; --sand-ink: #8F6A2E; --sand-tint: #F8EFDD;
  --safety-bg: #FBEDE8; --safety-line: #EBCDC2; --safety: #B4432E;
  --line: #E6E1D4; --line-2: #D8D2C2;
  --ok: #276E45; --ok-tint: #E6F2EA;
  --r-lg: 18px; --r-md: 14px; --r-sm: 10px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --shadow: 0 18px 50px rgba(16,51,58,.10);
  --shadow-sm: 0 8px 22px rgba(16,51,58,.07);
  --max: 1280px;
  /* type scale — every font-size in this sheet resolves to one of these */
  --t-2xs: 11px; --t-xs: 12px; --t-sm: 13px; --t-ui: 14px; --t-base: 15px;
  --t-md: 17px; --t-lg: 20px; --t-xl: 24px; --t-display: clamp(23px, 3vw, 30px);
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; scroll-padding-top: 88px; }
body { margin: 0; overflow-x: clip; background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: var(--t-base); line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .serif { font-family: var(--serif); }
h1, h2, h3, h4 { text-wrap: balance; letter-spacing: -.012em; }
p, li { text-wrap: pretty; }
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 8px; }
.guide-head :focus-visible, .btn-teal:focus-visible, .dose-choice.selected:focus-visible { outline-color: var(--sand); }
::selection { background: var(--teal-tint); }
@media (prefers-contrast: more) {
  :root { --line: #B9B2A0; --line-2: #9A917C; --muted: #3F4B49; --faint: #3F4B49; }
  .selection-card, .product-card, .plan-card, .dose-choice, .check-row, .schip { border-width: 2px; }
  :focus-visible { outline-width: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* the header is sticky — keep it from covering whatever we scroll or focus into view */
.panel-intro h3, .guide-head h2, .checklist, .dose-choice-grid, .dose-verify,
.label-guide, .gcard { scroll-margin-top: 96px; }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 1000; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 10px; }
.skip-link:focus { top: 16px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- buttons ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: var(--t-ui); padding: 13px 22px; border-radius: var(--r-sm); border: 1.5px solid transparent; cursor: pointer; transition: transform .18s, background .18s, border-color .18s, box-shadow .18s; }
.button:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.button:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-teal { background: var(--teal-deep); color: #fff; }
.btn-teal:hover { background: #0F464A; }
.btn-sand { background: var(--sand); color: var(--ink); }
.btn-sand:hover { background: #E2BC7B; }
.btn-outline { background: var(--paper); color: var(--ink); border-color: var(--line-2); }
.btn-outline:hover { border-color: var(--ink); }
.btn-outline-sand { background: var(--paper); color: var(--ink); border-color: var(--sand-deep); }
.btn-sm { padding: 12px 18px; min-height: 44px; font-size: var(--t-sm); }
.back-button { background: transparent; border: 1.5px solid var(--line-2); color: var(--muted); padding: 12px 20px; border-radius: var(--r-sm); font-weight: 600; cursor: pointer; }
.back-button:hover { border-color: var(--ink); color: var(--ink); }
.quiet-button { background: none; border: 0; color: var(--faint); font-size: var(--t-sm); font-weight: 600; cursor: pointer; padding: 10px 4px; min-height: 44px; }
.quiet-button:hover { color: var(--ink); text-decoration: underline; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.header-inner { max-width: var(--max); margin: 0 auto; height: 66px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--serif); font-weight: 700; font-size: var(--t-xl); letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.brand .rx { color: var(--teal-text); }
.desktop-nav { display: flex; align-items: center; gap: 2px; }
.desktop-nav a { font-size: var(--t-ui); font-weight: 500; color: var(--ink-soft); padding: 8px 11px; border-radius: 8px; white-space: nowrap; }
.desktop-nav a:hover { background: var(--cream); color: var(--ink); }
.menu-button { display: none; flex: none; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; cursor: pointer; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.menu-button span { display: block; width: 16px; height: 2px; background: var(--ink); border-radius: 2px; }

/* mobile drawer */
.menu-backdrop { position: fixed; inset: 0; z-index: 198; background: rgba(13,33,38,.45); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.menu-backdrop.open { opacity: 1; pointer-events: auto; }
.mobile-menu { position: fixed; top: 0; right: 0; bottom: 0; z-index: 199; width: min(320px, 84vw); background: #fff; border-left: 1px solid var(--line); box-shadow: -20px 0 60px rgba(13,33,38,.18); display: flex !important; flex-direction: column; padding: 16px 16px 20px; transform: translateX(105%); transition: transform .28s var(--ease); overflow-y: auto; visibility: hidden; }
.mobile-menu.open { transform: translateX(0); visibility: visible; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.drawer-top .brand { font-size: var(--t-lg); }
.drawer-close { width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; cursor: pointer; font-size: var(--t-md); color: var(--ink); }
.mobile-menu nav { display: grid; }
.mobile-menu nav a { padding: 14px 12px; border-radius: 10px; font-weight: 600; font-size: var(--t-base); border-bottom: 1px solid var(--cream-2); }
.mobile-menu nav a:hover { background: var(--cream); }
.drawer-cta { margin-top: auto; display: grid; gap: 10px; padding-top: 16px; }
.drawer-cta .button { width: 100%; }
.drawer-contact { text-align: center; color: var(--muted); font-size: var(--t-xs); }
.drawer-contact a { font-weight: 700; color: var(--teal-deep); }
body.menu-locked { overflow: hidden; }

/* ---------- hero (home) ---------- */
.hero { background: linear-gradient(160deg, #FBF9F4, #EFEAE0); border-bottom: 1px solid var(--line); overflow: hidden; }
.hero-inner { max-width: var(--max); margin: 0 auto; padding: 48px 24px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px; align-items: center; }
.hero h1 { font-size: clamp(36px, 4.6vw, 54px); line-height: 1.08; letter-spacing: -.015em; font-weight: 700; max-width: 13ch; }
.hero-sub { margin-top: 16px; color: var(--muted); font-size: var(--t-md); max-width: 42ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 28px; }
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-xs); font-weight: 500; color: var(--muted); }
.hero-trust svg { width: 17px; height: 17px; stroke: var(--teal); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-visual { position: relative; min-height: 420px; display: grid; place-items: center; }
.hero-leaf { position: absolute; right: -40px; top: -20px; width: 300px; opacity: .5; }
.phone { position: relative; z-index: 2; width: 230px; background: #10282C; border-radius: 34px; padding: 10px; box-shadow: 0 30px 70px rgba(16,51,58,.28); transform: rotate(-3deg); }
.phone-screen { background: #FBF9F4; border-radius: 26px; padding: 16px 14px 18px; }
.phone-notch { width: 74px; height: 18px; border-radius: 99px; background: #10282C; margin: 0 auto 12px; }
.phone-hello { font-family: var(--serif); font-weight: 700; font-size: var(--t-base); }
.phone-card { margin-top: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 11px; display: flex; align-items: center; gap: 9px; }
.phone-card small { display: block; font-size: var(--t-2xs); color: var(--faint); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.phone-card b { font-size: var(--t-2xs); }
.phone-ic { width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--teal-tint); display: grid; place-items: center; color: var(--teal-deep); font-size: var(--t-xs); }
.phone-cta { margin-top: 10px; background: var(--teal-deep); color: #fff; text-align: center; font-size: var(--t-2xs); font-weight: 700; border-radius: 9px; padding: 10px; }
.hero-vials { position: absolute; z-index: 1; right: 4%; bottom: 6%; display: flex; align-items: flex-end; gap: 12px; }
.hero-vials .vial-svg { width: 90px; }
.hero-vials .vial-svg:last-child { width: 108px; }
.float-a { animation: floaty 6s ease-in-out infinite; }
.float-b { animation: floaty 7s ease-in-out infinite .8s; }
@keyframes floaty { 50% { transform: translateY(-9px); } }

/* ---------- home sections ---------- */
section.block { padding: 56px 0; }
section.block.tint { background: var(--cream-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-head { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.sec-head h2 { margin-bottom: 10px; font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; letter-spacing: -.01em; }
.sec-head p { color: var(--muted); }

.steps-row { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; }
.step-card { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 28px 16px 22px; text-align: center; }
.step-num { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--teal-deep); color: #fff; display: grid; place-items: center; font-size: var(--t-xs); font-weight: 700; }
.step-card .ic, .program-card .ic { width: 46px; height: 46px; margin: 0 auto 12px; display: grid; place-items: center; }
.step-card .ic { border-radius: 12px; background: var(--teal-tint); }
.program-card .ic { border-radius: 50%; border: 1.5px solid var(--teal); }
.step-card .ic svg, .program-card .ic svg { width: 23px; height: 23px; stroke: var(--teal-deep); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.step-card h3, .program-card h3 { font-size: var(--t-md); margin-bottom: 5px; }
.step-card p, .program-card p { color: var(--muted); font-size: var(--t-xs); }

.programs-row { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; }
.program-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px 16px; text-align: center; transition: transform .2s, box-shadow .2s, border-color .2s; }
a.program-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--teal); }

.meds-row { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; }
.med-card { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 12px 18px; text-align: center; transition: transform .2s, box-shadow .2s, border-color .2s; }
a.med-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--teal); }
.med-art { height: 140px; display: grid; place-items: center; background: radial-gradient(circle at 50% 80%, rgba(46,139,139,.10), transparent 60%); border-radius: 10px; margin-bottom: 10px; }
.med-art .vial-svg { width: 64px; }
.med-art .tab-svg { width: 88px; }
.med-card h3 { font-size: var(--t-xs); font-family: var(--sans); font-weight: 700; line-height: 1.35; }
.soon-badge { position: absolute; top: 10px; right: 10px; z-index: 2; font-size: var(--t-2xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); background: var(--cream); border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; }

.match-panel { background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px clamp(20px, 4vw, 44px); display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center; }
.match-visual { display: grid; grid-template-columns: 1fr 34px 1fr; align-items: center; gap: 6px; }
.match-visual .col { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 12px 18px; text-align: center; }
.match-visual .col small { display: block; font-size: var(--t-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.match-visual .vial-svg { width: 76px; margin: 0 auto; }
.match-arrow { text-align: center; color: var(--teal-text); font-size: var(--t-lg); font-weight: 700; }
.match-confirmed { display: inline-flex; align-items: center; gap: 9px; background: var(--paper); border: 1.5px solid var(--ok); color: var(--ok); border-radius: 999px; padding: 10px 18px; font-weight: 700; font-size: var(--t-ui); }
.match-list-home { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.match-list-home li { display: flex; gap: 11px; align-items: center; font-size: var(--t-ui); color: var(--ink-soft); }
.match-list-home li::before { content: "✓"; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--teal-tint); color: var(--teal-deep); display: grid; place-items: center; font-size: var(--t-2xs); font-weight: 800; }
.match-lock { display: flex; gap: 10px; align-items: center; margin-top: 16px; color: var(--muted); font-size: var(--t-xs); }
.match-lock svg { width: 16px; height: 16px; flex: none; stroke: var(--muted); fill: none; stroke-width: 1.8; }

.hub-row { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; }
.hub-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; text-align: center; transition: transform .2s, box-shadow .2s; }
a.hub-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.hub-art { height: 92px; background: var(--teal-tint); display: grid; place-items: center; }
.hub-art svg { width: 42px; height: 42px; stroke: var(--teal-deep); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hub-card h3 { margin: 12px 8px 4px; font-size: var(--t-sm); font-family: var(--sans); font-weight: 700; }
.hub-card p { margin: 0 10px 16px; color: var(--muted); font-size: var(--t-2xs); }

.trust-bar { background: var(--cream-2); border-top: 1px solid var(--line); padding: 24px 0; }
.trust-bar .wrap { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.trust-bar .item { display: flex; gap: 12px; align-items: center; justify-content: center; }
.trust-bar .item svg { width: 30px; height: 30px; flex: none; stroke: var(--teal-deep); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.trust-bar b { display: block; font-size: var(--t-sm); }
.trust-bar small { color: var(--muted); font-size: var(--t-xs); }

/* Content is visible by default. It is only hidden for the scroll reveal when
   scripting is available to un-hide it, so a no-JS visitor still sees every
   section instead of a blank page. */
.reveal-on-scroll { opacity: 1; transform: none; }
@media (scripting: enabled) {
  .reveal-on-scroll { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s var(--ease); }
  .reveal-on-scroll.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .reveal-on-scroll { opacity: 1; transform: none; transition: none; } }

/* ---------- wizard shell ---------- */
.wizard-shell { max-width: var(--max); margin: 0 auto; padding: 24px 24px 64px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.wizard-side { position: sticky; top: 82px; display: grid; gap: 12px; }
.side-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; box-shadow: var(--shadow-sm); }
.side-card h1 { font-size: var(--t-xl); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; margin-bottom: 6px; }
.side-card .sub { color: var(--muted); font-size: var(--t-xs); margin-bottom: 16px; }
.progress-header { display: flex; justify-content: space-between; align-items: center; font-size: var(--t-xs); font-weight: 700; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.progress-track { height: 5px; border-radius: 99px; background: var(--cream-2); overflow: hidden; margin: 10px 0 14px; }
.progress-track span { display: block; height: 100%; width: 16.6%; border-radius: 99px; background: linear-gradient(90deg, var(--teal), var(--teal-deep)); transition: width .45s var(--ease); }
.step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.step-list li { position: relative; display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: 10px; color: var(--faint); font-size: var(--t-sm); font-weight: 600; }
.step-list li span { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--line-2); display: grid; place-items: center; font-size: var(--t-xs); font-weight: 700; }
.step-list li:not(:last-child)::after { content: ""; position: absolute; left: 20px; top: 36px; height: 8px; border-left: 2px dashed var(--line-2); }
.step-list li.active { background: var(--teal-tint); color: var(--ink); }
.step-list li.active span { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.step-list li.complete { color: var(--ink-soft); }
.step-list li.complete span { background: var(--teal-text); border-color: var(--teal-text); color: #fff; font-size: 0; }
.step-list li.complete span::before { content: "✓"; font-size: var(--t-xs); }
.step-list li.complete:not(:last-child)::after { border-left-style: solid; border-color: var(--teal); }
.side-summary { display: grid; gap: 6px; margin-top: 14px; }
.side-summary:empty { display: none; }
.wizard-side .help-card { justify-content: flex-start; }
.wizard-side .help-card .chev { margin-left: auto; }
.help-card { display: flex; align-items: center; gap: 13px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; box-shadow: var(--shadow-sm); transition: transform .2s; }
.help-card:hover { transform: translateY(-2px); }
.help-card .hc-ic { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--teal-tint); display: grid; place-items: center; color: var(--teal-deep); }
.help-card small { display: block; color: var(--faint); font-size: var(--t-2xs); }
.help-card b { font-size: var(--t-ui); }
.help-card .chev { color: var(--faint); }

.wizard-main { min-width: 0; }
.finder-panel { min-height: 560px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px clamp(18px, 2.6vw, 32px) 28px; box-shadow: var(--shadow-sm); }
.panel-anim { animation: stepIn .34s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.panel-intro h3:focus, .guide-head h2:focus { outline: none; }

/* selection chips */
.summary-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.schip { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 999px; padding: 10px 16px; cursor: pointer; transition: border-color .2s, transform .15s; max-width: 100%; }
.schip:hover { border-color: var(--teal); transform: translateY(-1px); }
.schip small { font-size: var(--t-2xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.schip b { font-size: var(--t-xs); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.schip span { color: var(--teal-text); font-size: var(--t-2xs); }
.side-summary .schip { border-radius: 10px; width: 100%; justify-content: flex-start; }
.side-summary .schip span { margin-left: auto; }
.side-summary .schip { align-items: flex-start; }
.side-summary .schip b { max-width: none; white-space: normal; overflow: visible; line-height: 1.35; }
@media (min-width: 981px) { .finder-panel .summary-chips { display: none; } }

/* ---------- wizard panels ---------- */
.panel-intro { margin-bottom: 20px; }
.panel-intro h3 { font-size: clamp(23px, 3vw, 30px); font-weight: 700; margin: 6px 0 8px; }
.panel-intro p { color: var(--muted); font-size: var(--t-ui); max-width: 60ch; }
.step-kicker { font-size: var(--t-2xs); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--teal-text); }

.selection-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.selection-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.selection-card { position: relative; text-align: left; cursor: pointer; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 18px; min-height: 132px; display: flex; flex-direction: column; gap: 3px; transition: border-color .2s, transform .2s, box-shadow .2s; }
.selection-card:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.selection-card.selected { border-color: var(--teal-deep); background: #FDFCF8; box-shadow: var(--shadow-sm); }
.selection-card.disabled { opacity: .55; cursor: default; }
.selection-card.disabled:hover { transform: none; border-color: var(--line); box-shadow: none; }
.selection-card small { color: var(--teal-text); font-size: var(--t-2xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.selection-card h4 { margin: 3px 0 4px; font-size: var(--t-base); }
.selection-card p { color: var(--muted); font-size: var(--t-xs); }
.card-icon { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--teal); display: grid; place-items: center; color: var(--teal-deep); font-size: var(--t-md); margin-bottom: 8px; }
.card-check { position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--teal-deep); color: #fff; display: grid; place-items: center; font-size: var(--t-xs); font-weight: 800; }
.card-status { position: absolute; top: 13px; right: 13px; font-size: var(--t-2xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); background: var(--cream); border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; }
.pharmacy-card { flex-direction: row; align-items: center; gap: 16px; min-height: 100px; }
.pharmacy-monogram { width: 50px; height: 50px; flex: none; border-radius: 14px; display: grid; place-items: center; font-size: var(--t-lg); font-weight: 800; color: #fff; background: linear-gradient(150deg, var(--teal), var(--teal-deep)); }
.pharmacy-card h4 { margin: 0 0 3px; }
.pharmacy-card p { font-size: var(--t-xs); }

.inline-alert { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--teal-tint); border: 1px solid #C6DFDB; color: var(--ink-soft); font-size: var(--t-sm); }
.inline-alert span { width: 23px; height: 23px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--teal-deep); color: #fff; font-weight: 800; font-size: var(--t-xs); }
.inline-alert strong { display: block; margin-bottom: 2px; }
.inline-alert.warning { background: var(--sand-tint); border-color: #E8D3A6; color: #6E5424; }
.inline-alert.warning span { background: var(--sand-ink); }
.inline-alert.danger { background: var(--safety-bg); border-color: var(--safety-line); color: var(--safety); }
.inline-alert.danger span { background: var(--safety); }
.inline-alert.saved-link { background: var(--ok-tint); border-color: #BEDCC8; color: #1F5637; margin: 0 0 18px; }
.inline-alert.saved-link span { background: var(--ok); }
.inline-alert a { font-weight: 700; }
.nav-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; }

/* vial groups + product cards */
.product-group { margin-bottom: 20px; }
.product-group:last-of-type { margin-bottom: 0; }
.pg-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; font-family: var(--sans); font-size: var(--t-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-deep); }
.pg-head::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.pg-head span { font-weight: 600; color: var(--faint); letter-spacing: .04em; text-transform: none; font-size: var(--t-2xs); }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; }
.product-card { position: relative; text-align: center; cursor: pointer; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 16px 14px 18px; transition: border-color .2s, transform .2s, box-shadow .2s; }
.product-card:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.product-card.selected { border-color: var(--teal-deep); background: #FDFCF8; box-shadow: var(--shadow-sm); }
.product-card h4 { margin: 6px 0 4px; font-size: var(--t-xs); font-family: var(--sans); font-weight: 700; line-height: 1.3; }
.product-card p { color: var(--muted); font-size: var(--t-2xs); }
.product-meta { display: flex; justify-content: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--faint); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.plan-tag { display: inline-block; margin-top: 6px; font-size: var(--t-2xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sand-deep); background: var(--sand-tint); border: 1px solid #EBDCB8; border-radius: 999px; padding: 3px 8px; }
.vial-stage { height: 172px; display: grid; place-items: center; margin-bottom: 6px; background: radial-gradient(circle at 50% 80%, rgba(46,139,139,.12), transparent 58%); border-radius: 12px; }
.vial-svg { width: 88px; filter: drop-shadow(0 14px 14px rgba(16,51,58,.16)); transition: transform .3s var(--ease); }
.vial-svg svg, .tab-svg svg { width: 100%; height: auto; display: block; }
.product-card:hover .vial-svg { transform: translateY(-4px) rotate(-1.5deg); }
.tab-svg { width: 96px; }

/* plan picker (micro/odt) */
.micro-vial-strip { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 18px; align-items: center; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 18px; margin-bottom: 16px; }
.mv-vials { display: flex; gap: 8px; align-items: flex-end; }
.mv-vials .vial-svg { width: 56px; }
.mv-vials .tab-svg { width: 84px; }
.mv-vials.small .vial-svg { width: 62px; }
.mv-vials.small .tab-svg { width: 92px; }
.micro-vial-strip small { display: block; font-size: var(--t-2xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-text); }
.micro-vial-strip p { margin-top: 4px; color: var(--muted); font-size: var(--t-sm); }
.rounding-note { margin-top: 6px !important; font-size: var(--t-xs) !important; color: var(--faint) !important; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.plan-card { position: relative; text-align: left; cursor: pointer; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 16px; display: grid; gap: 7px; align-content: start; transition: border-color .2s, transform .2s, box-shadow .2s; }
.plan-card:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.plan-card.selected { border-color: var(--teal-deep); background: #FDFCF8; box-shadow: var(--shadow-sm); }
.plan-code { font-family: var(--mono); font-weight: 700; font-size: var(--t-ui); letter-spacing: .01em; color: var(--teal-deep); background: var(--teal-tint); border: 1px solid #C6DFDB; border-radius: 8px; padding: 7px 10px; justify-self: start; max-width: 100%; }
.plan-label { font-weight: 700; font-size: var(--t-ui); }
.plan-phases { color: var(--muted); font-size: var(--t-xs); }

/* confirm */
.confirm-layout { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 24px; align-items: start; }
.confirm-product { text-align: center; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 14px; }
.confirm-product .vial-stage { height: 190px; background: none; }
.confirm-product .mv-vials { justify-content: center; margin-bottom: 10px; }
.confirm-product h4 { margin: 4px 0 3px; font-size: var(--t-sm); font-family: var(--sans); font-weight: 700; }
.confirm-product p { color: var(--muted); font-size: var(--t-xs); }
.confirm-details { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--paper); }
.detail-row { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 14px; padding: 11px 15px; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.detail-row:last-child { border-bottom: 0; }
.detail-row span { color: var(--faint); }
.phase-preview { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--paper); }
.phase-row { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 14px; padding: 11px 15px; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.phase-row:last-child { border-bottom: 0; }
.phase-row b { color: var(--teal-deep); }
.dose-choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 9px; margin-top: 12px; }
.dose-choice { cursor: pointer; text-align: center; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--paper); padding: 12px 8px 10px; transition: border-color .2s, transform .15s; }
.dose-choice:hover { border-color: var(--teal); transform: translateY(-2px); }
.dose-choice b { display: block; font-size: var(--t-base); }
.dose-choice small { color: var(--muted); font-size: var(--t-2xs); }
.dose-choice em { display: block; font-style: normal; font-size: var(--t-2xs); color: var(--muted); margin-top: 1px; }
.dose-choice { position: relative; }
.dose-choice.selected { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.dose-choice.selected::after { content: "✓"; position: absolute; top: 6px; right: 8px; font-size: var(--t-xs); font-weight: 800; color: #fff; }
.dose-choice.selected small { color: #D6E9E6; }
.dose-choice.selected em { color: #C9E2DF; }
.dose-choice.unavailable { opacity: .55; cursor: help; border-style: dashed; }
.dose-choice.unavailable:hover { border-color: var(--safety); transform: none; }
.dose-choice.unavailable small { color: var(--safety); font-weight: 700; }
.dose-mini-bar { display: block; height: 5px; margin-top: 8px; border-radius: 99px; background: var(--cream-2); overflow: hidden; }
.dose-mini-bar i { display: block; height: 100%; border-radius: 99px; background: var(--teal); transition: width .4s; }
.dose-choice.selected .dose-mini-bar { background: rgba(255,255,255,.25); }
.dose-choice.selected .dose-mini-bar i { background: #fff; }
.checklist { display: grid; gap: 8px; margin-top: 20px; }
.check-row { display: flex; gap: 12px; align-items: center; min-height: 56px; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--paper); cursor: pointer; font-size: var(--t-sm); }
.check-row:has(input:checked) { border-color: var(--ok); background: var(--ok-tint); }
.check-row input { width: 22px; height: 22px; flex: none; margin-top: 0; accent-color: var(--ok); cursor: pointer; }

/* numbers are the payload of this product — lock them to tabular figures so
   units, mL and unit counts align column-to-column and never reflow on change */
.dose-choice, .dose-big, .check-counter, .detail-row strong, .phase-row, .dv-sig,
.gh-dose b, .progress-label, .plan-phases { font-variant-numeric: tabular-nums; }

/* ---------- dose field + label comparison ---------- */
.field-head { font-family: var(--sans); font-size: var(--t-base); margin: 22px 0 6px; }
.field-hint { margin: 0; color: var(--muted); font-size: var(--t-sm); }
.dose-blocked { display: none; margin: 10px 0 0; padding: 10px 13px; border-radius: var(--r-sm); background: var(--safety-bg); border: 1px solid var(--safety-line); color: var(--safety); font-size: var(--t-xs); font-weight: 600; }
.dose-blocked.show { display: block; }
.dose-verify { margin-top: 14px; padding: 14px 16px 16px; border: 1.5px solid #C6DFDB; border-radius: var(--r-md); background: var(--teal-tint); }
.dose-verify.empty { display: flex; gap: 11px; align-items: center; background: var(--cream); border: 1.5px dashed var(--line-2); }
.dose-verify.empty p { margin: 0; font-size: var(--t-sm); color: var(--muted); }
.dv-icon { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--muted); color: var(--paper); font-weight: 800; font-size: var(--t-sm); }
.dv-tag { display: inline-block; font-size: var(--t-2xs); font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--teal-deep); }
.dv-lead { margin: 6px 0 4px; font-size: var(--t-sm); color: var(--ink-soft); }
.dv-sig { margin: 0; font-family: var(--serif); font-size: var(--t-md); line-height: 1.35; color: var(--ink); }
.dv-syringe { margin: 10px 0 2px; }
.dv-syringe svg { width: 100%; height: auto; display: block; }
.dv-foot { margin: 8px 0 0; font-size: var(--t-xs); line-height: 1.5; color: var(--ink-soft); }
.dv-capacity { margin-top: 10px; padding: 10px 13px; border-radius: var(--r-sm); background: var(--safety-bg); border: 1px solid var(--safety-line); color: var(--safety); font-size: var(--t-xs); }
.dv-capacity strong { display: block; margin-bottom: 2px; }
.dose-choice[aria-disabled="true"] { cursor: help; }

/* ---------- confirm gate: check all 3 to continue ---------- */
.checklist-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 4px; }
.checklist-head b { display: block; font-size: var(--t-ui); }
.checklist-head small { display: block; color: var(--muted); font-size: var(--t-xs); line-height: 1.45; margin-top: 2px; max-width: 62ch; }
.check-counter { flex: none; font-size: var(--t-xs); font-weight: 700; letter-spacing: .2px; padding: 6px 12px; border-radius: 99px; background: var(--cream-2); color: var(--muted); border: 1px solid var(--line-2); white-space: nowrap; }
.check-counter.done { background: var(--ok-tint); color: var(--ok); border-color: #BEDCC8; }
.check-num { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--cream-2); color: var(--muted); font-size: var(--t-2xs); font-weight: 800; display: grid; place-items: center; margin-top: -1px; }
.check-row:has(input:checked) .check-num { background: var(--ok); color: #fff; }
.check-row.nudge { border-color: var(--sand-deep); background: var(--sand-tint); animation: gate-nudge .45s ease; }
@keyframes gate-nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.nudge-block { outline: 2.5px solid var(--sand-deep); outline-offset: 6px; border-radius: var(--r-sm); }
.gate-actions { margin-top: 4px; }
.gate-note { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: var(--t-sm); font-weight: 600; color: var(--muted); }
.gate-note::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: 50%; border: 2px solid currentColor; }
.gate-note.ready { color: var(--ok); }
.gate-note.ready::before { background: var(--ok); border-color: var(--ok); }
.gate-note.alert { color: var(--safety); }
.button.is-locked { opacity: .45; box-shadow: none; }
.button.is-locked:hover { transform: none; box-shadow: none; background: var(--teal-deep); }

/* ---------- which label is which ---------- */
.label-guide { margin-top: 16px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--paper); padding: 14px 16px 16px; }
.label-guide .lg-head b { font-size: var(--t-ui); }
.label-guide > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--t-ui); font-weight: 600; color: var(--ink); }
.label-guide > summary::-webkit-details-marker { display: none; }
.label-guide > summary .lg-open { flex: none; font-size: var(--t-xs); font-weight: 700; color: var(--teal-deep); border: 1.5px solid var(--line-2); border-radius: 99px; padding: 4px 12px; }
.label-guide[open] > summary .lg-open { color: var(--muted); }
.label-guide[open] > summary .lg-open::after { content: " ▴"; }
.label-guide:not([open]) > summary .lg-open::after { content: " ▾"; }
.label-guide > summary:hover .lg-open { border-color: var(--teal); }
.lg-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 12px; }
.lg-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--cream); }
.lg-card.primary { background: var(--teal-tint); border-color: #C6DFDB; }
.lg-art { flex: none; width: 72px; }
.lg-art svg { width: 100%; height: auto; display: block; }
.lg-tag { display: inline-block; font-size: var(--t-2xs); font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--faint); margin-bottom: 3px; }
.lg-card.primary .lg-tag { color: var(--teal-deep); }
.lg-card b { display: block; font-size: var(--t-sm); margin-bottom: 3px; }
.lg-card p { font-size: var(--t-xs); line-height: 1.5; color: var(--muted); }
.lg-card p i { color: var(--ink-soft); }
.lg-foot { margin-top: 10px; font-size: var(--t-xs); color: var(--muted); }
.lg-foot a { font-weight: 700; color: var(--teal-deep); }
.vial-seq { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; margin-top: 12px; }
.vial-seq > div { text-align: center; border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 4px; }
.vial-seq b { display: block; font-size: var(--t-2xs); }
.vial-seq span { font-size: var(--t-2xs); color: var(--muted); }
.vial-seq > div.active { border-color: var(--teal-deep); background: var(--teal-tint); }

.sig-line.quiet { color: var(--muted); font-size: var(--t-xs); }
/* ---------- guide ---------- */
.guide-view { margin: -24px clamp(-18px, -2.6vw, -32px) -28px; animation: stepIn .4s var(--ease); }
.guide-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: var(--ink); color: #F7F4EE; border-radius: var(--r-md) var(--r-md) 0 0; padding: 16px 20px; }
.guide-head .gh-left small { display: block; font-size: var(--t-2xs); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #8FD0CB; }
.guide-head h2 { margin-top: 2px; font-size: clamp(18px, 2.3vw, 24px); font-weight: 700; letter-spacing: -.01em; color: #fff; }
.guide-head .gh-dose { display: inline-flex; align-items: baseline; gap: 6px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 8px 16px; font-weight: 700; }
.guide-head .gh-dose b { font-family: var(--serif); font-size: var(--t-lg); }
.guide-head .gh-dose span { font-size: var(--t-xs); color: #BCD7D3; }
.guide-head .gh-actions { display: flex; gap: 8px; }
.icon-button { width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); cursor: pointer; color: #fff; }
.icon-button:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.45); }
.guide-view > .safety-banner, .guide-view > .guide-grid { margin: 14px 16px 0; }
.guide-view > .guide-grid { padding-bottom: 22px; }
.safety-banner { display: flex; align-items: center; gap: 14px; background: var(--safety-bg); border: 1px solid var(--safety-line); border-radius: var(--r-md); padding: 14px 18px; flex-wrap: wrap; }
.safety-shield { width: 40px; height: 40px; flex: none; border-radius: 50%; background: #fff; border: 1px solid var(--safety-line); display: grid; place-items: center; }
.safety-shield svg { width: 20px; height: 20px; stroke: var(--safety); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.safety-banner .txt { flex: 1; min-width: 240px; }
.safety-banner b { display: block; font-family: var(--serif); font-size: var(--t-md); color: var(--safety); }
.safety-banner p { margin-top: 2px; font-size: var(--t-sm); color: #7A4636; }

.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.gcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; min-width: 0; }
.gcard.wide { grid-column: 1 / -1; }
.gcard h3 { margin-bottom: 12px; font-size: var(--t-lg); font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gcard h3 .info { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-2); color: var(--faint); font-size: var(--t-2xs); font-weight: 700; display: grid; place-items: center; font-family: var(--sans); }
.gcard .foot-link { display: inline-block; margin-top: 12px; color: var(--teal-text); font-weight: 600; font-size: var(--t-sm); }
.gcard .foot-link:hover { text-decoration: underline; }

.gv-stage { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 18px 14px 16px; text-align: center; position: relative; }
.gv-stage .vial-svg { width: 100px; margin: 6px auto 0; }
.gv-stage .mv-vials { justify-content: center; padding-top: 8px; }
.match-badge { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1.2px solid var(--ok); color: var(--ok); border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: var(--t-xs); }
.gv-name { margin-top: 12px; font-weight: 700; font-size: var(--t-ui); text-align: center; }
.gv-sub { color: var(--muted); font-size: var(--t-xs); text-align: center; }

.dose-hero { text-align: center; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 18px 14px 16px; }
.dose-hero small { display: block; font-size: var(--t-xs); font-weight: 600; color: var(--muted); }
.dose-big { font-family: var(--serif); font-weight: 700; font-size: clamp(44px, 4.6vw, 58px); line-height: 1; letter-spacing: -.02em; color: var(--ink); border-bottom: 2px solid var(--teal); display: inline-block; padding: 4px 6px 9px; }
.dose-big span { font-size: .42em; font-weight: 600; margin-left: 6px; }
.dose-big .approx { font-size: .55em; color: var(--muted); margin-right: 3px; }
.dose-freq { margin-top: 11px; font-family: var(--serif); font-size: var(--t-md); font-weight: 600; }
.syringe-widget { margin-top: 14px; }
.syringe-svg { width: 100%; height: auto; display: block; }
.sig-line { margin-top: 10px; font-size: var(--t-xs); color: var(--muted); }
.sig-line b { color: var(--ink); }
.dose-note { display: flex; gap: 11px; align-items: flex-start; margin-top: 12px; background: var(--sand-tint); border: 1px solid #EBDCB8; border-radius: var(--r-sm); padding: 12px 14px; font-size: var(--t-xs); color: #6E5424; text-align: left; }
.dose-note svg { width: 18px; height: 18px; flex: none; stroke: var(--sand-deep); fill: none; stroke-width: 1.8; margin-top: 1px; }
.capacity-warning { margin-top: 12px; padding: 13px 15px; border-radius: var(--r-sm); background: var(--safety-bg); border: 1px solid var(--safety-line); color: var(--safety); font-size: var(--t-xs); text-align: left; }

.phase-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 6px; margin-bottom: 12px; }
.phase-tabs button { border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); padding: 9px 4px; cursor: pointer; text-align: center; transition: all .2s; min-width: 0; }
.phase-tabs button b { display: block; font-size: var(--t-2xs); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phase-tabs button span { font-size: var(--t-2xs); color: var(--muted); }
.phase-tabs button.active { background: var(--teal-deep); border-color: var(--teal-deep); }
.phase-tabs button.active b, .phase-tabs button.active span { color: #fff; }

.prep-list { display: grid; }
.prep-item { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: center; }
.prep-item:last-child { border-bottom: 0; padding-bottom: 0; }
.prep-item:first-child { padding-top: 0; }
.prep-thumb { width: 54px; height: 48px; border-radius: 9px; background: var(--teal-tint); display: grid; place-items: center; }
.prep-thumb svg { width: 28px; height: 28px; stroke: var(--teal-deep); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.prep-item b { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); }
.prep-item b i { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--teal-deep); color: #fff; font-style: normal; font-size: var(--t-2xs); font-weight: 800; display: grid; place-items: center; }
.prep-item p { margin-top: 2px; color: var(--muted); font-size: var(--t-xs); }

.inject-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
.inject-figures figure { margin: 0; text-align: center; }
.inject-figures svg { width: 100%; max-width: 122px; margin: 0 auto; height: auto; display: block; }
.inject-figures figcaption { font-size: var(--t-xs); color: var(--muted); margin-top: 6px; font-weight: 600; }
.bm-zone { cursor: pointer; }
.bm-zone ellipse { fill: rgba(46,139,139,.28); stroke: var(--teal); stroke-width: 1.2; transition: fill .2s, stroke .2s; }
.bm-zone.active ellipse { fill: rgba(20,85,90,.55); stroke: var(--teal-deep); stroke-width: 2; }
.week-pills { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; margin-top: 12px; }
.week-pills button { border: 1.5px solid var(--line); border-radius: 9px; background: var(--paper); padding: 9px 4px; min-height: 52px; font-size: var(--t-2xs); font-weight: 700; line-height: 1.25; cursor: pointer; color: var(--muted); transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); min-width: 0; }
.week-pills button.active { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.week-pills button span { display: block; font-weight: 500; font-size: var(--t-2xs); margin-top: 2px; white-space: normal; overflow-wrap: anywhere; }
.rotate-note { display: flex; gap: 11px; align-items: flex-start; margin-top: 12px; background: var(--ok-tint); border: 1px solid #CBE3D3; border-radius: var(--r-sm); padding: 12px 14px; font-size: var(--t-xs); color: #2C5C3E; }
.rotate-note svg { width: 18px; height: 18px; flex: none; stroke: var(--ok); fill: none; stroke-width: 1.8; margin-top: 1px; }

.storage-layout { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 16px; align-items: center; }
.storage-layout > svg { width: 100px; height: auto; }
.storage-rules { display: grid; gap: 12px; }
.storage-rules > div { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 10px; align-items: start; }
.storage-rules .ic { width: 32px; height: 32px; border-radius: 50%; background: var(--teal-tint); display: grid; place-items: center; }
.storage-rules .ic svg { width: 17px; height: 17px; stroke: var(--teal-deep); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.storage-rules b { display: block; font-size: var(--t-xs); }
.storage-rules small { color: var(--muted); font-size: var(--t-2xs); }

.video-shell { aspect-ratio: 16 / 10; border-radius: var(--r-sm); overflow: hidden; background: radial-gradient(400px 260px at 68% 22%, rgba(46,139,139,.55), transparent 60%), var(--ink); display: grid; place-items: center; position: relative; }
.video-shell iframe { width: 100%; height: 100%; border: 0; }
.video-play { width: 60px; height: 60px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); font-size: var(--t-lg); cursor: pointer; z-index: 2; box-shadow: 0 14px 34px rgba(0,0,0,.3); transition: transform .2s; }
.video-play:hover { transform: scale(1.07); }
.video-title { margin-top: 12px; font-weight: 700; font-size: var(--t-ui); }
.video-sub { color: var(--muted); font-size: var(--t-xs); }

.contact-card-wide { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: center; }
.symptoms { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.symptoms li { display: flex; gap: 11px; align-items: center; font-size: var(--t-ui); }
.symptoms li::before { content: "✓"; width: 21px; height: 21px; flex: none; border-radius: 50%; background: var(--teal-deep); color: #fff; display: grid; place-items: center; font-size: var(--t-2xs); font-weight: 800; }
.help-box { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; display: grid; grid-template-columns: 46px minmax(0,1fr) auto; gap: 14px; align-items: center; }
.help-box .hb-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--teal-tint); display: grid; place-items: center; }
.help-box .hb-ic svg { width: 23px; height: 23px; stroke: var(--teal-deep); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.help-box b { display: block; font-size: var(--t-ui); }
.help-box p { margin-top: 2px; color: var(--muted); font-size: var(--t-xs); }
.er-line { margin-top: 12px; color: var(--safety); font-size: var(--t-xs); }
.support-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 14px; }
.support-strip a, .support-strip div { display: flex; gap: 12px; align-items: center; justify-content: center; background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; }
.support-strip svg { width: 25px; height: 25px; flex: none; stroke: var(--teal-deep); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.support-strip small { display: block; color: var(--faint); font-size: var(--t-2xs); }
.support-strip b { font-size: var(--t-ui); }
a.support-strip-item:hover { border-color: var(--teal); }
.trust-chips { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.trust-chips span { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-xs); font-weight: 500; color: var(--muted); }
.trust-chips svg { width: 16px; height: 16px; stroke: var(--teal); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- footer ---------- */
.site-footer { background: #0D2126; color: #A9BBB8; margin-top: 40px; }
.footer-inner { max-width: var(--max); margin: 0 auto; padding: 48px 24px 0; }
.footer-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr 1fr 1.35fr; gap: 24px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand .brand { color: #fff; font-size: var(--t-xl); }
.footer-contact { display: grid; gap: 0; margin-top: 12px; font-size: var(--t-sm); }
.footer-contact a { display: flex; align-items: center; min-height: 44px; gap: 9px; color: #C7D4D2; }
.footer-contact a:hover { color: #fff; }
.footer-contact svg { width: 15px; height: 15px; flex: none; stroke: var(--teal); fill: none; stroke-width: 1.8; stroke-linecap: round; }
.store-badges { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.store-badge { display: flex; align-items: center; gap: 8px; min-height: 44px; background: #000; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; padding: 8px 14px; color: #fff; }
.store-badge svg { width: 17px; height: 17px; fill: #fff; }
.store-badge small { display: block; font-size: var(--t-2xs); line-height: 1; color: #cfcfcf; }
.store-badge b { display: block; font-size: var(--t-xs); line-height: 1.2; }
.footer-col h2, .footer-col h3 { margin: 4px 0 14px; color: #fff; font-family: var(--sans); font-size: var(--t-xs); font-weight: 700; }
.footer-col a { display: flex; align-items: center; min-height: 44px; color: #A9BBB8; font-size: var(--t-sm); margin: 0; }
.footer-col a:hover { color: #fff; }
.newsletter h2, .newsletter h3 { margin: 4px 0 8px; color: #fff; font-family: var(--sans); font-size: var(--t-xs); font-weight: 700; }
.newsletter p { margin-bottom: 12px; font-size: var(--t-sm); }
.newsletter-form { display: grid; gap: 8px; }
.newsletter-form input { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 9px; padding: 11px 14px; color: #fff; font-size: var(--t-sm); min-height: 44px; }
.newsletter-form input::placeholder { color: #7E938F; }
.newsletter-form button { justify-self: end; background: var(--sand); color: var(--ink); border: 0; border-radius: 9px; padding: 10px 20px; font-weight: 700; font-size: var(--t-xs); cursor: pointer; min-height: 44px; }
.newsletter-form button:hover { background: #E2BC7B; }
.footer-legal { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 20px 0 24px; font-size: var(--t-xs); color: #9FB0AA; }

.sticky-help { position: fixed; right: 18px; bottom: 18px; z-index: 50; display: flex; align-items: center; gap: 9px; padding: 12px 17px; border-radius: 999px; background: var(--teal-deep); color: #fff; box-shadow: 0 15px 45px rgba(13,33,38,.35); font-size: var(--t-xs); font-weight: 700; }
.sticky-help span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); }
.toast { position: fixed; left: 50%; bottom: 22px; z-index: 200; transform: translate(-50%, 120px); opacity: 0; padding: 13px 19px; border-radius: 999px; background: var(--ink); color: #fff; box-shadow: 0 16px 45px rgba(0,0,0,.3); font-size: var(--t-sm); transition: .3s ease; max-width: min(92vw, 480px); text-align: center; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .steps-row, .programs-row { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .meds-row, .hub-row { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .guide-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .selection-grid.three { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 980px) {
  .wizard-shell { grid-template-columns: 1fr; padding-top: 16px; gap: 12px; }
  .wizard-side { position: static; }
  .side-card h1 { font-size: var(--t-lg); }
  .step-list { grid-template-columns: repeat(7, minmax(0,1fr)); gap: 4px; }
  .step-list li { flex-direction: column; gap: 5px; padding: 4px 0; text-align: center; font-size: var(--t-2xs); background: transparent !important; }
  .step-list li:not(:last-child)::after { display: none; }
  .step-list li b { display: none; }
  .side-summary, .wizard-side .help-card { display: none; }
}
@media (max-width: 880px) {
  .desktop-nav { display: none; }
  .menu-button { display: flex; }
  .hero-inner { grid-template-columns: 1fr; padding: 40px 24px; }
  .hero-visual { min-height: 400px; }
  .contact-card-wide, .match-panel, .confirm-layout { grid-template-columns: 1fr; }
  .lg-cards { grid-template-columns: 1fr; }
  .trust-bar .wrap { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .steps-row, .programs-row, .selection-grid, .selection-grid.three { grid-template-columns: 1fr; }
  .meds-row, .hub-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .guide-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .plan-grid { grid-template-columns: 1fr; }
  .support-strip { grid-template-columns: 1fr; }
  .storage-layout { grid-template-columns: 1fr; }
  .storage-layout > svg { margin: 0 auto; }
  .inject-figures { max-width: 300px; margin: 0 auto; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero-vials { display: none; }
  .nav-row { flex-direction: column-reverse; align-items: stretch; }
  .nav-row .button, .nav-row .back-button { width: 100%; }
  .finder-panel { padding: 18px 14px 22px; }
  .guide-view { margin: -18px -14px -22px; }
  .guide-view > .safety-banner, .guide-view > .guide-grid { margin: 12px 10px 0; }
  .guide-head { border-radius: 0; }
  .micro-vial-strip { grid-template-columns: 1fr; text-align: center; }
  .mv-vials { justify-content: center; }
  .detail-row, .phase-row { grid-template-columns: 116px minmax(0,1fr); }
  .checklist-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .gate-actions { position: sticky; bottom: 0; z-index: 20; margin: 12px -14px -22px; padding: 10px 14px 14px; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px rgba(16,51,58,.08); }
  .gate-actions .gate-note { margin-top: 0; font-size: var(--t-xs); }
  .gate-actions .nav-row { flex-direction: row; align-items: center; margin-top: 9px; }
  .gate-actions .back-button { width: auto; flex: 0 0 auto; padding: 12px 16px; }
  .gate-actions .button { flex: 1 1 auto; width: auto; }
  .dv-sig { font-size: var(--t-md); }
  .gate-note { align-items: flex-start; }
  .gate-note::before { margin-top: 5px; }
}

@media print {
  .site-header, .site-footer, .sticky-help, .wizard-side, .nav-row, .gate-note, .gate-actions, .label-guide, .guide-head .gh-actions, .menu-backdrop, .mobile-menu { display: none !important; }
  body { background: #fff; }
  .wizard-shell { display: block; padding: 0; }
  .finder-panel { border: 0; box-shadow: none; }
  .gcard { break-inside: avoid; }
}

/* ==========================================================================
   v9.2 — utilities, FAQ, breadcrumb, no-JS fallbacks, 404
   All values resolve to the existing token set above; no new colours.
   ========================================================================== */

/* ---------- utilities ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.header-actions { display: flex; align-items: center; gap: 12px; }
.block-flush { padding-top: 0; }
.panel-title { margin: 0 0 18px; font-size: var(--t-xl); }
.sec-sub { color: var(--muted); font-size: var(--t-base); }
.field-note { margin: 8px 0 0; font-size: var(--t-xs); color: var(--muted); line-height: 1.5; }

/* ---------- no-JS fallbacks ---------- */
.noscript-banner {
  background: var(--safety-bg); border-bottom: 1px solid var(--safety-line);
  color: var(--ink); padding: 14px 24px; font-size: var(--t-ui); line-height: 1.6; text-align: center;
}
.noscript-banner a { color: var(--safety); font-weight: 600; }

.noscript-panel {
  max-width: 780px; margin: 24px auto 40px; padding: 28px;
  background: var(--paper); border: 1px solid var(--line);
  border-left: 4px solid var(--safety); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.noscript-panel h2 { margin: 0 0 12px; font-size: var(--t-xl); }
.noscript-panel p { color: var(--ink-soft); line-height: 1.65; margin: 0 0 12px; }
.noscript-panel ul { margin: 0 0 16px; padding-left: 20px; color: var(--ink-soft); line-height: 1.7; }
.noscript-panel .button { margin-top: 4px; }

/* ---------- breadcrumb ---------- */
.breadcrumb { padding-top: 20px; padding-bottom: 4px; }
.breadcrumb ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; margin: 0; padding: 0; font-size: var(--t-sm); color: var(--muted);
}
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--hairline); }
.breadcrumb a { color: var(--teal-text); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink-soft); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }

.faq-item {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.faq-item[open] { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.faq-item:hover { border-color: var(--line-2); }

.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: var(--t-md); color: var(--ink); line-height: 1.45;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 3px solid var(--teal); outline-offset: -3px; }

/* plus/minus built from two rules so it needs no icon font */
.faq-mark { position: relative; flex: 0 0 20px; width: 20px; height: 20px; }
.faq-mark::before, .faq-mark::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 13px; height: 2px; border-radius: 2px; background: var(--teal-deep);
  transform: translate(-50%, -50%); transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.faq-mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-mark::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

.faq-body { padding: 0 20px 20px; }
.faq-body p { margin: 0; color: var(--ink-soft); line-height: 1.7; font-size: var(--t-base); }
.faq-body a { color: var(--teal-text); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .faq-item, .faq-mark::before, .faq-mark::after { transition: none; }
}

/* ---------- 404 ---------- */
.page-404 { display: flex; flex-direction: column; min-height: 100vh; }
.error-main { flex: 1; display: flex; align-items: center; padding: 64px 0; }
.error-wrap { max-width: 720px; }
.error-eyebrow {
  margin: 0 0 12px; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--sand-ink);
}
.error-wrap h1 {
  font-family: var(--serif); font-size: clamp(32px, 5vw, 52px);
  line-height: 1.1; letter-spacing: -.02em; margin: 0 0 16px;
}
.error-lead { font-size: var(--t-md); color: var(--ink-soft); line-height: 1.65; margin: 0 0 28px; }
.error-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }
.error-links {
  border-top: 1px solid var(--line); padding-top: 24px; margin-bottom: 24px;
}
.error-links h2 { font-size: var(--t-lg); margin: 0 0 12px; }
.error-links ul { margin: 0; padding-left: 20px; line-height: 2; }
.error-links a { color: var(--teal-text); font-weight: 500; }
.error-note { font-size: var(--t-sm); color: var(--muted); line-height: 1.7; }
.error-note a { color: var(--teal-text); font-weight: 600; }

@media (max-width: 620px) {
  .error-main { padding: 40px 0; }
  .error-actions .button { width: 100%; justify-content: center; }
}


/* ==========================================================================
   v9.3 — fixes from in-browser audit (contrast, targets, overflow, mobile header)
   ========================================================================== */

/* 1. Newsletter field overflowed its footer column on narrow screens.
      An <input> has an intrinsic min-content width (~20 characters), so a grid
      track sized from content refused to shrink below ~206px inside a 159px
      column. Force the track and the field to fill the column instead. */
.newsletter-form { grid-template-columns: minmax(0, 1fr); }
.newsletter-form input { width: 100%; min-width: 0; }
@media (max-width: 620px) {
  .newsletter { grid-column: 1 / -1; }
  .newsletter-form button { justify-self: stretch; }
}

/* 2. The newsletter note sits on the navy footer, where the default body grey
      measured 2.65:1. This is the footer-tinted variant. */
.site-footer .field-note { color: #C7D4D2; }
.site-footer .field-note a { color: #fff; text-decoration: underline; }

/* 3. 404 eyebrow measured 4.48:1 on cream — just under AA. */
.error-eyebrow { color: #7A5A26; }

/* 4. WCAG 2.2 target size (SC 2.5.8): standalone navigation links were 15-17px
      tall. Inline links inside a sentence are exempt; these are not inline. */
.error-links li { margin-bottom: 4px; }
.error-links a,
.breadcrumb a,
.breadcrumb [aria-current="page"] {
  display: inline-flex; align-items: center; min-height: 24px;
}
.error-note a { display: inline-block; min-height: 24px; line-height: 24px; }

/* 5. On a 390px viewport the header CTA wrapped to two lines and filled the
      whole bar. A shorter label is shown instead; only one is ever rendered. */
.cta-short { display: none; }
@media (max-width: 560px) {
  /* only the header bar is space-constrained; the hero CTA keeps the full label */
  .header-actions .cta-long { display: none; }
  .header-actions .cta-short { display: inline; }
  .header-actions { gap: 8px; }
  .header-inner { gap: 10px; }
}

/* 6. The decorative .hero-leaf is absolutely positioned and ran ~16px past the
      viewport on mobile. It was only being saved by overflow-x on <html>.
      `clip` rather than `hidden` so no sticky/absolute descendant is affected. */
.hero { overflow-x: clip; }
.hero-visual, .hero-visual > svg { max-width: 100%; }

/* 7. Drawer contact link was 17px tall — below the 24px target minimum. */
.drawer-contact a { display: inline-flex; align-items: center; min-height: 24px; }


/* 8. Week pills used `overflow-wrap: anywhere`, which broke site labels
      mid-word ("abdome / n"). Wrap at the space instead and reclaim the few
      pixels the horizontal padding was taking. */
.week-pills { gap: 5px; }
.week-pills button { padding: 9px 3px; }
.week-pills button span { overflow-wrap: normal; word-break: normal; letter-spacing: -.01em; }

/* 9. Rounding note — shown when a dose does not land on a whole syringe tick.
      Informational (teal), distinct from the red capacity warning. */
.dv-rounding {
  margin-top: 10px; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--teal-tint); border: 1px solid #BFDCD7;
  color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.6;
}
.dv-rounding strong { color: var(--teal-deep); }
.capacity-warning.rounding-warning {
  background: var(--teal-tint); border-color: #BFDCD7; color: var(--ink-soft);
}
.capacity-warning.rounding-warning strong { color: var(--teal-deep); }

/* ==========================================================================
   v9.5 — pharmacies page
   ========================================================================== */
.pharm-why {
  max-width: 780px; margin: 0 auto 40px; padding: 24px 26px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.pharm-why h2 { font-size: var(--t-lg); margin: 0 0 12px; }
.pharm-why p { color: var(--ink-soft); line-height: 1.7; margin: 0 0 12px; font-size: var(--t-base); }
.pharm-why p:last-child { margin-bottom: 0; }
.pharm-why a { color: var(--teal-text); font-weight: 600; }
.pharm-rule {
  padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--safety-bg); border: 1px solid var(--safety-line);
}
.pharm-rule strong { color: var(--safety); }

.pharm-list-head { text-align: center; font-size: var(--t-xl); margin: 0 0 24px; }
.pharm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }

.pharm-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px; display: flex; flex-direction: column; gap: 14px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.pharm-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.pharm-head { display: flex; align-items: center; gap: 12px; }
.pharm-head h3 { font-size: var(--t-lg); margin: 0; }
.pharm-blurb { margin: 0; color: var(--ink-soft); line-height: 1.65; font-size: var(--t-base); }

.pharm-facts {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px;
  margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); font-size: var(--t-sm);
}
.pharm-facts dt { color: var(--muted); }
.pharm-facts dd { margin: 0; color: var(--ink); font-weight: 600; }
.pharm-card .button { margin-top: auto; align-self: flex-start; }

@media (max-width: 620px) {
  .pharm-grid { grid-template-columns: 1fr; }
  .pharm-card .button { align-self: stretch; text-align: center; justify-content: center; }
}

/* ==========================================================================
   v9.6 — tablet and device polish
   Verified against 13 real viewports, 375px (iPhone SE) to 1920px, including
   every current iPad size in both orientations.
   ========================================================================== */

/* ---- 1. Tablet-portrait hero -------------------------------------------
   Between 621px and 880px the hero drops to a single column, but the copy kept
   `max-width: 13ch` and left alignment, leaving roughly half the row empty on
   iPad portrait (744-834px). Centre the stack so it reads as a deliberate
   composition rather than a desktop layout with a missing column. */
@media (min-width: 621px) and (max-width: 880px) {
  .hero-inner { padding: 56px 32px; justify-items: center; text-align: center; }
  .hero h1 { max-width: 18ch; margin-inline: auto; font-size: clamp(40px, 6vw, 52px); }
  .hero-copy, .hero-sub, .hero-inner > div > p { max-width: 52ch; margin-inline: auto; }
  .hero-cta, .hero-actions { justify-content: center; }
  .hero-trust, .trust-chips { justify-content: center; }
  .hero-visual { min-height: 420px; width: 100%; }
}

/* ---- 2. The floating help button covered real controls ------------------
   `.sticky-help` is fixed bottom-right. On tablet and phone widths it sat on
   top of the last card's action button. Reserve space for it at the end of the
   page and keep it clear of the safe-area inset on notched devices. */
@media (max-width: 1080px) {
  main { padding-bottom: 76px; }
  .sticky-help {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
  }
}
@media (max-width: 520px) {
  /* Phone: shrink to the icon so it never masks more than a corner. */
  .sticky-help { padding: 12px; gap: 0; }
  .sticky-help span { width: 24px; height: 24px; }
  .sticky-help .sh-label { display: none; }
}

/* ---- 3. Tablet grid steps ------------------------------------------------
   620px jumped straight from 5-across to 1-across for the step and program
   rows, which wasted the width available on an iPad in portrait. */
@media (min-width: 621px) and (max-width: 1080px) {
  .steps-row { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .programs-row { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .hub-row { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .meds-row { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 621px) and (max-width: 880px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ---- 4. iOS specifics ----------------------------------------------------
   Safari zooms the page when a focused input renders below 16px, which throws
   the whole layout off and cannot be undone by the user. */
@supports (-webkit-touch-callout: none) {
  input, select, textarea { font-size: 16px; }
}
/* Respect the notch and home indicator on every fixed edge. */
.site-header { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.mobile-menu { padding-bottom: max(20px, env(safe-area-inset-bottom)); }

/* ---- 5. Touch devices ----------------------------------------------------
   Hover styles stick on touch after a tap; only apply them to real pointers. */
@media (hover: none) {
  .faq-item:hover, .pharm-card:hover { border-color: var(--line); box-shadow: none; }
}
/* A coarse pointer needs a larger target than a mouse does. */
@media (pointer: coarse) {
  .faq-item summary { padding-top: 20px; padding-bottom: 20px; }
  .breadcrumb a, .error-links a { min-height: 32px; }
}

/* Wrapping the help label in a <span> made it inherit `.sticky-help span`,
   which is the 22px circle intended only for the "?" glyph. Scope that rule to
   the icon and let the label size itself. */
.sticky-help .sh-label {
  width: auto; height: auto; border-radius: 0; background: none;
  display: inline; white-space: nowrap;
}

/* ==========================================================================
   v9.7 — dose selection promoted to its own step
   ========================================================================== */
/* Dose step reuses the confirm two-column shell, but the right column is the
   only thing that scrolls on tablet portrait, so the vial stays in view. */
.dose-layout { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 880px) { .dose-layout { grid-template-columns: 1fr; gap: 20px; } }

/* The chosen dose is repeated on the confirm screen so the third checkbox is
   never the only place the numbers appear. */
.detail-row.dose-row { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 12px; }
.detail-row.dose-row strong { color: var(--teal-deep); }

.change-dose-row { margin: 12px 0 18px; }
.linklike {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--teal-text); font: inherit; font-weight: 600; text-decoration: underline;
  min-height: 24px;
}
.linklike:hover { color: var(--teal-deep); }
.linklike:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 3px; }