/* ============================================================================
 * RALLY RACE — #race
 * Light section in the #bills / #upgrade language: .sec-head + .ovr + .note header,
 * hairline rules, mono labels, the site blue accent, and the boarding-pass dashed
 * divider. Linked from index.html directly above the section. Every rule is scoped
 * to .race / .race-* so nothing leaks into neighbouring sections. Reveals reuse the
 * page's own .rv / .stagger system; race.js only flips the status chip.
 * ========================================================================== */

.race{padding:clamp(56px,8vw,112px) 0;border-top:1px solid var(--sp-border-separator)}
.race .ovr{display:flex;align-items:center;gap:12px}
.race a:focus-visible{outline:2px solid var(--sp-bg-accent);outline-offset:3px}
.race-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── status chip: "Starts 19 Oct 2026" -> "Live now" (race.js) ────────────── */
.race-chip{--pulse:39,110,241;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:6px 11px 6px 9px;border:1px solid var(--sp-bg-accent);border-radius:var(--sp-r-pill);background:var(--sp-bg-accent-subtle);color:var(--sp-bg-accent);font:500 11px/1 var(--sp-font-mono);letter-spacing:.12em;text-transform:uppercase}
.race-chip[data-state="live"]{--pulse:5,148,79;border-color:var(--sp-bg-success);background:var(--sp-bg-success-subtle);color:var(--sp-content-success)}
.race-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:rgb(var(--pulse));animation:race-pulse 2.4s var(--sp-ease-elegant) infinite}
@keyframes race-pulse{0%{box-shadow:0 0 0 0 rgba(var(--pulse),.5)}70%{box-shadow:0 0 0 7px rgba(var(--pulse),0)}100%{box-shadow:0 0 0 0 rgba(var(--pulse),0)}}

/* ── headline: .sec-head h2 scale, two lines ──────────────────────────────── */
.race .sec-head h2.race-h2{max-width:none}
.race-h2 span{display:block}
.race-h2 .light{color:var(--sp-content-secondary)}

/* ── prize + CTA | illustrative leaderboard ───────────────────────────────── */
.race-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:clamp(32px,5vw,72px);align-items:start}
.race-prize-row{border-top:1px solid var(--sp-content-primary);border-bottom:1px solid var(--sp-border-opaque);padding:clamp(20px,2.4vw,30px) 4px}
.race-prize{display:flex;align-items:center;gap:16px;font:700 clamp(22px,2.6vw,32px)/1.1 var(--sp-font-secondary);letter-spacing:-.02em}
.race-prize i{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:1px solid var(--sp-bg-accent);border-radius:50%;background:var(--sp-bg-accent-subtle);color:var(--sp-bg-accent);font-size:17px}
.race-tc{display:inline-block;margin-top:14px;font:400 13px/1.3 var(--sp-font-primary);color:var(--sp-content-secondary);text-decoration:underline;text-decoration-color:var(--sp-border-hairline);text-underline-offset:3px;transition:color .15s,text-decoration-color .15s}
.race-tc:hover{color:var(--sp-bg-accent);text-decoration-color:currentColor}
.race-cta{margin-top:clamp(24px,2.8vw,32px)}
.race-note{margin-top:16px;font:400 13px/1.5 var(--sp-font-primary);color:var(--sp-content-secondary)}

