SaaS Pricing Page

# SaaS Pricing Page

## Layout Overview
Full-width page, centered content (max-w-6xl)
Sections: Hero → Billing Toggle → Pricing Cards → Feature Table → FAQ

## Billing Toggle
Horizontal pill toggle: "Monthly" / "Annual"
Active side: white pill with shadow, animates sliding left/right (300ms)
"Save 20%" badge: absolute positioned above Annual, brand accent color, rounded-full

## Pricing Cards — 3-Column Grid

### Card Base Style
white background, 1px border #E5E7EB, rounded-2xl, padding 32px

### Recommended/Pro Card (Middle)
- Scale: scale(1.04) — slightly larger
- Background: brand primary (dark or gradient)
- Text: white
- Border: brand color with glow: box-shadow 0 0 40px rgba(brand, 0.3)
- "Most Popular" badge: absolute top-4 right-4, pill style

### Card Content
- Tier name: text-sm uppercase tracking-widest, muted color
- Price: text-5xl font-bold + "/mo" text-xl muted
- Description: text-sm text-muted, margin-bottom 24px
- Feature list: checkmark icon (brand color) + feature text (text-sm)
  - Checkmark: 16px circle with check inside
  - Unavailable features: X icon, opacity-40
- CTA Button: full-width, rounded-full, height 48px

## Feature Comparison Table
Sticky header row with tier names
Left column: feature category headers (sticky, background white)
Cells: ✓ (brand color), — (muted), or text value
Zebra striping: alternating very-light gray rows

## FAQ Accordion
Question: font-medium text-foreground + chevron icon (rotates 180° on open)
Answer: text-sm text-muted, max-h-0 → auto with 300ms transition
Separator: 1px border between items