/* ============================================================
   SUBSCRIPTIONS PROTOTYPE — clinical subscription (GLP-1) patient flow.
   PRD: "PRD: Subscriptions", Kate Zellmer, Sep 3 2026.

   SCOPE RULE, and it is the whole brief: these screens must look like Wheel's
   CURRENT PATIENT APP and nothing else. So this file adds as little as it can
   get away with — the flow is built from the app's own classes (card, card-pad,
   h1, muted, receipt, rx-card, kv, tl-*, status-pill, svc-*, big-check,
   next-steps, radio-row, toggle-row, btn) and every value below comes from
   patient-tokens.css. If a pattern already exists, it is NOT re-created here.

   What genuinely did not exist before:
     .subs-plan*      a plan card that has to hold a price, a term and a list
                      (.svc-card is a fixed 322x184 service tile, too small)
     .subs-alert*     a status-coloured banner (past due, refunded, paused).
                      .info-strip is the neutral one; billing states need
                      success / warning / danger, and those tokens are FIXED —
                      never brand-coloured, or a "payment failed" banner turns
                      Walgreens red on the Walgreens demo and reads as success.
     .subs-ent*       the entitlement strip ("authorized through Oct 3, 1 fill")
     .subs-map*       the concept map view, which is not a patient screen
   ============================================================ */

/* ---- Membership state card (Your care) ---------------------------------- */
.subs-state { display: flex; align-items: flex-start; gap: var(--s-4); padding: var(--s-5); background: var(--n-surface); border-radius: var(--r-card); box-shadow: var(--e-1); margin: var(--s-5) 0; }
.subs-state-body { flex: 1; min-width: 0; }
.subs-state-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.subs-state-title { display: block; font-size: var(--t-lg); line-height: var(--lh-lg); font-weight: var(--w-semi); color: var(--n-ink); }
.subs-state-sub { display: block; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--c-muted); margin-top: var(--s-1); }
.subs-state-actions { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); flex-wrap: wrap; }

/* ---- Plan chooser ------------------------------------------------------- */
.subs-plan-grid { display: grid; gap: var(--s-3); margin: var(--s-4) 0 var(--s-2); }
.subs-plan { display: grid; grid-template-columns: 22px 1fr auto; gap: var(--s-4); align-items: start; width: 100%; text-align: left; padding: var(--s-4) var(--s-5); background: var(--n-surface); border: 1px solid var(--n-line-2); border-radius: var(--r-card); cursor: pointer; }
.subs-plan:hover { background: var(--n-hover); }
.subs-plan.is-on { border-color: var(--c-primary); box-shadow: inset 0 0 0 1px var(--c-primary); }
.subs-plan-radio { width: 20px; height: 20px; margin-top: 2px; border-radius: var(--r-round); border: 1.5px solid var(--n-line-input); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px; }
.subs-plan.is-on .subs-plan-radio { border-color: var(--c-primary); background: var(--c-primary); color: var(--n-surface); }
.subs-plan-name { display: block; font-size: var(--t-md); line-height: var(--lh-md); font-weight: var(--w-semi); color: var(--n-ink); }
.subs-plan-desc { display: block; font-size: var(--t-sm); line-height: var(--lh-snug); color: var(--c-muted); margin-top: var(--s-1); }
.subs-plan-price { text-align: right; white-space: nowrap; }
.subs-plan-amount { display: block; font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: var(--w-semi); color: var(--n-ink); }
.subs-plan-per { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--c-muted); }
.subs-plan-tag { display: inline-flex; align-items: center; padding: 2px var(--s-2); margin-top: var(--s-1); border-radius: var(--r-pill); background: var(--st-info-soft); color: var(--st-info); font-size: var(--t-xs); font-weight: var(--w-semi); }

/* ---- Included list ----------------------------------------------------- */
.subs-incl { display: flex; flex-direction: column; gap: var(--s-3); margin: var(--s-3) 0 0; }
.subs-incl-row { display: grid; grid-template-columns: 20px 1fr; gap: var(--s-3); align-items: start; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--n-ink-2); }
.subs-incl-row .material-icons-round { color: var(--st-success); font-size: var(--t-lg); }

