/* ==================================================
   ELOBOOSTLEAGUE · BECOME A BOOSTER (recruitment)
   ================================================== */

/* hero CTA + art */
.bh-grid { display: grid; grid-template-columns: 1fr auto; gap: 35.2px; align-items: center; }
@media (max-width: 880px) { .bh-grid { grid-template-columns: 1fr; } }
.bh-ctas { display: flex; gap: 13.2px; flex-wrap: wrap; margin-top: 28.6px; }
.bh-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: calc(var(--r)+2.2px);
  padding: 24.2px;
  width: 308px;
}
@media (max-width: 880px) { .bh-card { width: 100%; } }
.bh-card .row { display: flex; align-items: center; justify-content: space-between; gap: 11px; padding: 12.1px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.bh-card .row:last-child { border-bottom: none; }
.bh-card .rl { font-family: var(--font-ui); font-size: 11px; letter-spacing: calc(0.1em*var(--tracking)); text-transform: uppercase; color: rgba(255,255,255,0.6); display: inline-flex; align-items: center; gap: 8.8px; }
.bh-card .rl svg { width: 15.4px; height: 15.4px; color: var(--gold); }
.bh-card .rv2 { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; color: #fff; }
.bh-card .rv2 em { font-style: normal; color: var(--gold); }

/* ---------- perks ---------- */
.perk-grid { max-width: 1452px; margin: 33px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15.4px; }
@media (max-width: 940px) { .perk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .perk-grid { grid-template-columns: 1fr; } }
.perk {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 26.4px 24.2px;
  transition: transform 320ms var(--ease-out), box-shadow 320ms ease, border-color 320ms ease;
}
.perk:hover { transform: translateY(-3.3px); box-shadow: var(--shadow-pop); border-color: var(--royal-soft); }
.perk-ico { width: 48.4px; height: 48.4px; border-radius: var(--r); background: var(--royal-tint); border: 1px solid var(--royal-soft); color: var(--royal); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 17.6px; transition: transform 360ms var(--ease-out); }
.perk:hover .perk-ico { transform: rotate(-6deg) scale(1.08); }
.perk-ico svg { width: 23.1px; height: 23.1px; }
.perk h3 { font-family: var(--font-display); font-weight: 700; font-size: 19.8px; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 7.7px; }
.perk h3 em { font-style: normal; color: var(--royal); }
.perk p { font-size: 14.85px; line-height: 1.62; color: var(--ink-soft); }

/* ---------- requirements + steps split ---------- */
.req-grid { max-width: 1452px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 24.2px; align-items: start; }
@media (max-width: 880px) { .req-grid { grid-template-columns: 1fr; } }
.req-card, .steps-card { background: #fff; border: 1px solid var(--line); border-radius: calc(var(--r)+2.2px); padding: 28.6px; box-shadow: var(--shadow-soft); }
.req-card h2, .steps-card h2 { font-family: var(--font-display); font-weight: 700; font-size: 24.2px; letter-spacing: -0.02em; color: var(--ink); margin: 4.4px 0 17.6px; }
.req-card h2 em, .steps-card h2 em { font-style: normal; color: var(--royal); }
.req-list { display: flex; flex-direction: column; gap: 12.1px; list-style: none; }
.req-list li { display: flex; align-items: flex-start; gap: 13.2px; font-size: 15.4px; line-height: 1.5; color: var(--ink-soft); }
.req-list li b { color: var(--ink); font-weight: 700; }
.req-list .ck { flex-shrink: 0; width: 24.2px; height: 24.2px; border-radius: 6.6px; background: var(--green); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-top: 1.1px; }
.req-list .ck svg { width: 13.2px; height: 13.2px; }

.bstep { display: flex; gap: 15.4px; padding: 15.4px 0; border-bottom: 1px solid var(--line-soft); }
.bstep:last-child { border-bottom: none; padding-bottom: 0; }
.bstep:first-child { padding-top: 0; }
.bstep .n { flex-shrink: 0; width: 33px; height: 33px; border-radius: 8.8px; background: var(--royal); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 15.4px; display: inline-flex; align-items: center; justify-content: center; }
.bstep h3 { font-family: var(--font-display); font-weight: 700; font-size: 17.05px; color: var(--ink); margin-bottom: 3.3px; }
.bstep p { font-size: 14.3px; line-height: 1.55; color: var(--ink-soft); }

/* ---------- earnings band (dark) ---------- */
.earn-section {
  background:
    radial-gradient(902px 462px at 100% 0%, rgba(255,70,85,0.08), transparent 55%),
    linear-gradient(170deg, var(--royal) 0%, var(--royal-deep) 60%, var(--navy) 100%);
  color: #fff;
}
.earn-grid { max-width: 1452px; margin: 33px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15.4px; }
@media (max-width: 760px) { .earn-grid { grid-template-columns: 1fr; } }
.earn-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r); padding: 28.6px 24.2px; text-align: center; transition: background 240ms ease, transform 240ms var(--ease-out); }
.earn-card:hover { background: rgba(255,255,255,0.1); transform: translateY(-3.3px); }
.earn-card .v { font-family: var(--font-display); font-weight: 700; font-size: 48.4px; letter-spacing: -0.03em; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.earn-card .v .pre { color: #fff; font-size: 30.8px; vertical-align: 6.6px; }
.earn-card .l { font-family: var(--font-ui); font-size: 11px; letter-spacing: calc(0.12em*var(--tracking)); text-transform: uppercase; color: rgba(255,255,255,0.6); margin: 11px 0 4.4px; }
.earn-card .s { font-size: 14.3px; color: rgba(255,255,255,0.72); line-height: 1.5; }

/* ---------- application form ---------- */
.apply-wrap { max-width: 968px; margin: 0 auto; }
.apply-card { background: #fff; border: 1px solid var(--line); border-radius: calc(var(--r)+4.4px); box-shadow: var(--shadow-pop); overflow: hidden; }
.apply-head { padding: 26.4px 30.8px; background: var(--bg-soft); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 15.4px; flex-wrap: wrap; }
.apply-head h2 { font-family: var(--font-display); font-weight: 700; font-size: 24.2px; letter-spacing: -0.02em; color: var(--ink); }
.apply-head h2 em { font-style: normal; color: var(--royal); }
.apply-head .chip { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: calc(0.1em*var(--tracking)); text-transform: uppercase; color: var(--green); display: inline-flex; align-items: center; gap: 7.7px; }
.apply-head .chip .dot { width: 7.7px; height: 7.7px; border-radius: 50%; background: var(--green); }
.apply-body { padding: 28.6px 30.8px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17.6px; }
@media (max-width: 600px) { .field-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--font-ui); font-size: 10.45px; font-weight: 600; letter-spacing: calc(0.14em*var(--tracking)); text-transform: uppercase; color: var(--ink-muted); margin-bottom: 7.7px; }
.field input, .field select, .field textarea {
  border: 1px solid var(--line); background: #fff; border-radius: var(--r);
  padding: 12.1px 14.3px; font-family: var(--font-body); font-size: 14.85px; color: var(--ink);
  outline: none; transition: border-color 180ms ease, box-shadow 180ms ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-muted); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--royal-soft); box-shadow: 0 0 0 3px var(--royal-tint); }
.field textarea { resize: vertical; min-height: 99px; line-height: 1.55; }
.rank-pills { display: flex; flex-wrap: wrap; gap: 8.8px; }
.rank-pill {
  font-family: var(--font-ui); font-size: 12.1px; font-weight: 600; letter-spacing: calc(0.04em*var(--tracking));
  color: var(--ink-soft); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 1098.9px;
  padding: 9.9px 15.4px; cursor: pointer; transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.rank-pill:hover { border-color: var(--royal-soft); color: var(--royal); }
.rank-pill.on { background: var(--royal); border-color: var(--royal); color: #fff; }
.apply-foot { margin-top: 24.2px; display: flex; align-items: center; justify-content: space-between; gap: 17.6px; flex-wrap: wrap; }
.apply-foot .note { font-family: var(--font-ui); font-size: 11px; letter-spacing: calc(0.06em*var(--tracking)); text-transform: uppercase; color: var(--ink-muted); display: inline-flex; align-items: center; gap: 7.7px; }
.apply-foot .note svg { width: 14.3px; height: 14.3px; color: var(--green); }
.apply-ok {
  display: none; align-items: center; gap: 13.2px;
  padding: 17.6px 19.8px; margin-top: 19.8px;
  background: var(--green-tint, #e8f7ee); border: 1px solid #b8e8c8; border-radius: var(--r);
  color: #178041; font-size: 15.4px; font-weight: 600;
}
.apply-ok.show { display: flex; }
.apply-ok svg { width: 22px; height: 22px; flex-shrink: 0; }

/* ---------- centered section head ---------- */
.sec-head-c { max-width: 836px; margin: 0 auto; text-align: center; padding: 0 26.4px; }
.sec-head-c .section-eyebrow { justify-content: center; }
.sec-head-c .section-title { margin: 0 auto; }
.sec-lead-c { font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); max-width: 616px; margin: 15.4px auto 0; }
.sec-lead-c em { font-style: normal; color: var(--royal); }

/* ---------- requirement highlight cards ---------- */
.bh-reqs { max-width: 1452px; margin: 0 auto; padding: 0 26.4px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 17.6px; }
@media (max-width: 880px) { .bh-reqs { grid-template-columns: 1fr; } }
.bh-req { background: #fff; border: 1px solid var(--line); border-radius: calc(var(--r) + 2.2px); box-shadow: var(--shadow-soft); padding: 22px; display: flex; gap: 15.4px; align-items: flex-start; }
.bh-req-ico { width: 44px; height: 44px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bh-req-ico svg { width: 20.9px; height: 20.9px; }
.bh-req-ico.amber { background: color-mix(in srgb, var(--orange) 14%, #fff); color: var(--orange-deep); }
.bh-req-ico.blue { background: var(--royal-tint); color: var(--royal); }
.bh-req-ico.green { background: color-mix(in srgb, var(--green) 13%, #fff); color: var(--green); }
.bh-req h3 { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 5.5px; }
.bh-req p { font-size: 13.75px; line-height: 1.55; color: var(--ink-muted); }

/* ---------- perks · numbered ---------- */
.perks-num { max-width: 1452px; margin: 37.4px auto 0; padding: 0 26.4px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 17.6px; }
@media (max-width: 980px) { .perks-num { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .perks-num { grid-template-columns: 1fr; } }
.pnum { position: relative; border: 1px solid var(--line); border-radius: calc(var(--r) + 4.4px); padding: 24.2px 24.2px 26.4px; min-height: 272.8px; display: flex; flex-direction: column; transition: transform 320ms var(--ease-out), box-shadow 320ms ease; }
.pnum:hover { transform: translateY(-4.4px); box-shadow: var(--shadow-pop); }
.pnum .pn { font-family: var(--font-display); font-weight: 800; font-size: 63.8px; line-height: 0.85; letter-spacing: -0.04em; margin-bottom: 19.8px; }
.pnum h3 { font-family: var(--font-display); font-weight: 700; font-size: 17.6px; letter-spacing: 0.01em; text-transform: uppercase; margin-bottom: 9.9px; }
.pnum p { font-size: 14.3px; line-height: 1.6; }
.pnum.fill { background: linear-gradient(165deg, var(--orange), var(--orange-deep)); border-color: transparent; color: #fff; }
.pnum.fill .pn { color: rgba(255,255,255,0.34); }
.pnum.fill h3 { color: #fff; }
.pnum.fill p { color: rgba(255,255,255,0.92); }
.pnum.plain { background: var(--bg-soft); }
.pnum.plain .pn { color: var(--line); }
.pnum.plain h3 { color: var(--ink); }
.pnum.plain p { color: var(--ink-soft); }
body[data-perkfill="solid"] .pnum.plain { background: var(--bg-soft); }
body[data-perkfill="flat"] .pnum.fill { background: var(--bg-soft); border-color: var(--line); color: var(--ink); }
body[data-perkfill="flat"] .pnum.fill .pn { color: var(--line); }
body[data-perkfill="flat"] .pnum.fill h3 { color: var(--ink); }
body[data-perkfill="flat"] .pnum.fill p { color: var(--ink-soft); }

/* ---------- our values ---------- */
.values-grid { max-width: 1452px; margin: 37.4px auto 0; padding: 0 26.4px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24.2px; }
@media (max-width: 880px) { .values-grid { grid-template-columns: 1fr; } }
.value { background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: calc(var(--r) + 2.2px); padding: 30.8px 28.6px; }
.value-ico { width: 48.4px; height: 48.4px; border-radius: 11px; background: var(--royal-tint); color: var(--royal); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 19.8px; }
.value-ico svg { width: 22px; height: 22px; }
.value h3 { font-family: var(--font-display); font-weight: 700; font-size: 18.7px; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink); margin-bottom: 13.2px; }
.value p { font-size: 14.85px; line-height: 1.7; color: var(--ink-soft); }

/* ---------- apply + requirements (side by side) ---------- */
.apply-split { max-width: 1452px; margin: 30.8px auto 0; padding: 0 26.4px; display: grid; grid-template-columns: 1fr 440px; gap: 24.2px; align-items: start; }
@media (max-width: 940px) { .apply-split { grid-template-columns: 1fr; } }
.apply-aside { display: flex; flex-direction: column; gap: 24.2px; }
body[data-reqside="left"] .apply-split { grid-template-columns: 440px 1fr; }
body[data-reqside="left"] .apply-aside { order: -1; }
@media (max-width: 940px) { body[data-reqside="left"] .apply-split { grid-template-columns: 1fr; } body[data-reqside="left"] .apply-aside { order: 0; } }

/* ---------- hero stat card layout ---------- */
.page-hero-inner.bh-grid { align-items: end; }
@media (max-width: 880px) { .page-hero-inner.bh-grid { align-items: start; } }
.bh-card .rl svg { width: 15.4px; height: 15.4px; }

/* ---------- earnings band section title (override dark) ---------- */
.earn-section .section-eyebrow-text { color: var(--gold); }
.earn-section .section-title { color: #fff; }
.earn-section .section-title em { color: var(--gold); }
.earn-card .v .suf { color: var(--gold); }

/* ---------- voices from the roster ---------- */
.voices-grid { max-width: 1452px; margin: 33px auto 0; padding: 0 26.4px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 19.8px; }
@media (max-width: 880px) { .voices-grid { grid-template-columns: 1fr; } }
.voice { background: #fff; border: 1px solid var(--line); border-radius: calc(var(--r) + 2.2px); padding: 26.4px; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; transition: transform 320ms var(--ease-out), box-shadow 320ms ease, border-color 320ms ease; }
.voice:hover { transform: translateY(-3.3px); box-shadow: var(--shadow-pop); border-color: var(--royal-soft); }
.voice-stars { display: inline-flex; gap: 3.3px; color: var(--gold-deep); margin-bottom: 14.3px; }
.voice-stars svg { width: 16.5px; height: 16.5px; }
.voice blockquote { font-family: var(--font-body); font-size: 15.4px; line-height: 1.64; color: var(--ink-soft); flex: 1; }
.voice blockquote b { color: var(--ink); font-weight: 700; }
.voice-id { display: flex; align-items: center; gap: 12.1px; margin-top: 19.8px; padding-top: 17.6px; border-top: 1px solid var(--line-soft); }
.voice-av { width: 41.8px; height: 41.8px; border-radius: 50%; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 16.5px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.voice-av.av-a { background: linear-gradient(135deg, var(--royal), var(--royal-deep)); }
.voice-av.av-b { background: linear-gradient(135deg, #2cc468, #168a44); }
.voice-av.av-c { background: linear-gradient(135deg, var(--orange), var(--orange-deep)); }
.voice-meta b { display: block; font-size: 14.85px; color: var(--ink); font-weight: 700; line-height: 1.2; }
.voice-meta span { font-family: var(--font-ui); font-size: 10.45px; font-weight: 600; letter-spacing: calc(0.08em * var(--tracking)); text-transform: uppercase; color: var(--ink-muted); }

/* ---------- apply · two-column (intro + form) ---------- */
.apply-2col { grid-template-columns: 0.85fr 1.15fr; gap: 44px; align-items: start; }
@media (max-width: 940px) { .apply-2col { grid-template-columns: 1fr; gap: 30.8px; } }
.apply-intro { order: 1; padding-top: 6.6px; }
.apply-card { order: 2; }
body[data-formside="left"] .apply-2col { grid-template-columns: 1.15fr 0.85fr; }
body[data-formside="left"] .apply-intro { order: 2; }
body[data-formside="left"] .apply-card { order: 1; }
@media (max-width: 940px) { body[data-formside="left"] .apply-intro, body[data-formside="left"] .apply-card { order: 0; } }
.apply-intro h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30.8px, 3vw, 44px); line-height: 1.04; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 19.8px; }
.apply-intro h2 em { font-style: normal; color: var(--royal); }
.apply-lead { font-size: 15.95px; line-height: 1.66; color: var(--ink-soft); margin-bottom: 17.6px; max-width: 46ch; }
.apply-lead em { font-style: normal; color: var(--royal); font-weight: 600; }
.apply-status { display: inline-flex; align-items: center; gap: 9.9px; font-size: 14.85px; color: var(--ink-soft); margin-top: 4.4px; }
.apply-status .dot { width: 9.9px; height: 9.9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 18%, transparent); }
.apply-req { margin-top: 30.8px; }
.req-star { color: var(--orange-deep); }
.field-hint { font-family: var(--font-body); font-size: 12.65px; color: var(--ink-muted); margin-top: 7.7px; line-height: 1.45; }
.btn-apply { width: 100%; justify-content: center; margin-top: 24.2px; background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%); color: #fff; font-size: 14.3px; padding: 16.5px 22px; box-shadow: 0 10px 30px -10px rgba(255,122,42,0.55); transition: filter 180ms ease, transform 180ms var(--ease-out); }
.btn-apply:hover { filter: brightness(1.05); transform: translateY(-1.1px); }
.btn-apply svg { width: 16.5px; height: 16.5px; }
.apply-fineprint { text-align: center; font-family: var(--font-ui); font-size: 11px; letter-spacing: calc(0.04em * var(--tracking)); text-transform: uppercase; color: var(--ink-muted); margin-top: 15.4px; }

/* ---------- hero · headline + pills ---------- */
.page-hero-inner.hero-split { display: grid; grid-template-columns: 1fr auto; gap: 48.4px; align-items: center; }
@media (max-width: 860px) { .page-hero-inner.hero-split { grid-template-columns: 1fr; gap: 26.4px; } }
.hero-copy { min-width: 0; }
/* cream hero now (pages.css, not the old dark pages-v5) — the lead must be dark-on-cream,
   not white, and sized to match the other explanation-page leads (UI batch 10). */
.hero-copy .page-lead { font-size: clamp(16.8px, 1.4vw, 19.2px); font-weight: 400; line-height: 1.5; color: #4a4e57; }
.hero-pills-col { display: grid; grid-template-columns: max-content max-content; gap: 11px; margin-top: 24.2px; }

/* ==================================================
   FONT HIERARCHY CORRECTION
   League stays on big headings + numeric stats; small titles, names, subtitles
   and reading text use Barlow. Appended last to override the per-element
   --font-display at equal specificity.
   ================================================== */
.perk h3,
.req-card h2, .steps-card h2,
.bstep h3,
.apply-head h2,
.bh-req h3,
.pnum h3,
.value h3,
.voice-av { font-family: var(--font-body); }