Update CLAUDE.md: add landing.css, push-when-ready policy, new design tokens

CLAUDE.md

@@ -1,15 +1,14 @@
 # Claude Code Guidelines
 
-## Git Commit Messages
+## Git
 
-When creating git commits, it is inappropriate to claim credit or co-authorship for work that was requested by the user. The user is the author of their own code changes.
-
-Do not add attribution lines like "Generated with Claude Code" or "Co-Authored-By: Claude" to commit messages unless explicitly requested by the user.
+- No attribution lines ("Generated with Claude Code", "Co-Authored-By: Claude") in commits unless explicitly requested.
+- Keep commit messages concise and descriptive of the actual changes.
+- When ready, commit and push. Don't ask — just do it.
 
 ## General Guidelines
 
 - Focus on implementing the requested changes accurately
-- Keep commit messages concise and descriptive of the actual changes made
 - Respect that the user owns their codebase and all modifications to it
 
 ## Design System
@@ -20,6 +19,7 @@ Mobile-first static site. CSS Grid. Helvetica. Media queries at 800px (tablet/de
 
 - `common.css` — shared app styles (layout, buttons, nav, wells, footer, corner ribbon)
 - `mps.css` — message ribbon, alerts
+- `landing.css` — landing page styles (hero, sections, pricing, cards, CTAs)
 - `styleguide.html` — live component reference
 
 ### Color Palette
@@ -35,13 +35,15 @@ Mobile-first static site. CSS Grid. Helvetica. Media queries at 800px (tablet/de
 | Danger Red | `#CC6958` | Delete button |
 | Check Green | `#678731` | Checkmark list items |
 | Cross Red | `#c77765` | Cross list items |
-| Text Dark | `#0b0b0b` | Headings (bold-dark, big-bold-dark, huge-bold-dark) |
+| Text Dark | `#0b0b0b` | Headings |
 | Text Body | `#515151` | Body text |
+| Text Desc | `#666` | Card descriptions, secondary body text |
 | Text Muted | `#777` | Footer links, taglines |
-| Text Faint | `#999` | Footer bottom |
-| BG Light | `#F9F9FA` | Page background, nav, wells, footer |
-| White | `#FFFFFF` | Content sections, well-white |
+| Text Faint | `#999` | Footer bottom, pricing periods, muted captions |
+| BG Light | `#F9F9FA` | Alternating sections, nav, wells, footer |
+| White | `#FFFFFF` | Content sections, cards |
 | Border | `#e0e0e0` | Dividers, footer borders |
+| Border Light | `#eee` | Card borders on landing |
 
 ### Button Hierarchy
 
@@ -54,16 +56,33 @@ Green = primary CTA (action the user should take). Blue = secondary (information
 - `.cart-delete-button.mps-button` — danger red
 - `.shop-switch-button.mps-button` — outline (border only)
 
-### Typography Classes
+Landing page CTAs add `.landing-cta` for pill shape (50px radius), shadow, hover lift.
 
+### Typography
+
+**App pages** (common.css):
 - `.huge-bold-dark` — 2.7em, weight 550 (page titles)
 - `.big-bold-dark` — 1.4em, weight 550 (section headings)
 - `.bold-dark` — weight 550 (inline emphasis)
 
+**Landing page** (landing.css):
+- `.landing-hero-title` — 3.2em mobile, 4.5em desktop, weight 700
+- `.landing-section-title` — 2em, weight 700
+- `.landing-body` — 1.05em, line-height 1.7
+
 ### Components
 
 - **Message ribbon** — `.message-ribbon` gradient banner, hidden on mobile
 - **Wells** — `.well` (gray bg) and `.well.well-white` (white bg), rounded corners
 - **Alerts** — `.alert.alert-success`, `.alert.alert-info`, `.alert.alert-warning`, `.alert.alert-danger`
 - **Footer** — `.mps-footer` with grid (`.mps-footer-grid`), groups, CTAs, bottom bar
-- **Layout** — `.one-column` (800px max), `.one-column-thin` (400px max)
+- **Layout** — `.one-column` (800px max), `.one-column-thin` (400px max)
+
+### Landing Page Patterns
+
+- Alternating `.landing-section` / `.landing-section-alt` for visual rhythm (no HR dividers)
+- Cards: 12px radius, subtle box-shadow, hover lift
+- Pricing: `.landing-pricing-card` with `.landing-pricing-featured` for highlighted plan + `.landing-pricing-badge`
+- Protection lists: `.landing-list-bad` (tinted red) / `.landing-list-good` (tinted green)
+- Step numbers: `.landing-step-number` green circles
+- Final CTA: `.landing-final-cta` with subtle gradient background