/* ---- Status banners. Status colours are fixed on purpose. --------------- */
.subs-alert { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-3); align-items: start; padding: var(--s-4); border-radius: var(--r-md); font-size: var(--t-sm); line-height: var(--lh-sm); margin: var(--s-4) 0; }
.subs-alert .material-icons-round { font-size: var(--t-xl); }
.subs-alert-t { display: block; font-weight: var(--w-semi); margin-bottom: 2px; }
.subs-alert.is-danger { background: var(--st-danger-soft); color: var(--n-ink); }
.subs-alert.is-danger .material-icons-round { color: var(--st-danger); }
.subs-alert.is-warning { background: var(--st-warning-soft); color: var(--n-ink); }
.subs-alert.is-warning .material-icons-round { color: var(--st-warning); }
.subs-alert.is-success { background: var(--st-success-soft); color: var(--n-ink); }
.subs-alert.is-success .material-icons-round { color: var(--st-success); }
.subs-alert.is-info { background: var(--st-info-soft); color: var(--n-ink); }
.subs-alert.is-info .material-icons-round { color: var(--st-info); }

/* ---- Entitlement strip: decision B, order-release gating ---------------- */
.subs-ent { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--s-4); background: var(--n-well); border-radius: var(--r-md); margin-top: var(--s-3); flex-wrap: wrap; }
/* Sentence case, at the patient app's own small-label size. It was 13px all-caps with tracking —
   the generated-design tell CLAUDE.md's standing rule now forbids. */
.subs-ent-k { display: block; font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: var(--w-medium); color: var(--c-muted); }
.subs-ent-v { font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: var(--w-medium); color: var(--n-ink); }

/* ---- Retry schedule ---------------------------------------------------- */
.subs-retry { display: flex; flex-direction: column; gap: 0; margin: var(--s-3) 0 var(--s-2); }
.subs-retry-row { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--n-line-3); font-size: var(--t-sm); line-height: var(--lh-sm); }
.subs-retry-row:last-child { border-bottom: none; }
.subs-retry-when { color: var(--c-muted); }
.subs-retry-state { font-weight: var(--w-medium); }

/* ---- Concept map. Not a patient screen, and not a document either. ---------
   The type was one step too small everywhere: it inherited the patient app's
   reading sizes, but this is a wall chart read across a table, so the whole ramp
   moves up. Titles carry the structure, the one-line summaries are body copy at
   16, and the requirement rows (the only genuinely reference-grade text here) sit
   at 14 rather than 13. Nothing is below --t-sm now. */
.subs-map { padding: var(--s-8) var(--s-5) var(--s-12); max-width: var(--w-shell); margin: 0 auto; }
.subs-map-h { font-size: var(--t-hero); line-height: var(--lh-tight); font-weight: var(--w-semi); letter-spacing: -0.02em; color: var(--n-ink); margin: 0; }
.subs-map-lede { font-size: var(--t-xl); line-height: var(--lh-snug); color: var(--n-ink-2); margin: var(--s-3) 0 var(--s-5); max-width: 56ch; }
.subs-map-bar { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-6); }
.subs-map-all { padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); background: var(--n-band); color: var(--n-ink); font-size: var(--t-sm); font-weight: var(--w-semi); }
.subs-map-all:hover { background: var(--n-pressed); }
.subs-map-all.is-on { background: var(--n-ink); color: var(--n-surface); }
.subs-map-key { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.subs-map-key-i { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--n-ink-2); }
.subs-map-dot { width: 10px; height: 10px; border-radius: var(--r-round); flex: 0 0 10px; }
.subs-phase { margin-bottom: var(--s-8); }
.subs-phase-h { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.subs-phase-n { width: 30px; height: 30px; border-radius: var(--r-round); background: var(--c-primary); color: var(--n-surface); font-size: var(--t-sm); font-weight: var(--w-bold); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; }
.subs-phase-t { font-size: var(--t-2xl); line-height: var(--lh-2xl); font-weight: var(--w-semi); color: var(--n-ink); }
.subs-map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--s-4); }
.subs-map-card { display: flex; flex-direction: column; padding: var(--s-5); background: var(--n-surface); border-radius: var(--r-card); box-shadow: var(--e-1); text-align: left; }
.subs-map-card-t { font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: var(--w-semi); color: var(--n-ink); }
.subs-map-card-p { font-size: var(--t-md); line-height: var(--lh-snug); color: var(--n-ink-2); margin: var(--s-2) 0 0; }
.subs-map-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-4); }
.subs-map-open { display: inline-flex; align-items: center; gap: 3px; font-size: var(--t-sm); font-weight: var(--w-semi); color: var(--c-primary); }
.subs-map-toggle { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-2); margin-right: calc(var(--s-2) * -1); border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: var(--w-medium); color: var(--c-muted); }
.subs-map-toggle:hover { background: var(--n-hover); color: var(--n-ink); }
.subs-map-req { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--n-line-3); }
.subs-map-req-row { display: grid; grid-template-columns: 12px 1fr auto; gap: var(--s-3); align-items: start; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--n-ink-2); }
.subs-map-req-row .subs-map-dot { margin-top: 5px; }
.subs-map-pri { font-size: var(--t-sm); font-weight: var(--w-semi); color: var(--c-muted); white-space: nowrap; }

