/* =====================================================================
   Landing page (/). Every class is prefixed "lp-".
   Shared pieces (.card, .btn, .grade, .book, .ring, .duo, .bar, .seg,
   .eyebrow, .h2, .lead, .panel, .well, .inset…) come from main.css.
   ===================================================================== */

/* ---------- shared bits ---------- */
/* The design sets no base line-height (browser "normal"); explicit values below follow it. */
.lp { line-height: normal; }
.lp-h2 { margin-top: 14px; }
.lp-lead { margin-top: 16px; }
.lp-lead--560 { max-width: 560px; }
.lp-lead--620 { max-width: 620px; }
.lp-lead--640 { max-width: 640px; }
.lp-lead--660 { max-width: 660px; }
.lp-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.lp-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.lp-card-head__meta { font: 400 11px/1 var(--f-mono); color: var(--ink-3); }

/* ---------- hero ---------- */
.lp-hero { position: relative; max-width: var(--container); margin: 0 auto; padding: clamp(48px, 4.5vw, 88px) var(--gutter) 0; }
.lp-glow { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; }
.lp-glow--steel { width: 640px; height: 640px; left: -240px; top: -180px; background: #2a5fc4; opacity: .26; }
.lp-glow--orange { width: 520px; height: 520px; right: -180px; top: 140px; background: #ff7a1a; opacity: .15; }

.lp-livepill {
  position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px;
  border-radius: 999px; background: var(--bg-tile); border: 2px solid var(--line-3);
  font: 400 12px/1 var(--f-mono); letter-spacing: .06em; color: var(--ink-2);
}
.lp-livepill__live { color: var(--green); }
.lp-livepill__sep { color: var(--line-4); }

.lp-h1 { position: relative; margin-top: 26px; color: var(--ink); }
.lp-h1 > span { display: block; }

.lp-hero__grid { position: relative; margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 44px; align-items: start; }
.lp-hero__left { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.lp-hero__sub { max-width: 540px; font-size: 19px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.lp-trust { font: 400 12px/1.5 var(--f-mono); letter-spacing: .04em; color: var(--ink-3); }
.lp-ladder { max-width: 540px; padding: 18px 20px; border-radius: 18px; background: rgba(14, 22, 34, .75); border: 2px solid var(--line-3); }
.lp-ladder__head { display: flex; justify-content: space-between; gap: 12px; font: 400 11px/1.2 var(--f-mono); letter-spacing: .12em; color: var(--ink-3); }
.lp-ladder__row { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }

/* Play-by-Play card */
.lp-pbp {
  position: relative; min-width: 0; overflow: hidden;
  background: #0d1520; border: 2px solid var(--line-4); border-radius: 24px;
  box-shadow: 0 8px 0 #03060b, 0 30px 80px rgba(76, 141, 255, .22);
}
.lp-pbp__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 2px solid var(--line-2); font: 400 12px/1 var(--f-mono); letter-spacing: .08em; }
.lp-pbp__title { color: var(--ink); }
.lp-pbp__scope { margin-left: auto; color: var(--ink-3); text-align: right; }
.lp-pbp__list { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.lp-pbp__foot { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 2px solid var(--line-2); font: 400 11px/1 var(--f-mono); color: var(--ink-3); }

.lp-ev {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 11px 12px; border-radius: 14px; background: var(--bg-2);
  border: 2px solid var(--k-bd); box-shadow: 0 4px 0 #03060b, var(--k-glow);
}
/* landing card: event rows (ARB / STEAM) carry no glow and a softer border than the feed palette */
.lp-ev.k-ARB { --k-bd: rgba(111, 168, 255, .45); --k-glow: 0 0 0 transparent; }
.lp-ev.k-STM { --k-bd: rgba(255, 77, 77, .45); --k-glow: 0 0 0 transparent; }
.lp-ev .lp-ev__icon { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22); }
.lp-ev__body { min-width: 0; }
.lp-ev__meta { display: flex; gap: 8px; font: 400 10.5px/1.2 var(--f-mono); letter-spacing: .06em; color: var(--ink-3); white-space: nowrap; }
.lp-ev__type { color: var(--k-tc); }
.lp-ev__title { margin-top: 4px; font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-ev__sub { margin-top: 2px; font-size: 13px; line-height: 1.3; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-ev__val { text-align: right; }
.lp-ev__num { font: 400 17px/1 var(--f-display); color: var(--k-tc); white-space: nowrap; }
.lp-ev__lbl { margin-top: 6px; font: 400 10px/1 var(--f-mono); letter-spacing: .1em; color: var(--ink-3); white-space: nowrap; }

/* HUD counters */
.lp-hud { position: relative; margin-top: 44px; display: flex; flex-wrap: wrap; gap: 14px; }
.lp-hud__box {
  flex: 1 1 170px; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 20px;
  border-radius: 18px; background: var(--card); border: 2px solid var(--line-3); box-shadow: 0 6px 0 #03060b;
}
.lp-hud__box--odds { flex: 2 1 380px; padding: 20px 22px; border-color: var(--line-4); box-shadow: 0 6px 0 #03060b, inset 0 1px 0 rgba(255, 255, 255, .05); }
.lp-hud__box--s { background: linear-gradient(180deg, #1d1f22 0%, #0e1622 100%); border-color: rgba(245, 179, 1, .45); box-shadow: 0 6px 0 #03060b, 0 0 30px rgba(245, 179, 1, .12); }
.lp-hud__label { font: 400 11px/1.2 var(--f-mono); letter-spacing: .12em; color: var(--ink-3); }
.lp-hud__box--s .lp-hud__label { color: var(--gold-soft); }
.lp-hud__head { display: flex; justify-content: space-between; gap: 12px; }
/* capped at 44px: the box stops growing at the 1240px container, so a larger size would spill out of it on wide screens */
.lp-hud__odds { font: 400 clamp(36px, 2.95vw, 44px)/1 var(--f-display); white-space: nowrap; color: var(--ink); text-shadow: 0 0 32px rgba(111, 168, 255, .55); }
.lp-hud__num { font: 400 34px/1 var(--f-display); }

/* ---------- books strip ---------- */
.lp-books { padding-top: 28px; }
.lp-books__strip { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 18px 22px; border-radius: 18px; border: 2px dashed var(--line-3); background: rgba(14, 22, 34, .6); }
.lp-books__label { font: 400 11px/1.2 var(--f-mono); letter-spacing: .12em; color: var(--ink-3); }
.lp-books__list { display: flex; flex-wrap: wrap; gap: 10px; }
.lp-books__pin { padding-right: 10px; }
.lp-books__note { margin-left: auto; font-size: 14px; color: var(--ink-2); }

/* ---------- game plan ---------- */
.lp-steps { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.lp-step { display: flex; flex-direction: column; gap: 18px; padding: 24px; }
.lp-step__n { font: 400 40px/1 var(--f-varsity); color: var(--orange); text-shadow: 0 4px 0 #0f2a5c; }
.lp-step__demo { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.lp-step__h { font: 400 22px/1.15 var(--f-display); }
.lp-step__p { font-size: 16px; line-height: 1.55; color: var(--ink-2); }

.lp-bk { display: flex; align-items: center; gap: 10px; }
.lp-bk__name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink); transition: color .15s; }
.lp-bk.is-off .lp-bk__name { color: var(--ink-2); }
.lp-bk__fair { font: 400 10px/1 var(--f-mono); letter-spacing: .1em; color: var(--steel-light); }

.lp-s2 { gap: 12px; }
.lp-s2__play { display: flex; align-items: center; gap: 12px; }
.lp-s2__play .grade.k-S { box-shadow: 0 3px 0 var(--gold-shadow); }
.lp-s2__title { font-weight: 700; font-size: 14px; }
.lp-s2__sub { margin-top: 4px; font: 400 12px/1 var(--f-mono); color: var(--green); }
.lp-s2__bar { display: grid; grid-template-columns: 52px minmax(0, 1fr) 34px; gap: 8px; align-items: center; font: 400 11px/1 var(--f-mono); color: var(--ink-3); }
.lp-s2__track { height: 10px; border-radius: 4px; background: var(--line-1); overflow: hidden; }
.lp-s2__fill { display: block; height: 100%; background: var(--steel-light); }
.lp-s2__fill--price { background: var(--steel); }

.lp-s3 { gap: 10px; font: 400 13px/1 var(--f-mono); }
.lp-s3__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lp-s3__k { color: var(--ink-3); }
.lp-s3__clv { display: flex; align-items: center; gap: 8px; }
.lp-s3__xp { padding: 4px 7px; border-radius: 6px; background: rgba(57, 217, 138, .12); color: var(--green); font-size: 11px; }

/* ---------- game center preview ---------- */
.lp-gc__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.lp-gc__intro { max-width: 680px; }
.lp-gc__chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lp-gc__note { padding: 9px 10px; font: 400 11px/1 var(--f-mono); letter-spacing: .08em; color: var(--ink-3); }
.lp-gc__grid { margin-top: 36px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr)); gap: 20px; }
.lp-gc { display: flex; flex-direction: column; gap: 16px; padding: 18px; min-width: 0; }

.lp-gc__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lp-gc__kick { font: 400 12px/1 var(--f-mono); color: var(--ink-2); }
.lp-gc__cd { font: 400 12px/1 var(--f-mono); color: var(--ink-3); }
.lp-gc__live { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/1 var(--f-mono); letter-spacing: .06em; color: var(--green); }
.lp-gc__grade { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.lp-gc__ev { font: 400 15px/1 var(--f-display); color: var(--k-tc); white-space: nowrap; }

.lp-gc__teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.lp-gc__team { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lp-gc__team--home { flex-direction: row-reverse; text-align: right; }
.lp-gc__tinfo { min-width: 0; }
.lp-gc__tname { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-gc__price { margin-top: 4px; font: 400 13px/1 var(--f-mono); color: var(--ink); white-space: nowrap; }
.lp-gc__price.is-play { color: var(--green); }
.lp-gc__price span { color: var(--ink-3); }
.lp-gc__vs { font: 400 11px/1 var(--f-mono); color: var(--ink-3); }

.lp-gc__bars { display: flex; flex-direction: column; gap: 9px; padding: 14px; }
.lp-gc__sharp { margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.lp-gc__sharp.is-sharp { color: var(--green); }

.lp-gc__chart-head { display: flex; justify-content: space-between; gap: 8px; font: 400 10.5px/1.2 var(--f-mono); letter-spacing: .06em; color: var(--ink-3); }
.lp-gc__chart { display: block; width: 100%; height: auto; margin-top: 8px; overflow: visible; }
.lp-ch__grid { fill: none; stroke: var(--line-1); stroke-width: 1; }
.lp-ch__area { fill: rgba(255, 122, 26, .1); stroke: none; }
.lp-ch__fair { fill: none; stroke: var(--steel-light); stroke-width: 2; stroke-dasharray: 4 4; }
.lp-ch__mkt { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linejoin: round; }
.lp-ch__marks { fill: var(--green); stroke: var(--bg-0); stroke-width: 1; }
.lp-gc__legend { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 14px; font: 400 10.5px/1 var(--f-mono); color: var(--ink-3); }

.lp-heat { display: flex; gap: 4px; }
.lp-heat__side { width: 44px; flex: none; display: flex; flex-direction: column; gap: 4px; font: 400 11px/1 var(--f-mono); color: var(--ink-2); }
.lp-heat__side span { height: 30px; display: flex; align-items: center; }
.lp-heat__side span:first-child { height: 18px; }
.lp-heat__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; font: 400 12px/1 var(--f-mono); }
.lp-heat__hd { height: 18px; display: flex; align-items: center; justify-content: center; font-size: 10px; letter-spacing: .08em; color: var(--ink-3); }
.lp-heat__hd.is-pin { color: var(--steel-light); }
.lp-heat__cell { height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--bg-inset); border: 1.5px solid var(--line-2); color: #d3dbe6; white-space: nowrap; }
.lp-heat__cell.is-ev { color: var(--green); }
.lp-heat__cell.is-best { background: rgba(245, 179, 1, .16); border-color: var(--gold); color: var(--gold-soft); }
.lp-heat__cell.is-off { opacity: .45; }

.lp-gc__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 14px; border-top: 2px solid var(--line-2); font: 400 11px/1 var(--f-mono); color: var(--ink-3); }
.lp-gc__stat { padding: 6px 8px; border-radius: 7px; background: var(--bg-inset); }
.lp-gc__open { margin-left: auto; color: var(--steel-light); font-size: 12px; }
.lp-gc__key { margin-top: 14px; font: 400 11px/1.5 var(--f-mono); color: var(--ink-3); }

/* ---------- grades ---------- */
.lp-grades { margin-top: 36px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 176px), 1fr)); gap: 14px; }
.lp-gtile { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 18px; background: var(--card); border: 2px solid var(--line-3); box-shadow: 0 6px 0 #03060b; min-width: 0; }
.lp-gtile__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.lp-gtile .grade { box-shadow: var(--k-sh); }
.lp-gtile__count { font: 400 11px/1.3 var(--f-mono); color: var(--ink-3); text-align: right; }
.lp-gtile__name { font: 400 17px/1.15 var(--f-display); }
.lp-gtile__range { font: 400 12px/1 var(--f-mono); color: var(--k-tc); }
.lp-gtile__desc { font-size: 14px; line-height: 1.45; color: var(--ink-2); }

.lp-hist { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-end; padding: 24px; }
.lp-hist__info { flex: 1 1 240px; max-width: 320px; }
.lp-hist__total { margin-top: 12px; font: 400 40px/1 var(--f-display); }
.lp-hist__cap { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.lp-hist__p { margin-top: 18px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.lp-hist__chart { flex: 3 1 460px; min-width: 0; }
.lp-hist__bars { height: 190px; display: flex; align-items: flex-end; gap: 6px; border-bottom: 2px solid var(--line-3); }
.lp-hist__col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.lp-hist__n { font: 400 10px/1 var(--f-mono); color: var(--ink-3); }
.lp-hist__bar { width: 100%; border-radius: 6px 6px 2px 2px; background: var(--k-bar); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25); }
.lp-hist__labels { margin-top: 8px; display: flex; gap: 6px; }
.lp-hist__labels span { flex: 1 1 0; min-width: 0; text-align: center; font: 400 10.5px/1 var(--f-mono); color: var(--ink-3); }
.lp-hist__axis { margin-top: 6px; text-align: right; font: 400 10.5px/1 var(--f-mono); color: var(--ink-3); }

/* ---------- season ---------- */
.lp-season { margin-top: 36px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 18px; align-items: start; }

.lp-player { display: flex; flex-direction: column; gap: 18px; padding: 22px; min-width: 0; }
.lp-player__head { display: flex; align-items: center; gap: 14px; }
.lp-player__handle { margin-top: 6px; font: 400 19px/1.1 var(--f-display); overflow-wrap: anywhere; }
.lp-player__tags { margin-top: 8px; display: flex; gap: 6px; }
.lp-player__league { padding: 4px 7px; border-radius: 6px; background: rgba(111, 168, 255, .12); color: var(--steel-soft); font: 400 11px/1 var(--f-varsity); }
.lp-player__div { padding: 4px 7px; border-radius: 6px; background: var(--bg-active); color: var(--steel-soft); font: 400 10.5px/1 var(--f-mono); }
.lp-player__xp { display: flex; justify-content: space-between; gap: 12px; font: 400 11px/1 var(--f-mono); color: var(--ink-3); }
.lp-player__bar { margin-top: 8px; }
.lp-player__streak { display: flex; align-items: center; gap: 12px; }
.lp-player__streak-t { font-weight: 700; font-size: 15px; }
.lp-pips { margin-left: auto; display: flex; gap: 4px; }
.lp-pip { width: 14px; height: 14px; border-radius: 4px; background: var(--line-2); }
.lp-pip.is-on { background: var(--gold); }

.lp-drills { display: flex; flex-direction: column; gap: 8px; }
.lp-drill { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; background: var(--bg-inset); border: 2px solid var(--line-2); }
.lp-drill__t { font-size: 14px; font-weight: 600; }
.lp-drill__bar { margin-top: 7px; }
.lp-drill__p { font: 400 11px/1 var(--f-mono); color: var(--ink-3); white-space: nowrap; }

.lp-trophies { display: flex; flex-direction: column; gap: 18px; padding: 22px; min-width: 0; }
.lp-trophies__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; }
.lp-trophy { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.lp-trophy__n { font-size: 13px; font-weight: 700; line-height: 1.2; }
.lp-trophy__d { font-size: 12px; line-height: 1.35; color: var(--ink-3); }

.lp-mvp { display: flex; flex-direction: column; gap: 10px; padding: 22px; min-width: 0; }
.lp-mvp__head { margin-bottom: 6px; }
.lp-mvp__row {
  --rc: var(--ink-3); --av: var(--steel-light);
  display: grid; grid-template-columns: 30px 34px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 9px 10px; border-radius: 12px; background: var(--bg-inset); border: 2px solid var(--line-2);
}
.lp-mvp__row--r1 { --rc: #f5b301; --av: #f5b301; border-color: rgba(245, 179, 1, .5); }
.lp-mvp__row--r2 { --rc: #d9deea; --av: #d9deea; }
.lp-mvp__row--r3 { --rc: #e0915a; --av: #e0915a; }
.lp-mvp__rank { font: 400 17px/1 var(--f-varsity); color: var(--rc); text-align: center; }
.lp-mvp__av { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--av); color: var(--bg-0); font: 800 12px/1 var(--f-body); }
.lp-mvp__h { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-mvp__lg { margin-top: 5px; font: 400 10.5px/1 var(--f-mono); letter-spacing: .04em; color: var(--steel-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-tone--hof { color: var(--gold-soft); }
.lp-tone--allpro { color: var(--orange-soft); }
.lp-tone--varsity { color: var(--steel-soft); }
.lp-tone--rookie { color: #cfd8e4; }
.lp-mvp__right { text-align: right; }
.lp-mvp__xp { font: 400 12.5px/1 var(--f-mono); }
.lp-mvp__clv { margin-top: 5px; font: 400 11px/1 var(--f-mono); color: var(--green); }
.lp-mvp__dots { text-align: center; font: 400 12px/1 var(--f-mono); color: var(--line-4); letter-spacing: .3em; }
.lp-mvp__row--you { background: var(--bg-active); border-color: var(--steel); box-shadow: 0 4px 0 #0f2a5c; }
.lp-mvp__row--you .lp-mvp__rank { font-size: 13px; color: var(--steel-soft); }
.lp-mvp__row--you .lp-mvp__av { background: linear-gradient(160deg, #9cc0ff, #2a5fc4); }

/* ---------- leagues ---------- */
.lp-leagues__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lp-leagues__head .h2 { text-wrap: initial; }
.lp-tiers { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; align-items: stretch; }
.lp-tier {
  --tier-bd: var(--line-3); --tier-sh: 0 6px 0 #03060b; --tier-nc: #cfd8e4;
  position: relative; display: flex; flex-direction: column; gap: 18px; padding: 26px 22px 24px; min-width: 0;
  border-radius: 20px; background: var(--card); border: 2px solid var(--tier-bd); box-shadow: var(--tier-sh);
}
.lp-tier--varsity { --tier-bd: rgba(111, 168, 255, .4); --tier-nc: var(--steel-soft); }
.lp-tier--allpro { --tier-bd: var(--steel); --tier-sh: 0 6px 0 #0f2a5c, 0 0 0 4px rgba(76, 141, 255, .16), 0 24px 60px rgba(76, 141, 255, .28); --tier-nc: var(--orange-soft); }
.lp-tier--hof { --tier-bd: rgba(245, 179, 1, .55); --tier-sh: 0 6px 0 #5a3d00, 0 24px 60px rgba(245, 179, 1, .14); --tier-nc: var(--gold-soft); }
.lp-tier__ribbon {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 7px 12px; border-radius: 8px;
  background: linear-gradient(90deg, #ffd25a, #f0a500); color: var(--gold-ink); font: 400 11px/1 var(--f-varsity);
  letter-spacing: .08em; white-space: nowrap; box-shadow: 0 4px 0 #0f2a5c;
}
.lp-tier__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lp-tier__name { font: 400 21px/1 var(--f-varsity); letter-spacing: .03em; color: var(--tier-nc); }
.lp-tier__lvl { font: 400 10.5px/1 var(--f-mono); letter-spacing: .12em; color: var(--ink-3); white-space: nowrap; }
.lp-tier__tag { font-size: 15px; color: var(--ink-2); }
.lp-tier__price { display: flex; align-items: baseline; gap: 6px; }
.lp-tier__amt { font: 400 46px/1 var(--f-display); }
.lp-tier__per { font-size: 14px; color: var(--ink-3); }
.lp-tier .btn--secondary { box-shadow: 0 var(--lift-now, var(--lift)) 0 #03060b; }
.lp-tier__rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.lp-tier__row { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.lp-tier__row.is-off { color: var(--ink-3); }
.lp-tier__ok, .lp-tier__lock { flex: none; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; }
.lp-tier__ok { background: rgba(57, 217, 138, .14); color: var(--green); font: 800 12px/1 var(--f-body); }
.lp-tier__lock { background: var(--bg-inset); border: 1px solid var(--line-3); }
.lp-tiers__foot { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; font: 400 12px/1.4 var(--f-mono); color: var(--ink-3); text-align: center; }

/* ---------- FAQ ---------- */
.lp-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 36px; align-items: start; }
.lp-faq .h2 { text-wrap: initial; }
.lp-faq__p { margin-top: 16px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.lp-faq__list { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lp-faq__item summary { display: flex; align-items: center; gap: 16px; padding: 18px 20px; font: 700 17px/1.35 var(--f-body); border-radius: 14px; }
.lp-faq__n { font: 400 12px/1 var(--f-mono); color: var(--steel-light); }
.lp-faq__q { flex: 1; min-width: 0; }
.lp-faq__plus { font: 400 18px/1 var(--f-mono); color: var(--ink-3); }
.lp-faq__item summary:hover .lp-faq__plus { color: var(--ink); }
.lp-faq__a { padding: 0 20px 20px 56px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* ---------- final CTA ---------- */
.lp-final { padding-top: var(--section-top); padding-bottom: clamp(64px, 5.13vw, 96px); }
.lp-final__box {
  position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px;
  padding: clamp(36px, 3.85vw, 72px) clamp(24px, 3.21vw, 64px); border-radius: 28px;
  background: radial-gradient(120% 140% at 0% 0%, #1c3a6e 0%, #12203a 45%, #0d1520 100%);
  border: 2px solid #3a5a85; box-shadow: 0 8px 0 #03060b, 0 40px 120px rgba(240, 165, 0, .22);
}
.lp-final__copy { max-width: 620px; }
.lp-final__tag { display: inline-flex; padding: 6px 10px; border-radius: 8px; background: rgba(57, 217, 138, .12); color: var(--green); font: 400 11px/1 var(--f-mono); letter-spacing: .1em; }
.lp-final__h { margin-top: 18px; font: 400 clamp(38px, 3.59vw, 76px)/1 var(--f-display); letter-spacing: -.01em; }
.lp-final__p { margin-top: 16px; font-size: 19px; line-height: 1.55; color: var(--ink-soft); }
.lp-final .btn--secondary { box-shadow: 0 var(--lift-now, var(--lift)) 0 #03060b; }

/* ---------- in-between widths: avoid lone orphan tiles ---------- */
@media (max-width: 1180px) {
  .lp-hud__box--odds { flex-basis: 100%; }
}
/* four narrow league cards: keep "HALL OF FAME  LEAGUE 4" and "$399 / month" on one line so the cards stay aligned */
@media (min-width: 1101px) and (max-width: 1240px) {
  .lp-tier { padding-left: 18px; padding-right: 18px; }
  .lp-tier__name { font-size: 18px; }
  .lp-tier__lvl { letter-spacing: .08em; }
  .lp-tier__amt { font-size: 42px; }
}
@media (max-width: 1100px) {
  .lp-grades { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .lp-hud__box:not(.lp-hud__box--odds) { flex-basis: calc(50% - 7px); }
}

/* ---------- phones ---------- */
@media (max-width: 600px) {
  .lp-livepill { flex-wrap: wrap; gap: 6px 8px; padding: 8px 12px; border-radius: 16px; font-size: 11px; line-height: 1.35; letter-spacing: .03em; }
  .lp-ladder { padding: 16px; }
  .lp-ladder__head { font-size: 10.5px; letter-spacing: .08em; }
  .lp-ladder__row { gap: 6px; justify-content: space-between; }
  .lp-pbp__head { padding: 14px 16px; font-size: 11px; letter-spacing: .04em; }
  .lp-pbp__title { white-space: nowrap; }
  .lp-pbp__list { padding: 12px; }
  .lp-ev { gap: 10px; padding: 10px; }
  .lp-ev__num { font-size: 15px; }
  .lp-ev__lbl { letter-spacing: .06em; }
  .lp-hud__box { padding: 18px; }
  .lp-hud__box--odds { padding: 18px 20px; }
  .lp-grades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-tiers { grid-template-columns: minmax(0, 1fr); }
  .lp-books__note { margin-left: 0; }
  .lp-faq__a { padding-left: 20px; }
  .lp-hist { gap: 22px; padding: 20px; }
  .lp-hist__info { max-width: none; }
  .lp-hist__bars, .lp-hist__labels { gap: 3px; }
  .lp-hist__n { font-size: 9px; }
  .lp-hist__labels span { font-size: 9.5px; }
}
@media (max-width: 420px) {
  .lp-hero__sub { font-size: 17px; }
  .lp-ctas .btn { flex: 1 1 auto; }
  .lp-gc { padding: 16px; }
  .lp-gc__tname { font-size: 15px; }
  .lp-heat__side { width: 34px; }
  .lp-heat__col { font-size: 11px; }
  .lp-drill { gap: 10px; padding: 10px; }
  .lp-tier__amt { font-size: 42px; }
  .lp-mvp { padding: 18px; }
  .lp-mvp__lg { letter-spacing: 0; }
}