/* PanQuiz — Pricing (EN) — page styles.
   Requires: fonts.css, colors.css, typography.css, layout.css, style.css (shared tokens + components). */

/* ---------- Hero (compact) ---------- */
.pricing-hero { background: linear-gradient(180deg, #ffffff 0%, #edf1ff 100%); border-bottom: 1px solid rgba(14,21,82,.06); }
.pricing-hero .container { padding-top: 64px; padding-bottom: 60px; text-align: center; }
.pricing-hero h1 { color: #0e1552; }
.pricing-hero .hero-sub { margin: 20px auto 0; max-width: 640px; }

/* ---------- Billing toggle ---------- */
.billing-toggle { display: flex; justify-content: center; margin-top: 40px; }
.billing-toggle-inner { display: inline-flex; background: #fff; border: 1.5px solid rgba(14,21,82,.16); border-radius: 999px; padding: 5px; gap: 4px; }
.billing-btn { border: 0; background: none; border-radius: 999px; padding: 9px 22px; font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif); font-weight: 600; font-size: 15px; color: rgba(14,21,82,.62); cursor: pointer; transition: background .2s ease, color .2s ease; white-space: nowrap; }
.billing-btn:hover { color: #0e1552; }
.billing-btn[aria-pressed="true"] { background: var(--site-primary, #005aef); color: #fff; font-weight: 700; }
.billing-btn:focus-visible { outline: 3px solid #0e1552; outline-offset: 2px; }

/* ---------- Plan cards ---------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 28px; max-width: 830px; margin: 40px auto 0; align-items: stretch; }
.plan { position: relative; background: #fff; border: 1px solid rgba(14,21,82,.12); border-radius: 24px; padding: 38px 34px 34px; display: flex; flex-direction: column; gap: 14px; }
.plan--featured { border: 2px solid var(--site-primary, #005aef); box-shadow: 0 2px 18px rgba(0,90,239,.16); }
.plan-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--site-accent-yellow, #f3bc34); color: #0e1552; font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif); font-weight: 700; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; border-radius: 999px; padding: 6px 16px; white-space: nowrap; }
.plan-name { font-family: var(--font-display, 'Raleway', sans-serif); font-weight: 700; font-size: 24px; color: #0e1552; margin: 0; }
.plan-price { display: flex; align-items: baseline; gap: 7px; margin-top: 2px; }
.price-num { font-family: var(--font-display, 'Raleway', sans-serif); font-weight: 800; font-size: 46px; color: #0e1552; line-height: 1; font-variant-numeric: tabular-nums; }
.price-per { font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif); font-weight: 600; font-size: 15px; color: rgba(26,29,41,.6); }
.plan-desc { font-size: 15.5px; line-height: 1.65; color: #3c4257; margin: 0; flex: 1; text-wrap: pretty; }
.plan-cta { align-self: center; margin-top: 10px; }
/* Hidden education buy buttons: [hidden] must win over the components' display:inline-flex */
.plan-cta[hidden] { display: none !important; }
/* <button> version of the outline CTA (UA gives buttons a grey bg + default cursor) */
button.btn-outline-primary { background: none; cursor: pointer; }
.plans-note { font-size: 14px; line-height: 1.65; color: rgba(26,29,41,.62); text-align: center; max-width: 660px; margin: 30px auto 0; text-wrap: pretty; }

/* ---------- Single Event band ---------- */
.single-event { background: #0e1552; border-radius: 28px; margin-top: 60px; padding: 44px 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 32px 56px; }
.se-copy { flex: 1 1 400px; min-width: 300px; }
.se-kicker { display: inline-block; font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif); font-weight: 700; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--site-accent-yellow, #f3bc34); margin: 0 0 10px; }
.se-title { font-family: var(--font-display, 'Raleway', sans-serif); font-weight: 700; font-size: 28px; color: #fff; margin: 0 0 12px; }
.se-desc { font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,.82); margin: 0; text-wrap: pretty; }
.se-buy { flex: 0 1 auto; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.se-price { display: flex; align-items: baseline; gap: 8px; }
.se-price .price-num { color: #fff; }
.se-price .price-per { color: rgba(255,255,255,.65); }
.se-btn { background: var(--site-accent-yellow, #f3bc34); color: #0e1552; border-radius: var(--radius-site-button, 25px); font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif); font-weight: 700; font-size: 18px; padding: .45em 1.6em; }
.se-btn:hover { opacity: .9; color: #0e1552; }

/* ---------- Eligibility box (education) ---------- */
.eligibility { max-width: 830px; margin: 32px auto 0; background: linear-gradient(180deg, rgba(0,90,239,.055) 0%, rgba(0,90,239,.035) 100%); border: 1px solid rgba(0,90,239,.16); border-radius: 18px; padding: 26px 36px; }
.eligibility p { font-size: 15.5px; line-height: 1.7; color: #2b2f3a; margin: 0; text-wrap: pretty; }
.eligibility p + p { margin-top: 12px; }
.eligibility a { font-weight: 700; }

/* ---------- Compare-features jump link ---------- */
.compare-jump { text-align: center; margin: 26px 0 0; }
.compare-link { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif); font-weight: 700; font-size: 15px; color: #005aef; text-decoration: none; }
.compare-link:hover { text-decoration: underline; }
.compare-link:focus-visible { outline: 2px solid #005aef; outline-offset: 4px; border-radius: 4px; }
.compare-link-arrow { font-size: 17px; line-height: 1; }
#compare { scroll-margin-top: 90px; }
#edu-title { scroll-margin-top: 110px; }
#compare:target .table-scroll { animation: compare-flash 1s ease-out 1; }
@keyframes compare-flash {
  0% { box-shadow: 0 0 0 3px rgba(0,90,239,.45); background: rgba(0,90,239,.06); }
  100% { box-shadow: 0 0 0 3px rgba(0,90,239,0); background: #fff; }
}
@media (prefers-reduced-motion: reduce) { #compare:target .table-scroll { animation: none; } }

/* ---------- Comparison table ---------- */
.compare-wrap { max-width: 900px; margin: 44px auto 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid rgba(14,21,82,.1); border-radius: 18px; background: #fff; }
table.compare { width: 100%; min-width: 640px; border-collapse: collapse; }
.compare th, .compare td { padding: 13px 20px; border-bottom: 1px solid rgba(14,21,82,.08); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare thead th { font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif); font-weight: 700; font-size: 16px; color: #0e1552; text-align: center; border-bottom: 2px solid rgba(14,21,82,.16); padding-top: 18px; padding-bottom: 16px; }
.compare thead th:first-child { text-align: left; }
.compare tbody th { font-weight: 400; font-size: 15px; line-height: 1.5; color: #2b2f3a; text-align: left; }
.compare td { font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif); font-weight: 600; font-size: 14.5px; text-align: center; color: #2b2f3a; white-space: nowrap; width: 150px; }
.compare .col-premium { background: rgba(0,90,239,.055); }
.compare thead th.col-premium { color: var(--site-primary, #005aef); }
.compare .tick { color: var(--answer-green, #26890c); font-weight: 700; font-size: 16px; }
.compare .no { color: rgba(26,29,41,.32); }

/* ---------- Trial strip ---------- */
.trial-strip .container { padding-top: 0; padding-bottom: 92px; }
.trial-strip-inner { background: linear-gradient(180deg, #f7f9ff 0%, #edf1ff 100%); border: 1px solid rgba(0,90,239,.14); border-radius: 24px; padding: 40px 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.trial-copy { flex: 1 1 420px; min-width: 280px; font-family: var(--font-subhead, 'Source Sans Pro', sans-serif); font-size: 19px; line-height: 1.6; color: #2b2f3a; margin: 0; text-wrap: pretty; }
.trial-copy strong { color: #0e1552; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .pricing-hero .container { padding-top: 44px; padding-bottom: 44px; }
  .billing-toggle { margin-top: 30px; }
  .billing-btn { font-size: 14px; padding: 8px 16px; }
  .plans { gap: 24px; margin-top: 32px; }
  .plan { padding: 32px 24px 28px; }
  .price-num { font-size: 40px; }
  .single-event { margin-top: 44px; padding: 32px 26px; gap: 26px; }
  .se-title { font-size: 24px; }
  .se-buy { align-items: flex-start; text-align: left; margin: 0; }
  .eligibility { padding: 22px 22px; }
  .compare th, .compare td { padding: 12px 14px; }
  .trial-strip .container { padding-bottom: 60px; }
  .trial-strip-inner { padding: 28px 24px; }
  .trial-copy { font-size: 17px; }
}