Pricing Page Skill

Produce a single-screen pricing page that respects the active DESIGN.md.

Workflow

1. Read the active DESIGN.md (injected above). Use only its colors, type tokens, and component patterns.
2. Classify the product from the brief and pick a tier shape:
   • 3-tier (most common): Free / Pro / Team or Starter / Growth / Enterprise.
   • 4-tier when the brief says "scale" or "enterprise plus".
   • 2-tier when it says "individual / business" or "personal / pro".
3. Sections, in order:
   1. Hero — page title (e.g. "Pricing"), one-line subhead, optional monthly/annual toggle.
   2. Plan cards — one card per tier. Each card: tier name, price (use the display font + larger scale for the number), 1-line positioning, 4–6 bullet features, primary CTA. Mark the recommended tier with the DS accent border or a small badge.
   3. Comparison table — feature rows × tier columns, ✓ / — / value cells. Group features into 2–3 logical sections (Core, Collaboration, Support, Security…). Sticky header.
   4. FAQ — 4–6 collapsible Q&A items. Use <details><summary> for the collapse — no JS.
   5. **Footer CT…