/* ============================================================
   Stepace — Resources / Community Hub
   Bandit×VTLZR spec rendered in the Stepace design system.
   Builds on tokens/* and site.css primitives (btn, badge, marquee,
   display, eyebrow, cover, monogram, reveal).
   ============================================================ */

/* ---- KM SCROLL ODOMETER (signature, §7) ---------------------------- */
.odo { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--font-display); font-weight: var(--fw-heavy); line-height: 1; }
.odo__digits { display: inline-flex; }
.odo__col {
  position: relative; display: inline-block; width: 0.62em; height: 1em; overflow: hidden; text-align: center;
}
.odo__col .odo__reel {
  position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column;
  transition: transform 520ms cubic-bezier(0.22,1,0.36,1);
}
.odo__col .odo__reel span { height: 1em; display: block; }
.odo__dot { padding-inline: 0.02em; }
.odo__unit { font-family: var(--font-body); font-weight: var(--fw-demi); font-size: 0.42em; letter-spacing: var(--ls-caps); text-transform: uppercase; margin-left: 0.3em; opacity: 0.7; }
@media (prefers-reduced-motion: reduce) { .odo__reel { transition: none; } }

/* Header odometer chip */
.km-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  border: 1.5px solid rgba(255,255,255,0.28); border-radius: var(--radius-pill);
}
.km-chip .km-label { font-family: var(--font-body); font-weight: var(--fw-demi); font-size: var(--fs-2xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--sp-stone-300); }
.km-chip .odo { font-size: 15px; }
.nav.is-stuck .km-chip { border-color: rgba(255,255,255,0.28); }
@media (max-width: 1040px) { .km-chip { display: none; } }

/* ---- STICKY HEADER condense / hide-on-scroll (§8) ------------------ */
.nav { transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out); }
.nav.is-hidden { transform: translateY(-100%); }

