/* =====================================================================
   Pricing page (prefix: pr-)
   ===================================================================== */
/* Horizontal overflow (hero glow) is clipped by the shared .site wrapper, which keeps the sticky nav working. */

/* ---------- hero ---------- */
.pr-hero {
  position: relative;
  padding-top: clamp(48px, 4.5vw, 84px);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.pr-hero__glow {
  position: absolute; width: 700px; height: 500px; left: 50%; top: -120px; margin-left: -350px;
  border-radius: 50%; background: #2a5fc4; opacity: .22; filter: blur(120px); pointer-events: none;
}
.pr-hero__eyebrow { position: relative; }
.pr-hero__title {
  position: relative; margin: 16px 0 0;
  font: 400 clamp(44px, 4.5vw, 92px)/.98 var(--f-display); letter-spacing: -.01em;
}
.pr-hero__lead {
  position: relative; margin: 18px 0 0; max-width: 600px;
  font-size: 19px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty;
}

/* Monthly / Yearly toggle */
.pr-billing {
  position: relative; margin-top: 28px; display: inline-flex; padding: 5px;
  border-radius: 14px; background: var(--bg-1); border: 2px solid var(--line-3);
}
.pr-billing__opt {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px;
  border-radius: 10px; border: 2px solid transparent;
  font: 700 14px/1 var(--f-body); color: var(--ink-2); white-space: nowrap;
  transition: transform .08s ease, filter .15s ease, color .12s ease;
}
.pr-billing__opt:hover { color: var(--ink); }
.pr-billing__opt:active { transform: translateY(2px); }
.pr-billing__opt.is-on {
  background: var(--bg-active); border-color: var(--steel); box-shadow: 0 3px 0 var(--steel-shadow); color: var(--ink);
}
.pr-billing__opt.is-on:hover { filter: brightness(1.08); }
.pr-billing__save {
  padding: 4px 6px; border-radius: 6px; background: rgba(57, 217, 138, .14); color: var(--green);
  font: 400 10.5px/1 var(--f-mono);
}

/* ---------- tier cards ---------- */
.pr-tiers { padding-top: 52px; }
.pr-tiers__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 16px; align-items: stretch;
}
/* Where auto-fit would give 3 + 1 cards, use a 2 × 2 grid instead. */
@media (min-width: 830px) and (max-width: 1095px) {
  .pr-tiers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pr-tier {
  --pr-bd: var(--line-3); --pr-sh: var(--sh-card); --pr-name: #cfd8e4;
  position: relative; display: flex; flex-direction: column; gap: 18px; min-width: 0;
  padding: 26px 22px 24px; border-radius: 20px; background: var(--card);
  border: 2px solid var(--pr-bd); box-shadow: var(--pr-sh);
  scroll-margin-top: 110px;
}
.pr-tier--varsity { --pr-bd: rgba(111, 168, 255, .4); --pr-name: var(--steel-soft); }
.pr-tier--allpro {
  --pr-bd: var(--steel); --pr-name: var(--orange-soft);
  --pr-sh: 0 6px 0 #0f2a5c, 0 0 0 4px rgba(76, 141, 255, .16), 0 24px 60px rgba(76, 141, 255, .28);
}
.pr-tier--hof { --pr-bd: rgba(245, 179, 1, .55); --pr-name: var(--gold-soft); --pr-sh: 0 6px 0 #5a3d00, 0 24px 60px rgba(245, 179, 1, .14); }

.pr-tier__hot {
  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 var(--steel-shadow);
}
.pr-tier__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pr-tier__name { font: 400 21px/1 var(--f-varsity); letter-spacing: .03em; color: var(--pr-name); }
.pr-tier__level { font: 400 10.5px/1 var(--f-mono); letter-spacing: .12em; color: var(--ink-3); white-space: nowrap; }
.pr-tier__tag { font-size: 15px; line-height: normal; color: var(--ink-2); }
.pr-tier__price { display: flex; align-items: baseline; gap: 6px; }
.pr-tier__amount { font: 400 48px/1 var(--f-display); }
.pr-tier__per { font-size: 14px; line-height: normal; color: var(--ink-3); }
.pr-tier__year { margin-top: 8px; font: 400 11.5px/1 var(--f-mono); color: var(--ink-3); }
.pr-tier__cta { padding: 15px; }
.pr-tier__cta.btn--secondary,
.pr-tier__cta.btn--secondary:hover { box-shadow: 0 var(--lift-now, var(--lift)) 0 #03060b; }
.pr-tier__label { font: 400 10.5px/1 var(--f-mono); letter-spacing: .12em; color: var(--ink-3); }
.pr-tier__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.pr-tier__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.pr-tick {
  flex: none; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center;
  background: rgba(57, 217, 138, .14); color: var(--green); font: 800 12px/1 var(--f-body);
}
/* Four narrow cards: keep "HALL OF FAME  LEAGUE 4" and "$399 / month" on one line so the cards stay aligned. */
@media (min-width: 1096px) and (max-width: 1240px) {
  .pr-tier { padding-left: 18px; padding-right: 18px; }
  .pr-tier__name { font-size: 18px; }
  .pr-tier__level { letter-spacing: .08em; }
  .pr-tier__amount { font-size: 42px; }
}

/* ---------- locked S/A teaser ---------- */
.pr-teaser-wrap { padding-top: 28px; }
.pr-teaser {
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 22px 24px;
  border-radius: 20px; background: linear-gradient(120deg, #221e14 0%, #111c2c 60%);
  border: 2px solid rgba(245, 179, 1, .45); box-shadow: var(--sh-card);
}
.pr-teaser__copy { flex: 1 1 300px; min-width: 0; }
.pr-teaser__label { font: 400 10.5px/1 var(--f-mono); letter-spacing: .14em; color: var(--gold-soft); }
.pr-teaser__title { margin-top: 10px; font: 400 22px/1.2 var(--f-display); }
.pr-teaser__text { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.pr-teaser__list { flex: 1 1 380px; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.pr-lock {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 12px; background: var(--bg-tile); border: 2px solid var(--line-3);
  overflow: hidden; color: var(--ink); transition: border-color .12s ease;
}
.pr-lock:hover { color: var(--ink); border-color: var(--line-4); }
.pr-lock__grade.grade { width: 34px; height: 34px; border-radius: 10px; font-size: 17px; box-shadow: none; }
.pr-lock__text { font-weight: 700; font-size: 14.5px; line-height: normal; color: var(--ink); white-space: nowrap; overflow: hidden; }
.pr-lock__ev { display: inline-flex; align-items: center; gap: 6px; font: 400 11px/1 var(--f-mono); color: var(--gold-soft); white-space: nowrap; }

/* ---------- comparison table ---------- */
.pr-compare { padding-top: clamp(64px, 5.13vw, 104px); }
.pr-h2 { font: 400 clamp(30px, 2.57vw, 48px)/1.05 var(--f-display); }
.pr-table {
  margin-top: 24px; border-radius: 20px; background: var(--bg-1);
  border: 2px solid var(--line-2b); box-shadow: var(--sh-card); overflow: hidden;
}
.pr-table__scroll:focus-visible { outline-offset: -3px; border-radius: 18px; }
.pr-table__inner { position: relative; min-width: 820px; }
.pr-table__head,
.pr-table__row { display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(130px, 1fr)); align-items: center; }
.pr-table__head { padding: 16px 20px; background: #101a28; border-bottom: 2px solid var(--line-2b); }
.pr-table__tier { text-align: center; font: 400 15px/1 var(--f-varsity); color: #cfd8e4; }
.pr-table__tier--varsity { color: var(--steel-soft); }
.pr-table__tier--allpro { color: var(--orange-soft); }
.pr-table__tier--hof { color: var(--gold-soft); }
.pr-table__group { padding: 16px 20px 6px; font: 400 10.5px/1 var(--f-mono); letter-spacing: .14em; color: var(--steel-light); }
.pr-table__group > span { display: inline-block; position: sticky; left: 20px; }
.pr-table__row { padding: 11px 20px; border-top: 1px solid var(--line-1); }
/* Feature column stays pinned while the table scrolls sideways (phones). */
.pr-table__feature-h,
.pr-table__feature {
  position: sticky; left: 0; z-index: 1; align-self: stretch; display: flex; align-items: center;
  margin: -11px 0 -11px -20px; padding: 11px 8px 11px 20px; background: var(--bg-1);
}
.pr-table__feature-h { margin: -16px 0 -16px -20px; padding: 16px 8px 16px 20px; background: #101a28; font: 400 10.5px/1 var(--f-mono); letter-spacing: .12em; color: var(--ink-3); }
.pr-table__feature { font-size: 14.5px; line-height: normal; font-weight: 600; }
.pr-cell { text-align: center; padding: 6px 4px; border-radius: 8px; font: 400 13px/1.2 var(--f-mono); color: var(--ink); }
.pr-cell--yes { color: var(--green); }
.pr-cell--no { color: var(--ink-4); }

/* ---------- guarantees ---------- */
.pr-promises { padding-top: 28px; }
.pr-promises__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.pr-promise {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px;
  border-radius: 18px; background: var(--bg-1); border: 2px solid var(--line-2b);
}
.pr-promise--gold { border-color: rgba(245, 179, 1, .4); }
.pr-promise__num { flex: none; font: 400 26px/1 var(--f-varsity); }
.pr-promise__num--green { color: var(--green); }
.pr-promise__num--steel { color: var(--steel-light); }
.pr-promise__num--gold { color: var(--gold-soft); }
.pr-promise__title { font-weight: 700; font-size: 16px; line-height: normal; }
.pr-promise__text { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }

/* ---------- billing FAQ ---------- */
.pr-faq {
  max-width: 900px; margin: 0 auto;
  padding: clamp(64px, 5.13vw, 104px) var(--gutter) clamp(64px, 5.13vw, 96px);
}
.pr-faq__title { text-align: center; }
.pr-faq__list { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.pr-qa { border-radius: 16px; background: var(--bg-1); border: 2px solid var(--line-3); box-shadow: var(--sh-panel); }
.pr-qa summary {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 14px;
  font: 700 17px/1.35 var(--f-body);
}
.pr-qa summary:hover .pr-qa__plus { color: var(--ink); }
.pr-qa__q { flex: 1; }
.pr-qa__plus { font: 400 18px/1 var(--f-mono); color: var(--ink-3); transition: color .12s ease; }
.pr-qa p { padding: 0 20px 20px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* ---------- phones ---------- */
@media (max-width: 640px) {
  .pr-table__inner { min-width: 640px; }
  .pr-table__head,
  .pr-table__row { grid-template-columns: minmax(150px, 1.6fr) repeat(4, minmax(112px, 1fr)); }
}