/* Rally — #upgrade ("Class Upgrade"): the Rally Upgrade coming-soon section.
   Linked from index.html directly above the section. Builds on tokens.css and the page's own
   .wrap / .sec-head / .ovr / .note / .rv / .stagger / .btn-fill / .mag / .arw / .mono helpers.
   Every rule is scoped to .upgrade or .up-* so nothing leaks into the other sections. */

.upgrade{padding:clamp(56px,8vw,112px) 0;border-top:1px solid var(--sp-border-separator)}
.upgrade .ovr{display:flex;align-items:center;gap:12px;color:var(--sp-content-secondary)}

/* "Coming soon" pill — RallyCash gold, same pill language as .prow .flag */
.up-pill{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;white-space:nowrap;font:500 11px/1 var(--sp-font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sp-gold-ink);background:var(--sp-gold-bg);border:1px solid var(--sp-gold-halo);border-radius:var(--sp-r-pill);padding:5px 10px 5px 8px}
.up-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sp-gold)}

/* ── perk deck ────────────────────────────────────────────────────── */
.up-group{display:flex;justify-content:space-between;gap:16px;margin-top:clamp(44px,5.4vw,76px);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)}
.up-grid{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(24px,3vw,36px)}
.up-card{grid-column:span 2;display:flex;flex-direction:column;border:1px solid var(--sp-border-opaque);background:var(--sp-bg-primary)}
.up-card:nth-child(-n+2){grid-column:span 3}
.up-art{position:relative;aspect-ratio:380/168;overflow:hidden;background:var(--sp-bg-quiet)}
.up-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.up-body{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:clamp(18px,2vw,26px);border-top:2px dashed var(--sp-border-hairline)}
.up-body h3{font:700 clamp(20px,1.8vw,22px)/1.18 var(--sp-font-secondary);letter-spacing:-.02em}
.up-body p{flex:1;margin-bottom:4px;font:400 14.5px/1.6 var(--sp-font-primary);color:var(--sp-content-secondary)}

/* art eases in on hover; skipped for touch and reduced-motion */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .up-art img{transition:transform .8s var(--sp-ease-elegant)}
  .up-card:hover .up-art img{transform:scale(1.04)}
}

/* ── responsive ───────────────────────────────────────────────────── */
@media(max-width:960px){
  .up-grid{grid-template-columns:1fr}
  .up-card,.up-card:nth-child(-n+2){grid-column:auto;flex-direction:row}
  .up-art{flex:0 0 44%}
  .up-body{border-top:0;border-left:2px dashed var(--sp-border-hairline)}
}
@media(max-width:560px){
  .up-card,.up-card:nth-child(-n+2){flex-direction:column}
  .up-art{flex:none}
  .up-body{border-left:0;border-top:2px dashed var(--sp-border-hairline)}
}