/* Pricing styles extracted from billing_plans.html
   Keep these separate so templates remain clean and styles can be reused. */
.pricing-hero{padding:28px 0 8px;text-align:center}
.pricing-toggle{margin:10px auto 22px;display:inline-block}
.pricing-toggle{display:flex;align-items:center;gap:10px}
.pricing-toggle input[type=checkbox]{appearance:none;width:54px;height:28px;border-radius:16px;background:rgba(255,255,255,0.12);position:relative;outline:none;cursor:pointer}
.pricing-toggle input[type=checkbox]:before{content:'';position:absolute;left:4px;top:4px;width:20px;height:20px;border-radius:999px;background:#ffd54f;box-shadow:0 2px 6px rgba(0,0,0,0.35);transition:all .2s}
.pricing-toggle input[type=checkbox]:checked{background:rgba(255,255,255,0.18)}
.pricing-toggle input[type=checkbox]:checked:before{transform:translateX(26px);background:#ffcc00}
.plans-grid{display:flex;gap:20px;align-items:stretch}
.plan-card{flex:1;padding:28px;border-radius:14px;color:#fff;background:linear-gradient(180deg,#0b63b7 0%,#0a4ea0 100%);box-shadow:0 10px 30px rgba(4,29,66,0.45);position:relative}
.plan-card.secondary{background:linear-gradient(180deg,#0f7ad1 0%,#1170d1 100%)}
.plan-card.highlight{transform:translateY(-10px);box-shadow:0 18px 40px rgba(4,29,66,0.55);background:linear-gradient(180deg,#0077e6 0%,#0066cc 100%)}
.plan-name{font-size:18px;opacity:0.95}
.plan-price .price{font-size:40px;font-weight:800;margin:10px 0}
.plan-price .price small{font-size:12px;opacity:0.9;margin-left:8px}
.plan-desc{color:rgba(255,255,255,0.9);margin-bottom:12px}
.plan-features{list-style:none;padding:0;margin:12px 0}
.plan-features li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.06);display:flex;align-items:flex-start}
.plan-features li:before{content:'✔';display:inline-block;margin-right:10px;color:#00f0d1;font-weight:700}
.plan-cta{margin-top:18px;text-align:center}
.btn-teal{background:#00e6cc;color:#003340;padding:12px 18px;border-radius:8px;border:none;font-weight:700;cursor:pointer;}
.btn-ghost{background:transparent;border:2px solid rgba(255,255,255,0.18);padding:10px 16px;border-radius:8px;color:rgba(255,255,255,0.95)}
.price-note{font-size:13px;color:rgba(255,255,255,0.8);margin-top:6px}
.plan-foot{position:relative;}
@media (max-width:900px){.plans-grid{flex-direction:column}.plan-card{transform:none}}

/* Small tweaks for free/custom labels inside price element */
.plan-price .price.free{font-size:32px;font-weight:700}