stunning alternating editorial rows + fix invisible gray text

LAYOUT:
- Killed boring 2x2 grid boxes
- Full-width alternating image/text rows (7:5 split)
- Image left/text right on rows 1,3 — flipped on rows 2,4
- Creates visual rhythm like an editorial magazine spread
- gap-px between rows for signature pattern
- Images at 2:1 cinematic aspect, large and atmospheric

CONTRAST FIX:
- Pain stat 'before' text: gray-200 (invisible) -> gray-400 (readable)
- 'Systems do.' heading: gray-300 -> gray-400
- Both stats now clearly visible while maintaining muted/bold contrast

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

@@ -138,7 +138,7 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* ━━ THE PLEDGE GAP — scenario-based personas ━━━━━━━━━━━━ */}
+      {/* ━━ THE PLEDGE GAP — alternating editorial rows ━━━━━━━━━ */}
       <section className="py-20 md:py-28 px-6">
         <div className="max-w-7xl mx-auto">
           {/* Eyebrow — border-l-2 accent (signature pattern 1) */}
@@ -150,52 +150,67 @@ export default function HomePage() {
           <h2 className="text-4xl md:text-5xl font-black text-gray-900 tracking-tight">
             People don&apos;t break promises.
           </h2>
-          <p className="text-3xl md:text-4xl font-black text-gray-300 tracking-tight mt-1">
+          <p className="text-3xl md:text-4xl font-black text-gray-400 tracking-tight mt-1">
             Systems do.
           </p>
           <p className="text-base text-gray-500 mt-4 max-w-lg">
             We built the missing system between &ldquo;I&apos;ll donate&rdquo; and the money arriving.
           </p>
 
-          {/* 2×2 gap-px grid */}
+          {/* Alternating image/text rows — gap-px between */}
-          <div className="grid md:grid-cols-2 gap-px bg-gray-200 mt-14">
+          <div className="flex flex-col gap-px bg-gray-200 mt-14">
-            {PERSONAS.map((p) => (
+            {PERSONAS.map((p, i) => {
-              <Link
+              const imgFirst = i % 2 === 0
-                key={p.slug}
+              return (
-                href={`/for/${p.slug}`}
+                <Link
-                className="group bg-white overflow-hidden"
+                  key={p.slug}
-              >
+                  href={`/for/${p.slug}`}
-                {/* Cinematic image strip */}
+                  className="group bg-white block"
-                <div className="aspect-[2/1] relative overflow-hidden">
+                >
-                  <Image
+                  <div className="grid md:grid-cols-12 items-stretch">
-                    src={p.image}
+                    {/* Image — 7 cols, cinematic */}
-                    alt={p.scenario}
+                    <div
-                    fill
+                      className={`md:col-span-7 ${!imgFirst ? "md:order-2" : ""} relative overflow-hidden aspect-[2/1]`}
-                    className="object-cover transition-opacity duration-300 group-hover:opacity-90"
+                    >
-                    sizes="(max-width: 768px) 100vw, 50vw"
+                      <Image
-                  />
+                        src={p.image}
-                </div>
+                        alt={p.scenario}
+                        fill
+                        className="object-cover transition-opacity duration-300 group-hover:opacity-90"
+                        sizes="(max-width: 768px) 100vw, 58vw"
+                      />
+                    </div>
 
-                {/* Text — scenario + pain stats + story */}
+                    {/* Text — 5 cols */}
-                <div className="p-6 md:p-8">
+                    <div
-                  <h3 className="text-base font-black text-gray-900 group-hover:text-promise-blue transition-colors">
+                      className={`md:col-span-5 ${!imgFirst ? "md:order-1" : ""} p-8 md:p-12 lg:p-14 flex flex-col justify-center`}
-                    {p.scenario}
+                    >
-                  </h3>
+                      <h3 className="text-lg md:text-xl font-black text-gray-900 group-hover:text-promise-blue transition-colors">
+                        {p.scenario}
+                      </h3>
 
-                  {/* Pain stats — the gap */}
+                      {/* Pain stats — the gap, visible contrast */}
-                  <div className="mt-4 space-y-0.5">
+                      <div className="mt-5 space-y-1">
-                    <p className="text-2xl md:text-3xl font-black text-gray-200 tracking-tight leading-tight">{p.stat1}</p>
+                        <p className="text-xl md:text-2xl lg:text-3xl font-black text-gray-400 tracking-tight leading-tight">
-                    <p className="text-2xl md:text-3xl font-black text-gray-900 tracking-tight leading-tight">{p.stat2}</p>
+                          {p.stat1}
+                        </p>
+                        <p className="text-xl md:text-2xl lg:text-3xl font-black text-gray-900 tracking-tight leading-tight">
+                          {p.stat2}
+                        </p>
+                      </div>
+
+                      <p className="text-sm text-gray-500 leading-relaxed mt-5">
+                        {p.copy}
+                      </p>
+
+                      <p className="text-xs font-semibold text-promise-blue mt-6 group-hover:underline">
+                        {p.cta} &rarr;
+                      </p>
+                    </div>
                   </div>
-
+                </Link>
-                  <p className="text-sm text-gray-500 leading-relaxed mt-4">{p.copy}</p>
+              )
-
+            })}
-                  <p className="text-xs font-semibold text-promise-blue mt-5 group-hover:underline transition-all">
-                    {p.cta} &rarr;
-                  </p>
-                </div>
-              </Link>
-            ))}
           </div>
         </div>
       </section>