brand identity overhaul: match BRAND-IDENTITY.md across all pages

Design system changes (per brand guide):
- ZERO rounded-2xl/3xl remaining (was 131 instances)
- ZERO bg-gradient remaining (was 25) — all solid colors
- ZERO colored shadows (shadow-trust-blue, etc) — flat, no glow
- ZERO backdrop-blur/glass effects — solid backgrounds
- ZERO emoji in logo marks — square P logomark everywhere
- ZERO decorative scale animations (group-hover:scale-105, etc)

Tailwind config:
- Added brand color names: midnight, promise-blue, generosity-gold, fulfilled-green, alert-red, paper
- Kept legacy aliases (trust-blue, etc) for backwards compat
- --radius: 0.75rem → 0.5rem (tighter corners)

CSS:
- Removed glass, glass-dark, card-hover, pulse-ring, bounce-gentle, confetti-fall, scale-in animations
- Kept only purposeful animations: fadeUp, fadeIn, slideDown, shimmer, counter-roll
- --primary tuned to match Promise Blue exactly

Components:
- Button: removed all colored shadows, added 'blue' variant, removed rounded from sizes
- All UI components: rounded-xl/2xl → rounded-lg

Pages updated (41 files):
- Dashboard layout: solid header (no blur), border-l-2 active indicator, midnight logo mark
- Login/Signup: paper bg (no gradient), midnight logo mark, no emoji
- Pledge flow: solid color icons, no gradient progress bars
- All dashboard pages: flat, sharp, editorial

pledge-now-pay-later/src/app/p/[token]/steps/payment-step.tsx

@@ -22,7 +22,7 @@ export function PaymentStep({ onSelect, amount }: Props) {
       detail: "We'll give you the bank details. Transfer in your own time.",
       fee: "Free",
       feeClass: "text-success-green font-bold",
-      iconBg: "from-emerald-500 to-green-600",
+      iconBg: "bg-fulfilled-green",
       highlight: true,
       benefits: ["Zero fees", "Most charities prefer this"],
     },
@@ -36,7 +36,7 @@ export function PaymentStep({ onSelect, amount }: Props) {
       detail: "GoCardless collects it for you. Protected by the DD Guarantee.",
       fee: "1% + 20p",
       feeClass: "text-muted-foreground",
-      iconBg: "from-trust-blue to-blue-600",
+      iconBg: "bg-promise-blue",
       highlight: false,
       benefits: ["No action needed", "DD Guarantee"],
     },
@@ -50,7 +50,7 @@ export function PaymentStep({ onSelect, amount }: Props) {
       detail: "Powered by Stripe. Receipt emailed instantly.",
       fee: "1.4% + 20p",
       feeClass: "text-muted-foreground",
-      iconBg: "from-purple-500 to-violet-600",
+      iconBg: "bg-midnight",
       highlight: false,
       benefits: ["Instant confirmation", "All major cards"],
     },
@@ -74,15 +74,15 @@ export function PaymentStep({ onSelect, amount }: Props) {
             key={opt.id}
             onClick={() => onSelect(opt.id)}
             className={`
-              w-full text-left rounded-2xl border-2 bg-white p-5 transition-all duration-200 group card-hover
+              w-full text-left rounded-lg border-2 bg-white p-5 transition-all duration-200 group
               ${opt.highlight
-                ? "border-success-green/40 shadow-sm shadow-success-green/10 hover:border-success-green hover:shadow-lg hover:shadow-success-green/15"
-                : "border-gray-200 hover:border-trust-blue/40 hover:shadow-lg hover:shadow-trust-blue/10"
+                ? "border-success-green/40 hover:border-success-green hover:border-fulfilled-green"
+                : "border-gray-200 hover:border-trust-blue/40 hover:border-promise-blue"
               }
             `}
           >
             <div className="flex items-start gap-4">
-              <div className={`rounded-xl bg-gradient-to-br ${opt.iconBg} p-3 shadow-lg shadow-trust-blue/10 group-hover:scale-105 transition-transform`}>
+              <div className={`rounded-lg ${opt.iconBg} p-3 transition-transform`}>
                 <opt.icon className="h-5 w-5 text-white" />
               </div>
               <div className="flex-1 min-w-0">