Email Capture Popup

Build an email capture popup for my website. Match my existing design system, colors, and fonts.

STRUCTURE
- A full-viewport overlay (semi-transparent dark background) with a centered card, max width 420px, rounded corners, generous padding.
- Card contents, top to bottom: a close button (top-right corner, X icon), a short bold headline, one supporting line, an email input, a submit button, and a tiny dismiss link under the button ("No thanks").
- Style: light card (white background, dark text), primary button in my brand's accent color.

OFFER
- The offer is a discount: headline like "Get 10% off your first order", supporting line telling the visitor the code arrives by email, button label "Send me the code". Adapt the wording and percentage to my business.

TRIGGER
- Show it on exit intent: on desktop, when the cursor moves out of the viewport toward the top of the window; on touch devices, fall back to showing it after 30 seconds on the page.

BEHAVIOR
- Show it at most once per session: set a flag in sessionStorage when shown or dismissed, and never show it again while the flag exists.
- Close it on: the X button, the "No thanks" link, a click on the overlay outside the card, and the Escape key.
- On submit: validate the email format client-side, then hand the email to my existing email tool or backend (leave a clearly marked TODO where the integration call goes).
- After a successful submit, replace the card content with a one-line thank-you message and auto-close after 2 seconds.

ACCESSIBILITY AND QUALITY
- Trap focus inside the card while it is open and return focus to the page when it closes.
- role="dialog" and aria-modal="true" on the card, aria-label on the close button.
- Animate in with a quick fade and slight scale-up (150-200ms), no bounce.
- The popup must be responsive: full-width card with margins on small screens.
- No layout shift on the underlying page when the overlay opens (compensate for scrollbar removal).

QUESTIONS
- Before you build, find or ask for: which email tool or backend receives the emails, and the real offer (the actual discount value or the lead magnet's name). 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.