/* Pricing page - the single global Premium, built to match the approved mockup.
   All colour/space/radius come from sp-tokens; namespaced .pr- to avoid the
   legacy .sp-pricing table styles in sp-components.css. */

.pr-wrap { max-width: 1040px; margin: 0 auto; padding: 0 var(--sp-6) var(--sp-11); }
.pr-eyebrow { font-family: 'Oswald', var(--sp-font); font-weight: 600; text-transform: uppercase;
    letter-spacing: .14em; font-size: var(--sp-text-xs); color: var(--sp-brand); }

/* hero */
.pr-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--sp-10); align-items: center; padding: var(--sp-10) 0 var(--sp-8); }
.pr-hero h1 { font-size: 44px; line-height: 1.04; font-weight: 700; letter-spacing: -.01em; color: var(--sp-ink); margin: var(--sp-5) 0 0; text-wrap: balance; }
.pr-hero h1 .pr-red { color: var(--sp-brand); }
.pr-lede { font-size: var(--sp-text-xl); color: var(--sp-body); margin: var(--sp-6) 0 0; max-width: 30em; }
.pr-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-7); }
.pr-pill { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--sp-text-sm); font-weight: 500;
    padding: var(--sp-2) var(--sp-5); border-radius: var(--sp-radius-pill); background: var(--sp-surface); border: 1px solid var(--sp-border); color: var(--sp-ink-2); }
.pr-pill .material-icons { font-size: 17px; color: var(--sp-success); }
.pr-pill--free { background: var(--sp-success-tint); border-color: transparent; color: var(--sp-success-strong); font-weight: 700; }
.pr-pill--free .material-icons { color: var(--sp-success-strong); }

/* price card */
.pr-pricecard { background: var(--sp-surface); border: 1px solid var(--sp-hairline); border-top: 3px solid var(--sp-brand);
    border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow-lg); padding: var(--sp-9) var(--sp-9) var(--sp-8); text-align: center; }
.pr-pricecard__tag { font-family: 'Oswald', var(--sp-font); text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; font-weight: 600; color: var(--sp-muted); }
.pr-amount { display: flex; align-items: flex-start; justify-content: center; gap: 4px; margin: var(--sp-3) 0 2px; color: var(--sp-ink); }
.pr-amount__cur { font-family: 'Oswald', var(--sp-font); font-size: var(--sp-text-3xl); font-weight: 600; margin-top: 12px; }
.pr-amount__num { font-family: 'Oswald', var(--sp-font); font-weight: 700; font-size: 72px; line-height: .9; letter-spacing: -.02em; }
.pr-per { color: var(--sp-muted); font-size: var(--sp-text-md); margin-top: 2px; }
.pr-mo { color: var(--sp-faint); font-size: 12.5px; margin-top: var(--sp-2); }
.pr-pricecard .sp-btn { width: 100%; margin-top: var(--sp-6); }
.pr-trial { margin-top: var(--sp-5); font-size: 12.5px; color: var(--sp-muted); display: flex; align-items: center; justify-content: center; gap: 6px; }
.pr-trial .material-icons { font-size: 16px; color: var(--sp-success); }
.pr-owned { margin-top: var(--sp-6); font-weight: 600; color: var(--sp-success-strong); display: flex; align-items: center; justify-content: center; gap: 6px; }

/* section heads */
.pr-sec { padding: var(--sp-9) 0; }
.pr-sechead { text-align: center; max-width: 40em; margin: 0 auto var(--sp-8); }
.pr-sechead h2 { font-size: var(--sp-text-4xl); font-weight: 700; letter-spacing: -.01em; color: var(--sp-ink); margin-top: var(--sp-3); text-wrap: balance; }
.pr-sechead p { color: var(--sp-muted); font-size: var(--sp-text-lg); margin: var(--sp-4) 0 0; }

