Bolt prompt for a pricing section

In the Bolt project that already contains the landing page for a project management SaaS, add one new section — pricing — between the social-proof band and the footer. Keep it a section inside the page flow; do not create a /pricing route.

Files: put the markup in src/components/PricingSection (matching whatever framework the project scaffolded) and the tier data in src/data/pricing.ts as an array of three objects — name, blurb, monthly, yearly, features, buttonLabel — so copy edits never touch markup. Import the section into the existing page file.

Inside the section, top to bottom:
1. Heading pair: an h2 naming the value a project management SaaS charges for, plus a subhead that tells engineering managers at startups which tier to pick ("Most teams start on ...").
2. Billing toggle bound to one piece of state; yearly shows the discounted number with the monthly-equivalent struck through.
3. Three tiers rendered from the data file. Mark the middle object recommended: true and render that card with a badge and a stronger outline. Its button is the only filled one and reads "start a free trial"; the outer tiers get outline buttons with labels from the data file.
4. Feature bullets: the first tier lists its complete set; each higher tier opens with "Everything in the previous plan, plus —" followed by at most four new items, each phrased as a capability, not a limit.
5. Under the grid, one reassurance line (trial length or cancellation terms) in muted text.

Visual direction:
Minimal dark style. Near-black canvas (#0A0A0B) with one elevated surface tone (#141416) for cards — never more than two surface steps. Hairline borders (1px, white at 8% opacity) instead of shadows; if a shadow is unavoidable use 0 1px 2px rgba(0,0,0,0.4) and nothing softer. Text in exactly three steps: white at 92% for headings, 60% for body, 40% for captions. Generous negative space — section padding at least 120px on desktop, 64px on mobile. The accent color appears only on interactive elements and one hero highlight, nowhere else.

Palette: a strict neutral ramp (white, #F5F5F5, #E5E5E5, #737373, #171717) carries the entire interface; pick one accent and use it only for primary CTAs, active states, and a single hero highlight. If the accent appears more than five times per viewport it stops being an accent. Keep semantic colors (success, error) desaturated so the accent stays in charge.
Typography: one geometric sans (a Futura/Poppins-class face) at three weights maximum (400/500/700). Scale: 64-88px hero, 32px section heads, 18px lede, 16px body, 13px caps labels with 0.08em tracking. Tight headline leading (1.05-1.1), relaxed body (1.6). Let the geometry carry the personality — no italics; weight and size do all hierarchy.
Motion: none. Zero scroll animations, zero entrance effects — the page is fully composed the instant it paints. Spend the motion budget on input feedback instead: 120-150ms ease-out color and transform transitions on hover and press states only. Hold this constraint absolutely; it is a statement, not an omission.

Spacing: section vertical padding about 6rem, 1.5rem card gap, and a fixed price-block height so bullets align across cards. Mobile: single column, recommended tier first, toggle centered above.

Watch the instant preview while iterating and confirm: prices flip with the toggle; one filled button total; bullets align across the three cards at desktop width; the reassurance line renders under the grid; the footer below is unaffected.