💸 Perf - Mount the Eventbrite Popup only when it opens

Sub-issue of the AI for Business Leaders performance PBI. Fully isolated.

Description

Blocks 5 and 37 of content/eventsv2/ai-for-business-leaders.json are the same "Pick your city" card carousel, four cards each — so eight EmbeddedCardButtons render, each with an eventbriteEventId.

components/eventbrite/eventbriteModalButton.tsx correctly defers the Eventbrite widget script until the user opens a modal — that part is well done and should stay. But the Popup itself is mounted unconditionally (the comment notes this is for the close animation), so eight copies of react-responsive-modal plus its global stylesheet are live in the tree at all times.

Proposed solution

1. Render the Popup only once it has been opened — track a "has ever opened" flag so the close animation still plays, but nothing mounts on first paint
2. Alternatively, hoist a single shared modal to the page level and have the buttons drive it, so eight CTAs cost one modal
3. Check whether react-responsive-modal's stylesheet can be scoped rather than imported globally

Acceptance criteria

1. No modal DOM or react-responsive-modal code is mounted on initial page load
2. Clicking any "Reserve my seat" CTA still opens the Eventbrite checkout, and the open/close animation is unchanged
3. Opening a second card's checkout after closing the first still works (no stacked iframes)
4. The existing script-timeout fallback link still appears when the Eventbrite script fails