v0 prompt for a pricing section

Add a pricing section to an existing landing page for a project management SaaS, aimed at engineering managers at startups. Build it in v0 as one self-contained React component (PricingSection) using Tailwind and shadcn/ui — Card for tiers, Switch for the billing toggle, Button for tier actions — so it can be pasted between the features section and the FAQ without touching anything else.

Section anatomy, top to bottom:
1. Eyebrow label ("Pricing") plus an h2 that names the outcome a project management SaaS charges for, not the word "plans".
2. Monthly/annual Switch with an "annual saves ~20%" hint on the annual side.
3. Three tier Cards in a grid: entry, recommended, top. The middle card is the recommended tier — lift it with a border-plus-badge treatment ("Most popular"), never with a background hue that fights the page.
4. Each card: tier name, price with billing unit, a one-sentence who-it's-for line written for a segment of engineering managers at startups, 5–7 feature bullets, full-width Button.
5. Feature strategy: the entry tier lists everything included; recommended and top open with "Everything in [previous tier], plus" and list only deltas — max 4 each.

The recommended tier's Button reads "start a free trial" and is the only solid/primary button on the section; the outer two use outline variants with their own verbs ("Start free", "Talk to sales").

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 and responsive:
- Section padding around py-24, grid gap-6; inside a card, separate the price block and bullet list with a consistent space-y-4.
- Below md the grid stacks to one column with the recommended card first; the Switch stays above the cards, not per card.

After building, check that: exactly one primary button exists; the toggle updates all three prices without layout shift; the recommended card renders first on mobile; "Everything in ..., plus" appears on two cards; the heading is an h2 so it slots under the page's existing h1.