/* ============================================================================
   NEW PATIENT REBRAND — the Oct 2026 brand system, scoped to .rebrand-scope

   WHAT THIS IS. The new-patient flow rebuilt on wheel-brand-system.html: the
   Wheel masterbrand refresh, light-first, Manrope + DM Sans, Wheel Blue owning
   software and action, Deep Forest carrying trust, Wheel Lime as activation
   only. Source of truth is reference/brand-2026-10/pathway-brand-guidelines.pdf;
   the rendered reference is wheel-brand-system.html.

   Every rule starts with `.rebrand-scope`. The sheet loads after the patient
   stylesheets, so a scoped rule of equal specificity wins without !important,
   nothing here can reach the sales demo, and nothing in the sales demo's sheets
   needed touching to do this.

   ── WHAT IS DELIBERATELY NOT REBRANDED ────────────────────────────────────
   The partner surfaces inside this flow. CLEAR's identity check (.clrv2-*,
   .cnu-*), Apple Pay's sheet (.apay-*), Walmart (.wm-*), b.well, and the EMR
   (.cli-*, .cem-*) are recreations of OTHER companies' products that happen to
   appear inside a Wheel journey. Rebranding Wheel does not rebrand CLEAR, and a
   Barely Green Apple Pay sheet would be a worse demo, not a bolder one. That
   boundary is already a file boundary — those classes live in
   styles-captured.css, Wheel's own live in styles-patient.css and flow-v2.css —
   and this sheet respects it exactly.

   Status colors are also untouched. --st-danger and friends are fixed project
   wide, because a payment-failure banner painted in the brand's action color
   reads as success. The brand's own guardrails agree: color identifies the
   speaker and the active moment, not the outcome of a transaction.

   ── THE FIVE DECISIONS A READER WILL WANT EXPLAINED ───────────────────────
   1. CANVAS. White → Barely Green #F6F8F3, cards → Paper #FCFDF9. "Light-first"
      is the brand's core instruction and the biggest single change here.
   2. TYPE. Inter → Manrope for display and DM Sans for interface. The SIZE
      ramp stays the product's (13/14/16/18/20/24/28), because the brand's
      50–76px hero is a marketing instruction and an intake form is not a hero.
      What changes is family, weight (Manrope 500, not 600) and tracking.
   3. ACTION. Wheel Green → Wheel Blue #3657FF. The brand assigns Blue to
      "software, selection, intelligence, primary action" explicitly. Green
      survives as Forest, for trust and governance moments.
   4. RADII. Pill CTAs at the product's literal 50px → 10px. The brand asks for
      restrained radii, and after the canvas this is the clearest signal that
      this is a different product generation.
   5. LIME. Activation only, one place per viewport: the ACTIVE stepper bar and
      the completion check. Never a button, never a background, never body text.
      This is the token most likely to be misused, so it appears exactly twice.
   ============================================================================ */

