/* Pricing page — three plan cards + "what you'll never pay" grid
   (FAQ accordion styles live in styles.css, shared with faq.html) */
.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem); align-items:start; }
.plan { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.6rem,2.6vw,2.2rem); transition:.3s; position:relative; }
.plan:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.plan.feat { border-color:var(--accent); box-shadow:var(--shadow-md); }
.plan.feat::before { content:"Most popular"; position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--accent); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.04em; padding:5px 14px; border-radius:99px; }
html[data-theme="dark"] .plan.feat::before { color:#1a0f0a; }
.plan h3 { font-family:var(--font-display); font-size:1.5rem; }
.plan .who { color:var(--muted); font-size:.88rem; margin-top:.3rem; min-height:2.4em; }
.plan .price { font-family:var(--font-display); font-size:2.6rem; line-height:1; margin:1.2rem 0 .2rem; }
.plan .price small { font-family:var(--font-sans); font-size:.92rem; color:var(--muted); font-weight:500; }
.plan .qual { font-size:.84rem; color:var(--muted); margin-bottom:1.4rem; }
.plan .btn { width:100%; margin-bottom:1.4rem; }
.plan ul { list-style:none; padding:0; display:grid; gap:.7rem; }
.plan ul li { display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem; color:var(--text-2); }
.plan ul li .tick { flex:none; width:20px; height:20px; border-radius:50%; background:var(--accent-tint); color:var(--accent); display:grid; place-items:center; margin-top:1px; }
.plan ul li .tick svg { width:12px; height:12px; }

.nopay { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.4rem); }
.nopay .np { background:var(--surface); border:1px dashed var(--line-strong); border-radius:var(--radius); padding:1.6rem; text-align:center; }
.nopay .np .big { font-family:var(--font-display); font-size:2rem; color:var(--accent); }
.nopay .np p { color:var(--text-2); font-size:.92rem; margin-top:.3rem; }

@media (max-width:860px){ .plans, .nopay { grid-template-columns:1fr; } }