/* ---- HERO (hub) ---------------------------------------------------- */
.hub-hero { position: relative; background: var(--sp-black); color: #fff; overflow: hidden; padding-block: clamp(140px, 20vh, 220px) clamp(56px, 9vh, 96px); }
.hub-hero .hero__bg { position: absolute; inset: 0; z-index: 0; }
.hub-hero .chrome-field { position: absolute; inset: 0; background: var(--chrome-gradient); opacity: .85; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(120% 100% at 80% 10%, #000 0%, transparent 60%); mask-image: radial-gradient(120% 100% at 80% 10%, #000 0%, transparent 60%); }
.hub-hero .vignette { position: absolute; inset: 0; background: radial-gradient(140% 120% at 50% 0%, transparent 25%, rgba(0,0,0,.72) 100%); }
.hub-hero__inner { position: relative; z-index: 2; }
.hub-hero__eyebrow { color: var(--sp-orange); }
.hub-hero h1 { margin: 18px 0 0; }
.hub-hero .lede { color: rgba(255,255,255,.82); margin-top: 22px; }
.hub-hero__actions { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }

/* Clip/mask headline reveal (§8) */
.clip-reveal > .line { display: block; overflow: hidden; }
.clip-reveal > .line > span { display: block; transform: translateY(102%); transition: transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.clip-reveal.is-in > .line > span { transform: translateY(0); }
.clip-reveal.is-in > .line:nth-child(2) > span { transition-delay: 90ms; }
.clip-reveal.is-in > .line:nth-child(3) > span { transition-delay: 180ms; }
@media (prefers-reduced-motion: reduce) { .clip-reveal > .line > span { transform: none; transition: none; } }

/* ---- SECTION HEADERS ----------------------------------------------- */
.hub-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 48px); }

/* ============================================================
   LEADERBOARD (§4)
   ============================================================ */
.lb { position: relative; }
.lb__bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.lb__agg { display: flex; flex-direction: column; gap: 6px; }
.lb__agg .odo { font-size: clamp(2.2rem, 6vw, 4.5rem); color: #fff; }
.section--dark .lb__agg .odo { color: #fff; }
.lb__agg .cap { font-family: var(--font-body); font-weight: var(--fw-demi); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); font-size: var(--fs-xs); color: var(--sp-stone-300); }

/* timeframe toggle */
.seg { display: inline-flex; border: 2px solid rgba(255,255,255,.28); border-radius: var(--radius-pill); overflow: hidden; }
.seg button { border: none; background: transparent; color: #fff; cursor: pointer; padding: 10px 18px;
  font-family: var(--font-body); font-weight: var(--fw-demi); text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--fs-xs);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.seg button[aria-selected="true"] { background: var(--sp-orange); color: #fff; }

/* podium */
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; align-items: end; }
.podium .pod {
  position: relative; border-radius: var(--radius-md); overflow: hidden; padding: 22px;
  background: var(--sp-ink-soft); border: 1.5px solid rgba(255,255,255,.14); color: #fff;
  display: flex; flex-direction: column; gap: 12px;
  transform: scale(.96); opacity: 0; transition: transform .5s cubic-bezier(0.22,1,0.36,1), opacity .5s ease-out;
}
.podium.is-in .pod { transform: scale(1); opacity: 1; }
.podium.is-in .pod:nth-child(2) { transition-delay: 80ms; }
.podium.is-in .pod:nth-child(3) { transition-delay: 160ms; }
.podium .pod--1 { border-color: var(--sp-orange); box-shadow: 0 0 0 1px var(--sp-orange), 0 0 40px -10px rgba(231,81,31,.6); }
.podium .pod--1 { animation: podpulse 3.4s ease-in-out infinite; }
@keyframes podpulse { 0%,100%{ box-shadow: 0 0 0 1px var(--sp-orange), 0 0 30px -14px rgba(231,81,31,.5);} 50%{ box-shadow: 0 0 0 1px var(--sp-orange), 0 0 52px -8px rgba(231,81,31,.85);} }
@media (prefers-reduced-motion: reduce){ .podium .pod{transform:none;opacity:1;} .podium .pod--1{animation:none;} }
.pod__rank { font-family: var(--font-display); font-weight: var(--fw-heavy); font-size: var(--fs-display-sm); line-height: .8; }
.pod--1 .pod__rank { color: var(--sp-orange); }
.pod__head { display: flex; align-items: center; gap: 12px; }
.pod__name { font-family: var(--font-display); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: var(--ls-tight); font-size: var(--fs-lg); line-height: .95; }
.pod__miles { font-family: var(--font-display); font-weight: var(--fw-heavy); letter-spacing: var(--ls-display); font-size: clamp(2rem,4vw,var(--fs-display-md)); line-height: .85; }
.pod__miles small { font-family: var(--font-body); font-weight: var(--fw-demi); font-size: .32em; letter-spacing: var(--ls-caps); margin-left: .3em; opacity: .7; }
.pod__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip-city { font-family: var(--font-body); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--fs-2xs); color: var(--sp-stone-300); }

/* delta arrows */
.delta { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-body); font-weight: var(--fw-demi); font-size: var(--fs-2xs); letter-spacing: .04em; }
.delta--up   { color: var(--sp-partner-green); }
.delta--down { color: var(--sp-partner-red); }
.delta--flat { color: var(--sp-stone-400); }

/* ranked table */
.lb-table { width: 100%; border-collapse: collapse; }
.lb-table thead th {
  text-align: left; font-family: var(--font-body); font-weight: var(--fw-demi); text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow); font-size: var(--fs-2xs); color: var(--sp-stone-300);
  padding: 10px 14px; border-bottom: 2px solid rgba(255,255,255,.18);
}
.lb-table thead th.num, .lb-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.lb-row { border-bottom: 1.5px solid rgba(255,255,255,.08); transition: background var(--dur-fast) var(--ease-out), transform 520ms cubic-bezier(0.22,1,0.36,1); }
.lb-row:nth-child(even) { background: rgba(255,255,255,.03); }
.lb-row:hover { background: rgba(255,255,255,.08); transform: scale(1.01); }
.lb-row td { padding: 12px 14px; font-family: var(--font-body); }
.lb-row .rk { font-family: var(--font-display); font-weight: var(--fw-heavy); font-size: var(--fs-lg); width: 54px; }
.lb-row .ath { display: flex; align-items: center; gap: 12px; }
.lb-row .ath .nm { font-weight: var(--fw-demi); text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--fs-sm); }
.lb-row .club { color: var(--sp-stone-300); text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--fs-2xs); font-weight: var(--fw-medium); }
.lb-row .mi { font-family: var(--font-display); font-weight: var(--fw-heavy); font-size: var(--fs-lg); }
.lb-row .streak { color: var(--sp-stone-300); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: var(--fw-medium); }
/* PR celebratory sweep (one-shot) */
.lb-row.is-pr { position: relative; }
.lb-row.is-pr::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(231,81,31,.5), transparent); transform: translateX(-100%); animation: prsweep 1s ease-out 1; pointer-events: none; }
@keyframes prsweep { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce){ .lb-row{transition:background var(--dur-fast) var(--ease-out);} .lb-row.is-pr::after{animation:none;display:none;} }