/* The three decisions are the headline of this view, so they are sized like one. */
.subs-decision { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-4); align-items: start; padding: var(--s-5) var(--s-6); background: var(--n-well); border-radius: var(--r-card); margin-bottom: var(--s-3); }
.subs-decision-tag { width: 34px; height: 34px; border-radius: var(--r-round); background: var(--c-primary); color: var(--n-surface); font-size: var(--t-lg); font-weight: var(--w-bold); display: inline-flex; align-items: center; justify-content: center; }
.subs-decision-q { display: block; font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: var(--w-semi); color: var(--n-ink); }
.subs-decision-a { display: block; font-size: var(--t-lg); line-height: var(--lh-snug); color: var(--n-ink-2); margin-top: var(--s-1); }

/* ---- Prototype top bar (chrome, not a patient surface) ----------------- */
.subs-top { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-5); background: var(--n-surface); border-bottom: 1px solid var(--n-line-2); position: sticky; top: 0; z-index: 40; flex-wrap: wrap; }
.subs-top-name { font-size: var(--t-sm); font-weight: var(--w-semi); color: var(--n-ink); }
.subs-top-views { display: inline-flex; gap: 2px; padding: 3px; background: var(--n-band); border-radius: var(--r-pill); }
.subs-top-view { padding: 6px var(--s-4); border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: var(--w-medium); color: var(--n-ink-2); }
.subs-top-view.is-on { background: var(--n-surface); color: var(--n-ink); box-shadow: var(--e-1); }
.subs-top-right { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s-3); }
.subs-top-step { font-size: var(--t-sm); color: var(--c-muted); white-space: nowrap; }
.subs-top-arrows { display: inline-flex; gap: 2px; }
.subs-top-arrows button { width: 32px; height: 32px; border-radius: var(--r-md); background: var(--n-band); color: var(--n-ink); font-size: var(--t-lg); line-height: 1; }
.subs-top-arrows button:disabled { opacity: 0.4; }
.subs-brand-pick { display: inline-flex; gap: 2px; padding: 3px; background: var(--n-band); border-radius: var(--r-pill); }
.subs-brand-btn { padding: 5px var(--s-3); border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: var(--w-semi); color: var(--n-ink-2); }
.subs-brand-btn.is-on { background: var(--n-surface); color: var(--n-ink); box-shadow: var(--e-1); }

/* ---- Clinician view: the EMR's own look, not the patient system -------- */
/* Renders in the demo's own font on purpose. The live clinician screen sets Source Sans Pro, but
   that face is not loaded in this document — declaring it here fell through to Inter anyway while
   the comment claimed the screen wore the EMR's type. Two structural cues (blue bar, bordered
   section cards) carry the "this is the clinician product" signal instead. */


/* ============================================================================
   PATHWAY (.pw-*) — the seven clinical programs, catalog + per-program flow.
   Everything here is a patient surface, so it is built from the app's own card,
   list, receipt and pill patterns; these rules add only the catalog grid, the
   program card and the status chip, which had no equivalent.
   ============================================================================ */

.pw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: var(--s-3); margin-top: var(--s-5); }

.pw-card {
  display: flex; flex-direction: column; gap: var(--s-2); width: 100%; text-align: left;
  padding: var(--s-4); background: var(--n-surface); border-radius: var(--r-card);
  box-shadow: var(--e-1); cursor: pointer;
}
.pw-card:hover { background: var(--n-hover); }
/* A closed program stays legible and stays tappable — the reason it is closed is the
   most useful thing on the card, so it must not be greyed into unreadability. */
