Pricing Table

Build a pricing table section for my website. Match my existing design system, colors, and fonts.

STRUCTURE
- A section with a short centered heading, no billing toggle (monthly prices only), and the tier cards.
- Three tier cards in a row on desktop.
- Each card, top to bottom: plan name, price with billing period, one line saying who the plan is for, a feature list (5-7 items, checkmark icons), and a CTA button.
- Highlight the recommended tier (config flag on the plan): accent-color border, a small "Most popular" badge on top, and a filled CTA while other cards get outline CTAs. Slight scale or elevation is fine on desktop only.

DATA
- All plans live in one config array (name, monthly price, yearly price, audience line, features, CTA label, CTA URL). Render only what the config holds; prices and features are placeholders with a clearly marked TODO for my real plans. Never invent savings percentages: compute any "save X%" label from the actual configured prices.

BEHAVIOR
- Cards are equal height (CSS grid), CTAs aligned to the bottom.
- On mobile, cards stack vertically with the highlighted card first.

QUALITY
- Semantic markup: the section heading is an h2, plan names are h3s, feature lists are real ul/li.
- Prices use tabular numbers; currency formatted with Intl.NumberFormat from a locale config.
- CTA buttons at least 44px tall, visible focus rings, WCAG AA contrast everywhere including on the highlighted card.
- No layout shift when toggling billing periods: reserve consistent space for the price line.

QUESTIONS
- Before you build, find or ask for: my real plans (names, monthly and yearly prices, who each is for, features, CTA URLs). Check my project and site first; whatever you cannot find there, ask me for. Never invent these or ship placeholders.
- If anything else about my brand or content is unclear, ask me before inventing.