/* Highroller inline badge (spade = the mark) */
.hr-badge { display: inline-flex; align-items: center; gap: 3px; color: var(--sp-partner-gold); font-weight: var(--fw-demi); font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.hr-badge .sp { color: var(--sp-partner-gold); }

/* controls: filters + search + your rank */
.lb-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 24px 0; }
.lb-controls select, .lb-controls input {
  font-family: var(--font-body); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--ls-caps);
  font-size: var(--fs-xs); color: #fff; background: transparent; border: 1.5px solid rgba(255,255,255,.28);
  border-radius: var(--radius-sm); padding: 10px 12px; outline: none;
}
.lb-controls input::placeholder { color: rgba(255,255,255,.45); }
.lb-controls select option { color: #000; }
.lb-controls select:focus, .lb-controls input:focus { border-color: var(--sp-orange); }
.your-rank { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border: 1.5px solid var(--sp-orange); border-radius: var(--radius-pill); }
.your-rank .lbl { font-family: var(--font-body); font-weight: var(--fw-demi); text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--fs-2xs); color: var(--sp-stone-300); }
.your-rank .val { font-family: var(--font-display); font-weight: var(--fw-heavy); }
.lb-empty { padding: 40px 14px; text-align: center; color: var(--sp-stone-300); text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--fs-sm); }

/* ---- mobile: table collapses to cards ------------------------------ */
@media (max-width: 720px) {
  .podium { grid-template-columns: 1fr; }
  .lb-table, .lb-table thead, .lb-table tbody, .lb-table tr, .lb-table td, .lb-table th { display: block; }
  .lb-table thead { display: none; }
  .lb-row { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "rk ath mi" "rk meta mi"; gap: 2px 12px; padding: 14px; align-items: center; }
  .lb-row td { padding: 0; }
  .lb-row .rk { grid-area: rk; }
  .lb-row td.ath-cell { grid-area: ath; }
  .lb-row td.meta-cell { grid-area: meta; }
  .lb-row td.mi-cell { grid-area: mi; text-align: right; }
  .lb-row td.streak-cell { display: none; }
  .your-rank { margin-left: 0; }
}

/* ============================================================
   RECORDS (§7)
   ============================================================ */
