/* ============================================================================
   Eligibility stepper v3 (templates/check.html) — Figma: Booking Flow ⑨ FINAL v2 + the About-you step.
   Tokens and components only (tokens.css, components.css). 1440 canvas: split steps use a 1200 grid
   (intro 540 + 60 gap + column 600); step 7 and the confirmation are a centred 800 card; below 1200
   the mobile stack, centred, content max 640; a sticky Continue bar on mobile. No shadows except the
   booking and confirmation cards (the handoff's one light shadow).
   ========================================================================== */
#wrapper .stp, #wrapper .stp section, #wrapper .stp-screen { opacity: 1 !important; transform: none !important; }
.stp { background: var(--color-bg-page); padding: var(--space-40) 0 var(--space-80); font-family: var(--font-body); color: var(--color-text-body); }
/* the purchased theme pads .main for its fixed header; the stepper's own header flows, so drop that offset */
.stp-header ~ #wrapper .main, .stp-header + #wrapper .main, body:has(.stp-header) #wrapper .main { padding-top: 0 !important; }
.stp-shell { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-24); }
@media (min-width: 1200px) { .stp-shell { padding: 0; } }
@media (max-width: 1199px) { .stp-shell { max-width: 640px; } }

/* Header: logo + the CMO (Hd popover) ------------------------------------------------------------- */
.stp-header { background: var(--color-bg-page); }
.stp-header__inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: var(--space-20) var(--space-24); display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
@media (min-width: 1200px) { .stp-header__inner { padding-left: 0; padding-right: 0; } }
.stp-header__logo img { height: 32px; width: auto; display: block; }
.stp-doctor { position: relative; }
.stp-doctor__btn { display: flex; align-items: center; gap: var(--space-12); background: none; border: 0; padding: var(--space-4); border-radius: var(--radius-md); cursor: pointer; text-align: left; font-family: inherit; }
.stp-doctor__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.stp-doctor__avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--color-image-bg-portrait) center top / cover no-repeat; flex: none; }
.stp-doctor__text { display: grid; gap: 1px; }
.stp-doctor__text strong { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 16px; color: var(--color-text-heading); }
.stp-doctor__text span { font-size: 13px; line-height: 1.3; color: var(--color-text-support); }
@media (max-width: 479px) { .stp-doctor__text span { display: none; } }
.stp-bio { position: absolute; right: 0; top: calc(100% + 8px); width: min(360px, 90vw); background: var(--color-surface-card); border: var(--stroke-default); border-radius: var(--radius-lg); padding: var(--space-20); box-shadow: var(--shadow-md); z-index: 30; }
.stp-bio p { margin: 0 0 var(--space-12); font-size: 15px; line-height: 1.5; }
.stp-bio__note { color: var(--color-text-support); }
.stp-bio[hidden] { display: none; }

/* Top: back, progress, welcome back --------------------------------------------------------------- */
.stp-top { margin-bottom: var(--space-32); }
.stp-back { display: inline-flex; align-items: center; gap: var(--space-8); min-height: 40px; font-weight: var(--weight-semibold); font-size: 16px; color: var(--color-text-heading); text-decoration: none; margin-bottom: var(--space-12); }
.stp-back:hover { text-decoration: underline; color: var(--color-text-heading); }
.stp-back[hidden] { display: none; }
.stp-progress__label { margin: 0 0 var(--space-8); font-size: 14px; color: var(--color-text-support); }
.stp-progress__label strong { font-family: var(--font-heading); font-weight: var(--weight-semibold); color: var(--color-text-heading); }
.stp-progress__label { display: flex; align-items: baseline; gap: var(--space-4); }
.stp-restart { margin-left: auto; font-size: 14px; font-weight: var(--weight-semibold); color: var(--color-text-link); text-decoration: underline; }
.stp-restart[hidden] { display: none; }
.stp-progress__segments { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-12); }
.stp-progress__segments span { height: 4px; border-radius: 2px; background: var(--color-bmi-track); }
.stp-progress__segments span.is-done { background: var(--color-button-primary-bg); }
.stp-banner { display: flex; align-items: center; gap: var(--space-12); margin-top: var(--space-24); padding: var(--space-12) var(--space-16); border-radius: var(--radius-md); background: var(--color-surface-subtle); color: var(--color-text-heading); font-size: 16px; }
.stp-banner svg { color: var(--color-icon-brand); flex: none; }
.stp-banner[hidden] { display: none; }