.pw-card.is-closed { box-shadow: none; border: 1px solid var(--n-line-2); }
.pw-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.pw-card-ic {
  width: 34px; height: 34px; border-radius: var(--r-md); flex: 0 0 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-soft); color: var(--c-primary);
}
.pw-card-ic .material-icons-round { font-size: var(--t-xl); }
.pw-card-name { display: block; font-size: var(--t-md); line-height: var(--lh-md); font-weight: var(--w-semi); color: var(--n-ink); margin-top: var(--s-1); }
.pw-card-tag { display: block; font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--c-muted); }
.pw-card-blurb { display: block; font-size: var(--t-sm); line-height: var(--lh-snug); color: var(--n-ink-2); text-wrap: pretty; }
.pw-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-2); flex-wrap: wrap; }
.pw-card-price { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--n-ink); }
.pw-card-price strong { font-weight: var(--w-semi); }
.pw-card-go { display: inline-flex; align-items: center; gap: 2px; font-size: var(--t-xs); font-weight: var(--w-semi); color: var(--c-primary); white-space: nowrap; }

/* Launch status. Fixed status colours, never brand-coloured: a closed program painted
   var(--c-primary) reads as available on Wheel green, which is the opposite of the fact. */
.pw-chip {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
  padding: 2px var(--s-2); border-radius: var(--r-pill);
  font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: var(--w-semi);
  color: var(--n-ink); white-space: nowrap;
}
.pw-chip.is-open { background: var(--st-success-soft); }
.pw-chip.is-limited { background: var(--st-warning-soft); }
.pw-chip.is-closed { background: var(--st-danger-soft); }

.pw-hero { display: flex; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-4); }
.pw-hero-ic {
  width: 46px; height: 46px; border-radius: var(--r-md); flex: 0 0 46px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-soft); color: var(--c-primary);
}
.pw-hero-ic .material-icons-round { font-size: var(--t-2xl); }
.pw-hero-name { display: block; font-size: var(--t-2xl); line-height: var(--lh-2xl); font-weight: var(--w-semi); color: var(--n-ink); }
.pw-hero-row { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); flex-wrap: wrap; }


/* ---- Pathway: program detail ------------------------------------------- */
/* The back link is navigation, the hero is content. They were 4px apart, which read as one
   block and put "All programs" inside the program's own title area. */
.pw-detail .back-link { margin-bottom: var(--s-6); }
.pw-hero { margin-bottom: var(--s-4); }

/* The description carries the decision, so it is set as body copy at reading measure rather
   than as the muted caption the catalog blurb uses. */
.pw-why { font-size: var(--t-md); line-height: var(--lh-body); color: var(--n-ink-2); margin: 0 0 var(--s-5); max-width: 62ch; text-wrap: pretty; }

/* What a membership actually covers — four facts a patient compares between programs. As .kv
   rows these were 13px labels in a 190px column against small ink, which is a data table, not a
   summary. Now: an icon, a real label, and the value at body size. */
.pw-spec { display: flex; flex-direction: column; gap: var(--s-1); margin: var(--s-3) 0 0; }
.pw-spec-row {
  display: grid; grid-template-columns: 34px 1fr; gap: var(--s-3); align-items: start;
  padding: var(--s-4) 0; border-bottom: 1px solid var(--n-line-3);
}
.pw-spec-row:last-child { border-bottom: none; }
.pw-spec-ic {
  width: 34px; height: 34px; border-radius: var(--r-round); flex: 0 0 34px;
  background: var(--c-soft); color: var(--c-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.pw-spec-ic .material-icons-round { font-size: var(--t-lg); }
.pw-spec-k { display: block; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--c-muted); margin-bottom: 2px; }
.pw-spec-v { display: block; font-size: var(--t-md); line-height: var(--lh-md); font-weight: var(--w-medium); color: var(--n-ink); text-wrap: pretty; }

/* ---- Pathway: payment ------------------------------------------------- */
/* Sentence case at heading size, matching the card's other section heads. */
.pw-manage-h { font-size: var(--t-md); line-height: var(--lh-md); font-weight: var(--w-semi); color: var(--n-ink); margin: 0 0 var(--s-1); }
.pw-manage-sub { margin: 0 0 var(--s-4) !important; }

.pw-pay-h { font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: var(--w-semi); color: var(--n-ink); margin: var(--s-5) 0 var(--s-3); }
.pw-pay-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.pw-card-brand { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--c-muted); margin-top: var(--s-2); }

/* ---- Pathway: the enrolled screen ------------------------------------- */
/* Left-aligned, not centred: a membership record is reference material the patient comes back
   to, and centring it made the price and the dates the least readable things on the screen. */