.rebrand-scope {
  /* ---- Brand tokens. Hexes transcribed from the guidelines PDF. ---------- */
  --rb-barely:    #F6F8F3;   /* primary page background, the environmental field */
  --rb-paper:     #FCFDF9;   /* cards, product windows, alternating sections */
  --rb-deep:      #102F1C;   /* wordmark, dark sections, highest-trust moments, clinical emphasis */
  --rb-ink:       #17221A;   /* primary text on light surfaces */
  /* CTA color comparison for Michelle Davey. These three tokens ARE the CTA fill across all
     28 call sites below (buttons, sticky bars, modal continues) — so switching them is the whole
     comparison, no call site touched. Default is Wheel Blue; [data-cta="forest"] on the scope
     root (set from CTA_VARIANT in app-rebrand.jsx, driven by #cta=forest in the URL) overrides
     all three to Deep Forest below. */
  --rb-blue:      #3657FF;   /* software, selection, intelligence, primary action */
  --rb-blue-dk:   #2440D8;   /* pressed / hover state for Blue */
  --rb-blue-lt:   #DCE5FF;   /* soft technical fields, icon containers */
  --rb-cta-disabled: #4C5FAE; /* ⚠ NOT IN THE BRAND GUIDELINES — PENDING APPROVAL. :disabled CTA fill,
     computed (not transcribed) to hit 5.9:1 with white text; see the disabled-state comment below
     and the "Off-guideline colors" list in CLAUDE.md's New patient REBRAND section. Never apply
     opacity to the CTA element itself — that is the bug this token replaced. */
  --rb-lime:      #B9F24A;   /* activation, progress points, active modules */
  --rb-line:      #DCE4D8;   /* borders, rules, quiet separation */
  --rb-muted:     #5C695F;   /* secondary text */

  --rb-display:   'Manrope', system-ui, sans-serif;
  --rb-body:      'DM Sans', system-ui, sans-serif;

  --rb-r-cta:     10px;      /* restrained, replacing the product's 50px pill */
  --rb-r-card:    14px;
  --rb-r-field:   9px;
  --rb-shadow:    0 1px 3px rgba(16,47,28,0.06), 0 8px 28px rgba(16,47,28,0.05);
  --rb-shadow-sm: 0 1px 2px rgba(16,47,28,0.07);

  /* ---- Re-point the patient app's own tokens. Everything downstream that
     already reads these inherits the rebrand for free, which is why this sheet
     is a few hundred lines and not a few thousand. --------------------------- */
  --n-canvas:     var(--rb-barely);
  --n-surface:    var(--rb-paper);
  --n-ink:        var(--rb-ink);
  --n-ink-2:      #2C3A2E;
  --n-line:       var(--rb-line);
  --n-line-2:     var(--rb-line);
  /* line-3, input border, well, band, hover and border-strong were each a separate computed
     near-Line tint (E7EDE3, C3CFBE, EFF3EB, E9EFE4, F1F5EE, CBD6C6) — six near-identical
     invented shades where one approved color does the job. All now just read Line. */
  --n-line-3:     var(--rb-line);
  --n-line-input: var(--rb-line);
  --n-well:       var(--rb-line);
  --n-band:       var(--rb-line);
  --n-hover:      var(--rb-line);
  --n-disabled:   var(--rb-line);
  --c-muted:      var(--rb-muted);
  --c-border:     var(--rb-line);
  --c-border-strong: var(--rb-line);
  --c-surface:    var(--rb-paper);
  --c-text:       var(--rb-ink);
  --c-soft:       var(--rb-blue-lt);
  --e-1:          var(--rb-shadow-sm);
  --e-2:          var(--rb-shadow);
  --cta-radius:   var(--rb-r-cta);
  --r-pill:       var(--rb-r-cta);
  --r-card:       var(--rb-r-card);
  --r-card-lg:    var(--rb-r-card);
  --card-radius:  var(--rb-r-card);
  --shadow-card:  var(--rb-shadow);
  --font-sans:    var(--rb-body);
  --t-link-color: var(--rb-blue);
}

/* Option B: Deep Forest as the CTA fill, the wordmark's own color. Same three tokens,
   overridden — every button, sticky bar and modal continue below picks this up for free. */
.rebrand-scope[data-cta="forest"] {
  --rb-blue:    #102F1C;
  --rb-blue-dk: #0B2213;
  /* Forest's soft-field tint was a computed near-Line green (DCE9DF) standing in for Blue
     Light's role — Line already covers "soft field, quiet separation" in the guidelines, so
     it just reads Line directly now instead of a seventh invented tint. */
  --rb-blue-lt: var(--rb-line);
  --rb-cta-disabled: #35513B; /* ⚠ NOT IN THE BRAND GUIDELINES — PENDING APPROVAL. Computed Deep-Forest
     disabled fill, 8.8:1 with white text — same exception as the Blue value above. */
}

/* The shell. The canvas is the brand's most visible instruction, so it is set
   on the scope root rather than left to whichever screen happens to paint. */
