/* ---------- Pricing ---------- */
.pricing{max-width:1120px;margin:auto}
.pricing-head{text-align:center;max-width:640px;margin:0 auto 34px}
.pricing-head h1{transform:none}
.pricing-head p{margin:14px auto 0;font-size:18px}
.pricing-loading{text-align:center;color:var(--muted)}
.plan-bar{display:flex;align-items:center;gap:20px 28px;flex-wrap:wrap;padding:16px 20px;margin:0 0 22px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.plan-bar-main{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;flex:1 1 260px;min-width:0}
.plan-bar-label{font-size:13px;color:var(--muted)}
.plan-bar-main b{font:800 22px var(--display);letter-spacing:-.02em}
.plan-bar-note{font-size:14px;color:var(--muted)}
.plan-bar-actions{display:flex;gap:10px;flex-wrap:wrap}
.plan-bar-actions:empty{display:none}
.billing-notice{padding:14px 18px;margin:0 0 22px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);font-size:14px;line-height:1.6}
.billing-notice.success{border-color:#3cf2b555}
.billing-message:empty{display:none}
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px;align-items:stretch}
.plan-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:30px 26px 28px;border:1px solid var(--line);border-radius:22px;background:var(--card)}
.plan-card.featured{border-color:#5b7cff;background:linear-gradient(180deg,#18236c,var(--card) 65%);box-shadow:0 30px 70px -36px #2854ffcc}
.plan-card.current{border-color:#3cf2b588}
.plan-flag{position:absolute;top:-12px;left:24px;padding:4px 11px;border-radius:999px;background:linear-gradient(90deg,var(--blue-2),var(--violet));color:#fff;font-size:12px;font-weight:700;white-space:nowrap}
.plan-card.current .plan-flag{background:var(--mint);color:#032419}
.plan-card h2{font-size:26px}
.plan-tagline{margin-top:8px;line-height:1.5;min-height:3em}
.plan-price{display:flex;align-items:baseline;gap:8px;margin:20px 0 0}
.plan-price b{font:800 48px/1 var(--display);letter-spacing:-.03em;color:var(--text);font-variant-numeric:tabular-nums}
.plan-price span{font-size:13px;color:var(--muted);white-space:nowrap}
.plan-cta{margin:22px 0 24px}
.plan-current-label,.plan-note{display:flex;align-items:center;justify-content:center;min-height:50px;border-radius:12px;text-align:center;font-size:14px}
.plan-current-label{border:1px dashed #3cf2b577;color:var(--mint);font-weight:600}
.plan-note{border:1px dashed var(--line);color:var(--muted);padding:6px 12px;font-size:13px}
.faq{max-width:760px;margin:64px auto 0}
.faq h2{font-size:26px;margin-bottom:12px;text-align:center}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 4px;cursor:pointer;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--raised);color:var(--blue-2);font-size:18px;line-height:1;transition:transform .2s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq summary:hover{color:#fff}
.faq details p{padding:0 4px 18px;line-height:1.7;max-width:65ch}
.billing-footnote{margin:28px auto 0;text-align:center;font-size:12px;color:var(--faint);max-width:70ch}
/* Used on game pages and tables */
.billing-inline{color:var(--blue-2);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.history-upgrade{display:block;margin:12px 0;color:var(--muted);font-size:13px}
@media(max-width:900px){
 .plan-grid{grid-template-columns:1fr;max-width:480px;margin-inline:auto;gap:26px}
 .plan-tagline{min-height:0}
}
@media(max-width:600px){
 .pricing-head{margin-bottom:24px}
 .pricing-head p{font-size:16px}
 .plan-bar{padding:16px}

 .plan-bar-actions{width:100%}
 .plan-bar-actions .button{flex:1}
 .plan-card{padding:28px 20px 24px}
 .plan-price b{font-size:42px}
}
/* Locked revenue: a blurred random placeholder (never real data) */
.rev-locked{position:relative;display:inline-flex;align-items:center;justify-content:flex-end;color:var(--violet);text-decoration:none;border-radius:8px}
.rev-blur{filter:blur(5px);opacity:.9;user-select:none;-webkit-user-select:none;pointer-events:none;font-variant-numeric:tabular-nums}
.rev-locked:hover .rev-blur{opacity:.55}
.rev-locked.big{font:inherit;gap:10px}
.rev-locked.big .rev-blur{filter:blur(9px)}
.mobile-revenue .rev-locked{justify-content:flex-end}

/* ---------- Tiers: each step up looks clearly bigger and brighter ---------- */
.plan-features{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:4px}
.plan-features li{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:12px;font-size:14px;line-height:1.45}
.plan-features .mark{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%}
.plan-features .mark svg{width:13px;height:13px}
.plan-features li.on{color:var(--text)}
.plan-features li.off{color:var(--faint);text-decoration:line-through;text-decoration-color:#6f78ab88}
.plan-features li.off .mark{background:#ffffff08;color:#6f78ab}
.plan-features li.new{background:#ffffff0a;font-weight:600}
/* Free: quiet and flat */
.tier-free{background:#0a0f38aa;box-shadow:none}
.tier-free .plan-price b{color:var(--muted)}
.tier-free li.on .mark{background:#ffffff12;color:var(--muted)}
/* Pro: blue */
.tier-pro{border-color:#4a6eff88;background:linear-gradient(180deg,#121c63,var(--card) 70%)}
.tier-pro h2,.tier-pro .plan-price b{color:#9db6ff}
.tier-pro li.on .mark{background:#5b8cff2e;color:#9db6ff}
.tier-pro li.new{background:#5b8cff1f}
/* Studio: full glow */
.plan-card.tier-studio{border:1px solid transparent;background:linear-gradient(180deg,#1e1a6e,#0e1350 70%) padding-box,linear-gradient(135deg,var(--mint),var(--blue-2) 45%,var(--violet)) border-box;box-shadow:0 30px 80px -30px #7a5cffcc,0 0 0 1px #bd87ff22}
.tier-studio h2,.tier-studio .plan-price b{background:linear-gradient(90deg,#fff,#d6c2ff 60%,#9ff5dc);-webkit-background-clip:text;background-clip:text;color:transparent}
.tier-studio li.on .mark{background:linear-gradient(135deg,var(--mint),var(--violet));color:#0b1040}
.tier-studio li.new{background:linear-gradient(90deg,#bd87ff26,#3cf2b514)}


/* Native links use the existing router, including back and forward navigation. */
.billing-frequency{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:8px auto 28px}
.billing-frequency a{display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--muted);font:600 14px var(--body);text-decoration:none}
.billing-frequency a[aria-current="page"]{border-color:var(--blue-2);background:var(--raised);color:var(--text)}
.billing-frequency a:hover{border-color:var(--blue-2);color:var(--text)}
.billing-frequency small{color:var(--mint);font-size:12px}
.plan-billing-detail{min-height:3em;margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}