persona section overhaul — editorial gap-px grid + fresh photography

SECTION REDESIGN:
- Killed standalone dashboard image (fake AI laptop, added nothing)
- New gap-px grid (signature pattern 2) with border-l-2 accents (pattern 1)
- Numbered anchors (01-04) as visual rhythm per brand guide
- Wider container: max-w-7xl matches hero width

PERSONA CHANGES:
- Renamed 'Organisation' -> 'Programme Manager'
- Reorder: Charity Manager, Programme Manager, Personal Fundraiser, Volunteer
- Updated /for/organisations page content to match

PHOTOGRAPHY (4 new images via gemini-3-pro-image-preview):
- persona-charity-manager.jpg — hijabi woman at mosque office desk
- persona-programme-manager.jpg — man at desk with campaign calendar
- persona-fundraiser.jpg — woman on London park bench with phone
- persona-volunteer.jpg — young man handing card at charity gala
- All optimized: 2.7MB -> 342KB (87% reduction via sharp)
- Consistent documentary candid style, 3:2 landscape, warm tones

FOOTER:
- 'Organisations' -> 'Programme Managers' in nav links

pledge-now-pay-later/src/app/page.tsx

@@ -17,28 +17,28 @@ const PERSONAS = [
     title: "Charity Manager",
     oneLiner: "You raise pledges at events. We make sure the money actually arrives.",
     tags: ["Dashboard", "WhatsApp reminders", "Gift Aid", "Zakat", "HMRC export"],
-    image: "/images/landing/08-charities-hero.jpg",
+    image: "/images/landing/persona-charity-manager.jpg",
+  },
+  {
+    slug: "organisations",
+    title: "Programme Manager",
+    oneLiner: "You coordinate campaigns across teams. We give you the full pipeline view.",
+    tags: ["Multi-campaign", "Team oversight", "Pipeline view", "Instalments", "Reporting"],
+    image: "/images/landing/persona-programme-manager.jpg",
   },
   {
     slug: "fundraisers",
     title: "Personal Fundraiser",
     oneLiner: "You share a LaunchGood or JustGiving link. We track who actually donates.",
     tags: ["LaunchGood", "Enthuse", "JustGiving", "Social sharing", "Conversion tracking"],
-    image: "/images/landing/03-main-fundraiser-card.jpg",
+    image: "/images/landing/persona-fundraiser.jpg",
   },
   {
     slug: "volunteers",
     title: "Volunteer",
     oneLiner: "You help collect pledges at events. We show you exactly how much you raised.",
     tags: ["Personal link", "Live stats", "Leaderboard", "WhatsApp share"],
-    image: "/images/landing/04-main-volunteer-card.jpg",
-  },
-  {
-    slug: "organisations",
-    title: "Organisation",
-    oneLiner: "You coordinate pledges across multiple charities or departments. We track every commitment.",
-    tags: ["Multi-party", "Fund allocation", "Pipeline view", "Instalments"],
-    image: "/images/landing/05-main-org-card.jpg",
+    image: "/images/landing/persona-volunteer.jpg",
   },
 ]
 
@@ -130,40 +130,64 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* ━━ PRODUCT IMAGE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
-      <section className="pt-16 pb-8 md:pt-20 md:pb-10 px-6">
-        <div className="max-w-5xl mx-auto">
-          <LandingImage src="/images/landing/01-main-dashboard-hero.jpg" alt="Live pledge pipeline dashboard showing donation trends and collection status" aspect="video" />
-        </div>
-      </section>
-
-      {/* ━━ 4 PERSONAS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
-      <section className="py-24 px-6">
-        <div className="max-w-5xl mx-auto space-y-14">
-          <div className="max-w-2xl">
-            <h2 className="text-4xl font-black text-gray-900 tracking-tight">Built for how you actually work</h2>
-            <p className="text-lg text-gray-500 mt-3">Four roles. One platform. Every pledge tracked.</p>
+      {/* ━━ WHO IT'S FOR — gap-px grid (signature pattern 2) ━━━━ */}
+      <section className="py-20 md:py-28 px-6">
+        <div className="max-w-7xl mx-auto">
+          {/* Eyebrow — border-l-2 accent (signature pattern 1) */}
+          <div className="border-l-2 border-promise-blue pl-3 mb-6">
+            <p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
+              Who it&apos;s for
+            </p>
           </div>
+          <h2 className="text-4xl md:text-5xl font-black text-gray-900 tracking-tight">
+            Built for how you actually work
+          </h2>
+          <p className="text-lg text-gray-500 mt-3 max-w-xl">
+            Four roles. One platform. Every pledge tracked.
+          </p>
 
-          <div className="grid md:grid-cols-2 gap-6">
-            {PERSONAS.map((p) => (
+          {/* 2×2 gap-px grid */}
+          <div className="grid md:grid-cols-2 gap-px bg-gray-200 mt-14">
+            {PERSONAS.map((p, i) => (
               <Link
                 key={p.slug}
                 href={`/for/${p.slug}`}
-                className="group block bg-white border border-gray-200 hover:border-gray-900 transition-colors"
+                className="group bg-white overflow-hidden"
               >
-                <LandingImage src={p.image} alt={p.title} aspect="video" />
-                <div className="p-6 space-y-3">
-                  <h3 className="text-lg font-black text-gray-900 group-hover:text-promise-blue transition-colors">{p.title}</h3>
-                  <p className="text-sm text-gray-500 leading-relaxed">{p.oneLiner}</p>
-                  <div className="flex flex-wrap gap-2">
-                    {p.tags.map((t) => (
-                      <span key={t} className="text-[11px] font-medium text-gray-400 bg-gray-50 px-2 py-0.5">{t}</span>
-                    ))}
+                {/* Image */}
+                <div className="aspect-[3/2] relative overflow-hidden">
+                  <Image
+                    src={p.image}
+                    alt={p.title}
+                    fill
+                    className="object-cover transition-opacity duration-300 group-hover:opacity-90"
+                    sizes="(max-width: 768px) 100vw, 50vw"
+                  />
+                </div>
+
+                {/* Text — numbered + border-l accent */}
+                <div className="p-6 md:p-8">
+                  <div className="flex items-start gap-5">
+                    <span className="text-4xl font-black text-gray-100 leading-none select-none shrink-0">
+                      {String(i + 1).padStart(2, "0")}
+                    </span>
+                    <div className="flex-1 min-w-0 border-l-2 border-gray-900 pl-4">
+                      <h3 className="text-lg font-black text-gray-900 group-hover:text-promise-blue transition-colors">
+                        {p.title}
+                      </h3>
+                      <p className="text-sm text-gray-500 mt-1.5 leading-relaxed">{p.oneLiner}</p>
+                      <div className="flex flex-wrap gap-1.5 mt-3">
+                        {p.tags.map((t) => (
+                          <span key={t} className="text-[10px] font-medium text-gray-400 bg-gray-50 px-2 py-0.5">
+                            {t}
+                          </span>
+                        ))}
+                      </div>
+                      <p className="text-xs font-semibold text-promise-blue mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
+                        Learn more &rarr;
+                      </p>
+                    </div>
                   </div>
-                  <p className="text-sm font-semibold text-promise-blue opacity-0 group-hover:opacity-100 transition-opacity pt-1">
-                    Learn more →
-                  </p>
                 </div>
               </Link>
             ))}