.pw-live { display: flex; flex-direction: column; gap: var(--s-5); }
.pw-live-top { display: flex; align-items: flex-start; gap: var(--s-4); }
.pw-live-ic {
  width: 46px; height: 46px; border-radius: var(--r-round); flex: 0 0 46px;
  background: var(--st-success-soft); color: var(--st-success);
  display: inline-flex; align-items: center; justify-content: center;
}
.pw-live-ic .material-icons-round { font-size: var(--t-2xl); }
.pw-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-4); padding: var(--s-4); background: var(--n-well); border-radius: var(--r-md); }
.pw-fact-k { display: block; font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--c-muted); margin-bottom: 2px; }
.pw-fact-v { display: block; font-size: var(--t-md); line-height: var(--lh-md); font-weight: var(--w-semi); color: var(--n-ink); }

/* ---- Subscriptions hub (the nav tab) --------------------------------- */
.pw-mine { display: flex; flex-direction: column; gap: var(--s-3); margin: var(--s-4) 0 var(--s-6); }
.pw-mine-row {
  display: grid; grid-template-columns: 40px 1fr auto; gap: var(--s-4); align-items: center;
  padding: var(--s-4) var(--s-5); background: var(--n-surface);
  border-radius: var(--r-card); box-shadow: var(--e-1);
}
.pw-mine-ic {
  width: 40px; height: 40px; border-radius: var(--r-round); flex: 0 0 40px;
  background: var(--c-soft); color: var(--c-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.pw-mine-name { display: block; font-size: var(--t-md); line-height: var(--lh-md); font-weight: var(--w-semi); color: var(--n-ink); }
.pw-mine-meta { display: block; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--c-muted); margin-top: 2px; }
.pw-mine-act { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 620px) {
  .pw-mine-row { grid-template-columns: 40px 1fr; }
  .pw-mine-act { grid-column: 2; justify-content: flex-start; }
}


/* ---- Membership-state control (prototype chrome, on a record only) ------ */
.subs-state-pick {
  padding: 5px var(--s-3); border-radius: var(--r-pill);
  border: 1px solid var(--n-line-2); background: var(--n-surface);
  font-family: inherit; font-size: var(--t-xs); font-weight: var(--w-semi);
  color: var(--n-ink); cursor: pointer;
}

/* ---- State tones on the record ----------------------------------------
   Status colours are FIXED, never brand-coloured: a past-due badge running
   through var(--c-primary) turns green on Wheel, which reads as success on the
   one screen in this prototype where failure is the point. */
.pw-live-ic.is-danger { background: var(--st-danger-soft); color: var(--st-danger); }
.pw-live-ic.is-warning { background: var(--st-warning-soft); color: var(--st-warning); }
.pw-live-ic.is-muted { background: var(--n-well); color: var(--c-muted); }
.status-pill.is-danger { background: var(--st-danger-soft); color: var(--n-ink); }
.status-pill.is-warning { background: var(--st-warning-soft); color: var(--n-ink); }
.status-pill.is-muted { background: var(--n-well); color: var(--n-ink); }

.subs-top-stategrp { display: inline-flex; align-items: center; gap: var(--s-3); }
/* The manage block is a flex child of .pw-live, so its wrapper has to carry the column too or
   the divider and the button stack lose the list's rhythm. */
.pw-manage-wrap { display: flex; flex-direction: column; gap: var(--s-5); }


/* Promo row on the plan chooser: field and Apply on one line, the button aligned to the input
   rather than to its label. */
.pw-promo { display: flex; gap: var(--s-3); align-items: flex-start; }
.pw-promo-f { flex: 1 1 auto; min-width: 0; }
.pw-promo-b { flex: 0 0 auto; margin-top: 26px; }

/* The standalone subscription sits above Pathway's seven, with its own heading, because it is a
   different KIND of offer: a term to choose rather than a program to join. */
.pw-group-h { font-size: var(--t-lg); line-height: var(--lh-lg); font-weight: var(--w-semi); color: var(--n-ink); margin: var(--s-6) 0 var(--s-1); }
.pw-group-p { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--c-muted); margin: 0 0 var(--s-3); }


/* The clinician view is the real EMR capture in an iframe, so this is geometry only — the
   captured page owns everything inside it. Full height because a chart is a scrolling document,
   and boxing it would make a presenter scroll two things at once. */
.subs-chart { height: calc(100vh - 116px); min-height: 520px; background: var(--n-canvas); }
.subs-chart-frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }


