/* Main Styles (non-critical) */
.section { max-width: var(--maxw); margin: 0 auto; padding: 2rem 1rem; }
.grid-2 { display:grid; gap:1rem; }
@container (min-width: 920px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.pricing { display:grid; gap:1rem; grid-template-columns: repeat(12, 1fr); }
.pricing .plan { grid-column: span 12; border:1px solid color-mix(in lab, var(--muted) 20%, transparent); border-radius: var(--radius); padding:1rem; background:var(--surface); }
@container (min-width: 900px) { .pricing .plan { grid-column: span 4; } }
.toggle { display:flex; align-items:center; gap:.5rem; }
.kpi { display:flex; gap:1rem; align-items:center; }
.badge { background: color-mix(in lab, var(--brand) 15%, transparent); color: var(--brand); padding:.2rem .5rem; border-radius:999px; font-size:.85rem; }
.muted { color: var(--muted); }
.modal-backdrop { position:fixed; inset:0; background: color-mix(in lab, #000 40%, transparent); display:none; align-items:center; justify-content:center; }
.modal-backdrop[open] { display:flex; }
.modal { width:min(640px, 92vw); background: var(--bg); border-radius: var(--radius); box-shadow: var(--shadow); border:1px solid color-mix(in lab, var(--muted) 20%, transparent); }
.modal header, .modal footer { padding:1rem; border-bottom:1px solid color-mix(in lab, var(--muted) 20%, transparent); }
.modal footer { border-top:1px solid color-mix(in lab, var(--muted) 20%, transparent); border-bottom:0; display:flex; gap:.5rem; justify-content:flex-end; }
.modal .content { padding:1rem; max-height:60vh; overflow:auto; }
.faq-item { border:1px solid color-mix(in lab, var(--muted) 20%, transparent); border-radius: var(--radius); margin-bottom:.75rem; background: var(--surface); }
.faq-item button[aria-expanded] { width:100%; text-align:left; padding:1rem; background:none; border:0; font-size:1rem; }
.faq-panel { padding: 0 1rem 1rem; display:none; }
.faq-panel[hidden] { display:none; }
.faq-panel[aria-hidden="false"] { display:block; }
form { display:grid; gap:.75rem; }
input, textarea, select { padding:.65rem .75rem; border-radius:6px; border:1px solid color-mix(in lab, var(--muted) 30%, transparent); background:var(--bg); color:var(--text); }
.error { color: #B00020; }
.toast { position:fixed; bottom:1rem; right:1rem; background: var(--brand); color:#fff; padding:.6rem .9rem; border-radius: var(--radius); box-shadow: var(--shadow); display:none; }
.toast[show] { display:block; }