diff --git a/pledge-now-pay-later/src/app/page.tsx b/pledge-now-pay-later/src/app/page.tsx
index 800ad69..b976d8d 100644
--- a/pledge-now-pay-later/src/app/page.tsx
+++ b/pledge-now-pay-later/src/app/page.tsx
@@ -157,58 +157,60 @@ export default function HomePage() {
             We built the missing system between “I'll donate” and the money arriving.
           </p>
 
-          {/* Alternating image/text rows — gap-px between */}
-          <div className="flex flex-col gap-px bg-gray-200 mt-14">
+          {/* Stacking cards — sticky scroll effect */}
+          <div className="mt-14">
             {PERSONAS.map((p, i) => {
               const imgFirst = i % 2 === 0
               return (
-                <Link
-                  key={p.slug}
-                  href={`/for/${p.slug}`}
-                  className="group bg-white block"
-                >
-                  <div className="grid md:grid-cols-12 items-stretch">
-                    {/* Image — 7 cols, cinematic */}
-                    <div
-                      className={`md:col-span-7 ${!imgFirst ? "md:order-2" : ""} relative overflow-hidden aspect-[2/1]`}
+                <div key={p.slug} className={i < PERSONAS.length - 1 ? "pb-36" : ""}>
+                  <div
+                    className="sticky will-change-transform"
+                    style={{ top: `${72 + i * 16}px`, zIndex: 10 + i * 10 }}
+                  >
+                    <Link
+                      href={`/for/${p.slug}`}
+                      className="group block bg-white shadow-[0_2px_8px_rgba(0,0,0,0.08)] overflow-hidden"
                     >
-                      <Image
-                        src={p.image}
-                        alt={p.scenario}
-                        fill
-                        className="object-cover transition-opacity duration-300 group-hover:opacity-90"
-                        sizes="(max-width: 768px) 100vw, 58vw"
-                      />
-                    </div>
+                      <div className={`flex flex-col ${imgFirst ? "md:flex-row" : "md:flex-row-reverse"}`}>
+                        {/* Image — ~58%, fills full card height */}
+                        <div className="md:w-7/12 relative overflow-hidden min-h-[220px] md:min-h-[400px]">
+                          <Image
+                            src={p.image}
+                            alt={p.scenario}
+                            fill
+                            className="object-cover"
+                            sizes="(max-width: 768px) 100vw, 58vw"
+                          />
+                        </div>
 
-                    {/* Text — 5 cols */}
-                    <div
-                      className={`md:col-span-5 ${!imgFirst ? "md:order-1" : ""} p-8 md:p-12 lg:p-14 flex flex-col justify-center`}
-                    >
-                      <h3 className="text-lg md:text-xl font-black text-gray-900 group-hover:text-promise-blue transition-colors">
-                        {p.scenario}
-                      </h3>
+                        {/* Text — ~42% */}
+                        <div className="md:w-5/12 p-8 md:p-12 lg:p-14 flex flex-col justify-center">
+                          <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, visible contrast */}
-                      <div className="mt-5 space-y-1">
-                        <p className="text-xl md:text-2xl lg:text-3xl font-black text-gray-400 tracking-tight leading-tight">
-                          {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>
+                          {/* Pain stats */}
+                          <div className="mt-5 space-y-1">
+                            <p className="text-xl md:text-2xl lg:text-3xl font-black text-gray-400 tracking-tight leading-tight">
+                              {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>
-
-                      <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>
+                    </Link>
                   </div>
-                </Link>
+                </div>
               )
             })}
           </div>
diff --git a/stack1.png b/stack1.png
new file mode 100644
index 0000000..c04c768
Binary files /dev/null and b/stack1.png differ
diff --git a/stack2.png b/stack2.png
new file mode 100644
index 0000000..adaa7d8
Binary files /dev/null and b/stack2.png differ