Smart Pricing

# Prompt: Smart Pricing — Mint Aurora

Build a single-file **pricing section** with three plans. Use plain HTML, CSS and vanilla JS, with no framework and no build step. The look is near-black with a mint-and-teal aurora:
- A large, soft, bright light blob sits in the top right corner and fades from pale mint-white through spring green into teal.
- Each plan card carries its own aurora bloom across its top edge.

## Scale

- **Units:** every length is in reference pixels of a fixed artboard, multiplied by `--u` (fit-scaled to the viewport).
- **Glows:** the aurora shapes are inline SVG ellipses blurred with `feGaussianBlur` and sized in the same units, so they scale with the layout.

## Type and colour

- **Font:** Inter (subset, embedded).
- **Colours:** page `#0A0A0A`; cards translucent white at 2.9% (about `#101010`); text white, `#BFBFBF` for the subtitle and `#747474` for feature text.
- **Aurora palette:** pale mint `rgb(227,255,243)`, spring green `rgb(150,255,170)`, mint `rgb(20,255,185)`, teal `rgb(16,188,194)`, deep teal `rgb(12,144,149)`, and soft mint-greys for the bright cores.

## Layout

- **Header (left aligned):**
  - Headline "Smart pricing for / every stage" in large Inter, weight 400 and tight tracking.
  - Subline "Find the perfect balance of features, performance, and affordability."
- **Three equal cards in a row:**
  - Starter Plan, 19$/month.
  - Growth Plan, 29$/month (featured).
  - Enterprise Plan, 49$/month.
- **Each card:**
  - A blurred aurora bloom at the top, behind the plan name and price.
  - A "Features" divider label between two hairlines.
  - Five feature rows. Each row has a frosted round tick with a conic mint rim, a mint check `#5EEAB8` and grey text.
  - A full-width pill CTA, "Get Started".
- **Feature lists:**
  - Starter: Standard email support; Basic analytics dashboard; Limited automation actions; 1 project/workspace included; Essential tools for basic workflow management.
  - Growth: Priority customer support; Integrations with popular apps; Advanced automation workflows; Detailed analytics & performance insights; Unlimited projects and team collaboration.
  - Enterprise: Dedicated account manager; Enterprise-level security & controls; API access and custom integrations; Custom workflows and advanced rules; Unlimited team members with admin controls.
- **Buttons:** every CTA keeps the same pill shape.
  - The two outer cards have a transparent pill with a hairline border and a soft white light-edge under its base.
  - The featured card's pill is filled with a mint-to-cyan gradient, `#6EF3B4` → `#3FE6C6` → `#22D6E8`, with dark green text `#05261D`.

## Motion

- **Entrance:** the headline and subline settle in, then the cards rise one after another.
  - The blooms fade up inside each card.
  - The feature rows and CTAs follow.
- **Hover:** cards lift slightly, and the CTAs brighten.
- **Reduced motion:** no entrance.

## Tablet and phone

- **Tablet:** the same component styling, reflowed.
- **Phone:**
  - The cards stack.
  - Each card puts its name, price and CTA on the left and its features on the right; on very narrow screens they stack fully.
  - The top-right light blob stays behind the headline.

## Acceptance check (1440×960)

- A bright mint light blob sits at the top right.
- Three dark cards carry teal-mint blooms.
- Only the Growth CTA is filled, with the mint gradient.
- There are no blue or violet tones anywhere.