.redzone-page::before { height: 500px; }
.rz-nav { display: flex; align-items: center; gap: 22px; }
.rz-nav a { color: #bcbcb5; text-decoration: none; font: 700 .62rem/1 IBM Plex Mono, monospace; text-transform: uppercase; letter-spacing: .065em; }
.rz-nav a:hover, .rz-nav a[aria-current="page"] { color: var(--signal); }
.rz-theme-button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #4b4b45; border-radius: 0; padding: 7px 9px; color: #bcbcb5; background: transparent; cursor: pointer; font: 700 .57rem/1 IBM Plex Mono, monospace; text-transform: uppercase; }
.rz-theme-button:hover { color: var(--on-signal); border-color: var(--signal); background: var(--signal); }

.rz-kicker, .rz-number { color: var(--signal); font: 700 .61rem/1 IBM Plex Mono, monospace; letter-spacing: .13em; text-transform: uppercase; }
.rz-hero { min-height: 415px; display: flex; flex-direction: column; justify-content: center; color: var(--white); }
.rz-hero-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(285px, .65fr); gap: 55px; align-items: end; }
.rz-hero h1 { margin: 18px 0 0; font: 900 clamp(4.4rem, 8.5vw, 8rem)/.77 Barlow Condensed, sans-serif; letter-spacing: -.04em; text-transform: uppercase; }
.rz-hero h1 em { color: var(--signal); font-style: normal; }
.rz-hero-grid > div > p { max-width: 760px; margin: 25px 0 0; color: #aaa9a2; font: 500 .74rem/1.6 IBM Plex Mono, monospace; }
.rz-winner { border: 1px solid #55554f; padding: 20px; color: var(--white); background: #181815; box-shadow: 7px 7px 0 var(--signal); }
.rz-winner > span:first-child { color: var(--signal); font: 700 .53rem/1 IBM Plex Mono, monospace; letter-spacing: .11em; }
.rz-winner > strong { display: block; margin-top: 9px; font: 900 1.9rem/.9 Barlow Condensed, sans-serif; text-transform: uppercase; }
.rz-price { margin-top: 22px; font: 900 3.35rem/.8 Barlow Condensed, sans-serif; }
.rz-price small { margin-left: 5px; color: #aaa9a2; font: 600 .65rem/1 IBM Plex Mono, monospace; text-transform: uppercase; }
.rz-winner p { min-height: 38px; margin: 13px 0; color: #aaa9a2; font-size: .64rem; line-height: 1.5; }
.rz-promo { display: inline-block; padding: 5px 6px; color: var(--ink) !important; background: var(--signal); font-size: .48rem !important; }
.rz-winner > a { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 18px; border: 1px solid var(--signal); padding: 12px; color: var(--signal); text-decoration: none; font: 800 .68rem/1 Inter, sans-serif; text-transform: uppercase; }
.rz-winner > a:hover { color: var(--ink); background: var(--signal); }
.rz-winner > a small { grid-column: 1 / -1; border-top: 1px solid currentColor; padding-top: 5px; font: 700 .45rem/1 IBM Plex Mono, monospace; }

.rz-disclosure { display: flex; gap: 18px; margin: 0 0 42px; border: 1px solid var(--ink); padding: 13px 15px; background: var(--signal); box-shadow: 4px 4px 0 var(--ink); }
.rz-disclosure strong { flex: 0 0 auto; font: 800 .66rem/1.4 Inter, sans-serif; text-transform: uppercase; }
.rz-disclosure span { font: 500 .62rem/1.45 IBM Plex Mono, monospace; }
.rz-explainer { display: grid; grid-template-columns: .7fr 1fr 1fr; gap: 28px; margin-bottom: 64px; border-top: 4px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 23px 0 28px; }
.rz-explainer h2, .rz-section-heading h2, .rz-notes h2 { margin: 8px 0 0; font: 900 2rem/.9 Barlow Condensed, sans-serif; text-transform: uppercase; }
.rz-explainer p { margin: 18px 0 0; color: var(--muted); font-size: .73rem; line-height: 1.6; }
.rz-explainer p strong { color: var(--ink); }
.rz-explainer .rz-number, .rz-section-heading .rz-number { color: var(--league); }

.rz-section-heading { min-height: 85px; display: flex; align-items: end; justify-content: space-between; gap: 24px; border-top: 4px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 17px 0; }
.rz-section-heading > span { color: var(--faint); font: 500 .55rem/1 IBM Plex Mono, monospace; text-transform: uppercase; }
.rz-option { display: grid; grid-template-columns: 48px minmax(170px,.8fr) minmax(160px,.65fr) minmax(230px,1.3fr) 105px; gap: 18px; align-items: center; min-height: 125px; border-bottom: 1px solid var(--line); padding: 17px 10px 17px 0; }
.rz-option:hover { background: var(--surface-hover); box-shadow: inset 5px 0 0 var(--signal-dark); }
.rz-option.rz-featured { background: color-mix(in srgb, var(--signal) 12%, var(--surface)); }
.rz-rank { align-self: stretch; display: grid; place-items: center; border-right: 1px solid var(--line); color: var(--faint); font: 700 .58rem/1 IBM Plex Mono, monospace; }
.rz-option-name span { color: var(--league); font: 700 .51rem/1 IBM Plex Mono, monospace; text-transform: uppercase; letter-spacing: .08em; }
.rz-option-name h3 { margin: 7px 0 5px; font: 900 1.55rem/.9 Barlow Condensed, sans-serif; text-transform: uppercase; }
.rz-option-name b { color: var(--muted); font: 600 .58rem/1.35 IBM Plex Mono, monospace; }
.rz-cost strong, .rz-requirement strong { display: block; font: 800 .78rem/1.3 Inter, sans-serif; }
.rz-cost span, .rz-requirement span { display: block; margin-top: 7px; color: var(--faint); font: 500 .55rem/1.45 IBM Plex Mono, monospace; }
.rz-option > a { justify-self: end; color: var(--ink); font: 800 .58rem/1.3 Inter, sans-serif; text-align: right; text-decoration-thickness: 1px; text-underline-offset: 4px; text-transform: uppercase; }

.rz-decider { margin-top: 70px; }
.rz-decider-grid { display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid var(--ink); }
.rz-decider-grid > div { min-height: 205px; border-right: 1px solid var(--line); padding: 24px 24px 28px 0; }
.rz-decider-grid > div + div { padding-left: 24px; }
.rz-decider-grid > div:last-child { border-right: 0; padding-right: 0; }
.rz-decider-grid span { color: var(--league); font: 700 .52rem/1.3 IBM Plex Mono, monospace; letter-spacing: .07em; }
.rz-decider-grid strong { display: block; margin-top: 14px; font: 900 1.55rem/.95 Barlow Condensed, sans-serif; text-transform: uppercase; }
.rz-decider-grid p { color: var(--muted); font-size: .7rem; line-height: 1.55; }
.rz-notes { margin: 65px 0 80px; border: 1px solid var(--ink); padding: 25px; background: var(--surface); box-shadow: 6px 6px 0 var(--ink); }
.rz-notes ul { display: grid; gap: 9px; margin: 22px 0; padding-left: 20px; color: var(--muted); font-size: .68rem; line-height: 1.5; }
.rz-source-links { display: flex; flex-wrap: wrap; gap: 9px 15px; border-top: 1px solid var(--line); padding-top: 17px; font: 600 .56rem/1.4 IBM Plex Mono, monospace; text-transform: uppercase; }
.rz-source-links span { color: var(--faint); }
.rz-source-links a { color: var(--ink); text-underline-offset: 3px; }

@media (max-width: 860px) {
  .rz-hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .rz-hero { padding: 45px 0; }
  .redzone-page::before { height: 720px; }
  .rz-winner { max-width: 430px; }
  .rz-option { grid-template-columns: 42px minmax(150px,.8fr) minmax(145px,.65fr) minmax(200px,1fr); }
  .rz-option > a { grid-column: 4; }
}

@media (max-width: 620px) {
  .redzone-page::before { height: 670px; }
  .rz-nav { gap: 11px; }
  .rz-nav a { font-size: .52rem; }
  .rz-nav a:first-child { display: none; }
  .rz-theme-button span:last-child { display: none; }
  .rz-hero h1 { font-size: 4.15rem; }
  .rz-hero-grid > div > p { font-size: .66rem; }
  .rz-winner { max-width: none; }
  .rz-disclosure { flex-direction: column; gap: 6px; }
  .rz-explainer { grid-template-columns: 1fr; gap: 4px; }
  .rz-explainer p { margin-top: 8px; }
  .rz-section-heading > span { display: none; }
  .rz-option { grid-template-columns: 38px minmax(0,1fr); gap: 10px 13px; padding-block: 20px; }
  .rz-rank { grid-row: 1 / 5; }
  .rz-option-name, .rz-cost, .rz-requirement, .rz-option > a { grid-column: 2; justify-self: start; text-align: left; }
  .rz-cost, .rz-requirement { border-top: 1px solid var(--line); padding-top: 10px; }
  .rz-decider-grid { grid-template-columns: 1fr; }
  .rz-decider-grid > div, .rz-decider-grid > div + div, .rz-decider-grid > div:last-child { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); padding: 22px 0; }
  .rz-notes { padding: 20px; }
}