.records { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rec { border: 1.5px solid rgba(255,255,255,.14); border-radius: var(--radius-md); padding: 22px; background: var(--sp-ink-soft); color: #fff; }
.rec .rl { font-family: var(--font-body); font-weight: var(--fw-demi); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); font-size: var(--fs-2xs); color: var(--sp-stone-300); }
.rec .rv { font-family: var(--font-display); font-weight: var(--fw-heavy); letter-spacing: var(--ls-display); font-size: clamp(2rem,4vw,var(--fs-display-md)); line-height: .85; margin: 12px 0 10px; }
.rec .rh { font-family: var(--font-body); font-weight: var(--fw-demi); text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--fs-sm); }
.rec .rm { color: var(--sp-stone-300); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-caps); margin-top: 4px; }
@media (max-width: 860px) { .records { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 460px) { .records { grid-template-columns: 1fr; } }

/* ============================================================
   HIGHROLLERS (§4b)
   ============================================================ */
.hr-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hr-card { position: relative; height: 300px; border-radius: var(--radius-md); perspective: 1200px; opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.hr-wall.is-in .hr-card { opacity: 1; transform: none; }
.hr-wall.is-in .hr-card:nth-child(2){ transition-delay: 70ms; }
.hr-wall.is-in .hr-card:nth-child(3){ transition-delay: 140ms; }
.hr-wall.is-in .hr-card:nth-child(4){ transition-delay: 210ms; }
.hr-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .35s cubic-bezier(0.22,1,0.36,1); }
.hr-card:hover .hr-inner, .hr-card:focus-within .hr-inner { transform: rotateY(180deg); }
.hr-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--radius-md); overflow: hidden; border: 1.5px solid rgba(255,255,255,.14); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; }
.hr-front { background: var(--sp-ink-soft); color: #fff; }
.hr-front .cover__grain { position:absolute; inset:0; background-image: var(--grain-url); background-size: 140px 140px; opacity: .12; mix-blend-mode: multiply; }
.hr-ring { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--sp-partner-gold); display: grid; place-items: center; color: var(--sp-partner-gold); }
.hr-ring::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid rgba(185,138,46,.5); animation: hrshimmer 2.6s ease-in-out infinite; }
@keyframes hrshimmer { 0%,100%{opacity:.3;transform:scale(1);} 50%{opacity:.9;transform:scale(1.08);} }
@media (prefers-reduced-motion: reduce){ .hr-ring::after{animation:none;} .hr-inner{transition:none;} .hr-card:hover .hr-inner,.hr-card:focus-within .hr-inner{transform:none;} .hr-back{ } }
.hr-front .nm { position: relative; font-family: var(--font-display); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: var(--ls-tight); font-size: var(--fs-xl); line-height: .95; }
.hr-front .hs { position: relative; color: var(--sp-orange); font-family: var(--font-display); font-weight: var(--fw-heavy); font-size: var(--fs-display-sm); line-height: .8; }
.hr-front .cc { position: relative; margin-top: 8px; }
.hr-back { background: var(--sp-orange); color: #fff; transform: rotateY(180deg); gap: 8px; }
.hr-back .row { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.3); padding: 8px 0; font-family: var(--font-body); font-weight: var(--fw-demi); text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--fs-xs); }
@media (prefers-reduced-motion: reduce){ .hr-card{opacity:1;transform:none;} .hr-back{position:relative;transform:none;margin-top:8px;} .hr-front{position:relative;} .hr-inner{position:relative;} .hr-card{height:auto;} .hr-face{position:relative;} }
@media (max-width: 900px) { .hr-wall { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .hr-wall { grid-template-columns: 1fr; } }

/* progress-to-highroller explainer */
.hr-explain { margin-top: 28px; border: 1.5px solid rgba(255,255,255,.16); border-radius: var(--radius-md); padding: clamp(20px,3vw,32px); display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center; }
.hr-explain h3 { margin: 0 0 8px; }
.hr-progress { }
.hr-progress .track { height: 12px; border-radius: var(--radius-pill); background: rgba(255,255,255,.12); overflow: hidden; }
.hr-progress .fill { height: 100%; width: 0; background: var(--sp-orange); border-radius: var(--radius-pill); transition: width 1.1s cubic-bezier(0.22,1,0.36,1); }
.hr-progress .lbl { margin-top: 10px; font-family: var(--font-body); font-weight: var(--fw-demi); text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--fs-xs); color: var(--sp-stone-300); }
@media (max-width: 760px){ .hr-explain{ grid-template-columns: 1fr; } }

/* ============================================================
   RESOURCE CARD GRID (§3)
   ============================================================ */
.res-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.res-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
  border: 1.5px solid var(--border-hairline); border-radius: var(--radius-md); background: var(--sp-white);
  box-shadow: var(--shadow-card); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.res-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.res-card .cover { aspect-ratio: 4/3; }