/* ==========================================================================
   GAMERSUPPS EXAMPLE (.gs-*). A DIFFERENT COMPANY'S SITE, so it is deliberately
   off the patient design system: GamerSupps' own dark surface and acid-green
   accent, not Wheel green through var(--c-primary). Same reasoning as
   styles-captured.css — a partner surface is captured or chosen by the partner,
   not inherited from us. Geometry still uses the token scale so it sits inside
   the same shell without fighting it.
   ========================================================================== */
/* min-height in VIEWPORT units, not percent. `100%` resolved against an ancestor chain with no
   definite height, so it collapsed to content height and the white patient-app background showed
   through below the dark ground on any window taller than the content — which is every laptop.
   The 60px is the prototype's own top bar, hoisted to a variable so it stays one edit. */
.gs-shell { --gs-topbar: 60px; display: flex; flex-direction: column; min-height: calc(100vh - var(--gs-topbar)); background: var(--gs-ink); }
/* The step screens take the leftover height so a short card centres in the ground instead of
   hugging the top. `margin: auto` rather than align-items: center — auto margins centre without
   clipping when the content is taller than the box. */
.gs-page { flex: 1 1 auto; }
.gs-card { margin: auto; }
/* Marketing is full-bleed and owns its own vertical rhythm, so it fills rather than centres.
   The footer is pushed to the bottom with margin-top:auto, so a tall window puts the dark ground
   between the strip and the footer rather than under everything. */
.gs-mk { flex: 1 0 auto; display: flex; flex-direction: column; }
/* `width: 100%` is the load-bearing half here. Several children carry `margin: 0 auto` to centre
   themselves, and **auto margins on the cross axis disable stretch** — so once .gs-mk became a
   flex column they stopped filling it and shrink-to-fit to their max-content instead. The strip is
   an auto-fit grid, so its max-content is all four tracks at 210px plus gaps and padding: 948px,
   against a 909px window, i.e. 39px of horizontal page overflow that display:block had been
   clamping away. With an explicit 100% it resolves against the container and auto-fit drops to
   three tracks. min-width:0 guards the same children against their min-content for the same
   reason. */
.gs-mk > * { min-width: 0; width: 100%; }
.gs-mk-foot { margin-top: auto; padding: var(--s-8) var(--s-6) var(--s-6); border-top: 1px solid var(--gs-line); }
.gs-mk-foot-in { display: flex; gap: var(--s-8); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; max-width: 900px; margin: 0 auto; }
.gs-mk-foot-cols { display: flex; gap: var(--s-8); flex-wrap: wrap; }
.gs-mk-foot-col { display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--gs-text-2); }
.gs-mk-foot-col b { color: var(--gs-text); font-weight: var(--w-semi); }
.gs-mk-foot-legal { max-width: 900px; margin: var(--s-6) auto 0; padding-top: var(--s-4); border-top: 1px solid var(--gs-line); font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--gs-text-3); }

/* ---- marketing entry ---- */
.gs-mk-bar { display: flex; align-items: center; gap: var(--s-6); padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--gs-line); }
.gs-mk-word { font-size: var(--t-lg); font-weight: var(--w-bold); letter-spacing: -0.02em; color: var(--gs-accent); }
.gs-mk-nav { display: flex; gap: var(--s-5); margin-left: auto; font-size: var(--t-sm); color: var(--gs-text-3); }
.gs-mk-nav .is-on { color: var(--gs-text); font-weight: var(--w-semi); }

.gs-mk-hero { max-width: 720px; margin: 0 auto; padding: var(--s-12) var(--s-6) var(--s-8); text-align: center; }
.gs-mk-eyebrow { font-size: var(--t-sm); font-weight: var(--w-semi); color: var(--gs-accent); margin-bottom: var(--s-3); }
/* The one literal the drift count flagged in this sheet. The .gs-* block owns its PALETTE, not
   its type scale — everything else in it already draws on the shared steps and weights — so a
   lone 40/46 was drift rather than a partner decision. --t-hero has no --lh partner, hence the
   ratio. */
.gs-mk-h1 { margin: 0 0 var(--s-4); font-size: var(--t-hero); line-height: 1.1; font-weight: var(--w-bold); letter-spacing: -0.03em; color: var(--gs-text); text-wrap: pretty; }
.gs-mk-sub { margin: 0 auto var(--s-6); max-width: 52ch; font-size: var(--t-lg); line-height: var(--lh-body); color: var(--gs-text-2); text-wrap: pretty; }
.gs-mk-cta { padding: var(--s-4) var(--s-8); border: none; border-radius: var(--r-pill); background: var(--gs-brand); color: var(--gs-on-brand); font-family: inherit; font-size: var(--t-md); font-weight: var(--w-bold); cursor: pointer; }
.gs-mk-cta:hover { background: var(--gs-brand-hover); }
.gs-mk-fine { margin: var(--s-5) auto 0; max-width: 48ch; font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--gs-text-3); }

