Locked features show real UI with upgrade CTAs

Free-tier users now see the actual paid UI dimmed with a centered upgrade CTA, instead of a plain text callout. Better understanding of what upgrading unlocks.

Old way: you're on the free plan, you open your page settings, and the Custom CSS section shows a gray box with "Upgrade to Pro to inject custom CSS." You don't know what the feature actually looks like. You don't know if it's worth the upgrade. You click away.

New way: you see the real CSS editor, the real custom head HTML input, the real textarea with our sanitizer notes. All of it. Dimmed to 40% opacity with a slight blur, and a centered card floating over it says "Pro feature: Custom CSS and Google Fonts" with a big green Upgrade button. You can see exactly what you're paying for before you decide.

We built a reusable <LockedFeature> wrapper and applied it to:

Custom CSS and custom <head> HTML (Pro+)
Custom domain (Starter+)
Webhooks integration panel (Starter+)
Hide "Powered by" badge (Pro+)

The pattern works for any paid feature where showing the UI converts better than describing it. Seeing the real editor with a realistic CSS sample makes people go "oh that's exactly what I want" and click upgrade.

The <LockedFeature> component is in src/components/locked-feature.tsx if you want to see how it works. Three color variants for the three paid tiers (emerald Starter, violet Pro, amber Business).