/* ==========================================================================
   PrescribedRx components, v3
   Requires tokens.css. Class names match the WordPress theme where the theme
   already has the piece (.prx-btn, .prx-card, .prx-tag, .prx-tick...); the
   quiz and form pieces are new and follow the same rules.
   ========================================================================== */

/* ------------------------------------------------------------------ Base */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* no component display rule may un-hide an element */

body {
  margin: 0;
  background: var(--prx-page);
  color: var(--prx-ink);
  font-family: var(--prx-font);
  font-size: var(--prx-text-lg);
  line-height: var(--prx-lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--prx-ink); text-decoration-color: var(--prx-red); text-underline-offset: 3px; }
a:hover { color: var(--prx-red); }

:where(a, button, input, select, textarea, summary, label):focus-visible {
  outline: 3px solid var(--prx-focus);
  outline-offset: 2px;
  border-radius: var(--prx-r-sm);
}

/* Quizzes move focus to each screen's heading (tabindex="-1") so screen
   readers announce it. That is not a selection, so no ring. */
[tabindex="-1"]:focus { outline: none; }

/* ---------------------------------------------------------------- Motion

   Motion only explains a change; it never decorates. Everything uses one
   curve (--prx-move). Banned: staggered entrances, pop or scale on select,
   hover lifts, scroll-triggered effects, loops, parallax, shimmer. */

/* Quiz screen change: only the content settles in; the bar and Continue
   stay still. The engine re-adds .prx-turn to the container on each screen
   (remove the class, read offsetWidth, add it again). */
.prx-turn .prx-step { animation: prx-turn var(--prx-dur-screen) var(--prx-move); }
@keyframes prx-turn { from { opacity: 0; transform: translateY(6px); } }

/* Progress travels to its new width. */
.prx-progress > i { transition: width var(--prx-dur-progress) var(--prx-move); }

/* Picking an option or a plan: colour and border only, no scale. */
.prx-option, .prx-option::after, .prx-plan {
  transition: background-color var(--prx-dur-select) var(--prx-move), color var(--prx-dur-select) var(--prx-move),
              border-color var(--prx-dur-select) var(--prx-move), box-shadow var(--prx-dur-select) var(--prx-move);
}

/* Folded content opening (details, accordions). */
details[open] > summary ~ * { animation: prx-open var(--prx-dur-select) var(--prx-move); }
@keyframes prx-open { from { opacity: 0; transform: translateY(-4px); } }

/* Popovers (combo list, calendar). Side panels and modals use --prx-dur-panel. */
.prx-combo-list:not([hidden]), .prx-cal:not([hidden]) { animation: prx-pop var(--prx-dur) var(--prx-move); }
@keyframes prx-pop { from { opacity: 0; transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

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

/* ------------------------------------------------------------------ Type */

/* Headlines: Bricolage 600, tight. One phrase may carry .prx-accent. */
.prx-display {
  font-family: var(--prx-display);
  font-weight: var(--prx-display-weight);
  letter-spacing: var(--prx-track-display);
  line-height: var(--prx-lh-tight);
  color: var(--prx-ink);
  text-wrap: balance;
}
h1.prx-display { font-size: var(--prx-h1); line-height: 1.02; }
h2.prx-display { font-size: var(--prx-h2); }
h3.prx-display { font-size: var(--prx-h4); line-height: 1.1; }
.prx-accent { color: var(--prx-accent-ink); }

.prx-eyebrow {
  font-size: var(--prx-text-sm);
  font-weight: 600;
  letter-spacing: var(--prx-track-caps);
  text-transform: uppercase;
  color: var(--prx-red);
}
.prx-eyebrow--onnavy { color: var(--prx-on-navy-muted); }

.prx-label {
  font-size: var(--prx-text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--prx-muted);
}

.prx-lede {
  font-size: clamp(1.0625rem, 1.02rem + 0.19vw, 1.25rem);
  color: var(--prx-muted);
  max-width: 34em;
}

.prx-prose { display: flex; flex-direction: column; gap: 18px; }
.prx-prose p, .prx-prose li { font-size: var(--prx-prose); line-height: var(--prx-lh-prose); color: var(--prx-body); }
.prx-prose strong { color: var(--prx-ink); }

.prx-muted { color: var(--prx-muted); }
.prx-fine  { font-size: var(--prx-text-xs); color: var(--prx-muted); line-height: var(--prx-lh-base); }

/* Prices are set in the display face, tabular so they never jump. */
.prx-price {
  font-family: var(--prx-display);
  font-weight: var(--prx-display-weight);
  letter-spacing: var(--prx-track-display);
  font-variant-numeric: tabular-nums;
  color: var(--prx-ink);
  line-height: 1;
}
.prx-price small { font-family: var(--prx-font); font-size: var(--prx-text-md); font-weight: 500; letter-spacing: 0; color: var(--prx-muted); }
.prx-price s, .prx-was { color: var(--prx-faint); font-weight: 400; }

/* ---------------------------------------------------------------- Layout */

.prx-wrap { width: 100%; max-width: var(--prx-max); margin-inline: auto; padding-inline: var(--prx-gutter); }
.prx-flow { width: 100%; max-width: var(--prx-flow); margin-inline: auto; padding-inline: 20px; }
.prx-section { padding-block: var(--prx-section); }
.prx-stack { display: flex; flex-direction: column; gap: var(--prx-space-4); }

/* --------------------------------------------------------------- Buttons */

.prx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--prx-space-2);
  min-height: var(--prx-btn-h);
  padding: 0 26px;
  border: 0;
  border-radius: var(--prx-r-pill);
  font-size: var(--prx-text-lg);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--prx-dur) var(--prx-move), color var(--prx-dur) var(--prx-move);
}
.prx-btn svg, .prx-btn .prx-i { flex-shrink: 0; width: 18px; height: 18px; }
.prx-btn--lg { min-height: var(--prx-btn-h-lg); padding: 0 30px; font-size: var(--prx-text-xl); }
.prx-btn--sm { min-height: 44px; padding: 0 20px; font-size: var(--prx-text-md); }
.prx-btn--block { width: 100%; }

