sticky stacking cards on scroll + kill border white space

STACKING EFFECT:
- Cards use position: sticky with increasing top offset (72-120px)
- z-index layering (10-40) so later cards stack on top
- pb-36 between cards for scroll breathing room
- will-change-transform for smooth compositing

WHITE SPACE FIX:
- Removed border border-gray-200 (was creating visible white gap)
- Replaced with shadow-[0_2px_8px_rgba(0,0,0,0.08)] for depth
- Switched from CSS Grid to flexbox (flex-row/flex-row-reverse)
- Image fills full card height via flexbox stretch

LAYOUT:
- md:w-7/12 for image, md:w-5/12 for text
- min-h-[400px] on desktop for substantial card presence
- Alternating image left/right preserved for visual rhythm

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 */}
+          {/* Stacking cards — sticky scroll effect */}
-          <div className="flex flex-col gap-px bg-gray-200 mt-14">
+          <div className="mt-14">
             {PERSONAS.map((p, i) => {
               const imgFirst = i % 2 === 0
               return (
-                <Link
+                <div key={p.slug} className={i < PERSONAS.length - 1 ? "pb-36" : ""}>
-                  key={p.slug}
+                  <div
-                  href={`/for/${p.slug}`}
+                    className="sticky will-change-transform"
-                  className="group bg-white block"
+                    style={{ top: `${72 + i * 16}px`, zIndex: 10 + i * 10 }}
-                >
+                  >
-                  <div className="grid md:grid-cols-12 items-stretch">
+                    <Link
-                    {/* Image — 7 cols, cinematic */}
+                      href={`/for/${p.slug}`}
-                    <div
+                      className="group block bg-white shadow-[0_2px_8px_rgba(0,0,0,0.08)] overflow-hidden"
-                      className={`md:col-span-7 ${!imgFirst ? "md:order-2" : ""} relative overflow-hidden aspect-[2/1]`}
                     >
-                      <Image
+                      <div className={`flex flex-col ${imgFirst ? "md:flex-row" : "md:flex-row-reverse"}`}>
-                        src={p.image}
+                        {/* Image — ~58%, fills full card height */}
-                        alt={p.scenario}
+                        <div className="md:w-7/12 relative overflow-hidden min-h-[220px] md:min-h-[400px]">
-                        fill
+                          <Image
-                        className="object-cover transition-opacity duration-300 group-hover:opacity-90"
+                            src={p.image}
-                        sizes="(max-width: 768px) 100vw, 58vw"
+                            alt={p.scenario}
-                      />
+                            fill
-                    </div>
+                            className="object-cover"
+                            sizes="(max-width: 768px) 100vw, 58vw"
+                          />
+                        </div>
 
-                    {/* Text — 5 cols */}
+                        {/* Text — ~42% */}
-                    <div
+                        <div className="md:w-5/12 p-8 md:p-12 lg:p-14 flex flex-col justify-center">
-                      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 className="text-lg md:text-xl font-black text-gray-900 group-hover:text-promise-blue transition-colors">
+                          </h3>
-                        {p.scenario}
-                      </h3>
 
-                      {/* Pain stats — the gap, visible contrast */}
+                          {/* Pain stats */}
-                      <div className="mt-5 space-y-1">
+                          <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 className="text-xl md:text-2xl lg:text-3xl font-black text-gray-400 tracking-tight leading-tight">
-                          {p.stat1}
+                              {p.stat1}
-                        </p>
+                            </p>
-                        <p className="text-xl md:text-2xl lg:text-3xl font-black text-gray-900 tracking-tight leading-tight">
+                            <p className="text-xl md:text-2xl lg:text-3xl font-black text-gray-900 tracking-tight leading-tight">
-                          {p.stat2}
+                              {p.stat2}
-                        </p>
+                            </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-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>
+                </div>
               )
             })}
           </div>