.rebrand-scope,
.rebrand-scope .app,
.rebrand-scope .page,
.rebrand-scope .page-intake {
  background: var(--rb-barely);
  font-family: var(--rb-body);
  color: var(--rb-ink);
}
.rebrand-scope a { color: var(--rb-blue); }
.rebrand-scope a:hover { color: var(--rb-deep); }

/* ---- Typography ---------------------------------------------------------- */
/* Manrope 500 with compact tracking for anything that reads as display, DM Sans
   for everything you interact with. Sentence case throughout: no heading in
   this system is all-caps at any size. */
.rebrand-scope .h1,
.rebrand-scope h1,
.rebrand-scope .srv2-h1,
.rebrand-scope .rp-h1,
.rebrand-scope .wc-h1,
.rebrand-scope .cs-h1,
.rebrand-scope .wl-auth-h {
  font-family: var(--rb-display);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.12;
  color: var(--rb-ink);
  text-wrap: pretty;
}
.rebrand-scope .h3,
.rebrand-scope h2,
.rebrand-scope h3,
.rebrand-scope .srv2-modal-h,
.rebrand-scope .sidenav-heading,
.rebrand-scope .wc-step-title,
.rebrand-scope .srv2-card-title {
  font-family: var(--rb-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--rb-ink);
}
.rebrand-scope .muted,
.rebrand-scope .small,
.rebrand-scope .fine-print,
.rebrand-scope .srv2-card-meta,
.rebrand-scope .srv2-card-source {
  font-family: var(--rb-body);
  color: var(--rb-muted);
}
.rebrand-scope .q-title,
.rebrand-scope .srv2-iq-question,
.rebrand-scope .field-label,
.rebrand-scope .kv-k {
  font-family: var(--rb-body);
  color: var(--rb-ink);
}
.rebrand-scope .text-link,
.rebrand-scope .wl-link,
.rebrand-scope .pay-ins-link,
.rebrand-scope .confirm-edit-btn {
  color: var(--rb-blue);
  font-family: var(--rb-body);
}

/* The Lime marker, available to one phrase per screen. Lime sits BEHIND the
   lower portion of Ink letterforms like a marker swipe — it is never the text
   color and never a filled background. */
.rebrand-scope .rb-mark {
  background: linear-gradient(to top, var(--rb-lime) 0, var(--rb-lime) 40%, transparent 40%);
  padding: 0 2px;
  color: var(--rb-ink);
}

/* An eyebrow-style label. Sentence case with a leading accent rule, NOT small
   all-caps: the brand sanctions uppercase eyebrows at display size, but at
   label size the accent cannot carry the text (Clay 3.43:1) and small all-caps
   headers are forbidden project-wide. The rule carries the accent instead. */
.rebrand-scope .rb-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rb-body);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--rb-ink);
  text-transform: none;
  letter-spacing: 0;
}
.rebrand-scope .rb-label::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--rb-blue);
  border-radius: 1px;
  flex: 0 0 18px;
}

/* ---- Small all-caps labels become sentence-case headers ----------------- */
/* The inherited flow carries ~25 small all-caps labels with wide tracking —
   "PRE-FILLED FROM YOUR IMPORTED RECORDS", "PLEASE READ CAREFULLY", section
   heads, subheads, "powered by" labels. Two rules converge on removing them:
   the brand's typography guardrail avoids uppercase copy outright, and the
   standing project rule forbids small all-caps headers in any design because
   they are the clearest tell that a screen was generated rather than designed.

   This is the right place to fix it. The fork exists to depart, and a scoped
   rule cannot reach the sales demo, where the same classes stay as they are —
   they are part of that flow's product parity, and mass-restyling a shared
   class would edit both apps at once.

   What KEEPS its caps: genuine pills and short chips (.status-pill, .srv2-pill,
   .srv2-card-badge, .hr-source-badge, .cs-portal-tag, .src-tag). That is what
   all-caps is actually for, and the brand sanctions it at label length. */