.prx-btn--primary { background: var(--prx-red); color: var(--prx-on-navy); }
.prx-btn--primary:hover { background: var(--prx-red-deep); color: var(--prx-on-navy); }
.prx-btn--dark { background: var(--prx-navy); color: var(--prx-on-navy); }
.prx-btn--dark:hover { background: var(--prx-navy-lift); color: var(--prx-on-navy); }
.prx-btn--ghost { background: transparent; color: var(--prx-ink); box-shadow: inset 0 0 0 1.5px var(--prx-navy); }
.prx-btn--ghost:hover { background: var(--prx-navy); color: var(--prx-on-navy); }
.prx-btn--light { background: var(--prx-surface); color: var(--prx-ink); }
.prx-btn--light:hover { background: var(--prx-tint); color: var(--prx-ink); }

.prx-btn:disabled, .prx-btn[aria-disabled="true"] {
  background: var(--prx-surface-alt); color: var(--prx-faint); box-shadow: none; cursor: not-allowed;
}

/* The secondary path: a text link, never a second red button. */
.prx-textlink {
  display: inline-flex; align-items: center; min-height: 44px; /* a real touch target */
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: var(--prx-text-md); font-weight: 600; color: var(--prx-ink);
  text-decoration: underline; text-decoration-color: var(--prx-red); text-underline-offset: 3px;
}

.prx-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
@media (max-width: 600px) {
  .prx-actions { flex-direction: column; align-items: stretch; }
  .prx-actions .prx-btn { width: 100%; }
}

/* --------------------------------------------------- Tags, chips, ticks */

