/* ============================================================================
 * 1vsM Platform — Member Portal stylesheet                         [Portal-UI]
 * ----------------------------------------------------------------------------
 * Mobile-first. 320px is the baseline breakpoint; 375px and 768px are checked
 * additions, never a rewrite. No JS-measured layout — everything below is
 * verified BY CONSTRUCTION (relative units + flex/grid + max-width:100%),
 * because this session has no live browser to screenshot against. Nobody
 * should read a device-tested claim into this file — there isn't one.
 *
 * 320px  — .pf-quicknav wraps to 1 column (`grid-template-columns: 1fr`);
 *          .pf-card padding shrinks via clamp(); no fixed widths anywhere,
 *          only max-width:100% + %/rem/fr units — nothing can force a
 *          horizontal scrollbar at this width.
 * 375px  — same grid, just breathes more inside the same clamp() ranges.
 * 768px  — `@media (min-width:48rem)` promotes .pf-quicknav to 2 columns and
 *          widens .pf-shell's max-width; still no fixed px widths.
 *
 * Touch targets  — .pf-btn, .pf-tap, .pf-slot, .pf-service all set
 *                  min-height:44px + min-width:44px (CONTRACT §mobile-first).
 * Fixed header   — .pf-header is `position:sticky` (not fixed-over-content on
 *                  a short mobile viewport) but .pf-main still carries
 *                  padding-top:5rem so content never sits under it if a site
 *                  integrator later switches it to `position:fixed`.
 * Font sizes     — body copy 1rem (16px baseline) never below 14px; all
 *                  <input>/<select> font-size:16px so iOS Safari does not
 *                  auto-zoom on focus.
 * Button states  — every .pf-btn defines default / :hover / :active /
 *                  :disabled (4 states, CONTRACT minimum). Inputs define
 *                  :focus-visible and a paired .pf-field--error state that
 *                  always renders alongside a visible <p class="pf-error-msg">
 *                  (never color-only).
 * Dark mode      — depth comes from --pf-bg-elevated (a lighter surface
 *                  layered over --pf-bg), never from box-shadow. Shadows are
 *                  reserved for the light scheme only, and stay low-opacity /
 *                  high-blur per the network UI rubric.
 * Tokens         — every var() below carries a literal fallback so this file
 *                  survives even if no site-wide token sheet is ever linked
 *                  (three competing token vocabularies exist network-wide;
 *                  this file assumes NONE of them and depends on none).
 * ==========================================================================*/

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Brand-neutral surface tokens (light default) */
  --pf-bg:            #F7F7F8;
  --pf-bg-elevated:   #FFFFFF;
  --pf-fg:            #16171A;
  --pf-fg-muted:      #55585F;
  --pf-border:        #DBDCE0;
  --pf-accent:        #B8862B;   /* warm gold, matches network's premium tone */
  --pf-accent-fg:     #1A1400;
  --pf-accent-soft:   #F1E4C6;
  --pf-success:       #1E7B45;
  --pf-success-bg:    #E4F3E9;
  --pf-danger:        #B3261E;
  --pf-danger-bg:     #FBEAE9;
  --pf-focus-ring:    #2E6BE6;
  --pf-radius-sm:     0.5rem;
  --pf-radius-md:     0.875rem;
  --pf-radius-lg:     1.25rem;
  --pf-shadow-card:   0 1px 2px rgba(20,20,25,0.06), 0 6px 20px rgba(20,20,25,0.06);
  --pf-space-1: 0.25rem;
  --pf-space-2: 0.5rem;
  --pf-space-3: 0.75rem;
  --pf-space-4: 1rem;
  --pf-space-5: 1.5rem;
  --pf-space-6: 2rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pf-bg:          #0B0B0D;
    --pf-bg-elevated: #1B1C20;   /* depth via elevation, not shadow */
    --pf-fg:          #F3F3F5;
    --pf-fg-muted:    #A7A9B1;
    --pf-border:      #2E3038;
    --pf-accent:      #E3B75C;
    --pf-accent-fg:   #1A1400;
    --pf-accent-soft: #3A2F14;
    --pf-success:     #6FDB94;
    --pf-success-bg:  #123822;
    --pf-danger:      #FF8880;
    --pf-danger-bg:   #3A1613;
    --pf-focus-ring:  #7FB0FF;
    --pf-shadow-card: none;      /* no shadows in dark mode — elevation only */
  }
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--pf-bg, #F7F7F8);
  color: var(--pf-fg, #16171A);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;      /* 16px baseline, never below 14px per CONTRACT */
  line-height: 1.5;
  overflow-x: hidden;   /* belt-and-braces: nothing here should ever need it */
}