.gs-mk-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s-5); max-width: 960px; margin: 0 auto; padding: 0 var(--s-6) var(--s-12); }
.gs-mk-strip-i { display: grid; grid-template-columns: 22px 1fr; grid-template-areas: "i t" ". d"; gap: 2px var(--s-3); font-size: var(--t-sm); line-height: var(--lh-sm); }
.gs-mk-strip-i .material-icons-round { grid-area: i; font-size: var(--t-xl); color: var(--gs-accent); }
.gs-mk-strip-i b { grid-area: t; color: var(--gs-text); font-weight: var(--w-semi); }
.gs-mk-strip-i span:last-child { grid-area: d; color: var(--gs-text-3); }

/* ---- the flow ---- */
/* Symmetric block padding: `margin: auto` centres within the CONTENT box, so the old
   32-top / 48-bottom offset the card by 16px on a tall window. */
.gs-page { display: flex; justify-content: center; padding: var(--s-8) var(--s-4); }
.gs-card { width: 100%; max-width: 460px; padding: var(--s-6); background: var(--gs-surface); border: 1px solid var(--gs-line); border-radius: var(--r-card); }
.gs-back { margin-bottom: var(--s-4); border: none; background: none; padding: 0; color: var(--gs-text-3); font-family: inherit; font-size: var(--t-sm); cursor: pointer; }
.gs-back:hover { color: var(--gs-text); }
.gs-h2 { margin: 0 0 var(--s-2); font-size: var(--t-2xl); line-height: var(--lh-2xl); font-weight: var(--w-semi); color: var(--gs-text); }
.gs-sub { margin: 0 0 var(--s-5); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--gs-text-2); }

.gs-q { margin-bottom: var(--s-5); }
.gs-q-t { font-size: var(--t-md); line-height: var(--lh-md); color: var(--gs-text); margin-bottom: var(--s-3); text-wrap: pretty; }
.gs-q-opts { display: flex; gap: var(--s-2); }
.gs-opt { flex: 1; padding: var(--s-3); border: 1px solid var(--gs-line-strong); border-radius: var(--r-md); background: transparent; color: var(--gs-text-2); font-family: inherit; font-size: var(--t-sm); font-weight: var(--w-medium); cursor: pointer; }
.gs-opt.is-on { border-color: var(--gs-accent); background: color-mix(in srgb, var(--gs-accent) 12%, transparent); color: var(--gs-text); }

.gs-plan { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); width: 100%; margin-bottom: var(--s-3); padding: var(--s-4); border: 1px solid var(--gs-line-strong); border-radius: var(--r-md); background: transparent; text-align: left; cursor: pointer; }
.gs-plan.is-on { border-color: var(--gs-accent); background: color-mix(in srgb, var(--gs-accent) 10%, transparent); }
.gs-plan-l { display: flex; flex-direction: column; gap: 2px; }
.gs-plan-l b { font-size: var(--t-md); font-weight: var(--w-semi); color: var(--gs-text); }
.gs-plan-l span { font-size: var(--t-xs); color: var(--gs-text-3); }
.gs-plan-tag { align-self: flex-start; margin-top: var(--s-1); padding: 1px var(--s-2); border-radius: var(--r-pill); background: var(--gs-accent); color: var(--gs-ink); font-size: var(--t-xs); font-weight: var(--w-bold); font-style: normal; }
.gs-plan-p { flex: 0 0 auto; font-size: var(--t-xl); font-weight: var(--w-semi); color: var(--gs-text); }
.gs-plan-p i { font-size: var(--t-sm); font-weight: var(--w-regular); font-style: normal; color: var(--gs-text-3); }

.gs-incl { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-5) 0; }
.gs-incl-i { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--gs-text-2); }
.gs-incl-i .material-icons-round { font-size: var(--t-md); color: var(--gs-accent); }

.gs-cta { width: 100%; margin-top: var(--s-4); padding: var(--s-4); border: none; border-radius: var(--r-pill); background: var(--gs-brand); color: var(--gs-on-brand); font-family: inherit; font-size: var(--t-md); font-weight: var(--w-bold); cursor: pointer; }
.gs-cta:disabled { background: var(--gs-disabled); color: var(--gs-text-3); cursor: default; }
.gs-cta-ghost { background: transparent; border: 1px solid var(--gs-line-strong); color: var(--gs-text-2); }