/* Screens and layouts ------------------------------------------------------------------------------ */
.stp-screen[hidden] { display: none; }
.stp-screen { animation: stp-in .25s ease; }
@keyframes stp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stp-screen { animation: none; } }
.stp-screen--split { display: grid; gap: var(--space-32); }
@media (min-width: 1200px) { .stp-screen--split { grid-template-columns: 540px minmax(0, 600px); column-gap: 60px; align-items: start; } }
.stp-screen--narrow { max-width: 720px; margin: 0 auto; }
.stp-screen--wide { max-width: 1200px; }
.stp-screen--card { max-width: 800px; margin: 0 auto; }
.stp-col { min-width: 0; }
.stp-visual { display: none; }
@media (min-width: 1200px) { .stp-visual { display: block; } }
@media (max-width: 1199px) {
  .stp-visual--mobile { display: block; margin-bottom: var(--space-24); }
  .stp-visual--mobile .stp-visual__card { min-height: 0; display: grid; grid-template-columns: 1fr 112px; align-items: center; column-gap: var(--space-16); padding: var(--space-20); }
  .stp-visual--mobile .stp-visual__img { grid-column: 2; grid-row: 1 / span 2; max-width: 112px; margin: 0; }
  .stp-visual--mobile .stp-visual__drug { max-height: 140px; }
  .stp-visual--mobile .stp-visual__eyebrow { grid-column: 1; margin: 0 0 var(--space-4); }
  .stp-visual--mobile .stp-visual__title { grid-column: 1; font-size: 18px; }
  .stp-shell { padding-bottom: var(--space-24); }
  .stp { padding-top: var(--space-16); }
}
.stp-visual__card { background: var(--color-surface-subtle); border-radius: var(--radius-lg); padding: var(--space-40) var(--space-40) var(--space-32); min-height: 640px; display: flex; flex-direction: column; justify-content: flex-end; }
.stp-visual__img { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto auto; border-radius: 4%; }   /* the collage PNG has baked rounded corners with dark edge pixels outside the curve; clip to the same radius */
.stp-visual__img--card { max-width: 440px; margin: var(--space-32) auto auto; }   /* straight, as the design has it (2026-10-09) */
/* steps 1–2 product card: the design's panel-medication PNG (960×1200 @4x, 4:5), or the chosen product */
.stp-visual__panel { max-width: 400px; aspect-ratio: 4 / 5; object-fit: contain; border-radius: 0; }
.stp-visual__panel[hidden] { display: none; }
.stp-visual__drug { max-width: 360px; max-height: 420px; width: auto; object-fit: contain; border-radius: 0; }
.stp-visual__drug[hidden] { display: none; }
.stp-visual__eyebrow { font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-support); margin: var(--space-32) 0 var(--space-8); }
.stp-visual__title { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 24px; line-height: 1.25; color: var(--color-text-heading); margin: 0; }

/* Question header ----------------------------------------------------------------------------------- */
.stp-head { margin-bottom: var(--space-24); }
.stp-head--center { text-align: left; max-width: 760px; margin: 0 auto var(--space-24); }
.stp-head .imd-eyebrow { font-size: 12px; margin-bottom: var(--space-12); }
.stp-q { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 32px; line-height: 1.2; color: var(--color-text-heading); margin: 0; outline: none; text-wrap: balance; }
#wrapper .stp .stp-q:focus, #wrapper .stp .stp-q:focus-visible, .stp-q:focus, .stp-q:focus-visible { outline: none !important; box-shadow: none !important; border: 0 !important; }   /* focus moves here on step change (handoff); the ring is the theme's global :focus-visible, not the design's */
.stp-q--center { text-align: center; }
.stp-help { font-size: 18px; line-height: 1.5; color: var(--color-text-body); margin: var(--space-12) 0 0; }
.stp-help--center { text-align: center; }
.stp-help[hidden] { display: none; }
.stp-sub { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 18px; color: var(--color-text-heading); margin: var(--space-24) 0 var(--space-8); }
.stp-fine { font-size: 14px; line-height: 1.45; color: var(--color-text-support); margin: var(--space-8) 0 0; }
.stp-fine--icon { display: flex; gap: var(--space-8); align-items: flex-start; }
.stp-fine--icon svg { flex: none; margin-top: 2px; color: var(--color-icon-default); }
.stp-fine[hidden] { display: none; }
.stp-link { color: var(--color-text-link); font-weight: var(--weight-semibold); text-decoration: underline; cursor: pointer; }
.stp-link--btn { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; }
.stp-error { font-size: 15px; font-weight: var(--weight-semibold); color: var(--color-text-error); margin: var(--space-12) 0 0; }
.stp-error[hidden] { display: none; }

