.hero { text-align: center; padding-top: 64px; padding-bottom: 40px; max-width: 760px; }
.hero h1 { font-size: clamp(30px, 5vw, 46px); letter-spacing: -.02em; }
.hl { color: var(--brand); }
.lead { font-size: 18px; color: var(--muted); margin: 18px auto 24px; max-width: 620px; }
.row.center { justify-content: center; }
.center-text { text-align: center; }
.section-title { text-align: center; font-size: 26px; margin: 30px 0 20px; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.features .card h3 { margin-bottom: 6px; }
.features .card p { margin: 0; }
@media (max-width: 820px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .features { grid-template-columns: 1fr; } }
.num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); margin-bottom: 8px; }
.price { text-align: center; position: relative; }
.price.best { border: 2px solid var(--brand); }
.price .badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--brand); color: var(--brand-ink); border: 0; }
.amount { font-size: 40px; font-weight: 800; margin: 6px 0 0 !important; }
.price ul { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 6px; }
.narrow { max-width: 720px; display: flex; flex-direction: column; gap: 10px; }
details summary { cursor: pointer; font-weight: 600; }
details p { margin: 10px 0 0; }
footer { padding-top: 40px; }