From 5fd5011a9ce88442a8df6b592b605f36affdfb39 Mon Sep 17 00:00:00 2001
From: Sean O'Connor <sean@soconnor.dev>
Date: Fri, 21 Aug 2026 21:07:37 -0400
Subject: [PATCH] revert: restore normal hero page flow

---
 src/app/(marketing)/page.tsx | 46 +++++++++++-----------
 src/styles/globals.css       | 76 ------------------------------------
 2 files changed, 22 insertions(+), 100 deletions(-)

diff --git a/src/app/(marketing)/page.tsx b/src/app/(marketing)/page.tsx
index f431dc1..f9de1e9 100644
--- a/src/app/(marketing)/page.tsx
+++ b/src/app/(marketing)/page.tsx
@@ -96,7 +96,7 @@ const accessFit = [
 export default function HomePage() {
   return (
     <>
-      <section className="relative isolate min-h-[calc(100svh-4rem)] overflow-x-clip px-4 pt-14 sm:px-6 sm:pt-20 lg:pt-24">
+      <section className="relative isolate min-h-[calc(100svh-4rem)] overflow-hidden px-4 pt-14 sm:px-6 sm:pt-20 lg:pt-24">
         <div className="bg-primary-light/55 absolute top-0 left-1/2 -z-10 h-[38rem] w-[68rem] max-w-[120vw] -translate-x-1/2 rounded-full blur-3xl" />
         <div className="mx-auto max-w-7xl text-center">
           <div className="animate-fade-in-up flex items-center justify-center gap-3">
@@ -127,31 +127,29 @@ export default function HomePage() {
           </div>
         </div>
 
-        <div className="pitch-hero-stage relative mx-auto mt-12 h-[190svh] max-w-5xl lg:mt-8">
-          <div className="sticky top-16 h-[calc(100svh-4rem)]">
-            <div className="absolute top-24 left-1/2 w-[17rem] -translate-x-[86%] -rotate-6 sm:top-28 sm:w-[22rem] lg:top-32 lg:w-[26rem]">
-              <ProductDevice
-                src="/screenshots/product-bezel-2026-08-20/summary-natural.webp"
-                darkSrc="/screenshots/product-bezel-2026-08-20/summary-natural-dark.webp"
-                alt="Medscribe visit summary in a natural titanium iPhone product bezel"
-                className="pitch-hero-phone pitch-hero-phone-left"
-                sizes="(min-width: 1024px) 416px, (min-width: 640px) 352px, 272px"
-                priority
-              />
-            </div>
-            <div className="absolute top-0 left-1/2 z-10 w-[18rem] -translate-x-[14%] rotate-5 sm:w-[23rem] lg:w-[28rem]">
-              <ProductDevice
-                src="/screenshots/product-bezel-2026-08-20/home-black.webp"
-                darkSrc="/screenshots/product-bezel-2026-08-20/home-black-dark.webp"
-                alt="Medscribe home screen in a black titanium iPhone product bezel"
-                className="pitch-hero-phone pitch-hero-phone-right"
-                sizes="(min-width: 1024px) 448px, (min-width: 640px) 368px, 288px"
-                priority
-              />
-            </div>
+        <div className="relative mx-auto mt-12 h-[44rem] max-w-5xl sm:h-[58rem] lg:mt-8 lg:h-[64rem]">
+          <div className="absolute top-24 left-1/2 w-[17rem] -translate-x-[86%] -rotate-6 sm:top-28 sm:w-[22rem] lg:top-32 lg:w-[26rem]">
+            <ProductDevice
+              src="/screenshots/product-bezel-2026-08-20/summary-natural.webp"
+              darkSrc="/screenshots/product-bezel-2026-08-20/summary-natural-dark.webp"
+              alt="Medscribe visit summary in a natural titanium iPhone product bezel"
+              className="pitch-device-motion pitch-device-drift-left"
+              sizes="(min-width: 1024px) 416px, (min-width: 640px) 352px, 272px"
+              priority
+            />
+          </div>
+          <div className="absolute top-0 left-1/2 z-10 w-[18rem] -translate-x-[14%] rotate-5 sm:w-[23rem] lg:w-[28rem]">
+            <ProductDevice
+              src="/screenshots/product-bezel-2026-08-20/home-black.webp"
+              darkSrc="/screenshots/product-bezel-2026-08-20/home-black-dark.webp"
+              alt="Medscribe home screen in a black titanium iPhone product bezel"
+              className="pitch-device-motion pitch-device-drift-right"
+              sizes="(min-width: 1024px) 448px, (min-width: 640px) 368px, 288px"
+              priority
+            />
           </div>
         </div>
-        <p className="text-muted-foreground relative z-20 mx-auto mt-4 pb-8 text-center text-xs font-medium tracking-wide">
+        <p className="text-muted-foreground relative z-20 mx-auto pb-8 text-center text-xs font-medium tracking-wide">
           Illustrative profile · Medscribe interface
         </p>
       </section>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 68bc971..5ecd2ae 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -129,61 +129,6 @@
   --pitch-exit-rotate: -1.25deg;
 }
 
-/* The opening pair gets its own scroll story: meet, settle, then peel apart. */
-.pitch-hero-stage {
-  perspective: 1600px;
-}
-
-.pitch-hero-phone {
-  backface-visibility: hidden;
-  transform-origin: center;
-  transform-style: preserve-3d;
-}
-
-.pitch-hero-phone-left {
-  --hero-start-x: -4rem;
-  --hero-meet-x: 1.25rem;
-  --hero-exit-x: -5rem;
-  --hero-start-rotate: -6deg;
-  --hero-meet-rotate: 1.5deg;
-  --hero-exit-rotate: -5deg;
-}
-
-.pitch-hero-phone-right {
-  --hero-start-x: 4rem;
-  --hero-meet-x: -1rem;
-  --hero-exit-x: 5rem;
-  --hero-start-rotate: 6deg;
-  --hero-meet-rotate: -1.5deg;
-  --hero-exit-rotate: 5deg;
-}
-
-@keyframes pitch-hero-phone-scroll {
-  0% {
-    opacity: 0.38;
-    transform: translate3d(var(--hero-start-x), 4rem, -7rem) scale(0.86)
-      rotate(var(--hero-start-rotate));
-  }
-  30% {
-    opacity: 1;
-    transform: translate3d(0, 0.75rem, 0) scale(0.985) rotate(0deg);
-  }
-  58% {
-    opacity: 1;
-    transform: translate3d(var(--hero-meet-x), -2rem, 4rem) scale(1.04)
-      rotate(var(--hero-meet-rotate));
-  }
-  78% {
-    opacity: 1;
-    transform: translate3d(0, -3.5rem, 1rem) scale(1.015) rotate(0deg);
-  }
-  100% {
-    opacity: 0.76;
-    transform: translate3d(var(--hero-exit-x), -10rem, -4rem) scale(0.94)
-      rotate(var(--hero-exit-rotate));
-  }
-}
-
 @keyframes pitch-device-scroll {
   0% {
     opacity: 0.42;
@@ -227,14 +172,6 @@
   }
 }
 
-@supports (animation-timeline: scroll()) {
-  .pitch-hero-phone {
-    animation: pitch-hero-phone-scroll linear both;
-    animation-timeline: scroll(root block);
-    animation-range: 0px 1500px;
-  }
-}
-
 @supports (animation-timeline: view()) {
   .pitch-device-motion {
     animation: pitch-device-scroll linear both;
@@ -257,18 +194,6 @@
 
 /* Keep the product choreography visible on phones without crowding the copy. */
 @media (max-width: 639px) {
-  .pitch-hero-phone-left {
-    --hero-start-x: -1.5rem;
-    --hero-meet-x: 0.5rem;
-    --hero-exit-x: -1.75rem;
-  }
-
-  .pitch-hero-phone-right {
-    --hero-start-x: 1.5rem;
-    --hero-meet-x: -0.5rem;
-    --hero-exit-x: 1.75rem;
-  }
-
   .pitch-device-motion {
     --pitch-enter-y: 4rem;
     --pitch-exit-y: -3rem;
@@ -304,7 +229,6 @@
   }
 
   .pitch-device-motion,
-  .pitch-hero-phone,
   .pitch-copy-motion,
   .pitch-card-motion {
     animation: none !important;