/* Pricing page — public, no login required. Self-contained styles that
   sit on top of the base tokens from styles.css. */

.pricing-body{background:radial-gradient(circle at 20% 0%,rgba(0,255,170,.10),transparent 50%),radial-gradient(circle at 80% 30%,rgba(102,204,255,.08),transparent 55%),var(--bg);min-height:100vh;padding:0 0 60px;font-family:-apple-system,Segoe UI,Roboto,sans-serif;color:var(--txt)}

.pricing-head{display:flex;justify-content:space-between;align-items:center;padding:22px 28px;max-width:1240px;margin:0 auto;gap:14px;flex-wrap:wrap}
.pricing-logo{font-size:22px;font-weight:800;letter-spacing:1.5px;color:var(--accent);text-decoration:none}
.pricing-controls{display:flex;gap:8px;flex-wrap:wrap}
.pricing-currency{background:var(--card2);border:1px solid var(--line);color:var(--txt);padding:8px 12px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer}
.pricing-currency:hover{border-color:var(--accent2)}

.pricing-hero{text-align:center;padding:36px 20px 24px;max-width:820px;margin:0 auto}
.pricing-hero h1{font-size:44px;font-weight:800;line-height:1.15;margin:0 0 12px;background:linear-gradient(135deg,#eafff5,#a8dbcb);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pricing-hero p{color:var(--muted);font-size:16px;line-height:1.55;margin:0 0 24px}

.pricing-toggle{display:inline-flex;background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:4px;gap:2px}
.pt-btn{background:transparent;border:none;color:var(--muted);padding:10px 20px;border-radius:999px;font-weight:600;font-size:13px;cursor:pointer;transition:.15s}
.pt-btn.active{background:var(--accent);color:#04201a;box-shadow:0 4px 14px rgba(0,255,170,.30)}

.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;padding:12px 24px;max-width:1240px;margin:24px auto 40px}
.plan-card{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:20px;padding:24px 22px;display:flex;flex-direction:column;position:relative;transition:.2s;min-height:520px}
.plan-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.plan-card.featured{border:2px solid var(--accent);box-shadow:0 8px 28px rgba(0,255,170,.20)}
.plan-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:#04201a;padding:4px 12px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase}
.plan-name{font-size:20px;font-weight:800;margin:0}
.plan-tagline{color:var(--muted);font-size:13px;margin:4px 0 18px;line-height:1.4;min-height:38px}
.plan-price{display:flex;align-items:baseline;gap:6px;margin-bottom:6px}
.plan-price-amount{font-size:40px;font-weight:800;color:var(--txt)}
/* Free-tier label is much shorter than a number — smaller so the Basic card
   isn't taller than the paid cards. Keeps the grid rows balanced. */
.plan-price-free{font-size:28px}
.plan-price-currency{font-size:22px;font-weight:700;color:var(--txt)}
.plan-price-suffix{color:var(--muted);font-size:13px}
.plan-price-yearly-note{font-size:12px;color:var(--accent);font-weight:600;height:16px;margin-bottom:14px}
.plan-cta{display:block;text-align:center;padding:13px 18px;border-radius:12px;font-weight:700;text-decoration:none;margin-bottom:20px;transition:.15s;border:none;font-size:15px;cursor:pointer;font-family:inherit}
.plan-cta.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#04221a}
.plan-cta.primary:hover{filter:brightness(1.08)}
.plan-cta.ghost{background:transparent;border:1px solid var(--line);color:var(--txt)}
.plan-cta.ghost:hover{border-color:var(--accent2)}
.plan-cta.current{background:var(--card);color:var(--muted);border:1px dashed var(--line);cursor:default}

.plan-features{list-style:none;padding:0;margin:0;flex:1;display:flex;flex-direction:column;gap:9px}
.plan-features li{display:flex;align-items:baseline;gap:8px;font-size:13.5px;line-height:1.4;color:#dfece5}
.plan-features li::before{content:"✓";color:var(--accent);font-weight:800;flex-shrink:0}
.plan-features li.off::before{content:"–";color:var(--muted)}
.plan-features li.off{color:var(--muted)}

.pricing-faq{max-width:820px;margin:40px auto 0;padding:0 24px}
.pricing-faq h2{font-size:26px;margin-bottom:18px}
.pricing-faq details{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:10px}
.pricing-faq summary{cursor:pointer;font-weight:600;list-style:none;position:relative;padding-inline-end:24px}
.pricing-faq summary::after{content:"›";position:absolute;inset-inline-end:0;transition:.2s;font-size:20px;line-height:1;color:var(--muted)}
[dir="rtl"] .pricing-faq summary::after{content:"‹"}
.pricing-faq details[open] summary::after{transform:rotate(90deg)}
.pricing-faq p{margin:12px 0 4px;color:var(--muted);font-size:14px;line-height:1.6}

.pricing-footer{text-align:center;padding:40px 20px 0;color:var(--muted);font-size:13px}
.pricing-footer a{color:var(--muted);text-decoration:none}
.pricing-footer a:hover{color:var(--accent2)}

@media(max-width:640px){
  .pricing-hero h1{font-size:32px}
  .plan-card{min-height:auto}
}