/* boarding-pass card: square, hairline border, dashed tear line under the header */
.race-board{border:1px solid var(--sp-border-opaque);border-radius:var(--sp-r-card);background:var(--sp-bg-primary)}
.race-board-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px);border-bottom:2px dashed var(--sp-border-hairline)}
.race-board-t{font:500 11px/1 var(--sp-font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sp-content-secondary)}
.race-tag{padding:5px 10px;border:1px solid var(--sp-bg-accent);border-radius:var(--sp-r-pill);color:var(--sp-bg-accent);font:500 11px/1 var(--sp-font-mono);letter-spacing:.12em;text-transform:uppercase}
.race-rows{list-style:none;padding:4px clamp(18px,2vw,26px) 0}
.race-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--sp-border-opaque)}
.race-rk{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--sp-bg-tertiary);color:var(--sp-content-primary);font:500 13px/1 var(--sp-font-mono);font-variant-numeric:tabular-nums}
.race-bar{display:block;height:8px;border-radius:var(--sp-r-pill);background:var(--sp-bg-tertiary);overflow:hidden}
.race-bar i{display:block;width:var(--w);height:100%;border-radius:inherit;background:var(--sp-content-primary);transform:scaleX(0);transform-origin:left center;transition:transform 1.1s var(--sp-ease-elegant) calc(.25s + var(--i) * .12s)}
.race-board.in .race-bar i{transform:none}
.race-pts{font:600 17px/1 var(--sp-font-primary);font-variant-numeric:tabular-nums;white-space:nowrap}
.race-pts .u{font-size:.62em;font-weight:500;color:var(--sp-content-secondary)}
.is-podium .race-rk{background:var(--sp-bg-accent);color:#fff}
.is-podium .race-bar i{background:var(--sp-bg-accent)}
.race-cut{display:flex;align-items:center;gap:12px;padding:14px 0 4px;color:var(--sp-bg-accent);font:500 11px/1 var(--sp-font-mono);letter-spacing:.12em;text-transform:uppercase}
.race-cut::before,.race-cut::after{content:"";flex:1;border-top:2px dashed var(--sp-bg-accent);opacity:.5}
.race-gap{padding:10px 0 6px .6em;text-align:center;color:var(--sp-content-tertiary);font:500 14px/1 var(--sp-font-mono);letter-spacing:.6em}
.race-row.is-you{margin:6px -12px 0;padding:14px 12px;border:1px solid var(--sp-bg-accent);background:var(--sp-bg-accent-subtle)}
.is-you .race-rk{background:var(--sp-content-primary);color:#fff}
.is-you .race-bar{background:var(--sp-bg-primary)}
.is-you .race-bar i{background:var(--sp-content-primary)}
.race-mid{min-width:0}
.race-sub{display:block;margin-top:10px;font:500 12.5px/1.3 var(--sp-font-primary);color:var(--sp-bg-accent)}
.race-cap{padding:16px clamp(18px,2vw,26px) clamp(16px,1.8vw,22px);font:400 13px/1.5 var(--sp-font-primary);color:var(--sp-content-secondary)}

/* ── how it works (same rhythm as #upgrade's .up-group + dashed card dividers) ─ */
.race-how{margin-top:clamp(44px,5.4vw,76px)}
.race-group{padding-bottom:14px;border-bottom:1px solid var(--sp-content-primary);font:500 11px/1 var(--sp-font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sp-content-secondary)}
.race-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.race-steps li{padding:clamp(22px,2.6vw,32px) clamp(16px,2vw,28px) 4px;border-left:2px dashed var(--sp-border-hairline)}
.race-steps li:first-child{padding-left:0;border-left:0}
.race-n{font:500 13px/1 var(--sp-font-mono);color:var(--sp-bg-accent);font-variant-numeric:tabular-nums}
.race-steps h3{margin:16px 0 8px;font:700 clamp(20px,1.8vw,22px)/1.18 var(--sp-font-secondary);letter-spacing:-.02em}
.race-steps p{max-width:26ch;font:400 14.5px/1.6 var(--sp-font-primary);color:var(--sp-content-secondary)}

/* ── responsive ───────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .race-main{grid-template-columns:1fr}
  .race-board{max-width:520px}
  .race-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .race-steps li{padding:24px 0 20px 20px}
  .race-steps li:nth-child(odd){padding-left:0;border-left:0}
  .race-steps li:nth-child(n+3){border-top:1px solid var(--sp-border-opaque)}
}
@media(max-width:560px){
  .race-steps{grid-template-columns:1fr}
  .race-steps li,.race-steps li:nth-child(odd){padding:22px 0 20px;border-left:0}
  .race-steps li+li{border-top:1px solid var(--sp-border-opaque)}
  .race-row{gap:12px}
  .race-prize i{width:40px;height:40px}
}

@media(prefers-reduced-motion:reduce){
  .race-dot{animation:none}
  .race-bar i{transform:none;transition:none}
}