.res-card:hover .cover .monogram { transform: scale(1.05); transition: transform var(--dur-slow) var(--ease-out); }
.res-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.res-card__title { font-family: var(--font-display); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: var(--ls-tight); font-size: var(--fs-lg); line-height: .98; margin: 0; }
.res-card__desc { color: var(--text-body); font-size: var(--fs-sm); line-height: 1.45; margin: 0; }
.res-card__cta { margin-top: auto; font-family: var(--font-body); font-weight: var(--fw-demi); text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--fs-xs); display: inline-flex; gap: 6px; }
.res-card__cta::after { content: "→"; transition: transform var(--dur-base) var(--ease-out); }
.res-card:hover .res-card__cta::after { transform: translateX(4px); }
@media (max-width: 900px) { .res-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .res-grid { grid-template-columns: 1fr; } }

/* ---- EVENTS block (SweatPals) -------------------------------------- */
.powered { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--fs-2xs); color: var(--text-muted); }
.ev-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.ev-card { border: 1.5px solid var(--border-hairline); border-radius: var(--radius-md); overflow: hidden; background: var(--sp-white); display: flex; flex-direction: column; cursor: pointer; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); box-shadow: var(--shadow-card); }
.ev-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.ev-card__top { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1.5px solid var(--border-hairline); }
.ev-card__date { display: flex; align-items: baseline; gap: 6px; }
.ev-card__date .day { font-family: var(--font-display); font-weight: var(--fw-heavy); font-size: var(--fs-display-sm); line-height: .8; }
.ev-card__date .mo { font-family: var(--font-body); font-weight: var(--fw-demi); text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--fs-xs); }
.ev-card__body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ev-card__title { font-family: var(--font-display); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: var(--ls-tight); font-size: var(--fs-lg); line-height: .95; margin: 0; }
.ev-card__meta { color: var(--text-body); text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--fs-2xs); font-weight: var(--fw-medium); display: flex; align-items: center; gap: 6px; }
.ev-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
@media (max-width: 900px) { .ev-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .ev-grid { grid-template-columns: 1fr; } }

/* ---- EDITORIAL rows (§3) ------------------------------------------- */
.ed-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,56px); align-items: center; padding-block: clamp(28px,4vw,44px); }
.ed-row:nth-child(even) .ed-row__media { order: 2; }
.ed-row__media { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 16/11; }
.ed-row__kicker { color: var(--sp-orange); }
.ed-row h3 { margin: 14px 0 12px; }
@media (max-width: 800px) { .ed-row { grid-template-columns: 1fr; } .ed-row:nth-child(even) .ed-row__media { order: 0; } }

/* ---- PROMO banner (coaching + retreat) ----------------------------- */
.promo { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border: 2px solid var(--sp-black); border-radius: var(--radius-md); overflow: hidden; }
.promo__cell { position: relative; padding: clamp(32px,5vw,64px); display: flex; flex-direction: column; gap: 16px; min-height: 320px; justify-content: flex-end; overflow: hidden; }
.promo__cell--coach { background: var(--sp-black); color: #fff; }
.promo__cell--retreat { background: var(--sp-orange); color: #fff; }
.promo__cell .cover__grain { position:absolute; inset:0; background-image: var(--grain-url); background-size:140px 140px; opacity:.16; mix-blend-mode: multiply; }
.promo__cell > * { position: relative; }
@media (max-width: 760px) { .promo { grid-template-columns: 1fr; } }

/* ---- NEWSLETTER (mid + footer share styles from site.css) ---------- */
.hub-news { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hub-news__form { display: flex; gap: 10px; width: 100%; max-width: 620px; margin-top: 8px; flex-wrap: wrap; }
.hub-news__form input { flex: 1 1 160px; min-width: 0; font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-md); padding: 14px 16px; border: 2px solid rgba(255,255,255,.28); background: transparent; color: #fff; border-radius: var(--radius-sm); outline: none; transition: border-color var(--dur-fast) var(--ease-out); }
.hub-news__form input::placeholder { color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--fs-sm); }
.hub-news__form input:focus { border-color: var(--sp-orange); }
.hub-news__ok { color: var(--sp-orange); font-family: var(--font-script); font-size: 1.9rem; }
@media (max-width: 560px){ .hub-news__form { flex-direction: column; } }