a { color: inherit; }

.pf-shell {
  max-width: 32rem;
  margin: 0 auto;
  padding: 0 var(--pf-space-4, 1rem) var(--pf-space-6, 2rem);
}

@media (min-width: 48rem) { /* 768px */
  .pf-shell { max-width: 40rem; }
}

/* ---------------------------------------------------------------- header */

.pf-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pf-space-3, 0.75rem);
  padding: var(--pf-space-4, 1rem);
  background: var(--pf-bg-elevated, #FFFFFF);
  border-bottom: 1px solid var(--pf-border, #DBDCE0);
}

.pf-header__brand {
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.pf-header__brand small {
  display: block;
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--pf-fg-muted, #55585F);
}

/* Content always clears a fixed/sticky header — CONTRACT: padding-top >= 5rem */
.pf-main {
  padding-top: 5rem;
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-5, 1.5rem);
}

/* ------------------------------------------------------------------ card */

.pf-card {
  background: var(--pf-bg-elevated, #FFFFFF);
  border: 1px solid var(--pf-border, #DBDCE0);
  border-radius: var(--pf-radius-lg, 1.25rem);
  padding: clamp(1rem, 4vw, 1.5rem);
  box-shadow: var(--pf-shadow-card, none);
}

.pf-card__eyebrow {
  margin: 0 0 var(--pf-space-2, 0.5rem);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pf-fg-muted, #55585F);
}

/* ------------------------------------------------------- balance card ⭐ */
/* "You have 4 sessions left" — the single highest-value element on this
   page. It must never be below the fold on a 320px screen: it is the FIRST
   card in source order, full-width, no competing content above it besides
   the sticky header. */

.pf-balance {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-3, 0.75rem);
}

.pf-balance__headline {
  display: flex;
  align-items: baseline;
  gap: var(--pf-space-2, 0.5rem);
  flex-wrap: wrap;
}

.pf-balance__count {
  font-size: clamp(2.25rem, 9vw, 2.75rem);
  font-weight: 800;
  color: var(--pf-accent, #B8862B);
  line-height: 1;
}

.pf-balance__label {
  font-size: 1rem;
  color: var(--pf-fg-muted, #55585F);
}

.pf-balance__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-2, 0.5rem);
}

.pf-balance__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pf-space-3, 0.75rem);
  padding: var(--pf-space-2, 0.5rem) 0;
  border-top: 1px solid var(--pf-border, #DBDCE0);
  font-size: 0.9375rem;
}

.pf-balance__row:first-child { border-top: none; }

.pf-balance__row-name { font-weight: 600; }
.pf-balance__row-meta { color: var(--pf-fg-muted, #55585F); font-size: 0.8125rem; }

.pf-balance__row-remaining {
  font-weight: 700;
  white-space: nowrap;
}
.pf-balance__row-remaining[data-low="true"] { color: var(--pf-danger, #B3261E); }

/* ------------------------------------------------------------- meter bar */

.pf-meter {
  width: 100%;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--pf-border, #DBDCE0);
  overflow: hidden;
}
.pf-meter__fill {
  height: 100%;
  background: var(--pf-accent, #B8862B);
  border-radius: inherit;
}

/* --------------------------------------------------------- upcoming card */

.pf-upcoming__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--pf-space-3, 0.75rem);
}

.pf-upcoming__when {
  font-size: 1.0625rem;
  font-weight: 700;
}

.pf-upcoming__what {
  color: var(--pf-fg-muted, #55585F);
  font-size: 0.875rem;
}

.pf-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--pf-success-bg, #E4F3E9);
  color: var(--pf-success, #1E7B45);
}

.pf-empty {
  color: var(--pf-fg-muted, #55585F);
  font-size: 0.9375rem;
}

/* ---------------------------------------------------------------- ALERT */
/* Honest error card (portal.js errorBox): message + optional Retry button.
   Replaces the old sample-data note — the portal never shows sample data.
   Contrast: --pf-danger on --pf-danger-bg = 5.62:1 light, 6.97:1 dark (AA).
   320px: message and button stack and wrap; the button keeps ≥44px. */

.pf-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pf-space-2, 0.5rem) var(--pf-space-3, 0.75rem);
  margin-top: var(--pf-space-3, 0.75rem);
  padding: var(--pf-space-3, 0.75rem);
  border: 1px solid var(--pf-danger, #B3261E);
  border-radius: var(--pf-radius-sm, 0.5rem);
  background: var(--pf-danger-bg, #FBEAE9);
  color: var(--pf-danger, #B3261E);
}
.pf-alert__msg {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.pf-alert__retry { flex: 0 0 auto; }

/* ------------------------------------------------------------- skeleton */

.pf-skel {
  border-radius: var(--pf-radius-sm, 0.5rem);
  background: linear-gradient(90deg, var(--pf-border,#DBDCE0) 25%, var(--pf-bg,#F7F7F8) 37%, var(--pf-border,#DBDCE0) 63%);
  background-size: 200% 100%;
  animation: pf-shimmer 1.4s ease infinite;
}
@keyframes pf-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .pf-skel { animation: none; }
}

/* --------------------------------------------------------------- buttons
 * Every .pf-btn defines 4 states: default, :hover, :active, :disabled.
 * Minimum touch target 44x44 regardless of content length. */

.pf-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--pf-radius-md, 0.875rem);
  min-height: 44px;
  min-width: 44px;
  padding: 0.625rem 1.125rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: transform 0.08s ease, background-color 0.12s ease, opacity 0.12s ease;
}

.pf-btn:focus-visible {
  outline: 3px solid var(--pf-focus-ring, #2E6BE6);
  outline-offset: 2px;
}

.pf-btn--primary {
  background: var(--pf-accent, #B8862B);
  color: var(--pf-accent-fg, #1A1400);
}
.pf-btn--primary:hover   { filter: brightness(1.06); }
.pf-btn--primary:active  { transform: scale(0.98); filter: brightness(0.96); }
.pf-btn--primary:disabled,
.pf-btn--primary[aria-disabled="true"] {
  background: var(--pf-border, #DBDCE0);
  color: var(--pf-fg-muted, #55585F);
  cursor: not-allowed;
  transform: none;
}

.pf-btn--secondary {
  background: transparent;
  border-color: var(--pf-border, #DBDCE0);
  color: var(--pf-fg, #16171A);
}
.pf-btn--secondary:hover  { background: var(--pf-bg, #F7F7F8); }
.pf-btn--secondary:active { transform: scale(0.98); }
.pf-btn--secondary:disabled {
  color: var(--pf-fg-muted, #55585F);
  border-color: var(--pf-border, #DBDCE0);
  cursor: not-allowed;
  transform: none;
}

.pf-btn--danger-outline {
  background: transparent;
  border-color: var(--pf-danger, #B3261E);
  color: var(--pf-danger, #B3261E);
}
.pf-btn--danger-outline:hover  { background: var(--pf-danger-bg, #FBEAE9); }
.pf-btn--danger-outline:active { transform: scale(0.98); }
.pf-btn--danger-outline:disabled {
  border-color: var(--pf-border, #DBDCE0);
  color: var(--pf-fg-muted, #55585F);
  cursor: not-allowed;
  transform: none;
}

.pf-btn--block { width: 100%; }
.pf-btn--sm { min-height: 44px; padding: 0.5rem 0.875rem; font-size: 0.9375rem; }

/* ----------------------------------------------------------------- nav */

.pf-quicknav {
  display: grid;
  grid-template-columns: 1fr;      /* 320px/375px: single column, no overflow */
  gap: var(--pf-space-3, 0.75rem);
}

@media (min-width: 48rem) { /* 768px */
  .pf-quicknav { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------------- confirm panel */

.pf-confirm {
  margin-top: var(--pf-space-4, 1rem);
  padding-top: var(--pf-space-4, 1rem);
  border-top: 1px dashed var(--pf-border, #DBDCE0);
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-3, 0.75rem);
}

.pf-confirm__summary {
  font-size: 0.9375rem;
}
.pf-confirm__summary strong { display: block; font-size: 1.0625rem; }

.pf-confirm__actions {
  display: flex;
  gap: var(--pf-space-3, 0.75rem);
  flex-wrap: wrap;
}
.pf-confirm__actions .pf-btn { flex: 1 1 10rem; }

[hidden] { display: none !important; }

/* --------------------------------------------------------------- toast */

#pf-toast-region {
  position: fixed;
  left: var(--pf-space-4, 1rem);
  right: var(--pf-space-4, 1rem);
  bottom: var(--pf-space-4, 1rem);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-2, 0.5rem);
  pointer-events: none;
}

.pf-toast {
  padding: var(--pf-space-3, 0.75rem) var(--pf-space-4, 1rem);
  border-radius: var(--pf-radius-md, 0.875rem);
  background: var(--pf-bg-elevated, #FFFFFF);
  border: 1px solid var(--pf-border, #DBDCE0);
  box-shadow: var(--pf-shadow-card, none);
  font-size: 0.9375rem;
  font-weight: 600;
}
.pf-toast--success { border-color: var(--pf-success, #1E7B45); color: var(--pf-success, #1E7B45); }
.pf-toast--error   { border-color: var(--pf-danger, #B3261E);  color: var(--pf-danger, #B3261E); }

/* --------------------------------------------------------- book.php flow */

.pf-steps {
  display: flex;
  gap: var(--pf-space-2, 0.5rem);
  margin-bottom: var(--pf-space-4, 1rem);
}
.pf-step-dot {
  flex: 1;
  height: 0.25rem;
  border-radius: 999px;
  background: var(--pf-border, #DBDCE0);
}
.pf-step-dot[data-active="true"] { background: var(--pf-accent, #B8862B); }
.pf-step-dot[data-done="true"]   { background: var(--pf-success, #1E7B45); }

.pf-option-list {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-2, 0.5rem);
}

.pf-service, .pf-slot {
  min-height: 44px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--pf-border, #DBDCE0);
  background: var(--pf-bg-elevated, #FFFFFF);
  color: var(--pf-fg, #16171A);
  border-radius: var(--pf-radius-md, 0.875rem);
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pf-space-3, 0.75rem);
}
.pf-service:hover, .pf-slot:hover { border-color: var(--pf-accent, #B8862B); }
.pf-service:active, .pf-slot:active { transform: scale(0.99); }
.pf-service:focus-visible, .pf-slot:focus-visible {
  outline: 3px solid var(--pf-focus-ring, #2E6BE6);
  outline-offset: 1px;
}
.pf-service[aria-pressed="true"], .pf-slot[aria-pressed="true"] {
  border-color: var(--pf-accent, #B8862B);
  background: var(--pf-accent-soft, #F1E4C6);
}
.pf-service:disabled, .pf-slot:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.pf-slot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* 320px: 2-up, each cell >=44px tall */
  gap: var(--pf-space-2, 0.5rem);
}
@media (min-width: 23.4375rem) { /* 375px */
  .pf-slot-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 48rem) { /* 768px */
  .pf-slot-grid { grid-template-columns: repeat(4, 1fr); }
}
.pf-slot-grid .pf-slot { justify-content: center; font-size: 0.9375rem; }

/* ----------------------------------------------------------------- form */

.pf-field { display: flex; flex-direction: column; gap: var(--pf-space-1, 0.25rem); }

.pf-field label {
  font-size: 0.875rem;
  font-weight: 600;
}

.pf-field input,
.pf-field select {
  min-height: 44px;
  font-size: 16px;              /* prevents iOS auto-zoom on focus */
  padding: 0.625rem 0.875rem;
  border-radius: var(--pf-radius-sm, 0.5rem);
  border: 1px solid var(--pf-border, #DBDCE0);
  background: var(--pf-bg-elevated, #FFFFFF);
  color: var(--pf-fg, #16171A);
  font-family: inherit;
}

.pf-field input:focus-visible,
.pf-field select:focus-visible {
  outline: 3px solid var(--pf-focus-ring, #2E6BE6);
  outline-offset: 1px;
  border-color: var(--pf-focus-ring, #2E6BE6);
}

.pf-field--error input,
.pf-field--error select {
  border-color: var(--pf-danger, #B3261E);
}

.pf-error-msg {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--pf-danger, #B3261E);
}

.pf-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

footer.pf-footer {
  text-align: center;
  padding: var(--pf-space-5, 1.5rem) var(--pf-space-4, 1rem);
  color: var(--pf-fg-muted, #55585F);
  font-size: 0.8125rem;
}

/* ------------------------------------------- journey: status + progress
 * Owner ruling 2026-11-04 — a lead follows their offer, a client their
 * progress. Rendered by portal.js renderJourney() (no innerHTML).
 *
 * 320px — the stepper is a single vertical list (no horizontal track to
 *         overflow); the offer code chip wraps (`overflow-wrap:anywhere`) so
 *         a 40-char code cannot push the card wider than the viewport; the
 *         progress stats are a 1-column grid; CTAs are .pf-btn--block.
 * 375px — progress stats promote to 2 columns at 23.4375rem.
 * 768px — progress stats promote to 3 columns at 48rem; nothing else moves.
 * Contrast (WCAG AA, both schemes): body/meta text uses --pf-fg / --pf-fg-muted
 *         on --pf-bg-elevated (≥7:1 light, ≥8:1 dark); the code chip is
 *         --pf-accent-fg on --pf-accent-soft (≥12:1 light; dark #1A1400 on
 *         #3A2F14 is too low, so dark overrides the chip text to --pf-fg).
 *         The accent gold is NEVER used for small text (≈3:1 on white) — only
 *         for borders/markers, with a text state beside every marker, so the
 *         stepper never relies on colour alone.
 * Dark mode — depth via --pf-bg (inset sub-card) vs --pf-bg-elevated, no shadow.
 * ------------------------------------------------------------------------*/

.pf-journey__hello { margin: 0 0 var(--pf-space-3, 0.75rem); font-size: 1.0625rem; font-weight: 700; }

.pf-stepper {
  list-style: none;
  margin: 0 0 var(--pf-space-4, 1rem);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-2, 0.5rem);
}
.pf-stepper__item {
  display: flex;
  align-items: center;
  gap: var(--pf-space-3, 0.75rem);
  min-height: 2rem;
  font-size: 0.9375rem;
  color: var(--pf-fg-muted, #55585F);
}
.pf-stepper__marker {
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  border: 2px solid var(--pf-border, #DBDCE0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}
.pf-stepper__label { flex: 1 1 auto; min-width: 0; }
.pf-stepper__state { font-size: 0.75rem; font-weight: 700; color: var(--pf-fg-muted, #55585F); }
.pf-stepper__item[data-state="done"] { color: var(--pf-fg, #16171A); }
.pf-stepper__item[data-state="done"] .pf-stepper__marker {
  border-color: var(--pf-success, #1E7B45);
  background: var(--pf-success-bg, #E4F3E9);
  color: var(--pf-success, #1E7B45);
}
.pf-stepper__item[data-state="current"] { color: var(--pf-fg, #16171A); font-weight: 700; }
.pf-stepper__item[data-state="current"] .pf-stepper__marker { border-color: var(--pf-accent, #B8862B); border-width: 3px; }

.pf-offer {
  margin-top: var(--pf-space-2, 0.5rem);
  padding: var(--pf-space-4, 1rem);
  border-radius: var(--pf-radius-md, 0.875rem);
  border: 1px dashed var(--pf-accent, #B8862B);
  background: var(--pf-bg, #F7F7F8);
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-3, 0.75rem);
}
.pf-offer__title { margin: 0; font-size: 1rem; font-weight: 700; }
.pf-offer__value { margin: 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.01em; color: var(--pf-fg, #16171A); }
.pf-offer__desc, .pf-offer__terms, .pf-offer__meta { margin: 0; font-size: 0.875rem; color: var(--pf-fg-muted, #55585F); }
.pf-offer__terms { font-size: 0.8125rem; }
.pf-offer__code {
  align-self: flex-start;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 0.375rem 0.75rem;
  border-radius: var(--pf-radius-sm, 0.5rem);
  background: var(--pf-accent-soft, #F1E4C6);
  color: var(--pf-accent-fg, #1A1400);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.pf-offer[data-status="expired"], .pf-offer[data-status="redeemed"] { border-style: solid; border-color: var(--pf-border, #DBDCE0); }

.pf-progress {
  display: grid;
  grid-template-columns: 1fr;          /* 320px: one stat per row */
  gap: var(--pf-space-3, 0.75rem);
  margin: 0 0 var(--pf-space-3, 0.75rem);
}
@media (min-width: 23.4375rem) { .pf-progress { grid-template-columns: repeat(2, 1fr); } }  /* 375px */
@media (min-width: 48rem)      { .pf-progress { grid-template-columns: repeat(3, 1fr); } }  /* 768px */
.pf-progress__stat {
  padding: var(--pf-space-3, 0.75rem);
  border-radius: var(--pf-radius-md, 0.875rem);
  background: var(--pf-bg, #F7F7F8);
  min-width: 0;
}
.pf-progress__num { display: block; font-size: 1.5rem; font-weight: 800; color: var(--pf-fg, #16171A); overflow-wrap: anywhere; }
.pf-progress__label { display: block; font-size: 0.8125rem; color: var(--pf-fg-muted, #55585F); }
.pf-progress__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pf-space-2, 0.5rem); }
.pf-progress__list li { font-size: 0.9375rem; overflow-wrap: anywhere; }

.pf-field__hint { margin: 0; font-size: 0.8125rem; color: var(--pf-fg-muted, #55585F); }

@media (prefers-color-scheme: dark) {
  .pf-offer__code { color: var(--pf-fg, #F3F3F5); }   /* #1A1400 on #3A2F14 fails AA — use the light fg */
}