/* Pricing presentation. Billing state classes and DOM hooks remain unchanged. */
.pricing-hero { max-width:760px; margin:auto; text-align:center; padding:64px var(--ms-gutter) 32px; }
.pricing-badge,.plan-name { font-size:.875rem; font-weight:600; letter-spacing:.04em; }
.pricing-hero h1,.compare-heading,.faq-heading,.bottom-cta h2,.plan-care h2 { font-family:var(--ms-font-display); font-weight:400; line-height:1.15; letter-spacing:-.03em; }
.pricing-hero h1 { font-size:var(--ms-text-title); margin-block:20px; }
.pricing-hero p { font-size:1.125rem; }
.billing-toggle { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:12px; padding:12px var(--ms-gutter); }
.toggle-label { font-size:1rem; color:var(--ms-muted); }
.toggle-label.active { color:var(--ms-ink); font-weight:700; }
.toggle-switch { position:relative; width:64px; height:44px; padding:0; border:1px solid var(--ms-muted); border-radius:24px; background:var(--ms-sage); cursor:pointer; }
.toggle-switch::after { content:''; position:absolute; width:30px; height:30px; top:6px; left:6px; border-radius:50%; background:var(--ms-green); transition:transform .2s; }
.toggle-switch.annual::after { transform:translateX(20px); }
.savings-pill { font-size:.875rem; background:var(--ms-sage); padding:4px 10px; border-radius:12px; }
.annual-path { text-align:center; margin:8px var(--ms-gutter) 40px; }
.annual-path a { display:inline-flex; align-items:center; min-height:44px; }
.plans-section,.compare-section,.faq-section,.bottom-cta { width:min(var(--ms-content-max),calc(100% - 2 * var(--ms-gutter))); margin-inline:auto; }
.plans-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:920px; margin:auto; }
.plan-card { padding:32px; border:1px solid var(--ms-line); border-radius:12px; background:white; min-width:0; display:flex; flex-direction:column; }
.plan-card.featured { background:var(--ms-pricing-surface); border-color:var(--ms-muted); }
.featured-badge { align-self:flex-start; padding:4px 10px; margin-bottom:16px; background:var(--ms-cream); border-radius:6px; font-size:.875rem; }
.plan-price { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px; margin-top:12px; }
.plan-price-amount { font-family:var(--ms-font-display); font-size:3.5rem; line-height:1.2; }
.plan-price-currency { font-size:1.5rem; }
.plan-price-period,.plan-billing-note { font-size:1rem; }
.plan-billing-note { margin-top:12px!important; }
.plan-divider { height:1px; background:var(--ms-line); margin-block:24px; }
.featured .plan-divider { background:var(--ms-muted); }
.plan-features { margin:0 0 28px; padding:0; list-style:none; }
.plan-features li { display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; }
.check { flex:none; width:20px; color:var(--ms-green); }
.check svg { width:20px; height:20px; stroke:currentColor; stroke-width:2; }
.btn-plan { margin-top:auto; }
.plan-care { grid-column:1/-1; background:var(--ms-sage); }
.plan-care h2 { font-size:2rem; margin-top:8px; }
.plan-care p + p { margin-top:16px; }
.plan-care a { color:var(--ms-green); text-underline-offset:4px; }
.compare-section,.faq-section { max-width:920px; padding-top:64px; }
.compare-heading,.faq-heading,.bottom-cta h2 { font-size:var(--ms-text-section); margin-bottom:24px; }
.compare-table { min-width:560px; }
.faq-item { border-bottom:1px solid var(--ms-line); padding-block:8px; }
.faq-question { width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; text-align:left; border:0; padding:20px 0; background:transparent; color:var(--ms-ink); font-weight:600; cursor:pointer; }
.faq-question svg { width:20px; height:20px; flex:none; stroke:currentColor; }
.faq-item.open .faq-question svg { transform:rotate(180deg); }
.faq-answer { display:none; padding-bottom:20px; }
.faq-item.open .faq-answer { display:block; }
.bottom-cta { margin-top:64px; border-radius:16px; padding:48px 32px; background:var(--ms-closing-surface); text-align:center; }
.bottom-cta-inner { max-width:650px; margin:auto; }
.bottom-cta p { margin-bottom:28px; }
.bottom-cta-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:16px; }
.show-annual .price-monthly,.show-monthly .price-annual { display:none; }
.ms-theme > [role=alert] { margin:20px; padding:16px; border:1px solid var(--ms-color-warning); background:var(--ms-butter); color:var(--ms-ink); }
@media(max-width:650px) { .plans-grid { grid-template-columns:minmax(0,1fr); } .plan-card { padding:24px; } .pricing-hero { padding-top:40px; } .compare-section,.faq-section { padding-top:48px; } .bottom-cta { padding:32px 20px; } }