.rebrand-scope .srv2-prefill-summary-h,
.rebrand-scope .srv2-iq-attest-warning,
.rebrand-scope .srv2-item-subhead,
.rebrand-scope .srv2-edit-subhead,
.rebrand-scope .srv2-missing-h,
.rebrand-scope .srv2-add-grouplabel,
.rebrand-scope .srv2-disq-next-h,
.rebrand-scope .srv2-status-label,
.rebrand-scope .srv2-verify-flag,
.rebrand-scope .srv2-poweredby-label,
.rebrand-scope .srv2-demobar-label,
.rebrand-scope .hr-section-h,
.rebrand-scope .hr-summary-label,
.rebrand-scope .wc-step-tag,
.rebrand-scope .wc-cost-label,
.rebrand-scope .wc-bwell-eyebrow,
.rebrand-scope .wc-bwell-label,
.rebrand-scope .rp-eyebrow,
.rebrand-scope .rp-scan-tally-l,
.rebrand-scope .tl-heading,
.rebrand-scope .gap-pending-label,
.rebrand-scope .locked-field-label,
.rebrand-scope .imp-poweredby-label,
.rebrand-scope .confirm-poweredby-label,
.rebrand-scope .flow-toggle-label,
.rebrand-scope .brand-sub-stacked,
.rebrand-scope .history-table th {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--rb-body);
}
/* The ones that are genuinely section HEADINGS get heading treatment, not just
   their capitals removed: Manrope, a real size, and the accent rule carrying
   the emphasis the tracking used to fake. */
.rebrand-scope .srv2-prefill-summary-h,
.rebrand-scope .srv2-iq-attest-warning,
.rebrand-scope .srv2-missing-h,
.rebrand-scope .srv2-disq-next-h,
.rebrand-scope .hr-section-h,
.rebrand-scope .tl-heading {
  font-family: var(--rb-display);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--rb-ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
/* NO accent rule on these. They already carry a Material icon, and adding a rule
   gave every one of them two leading markers — noise dressed as hierarchy. The
   icon plus Manrope 600 at --t-md is the emphasis; .rb-label's rule is for labels
   that have no icon of their own. */

/* Section-head icons take the accent; the attestation's stays its fixed status
   color, because a safety instruction must not inherit an action color. */
.rebrand-scope .srv2-prefill-summary-h .material-icons-round,
.rebrand-scope .hr-section-h .material-icons-round { color: var(--rb-blue); }

/* ---- App shell: header and nav ------------------------------------------ */
.rebrand-scope .hdr {
  background: var(--rb-paper);
  border-bottom: 1px solid var(--rb-line);
}
/* Lowercase live type, no symbol. app-rebrand.jsx renders the wordmark as text
   rather than the superseded lockup image; this is its styling. */
.rebrand-scope .rb-wordmark {
  font-family: var(--rb-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--rb-deep);
  text-transform: lowercase;
}
/* The wordmark also appears inside partner surfaces — CLEAR's hand-off and new-user
   screens, the b.well co-brand pair. Those containers were sized for an image, so the
   type gets an explicit size there. The SURFACE stays captured; only Wheel's own mark
   on it is updated, because a superseded Wheel logo is superseded wherever it sits. */
.rebrand-scope .clrv2-handoff-logo,
.rebrand-scope .cnu-partner-wheel,
.rebrand-scope .wc-wheel-brand .rb-wordmark { font-size: 19px; }
.rebrand-scope .wc-cobrand-pair .rb-wordmark { font-size: 17px; }

.rebrand-scope .hdr-msg-icon,
.rebrand-scope .hdr-care {
  color: var(--rb-deep);
}
.rebrand-scope .hdr-care {
  border-color: var(--rb-line);
  border-radius: var(--rb-r-cta);
  font-family: var(--rb-body);
  font-weight: 500;
}
.rebrand-scope .hdr-care:hover {
  background: var(--rb-blue-lt);
  border-color: var(--rb-blue);
  color: var(--rb-deep);
}
/* The patient app marks the header's "Your Care" button .is-active on the Home screen and
   fills it solid with --c-primary — a treatment this header never uses anywhere else, so on
   Home specifically the button read as a heavy solid CTA (and, before the hover fix above,
   with a hover state that didn't track the theme). Overridden back to the same outlined
   treatment every other screen gets, so the header never changes shape depending on which
   screen is showing. */
.rebrand-scope .hdr-care.is-active {
  background: var(--n-surface);
  color: var(--rb-deep);
  border-color: var(--rb-line);
}
.rebrand-scope .hdr-care.is-active:hover {
  background: var(--rb-blue-lt);
  border-color: var(--rb-blue);
  color: var(--rb-deep);
}
/* Log out is a neutral action, so it is muted — not the action color. .logout-btn reads
   --c-primary, which is Blue now, and that made the quietest control in the nav the loudest
   thing on the screen. Both copies of it are covered. */
.rebrand-scope .logout-btn,
.rebrand-scope .sidenav-logout {
  color: var(--rb-muted);
  font-family: var(--rb-body);
  font-weight: 400;
}
.rebrand-scope .logout-btn:hover,
.rebrand-scope .sidenav-logout:hover { color: var(--rb-ink); }

.rebrand-scope .sidenav-heading {
  font-size: var(--t-xl);
  font-weight: 600;
}
.rebrand-scope .sidenav-item {
  font-family: var(--rb-body);
  border-radius: var(--rb-r-field);
  color: var(--rb-muted);
}

/* Selected row: a neutral field with a Blue rail. Blue owns selection in this
   brand, and a full Blue fill on a nav row would outweigh the primary action
   sitting a few hundred pixels away. */
.rebrand-scope 

/* ---- Cards -------------------------------------------------------------- */
.rebrand-scope .card,
.rebrand-scope .rp-card,
.rebrand-scope .srv2-card,
.rebrand-scope .wc-step-card,
.rebrand-scope .wl-auth-card {
  background: var(--rb-paper);
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-r-card);
  box-shadow: var(--rb-shadow);
}
/* .intake-frame and .field-frame are LAYOUT WRAPPERS, not surfaces. Giving them the card
   treatment drew a second border 17px outside the .card they wrap, at the same width — the
   double line at the top of every intake container. A frame gets no border, no shadow. */
