Pricing with Monthly/Yearly Toggle

Build a three-tier pricing section with a monthly/yearly pill toggle. Clean white design, black accents. The middle 'Pro' card is highlighted with a 2px black border and lifted 6px. Prices swap with a quick number tween when the toggle changes; yearly shows the discounted per-month price and a '−20%' label. Each card lists 2–4 features with check marks and a CTA. Accessible: the toggle is a real radio group.

<style>*{box-sizing:border-box;margin:0}body{font-family:Inter,system-ui,sans-serif;overflow:hidden}</style><style>body{background:#fff;color:#111;padding:26px;height:100vh;text-align:center}.tg{display:inline-flex;background:#f1f1f1;border-radius:999px;padding:4px;margin:6px 0 18px}
.tg b{padding:6px 14px;border-radius:999px;font-size:13px;cursor:pointer}.tg b.on{background:#111;color:#fff}.r{display:flex;gap:12px;justify-content:center}
.p{border:1px solid #e5e5e5;border-radius:16px;padding:18px;width:180px;text-align:left}.p.h{border:2px solid #111;transform:translateY(-6px)}.p h4{font-size:14px;color:#666}.p .v{font-size:34px;font-weight:800;margin:6px 0}.p li{font-size:12px;color:#555;list-style:none;margin:4px 0}</style>
<h2>Simple pricing</h2><div class="tg"><b class="on" onclick="s(0,this)">Monthly</b><b onclick="s(1,this)">Yearly −20%</b></div>
<div class="r"><div class="p"><h4>Starter</h4><div class="v" data-m="0" data-y="0">$0</div><li>✓ 3 projects</li><li>✓ Community</li></div><div class="p h"><h4>Pro</h4><div class="v" data-m="19" data-y="15">$19</div><li>✓ Unlimited</li><li>✓ Exports in 4K</li></div><div class="p"><h4>Team</h4><div class="v" data-m="49" data-y="39">$49</div><li>✓ 5 seats</li><li>✓ Brand kits</li></div></div>
<script>function s(y,el){document.querySelectorAll('.tg b').forEach(b=>b.classList.toggle('on',b===el));document.querySelectorAll('.v').forEach(v=>v.textContent='$'+(y?v.dataset.y:v.dataset.m))}</script>