.prx-tag {
  display: inline-flex; align-items: center;
  min-height: 28px; padding: 0 var(--prx-space-3);
  border-radius: var(--prx-r-pill);
  background: var(--prx-surface-alt); color: var(--prx-ink);
  font-size: var(--prx-text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.prx-tag--solid { background: var(--prx-navy); color: var(--prx-on-navy); }
.prx-tag--alert { background: var(--prx-red-pale); color: var(--prx-red-deep); }

.prx-chip {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 var(--prx-space-4);
  border: 1px solid var(--prx-line-soft); border-radius: var(--prx-r-pill);
  background: var(--prx-surface); font-size: 0.875rem; font-weight: 500;
}

.prx-ticks { display: flex; flex-direction: column; gap: var(--prx-space-3); list-style: none; }
.prx-tick { display: flex; align-items: flex-start; gap: var(--prx-space-3); font-size: var(--prx-text-md); }
.prx-tick::before {
  content: ''; flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px;
  background: var(--prx-navy);
  -webkit-mask: url('icons/check.svg') center / contain no-repeat;
  mask: url('icons/check.svg') center / contain no-repeat;
}
.prx-tick--no::before { background: var(--prx-muted); -webkit-mask-image: url('icons/x.svg'); mask-image: url('icons/x.svg'); }
.prx-on-navy .prx-tick::before { background: var(--prx-on-navy-soft); }

/* Ticks, crosses and the FAQ plus are Lucide icons (icons/, ISC), referenced
   directly so the path always resolves relative to this file. */

/* Any Lucide icon, coloured by currentColor:
   <span class="prx-i" style="--i:url(icons/truck.svg)" aria-hidden="true"></span> */
.prx-i {
  display: inline-block; flex-shrink: 0;
  width: var(--size, 1.25em); height: var(--size, 1.25em);
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}

/* ----------------------------------------------------- Cards and panels */

/* Soft tint panels, no hairline, no shadow. The site's signature surface. */
.prx-card { display: block; background: var(--prx-tint); border-radius: var(--prx-r-xl); padding: var(--prx-space-7); }
.prx-card.prx-stack { display: flex; }
a.prx-card { text-decoration: none; color: inherit; transition: background-color var(--prx-dur) var(--prx-move); }
a.prx-card:hover { background: var(--prx-tint-hover); color: inherit; }

/* The one white, raised face on a page: the buy box / plan rail. */
.prx-rail {
  background: var(--prx-surface);
  border: 1px solid #E7ECF2;
  border-radius: var(--prx-r-3xl);
  box-shadow: var(--prx-shadow-card);
  padding: var(--prx-space-8);
}

/* Full navy panel: hero bands, interstitials, the footer. */
.prx-on-navy { background: var(--prx-navy); color: var(--prx-on-navy-soft); }
.prx-on-navy .prx-display, .prx-on-navy strong { color: var(--prx-on-navy); }
.prx-on-navy .prx-accent { color: var(--prx-on-navy-muted); }
.prx-on-navy .prx-muted { color: var(--prx-on-navy-muted); }
.prx-panel { border-radius: var(--prx-r-3xl); padding: clamp(28px, 4vw, 56px); }

/* Notice: quiet, inline, icon + copy. No coloured side stripe. */
.prx-notice {
  display: flex; align-items: flex-start; gap: var(--prx-space-3);
  padding: 14px 16px;
  border-radius: var(--prx-r-md);
  background: var(--prx-tint);
  font-size: var(--prx-text-md); color: var(--prx-body);
}
.prx-notice svg, .prx-notice .prx-i { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; color: var(--prx-navy); }
.prx-notice strong { color: var(--prx-ink); }
.prx-notice--ok    { background: var(--prx-ok-pale); }    .prx-notice--ok :is(svg, .prx-i)    { color: var(--prx-ok); }
.prx-notice--warn  { background: var(--prx-warn-pale); }  .prx-notice--warn :is(svg, .prx-i)  { color: var(--prx-warn); }
.prx-notice--error { background: var(--prx-error-pale); } .prx-notice--error :is(svg, .prx-i) { color: var(--prx-error); }

/* ------------------------------------------------------------------ FAQ */

.prx-faq details { border-bottom: 1px solid var(--prx-line); }
.prx-faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--prx-space-4);
  padding: var(--prx-space-5) 0; cursor: pointer; list-style: none;
  font-size: var(--prx-text-xl); font-weight: 600; color: var(--prx-ink);
}
.prx-faq summary::-webkit-details-marker { display: none; }
.prx-faq summary::after {
  content: ''; flex-shrink: 0; width: 20px; height: 20px; background: var(--prx-navy);
  -webkit-mask: url('icons/plus.svg') center / contain no-repeat; mask: url('icons/plus.svg') center / contain no-repeat;
  transition: transform var(--prx-dur-select) var(--prx-move);
}
.prx-faq details[open] summary::after { transform: rotate(45deg); }
.prx-faq-answer { padding-bottom: var(--prx-space-5); color: var(--prx-muted); max-width: 70ch; }

/* ---------------------------------------------------------------- Fields */

