add brand/ assets to repo + BRAND.md as single source of truth

BRAND.md: Complete brand guide with code snippets, color tokens, typography scale,
logo usage rules, DO/DON'T checklist, photography direction, voice & tone.
Every section references its visual asset in brand/.

brand/ folder (52 assets):
- photography/ (20) — landing page photos
- logo/ (6) — lockup, reversed, blue, marks, favicon
- color-palette/ (3) — primary, tints, psychology
- typography/ (3) — specimen, scale, numbers
- moodboard/ (3) — trust, community, editorial
- brand-guide/ (7) — cover through UI patterns
- social-templates/ (4) — OG, Instagram, Story, LinkedIn
- icons/ (6) — pledge, whatsapp, gift-aid, zakat, dashboard, schedule

Also fixed: Nav component still had backdrop-blur-lg (last violation)

pledge-now-pay-later/BRAND.md

@@ -0,0 +1,333 @@
+# Pledge Now, Pay Later — Brand Guide
+
+> **This is the single source of truth.** Every UI change, every new page, every generated asset must follow this document. When in doubt, refer to the visual assets in `brand/`.
+
+---
+
+## Brand Assets Location
+
+All brand assets live in the `brand/` directory at the project root:
+
+```
+brand/
+├── photography/          20 landing page photos (Gemini 3 Pro)
+├── logo/                 6 logo variations
+├── color-palette/        3 palette reference cards
+├── typography/           3 type specimen sheets
+├── moodboard/            3 visual direction boards
+├── brand-guide/          7 brand guide pages
+├── social-templates/     4 social media templates
+└── icons/                6 line icons in brand colors
+```
+
+Production images served from `public/images/landing/` (copied from `brand/photography/`).
+
+### Asset Generation Rules
+- **Photography**: Generate with `gemini-3-pro-image-preview` (Nano Banana Pro). Documentary candid style. Save to `brand/photography/` AND `public/images/landing/`.
+- **Icons**: Line-only, 2px stroke, single brand color, white background. Save to `brand/icons/`.
+- **Social templates**: Use brand colors + Inter typography only. Save to `brand/social-templates/`.
+- **Any new visual asset**: Save to the appropriate `brand/` subfolder first, then copy to `public/` if needed for the website.
+
+---
+
+## Core Identity
+
+**Name:** Pledge Now, Pay Later
+**Archetype:** The Steward — quiet authority, precision with warmth, trusted with money
+**Insight:** People don't break promises. Systems do.
+**Promise:** Every pledge tracked. Every donor reminded. Every penny accounted for.
+
+### What We Are
+The missing infrastructure between "I'll donate" and the money arriving.
+
+### What We Are Not
+- Not a payment processor
+- Not a CRM
+- Not a fundraising platform
+- Not a charity website builder
+
+---
+
+## Color System
+
+Every color has a psychological job. No decorative color usage.
+
+| Token | Hex | Name | Psychological Job | Use For |
+|-------|-----|------|-------------------|---------|
+| `midnight` | `#111827` | Midnight | Authority | Primary text, dark sections, logo, default buttons |
+| `promise-blue` | `#1E40AF` | Promise Blue | Action | Links, CTAs, active states, interactive elements |
+| `generosity-gold` | `#F59E0B` | Generosity Gold | Warmth | Pending states, highlights, volunteer accent |
+| `fulfilled-green` | `#16A34A` | Fulfilled Green | Completion | Paid badges, success states, confirmations |
+| `alert-red` | `#DC2626` | Alert Red | Urgency | Overdue, errors, needs-attention (never decorative) |
+| `paper` | `#F9FAFB` | Paper | Calm | Page backgrounds, alternating rows |
+
+### Legacy Aliases (still in tailwind config)
+`trust-blue` = `promise-blue`, `warm-amber` = `generosity-gold`, `success-green` = `fulfilled-green`, `danger-red` = `alert-red`
+
+### 60-30-10 Rule
+- **60%** Midnight + Paper (the base — dark text on light, or white text on dark)
+- **30%** Promise Blue (the action layer — everything interactive)
+- **10%** Gold + Green + Red (status indicators only)
+
+### Reference
+- `brand/color-palette/01-primary-palette.jpg` — 6 color swatches
+- `brand/color-palette/02-tints-and-shades.jpg` — extended scales
+- `brand/color-palette/03-color-psychology.jpg` — psychological roles
+
+---
+
+## Typography
+
+**Font:** Inter (Google Fonts)
+**Import:** `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap')`
+
+| Level | Size | Weight | Tracking | Tailwind |
+|-------|------|--------|----------|----------|
+| Display | 72-96px | Black (900) | -0.025em | `text-7xl md:text-9xl font-black tracking-tighter` |
+| H1 | 48-60px | Black (900) | -0.02em | `text-4xl md:text-5xl font-black tracking-tight` |
+| H2 | 30-36px | ExtraBold (800) | -0.015em | `text-3xl font-black tracking-tight` |
+| H3 | 18-24px | Bold (700) | normal | `text-lg font-bold` or `text-base font-bold` |
+| Body | 14-16px | Regular (400) | normal | `text-sm` or `text-base` |
+| Caption | 11-12px | Medium (500) | 0.05em | `text-xs font-medium tracking-wide` |
+
+### Numbered Steps Pattern
+Use `01`, `02`, `03` in Display/large size as visual anchors instead of icons:
+```jsx
+<p className="text-4xl font-black text-gray-200">01</p>
+```
+
+### Reference
+- `brand/typography/01-typeface-specimen.jpg`
+- `brand/typography/02-heading-scale.jpg`
+- `brand/typography/03-numbers-in-brand.jpg`
+
+---
+
+## Logo
+
+**Mark:** Solid square, zero border-radius, `bg-midnight`, white "P" in Inter Black.
+
+```jsx
+{/* Standard logo mark */}
+<div className="h-7 w-7 bg-midnight flex items-center justify-center">
+  <span className="text-white text-xs font-black">P</span>
+</div>
+
+{/* With wordmark */}
+<div className="flex items-center gap-2.5">
+  <div className="h-7 w-7 bg-midnight flex items-center justify-center">
+    <span className="text-white text-xs font-black">P</span>
+  </div>
+  <span className="font-black text-sm tracking-tight">Pledge Now, Pay Later</span>
+</div>
+```
+
+### Rules
+- Never round the mark corners
+- Never add shadows or gradients to the mark
+- Never use emoji (🤲) as a logo substitute
+- Minimum clear space = 1.5× height of mark on all sides
+- Three versions: dark on white, white on dark, blue mark on white
+
+### Reference
+- `brand/logo/01-lockup-dark-on-white.jpg` — primary
+- `brand/logo/02-lockup-white-on-dark.jpg` — reversed
+- `brand/logo/03-lockup-blue-mark.jpg` — blue accent
+- `brand/logo/04-mark-dark.jpg` — mark only
+- `brand/logo/05-mark-blue.jpg` — blue mark only
+- `brand/logo/06-favicon.jpg` — edge-to-edge favicon
+
+---
+
+## Design Rules
+
+### DO
+```
+✓ Sharp edges everywhere (rounded-lg max on interactive elements)
+✓ Typography as the hero — headlines readable without images
+✓ Numbered steps (01, 02, 03) instead of icons
+✓ Dark sections (bg-gray-950) for key stats and CTAs (max 2 per page)
+✓ border-l-2 accents for feature lists
+✓ gap-px grids for comparisons
+✓ Solid flat colors only
+✓ Generous whitespace
+```
+
+### DO NOT
+```
+✗ rounded-2xl, rounded-3xl, rounded-full (except avatars/progress bars)
+✗ bg-gradient-to-* anything
+✗ shadow-lg shadow-{color}/25 (colored shadows)
+✗ backdrop-blur, glass effects
+✗ Emoji as visual anchors in headings
+✗ group-hover:scale-105 or any scale animations
+✗ animate-pulse-ring, animate-bounce-gentle (decorative animations)
+✗ More than 2 dark sections per page
+✗ Color on heading text — color goes on borders, badges, backgrounds
+✗ "AI-powered" as a feature name
+```
+
+### Three Signature UI Patterns
+
+**1. Left-Border Accent**
+```jsx
+<div className="border-l-2 border-midnight pl-4">
+  <p className="text-sm font-bold text-midnight">Feature name</p>
+  <p className="text-xs text-gray-500">Description text</p>
+</div>
+```
+
+**2. Gap-Px Grid**
+```jsx
+<div className="grid md:grid-cols-3 gap-px bg-gray-200">
+  <div className="bg-white p-6">Cell 1</div>
+  <div className="bg-white p-6">Cell 2</div>
+  <div className="bg-white p-6">Cell 3</div>
+</div>
+```
+
+**3. Dark Inversion**
+```jsx
+<section className="bg-gray-950 py-20 px-6">
+  <h2 className="text-white font-black">Key stat or CTA</h2>
+</section>
+```
+
+### Reference
+- `brand/brand-guide/07-ui-patterns.jpg` — all three patterns visualized
+
+---
+
+## Button Variants
+
+```jsx
+<Button variant="default">    {/* bg-midnight, white text */}
+<Button variant="blue">       {/* bg-promise-blue, white text */}
+<Button variant="success">    {/* bg-fulfilled-green, white text */}
+<Button variant="amber">      {/* bg-generosity-gold, white text */}
+<Button variant="destructive"> {/* bg-alert-red, white text */}
+<Button variant="outline">    {/* border, white bg */}
+<Button variant="ghost">      {/* transparent, hover gray */}
+<Button variant="link">       {/* promise-blue underline */}
+```
+
+No button has colored shadows. No button has rounded corners beyond the base `--radius` (0.5rem).
+
+---
+
+## Photography Direction
+
+**Style:** Documentary candid — never staged, never stock.
+
+**Technical:**
+- Shallow depth of field (f/1.4–f/2.8)
+- Available/natural light (warm tungsten indoors, overcast outdoors)
+- Candid angles (never looking at camera)
+- British-diverse subjects (South Asian, Black British, Arab, white British)
+- Real settings (mosques, community centres, galas, homes, London streets)
+
+**Never show:**
+- Stock handshakes
+- People pointing at screens and smiling
+- Overhead "team meeting" shots
+- Poverty imagery
+- Everyone looking at camera
+
+**Generation prompt template:**
+```
+[Scene description]. [Subject description — ethnicity, age, clothing].
+[Setting — location, lighting]. [Camera — lens, f-stop, style].
+Shot on [camera], [focal length], f/[aperture], available light.
+[Mood]. [Aspect] aspect ratio.
+```
+
+### Reference
+- `brand/photography/` — 20 generated photos
+- `brand/moodboard/01-trust-and-precision.jpg`
+- `brand/moodboard/02-community-and-giving.jpg`
+- `brand/brand-guide/06-photography-direction.jpg`
+
+---
+
+## Voice & Tone
+
+### Voice (constant)
+- **Direct.** Short sentences. No filler.
+- **Specific.** Numbers, not vague claims. "60-second pledge flow" not "quick and easy."
+- **Empathetic.** We understand the awkwardness. Never shame.
+- **Confident.** "We fix that." Not "We can help with that."
+
+### Words We Use
+| Use | Don't Use |
+|-----|-----------|
+| Pledge | Donation (for the promise stage) |
+| Campaign | Event (broader than physical events) |
+| Pledge link | QR code (QR is one delivery method) |
+| Reminder | Chaser, follow-up |
+| Conversion | Collection rate |
+
+### Words We Never Use
+- "Revolutionary" / "game-changing" / "disruptive"
+- "Powered by AI"
+- "PNPL" in user-facing copy (internal + bank refs only)
+- "Simple" / "easy" (show, don't tell)
+
+---
+
+## Social Templates
+
+- `brand/social-templates/01-og-image.jpg` — Open Graph (link previews)
+- `brand/social-templates/02-instagram-square.jpg` — Instagram post
+- `brand/social-templates/03-story-template.jpg` — WhatsApp/IG Story
+- `brand/social-templates/04-linkedin-banner.jpg` — LinkedIn company page
+
+---
+
+## Icons
+
+Line-only icons, 2px stroke, single brand color per icon:
+
+| Icon | File | Color |
+|------|------|-------|
+| Pledge/Promise | `brand/icons/01-icon-pledge.jpg` | Midnight |
+| WhatsApp/Send | `brand/icons/02-icon-whatsapp.jpg` | Fulfilled Green |
+| Gift Aid | `brand/icons/03-icon-gift-aid.jpg` | Promise Blue |
+| Zakat | `brand/icons/04-icon-zakat.jpg` | Generosity Gold |
+| Dashboard | `brand/icons/05-icon-dashboard.jpg` | Midnight |
+| Schedule | `brand/icons/06-icon-schedule.jpg` | Midnight |
+
+---
+
+## CSS Variables
+
+```css
+:root {
+  --background: 0 0% 100%;           /* white */
+  --foreground: 222 47% 11%;         /* midnight */
+  --primary: 224 76% 40%;            /* promise-blue */
+  --primary-foreground: 0 0% 100%;   /* white */
+  --destructive: 0 72% 51%;          /* alert-red */
+  --border: 220 13% 91%;             /* gray-200 */
+  --radius: 0.5rem;                  /* max corner radius */
+}
+```
+
+---
+
+## Allowed Animations
+
+Only these — nothing decorative:
+
+| Class | Use |
+|-------|-----|
+| `animate-fade-up` | Page sections appearing on load |
+| `animate-fade-in` | Elements becoming visible |
+| `animate-slide-down` | Dropdowns, notifications |
+| `animate-shimmer` | Loading skeleton states |
+| `animate-counter-roll` | Number counters |
+| `stagger-children` | Sequential card reveals |
+
+---
+
+*Brand Guide v1.0 — March 2026*
+*When adding a new page or component, re-read this file first.*

pledge-now-pay-later/src/app/for/_components/index.tsx

@@ -4,7 +4,7 @@ import Image from "next/image"
 /* ── Nav ── */
 export function Nav() {
   return (
-    <header className="sticky top-0 z-40 border-b border-gray-100 bg-white/90 backdrop-blur-lg">
+    <header className="sticky top-0 z-40 border-b border-gray-200 bg-white">
       <div className="max-w-5xl mx-auto flex h-14 items-center justify-between px-6">
         <Link href="/" className="flex items-center gap-2.5">
           <div className="h-7 w-7 bg-gray-900 flex items-center justify-center">