.rebrand-scope .intake-frame,
.rebrand-scope .field-frame {
  background: transparent;
  border: none;
  box-shadow: none;
}

.rebrand-scope .card-divider,
.rebrand-scope .srv2-card-list { border-color: var(--rb-line); }
.rebrand-scope .card-divider { background: var(--rb-line); }
.rebrand-scope .kv { border-color: var(--rb-line); }

/* ---- Buttons ------------------------------------------------------------ */
/* Primary is Wheel Blue at a restrained radius. Every primary CTA in the fork
   routes through one of these selectors, so the shape and color change in one
   place rather than per screen. */
.rebrand-scope .btn,
.rebrand-scope .cta,
.rebrand-scope .wc-cta-primary,
.rebrand-scope .srv2-sticky-primary,
.rebrand-scope .srv2-modal-continue,
.rebrand-scope .srv2-card-btn-primary,
.rebrand-scope .clrv2-handoff-link {
  font-family: var(--rb-body);
  font-weight: 500;
  border-radius: var(--rb-r-cta);
}
.rebrand-scope .btn-primary,
.rebrand-scope .cta,
.rebrand-scope .wc-cta-primary,
.rebrand-scope .srv2-sticky-primary,
.rebrand-scope .srv2-modal-continue,
.rebrand-scope .srv2-card-btn-primary {
  background: var(--rb-blue);
  color: #FFFFFF;
  border: 1px solid var(--rb-blue);
  box-shadow: 0 1px 2px rgba(36,64,216,0.24);
}
.rebrand-scope .btn-primary:hover,
.rebrand-scope .cta:hover,
.rebrand-scope .wc-cta-primary:hover,
.rebrand-scope .srv2-sticky-primary:hover,
.rebrand-scope .srv2-modal-continue:hover,
.rebrand-scope .srv2-card-btn-primary:hover {
  background: var(--rb-blue-dk);
  border-color: var(--rb-blue-dk);
}
/* Disabled: a pale field of the action color with an INK label — not white on
   pale, which measured 1.8:1 and made the most consequential label on the
   payment screen unreadable. White text belongs on the saturated fill; a pale
   fill takes dark text.
   A second round of feedback caught the fix after that: rendering the ACTIVE fill at
   opacity 0.6 composites both the background AND the white label against the page behind
   it, so the label fades exactly as much as the fill does — a contrast checker measured
   the result below 4.5:1 (Sep 18 feedback, screenshot showed a washed-out sage button in
   Forest mode). Opacity on the button element can never be the "inactive" signal, because
   it always lightens whatever sits under it, whatever the base color. --rb-cta-disabled is
   a real, solid, full-opacity color instead — muted from the active fill but calibrated to
   stay under the WCAG AA luminance ceiling for white text (5.9:1 Blue, 8.8:1 Forest) — and
   it is the ONE token both CTA variants define, so switching CTA_VARIANT still needs no
   per-selector change here. */
