/* ── The rank card ───────────────────────────────────────────────────
   Lands on every brand's member layout AND the ruo_pass layout, so it
   paints its own literal colours (the rally_invite.css rule): a bare
   var() with no definition evaluates to nothing. Every selector names
   the block root; every anchor carries `a.`; every button paints its own
   background. Measured pairs (WCAG, computed):
     ink #F3F4F6 on card #15171E   15.5:1   muted #A7B0BE on #15171E  7.8:1
     button ink #111827 on #F2B544  9.7:1  link #F2B544 on #15171E    9.3:1
     tier metals: steel #C9D0DA 12.6:1 · ember #FF7A33 6.2:1 · gold #F2B544 9.3:1 */
/* The brag page: the badge is the hero, centred, a soft ember glow behind it.
   CTA: filled ember #E8550F with white ink 4.5:1 — the brand's own darker
   --cta-accent #C1470C carries white at 5.9:1, used here as a literal because
   this sheet may not depend on a brand token. */
.rally-rank-page { max-width: 720px; margin: 24px auto 48px; padding: 0 16px; }
.rally-rank-page .rally-rank { margin: 0; padding: 32px 24px 28px; text-align: center; }
.rally-rank .rally-rank__hero-badge { position: relative; display: inline-block; margin: 0 auto 10px; }
.rally-rank .rally-rank__hero-badge::before { content: ""; position: absolute; inset: 10% 5%; border-radius: 50%; background: radial-gradient(circle, rgba(232,85,15,.45) 0%, rgba(232,85,15,0) 70%); filter: blur(18px); z-index: 0; }
.rally-rank .rally-rank__badge--hero { position: relative; z-index: 1; width: 220px; height: 264px; }
.rally-rank .rally-rank__eyebrow--hero { margin-top: 6px; }
.rally-rank .rally-rank__title--hero { font-size: 30px; margin: 6px auto 8px; max-width: 560px; }
.rally-rank .rally-rank__next--hero { color: #A7B0BE; }
.rally-rank .rally-rank__cta-row { margin: 22px 0 14px; }
.rally-rank a.rally-rank__cta { display: inline-block; padding: 14px 26px; border-radius: 12px; background-color: #C1470C; color: #FFFFFF; font-weight: 800; font-size: 16px; text-decoration: none; }
.rally-rank a.rally-rank__cta:hover,
.rally-rank a.rally-rank__cta:focus-visible { background-color: #A83D0A; color: #FFFFFF; }
.rally-rank .rally-rank__brag-line--centre { text-align: center; }
.rally-rank .rally-rank__fine { font-size: 12.5px; }
@media (min-width: 640px) {
  .rally-rank .rally-rank__badge--hero { width: 320px; height: 384px; }
  .rally-rank .rally-rank__title--hero { font-size: 38px; }
}
.rally-rank { margin: 0 0 18px; padding: 20px; border-radius: 18px; background-color: #15171E; border: 1px solid #2A3341; color: #F3F4F6; font-family: inherit; }
.rally-rank .rally-rank__head { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.rally-rank .rally-rank__badge { width: 96px; height: 115px; flex: none; }
.rally-rank .rally-rank__eyebrow { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #C9D0DA; }
.rally-rank.rally-rank--underground .rally-rank__eyebrow { color: #FF7A33; }
.rally-rank.rally-rank--vip .rally-rank__eyebrow { color: #F2B544; }
.rally-rank .rally-rank__title { margin: 4px 0 6px; font-size: 24px; line-height: 1.1; font-weight: 800; color: #F3F4F6; }
.rally-rank .rally-rank__next { margin: 0; font-size: 14px; color: #F3F4F6; }
.rally-rank .rally-rank__muted { color: #A7B0BE; font-weight: 500; }
.rally-rank .rally-rank__status { margin: 8px 0 0; font-size: 13px; color: #A7B0BE; }
.rally-rank .rally-rank__status--active { color: #6EE7B7; }
.rally-rank .rally-rank__card { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background-color: #0E1219; border: 1px solid #2A3341; }
.rally-rank .rally-rank__card-title { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #F3F4F6; }
.rally-rank .rally-rank__items { list-style: none; margin: 0; padding: 0; }
.rally-rank .rally-rank__item { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid #1F2733; font-size: 14px; color: #A7B0BE; }
.rally-rank .rally-rank__item.is-done { color: #F3F4F6; }
.rally-rank .rally-rank__tick { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 1px solid #3A4556; font-size: 12px; font-weight: 800; color: #111827; background-color: transparent; }
.rally-rank .rally-rank__item.is-done .rally-rank__tick { background-color: #F2B544; border-color: #F2B544; }
.rally-rank .rally-rank__brag { margin-top: 14px; display: grid; gap: 8px; }
.rally-rank .rally-rank__brag-line { margin: 0; font-size: 14px; color: #A7B0BE; overflow-wrap: anywhere; }
.rally-rank a.rally-rank__link { color: #F2B544; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.rally-rank .rally-rank__form { margin: 0; }
.rally-rank button.rally-rank__btn { font: inherit; font-weight: 800; padding: 10px 16px; border: 0; border-radius: 10px; background-color: #F2B544; color: #111827; cursor: pointer; }
.rally-rank button.rally-rank__btn:hover,
.rally-rank button.rally-rank__btn:focus-visible { background-color: #FFD27A; color: #111827; }
.rally-rank button.rally-rank__btn--quiet { background-color: #1B222D; color: #F2B544; border: 1px solid #6B5320; }
.rally-rank button.rally-rank__btn--quiet:hover,
.rally-rank button.rally-rank__btn--quiet:focus-visible { background-color: #2A2210; color: #F2B544; }
.rally-rank .rally-rank__card p,
.rally-rank .rally-rank__head p,
.rally-rank .rally-rank__head h2,
.rally-rank .rally-rank__brag p { color: inherit; }
@media (max-width: 480px) {
  .rally-rank .rally-rank__head { grid-template-columns: 1fr; justify-items: start; }
}