/* Style C — retro sports-program print. Cream paper, halftone, 3 inks, slab type, off-register shadows. */
body { background-color: var(--navy);
  background-image: radial-gradient(rgba(29,43,83,.07) 1.2px, transparent 1.3px); background-size: 7px 7px; }
h1, h2, h3, .brand span, .step-num, .chip i, .total strong, .hc-row b, .card figcaption b, .badge b {
  font-family: var(--display); font-weight: 400; letter-spacing: 0; }
.hero h1 { color: var(--white); text-shadow: 4px 4px 0 var(--orange); line-height: 1; font-size: clamp(52px, 7.4vw, 108px); }
.section h2, .join h2 { line-height: 1.02; }
.volt { color: var(--volt); }
.kicker { background: var(--white); color: var(--navy); border: none; border-radius: 4px; }
.btn { border-radius: 10px; }
.btn-volt { background: var(--volt); color: var(--surface); box-shadow: 5px 5px 0 var(--white); }
.btn-volt:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--white); }
.btn-volt:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--white); }
.btn-ghost { border: 3px solid var(--white); color: var(--white); }
.btn-sm { box-shadow: 3px 3px 0 var(--white); }
.nav { background: linear-gradient(rgba(242,232,213,.95), rgba(242,232,213,0)); }
.nav nav a:not(.btn) { color: var(--white); }
.hero { align-items: center; }
.hero-shade { background: linear-gradient(90deg, rgba(242,232,213,.96) 0%, rgba(242,232,213,.85) 38%, rgba(242,232,213,0) 62%); }
.hero p, .works-with { color: var(--white); }
.works-with b { color: var(--volt); }
@media (max-width: 720px) { .hero { align-items: flex-end; } .hero-shade { background: linear-gradient(0deg, rgba(242,232,213,.97) 35%, rgba(242,232,213,0) 70%); } }
.ticker { background: var(--white); border-block: 4px solid var(--volt); }
.ticker span { color: var(--navy); } .ticker b { color: var(--surface); } .ticker i { color: var(--orange); } .ticker em { color: var(--volt); }
.step, .hc-card, .chip, .conversions div, .mode, .trio article, .features li { background: var(--surface); border: 3px solid var(--white); box-shadow: 6px 6px 0 var(--white); }
.step { border-radius: 14px; }
.step:hover { transform: translate(-3px, -3px) rotate(-.5deg); box-shadow: 9px 9px 0 var(--volt); }
.step p, .mode p, .trio p, .features li, .showcase-copy p, .lead, .chip b, .conversions, .card figcaption, .hc-caption { color: var(--muted); }
.step-num { background: var(--volt); color: var(--surface); }
.scoring { background: var(--navyDeep); }
.phone { border-color: var(--white); box-shadow: 8px 8px 0 var(--volt); }
.total { background: var(--white); color: var(--surface); }
.total strong { color: var(--orange); }
.hc-modes button { background: var(--surface); color: var(--white); border: 2px solid var(--white); }
.hc-modes button.on { background: var(--volt); color: var(--surface); border-color: var(--volt); }
.hc-bar { background: var(--navyDeep); border: 2px solid var(--white); }
.hc-fill.blue { background: var(--white); } .hc-fill.volt { background: var(--volt); }
.card img { filter: drop-shadow(8px 8px 0 rgba(29,43,83,.9)); border-radius: 14px; }
.badge img { filter: none; }
.join { background: var(--white); color: var(--navy); border-top: 6px solid var(--volt); }
.join h2 { color: var(--navy); } .join .volt { color: var(--orange); } .join p { color: var(--navyDeep); }
.join .kicker { background: var(--volt); color: var(--surface); }
.join .btn-ghost { border-color: var(--navy); color: var(--navy); }
.join .btn-volt { box-shadow: 5px 5px 0 var(--orange); }
.join .trophy { border: 4px solid var(--navy); border-radius: 18px; box-shadow: 10px 10px 0 var(--volt); }
.foot { color: var(--muted); }
.clubhouse { background: var(--navyDeep); }
.features li { box-shadow: 4px 4px 0 var(--white); border-width: 2px; }
.mode:hover, .trio article:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--volt); transition: transform .15s ease, box-shadow .15s ease; }
.pipe span { background: var(--white); color: var(--surface); }
.pipe span:last-child { background: var(--volt); }
.pipe i { background: var(--white); } .pipe i::after { border-left-color: var(--white); }
.soon { color: var(--volt); }
.showcase-copy h3, .trio h3, .mode h3 { color: var(--white); }