.prx-field { display: flex; flex-direction: column; gap: 6px; }
.prx-field > label, .prx-field-label { font-size: var(--prx-text-md); font-weight: 600; color: var(--prx-ink); }
.prx-help { font-size: var(--prx-text-sm); color: var(--prx-muted); }
.prx-err  { font-size: var(--prx-text-sm); font-weight: 600; color: var(--prx-error); }

.prx-input, .prx-select, .prx-textarea {
  width: 100%;
  min-height: var(--prx-field-h);
  padding: 0 16px;
  border: 1px solid var(--prx-line-soft);
  border-radius: var(--prx-r-md);
  background: var(--prx-surface);
  color: var(--prx-ink);
  font-size: var(--prx-text-lg); /* 16px: iOS does not zoom */
  transition: border-color var(--prx-dur) var(--prx-move), box-shadow var(--prx-dur) var(--prx-move);
}
.prx-textarea { padding-block: 14px; min-height: 120px; resize: vertical; }
/* Lucide chevron-down / check paths, inlined because a background-image
   cannot take currentColor. */
.prx-select {
  appearance: none; padding-right: 44px;
  background: var(--prx-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003266' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 16px center / 18px no-repeat;
}
.prx-input::placeholder, .prx-textarea::placeholder { color: var(--prx-faint); }
.prx-input:hover, .prx-select:hover, .prx-textarea:hover { border-color: var(--prx-line-dash); }
.prx-input:focus, .prx-select:focus, .prx-textarea:focus {
  outline: none; border-color: var(--prx-navy); box-shadow: inset 0 0 0 1px var(--prx-navy);
}
.prx-input[aria-invalid="true"], .prx-select[aria-invalid="true"] {
  border-color: var(--prx-error); box-shadow: inset 0 0 0 1px var(--prx-error);
}

/* Input with a unit (lbs, ft, ng/dL) sitting inside the field. */
.prx-unit { position: relative; }
.prx-unit .prx-input { padding-right: 64px; font-variant-numeric: tabular-nums; }
.prx-unit > span {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: var(--prx-text-md); font-weight: 600; color: var(--prx-muted); pointer-events: none;
}
.prx-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: var(--prx-space-3); }

/* Consent / single checkbox line. */
.prx-check { display: flex; gap: 12px; align-items: flex-start; font-size: var(--prx-text-sm); color: var(--prx-muted); cursor: pointer; }
.prx-check input { appearance: none; flex-shrink: 0; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--prx-line-dash); border-radius: var(--prx-r-sm); background: var(--prx-surface); cursor: pointer; }
.prx-check input:checked { background: var(--prx-navy) var(--prx-check-white) center / 16px no-repeat; border-color: var(--prx-navy); }

