feat: Client Portal redesign to Quiet Luxury + milestone stepper

- New MilestoneStepper primitive (horizontal per-phase progress)
- Token-migrate portal shell, phase cards, sidebar cards, kanban to dual-theme
- Soft-tint status pills (emerald/amber/muted) replacing solid badges
- embedded prop on ClientDashboard fixes double-header in multi-project tabs

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

design-reference/DESIGN-SYSTEM.md

@@ -146,3 +146,23 @@ across all future admin pages.
 | `LeadTable` | `src/components/admin/leads/LeadTable.tsx` | Luxury table restyle: `bg-card rounded-xl shadow-card`, uppercase muted headers, `hover:bg-muted/40` rows, uses `StatusBadge`. |
 | `LeadsKanbanBoard` | `src/components/admin/leads/LeadsKanbanBoard.tsx` | Kanban restyle: `bg-muted/60` columns with count pills, `bg-card` cards with `hover:border-primary/30`. Uses `@dnd-kit`, keeps all 6 lead stages. |
 | `LeadsViewToggle` | `src/components/admin/leads/LeadsViewToggle.tsx` | Wires `SearchInput` + `SegmentedToggle` together with the table/kanban views. |
+| `MilestoneStepper` | `src/components/client/MilestoneStepper.tsx` | Client-portal horizontal milestone stepper: one node per real phase, connecting line filled by `global_progress_pct`. Done = filled `bg-primary` ✓, active = `border-primary` outline, upcoming = `bg-muted`. |
+
+### Client Portal restyle notes
+
+The `/client/[token]` portal was migrated to the same "Quiet Luxury" tokens
+(applied 2026-07-10). Key conventions specific to the client-facing surface:
+
+- **Header**: `bg-card` sticky bar, three zones — `iamcavalli | Client Portal`
+  (left), brand name centered, "Area Riservata Protetta" emerald pill (right).
+- **Status pills** (phases, payments) use soft tints, not solid fills:
+  emerald-50/700 (done/saldato), amber-50/700 (in corso/da saldare),
+  `bg-muted`/`text-muted-foreground` (upcoming) — each with a `dark:` variant.
+- **Phase cards** (`PhaseCard`): `rounded-xl border-border-light bg-card
+  shadow-card`, progress bar colored per status (emerald/amber/`bg-border`).
+- Sidebar cards (`OffersSection`, `PaymentStatus`, `DocumentsSection`,
+  `NotesSection`, `TranscriptsSection`) all follow `rounded-xl border-border-light
+  bg-card shadow-card`.
+- `ClientDashboard` takes an `embedded` prop: when rendered inside the
+  multi-project tabs wrapper (`page.tsx`), it drops its own header/footer/canvas
+  so the page-level chrome isn't duplicated.