/* ── Border-box, declared for the whole block ──────────────────────────────
   Operator, 2026-09-21: "THE PASSWORD INPUT BOX STILL GOES PAST THE CARD."

   He was right and it was measurable. `.rally-pass__input` is `width: 100%`
   with `padding: 12px 14px` and a 1px border, and this sheet declared NO
   box-sizing anywhere — so under the default `content-box` every field
   computed 30px WIDER than the card that holds it. Three password inputs
   and two name inputs, all overflowing, on the member page.

   The auth sheet sets this on `.ruo-auth *` and was therefore fine; the
   member page is a different block in a different layout and never got it.
   A fix applied to one sheet is not a fix applied to a rule.

   Scoped to the block rather than a global reset: this sheet is loaded
   beside a brand stylesheet, and a bare `*` here would reach markup it
   does not own. */
.rally-pass,
.rally-pass *,
.rally-pass *::before,
.rally-pass *::after { box-sizing: border-box; }

/* =============================================================================
   Rally Pass — the signed-in member page.
   =============================================================================
   Shared across every brand's /<brand>/my-account. It paints NOTHING of its
   own: every colour is a brand token (--color-bg, --color-accent, --cta-accent)
   set by the brand stylesheet on `body.<brand>`. A hardcoded hex here would be
   PepRally's Ember Orange on GlamPeptides' champagne page, which is the
   `cart_widget_theme_guard` defect.

   ── The specificity rule that has cost this repo real money ──────────────
   Every brand sheet carries `.<brand> a { color: var(--color-accent) }` at
   specificity (0,1,1). A bare `.rally-pass__cta` is (0,1,0) and LOSES, so its
   own `color` is discarded and the LINK colour wins. When the link colour is
   the accent and the button background is also the accent, that is identical
   text and background — 1:1 contrast, invisible text, measured live on four
   brands on 2026-08-29.

   So every rule below that sets `color` on something rendered as an <a>
   carries the `a` qualifier. `cta_contrast_guard_test` scans this file against
   the anchor classes in app/views/shared and fails the build if one is missed.

   Backgrounds use --cta-accent, not --color-accent: PepRally's #E8550F carries
   white at 3.66:1, below WCAG AA. #C1470C carries it at 5.03:1.
   ========================================================================== */

.rally-pass-body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg, #111116);
  color: var(--color-text, #ffffff);
}

.rally-pass {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 20px 96px;
}

/* ── Masthead ───────────────────────────────────────────────────────────── */

.rally-pass .rally-pass__masthead {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 24px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--color-border, #1e1e26);
}

.rally-pass .rally-pass__wordmark {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent, #e8550f);
}

