/* The pricing page, since October 26, 2026. It loads home.css for the tokens, the nav, the footer, the plan cards and
   the questions, and this file for what is only here: the first screen with the switch, the table, the top-ups, the
   last ask. */
.pricing-page { background: #fff; }
.pricing-page .nav { position: sticky; top: 0; }
.pricing-page .nav.solid { background: rgba(255, 255, 255, .9); }
/* the first screen: the page's dark blue, the words and the switch on it, the cards riding up over its bottom edge */
.pr-hero { position: relative; padding: 150px 0 90px; text-align: center; color: #fff; background: radial-gradient(120% 90% at 100% 0%, #26305a 0%, #0f1220 60%); overflow: hidden; }
.pr-glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.pr-glow.a { width: 640px; height: 640px; left: -160px; bottom: -320px; background: rgba(52, 84, 209, .55); }
.pr-glow.b { width: 520px; height: 520px; right: -120px; top: -200px; background: rgba(124, 155, 255, .35); }
.pr-hero .wrap { position: relative; z-index: 1; }
.pr-hero h1 { font-size: clamp(40px, 5.3vw, 78px); letter-spacing: -0.045em; line-height: 1; color: #fff; }
.pr-hero .lede { color: rgba(255, 255, 255, .78); }
.pr-trust { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 20px; font-size: 16px; color: rgba(255, 255, 255, .72); }
.pr-trust span::before { content: ""; display: inline-block; width: 16px; height: 16px; border-radius: 4px; margin-right: 8px; vertical-align: -3px; background: #8ff0b0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a4d20' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center/10px no-repeat; }
.pr-switch { display: inline-flex; margin-top: 30px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .16); }
.pr-switch button { border: 0; background: transparent; font: inherit; font-size: 17px; font-weight: 500; color: #fff; padding: 11px 20px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.pr-switch button.on { background: #fff; color: var(--ink); }
.pr-switch em { font-style: normal; font-size: 13px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #8ff0b0; color: #0a4d20; }
.pr-plans { padding: 64px 0 80px; text-align: center; background: linear-gradient(180deg, #ffffff 0%, #f6f6f4 100%); }
.pr-plans .plan-cards { margin-top: 0; }
.pr-plans .plan-card { box-shadow: 0 30px 80px rgba(0, 0, 0, .18); border-top: 6px solid var(--tone); }
.pr-plans .plan-card.lead { box-shadow: 0 30px 80px rgba(52, 84, 209, .35), 0 0 0 1.5px var(--accent) inset; border-color: var(--accent); }
.pr-plans .plan-card.lead .plan-tag { background: var(--accent); }
.tone-starter { --tone: #8ff0b0; } .tone-plus { --tone: #3454d1; } .tone-pro { --tone: #ffd166; }
.pr-plans .plan-k { color: var(--tone); } .tone-starter .plan-k { color: #0a7a2f; } .tone-pro .plan-k { color: #a35a12; }
.pr-plans .plan-card.lead .btn { background: var(--accent); }
.plan-year { display: block; font-size: 15px; color: var(--paper-muted); margin-top: 2px; }
.plan-for { display: block; font-size: 16px; color: var(--paper-muted); margin-top: 4px; line-height: 1.4; }
.pr-compare { padding: 80px 0; background: linear-gradient(180deg, #f6f6f4 0%, #ffffff 100%); }
.pr-compare h2, .pr-topups h2, .faq-wrap h2.center { text-align: center; }
.pr-table-wrap { margin-top: 44px; overflow-x: auto; }
.pr-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 17px; }
.pr-table th, .pr-table td { padding: 16px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pr-table thead th { font-weight: 500; font-size: 20px; text-align: center; border-bottom: 2px solid var(--ink); padding-bottom: 18px; }
.pr-table thead th:nth-child(3) { color: var(--accent); }
.pr-table tbody td:nth-child(3) { background: rgba(52, 84, 209, .05); }
.pr-table thead th small { display: block; font-size: 15px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.pr-table thead th:first-child { text-align: left; }
.pr-table tbody th { font-weight: 400; color: var(--ink); width: 44%; }
.pr-table td { text-align: center; color: var(--body); }
.pr-table tr.group th { padding: 34px 14px 10px; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 0; }
.pr-table .yes, .pr-table .no { display: inline-block; width: 22px; height: 22px; border-radius: 5px; }
.pr-table .yes { background: #dcf5e4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a7a2f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center/13px no-repeat; }
.pr-table .no { background: var(--soft); position: relative; }
.pr-table .no::after { content: ""; position: absolute; left: 6px; right: 6px; top: 10px; height: 2px; background: #c4c7cf; border-radius: 1px; }
.sr { position: absolute; left: -9999px; }
.pr-topups { padding: 70px 0; text-align: center; }
.pr-topup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; }
.pr-topup-grid div { background: #fff; border: 1.5px solid var(--line); border-top: 6px solid #d3cbf4; border-radius: 8px; padding: 30px 24px; }
.pr-topup-grid div:last-child { border-top-color: #ffa3b5; }
.pr-topup-grid b { display: block; font-size: 48px; font-weight: 400; letter-spacing: -.04em; line-height: 1; }
.pr-topup-grid span { display: block; font-size: 20px; margin-top: 8px; }
.pr-topup-grid small { display: block; font-size: 17px; color: var(--muted); margin-top: 6px; }
.pr-final { padding: 100px 0; text-align: center; background: radial-gradient(120% 90% at 100% 0%, #26305a 0%, #0f1220 60%); color: #fff; }
.pr-final h2 { font-size: clamp(40px, 6vw, 84px); letter-spacing: -0.045em; color: #fff; }
.pr-final p { margin: 18px 0 0; font-size: 19px; color: rgba(255, 255, 255, .8); }
.pr-final .btn { margin-top: 28px; background: #fff; color: var(--ink); height: 54px; font-size: 17px; padding: 0 24px; }
@media (max-width: 900px) {
  .pr-hero { padding: 120px 0 64px; }
  .pr-plans { padding-top: 44px; }
  .pr-trust { gap: 12px; font-size: 15px; }
  .pr-switch button { font-size: 16px; padding: 10px 14px; }
  .pr-table { font-size: 16px; min-width: 640px; }
  .pr-topup-grid { grid-template-columns: 1fr; }
  .pr-compare, .pr-topups { padding: 60px 0; }
}