/* Single-choice cards (step 1, 2) ------------------------------------------------------------------ */
.stp-choices { display: grid; gap: var(--space-12); }
.stp-choice, .stp-mode { position: relative; display: flex; align-items: flex-start; gap: var(--space-16); padding: var(--space-20) var(--space-24); background: var(--color-surface-card); border: var(--stroke-default); border-radius: 16px; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.stp-choice:hover, .stp-mode:hover { border-color: var(--primitive-charcoal-500); }
.stp-choice input, .stp-mode input, .stp-med input, .stp-check input, .stp-seg__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.stp-choice__mark { flex: none; width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--color-border-input); background: var(--color-surface-card); display: grid; place-items: center; margin-top: 1px; }
.stp-choice__mark::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-button-primary-bg); transform: scale(0); transition: transform .15s ease; }
.stp-choice:has(input:checked), .stp-mode:has(input:checked) { background: var(--color-surface-brand-tint, #e8f1fd); border: 2px solid var(--color-border-focus); padding: calc(var(--space-20) - 1px) calc(var(--space-24) - 1px); }
.stp-choice:has(input:checked) .stp-choice__mark, .stp-mode:has(input:checked) .stp-choice__mark { border: 2px solid var(--color-border-focus); }
.stp-choice:has(input:checked) .stp-choice__mark::after, .stp-mode:has(input:checked) .stp-choice__mark::after { transform: scale(1); }
.stp-choice:has(input:focus-visible), .stp-mode:has(input:focus-visible), .stp-med:has(input:focus-visible), .stp-check:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.stp-choice__text { display: grid; gap: 4px; }
.stp-choice__text strong { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 18px; color: var(--color-text-heading); line-height: 1.3; }
.stp-choice__text span { font-size: 16px; color: var(--color-text-body); }
.stp-note { display: flex; gap: var(--space-12); align-items: flex-start; margin-top: var(--space-16); padding: var(--space-16); border-radius: var(--radius-md); background: var(--color-surface-brand-tint, #e8f1fd); color: var(--color-text-heading); font-size: 16px; line-height: 1.45; }
.stp-note svg { flex: none; color: var(--color-icon-brand); margin-top: 1px; }
.stp-note[hidden] { display: none; }

/* Medication picker (1b) ---------------------------------------------------------------------------- */
.stp-meds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); }
@media (max-width: 599px) { .stp-meds { grid-template-columns: 1fr; } }
.stp-med { position: relative; display: grid; gap: 4px; padding: var(--space-16); background: var(--color-surface-card); border: var(--stroke-default); border-radius: 16px; cursor: pointer; }
.stp-med:hover { border-color: var(--primitive-charcoal-500); }
.stp-med:has(input:checked) { background: var(--color-surface-brand-tint, #e8f1fd); border: 2px solid var(--color-border-focus); padding: calc(var(--space-16) - 1px); }
.stp-med__mark { position: absolute; top: var(--space-16); left: var(--space-16); width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--color-border-input); background: var(--color-surface-card); display: grid; place-items: center; z-index: 1; }
.stp-med__mark::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-button-primary-bg); transform: scale(0); }
.stp-med:has(input:checked) .stp-med__mark { border: 2px solid var(--color-border-focus); }
.stp-med:has(input:checked) .stp-med__mark::after { transform: scale(1); }
.stp-med__img { display: grid; place-items: center; aspect-ratio: 1; background: var(--color-surface-subtle); border-radius: var(--radius-md); margin-bottom: var(--space-8); }
.stp-med__img { overflow: hidden; }
.stp-med__img img { width: 100%; height: 100%; object-fit: contain; }   /* the card crops carry the grey card themselves (Figma product-*-card) */
.stp-med strong { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 18px; color: var(--color-text-heading); }
.stp-med > span:last-child { font-size: 14px; color: var(--color-text-support); }
@media (max-width: 599px) { .stp-med { grid-template-columns: 64px 1fr; column-gap: var(--space-12); align-items: center; padding-left: 56px; } .stp-med__img { width: 64px; margin: 0; grid-row: span 2; } .stp-med__mark { top: 50%; transform: translateY(-50%); } .stp-med:has(input:checked) .stp-med__mark { transform: translateY(-50%); } }

/* Actions / sticky bar ------------------------------------------------------------------------------ */
.stp-actions { margin-top: var(--space-24); }
.stp-actions--center { text-align: center; }
.stp-actions--row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16) var(--space-24); }
.stp-continue { min-width: 194px; }
.stp .imd-btn--lg { min-height: 52px; font-size: 18px; }
.stp .imd-btn[aria-disabled="true"] { background: var(--color-button-disabled-bg, #e3e6ea); border-color: var(--color-button-disabled-bg, #e3e6ea); color: var(--color-button-disabled-text, #6b6f74); box-shadow: none; }
.stp-sticky { display: none; }
@media (max-width: 1199px) {
  .stp-sticky { display: block; position: sticky; bottom: 0; margin: var(--space-24) calc(-1 * var(--space-24)) 0; padding: var(--space-16) var(--space-24) var(--space-24); background: var(--color-bg-page); border-top: var(--stroke-divider); z-index: 10; }
  .stp-sticky[hidden] { display: none; }
  .stp-actions:not(.stp-actions--row) { display: none; }
}

/* Panels (Ea), done states ---------------------------------------------------------------------------- */
.stp-panel { margin: var(--space-24) 0 0; padding: var(--space-24); border-radius: 16px; background: var(--color-surface-brand-tint, #e8f1fd); font-size: 16px; line-height: 1.5; color: var(--color-text-body); }
.stp-panel p { margin: 0 0 var(--space-8); }
.stp-panel__title { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 18px; color: var(--color-text-heading); }
.stp-panel__big { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 24px; color: var(--color-text-highlight); }
.stp-panel hr { border: 0; border-top: 1px solid rgba(10, 37, 64, .12); margin: var(--space-16) 0; }
.stp-done { text-align: center; padding: var(--space-24) 0; }
.stp-done__check { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--color-button-primary-bg); color: #fff; margin-bottom: var(--space-16); }
.stp-done__check--lg { width: 64px; height: 64px; }
.stp-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
.stp-grid3 { display: grid; grid-template-columns: 1.3fr 1fr .9fr; gap: var(--space-16); }
@media (max-width: 599px) { .stp-grid2, .stp-grid3 { grid-template-columns: 1fr; gap: 0; } }

/* Checkbox rows (step 4, consents) ------------------------------------------------------------------------ */
.stp-checks { display: grid; gap: var(--space-12); }
.stp-check { position: relative; display: flex; gap: var(--space-12); align-items: flex-start; cursor: pointer; font-size: 15px; line-height: 1.45; color: var(--color-text-body); }
.stp-check--card { padding: var(--space-16) var(--space-20); background: var(--color-surface-card); border: var(--stroke-default); border-radius: 12px; align-items: center; }
.stp-check--card:hover { border-color: var(--primitive-charcoal-500); }
.stp-check--card:has(input:checked) { background: var(--color-surface-brand-tint, #e8f1fd); border: 2px solid var(--color-border-focus); padding: calc(var(--space-16) - 1px) calc(var(--space-20) - 1px); }
.stp-check__mark { flex: none; width: 24px; height: 24px; border-radius: 4px; border: 1px solid var(--color-border-input); background: var(--color-surface-card); display: grid; place-items: center; margin-top: 1px; }
.stp-check__mark::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); margin-top: -2px; }
.stp-check:has(input:checked) .stp-check__mark { background: var(--color-button-primary-bg); border: 2px solid var(--color-border-focus); }
.stp-check:has(input:checked) .stp-check__mark::after { transform: rotate(45deg) scale(1); }
.stp-check__text { display: grid; gap: 2px; }
.stp-check__text strong { font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: 17px; color: var(--color-text-heading); line-height: 1.3; }
.stp-check__text span { font-size: 14px; color: var(--color-text-support); }
.stp-check[hidden] { display: none; }
.stp-or { display: flex; align-items: center; gap: var(--space-12); margin: var(--space-20) 0; color: var(--color-text-support); font-size: 13px; }
.stp-or::before, .stp-or::after { content: ""; flex: 1; border-top: var(--stroke-divider); }
.stp-consent { margin: var(--space-16) 0 var(--space-8); }
.stp-consent a { color: var(--color-text-link); }

/* Step 3: measurement card + band cards ------------------------------------------------------------------- */
.stp-measure { display: grid; gap: var(--space-24); padding: var(--space-32); background: var(--color-surface-subtle); border-radius: 16px; }
@media (min-width: 900px) { .stp-measure { grid-template-columns: auto 1fr auto; align-items: end; column-gap: var(--space-32); } }
.stp-measure__group { border: 0; padding: 0; margin: 0; min-width: 0; }
.stp-measure__group legend { font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: 16px; color: var(--color-text-heading); margin-bottom: var(--space-12); padding: 0; }
.stp-measure__row { display: grid; grid-template-columns: repeat(2, minmax(120px, 200px)); gap: var(--space-16); }
.stp-num { display: flex; align-items: center; background: var(--color-surface-card); border: var(--stroke-input); border-radius: 12px; min-height: 64px; padding: 0 var(--space-20); }
.stp-num:focus-within { border: var(--stroke-focus); }
.stp .stp-num input, .stp .stp-num input:hover, .stp .stp-num input:focus, .stp .stp-num input:focus-visible, #wrapper .stp-num input:focus { flex: 1 1 0; min-width: 0; width: 0; min-height: 0; height: 40px; padding: 0; margin: 0; border: 0 !important; border-radius: 0; background: transparent !important; outline: none !important; box-shadow: none !important; font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 22px; color: var(--color-text-heading); }
.stp-num input[aria-invalid="true"] { color: var(--color-text-error); }
.stp-num span { color: var(--color-text-support); font-size: 16px; }
.stp-measure__bmi p { margin: 0; }
.stp-measure__bmi p:first-child { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 18px; color: var(--color-text-highlight); }
.stp-measure__value { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 48px; line-height: 1.1; color: var(--color-text-highlight); min-width: 3ch; }
.stp-bands { display: grid; gap: var(--space-24); margin: var(--space-40) 0 var(--space-32); }
@media (min-width: 900px) { .stp-bands { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stp-band { border: 1px solid transparent; border-radius: 0; }
.stp-band__cap { display: flex; justify-content: space-between; align-items: center; height: 72px; padding: 0 var(--space-32); background: var(--color-surface-subtle); border-radius: 12px 12px 0 0; color: transparent; }
.stp-band.is-active .stp-band__cap { background: var(--color-button-primary-bg); color: #fff; font-size: 16px; }
.stp-band__pill { display: none; padding: 6px 14px; border-radius: 999px; background: #fff; color: var(--color-text-highlight); font-weight: var(--weight-semibold); }
.stp-band.is-active .stp-band__pill { display: inline-block; }
.stp-band.is-active { border: 2px solid var(--color-border-focus); border-radius: 12px; overflow: hidden; }   /* the cap's own radius must clip inside the 2px border, or white slivers show at the top corners */
.stp-band.is-active .stp-band__cap { border-radius: 0; }
.stp-band__title { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 28px; line-height: 1.15; color: var(--color-text-heading); margin: var(--space-32) var(--space-32) var(--space-8); }
.stp-band__sub { font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: 20px; line-height: 1.25; color: var(--color-text-heading); margin: 0 var(--space-32) var(--space-12); }
.stp-band__body { font-size: 16px; line-height: 1.5; color: var(--color-text-body); margin: 0 var(--space-32) var(--space-32); }
.stp-band--static { margin-top: var(--space-24); }
.stp-col--intro .stp-band__title { font-size: 24px; margin-top: var(--space-24); }
.stp-col--intro .stp-band__sub { font-size: 18px; }
.stp-privacy-wrap--narrow { max-width: 640px; margin: 0 auto; }

/* Step 4: result block -------------------------------------------------------------------------------------- */
.stp-result { display: flex; gap: var(--space-16); align-items: flex-start; margin-top: var(--space-24); padding: var(--space-24); border-radius: 16px; background: var(--color-surface-brand-tint, #e8f1fd); }
.stp-result--info { background: var(--color-surface-card); border: var(--stroke-default); }
.stp-result__icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-button-primary-bg); color: #fff; }
.stp-result--info .stp-result__icon { background: var(--color-surface-brand-tint, #e8f1fd); color: var(--color-text-highlight); }
.stp-result .imd-eyebrow { font-size: 12px; margin-bottom: var(--space-4); }
.stp-result__title { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 22px; line-height: 1.25; color: var(--color-text-heading); margin: 0 0 var(--space-8); }
.stp-result__body { font-size: 16px; line-height: 1.5; color: var(--color-text-body); margin: 0 0 var(--space-8); }
.stp-result__note { color: var(--color-text-heading); font-weight: var(--weight-semibold); }
.stp-result__note[hidden] { display: none; }
.stp-verify { list-style: none; margin: var(--space-12) 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--color-text-support); }
.stp-verify li { display: flex; gap: var(--space-8); align-items: center; }
.stp-verify svg { color: var(--color-icon-brand); flex: none; }
.stp-result[hidden] { display: none; }

/* Forms (About you, Medicare) -------------------------------------------------------------------------------- */
.stp-form .imd-field__label { font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: 16px; color: var(--color-text-heading); }
.stp-form .imd-input--sm { min-height: 52px; border-radius: 12px; }
.stp-form .imd-input--sm .imd-input__control { min-height: 50px; font-family: var(--font-body); font-weight: var(--weight-regular); font-size: 17px; }
.stp-form .imd-field__help { font-size: 13px; }
.stp-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.stp-seg__opt { position: relative; display: grid; place-items: center; min-height: 52px; padding: 0 var(--space-12); border: var(--stroke-input); border-radius: 12px; background: var(--color-surface-card); cursor: pointer; font-size: 16px; color: var(--color-text-heading); }
.stp-seg__opt:has(input:checked) { background: var(--color-surface-brand-tint, #e8f1fd); border: 2px solid var(--color-border-focus); }
.stp-seg__opt:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.stp-refusal { margin-top: var(--space-16); padding: var(--space-24); border-radius: 16px; border: var(--stroke-default); background: var(--color-surface-card); }
.stp-refusal[hidden], .stp-form[hidden] { display: none; }
.stp-summary-rows { margin: 0 0 var(--space-16); padding: var(--space-12) var(--space-16); background: var(--color-surface-subtle); border-radius: 12px; display: grid; gap: var(--space-8); font-size: 15px; }
.stp-summary-rows div { display: flex; justify-content: space-between; gap: var(--space-16); }
.stp-summary-rows dt { color: var(--color-text-support); }
.stp-summary-rows dd { margin: 0; font-weight: var(--weight-semibold); color: var(--color-text-heading); text-align: right; }
.stp-alert { display: flex; gap: var(--space-12); align-items: flex-start; margin-top: var(--space-16); padding: var(--space-16) var(--space-20); border-radius: 12px; border: var(--stroke-default); background: var(--color-surface-subtle); font-size: 15px; line-height: 1.45; color: var(--color-text-body); }
.stp-alert svg { flex: none; color: var(--color-icon-brand); margin-top: 2px; }
.stp-alert strong { display: block; font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 17px; color: var(--color-text-heading); margin-bottom: 4px; }
.stp-alert p { margin: 0 0 var(--space-8); }
.stp-alert[hidden] { display: none; }

/* Step 7: the booking card ------------------------------------------------------------------------------------- */
.stp-card { background: var(--color-surface-card); border: var(--stroke-default); border-radius: 16px; padding: var(--space-32); box-shadow: var(--shadow-sm); }
@media (max-width: 599px) { .stp-card { padding: var(--space-24) var(--space-20); } }
.stp-rule { border: 0; border-top: var(--stroke-divider); margin: var(--space-24) 0; }
.stp-coverage { display: flex; gap: var(--space-12); align-items: flex-start; padding: var(--space-20); border-radius: 12px; background: var(--color-surface-brand-tint, #e8f1fd); }
.stp-coverage__icon { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--color-button-primary-bg); color: #fff; }
.stp-coverage--pending .stp-coverage__icon { background: var(--color-text-heading); }
.stp-coverage strong { display: block; font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 17px; color: var(--color-text-heading); }
.stp-coverage p { margin: 2px 0 0; font-size: 14px; color: var(--color-text-body); }
.stp-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-8) var(--space-16); margin-bottom: var(--space-16); }
.stp-h2 { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 20px; color: var(--color-text-heading); margin: 0 0 var(--space-16); }
.stp-section-head .stp-h2 { margin: 0; }
.stp-tz { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); margin: 0; font-size: 14px; color: var(--color-text-support); }
.stp-tz svg { color: var(--color-icon-default); }
.stp-tz__select { min-height: 36px; border: var(--stroke-input); border-radius: 8px; padding: 0 var(--space-8); font: inherit; font-size: 14px; }
/* the day strip: five tabs across, the rest scroll sideways inside the card (day-strip.js adds the arrows) */
.stp-days { display: flex; gap: var(--space-12); margin-bottom: var(--space-16); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.stp-days::-webkit-scrollbar { display: none; }
.stp-days-wrap { position: relative; margin-bottom: var(--space-16); }
.stp-days-wrap .stp-days { margin-bottom: 0; }
.stp-days-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; border: var(--stroke-default); background: var(--color-surface-card); color: var(--color-text-heading); box-shadow: var(--shadow-sm); cursor: pointer; display: grid; place-items: center; padding: 0; z-index: 1; }
.stp-days-nav--prev { left: -14px; }
.stp-days-nav--next { right: -14px; }
.stp-days-nav[hidden] { display: none; }
.stp-days-nav:hover { border-color: var(--color-border-focus); }
.stp-days-nav:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.stp-day { flex: 0 0 calc((100% - 4 * var(--space-12)) / 5); scroll-snap-align: start; display: grid; gap: 2px; min-height: 64px; padding: var(--space-12); border: var(--stroke-default); border-radius: 12px; background: var(--color-surface-card); cursor: pointer; font-family: var(--font-body); text-align: center; }
.stp-day strong { font-size: 17px; color: var(--color-text-heading); font-weight: var(--weight-semibold); }
.stp-day span { font-size: 13px; color: var(--color-text-support); }
.stp-day.is-active { background: var(--color-surface-brand-tint, #e8f1fd); border: 2px solid var(--color-border-focus); }
.stp-day:focus-visible, .stp-time:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.stp-more { display: block; margin: calc(-1 * var(--space-8)) 0 var(--space-16); }
.stp-more[hidden] { display: none; }
.stp-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: var(--space-12) 10px; }
.stp-time { min-height: 48px; min-width: 0; padding: 0 var(--space-12); border-radius: 999px; text-align: center; white-space: nowrap; border: var(--stroke-default); background: var(--color-surface-card); font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: 16px; color: var(--color-text-heading); cursor: pointer; }
.stp-time:hover { border-color: var(--color-border-focus); }
.stp-time.is-active { background: var(--color-button-primary-bg); border-color: var(--color-button-primary-bg); color: #fff; }
.stp-loading { display: flex; justify-content: center; align-items: center; gap: var(--space-12); padding: var(--space-24) 0; color: var(--color-text-support); font-size: 15px; text-align: center; }
.stp-spinner { width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--color-bmi-track); border-top-color: var(--color-bmi-marker); animation: stp-spin .9s linear infinite; flex: none; }
@keyframes stp-spin { to { transform: rotate(360deg); } }
.stp-noavail { display: flex; gap: var(--space-12); align-items: flex-start; padding: var(--space-20); border: var(--stroke-default); border-radius: 12px; font-size: 15px; }
.stp-noavail svg { flex: none; color: var(--color-icon-brand); }
.stp-noavail strong { display: block; font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 17px; color: var(--color-text-heading); margin-bottom: 4px; }
.stp-noavail p { margin: 0 0 var(--space-8); }
.stp-noavail[hidden], [data-slots][hidden] { display: none; }
.stp-modality { display: grid; gap: var(--space-16); }
@media (min-width: 600px) { .stp-modality { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stp-mode { background: var(--color-bg-page); align-items: center; }
.stp-mode.is-error { border: 2px solid var(--color-border-error); }
.stp-mode__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-surface-brand-tint, #e8f1fd); color: var(--color-text-highlight); }
.stp-mode__text { display: grid; gap: 2px; }
.stp-mode__text strong { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 18px; color: var(--color-text-heading); }
.stp-mode__text span { font-size: 14px; color: var(--color-text-body); }
[data-contact][hidden] { display: none; }
.stp-summary { display: flex; gap: var(--space-12); align-items: center; margin: var(--space-24) 0 var(--space-16); padding: var(--space-16) var(--space-20); border-radius: 12px; background: var(--color-surface-subtle); font-size: 14px; color: var(--color-text-support); }
.stp-summary svg { flex: none; color: var(--color-icon-default); }
.stp-summary strong { display: block; font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: 15px; color: var(--color-text-support); }
.stp-summary.is-ready { background: var(--color-surface-brand-tint, #e8f1fd); }
.stp-summary.is-ready strong { color: var(--color-text-heading); font-weight: var(--weight-semibold); font-size: 16px; }
.stp-summary span[hidden] { display: none; }
.stp-summary[hidden] { display: none; }
.stp-summary[hidden] + [data-confirm] { margin-top: var(--space-24); }
.stp-privacy-wrap--card { margin-top: var(--space-24); }

/* Confirmation (6e / 6f) ------------------------------------------------------------------------------------------ */
.stp-confirmed { position: relative; text-align: center; padding: var(--space-32) 0 var(--space-24); }
.stp-confetti { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: min(600px, 100%); height: 300px; pointer-events: none; }
.stp-card--confirm { position: relative; }
.stp-clinician { display: flex; align-items: center; gap: var(--space-16); }
.stp-clinician__avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--color-surface-subtle); color: var(--color-button-primary-bg); display: flex; align-items: center; justify-content: center; flex: none; }   /* neutral care-team mark; no person pictured until the name is Conductor-sourced (2026-10-10) */
.stp-clinician strong { display: block; font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 20px; color: var(--color-text-heading); }
.stp-clinician span { font-size: 14px; color: var(--color-text-support); }
.stp-clinician .imd-eyebrow { margin-bottom: 2px; font-size: 12px; }
.stp-details { display: grid; gap: var(--space-20); margin: 0 0 var(--space-24); }
@media (min-width: 600px) { .stp-details { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stp-details > div { display: flex; gap: var(--space-14, 14px); align-items: flex-start; }
.stp-details__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-surface-brand-tint, #e8f1fd); color: var(--color-text-highlight); }
.stp-details dt { font-size: 13px; color: var(--color-text-support); }
.stp-details dd { margin: 2px 0 0; font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 17px; color: var(--color-text-heading); line-height: 1.3; }
.stp-joining { padding: var(--space-20); border-radius: 12px; background: var(--color-surface-subtle); margin-bottom: var(--space-24); }
.stp-joining strong { display: block; font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 18px; color: var(--color-text-heading); margin-bottom: 4px; }
.stp-joining p { margin: 0; font-size: 15px; }
.stp-ready { max-width: 700px; margin: var(--space-32) auto 0; }
.stp-ready strong { display: block; font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 20px; color: var(--color-text-heading); margin-bottom: var(--space-8); }
.stp-ready p { margin: 0; font-size: 16px; line-height: 1.5; }

/* Privacy card ------------------------------------------------------------------------------------------------------ */
.stp-privacy { margin-top: var(--space-24); padding: var(--space-20) var(--space-24); border: var(--stroke-default); border-radius: 16px; background: var(--color-surface-card); font-size: 14px; color: var(--color-text-support); }
.stp-privacy p { margin: 0; }
.stp-privacy__title { display: flex; align-items: center; gap: var(--space-8); font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 16px; color: var(--color-text-heading); margin-bottom: var(--space-8) !important; }
.stp-privacy hr { border: 0; border-top: var(--stroke-divider); margin: var(--space-16) 0; }
.stp-privacy img { height: 40px; width: auto; display: block; }

/* Support-call modal (5d / 5d-2 / 5e) --------------------------------------------------------------------------------- */
.stp-tag { display: inline-block; margin: calc(-1 * var(--space-8)) 0 var(--space-16); padding: 4px 12px; border-radius: 999px; background: var(--color-surface-brand-tint, #e8f1fd); color: var(--color-text-highlight); font-size: 13px; font-weight: var(--weight-semibold); }
.imd-modal__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-8); margin-top: var(--space-16); }
.imd-modal__actions .imd-btn + .imd-btn { margin-top: 0; }   /* the panel's stacked-button rule would offset the second button and stretch the first */
.imd-modal .stp-day { min-width: 80px; }
@media (max-width: 599px) { .stp-day { flex-basis: calc((100% - 2 * var(--space-12)) / 3); } }
.imd-modal .stp-times { justify-content: center; margin-bottom: var(--space-16); }
.stp-summary-rows--modal { text-align: left; }

/* Mobile (≤1199): the stack the 390 frames show -------------------------------------------------- */
@media (max-width: 1199px) {
  /* header: logo on its own row, then the doctor with both lines, a divider under it (frame 1a mobile) */
  .stp-header { border-bottom: var(--stroke-divider); }
  .stp-header__inner { flex-direction: column; align-items: flex-start; gap: var(--space-12); padding: var(--space-16) var(--space-24) var(--space-12); }
  .stp-doctor__text span { display: block; }
  /* back: a round icon button left of the step label, same row */
  .stp-top { position: relative; }
  .stp-top .stp-back { position: absolute; left: 0; top: -6px; width: 40px; height: 40px; min-height: 0; justify-content: center; border-radius: 999px; border: var(--stroke-default); background: var(--color-surface-card); margin: 0; font-size: 0; }
  .stp-top .stp-back span { font-size: 18px; }
  .stp-top .stp-back:not([hidden]) ~ .stp-progress { padding-left: 52px; }
  /* the Medicare card strip above the About-you and Medicare steps: text left, card right */
  .stp-visual--mobile .stp-visual__card--card { grid-template-columns: 1fr 120px; }
  .stp-visual--mobile .stp-visual__img--card { max-width: 120px; margin: 0; grid-column: 2; grid-row: 1 / span 2; }
  /* step 3: the measurement card stacks; "Your BMI" is one row with the value on the right */
  .stp-measure { padding: var(--space-20); gap: var(--space-16); }
  .stp-measure__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stp-measure__bmi { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12); padding-top: var(--space-8); border-top: var(--stroke-divider); }
  .stp-measure__value { font-size: 36px; }
  /* step 3: the band cards are a list — the matching band open with its blue cap, the others one collapsed row each */
  .stp-bands { gap: 0; margin: var(--space-24) 0; }
  .stp-band { position: relative; border-bottom: var(--stroke-divider); }
  .stp-band:not(.is-active) .stp-band__cap, .stp-band:not(.is-active) .stp-band__body { display: none; }
  .stp-band:not(.is-active) .stp-band__title { font-size: 18px; margin: var(--space-16) 44px var(--space-4) var(--space-16); }
  .stp-band:not(.is-active) .stp-band__sub { font-size: 15px; margin: 0 44px var(--space-16) var(--space-16); color: var(--color-text-body); font-weight: var(--weight-regular); }
  .stp-band__chevron { position: absolute; right: var(--space-16); top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--color-icon-default); border-bottom: 2px solid var(--color-icon-default); transform: translateY(-70%) rotate(45deg); }
  .stp-band.is-active { margin: var(--space-12) 0; border-bottom: 2px solid var(--color-border-focus); }
  .stp-band.is-active .stp-band__chevron { top: auto; bottom: var(--space-24); transform: rotate(-135deg); }
  .stp-band.is-active .stp-band__cap { height: 56px; padding: 0 var(--space-16); }
  .stp-band.is-active .stp-band__title { font-size: 20px; margin: var(--space-16) 44px var(--space-4) var(--space-16); }
  .stp-band.is-active .stp-band__sub { font-size: 16px; margin: 0 44px var(--space-8) var(--space-16); }
  .stp-band.is-active .stp-band__body { font-size: 15px; margin: 0 var(--space-16) var(--space-16); }
  /* booking: the summary and Confirm stay pinned at the bottom while the card scrolls (frame 6a mobile) */
  .stp-card [data-summary] { position: sticky; bottom: 68px; z-index: 5; margin-bottom: var(--space-8); }
  .stp-card [data-confirm] { position: sticky; bottom: var(--space-8); z-index: 5; }
}

/* the cash-pay payment step (2026-10-18): the checkout button clear of the list above it */
.stp-checkout { margin-top: var(--space-24, 24px); }

/* book first, verify on a call (2026-10-18): the checkbox under the Medicare number and its best-time picker */
/* booking first (BOOKING_FIRST, 2026-10-21): the held time and its countdown on the card step; the identity summary */
.stp-hold { display: flex; gap: var(--space-12); align-items: flex-start; margin: 0 0 var(--space-16); padding: var(--space-16) var(--space-20); border-radius: 12px; background: var(--color-surface-brand-tint, #e8f1fd); }
.stp-hold__icon { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--color-button-primary-bg); color: #fff; }
.stp-hold strong { display: block; font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 17px; color: var(--color-text-heading); }
.stp-hold p { margin: 2px 0 0; font-size: 14px; color: var(--color-text-body); }
.stp-hold__count { font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
.stp-hold.is-urgent .stp-hold__count { color: var(--color-text-error); }
.stp-hold[hidden] { display: none; }
.stp-identity { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-8) var(--space-16); margin: 0 0 var(--space-16); padding: var(--space-12) var(--space-16); background: var(--color-surface-subtle); border-radius: 12px; font-size: 15px; color: var(--color-text-body); }
.stp-identity[hidden] { display: none; }
.stp-callme { margin-top: var(--space-12); }
.stp-callme__detail { display: grid; gap: var(--space-8); margin: var(--space-12) 0 0; padding: var(--space-12) var(--space-16); background: var(--color-surface-subtle); border-radius: var(--radius-md); }
.stp-callme__detail .imd-field { margin: 0; }

/* the short path's height-and-weight step (Figma Main path 2a/2b, 2026-10-22): the scale in the side panel, the two groups
   side by side in their card, no BMI figure and no band cards */
.stp-visual__img--scale { max-width: 460px; margin: var(--space-40) auto auto; border-radius: 0; }
@media (min-width: 768px) { .stp-measure--short { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }
@media (max-width: 1023px) { .stp-visual--mobile .stp-visual__card--scale { grid-template-columns: 1fr 120px; } .stp-visual--mobile .stp-visual__img--scale { margin: 0; } }