/* free vs premium */
.pr-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.pr-col { background: var(--sp-surface); border: 1px solid var(--sp-hairline); border-radius: var(--sp-radius-lg); padding: var(--sp-8); box-shadow: var(--sp-shadow); }
.pr-col--prem { border: 1px solid var(--sp-brand-ring); background: linear-gradient(var(--sp-brand-wash), var(--sp-brand-wash)), var(--sp-surface); }
.pr-col h3 { font-family: 'Oswald', var(--sp-font); text-transform: uppercase; letter-spacing: .06em; font-size: var(--sp-text-2xl); color: var(--sp-ink); display: flex; align-items: center; gap: var(--sp-4); margin: 0; }
.pr-col h3 .material-icons { font-size: 22px; }
.pr-col__sub { color: var(--sp-muted); font-size: var(--sp-text-sm); margin: var(--sp-1) 0 var(--sp-6); }
.pr-price-mini { font-family: 'Oswald', var(--sp-font); font-weight: 700; font-size: var(--sp-text-2xl); color: var(--sp-brand); }
.pr-price-mini--free { color: var(--sp-success-strong); }
.pr-ribbon { margin-left: auto; font-family: 'Oswald', var(--sp-font); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; color: var(--sp-on-brand); background: var(--sp-brand); padding: 3px 10px; border-radius: var(--sp-radius-pill); }
.pr-feat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.pr-feat li { display: flex; gap: var(--sp-4); align-items: flex-start; font-size: var(--sp-text-md); color: var(--sp-ink-2); }
.pr-feat li .material-icons { font-size: 19px; color: var(--sp-success); flex: none; margin-top: 1px; }
.pr-col--prem .pr-feat li .material-icons { color: var(--sp-brand); }
.pr-ico-ok { color: var(--sp-success); }
.pr-ico-brand { color: var(--sp-brand); }
.pr-ml-auto { margin-left: auto; }

/* per-contest cards */
.pr-contests { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.pr-ccard { background: var(--sp-surface); border: 1px solid var(--sp-hairline); border-radius: var(--sp-radius-lg); overflow: hidden; box-shadow: var(--sp-shadow); }
.pr-ccard__head { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-6) var(--sp-8); border-bottom: 1px solid var(--sp-hairline); background: var(--sp-surface-2); }
.pr-ccard__badge { width: 40px; height: 40px; border-radius: var(--sp-radius-md); background: var(--sp-brand-tint); color: var(--sp-brand); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pr-ccard__badge .material-icons { font-size: 24px; }
.pr-ccard__t { font-family: 'Oswald', var(--sp-font); text-transform: uppercase; letter-spacing: .05em; font-size: var(--sp-text-xl); color: var(--sp-ink); }
.pr-ccard__t small { display: block; font-family: var(--sp-font); text-transform: none; letter-spacing: 0; font-size: var(--sp-text-xs); color: var(--sp-success-strong); font-weight: 700; }
.pr-ccard__body { padding: var(--sp-7) var(--sp-8); }
.pr-ccard__lead { font-family: 'Oswald', var(--sp-font); text-transform: uppercase; letter-spacing: .08em; font-size: var(--sp-text-sm); font-weight: 600; color: var(--sp-muted); margin-bottom: var(--sp-5); }
.pr-frow { display: flex; gap: var(--sp-4); padding: var(--sp-4) 0; border-top: 1px solid var(--sp-hairline); }
.pr-frow:first-of-type { border-top: none; }
.pr-frow__ic { width: 30px; height: 30px; border-radius: 8px; background: var(--sp-surface-3); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pr-frow__ic .material-icons { font-size: 18px; color: var(--sp-brand); }
.pr-frow__t { font-weight: 700; color: var(--sp-ink); font-size: var(--sp-text-md); }
.pr-frow__d { color: var(--sp-muted); font-size: var(--sp-text-sm); margin-top: 1px; }
.pr-teaser { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-6); padding: var(--sp-4) var(--sp-5); border-radius: var(--sp-radius); background: var(--sp-brand-wash); border: 1px dashed var(--sp-brand-ring); font-size: 12.5px; color: var(--sp-ink-2); }
.pr-teaser .material-icons { font-size: 17px; color: var(--sp-brand); }

/* cta band */
.pr-band { margin: var(--sp-10) 0 var(--sp-3); background: var(--sp-ink); border-radius: var(--sp-radius-lg); padding: var(--sp-10); text-align: center; }
.pr-band h2 { color: var(--sp-on-brand); font-size: var(--sp-text-4xl); font-weight: 700; margin: 0; }
.pr-band p { color: rgba(255,255,255,.72); margin: var(--sp-4) 0 var(--sp-7); font-size: var(--sp-text-lg); }
.pr-band .sp-btn { width: auto; }
.pr-band__fine { margin-top: var(--sp-5); font-size: 12.5px; color: rgba(255,255,255,.55); }

@media (max-width: 820px) {
    .pr-hero { grid-template-columns: 1fr; gap: var(--sp-8); padding: var(--sp-6) 0; }
    .pr-hero h1 { font-size: 34px; }
    .pr-compare, .pr-contests { grid-template-columns: 1fr; }
    .pr-pricecard { max-width: 420px; margin: 0 auto; }
}