/* ---- Stripe Payment Element's shape: express buttons, divider, one bordered
       card block with a split expiry/CVC row. Payment only, per Kate. ---- */
.gs-pay-h { font-size: var(--t-sm); font-weight: var(--w-semi); color: var(--gs-text-3); }
.gs-pay-amt { font-size: var(--t-3xl); line-height: var(--lh-3xl); font-weight: var(--w-semi); color: var(--gs-text); margin-bottom: var(--s-5); }
.gs-pay-amt span { font-size: var(--t-sm); font-weight: var(--w-regular); color: var(--gs-text-3); }
.gs-express { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.gs-apay, .gs-gpay { padding: var(--s-4); border: none; border-radius: var(--r-md); font-family: inherit; font-size: var(--t-md); font-weight: var(--w-semi); cursor: pointer; }
/* Apple and Google chrome, not the partner palette: these stay literal on purpose. */
.gs-apay { background: #FFFFFF; color: #000000; }
.gs-apay::before { content: "\uF8FF "; }
.gs-gpay { background: #FFFFFF; color: #3C4043; }
.gs-gpay::before { content: "G "; font-weight: var(--w-bold); }
.gs-or { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-5) 0; font-size: var(--t-xs); color: var(--gs-text-3); }
.gs-or::before, .gs-or::after { content: ""; flex: 1; height: 1px; background: var(--gs-disabled); }
.gs-field-wrap { cursor: text; }
.gs-field-l { font-size: var(--t-xs); font-weight: var(--w-medium); color: var(--gs-text-2); margin: 0 0 var(--s-2); }
.gs-field-block { border: 1px solid var(--gs-line-strong); border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--s-4); }
.gs-field-split { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--gs-line-strong); }
.gs-field-split .gs-inp + .gs-inp { border-left: 1px solid var(--gs-line-strong); }
.gs-inp { width: 100%; box-sizing: border-box; padding: var(--s-3) var(--s-4); border: none; background: var(--gs-field); color: var(--gs-text); font-family: inherit; font-size: var(--t-md); outline: none; }
.gs-inp::placeholder { color: var(--gs-text-3); }
.gs-inp-solo { border: 1px solid var(--gs-line-strong); border-radius: var(--r-md); }
.gs-stripe { margin-top: var(--s-4); text-align: center; font-size: var(--t-xs); color: var(--gs-text-3); }
.gs-stripe b { color: var(--gs-text-2); letter-spacing: -0.02em; }

/* ---- queue: the beat between paying and being seen ---- */
.gs-tick { width: 46px; height: 46px; margin-bottom: var(--s-4); border-radius: var(--r-round); background: color-mix(in srgb, var(--gs-accent) 14%, transparent); display: flex; align-items: center; justify-content: center; }
.gs-tick .material-icons-round { color: var(--gs-accent); font-size: var(--t-2xl); }
.gs-queue { display: flex; flex-direction: column; gap: 0; margin: var(--s-5) 0; }
.gs-queue-r { display: grid; grid-template-columns: 14px 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--gs-line); font-size: var(--t-sm); }
.gs-queue-r:last-child { border-bottom: none; }
.gs-queue-r b { font-weight: var(--w-medium); color: var(--gs-text-2); }
.gs-queue-r span:last-child { color: var(--gs-text-3); font-size: var(--t-xs); }
.gs-queue-d { width: 9px; height: 9px; border-radius: var(--r-round); background: var(--gs-line-strong); }
.gs-queue-r.is-done .gs-queue-d { background: var(--gs-accent); }
.gs-queue-r.is-done b { color: var(--gs-text); }
.gs-queue-r.is-now .gs-queue-d { background: var(--gs-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gs-accent) 18%, transparent); }
.gs-queue-r.is-now b { color: var(--gs-text); font-weight: var(--w-semi); }

.gs-pill { display: inline-flex; padding: 3px var(--s-3); border-radius: var(--r-pill); background: color-mix(in srgb, var(--gs-accent) 14%, transparent); color: var(--gs-accent); font-size: var(--t-xs); font-weight: var(--w-semi); }
.gs-kv { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3) var(--s-5); margin: var(--s-5) 0 0; font-size: var(--t-sm); }
.gs-kv span { color: var(--gs-text-3); }
.gs-kv b { color: var(--gs-text); font-weight: var(--w-medium); }