.rebrand-scope .btn-primary:disabled,
.rebrand-scope .btn:disabled,
.rebrand-scope .wc-cta-primary:disabled,
.rebrand-scope .wc-cta-primary.is-disabled,
.rebrand-scope .srv2-sticky-primary:disabled,
.rebrand-scope .srv2-card-btn-primary:disabled {
  background: var(--rb-cta-disabled);
  border-color: var(--rb-cta-disabled);
  color: #FFFFFF;
  box-shadow: none;
  /* .wl-auth-card .btn:disabled in styles-captured.css sets opacity:.55 at the same
     specificity — it ties, so whichever rule stays SILENT on opacity loses it to the other.
     This rule has to say opacity:1 explicitly, or that captured card keeps fading the solid
     color above back down to a washed-out tint regardless of what color it is. */
  opacity: 1;
}
/* Secondary carries Deep Forest: the brand's trust color, and a deliberate
   contrast with Blue so the two never read as the same offer. */
.rebrand-scope .btn-secondary,
.rebrand-scope .srv2-card-btn-secondary,
.rebrand-scope .clrv2-modal-sec,
.rebrand-scope .btn-outline {
  background: var(--rb-paper);
  border: 1px solid var(--rb-line);
  color: var(--rb-deep);
  font-weight: 500;
}
.rebrand-scope .btn-secondary:hover,
.rebrand-scope .srv2-card-btn-secondary:hover,
.rebrand-scope .btn-outline:hover {
  background: var(--rb-blue-lt);
  border-color: var(--rb-blue);
}
.rebrand-scope .btn-dark {
  background: var(--rb-deep);
  color: var(--rb-barely);
  border-color: var(--rb-deep);
}
.rebrand-scope .btn-lg { padding: 14px 24px; }

/* ---- Forms -------------------------------------------------------------- */
.rebrand-scope .input,
.rebrand-scope .select,
.rebrand-scope input[type="text"],
.rebrand-scope input[type="email"],
.rebrand-scope input[type="tel"],
.rebrand-scope select,
.rebrand-scope textarea {
  font-family: var(--rb-body);
  background: var(--rb-paper);
  border-color: var(--n-line-input);
  border-radius: var(--rb-r-field);
  color: var(--rb-ink);
}
.rebrand-scope .input:focus,
.rebrand-scope .select:focus,
.rebrand-scope input:focus,
.rebrand-scope select:focus,
.rebrand-scope textarea:focus {
  border-color: var(--rb-blue);
  box-shadow: 0 0 0 3px var(--rb-blue-lt);
  outline: none;
}
.rebrand-scope .field-label {
  font-weight: 500;
  color: var(--rb-muted);
}
/* Selection state is Blue, per the brand's assignment of Blue to selection. */
.rebrand-scope .radio-row,
.rebrand-scope .check-row,
.rebrand-scope .srv2-iq-cond-row {
  font-family: var(--rb-body);
  border-radius: var(--rb-r-field);
}
.rebrand-scope .radio-row:hover,
.rebrand-scope .check-row:hover { background: var(--rb-paper); }
.rebrand-scope .radio { border-color: var(--n-line-input); }
.rebrand-scope .radio.is-on {
  border-color: var(--rb-blue);
  box-shadow: inset 0 0 0 4px var(--rb-blue);
}
.rebrand-scope .check-row .check.is-on,
.rebrand-scope .wc-consent-check.is-on,
.rebrand-scope .wl-check.is-on {
  background: var(--rb-blue);
  border-color: var(--rb-blue);
  color: #FFFFFF;
}