:root {
  --prx-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------- Combobox */

/* Replaces <select> when the list is long (states): the native menu opens
   the operating system's own list and breaks the design. Behaviour in
   components.js (PRX.combo). Markup:
   <div class="prx-combo">
     <input class="prx-input prx-select" role="combobox" aria-controls="L" ...>
     <ul class="prx-combo-list" id="L" role="listbox" hidden></ul>
   </div> */
.prx-combo { position: relative; }
.prx-combo-list, .prx-cal {
  position: absolute; z-index: 40; top: calc(100% + 6px);
  background: var(--prx-surface);
  border: 1px solid var(--prx-line);
  border-radius: var(--prx-r-md);
  box-shadow: var(--prx-shadow-rail);
}
.prx-combo-list { left: 0; right: 0; max-height: 288px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; }
.prx-combo-list li { padding: 12px 14px; border-radius: var(--prx-r-sm); color: var(--prx-ink); font-size: var(--prx-text-lg); cursor: pointer; }
.prx-combo-list li:hover, .prx-combo-list li.is-active { background: var(--prx-tint-hover); }
.prx-combo-list li[aria-selected="true"] { background: var(--prx-navy); color: var(--prx-on-navy); }
.prx-combo-list li.prx-combo-empty { color: var(--prx-muted); background: none; cursor: default; }

/* -------------------------------------------------------- Date */

/* Never <input type="date">: it opens the native calendar. A typed
   MM/DD/YYYY field plus our own popover. Behaviour in components.js
   (PRX.date). Markup:
   <div class="prx-date">
     <input class="prx-input" type="text" inputmode="numeric" data-mask="date" maxlength="10" placeholder="MM/DD/YYYY">
     <button type="button" class="prx-iconbtn" aria-label="Choose date from calendar" aria-haspopup="dialog" aria-expanded="false"></button>
     <div class="prx-cal" role="dialog" aria-label="Choose a date" hidden></div>
   </div> */
.prx-date { position: relative; }
.prx-date .prx-input { padding-right: 56px; font-variant-numeric: tabular-nums; }
.prx-date > .prx-iconbtn { position: absolute; right: 6px; top: 6px; }
.prx-cal { right: 0; width: min(328px, 100%); padding: 14px; }
.prx-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.prx-cal-title { font-weight: 600; color: var(--prx-ink); }
.prx-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.prx-cal-grid abbr { padding: 6px 0; font-size: var(--prx-text-xs); font-weight: 600; color: var(--prx-muted); text-decoration: none; }
.prx-cal-grid button {
  aspect-ratio: 1; min-height: 40px; border: 0; border-radius: var(--prx-r-pill);
  background: transparent; color: var(--prx-ink);
  font-size: var(--prx-text-md); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color var(--prx-dur) var(--prx-move);
}
.prx-cal-grid button:hover:not(:disabled) { background: var(--prx-tint-hover); }
.prx-cal-grid button[aria-current="date"] { box-shadow: inset 0 0 0 1.5px var(--prx-line-dash); }
.prx-cal-grid button[aria-selected="true"] { background: var(--prx-navy); color: var(--prx-on-navy); box-shadow: none; }
.prx-cal-grid button:disabled { color: var(--prx-faint); cursor: default; }

/* ======================================================================
   QUIZ
   One question per screen, left-aligned, navy on white. The answer you
   pick turns navy. Red appears once: the Continue button.
   ====================================================================== */

.prx-quizbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--prx-page);
  border-bottom: 1px solid var(--prx-line);
}
.prx-quizbar-in {
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
  max-width: var(--prx-flow); margin-inline: auto; padding: 10px 20px; min-height: 64px;
}
.prx-quizbar .prx-logo { justify-self: center; height: 22px; width: auto; }
.prx-iconbtn {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: var(--prx-r-pill); background: transparent; color: var(--prx-ink); cursor: pointer;
  transition: background-color var(--prx-dur) var(--prx-move);
}
.prx-iconbtn:hover { background: var(--prx-tint); }
.prx-iconbtn:disabled { visibility: hidden; }
.prx-iconbtn svg, .prx-iconbtn .prx-i { width: 22px; height: 22px; }

/* Progress: a 4px navy line on a flat track. No gradient, no glow. */
.prx-progress { height: 4px; background: var(--prx-surface-alt); }
.prx-progress > i { display: block; height: 100%; width: var(--p, 0%); background: var(--prx-navy); }

.prx-step { padding-block: clamp(16px, 3vh, 32px) 132px; } /* 132: room for the fixed Continue bar */
.prx-step-count { font-size: var(--prx-text-sm); font-weight: 600; color: var(--prx-muted); font-variant-numeric: tabular-nums; margin-bottom: var(--prx-space-3); }
.prx-q {
  font-family: var(--prx-display); font-weight: var(--prx-display-weight);
  font-size: var(--prx-q); line-height: 1.1; letter-spacing: var(--prx-track-display);
  color: var(--prx-ink); text-wrap: balance;
}
.prx-q-help { margin-top: var(--prx-space-3); font-size: var(--prx-text-lg); color: var(--prx-muted); max-width: 40em; }

.prx-options { display: flex; flex-direction: column; gap: 10px; margin-top: var(--prx-space-7); border: 0; padding: 0; }

/* An option is a tint panel. Selected = solid navy, white text. */
.prx-option {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: var(--prx-option-h);
  padding: 14px 18px;
  border: 0; border-radius: var(--prx-r-lg);
  background: var(--prx-tint);
  color: var(--prx-ink);
  font-size: var(--prx-text-lg); font-weight: 500; text-align: left;
  cursor: pointer;
}
.prx-option:hover { background: var(--prx-tint-hover); }
.prx-option input { position: absolute; opacity: 0; pointer-events: none; }
.prx-option-text { flex: 1; }
.prx-option-sub { display: block; margin-top: 2px; font-size: var(--prx-text-md); font-weight: 400; color: var(--prx-muted); }

