/* pricing.css — the Monthly/Yearly toggle and plan cards
   (templates/plan-cards.html), shared by the homepage's pricing section and
   /pricing/, plus the pricing page's comparison table. Scoped under
   .pricing-plans / .pricing-compare, using site-chrome.css's tokens, so it
   reads the same on both pages and can't clash with the in-app billing
   card's .billing-toggle in style.css. */

.pricing-plans .billing-toggle { display: flex; justify-content: center; gap: 4px; margin: 26px auto 0; padding: 4px; width: fit-content; border: 1px solid var(--chrome-line); border-radius: 100px; background: var(--chrome-surface); }
.pricing-plans .billing-opt { font: inherit; font-size: 14px; font-weight: 600; border: 0; background: none; color: var(--chrome-muted); border-radius: 100px; padding: 8px 18px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.pricing-plans .billing-opt[aria-pressed="true"] { background: var(--chrome-text); color: var(--chrome-surface); }
.pricing-plans .billing-save { font-size: 11px; font-weight: 700; color: var(--chrome-teal); background: var(--chrome-teal-dim); border-radius: 100px; padding: 2px 8px; }
.pricing-plans .billing-opt[aria-pressed="true"] .billing-save { background: var(--chrome-teal); color: #eafffa; }

.pricing-plans .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
@media (max-width: 860px) { .pricing-plans .plans { grid-template-columns: 1fr; } }
.pricing-plans .plan { position: relative; display: flex; flex-direction: column; padding: 28px 24px; border: 1px solid var(--chrome-line); border-top: 4px solid var(--chrome-dim); border-radius: 14px; background: var(--chrome-surface); }
.pricing-plans .plan.tier-1 { border-top-color: var(--chrome-teal); box-shadow: 0 20px 44px -24px rgba(14, 125, 108, 0.35); }
.pricing-plans .plan.tier-2 { border-top-color: var(--chrome-amber); }
.pricing-plans .plan-badge { position: absolute; top: -13px; left: 24px; background: var(--chrome-teal); color: #eafffa; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; }
.pricing-plans .plan-name { font-family: "Space Grotesk", "Segoe UI", sans-serif; font-size: 20px; font-weight: 600; color: var(--chrome-text); }
.pricing-plans .plan-tagline { font-size: 13.5px; color: var(--chrome-muted); margin-top: 4px; }
.pricing-plans .plan-price { display: flex; align-items: baseline; gap: 6px; margin-top: 20px; color: var(--chrome-text); }
.pricing-plans .plan-price .amount { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 36px; font-weight: 600; }
.pricing-plans .plan-price .period { font-size: 13.5px; color: var(--chrome-dim); }
.pricing-plans .plan-billed { font-size: 12.5px; color: var(--chrome-dim); min-height: 18px; margin-top: 4px; }
.pricing-plans .plan-cta { margin-top: 20px; }
.pricing-plans .plan-features { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 11px; }
.pricing-plans .plan-features li { display: flex; gap: 9px; font-size: 13.5px; align-items: flex-start; color: var(--chrome-text); }
.pricing-plans .plan-features li svg { flex: none; color: var(--chrome-teal); margin-top: 3px; }
.pricing-plans .plan-features li.muted, .pricing-plans .plan-features li.muted svg { color: var(--chrome-dim); }

/* /pricing/ only */
.pricing-compare { margin-top: 48px; }
.pricing-compare h2, .pricing-faq h2 { font-family: "Space Grotesk", "Segoe UI", sans-serif; font-size: 22px; margin: 0 0 8px; }
.compare-table td:not(:first-child), .compare-table th:not(:first-child) { text-align: center; }
.compare-table .yes { color: var(--chrome-teal); font-weight: 700; }
.compare-table .no { color: var(--chrome-dim); }
.pricing-note { font-size: 13px; }
.pricing-faq { margin-top: 40px; max-width: 780px; }
.pricing-fallback { text-align: center; margin-top: 24px; font-weight: 600; }