/* ---- Stepper: the one place Lime marks progress ------------------------- */
/* Motion reads left to right: completed bars are Forest, the active bar is
   Lime, and what is ahead is a quiet Line. That is the brand's "progress
   points and active modules" usage, and it is the only Lime on the screen. */
.rebrand-scope .stepper-title {
  font-family: var(--rb-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--rb-ink);
}
.rebrand-scope .step-bar { background: var(--rb-line); border-radius: 2px; }
.rebrand-scope .step.is-done .step-bar { background: var(--rb-deep); }
.rebrand-scope .step.is-active .step-bar {
  background: var(--rb-lime);
  transition: background 220ms ease;
}
.rebrand-scope .step-label {
  font-family: var(--rb-body);
  color: var(--rb-muted);
  font-weight: 400;
}
.rebrand-scope .step.is-active .step-label {
  color: var(--rb-ink);
  font-weight: 500;
}
.rebrand-scope .step.is-done .step-label { color: var(--rb-muted); }
/* The done-check follows its own BAR, not --c-primary. Once the palette's primary became
   Blue the checks went Blue while their bars stayed Forest — Blue and Forest doing the same
   job in one component. A completed step is neither a selection nor an activation; it is a
   settled fact, which is Forest's role in this brand. */
.rebrand-scope .step-check { background: var(--rb-deep); color: var(--rb-paper); }

/* ---- Service catalog ---------------------------------------------------- */
.rebrand-scope .svc-card {
  background: var(--rb-paper);
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-r-card);
  box-shadow: var(--rb-shadow);
}

.rebrand-scope .svc-title {
  font-family: var(--rb-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--rb-ink);
}
.rebrand-scope .svc-price {
  font-family: var(--rb-display);
  font-weight: 600;
  color: var(--rb-deep);
}
.rebrand-scope .svc-desc { color: var(--rb-muted); }

/* ---- Records, import and prefill --------------------------------------- */
/* Blue Light is the brand's "soft technical field and icon container", which is
   exactly what a records-import surface is. */
.rebrand-scope .imp-row,
.rebrand-scope .hr-source-btn,
.rebrand-scope .srv2-prefill-chip,
.rebrand-scope .gap-saved-row {
  background: var(--rb-paper);
  border-color: var(--rb-line);
  border-radius: var(--rb-r-field);
}
/* This shared rule restyles the box (background/border/radius) but none of the four
   classes it targets carry their own padding in flow-v2.css, so the prefilled-record
   chips read as text flush to the edge. Give the chip its own field padding. */
.rebrand-scope .srv2-prefill-chip {
  padding: 12px 14px;
}
.rebrand-scope .hr-source-badge,
.rebrand-scope .src-tag {
  background: var(--rb-blue-lt);
  color: var(--rb-deep);
  border-radius: 999px;
  font-family: var(--rb-body);
  font-weight: 500;
}
/* srv2-card-badge dropped out of the rule above on purpose (Sep 21 feedback): that generic
   override painted EVERY state \u2014 Confirmed, Updated by you, Connected \u2014 the same flattened
   color, which is what made "Connected" read as identical to "Confirmed" and "Updated by you"
   read as green instead of its own state. Shape/type stay on-brand; color is per-state below,
   fixed hexes rather than brand tokens because these are process status, not brand surfaces \u2014
   the same reasoning the status-pill rule above already states. */