/* The mark sits on the right: a ring for one answer, a square for many. */
.prx-option::after {
  content: ''; order: 2; flex-shrink: 0; width: 22px; height: 22px;
  border: 1.5px solid var(--prx-line-dash); border-radius: 50%; background: var(--prx-surface);
}
.prx-option--multi::after { border-radius: var(--prx-r-sm); }

.prx-option:has(input:checked), .prx-option[aria-pressed="true"], .prx-option[aria-checked="true"] {
  background: var(--prx-navy); color: var(--prx-on-navy);
}
.prx-option:has(input:checked) .prx-option-sub,
.prx-option[aria-pressed="true"] .prx-option-sub,
.prx-option[aria-checked="true"] .prx-option-sub { color: var(--prx-on-navy-muted); }
.prx-option:has(input:checked)::after,
.prx-option[aria-pressed="true"]::after,
.prx-option[aria-checked="true"]::after {
  border-color: var(--prx-on-navy); background: var(--prx-on-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003266' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.prx-option:has(input:focus-visible) { outline: 3px solid var(--prx-focus); outline-offset: 2px; }

/* Continue lives in a bar pinned to the bottom of the screen. */
.prx-continue {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: var(--prx-page);
  border-top: 1px solid var(--prx-line);
}
.prx-continue > div { max-width: var(--prx-flow); margin-inline: auto; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.prx-continue .prx-btn { width: 100%; }

/* ---------------------------------------------- One frame per screen

   No quiz screen scrolls at 375x667, 375x812, 1366x768 or 1440x900 unless
   the content truly cannot fit. Long lists get compact rows, the intro
   photo is capped, and short viewports get a denser layout. Floors that
   never move: 44px per button, 16px text in inputs. */
.prx-step .prx-options { margin-top: var(--prx-space-5); }
.prx-options.compact { gap: 8px; }                      /* lists of more than 5 options */
.prx-options.compact .prx-option { min-height: 52px; padding-block: 10px; }
.prx-step .prx-photo { --ar: 16 / 10; max-height: min(30vh, 280px); margin-bottom: var(--prx-space-4); }
/* An intro screen's headline is a question-sized title, never the site's hero size. */
.prx-step h1.prx-display { font-size: var(--prx-q); line-height: 1.1; }
.prx-step .prx-lede { font-size: var(--prx-text-lg); }

@media (max-height: 740px) { /* iPhone SE, any phone with Safari's bars showing */
  .prx-step { --prx-field-h: 48px; --prx-option-h: 54px; padding-top: 12px; }
  .prx-step-count { display: none; }
  .prx-q, .prx-step h1.prx-display { font-size: 1.5rem; }
  .prx-q-help, .prx-step .prx-lede { margin-top: 6px; font-size: var(--prx-text-md); }
  .prx-step .prx-options { margin-top: var(--prx-space-4); }
  .prx-step .prx-option { padding-block: 8px; }
  .prx-step .prx-options.compact .prx-option { min-height: 46px; padding-block: 6px; font-size: var(--prx-text-md); }
  .prx-step .prx-photo { max-height: 22vh; }
  .prx-step .prx-card { padding: var(--prx-space-4) var(--prx-space-5); }
  .prx-step .prx-ticks { gap: 8px; }
  .prx-step .prx-stack { gap: var(--prx-space-2); }
  .prx-step .prx-field { gap: 2px; }
  .prx-step .prx-field > label { font-size: var(--prx-text-sm); }
  .prx-step .prx-lines > div { padding-block: 8px; }
  .prx-step .prx-date > .prx-iconbtn { top: 2px; } /* 44px button inside a 48px field */
  .prx-continue { padding-top: 8px; }
}

/* "Breather" between questions: a navy panel with one fact. */
.prx-fact .prx-display { font-size: var(--prx-h3); }
.prx-fact-figure {
  font-family: var(--prx-display); font-weight: var(--prx-display-weight);
  font-size: clamp(3.5rem, 2.5rem + 5vw, 6rem); letter-spacing: -0.04em; line-height: 0.9;
  color: var(--prx-on-navy); font-variant-numeric: tabular-nums;
}
.prx-fact-source { margin-top: var(--prx-space-5); font-size: var(--prx-text-xs); color: var(--prx-on-navy-muted); }

/* --------------------------------------------------------- Photos */

/* Real photography, never illustration. Rounded like the site's media. */
.prx-photo {
  display: block; width: 100%; max-width: 100%;
  aspect-ratio: var(--ar, 4 / 3);
  object-fit: cover; object-position: var(--focus, center 30%);
  border-radius: var(--prx-r-2xl);
  background: var(--prx-surface-alt);
}

/* Options with a picture: two per row, photo on top, label below.
   Use when the answer is something you can see (a goal, a body area,
   a product form). Never for yes/no or frequency questions. */
.prx-options--tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.prx-option--tile { position: relative; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.prx-option--tile img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--prx-surface-alt); }
.prx-option--tile .prx-option-text { padding: 12px 14px 14px; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.prx-option--tile::after { position: absolute; top: 10px; right: 10px; }

/* Three picture options: one row of three instead of two plus an orphan.
   Under 520px three columns clip the names, so each tile becomes a row
   with the photo (96px) on the left. */
.prx-options--tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prx-options--tiles-3 .prx-option--tile .prx-option-text { padding: 10px 12px 12px; font-size: var(--prx-text-md); }
@media (max-width: 520px) {
  .prx-options--tiles-3 { grid-template-columns: 1fr; }
  .prx-options--tiles-3 .prx-option--tile { flex-direction: row; align-items: center; }
  .prx-options--tiles-3 .prx-option--tile img { width: 96px; flex-shrink: 0; }
  .prx-options--tiles-3 .prx-option--tile::after { position: static; margin-right: 18px; }
}

/* Breather with a photo on top of the navy panel. */
.prx-fact > .prx-photo { --ar: 16 / 10; border-radius: var(--prx-r-xl); }

/* ------------------------------------------------------------- Plans */

.prx-plans { display: flex; flex-direction: column; gap: 12px; }
.prx-plan {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center;
  padding: 20px 22px;
  border: 1.5px solid var(--prx-line); border-radius: var(--prx-r-xl);
  background: var(--prx-surface); cursor: pointer;
}
.prx-plan:hover { border-color: var(--prx-line-dash); }
.prx-plan input { position: absolute; opacity: 0; pointer-events: none; }
.prx-plan:has(input:checked), .prx-plan[aria-checked="true"] { border-color: var(--prx-navy); box-shadow: inset 0 0 0 1px var(--prx-navy); }
.prx-plan:has(input:focus-visible) { outline: 3px solid var(--prx-focus); outline-offset: 2px; }
.prx-plan-name { font-size: var(--prx-text-xl); font-weight: 600; color: var(--prx-ink); }
.prx-plan-meta { font-size: var(--prx-text-md); color: var(--prx-muted); }
.prx-plan .prx-price { grid-row: span 2; font-size: 1.75rem; text-align: right; }
.prx-plan .prx-tag { position: absolute; top: -12px; left: 20px; }

/* Line items: what is due today. */
.prx-lines { display: flex; flex-direction: column; }
.prx-lines > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--prx-line); font-size: var(--prx-text-md); color: var(--prx-body); }
.prx-lines > div > b { font-weight: 600; color: var(--prx-ink); font-variant-numeric: tabular-nums; }
.prx-lines > .prx-lines-total { border-bottom: 0; padding-top: 16px; font-size: var(--prx-text-xl); font-weight: 600; color: var(--prx-ink); }

/* --------------------------------------------------------- Lab value */

/* A reading against its reference range. Never colour-only: the value and
   the range are always printed. */
.prx-lab { display: flex; flex-direction: column; gap: 10px; }
.prx-lab-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.prx-lab-head strong { font-family: var(--prx-display); font-weight: var(--prx-display-weight); font-size: 1.75rem; letter-spacing: var(--prx-track-display); color: var(--prx-ink); font-variant-numeric: tabular-nums; }
.prx-lab-bar { position: relative; height: 8px; border-radius: var(--prx-r-pill); background: var(--prx-surface-alt); }
.prx-lab-bar > b { position: absolute; top: 0; bottom: 0; left: var(--lo); right: calc(100% - var(--hi)); background: var(--prx-line-dash); border-radius: var(--prx-r-pill); }
.prx-lab-bar > i { position: absolute; top: 50%; left: var(--v); width: 18px; height: 18px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--prx-navy); border: 3px solid var(--prx-surface); box-shadow: 0 0 0 1px var(--prx-navy); }
.prx-lab-scale { display: flex; justify-content: space-between; font-size: var(--prx-text-xs); color: var(--prx-muted); font-variant-numeric: tabular-nums; }