.rally-pass .rally-pass__who {
  margin: 6px 0 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.rally-pass .rally-pass__email {
  margin: 4px 0 0;
  font-size: 13px;
  /* --color-subtle, not --color-muted. Muted is #64748B and measures
     ~3.6:1 on this card — below AA — and this line is the member's own
     address, which is how they confirm they are signed into the right
     account. Its NAME is what invited the mistake. */
  color: var(--color-subtle, #E2E8F0);
}

.rally-pass a.rally-pass__signout,
.rally-pass .rally-pass__signout {
  font-size: 13px;
  /* It is a <button> since #2106 (a link was a 404 without script).
     A button wears the browser's default white face unless told
     otherwise, and this rule told it nothing — measured 1.07:1 on the
     real page, 2026-09-22: "signout button on peprally is white with
     white text". Painted, inherited, and pointer, so it reads as the
     link it replaced. */
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* Same swap, same reason. A sign-out control a member cannot find is
     a support email. */
  color: var(--color-subtle, #E2E8F0);
  text-decoration: none;
  border: 1px solid var(--color-border, #1e1e26);
  border-radius: 2px;
  padding: 8px 16px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.rally-pass a.rally-pass__signout:hover,
.rally-pass__signout:hover {
  color: var(--color-text, #ffffff);
  border-color: var(--color-accent, #e8550f);
}

/* ── Flash ──────────────────────────────────────────────────────────────── */

.rally-pass .rally-pass__flash {
  border-radius: 2px;
  padding: 12px 16px;
  margin-bottom: 24px;
  font-size: 14px;
  border: 1px solid;
}

.rally-pass .rally-pass__flash--notice {
  background: rgba(134, 239, 172, 0.08);
  border-color: rgba(134, 239, 172, 0.45);
  color: #86efac;
}

.rally-pass .rally-pass__flash--alert {
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.45);
  color: #f87171;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */

.rally-pass .rally-pass__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.rally-pass .rally-pass__card {
  background: var(--color-surface, #1a1a22);
  border: 1px solid var(--color-border, #1e1e26);
  border-radius: 2px;
  padding: 28px;
  margin-bottom: 20px;
}

.rally-pass__grid .rally-pass__card { margin-bottom: 0; }

.rally-pass .rally-pass__card--points {
  /* The one card that gets a lift. The balance is the reason the member
     opened this page. */
  border-color: color-mix(in srgb, var(--color-accent, #e8550f) 45%, transparent);
  background:
    radial-gradient(circle at 0% 0%,
      color-mix(in srgb, var(--color-accent, #e8550f) 12%, transparent), transparent 62%),
    var(--color-surface, #1a1a22);
}

.rally-pass .rally-pass__card-title {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-subtle, #E2E8F0);
}

.rally-pass .rally-pass__subhead {
  margin: 28px 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-subtle, #E2E8F0);
}

.rally-pass .rally-pass__lede {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-subtle, #e2e8f0);
}

.rally-pass .rally-pass__fine {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-subtle, #E2E8F0);
}

/* ── Balance ────────────────────────────────────────────────────────────── */

.rally-pass .rally-pass__balance {
  margin: 8px 0 0;
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.rally-pass .rally-pass__balance-sub {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--color-subtle, #E2E8F0);
}

.rally-pass .rally-pass__tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}

.rally-pass__tier-form { margin: 0; }

.rally-pass .rally-pass__tier {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  cursor: pointer;
  font-family: inherit;
  border-radius: 2px;
  border: 1px solid var(--cta-accent, #c1470c);
  background: var(--cta-accent, #c1470c);
  color: var(--color-text, #ffffff);
  transition: opacity 0.15s ease;
}

.rally-pass__tier:hover { opacity: 0.86; }

.rally-pass .rally-pass__tier--locked {
  background: transparent;
  border-color: var(--color-border, #1e1e26);
  color: var(--color-subtle, #E2E8F0);
  cursor: not-allowed;
}

.rally-pass__tier--locked:hover { opacity: 1; }

.rally-pass .rally-pass__tier-value {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rally-pass .rally-pass__tier-cost {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.82;
}

/* ── Notices (a minted code, or a refused redemption) ───────────────────── */

.rally-pass .rally-pass__notice {
  border-radius: 2px;
  padding: 16px;
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.6;
  border: 1px solid;
}

.rally-pass .rally-pass__notice--win {
  background: rgba(134, 239, 172, 0.08);
  border-color: rgba(134, 239, 172, 0.45);
  color: #86efac;
}

.rally-pass .rally-pass__notice--hold {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.45);
  color: #fbbf24;
}

.rally-pass__notice-lede { margin: 0 0 6px; font-weight: 700; }
.rally-pass__notice-fine { margin: 6px 0 0; opacity: 0.85; }

.rally-pass .rally-pass__code {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.14em;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--color-text, #ffffff);
}

.rally-pass .rally-pass__code--inline {
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--color-accent, #e8550f);
}

/* ── The squad share block (rally_squads/show) ── a sentence and a link
   that wraps anywhere: a URL in the tracked code face ran 590px wide on a
   390px phone (2026-10-21). Ink is the page text, never the accent. */
.rally-pass .rally-pass__share-message {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text, #ffffff);
}

.rally-pass .rally-pass__share-url {
  display: block;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--color-border, rgba(245, 245, 247, 0.18));
  border-radius: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  overflow-wrap: anywhere;
  word-break: break-all;
  color: var(--color-text, #ffffff);
}

.rally-pass button.rally-pass__share-copy {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--color-text, #ffffff);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text, #ffffff);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* ── Forms ──────────────────────────────────────────────────────────────── */

/* The share block that used to live here moved to
   `shared/rally_invite.css` when the invite card became one partial
   serving BOTH the brand dashboard and the two shared-identity origins.
   Those origins load `shared/auth`, not this sheet, so a card written
   against `--color-*` resolved to nothing there — and a bare var() with
   no definition evaluates to nothing rather than complaining. */

.rally-pass .rally-pass__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-subtle, #E2E8F0);
  margin-bottom: 6px;
}

/* ── Rally + poll ───────────────────────────────────────────────────────── */

.rally-pass .rally-pass__rally-title {
  margin: 8px 0 8px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.rally-pass .rally-pass__scarcity {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--color-accent, #e8550f) 18%, transparent);
  color: var(--color-accent, #e8550f);
}

.rally-pass a.rally-pass__cta,
.rally-pass .rally-pass__cta {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 2px;
  background: var(--cta-accent, #c1470c);
  color: var(--color-text, #ffffff);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

/* Scoped, and NOT dimmed with opacity. Alpha on a filled control takes
   its value from whatever is behind it, so the hover state's contrast
   stops being a property of the rule — the same reason no text in this
   sheet is dimmed that way. A lift reads as responsive and measures the
   same in both states. */
.rally-pass a.rally-pass__cta:hover,
.rally-pass .rally-pass__cta:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

.rally-pass a.rally-pass__link,
.rally-pass .rally-pass__link {
  color: var(--color-accent, #e8550f);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.rally-pass .rally-pass__options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.rally-pass .rally-pass__option {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rally-pass__option-form { flex: 1 1 auto; margin: 0; }

.rally-pass .rally-pass__option-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  border-radius: 2px;
  border: 1px solid var(--color-border, #1e1e26);
  background: var(--color-bg, #111116);
  color: var(--color-text, #ffffff);
  transition: border-color 0.15s ease;
}

.rally-pass__option-btn:hover { border-color: var(--color-accent, #e8550f); }

.rally-pass .rally-pass__option--mine .rally-pass__option-btn {
  border-color: var(--color-accent, #e8550f);
  background: color-mix(in srgb, var(--color-accent, #e8550f) 10%, transparent);
}

.rally-pass__option-label { font-weight: 600; }

/* The vial's collective content, in one unit for every option. Same
   role and same weight as the count beside it, so it takes the same
   token rather than a new one. */
.rally-pass .rally-pass__option-dose {
  display: block;
  font-size: 12px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-subtle, #E2E8F0);
}

.rally-pass .rally-pass__option-count {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--color-subtle, #E2E8F0);
}

.rally-pass .rally-pass__option-mine {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent, #e8550f);
}

/* ── Tables (orders, subscriptions) ─────────────────────────────────────── */

.rally-pass__table-wrap { overflow-x: auto; }

.rally-pass .rally-pass__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.rally-pass__table th {
  text-align: left;
  padding: 10px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-subtle, #E2E8F0);
  border-bottom: 1px solid var(--color-border, #1e1e26);
  white-space: nowrap;
}

.rally-pass__table td {
  padding: 14px 8px;
  border-bottom: 1px solid var(--color-border, #1e1e26);
  vertical-align: top;
}

.rally-pass__table td:last-child,
.rally-pass__table th:last-child { text-align: right; }

.rally-pass .rally-pass__num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rally-pass__muted { color: var(--color-subtle, #E2E8F0); }

.rally-pass .rally-pass__took {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-subtle, #E2E8F0);
}

.rally-pass .rally-pass__chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid;
}

.rally-pass__chip--ok    { background: rgba(134, 239, 172, 0.10); border-color: rgba(134, 239, 172, 0.45); color: #86efac; }
.rally-pass__chip--wait  { background: rgba(251, 191, 36, 0.10);  border-color: rgba(251, 191, 36, 0.45);  color: #fbbf24; }
.rally-pass__chip--alert { background: rgba(248, 113, 113, 0.10); border-color: rgba(248, 113, 113, 0.45); color: #f87171; }
.rally-pass__chip--off   { background: rgba(148, 163, 184, 0.10); border-color: rgba(148, 163, 184, 0.45); color: #94a3b8; }

.rally-pass .rally-pass__empty {
  margin: 0;
  padding: 28px 0;
  text-align: center;
  font-size: 14px;
  color: var(--color-subtle, #E2E8F0);
}

/* ── Settings ───────────────────────────────────────────────────────────── */

.rally-pass__field { margin-bottom: 16px; }

.rally-pass .rally-pass__field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.rally-pass .rally-pass__input {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  border-radius: 2px;
  border: 1px solid var(--color-border, #1e1e26);
  background: var(--color-bg, #111116);
  color: var(--color-text, #ffffff);
}

.rally-pass__input:focus {
  outline: none;
  border-color: var(--color-accent, #e8550f);
}

.rally-pass .rally-pass__submit {
  padding: 12px 26px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid var(--cta-accent, #c1470c);
  background: var(--cta-accent, #c1470c);
  color: var(--color-text, #ffffff);
  transition: opacity 0.15s ease;
}

.rally-pass .rally-pass__submit--quiet {
  background: transparent;
  border-color: var(--color-border, #1e1e26);
  color: var(--color-text, #ffffff);
}

.rally-pass__submit:hover { opacity: 0.86; }

@media (max-width: 640px) {
  .rally-pass { padding: 24px 14px 72px; }
  .rally-pass__card { padding: 20px; }
  .rally-pass__balance { font-size: 44px; }
}


/* ══════════════════════════════════════════════════════════════════════
   THE PIT WALL — Rally Pass member surface
   ──────────────────────────────────────────────────────────────────────
   Operator: "the rally account layout is still not very sexy... get it
   SEXY NOW."

   DIRECTION: race-pit instrumentation. This brand is dark Whoop/Oura,
   the product is called a Rally, and the page's whole job is to make ONE
   number — the claim price — feel live and perishable. So the surface
   reads as a timing board: hairline telemetry grid, ember used as a
   SIGNAL rather than as decoration, oversized tabular numerals, a
   segmented gauge instead of a soft progress bar.

   RULES THIS SHEET OBEYS, each with the defect it prevents:
     · every selector names the block root — a bare class is (0,1,0) and
       loses to `.peprally p` at (0,1,1), which takes the TYPOGRAPHY as
       well as the colour
     · anchors carry `a.` — `.peprally a { color: var(--color-accent) }`
       on an accent fill is 1:1 invisible text, shipped on four brands
     · no `opacity` on text — a colour painted with alpha takes its value
       from whatever is behind it and every measured ratio becomes a guess
     · no bare `var()` without a fallback — an undefined token evaluates
       to nothing rather than complaining
     · every grid-area is declared at the BASE width — a name with no
       template auto-places every child into row 1
   ══════════════════════════════════════════════════════════════════ */

.rally-pass {
  position: relative;
  --rp-ink: var(--color-text, #FFFFFF);
  --rp-dim: var(--color-subtle, #E2E8F0);
  --rp-line: var(--color-border, #1E1E26);
  --rp-panel: var(--color-surface, #1A1A22);
  --rp-deep: var(--color-bg, #111116);
  --rp-sig: var(--color-accent, #E8550F);
  /* The ember at low alpha is for GLOW and RULES only — never for text.
     Declared once so a wash cannot drift between blocks. */
  --rp-bloom: color-mix(in srgb, var(--color-accent, #E8550F) 16%, transparent);
  --rp-hair: color-mix(in srgb, var(--color-accent, #E8550F) 26%, transparent);
}

/* ── Atmosphere: a telemetry grid and one ember bloom ────────────────
   Fixed and pointer-events:none so it cannot intercept a click. Two
   layers: a 1px lattice that gives the dark field a sense of scale, and
   a single off-centre bloom so the page has a light source. */
.rally-pass::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 88% -8%, var(--rp-bloom), transparent 62%),
    linear-gradient(var(--rp-line) 1px, transparent 1px) 0 0 / 100% 88px,
    linear-gradient(90deg, var(--rp-line) 1px, transparent 1px) 0 0 / 88px 100%;
  /* The lattice fades out downward so it frames the hero and then gets
     out of the way of the reading surfaces below. */
  mask-image: linear-gradient(180deg, #000 0%, #000 22%, transparent 62%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 22%, transparent 62%);
}

.rally-pass > * { position: relative; z-index: 1; }

/* ── Masthead: a slate, not a header ────────────────────────────────── */
.rally-pass .rally-pass__wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rp-sig);
}

/* A live pip. Motion is the only thing on this page that says the offer
   is running rather than archived. */
.rally-pass .rally-pass__wordmark::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rp-sig);
  box-shadow: 0 0 0 0 var(--rp-hair);
  animation: rp-pip 2.4s ease-out infinite;
}

@keyframes rp-pip {
  0%   { box-shadow: 0 0 0 0 var(--rp-hair); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.rally-pass .rally-pass__who {
  margin: 0;
  font-size: clamp(30px, 6vw, 46px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

/* ── The tab rail ───────────────────────────────────────────────────── */
.rp-has-tabs .rp-panel { display: none; }
.rp-has-tabs .rp-panel.is-active { display: block; }

.rp-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin: 26px 0 26px;
  border-bottom: 1px solid var(--rp-line);
}

.rp-tabs__list {
  display: flex;
  gap: 2px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.rp-tabs__list::-webkit-scrollbar { display: none; }

/* Underlined, not pilled. A rail reads as instrumentation; a pill reads
   as a toy, and this page is asking somebody to spend money. */
.rp-tabs .rp-tabs__tab {
  position: relative;
  flex: 0 0 auto;
  padding: 12px 18px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--rp-dim);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 160ms ease;
}

.rp-tabs .rp-tabs__tab::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  background: var(--rp-sig);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
}

.rp-tabs .rp-tabs__tab:hover { color: var(--rp-ink); }
.rp-tabs .rp-tabs__tab.is-active { color: var(--rp-ink); }
.rp-tabs .rp-tabs__tab.is-active::after { transform: scaleX(1); }

.rp-tabs .rp-tabs__tab:focus-visible {
  outline: 2px solid var(--rp-sig);
  outline-offset: -4px;
}

.rp-tabs a.rp-tabs__benefits {
  flex: 0 0 auto;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--rp-sig);
}

.rp-tabs a.rp-tabs__benefits::after {
  content: " ↗";
  font-size: 11px;
}

/* ── Panel entrance: one orchestrated reveal, staggered ─────────────── */
.rp-panel > * {
  animation: rp-rise 420ms cubic-bezier(.2, .8, .2, 1) both;
}

.rp-panel > *:nth-child(1) { animation-delay: 0ms; }
.rp-panel > *:nth-child(2) { animation-delay: 60ms; }
.rp-panel > *:nth-child(3) { animation-delay: 120ms; }
.rp-panel > *:nth-child(4) { animation-delay: 180ms; }
.rp-panel > *:nth-child(n+5) { animation-delay: 220ms; }

/* Movement only, never opacity (2026-10-23). `both` with an opacity-0
   start held every panel's text invisible until the animation ran — a
   phone screenshot read whole sections at 0–30%, and a tab painted while
   animations are throttled stayed blank. The content is visible with or
   without the entrance; the entrance only moves it. */
@keyframes rp-rise {
  from { transform: translateY(10px); }
  to   { transform: none; }
}

/* ── THE CLAIM MODULE — the one thing this page is for ──────────────── */
.rally-pass .rally-welcome {
  position: relative;
  overflow: hidden;
  padding: 30px 30px 32px;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--color-accent, #E8550F) 9%, transparent) 0%, transparent 46%),
    var(--rp-panel);
  border: 1px solid var(--rp-line);
  border-radius: 16px;
}

/* A diagonal ember rule across the top-left corner — the pit-lane
   chevron, drawn in CSS rather than shipped as an asset. */
/* A pit-lane chevron, drawn as RULES rather than as a filled square.
   The first version was a 190px rotated block of --rp-bloom and it
   rendered as a muddy blob in the corner — seen only by screenshotting
   the page. Hairlines read as instrumentation; a filled shape reads as
   a rendering artefact. */
.rally-pass .rally-welcome::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 180px;
  height: 100%;
  pointer-events: none;
  background-image:
    linear-gradient(115deg, transparent 0 46%, var(--rp-hair) 46% 47%, transparent 47%),
    linear-gradient(115deg, transparent 0 60%, var(--rp-hair) 60% 61%, transparent 61%),
    linear-gradient(115deg, transparent 0 74%, var(--rp-hair) 74% 75%, transparent 75%);
}

.rally-pass .rally-welcome__eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rp-sig);
}

.rally-pass .rally-welcome__title {
  margin: 0 0 18px;
  font-size: clamp(28px, 5.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

/* The price. Oversized, tabular, and the WAS sits small and struck
   beside it — a board quotes the live figure, not the history. */
.rally-pass .rally-welcome__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 12px;
}

.rally-pass .rally-welcome__now {
  font-size: clamp(46px, 11vw, 74px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.92;
  font-variant-numeric: tabular-nums;
  color: var(--rp-ink);
}

.rally-pass .rally-welcome__was {
  font-size: 18px;
  font-weight: 600;
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
  color: var(--rp-dim);
}

.rally-pass .rally-welcome__off {
  align-self: center;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rp-deep);
  background: var(--rp-sig);
  border-radius: 999px;
}

.rally-pass .rally-welcome__decay {
  margin: 0 0 22px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--rp-dim);
}

/* Carries `a.`. An accent-filled control whose colour is stolen by
   `.peprally a` is invisible text — shipped on four brands once. */
.rally-pass a.rally-welcome__cta,
.rally-pass button.rally-welcome__cta {
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--rp-deep);
  background: var(--rp-sig);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 10px 30px -10px var(--rp-hair);
  transition: transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms ease;
}

.rally-pass a.rally-welcome__cta::after,
.rally-pass button.rally-welcome__cta::after {
  content: "→";
  transition: transform 160ms cubic-bezier(.2,.8,.2,1);
}

.rally-pass a.rally-welcome__cta:hover,
.rally-pass button.rally-welcome__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -12px var(--rp-hair);
}

.rally-pass a.rally-welcome__cta:hover::after,
.rally-pass button.rally-welcome__cta:hover::after { transform: translateX(4px); }
.rally-pass a.rally-welcome__cta:active,
.rally-pass button.rally-welcome__cta:active { transform: translateY(0); }

/* ── Cards: hairline, with an ember edge on the live one ────────────── */
.rally-pass .rally-pass__card {
  position: relative;
  padding: 24px 24px 26px;
  background: var(--rp-panel);
  border: 1px solid var(--rp-line);
  border-radius: 14px;
}

.rally-pass .rally-pass__card--points::before,
.rally-pass .rally-pass__card--rally::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  border-radius: 14px 0 0 14px;
  background: var(--rp-sig);
}

.rally-pass .rally-pass__card-title {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rp-dim);
}

/* The balance is a READOUT. Tabular so it does not jitter as it grows. */
.rally-pass .rally-pass__balance {
  margin: 0;
  font-size: clamp(42px, 9vw, 60px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--rp-ink);
}

.rally-pass .rally-pass__balance-sub {
  margin: 6px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rp-dim);
}

/* ── The redeem rungs read as a segmented gauge ─────────────────────── */
.rally-pass .rally-pass__tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.rally-pass .rally-pass__tier {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 96px;
  padding: 14px 16px;
  font-family: inherit;
  text-align: left;
  color: var(--rp-ink);
  background: var(--rp-deep);
  border: 1px solid var(--rp-line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease;
}

.rally-pass .rally-pass__tier:hover:not(:disabled) {
  border-color: var(--rp-sig);
  transform: translateY(-2px);
}

/* Locked is DIMMER INK, never lower opacity — alpha on text makes every
   contrast ratio a guess, and a dimmed control must stay readable or a
   member cannot tell what they are climbing toward. */
.rally-pass .rally-pass__tier--locked {
  cursor: not-allowed;
  color: var(--rp-dim);
  border-style: dashed;
}

.rally-pass .rally-pass__tier-value {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.rally-pass .rally-pass__tier-cost {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rp-dim);
}

.rally-pass .rally-pass__subhead {
  margin: 22px 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rp-dim);
}

/* ── Tables read as timing sheets ───────────────────────────────────── */
.rally-pass .rally-pass__table { width: 100%; border-collapse: collapse; }

.rally-pass .rally-pass__table th {
  padding: 10px 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: left;
  color: var(--rp-dim);
  border-bottom: 1px solid var(--rp-line);
}

.rally-pass .rally-pass__table td {
  padding: 14px 12px;
  font-size: 14px;
  border-bottom: 1px solid var(--rp-line);
}

.rally-pass .rally-pass__num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── Forms ──────────────────────────────────────────────────────────── */
.rally-pass .rally-pass__label {
  display: block;
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rp-dim);
}

.rally-pass .rally-pass__input:focus {
  outline: none;
  border-color: var(--rp-sig);
  box-shadow: 0 0 0 3px var(--rp-hair);
}

.rally-pass .rally-pass__submit {
  padding: 13px 26px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rp-deep);
  background: var(--rp-sig);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 160ms ease;
}

.rally-pass .rally-pass__submit:hover { transform: translateY(-2px); }

.rally-pass .rally-pass__submit--quiet {
  color: var(--rp-ink);
  background: transparent;
  border: 1px solid var(--rp-line);
}

.rally-pass .rally-pass__submit--quiet:hover { border-color: var(--rp-sig); }

/* ── The dialog ─────────────────────────────────────────────────────── */
.rp-modal {
  width: min(600px, calc(100vw - 32px));
  padding: 0;
  color: var(--color-text, #FFFFFF);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--color-accent, #E8550F) 10%, transparent) 0%, transparent 44%),
    var(--color-surface, #1A1A22);
  border: 1px solid var(--color-border, #1E1E26);
  border-radius: 18px;
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.8);
}

.rp-modal::backdrop {
  background: rgba(8, 8, 11, 0.72);
  backdrop-filter: blur(3px);
}

.rp-modal__dismiss { display: flex; justify-content: flex-end; margin: 0; }

.rp-modal .rp-modal__close {
  margin: 14px 14px 0 0;
  width: 34px;
  height: 34px;
  font-size: 19px;
  line-height: 1;
  color: var(--color-subtle, #E2E8F0);
  background: transparent;
  border: 1px solid var(--color-border, #1E1E26);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}

.rp-modal .rp-modal__close:hover {
  color: var(--color-text, #FFFFFF);
  border-color: var(--color-accent, #E8550F);
}

.rp-modal__body { padding: 2px 32px 32px; }

.rp-modal .rp-modal__eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent, #E8550F);
}

.rp-modal .rp-modal__title {
  margin: 0 0 24px;
  font-size: clamp(24px, 5vw, 31px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.rp-modal .rp-modal__accent { color: var(--color-accent, #E8550F); }

.rp-modal .rp-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
  counter-reset: rp-benefit;
}

/* Numbered like a spec sheet. The counter is decorative and lives in
   CSS, so a screen reader hears the heading, not "01". */
.rally-pass .rp-modal__item,
.rp-modal .rp-modal__item {
  position: relative;
  padding-left: 42px;
  border-left: 0;
  counter-increment: rp-benefit;
}

.rp-modal .rp-modal__item::before {
  content: counter(rp-benefit, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent, #E8550F);
}

.rp-modal .rp-modal__item-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* `--color-subtle`, never `--color-muted`. Measured on this sheet muted
   is a 3.63:1 hairline colour whose NAME invites being used for copy. */
.rp-modal .rp-modal__item-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-subtle, #E2E8F0);
}

.rp-modal .rp-modal__foot {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--color-border, #1E1E26);
}

.rp-modal a.rp-modal__link {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-accent, #E8550F);
}

/* ── Motion is a courtesy, not a requirement ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rally-pass .rally-pass__wordmark::before { animation: none; }
  .rp-panel > * { animation: none; }
  .rally-pass a.rally-welcome__cta,
  .rally-pass .rally-pass__tier,
  .rally-pass .rally-pass__submit { transition: none; }
}

@media (max-width: 640px) {
  /* The masthead was a two-column flex at every width, so "Sign out"
     sat on top of the email address on a phone. Seen in a 390px
     screenshot and by nothing else. */
  .rally-pass .rally-pass__masthead {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .rally-pass .rally-welcome { padding: 24px 20px 26px; border-radius: 14px; }
  .rally-pass .rally-pass__card { padding: 20px 18px 22px; }
  .rp-tabs { flex-direction: column; align-items: stretch; gap: 6px; }
  .rp-tabs a.rp-tabs__benefits { margin: 0 0 12px; padding-left: 18px; }
  .rp-modal__body { padding: 2px 20px 24px; }
  .rp-modal .rp-modal__item { padding-left: 34px; }
}


/* ── The offer module: price leads, clock supports ─────────────────────
   Screenshotted at 1280, the claim card and the progress card were 760px
   and 1040px wide — two cards that read as unrelated — and the clock's
   "6 days left" at 40px orange out-shouted the $63.99 it exists to
   create urgency about. The urgency was beating the offer.

   One grid. `minmax(0, …)` on both tracks because a grid item's default
   `min-width: auto` lets a long word push the column wider than its
   share, and the tabular price is exactly that kind of content. Declared
   at the BASE width as a single column and widened by a min-width query
   — the reverse would leave phones auto-placing into row 1. */
.rally-pass .rally-pass__offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

@media (min-width: 900px) {
  .rally-pass .rally-pass__offer {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

/* Both children fill the row, so the two cards align top and bottom
   instead of floating at their own natural heights. */
.rally-pass .rally-pass__offer > * { margin: 0; height: 100%; }

/* ── The clock is SUPPORT, not the headline ──────────────────────────
   `rally-progress__pct` is 42px, which is correct on the PUBLIC rally
   page where the clock IS the hero. Inside this module it out-shouted
   the $63.99 it exists to create urgency about, and it crushed the
   headline beside it into three cramped lines. Both seen only by
   screenshotting at 1280.

   Scoped to `.rally-pass__offer` so the public page is untouched — a
   blanket change would have fixed this surface and broken the one the
   rule was written for. */
.rally-pass .rally-pass__offer .rally-progress__pct {
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.rally-pass .rally-pass__offer .rally-progress__headline {
  font-size: 15px;
  line-height: 1.35;
}

/* The head was a two-column row built for a wide card. In this narrower
   column it forced the headline to wrap beside the number; stacking
   gives both their own line. */
.rally-pass .rally-pass__offer .rally-progress__head {
  display: block;
}

.rally-pass .rally-pass__offer .rally-progress__pct { margin-top: 2px; }

/* ── Super Sunday on the member page — 2026-09-28 ────────────────────
 *
 * Operator: "FIX THE DUMB ASS WHITE BUTTONS" — the panel had no rule
 * at all, so "Order both" was a bare browser button on a dark page.
 * The pair leads: rate on both, each Rally with its components, the
 * water, the price, one press. `button.` on the CTA, because that is
 * what it is. Colours are the pass's own tokens, so it is Ember on
 * PepRally and whatever the brand declares elsewhere. */
.rally-pass .rally-handover {
  border: 2px solid var(--rp-sig);
}

.rally-pass .rally-handover__eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rp-sig);
}

.rally-pass .rally-handover__title {
  margin: 0 0 16px;
  font-size: clamp(26px, 5vw, 36px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--rp-ink);
}

.rally-pass .rally-handover__pair {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.rally-pass .rally-handover__item {
  padding: 12px 14px;
  border: 1px solid var(--rp-line);
  border-radius: 10px;
  background: var(--rp-deep);
}

.rally-pass .rally-handover__mark {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: var(--rp-ink);
}

.rally-pass .rally-handover__doses,
.rally-pass .rally-welcome__doses {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--rp-dim);
}

.rally-pass .rally-welcome__doses { margin: -10px 0 16px; }

.rally-pass .rally-handover__doses strong,
.rally-pass .rally-welcome__doses strong { color: var(--rp-ink); }

.rally-pass .rally-handover__gift,
.rally-pass .rally-handover__lede {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--rp-dim);
}

.rally-pass .rally-handover__gift strong { color: var(--rp-ink); }

.rally-pass .rally-handover__prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 16px;
}

.rally-pass .rally-handover__was {
  font-size: 17px;
  text-decoration: line-through;
  color: var(--rp-dim);
}

.rally-pass .rally-handover__now {
  font-size: 40px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--rp-ink);
}

.rally-pass .rally-handover__form { margin: 0; }

/* Grouped with `a.` exactly as `rally-welcome__cta` is: the control is a
   <button> today, and if it is ever a link again `.peprally a` must not
   steal its ink. */
.rally-pass a.rally-handover__cta,
.rally-pass button.rally-handover__cta {
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: center;
  padding: 18px 30px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--rp-deep);
  background: var(--rp-sig);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 10px 30px -10px var(--rp-hair);
  transition: transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms ease;
}

.rally-pass a.rally-handover__cta::after,
.rally-pass button.rally-handover__cta::after { content: "→"; }

.rally-pass a.rally-handover__cta:hover,
.rally-pass button.rally-handover__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -12px var(--rp-hair);
}

@media (min-width: 720px) {
  .rally-pass .rally-handover__pair { grid-template-columns: 1fr 1fr; }
  .rally-pass a.rally-handover__cta,
  .rally-pass button.rally-handover__cta { width: auto; min-width: 320px; }
}

/* ── Locked deals, the explainer, the ladder, the squadron — 2026-10-12 ──
   Block-rooted, anchors carry `a.`, every token has a fallback, no alpha
   on text, no hairline token as copy (rally_pass_pit_wall_guard). */
.rally-pass .rally-locked__offer {
  padding: 16px 0;
  border-top: 1px solid var(--color-border, #1e1e26);
}
.rally-pass .rally-locked__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rally-pass .rally-locked__title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--color-text, #ffffff); }
.rally-pass .rally-locked__chip {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 2px;
  color: var(--color-text, #ffffff); background: var(--color-bg, #111116); border: 1px solid var(--color-border, #1e1e26);
}
.rally-pass .rally-locked__compound { margin: 2px 0 0; font-size: 13px; color: var(--color-subtle, #e2e8f0); }
.rally-pass .rally-locked__req { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--color-subtle, #e2e8f0); }
.rally-pass .rally-locked__req strong { color: var(--color-text, #ffffff); }
.rally-pass .rally-locked__foot { margin: 16px 0 0; }

/* Locked deals as cards with a lock and how to unlock (2026-10-26). */
.rally-pass .rally-locked__offer + .rally-locked__offer { margin-top: 12px; }
.rally-pass .rally-locked__lock { font-size: 18px; line-height: 1; }
.rally-pass .rally-locked__head .rally-locked__title { flex: 1; }
.rally-pass .rally-locked__how {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px dashed var(--color-border, #1e1e26);
  background: var(--color-bg, #111116);
}
.rally-pass .rally-locked__how-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text, #ffffff);
}
.rally-pass .rally-locked__routes { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.rally-pass .rally-locked__routes li { font-size: 14px; line-height: 1.5; color: var(--color-subtle, #e2e8f0); }
.rally-pass .rally-locked__routes strong { color: var(--color-text, #ffffff); }

.rally-pass .rally-explainer__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.rally-pass .rally-explainer__item { font-size: 14px; line-height: 1.6; color: var(--color-subtle, #e2e8f0); padding-left: 16px; border-left: 2px solid var(--color-accent, #e8550f); }
.rally-pass .rally-explainer__item strong { color: var(--color-text, #ffffff); }

.rally-pass .rank-ladder__tiers { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 16px 0 0; }
@media (min-width: 720px) { .rally-pass .rank-ladder__tiers { grid-template-columns: repeat(3, 1fr); } }
.rally-pass .rank-ladder__tier { padding: 14px; border: 1px solid var(--color-border, #1e1e26); border-radius: 2px; background: var(--color-bg, #111116); }
.rally-pass .rank-ladder__tier.is-mine { border-color: var(--color-accent, #e8550f); }
.rally-pass .rank-ladder__tier-name { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text, #ffffff); }
.rally-pass .rank-ladder__you { font-size: 10px; letter-spacing: 0.12em; padding: 2px 6px; margin-left: 6px; border-radius: 2px; color: var(--color-bg, #111116); background: var(--color-accent, #e8550f); }
.rally-pass .rank-ladder__ranks { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; }
.rally-pass .rank-ladder__rank { font-size: 14px; color: var(--color-subtle, #e2e8f0); }
.rally-pass .rank-ladder__rank.is-held { color: var(--color-text, #ffffff); font-weight: 600; }
.rally-pass .rank-ladder__pts { font-size: 12px; margin-left: 6px; color: var(--color-subtle, #e2e8f0); }
.rally-pass .rank-ladder__how { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: var(--color-subtle, #e2e8f0); }
.rally-pass .rank-ladder__how strong { color: var(--color-text, #ffffff); }
.rally-pass .rank-ladder__unlocks { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--color-border, #1e1e26); }
.rally-pass .rank-ladder__unlocks-title { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text, #ffffff); }
.rally-pass .rank-ladder__unlock-list { margin: 0; padding: 0 0 0 18px; }
.rally-pass .rank-ladder__unlock { font-size: 14px; line-height: 1.6; color: var(--color-subtle, #e2e8f0); }
.rally-pass .rank-ladder__unlock strong { color: var(--color-text, #ffffff); }

.rally-pass .squadron--captain { border-color: var(--color-accent, #e8550f); }
.rally-pass .squadron__big { margin: 0 0 8px; font-size: 16px; color: var(--color-subtle, #e2e8f0); }
.rally-pass .squadron__big strong { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-text, #ffffff); margin-right: 6px; }
.rally-pass .squadron__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; padding: 2px 6px; border-radius: 2px; color: var(--color-text, #ffffff); background: var(--color-bg, #111116); border: 1px solid var(--color-border, #1e1e26); }

/* ── The Captain and General command cards — 2026-10-15 ───────────────
   Operator: "the fucking captain need a tab in the account area that is
   glorious." A command card: an Ember rule down the left, the rank in
   small caps, the call sign large in a mono face, a stats strip, and the
   codes as chips. Brand tokens only (with this sheet's own fallbacks);
   ink is --color-text / --color-subtle, never --color-muted; anchors
   carry `a.` so `.brand a` cannot repaint them. */
.rally-pass .rc-command {
  position: relative;
  border-left: 4px solid var(--color-accent, #e8550f);
  background: var(--color-surface, #1a1a22);
}

.rally-pass .rc-command__head { margin-bottom: 22px; }

.rally-pass .rc-command__rank {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text, #ffffff);
}

.rally-pass .rc-command__star { color: var(--color-accent, #e8550f); margin-right: 4px; }

.rally-pass .rc-command__sign {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(34px, 8vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.08em;
  color: var(--color-text, #ffffff);
  overflow-wrap: anywhere;
}

.rally-pass .rc-command__sign--empty { font-size: 24px; letter-spacing: 0.02em; }

.rally-pass .rc-command__sub {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--color-subtle, #e2e8f0);
}

.rally-pass .rc-command__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 24px;
  background: var(--color-border, #1e1e26);
  border: 1px solid var(--color-border, #1e1e26);
}

@media (min-width: 640px) {
  .rally-pass .rc-command__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.rally-pass .rc-command__stat {
  padding: 14px 16px;
  background: var(--color-bg, #111116);
}

.rally-pass .rc-command__stat dt {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-subtle, #e2e8f0);
}

.rally-pass .rc-command__stat dd {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-text, #ffffff);
}

.rally-pass .rc-command__h {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text, #ffffff);
}

.rally-pass .rc-command__codes,
.rally-pass .rc-command__roster {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.rally-pass .rc-command__code,
.rally-pass .rc-command__row {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  background: var(--color-bg, #111116);
  border: 1px solid var(--color-border, #1e1e26);
}

.rally-pass .rc-command__code--off { opacity: 1; border-style: dashed; }

.rally-pass .rc-command__code-name,
.rally-pass .rc-command__row-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--color-text, #ffffff);
}

.rally-pass .rc-command__row-name { font-family: inherit; letter-spacing: 0; }

.rally-pass .rc-command__code-pct,
.rally-pass .rc-command__row-sign {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text, #ffffff);
}

.rally-pass .rc-command__code-url,
.rally-pass .rc-command__code-old,
.rally-pass .rc-command__row-meta,
.rally-pass .rc-command__note {
  font-size: 13px;
  color: var(--color-subtle, #e2e8f0);
  overflow-wrap: anywhere;
}

.rally-pass a.rc-command__row-link {
  justify-self: start;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text, #ffffff);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rally-pass .rc-command__form {
  display: grid;
  gap: 12px;
  margin: 0 0 8px;
}

@media (min-width: 640px) {
  .rally-pass .rc-command__form { grid-template-columns: 1fr 1fr auto; align-items: end; }
}

.rally-pass .rc-command__field {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text, #ffffff);
}

.rally-pass .rc-command__input {
  padding: 12px 14px;
  font-size: 16px;
  color: var(--color-text, #ffffff);
  background: var(--color-bg, #111116);
  border: 1px solid var(--color-border, #1e1e26);
  border-radius: 2px;
}

.rally-pass .rc-command__input:focus { outline: 2px solid var(--color-accent, #e8550f); outline-offset: 1px; }

.rally-pass button.rc-command__button { border: 0; cursor: pointer; }

/* The General's Pin control, and the Pinned chip on a member's deal. */
.rally-pass .rc-command__pin { margin: 6px 0 0; }
.rally-pass button.rc-command__pin-btn {
  padding: 8px 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text, #ffffff);
  background: var(--color-surface, #1a1a22);
  border: 1px solid var(--color-accent, #e8550f);
  border-radius: 2px;
  cursor: pointer;
}
.rally-pass .rally-secret__pin {
  display: inline-block;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text, #ffffff);
  border-bottom: 2px solid var(--color-accent, #e8550f);
}

/* Referral dollars buy peptides — the Captain tab's headline (2026-10-16). */
.rally-pass .rc-command__further { margin: 0 0 14px; }
.rally-pass .rc-command__further strong { color: var(--color-text, #ffffff); }

/* ── What a captain told their squadron — 2026-10-16 ───────────────── */
.rally-pass .squadron__notices { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-border, #1e1e26); }
.rally-pass .squadron__notice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rally-pass .squadron__notice { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 14px; color: var(--color-subtle, #e2e8f0); }
.rally-pass .squadron__notice--new { color: var(--color-text, #ffffff); font-weight: 600; }
.rally-pass .squadron__new { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 2px; color: var(--color-bg, #111116); background: var(--color-text, #ffffff); }
.rally-pass .squadron__notice-when { font-size: 12px; color: var(--color-subtle, #e2e8f0); }

/* ── Member Squadrons (squadrons/_panel, squadrons/show) — 2026-10-22 ──
   Found by reading the phone journey's screenshots: "Copy link", "Copy",
   "Submit for approval" and "Leave" wore the browser's default white face
   on the dark card, the goal's progress bar had no height and no fill,
   and the proposal's submit sat on the next label. Every rule names the
   block root; a <button> paints its own background; every colour is a
   token the member layout's brand declares, never a literal, never alpha
   on text. */
.rally-pass .squadron__form { display: grid; gap: 10px; margin-top: 14px; }
/* A bare link inside the block — "Open the group page", "The Group Code"
   — wears the brand's accent. On PepRally `.peprally a` already paints it
   from the same token, so nothing moves there; on a brand whose sheet
   declares no --color-accent (GlamPeptides, Glam Groups 2026-10-24) it fell
   through to the browser's default blue on the dark card: 1.84:1,
   measured by the journey's sweep. The fallback is the block's own
   subtle ink. Classed anchors (the CTAs) keep their own rules. */
.rally-pass .squadron a:not([class]),
.rally-pass .squadron-page__door a:not([class]) { color: var(--color-accent, #e2e8f0); }
.rally-pass .squadron__form a.rally-welcome__cta,
.rally-pass .squadron__form button.rally-welcome__cta { justify-self: start; }
.rally-pass .squadron__goal {
  margin: 16px 0 0;
  padding: 16px;
  border: 1px solid var(--color-border, #1e1e26);
  border-radius: 12px;
  background: var(--color-bg, #111116);
}
.rally-pass .squadron__goal[data-squadron-goal="met"] { border-color: var(--color-accent, #e8550f); }
.rally-pass .squadron__goal .rally-pass__code { margin: 4px 0 8px; font-size: 26px; }
.rally-pass .squadron__progress-text { margin: 10px 0 6px; font-size: 15px; font-weight: 700; color: var(--color-text, #ffffff); }
.rally-pass .squadron__bar {
  display: block;
  height: 10px;
  margin: 0 0 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-border, #1e1e26);
}
.rally-pass .squadron__bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--color-accent, #e8550f);
  transition: width 300ms ease;
}
.rally-pass .squadron__countdown {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text, #ffffff);
}
.rally-pass .squadron__countdown:empty { display: none; }
.rally-pass .squadron__note {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--color-accent, #e8550f);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text, #ffffff);
}
.rally-pass .squadron__fine { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--color-subtle, #e2e8f0); }
.rally-pass .squadron__share { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-border, #1e1e26); }
.rally-pass .squadron__share .rally-pass__label { margin-top: 14px; }
.rally-pass .squadron__share .rally-pass__input { margin-bottom: 8px; font-size: 13px; }
.rally-pass .squadron__message { min-height: 120px; resize: vertical; line-height: 1.5; }
.rally-pass button.squadron__btn,
.rally-pass a.squadron__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0 0 12px;
  padding: 0 18px;
  border: 1px solid var(--color-text, #ffffff);
  border-radius: 999px;
  background: var(--color-surface, #1a1a22);
  color: var(--color-text, #ffffff);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms cubic-bezier(.2,.8,.2,1);
}
.rally-pass button.squadron__btn:hover,
.rally-pass a.squadron__btn:hover { transform: translateY(-2px); }
.rally-pass button.squadron__btn.squadron__btn--quiet {
  margin-top: 16px;
  border-color: var(--color-border, #1e1e26);
  background: var(--color-bg, #111116);
  color: var(--color-subtle, #e2e8f0);
  font-weight: 600;
}
/* The stranger's door: Sign in filled, Join free outlined — both 44px. */
.rally-pass a.rally-pass__cta.squadron__btn {
  background: var(--cta-accent, #c1470c);
  border-color: var(--cta-accent, #c1470c);
  color: var(--color-text, #ffffff);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.rally-pass a.rally-pass__cta.rally-pass__cta--outline.squadron__btn {
  background: var(--color-surface, #1a1a22);
  border-color: var(--color-text, #ffffff);
  color: var(--color-text, #ffffff);
}
.rally-pass .squadron-page__door { margin-top: 20px; }
.rally-pass .squadron-page__door p { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }

/* ── The Squadron Code, ranks, bring five — 2026-10-23 ──────────────────
   The box is a real checkbox at 22px with a 44px tap row; the rules list
   is copy ink, never a hairline token. */
.rally-pass .squadron-code__list { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; line-height: 1.5; color: var(--color-text, #ffffff); }
.rally-pass .squadron-code__agree { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; margin: 12px 0 4px; font-size: 14px; line-height: 1.5; color: var(--color-text, #ffffff); cursor: pointer; }
.rally-pass .squadron-code__agree input[type="checkbox"] { flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--color-accent, #e8550f); }
.rally-pass .squadron-code__agree a { color: var(--color-text, #ffffff); text-decoration: underline; }
.rally-pass .squadron__goal[data-squadron-rank] { border-color: var(--color-border, #1e1e26); }
.rally-pass .squadron__goal[data-squadron-code-again] { border-color: var(--color-accent, #e8550f); }

/* Invite by email and Copy link share one row (2026-10-24) — the closed
   share block stays within a phone's 300px budget. */
.rally-pass .squadron__share-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Squadron rank insignia (2026-10-24) — the same metal shields as the
   member ranks and the Rally Captain insignia. A rank not yet earned is
   drawn in greyscale; its NAME is still read out by aria-label. */
.rally-pass .squadron__rank-insignia { display: flex; justify-content: center; margin: 4px 0 8px; }
.rally-pass .squadron__rank-insignia .squadron__rank-badge--locked { filter: grayscale(1); } /* 2026-10-26: grey, never darkened — "more visible" */

/* ── The Commander's yes and the shirt QR — 2026-10-24 ─────────────────
   Requests sit in a goal-style card; Approve / Decline share a row. The
   QR is drawn black on white (it must scan), capped so it never widens a
   phone. */
.rally-pass .squadron__request { padding: 10px 0; border-bottom: 1px solid var(--color-border, #1e1e26); }
.rally-pass .squadron__request .rally-pass__lede { margin: 0 0 8px; }
.rally-pass .squadron__request form { margin: 0; }
.rally-pass button.squadron__btn.squadron__btn--quiet.squadron__btn--inline { margin-top: 0; }
.rally-pass .squadron__qr { width: 160px; max-width: 100%; margin: 4px 0 12px; }
.rally-pass .squadron__qr svg { display: block; width: 100%; height: auto; }

/* ── GROUPCALL//NICKNAME and rally calls — 2026-10-24 ──────────────────
   The handle row reads VIPER// as a fixed prefix beside the field, so a
   member types DOC and sees VIPER//DOC. Every rule names the block root
   and anchors carry `a.`; colours are brand tokens, never literals. */
.rally-pass .squadron__handle-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rally-pass .squadron__handle-prefix { font-weight: 700; letter-spacing: 0.04em; color: var(--color-text, #ffffff); white-space: nowrap; }
.rally-pass .squadron__handle-input { flex: 1 1 120px; min-width: 0; text-transform: uppercase; }
.rally-pass .squadron__call { border: 1px solid var(--color-border, #1e1e26); border-radius: 10px; padding: 14px; margin: 10px 0; }
.rally-pass .squadron__call--mine { border-color: var(--cta-accent, #c1470c); }
.rally-pass .squadron__call-title { font-size: 1.05rem; font-weight: 700; color: var(--color-text, #ffffff); margin: 0 0 4px; }
.rally-pass .squadron__call-meta { color: var(--color-text, #ffffff); font-size: 0.9rem; margin: 0 0 8px; }
.rally-pass .squadron__call-note { color: var(--color-text, #ffffff); font-style: italic; margin: 0 0 8px; }
.rally-pass .squadron__call-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rally-pass .squadron__call-actions form { margin: 0; }
.rally-pass .squadron__in-list { color: var(--color-text, #ffffff); font-size: 0.9rem; margin: 6px 0 0; }
.rally-pass .squadron__notify { display: grid; gap: 8px; margin: 8px 0; }
.rally-pass .squadron__notify-row { display: flex; align-items: flex-start; gap: 10px; color: var(--color-text, #ffffff); }
.rally-pass .squadron__notify-row input { margin-top: 4px; min-width: 20px; min-height: 20px; }
.rally-pass .squadron__notify-row small { display: block; color: var(--color-text, #ffffff); }
.rally-pass .squadron__how-list { margin: 8px 0 0; padding-left: 18px; color: var(--color-text, #ffffff); font-size: 0.95rem; line-height: 1.5; }
.rally-pass .squadron__how-list li { margin: 0 0 6px; }

/* ── The squadron rank chart and FAQ inside the member area (2026-10-25) ──
   squadrons/_rank_chart and squadrons/_faq render on every store that runs
   groups (PepRally, Glam), and the member layout loads this sheet for all
   of them — so the link and the table are painted here in the member
   area's own tokens rather than left to the browser's #0000EE, which
   measured 1.84:1 on Glam's member card. */
.rally-pass .sq-chart a.sq-chart__faq { color: var(--color-text, #ffffff); text-decoration: underline; font-weight: 600; }
.rally-pass .sq-chart .sq-chart__table { width: 100%; border-collapse: collapse; }
.rally-pass .sq-chart .sq-chart__table th,
.rally-pass .sq-chart .sq-chart__table td { padding: 8px 10px; text-align: left; color: var(--color-text, #ffffff); }
.rally-pass .squadron-faq .squadron-faq__item summary { color: var(--color-text, #ffffff); cursor: pointer; font-weight: 700; }
.rally-pass .squadron-faq .squadron-faq__item p { color: var(--color-subtle, #e2e8f0); }

/* ── Two classes the markup used and no rule painted (2026-10-26) ──────
   `rally-pass__eyebrow` heads every squadron and team-buying card and
   rendered as the browser's default paragraph; `squadron__input` rides on
   `rally-pass__input` and needed the phone floor (16px, so iOS does not
   zoom on focus) and a thumb-sized height. */
.rally-pass .rally-pass__eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-subtle, #e2e8f0);
}
.rally-pass .rally-pass__input.squadron__input { min-height: 48px; font-size: 16px; }

/* ── Rank up: what climbing gets you, and the real ways up (2026-10-26) ──
   shared/_rank_up. Block root `.rank-up`; anchors carry `a.`; brand
   tokens only, no alpha on text. */
.rally-pass .rank-up .rank-up__status { margin: 0 0 18px; font-size: 22px; line-height: 1.25; font-weight: 600; color: var(--color-text, #ffffff); }
.rally-pass .rank-up .rank-up__status strong { font-weight: 800; }
.rally-pass .rank-up .rank-up__block { padding: 18px 0 0; margin-top: 18px; border-top: 1px solid var(--checkout-border, #2a2a35); }
.rally-pass .rank-up .rank-up__title { margin: 0 0 12px; font-size: 17px; font-weight: 800; color: var(--color-text, #ffffff); }
.rally-pass .rank-up .rank-up__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rally-pass .rank-up .rank-up__item {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--checkout-border, #2a2a35);
  background: var(--color-bg, #111116);
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-text, #ffffff);
}
.rally-pass .rank-up .rank-up__req { font-size: 14px; color: var(--color-subtle, #e2e8f0); }
.rally-pass .rank-up .rank-up__how,
.rally-pass .rank-up .rank-up__progress { font-size: 14px; font-weight: 700; color: var(--color-text, #ffffff); }
.rally-pass .rank-up .rank-up__held { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--color-text, #ffffff); }
.rally-pass .rank-up .rank-up__fine { margin: 10px 0 0; font-size: 13px; color: var(--color-subtle, #e2e8f0); }
.rally-pass .rank-up a.rank-up__link { color: var(--color-text, #ffffff); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* The vote's scope line (2026-10-26): public Rallies only. */
.rally-pass .rally-pass__note {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-border, #1e1e26);
  background: var(--color-bg, #111116);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-subtle, #e2e8f0);
}
.rally-pass .rally-pass__note strong { color: var(--color-text, #ffffff); }

/* ── Rank up in colour (2026-10-26) ─────────────────────────────────────
   Operator: "update the rank up page to be more than black and white."
   The tier banner is a solid fill per tier with white ink (slate #334155
   10.4:1, violet #5B21B6 9.4:1, amber #92400E 7.1:1, red #991B1B 8.3:1);
   the gradient sheen sits on ::before so no text is over an image (the
   contrast sweep refuses that). Numbered badges and route edges paint
   --cta-accent, a FILL under white (5.03:1 PepRally, 5.54:1 Glam). */
.rally-pass .rank-up .rank-up__hero {
  position: relative;
  overflow: hidden;
  margin: -6px 0 6px;
  padding: 22px 20px;
  border-radius: 14px;
  background-color: #334155;
  color: #FFFFFF;
}
.rally-pass .rank-up .rank-up__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}
.rally-pass .rank-up .rank-up__hero--underground { background-color: #5B21B6; }
.rally-pass .rank-up .rank-up__hero--vip { background-color: #92400E; }
.rally-pass .rank-up .rank-up__hero--general { background-color: #991B1B; }
.rally-pass .rank-up .rank-up__hero > * { position: relative; }
.rally-pass .rank-up .rank-up__hero-eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #FFFFFF; }
.rally-pass .rank-up .rank-up__hero .rank-up__status { margin: 0 0 6px; color: #FFFFFF; font-size: 24px; }
.rally-pass .rank-up .rank-up__hero-next { margin: 0; font-size: 15px; color: #FFFFFF; }
.rally-pass .rank-up .rank-up__title { display: flex; align-items: center; gap: 10px; }
.rally-pass .rank-up .rank-up__num {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cta-accent, #C1470C);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 800;
}
.rally-pass .rank-up .rank-up__item--route { border-left: 4px solid var(--cta-accent, #C1470C); }
.rally-pass .rank-up .rank-up__item--locked { border-left: 4px solid #5B21B6; }
.rally-pass .rank-up .rank-up__lock {
  justify-self: start;
  padding: 3px 10px;
  border-radius: 999px;
  background: #5B21B6;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── An Underground deal in savings from the normal price (2026-10-26) —
   shared/_deal_savings. The normal price struck, the deal price large, the
   total saving as the line a reader acts on. Brand tokens only. */
.rally-pass .deal-savings { margin: 10px 0 4px; display: grid; gap: 4px; min-width: 0; }
.rally-pass .deal-savings .deal-savings__prices { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.rally-pass .deal-savings .deal-savings__was { font-size: 16px; color: var(--color-subtle, #e2e8f0); }
.rally-pass .deal-savings .deal-savings__now { font-size: 26px; font-weight: 800; color: var(--color-text, #ffffff); }
.rally-pass .deal-savings .deal-savings__save {
  justify-self: start;
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--cta-accent, #C1470C);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 800;
}
.rally-pass .deal-savings .deal-savings__fine { margin: 0; font-size: 13px; color: var(--color-subtle, #e2e8f0); }

/* ── Keenicons on member pages (2026-10-27) — UiIconHelper ──────────────
   Operator: "use sexy icons that feel sleek". Inline, currentColor. Route
   icons sit in a filled --cta-accent circle with white glyphs (the same
   pair as the Rank up section numbers: 5.03:1 PepRally, 5.54:1 Glam). */
.rally-pass .ui-icon { display: inline-block; flex: none; vertical-align: -0.15em; }
.rally-pass .rally-locked .rally-locked__lock { display: inline-flex; color: var(--color-text, #ffffff); }
.rally-pass .rally-locked .rally-locked__chip { display: inline-flex; align-items: center; gap: 4px; }
.rally-pass .rally-locked .rally-locked__routes li { display: flex; align-items: flex-start; gap: 10px; }
.rally-pass .rally-locked .rally-locked__route-icon,
.rally-pass .rank-up .rank-up__route-icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cta-accent, #C1470C);
  color: #FFFFFF;
}
.rally-pass .rank-up .rank-up__item--route { grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; }
.rally-pass .rank-up .rank-up__item--route > * { grid-column: 2; }
.rally-pass .rank-up .rank-up__item--route > .rank-up__route-icon { grid-column: 1; grid-row: 1 / span 4; align-self: start; }
.rally-pass .rank-up .rank-up__lock { display: inline-flex; align-items: center; gap: 4px; }
.rally-pass .deal-savings .deal-savings__save { display: inline-flex; align-items: center; gap: 6px; }

/* ── Your squads, on the Deals tab (2026-10-29) ─────────────────────── */
.rally-pass .gb-mine .gb-mine__h { margin: 0 0 10px; font-size: 18px; font-weight: 800; color: var(--color-text, #ffffff); }
.rally-pass .gb-mine .gb-mine__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.rally-pass .gb-mine .gb-mine__item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; align-items: baseline; }
.rally-pass .gb-mine a.gb-mine__link { font-weight: 700; color: var(--color-text, #ffffff); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
.rally-pass .gb-mine .gb-mine__count { font-weight: 700; color: var(--color-text, #ffffff); }