.rebrand-scope .srv2-card-badge {
  border-radius: 999px;
  font-family: var(--rb-body);
  font-weight: 500;
}
.rebrand-scope .srv2-card-badge.is-confirmed {
  background: var(--rb-line);
  color: var(--rb-deep);
}
.rebrand-scope .srv2-card-badge.is-edited,
.rebrand-scope .srv2-card-badge.is-connected {
  background: #E2ECF8;
  color: #1F4F94;
}
.rebrand-scope .hr-source-dot,
.rebrand-scope .imp-dot { background: var(--rb-blue); }
.rebrand-scope .imp-spin { border-top-color: var(--rb-blue); }
.rebrand-scope .hr-source-synced { color: var(--rb-deep); }
.rebrand-scope .prefill-note {
  background: var(--rb-blue-lt);
  border-radius: var(--rb-r-field);
  color: var(--rb-ink);
}

/* ---- Prior authorization ------------------------------------------------ */
/* The PA card's status tags stay the design's literal status colors; only Wheel's
   own surfaces move onto the brand. Approved is the exception — it was Wheel Green,
   and Deep Forest is this system's "highest-trust moment" color. */
.rebrand-scope .rx2-pa-card {
  background: var(--rb-paper);
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-r-card);
  box-shadow: var(--rb-shadow);
}
.rebrand-scope .rx2-pa-head {
  font-family: var(--rb-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--rb-ink);
  border-bottom-color: var(--rb-line);
}
.rebrand-scope .rx2-pa-copy { font-family: var(--rb-body); color: var(--rb-ink); }
.rebrand-scope .rx2-pa-tag { font-family: var(--rb-body); }
.rebrand-scope .rx2-pa-tag.is-approved { background: var(--rb-line); color: var(--rb-deep); }

/* ---- Receipt and payment ------------------------------------------------ */
.rebrand-scope .receipt { border-color: var(--rb-line); }
.rebrand-scope .receipt-row { font-family: var(--rb-body); }
.rebrand-scope .receipt-total {
  font-family: var(--rb-display);
  font-weight: 600;
  color: var(--rb-ink);
}
.rebrand-scope .pay-card-check { color: var(--rb-blue); }

/* ---- Completion: the second and last Lime ------------------------------ */
/* Deep Forest disc with a Lime ring — the activation moment at the end of the
   journey. The check itself stays legible on Forest at 12.2:1. */
.rebrand-scope .big-check {
  background: var(--rb-deep);
  color: var(--rb-barely);
  box-shadow: 0 0 0 4px var(--rb-lime);
}
.rebrand-scope .next-steps {
  background: var(--rb-paper);
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-r-card);
}
.rebrand-scope .empty-care {
  border-color: var(--rb-line);
  border-radius: var(--rb-r-card);
  background: var(--rb-paper);
}
.rebrand-scope .empty-title {
  font-family: var(--rb-display);
  font-weight: 600;
  color: var(--rb-ink);
}

/* ---- Chat and messages -------------------------------------------------- */
.rebrand-scope .chat-bubble {
  font-family: var(--rb-body);
  border-radius: var(--rb-r-card);
}
.rebrand-scope .msgcenter-from {
  font-family: var(--rb-display);
  font-weight: 600;
  color: var(--rb-ink);
}

/* ---- Status pills: brand-neutral by design ------------------------------ */
/* The pill's SHAPE follows the rebrand; its COLOR does not. Status colors are
   fixed project-wide so a failure state cannot inherit an action color. */
.rebrand-scope .status-pill {
  font-family: var(--rb-body);
  font-weight: 500;
}

/* ---- Motion ------------------------------------------------------------- */
/* Left to right, and nothing essential exists only in animation. */
@media (prefers-reduced-motion: reduce) {
  .rebrand-scope * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}