fix: use fresh product-bezel captures everywhere

README.md

@@ -53,12 +53,11 @@ bun run build
 bun run start
 ```
 
-Screenshots live in `public/screenshots/`. The long-form homepage uses
+Screenshots live in `public/screenshots/`. Every route uses the same fresh,
-precomposited, transparent iPhone product-bezel assets in
+precomposited iPhone product-bezel assets in
-`public/screenshots/pitch-glass-2026-08-20/`; supporting pages use versioned raw
+`public/screenshots/product-bezel-2026-08-20/`; there are no raw or CSS-framed
-captures from `public/screenshots/product-glass-2026-08-20/` in the lightweight
+product captures in the rendered site. The versioned path keeps newly captured
-CSS frame. Versioned paths keep newly captured UI from being hidden by stale
+UI from being hidden by stale browser or image-optimizer caches.
-browser or image-optimizer caches.
 Public pages label product imagery as synthetic demo data and beta UI.
 
 ### Capturing raw screenshots for the site
@@ -67,14 +66,13 @@ Export **in-app content only** from the simulator or device — no simulator chr
 
 1. Run the app on **iPhone 17 Pro** (or 16 Pro) simulator or device, or on an **Android** emulator/device.
 2. Capture each screen (⌘S in Simulator saves to Desktop; `adb exec-out screencap -p` on Android).
-3. Drop PNGs into `public/screenshots/` and update paths in the relevant route
+3. Composite each 1206 × 2622 PNG into a 1350 × 2760 product bezel at offset
-   or `src/components/feature-showcase.tsx`.
+   `+72+69`, export the transparent WebP, and update the shared versioned asset
+   directory referenced by the routes.
 
-The CSS frame dimensions assume tall iPhone screenshots and are controlled in
+Product images are composited at the bezel source size of 1350 × 2760 with
-`src/components/phone-mockup.tsx`. Use `captureMode="simulator"` only for old
+transparent backgrounds and rendered responsively through
-captures that already include device chrome. Homepage product images are
+`src/components/product-device.tsx`; the smaller `PhoneMockup` wrapper reuses
-composited at the bezel source size of 1350 × 2760 with transparent
+that same component. The homepage uses CSS view timelines for
-backgrounds and rendered responsively through
-`src/components/product-device.tsx`. The homepage uses CSS view timelines for
 scroll-scrubbed device and chapter motion on desktop and mobile, with a static
 fallback and a reduced-motion override.

src/app/(marketing)/executive-summary/page.tsx

@@ -161,8 +161,8 @@ export default function ExecutiveSummaryPage() {
 
           <div className="justify-self-center lg:justify-self-end">
             <PhoneMockup
-              src="/screenshots/product-glass-2026-08-20/home-light.png"
+              src="/screenshots/product-bezel-2026-08-20/home-black.webp"
-              darkSrc="/screenshots/product-glass-2026-08-20/home-dark.png"
+              darkSrc="/screenshots/product-bezel-2026-08-20/home-black-dark.webp"
               alt="Medscribe home screen"
               width={200}
               priority
@@ -333,15 +333,15 @@ export default function ExecutiveSummaryPage() {
             </p>
           </div>
           <div className="flex justify-end">
-            <div className="h-[1.78in] w-[0.88in] overflow-hidden rounded-[11px] border-[3px] border-slate-950 bg-white shadow-[0_8px_18px_rgba(15,23,42,0.14)]">
+            <div className="w-[0.96in]">
               <Image
-                src="/screenshots/product-glass-2026-08-20/home-light.png"
+                src="/screenshots/product-bezel-2026-08-20/home-black.webp"
                 alt="Medscribe home screen"
-                width={1206}
+                width={1350}
-                height={2622}
+                height={2760}
                 priority
                 unoptimized
-                className="h-full w-full object-cover object-top"
+                className="h-auto w-full"
               />
             </div>
           </div>

src/app/(marketing)/how-it-works/page.tsx

@@ -137,8 +137,8 @@ export default function HowItWorksPage() {
             </div>
             <div className="bg-primary-light/45 justify-self-center rounded-[2.5rem] p-7">
               <PhoneMockup
-                src="/screenshots/product-glass-2026-08-20/summary-light.png"
+                src="/screenshots/product-bezel-2026-08-20/summary-natural.webp"
-                darkSrc="/screenshots/product-glass-2026-08-20/summary-dark.png"
+                darkSrc="/screenshots/product-bezel-2026-08-20/summary-natural-dark.webp"
                 alt="Synthetic Medscribe beta visit summary"
                 width={235}
               />
@@ -151,8 +151,8 @@ export default function HowItWorksPage() {
           <div className="grid gap-12 lg:grid-cols-2 lg:items-center">
             <div className="justify-self-center rounded-[2.5rem] bg-[#f4f0e8] p-7 lg:order-1 dark:bg-[#151b25]">
               <PhoneMockup
-                src="/screenshots/product-glass-2026-08-20/medication-detail-light.png"
+                src="/screenshots/product-bezel-2026-08-20/medication-detail-natural.webp"
-                darkSrc="/screenshots/product-glass-2026-08-20/medication-detail-dark.png"
+                darkSrc="/screenshots/product-bezel-2026-08-20/medication-detail-natural-dark.webp"
                 alt="Synthetic Medscribe beta medication detail"
                 width={235}
               />
@@ -199,8 +199,8 @@ export default function HowItWorksPage() {
             </div>
             <div className="bg-primary-light/45 justify-self-center rounded-[2.5rem] p-7">
               <PhoneMockup
-                src="/screenshots/product-glass-2026-08-20/know-me-light.png"
+                src="/screenshots/product-bezel-2026-08-20/know-me-natural.webp"
-                darkSrc="/screenshots/product-glass-2026-08-20/know-me-dark.png"
+                darkSrc="/screenshots/product-bezel-2026-08-20/know-me-natural-dark.webp"
                 alt="Synthetic Medscribe beta Know Me handoff"
                 width={235}
               />

src/app/(marketing)/page.tsx

@@ -28,8 +28,8 @@ const visitMoments = [
     eyebrow: "Visits stay findable",
     title: "The visit has a place to land.",
     body: "Keep the recording, transcript, and reviewed summary together instead of reconstructing the appointment from memory.",
-    image: "/screenshots/pitch-glass-2026-08-20/visits-natural.webp",
+    image: "/screenshots/product-bezel-2026-08-20/visits-natural.webp",
-    darkImage: "/screenshots/pitch-glass-2026-08-20/visits-natural-dark.webp",
+    darkImage: "/screenshots/product-bezel-2026-08-20/visits-natural-dark.webp",
     alt: "Medscribe Visits screen in a natural titanium iPhone product bezel",
   },
   {
@@ -37,8 +37,9 @@ const visitMoments = [
     eyebrow: "Words stay checkable",
     title: "Go back to what was actually said.",
     body: "Search the local transcript and compare it with the generated summary before anything becomes part of the record you rely on.",
-    image: "/screenshots/pitch-glass-2026-08-20/transcript-black.webp",
+    image: "/screenshots/product-bezel-2026-08-20/transcript-black.webp",
-    darkImage: "/screenshots/pitch-glass-2026-08-20/transcript-black-dark.webp",
+    darkImage:
+      "/screenshots/product-bezel-2026-08-20/transcript-black-dark.webp",
     alt: "Medscribe visit transcript in a black titanium iPhone product bezel",
   },
   {
@@ -46,8 +47,9 @@ const visitMoments = [
     eyebrow: "The next step stays visible",
     title: "Review the useful part. Keep the uncertainty.",
     body: "Medications, follow-ups, diagnoses, and instructions are prepared on-device. Suggestions remain suggestions until a person checks them.",
-    image: "/screenshots/pitch-glass-2026-08-20/summary-natural.webp",
+    image: "/screenshots/product-bezel-2026-08-20/summary-natural.webp",
-    darkImage: "/screenshots/pitch-glass-2026-08-20/summary-natural-dark.webp",
+    darkImage:
+      "/screenshots/product-bezel-2026-08-20/summary-natural-dark.webp",
     alt: "Medscribe appointment summary in a natural titanium iPhone product bezel",
   },
 ] as const;
@@ -128,8 +130,8 @@ export default function HomePage() {
         <div className="relative mx-auto mt-12 h-[36rem] max-w-5xl sm:h-[46rem] lg:mt-8 lg:h-[54rem]">
           <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/pitch-glass-2026-08-20/summary-natural.webp"
+              src="/screenshots/product-bezel-2026-08-20/summary-natural.webp"
-              darkSrc="/screenshots/pitch-glass-2026-08-20/summary-natural-dark.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"
@@ -138,8 +140,8 @@ export default function HomePage() {
           </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/pitch-glass-2026-08-20/home-black.webp"
+              src="/screenshots/product-bezel-2026-08-20/home-black.webp"
-              darkSrc="/screenshots/pitch-glass-2026-08-20/home-black-dark.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"
@@ -249,8 +251,8 @@ export default function HomePage() {
             <div className="relative mx-auto h-[42rem] w-full max-w-2xl sm:h-[50rem] lg:h-[56rem]">
               <div className="absolute top-20 left-[4%] w-[17rem] -rotate-6 sm:w-[21rem] lg:w-[23rem]">
                 <ProductDevice
-                  src="/screenshots/pitch-glass-2026-08-20/medication-detail-natural.webp"
+                  src="/screenshots/product-bezel-2026-08-20/medication-detail-natural.webp"
-                  darkSrc="/screenshots/pitch-glass-2026-08-20/medication-detail-natural-dark.webp"
+                  darkSrc="/screenshots/product-bezel-2026-08-20/medication-detail-natural-dark.webp"
                   alt="Medscribe medication detail in a natural titanium iPhone product bezel"
                   className="pitch-device-motion pitch-device-drift-left"
                   sizes="(min-width: 1024px) 368px, (min-width: 640px) 336px, 272px"
@@ -258,8 +260,8 @@ export default function HomePage() {
               </div>
               <div className="absolute top-0 right-[2%] z-10 w-[18rem] rotate-5 sm:w-[22rem] lg:w-[24rem]">
                 <ProductDevice
-                  src="/screenshots/pitch-glass-2026-08-20/medications-black.webp"
+                  src="/screenshots/product-bezel-2026-08-20/medications-black.webp"
-                  darkSrc="/screenshots/pitch-glass-2026-08-20/medications-black-dark.webp"
+                  darkSrc="/screenshots/product-bezel-2026-08-20/medications-black-dark.webp"
                   alt="Medscribe medication list in a black titanium iPhone product bezel"
                   className="pitch-device-motion pitch-device-drift-right"
                   sizes="(min-width: 1024px) 384px, (min-width: 640px) 352px, 288px"
@@ -321,8 +323,8 @@ export default function HomePage() {
           </div>
           <div className="order-1 mx-auto w-[min(78vw,27rem)] lg:order-2">
             <ProductDevice
-              src="/screenshots/pitch-glass-2026-08-20/ask-black.webp"
+              src="/screenshots/product-bezel-2026-08-20/ask-black.webp"
-              darkSrc="/screenshots/pitch-glass-2026-08-20/ask-black-dark.webp"
+              darkSrc="/screenshots/product-bezel-2026-08-20/ask-black-dark.webp"
               alt="Medscribe Ask response grounded in local health context, shown in a black titanium iPhone product bezel"
               className="pitch-device-motion pitch-device-drift-right"
               sizes="(min-width: 1024px) 432px, (min-width: 640px) 384px, 78vw"
@@ -337,8 +339,8 @@ export default function HomePage() {
             <div className="relative mx-auto w-[min(80vw,28rem)]">
               <div className="bg-primary-light/70 absolute inset-[12%_-12%_8%] -z-10 rounded-[4rem] blur-2xl" />
               <ProductDevice
-                src="/screenshots/pitch-glass-2026-08-20/know-me-natural.webp"
+                src="/screenshots/product-bezel-2026-08-20/know-me-natural.webp"
-                darkSrc="/screenshots/pitch-glass-2026-08-20/know-me-natural-dark.webp"
+                darkSrc="/screenshots/product-bezel-2026-08-20/know-me-natural-dark.webp"
                 alt="Medscribe Know Me handoff record in a natural titanium iPhone product bezel"
                 className="pitch-device-motion pitch-device-drift-left"
                 sizes="(min-width: 1024px) 448px, (min-width: 640px) 400px, 80vw"

src/components/cvs-print-summary.tsx

@@ -159,16 +159,16 @@ export function CvsPrintSummary() {
             </div>
           </div>
 
-          <div className="mx-auto w-[186px] rounded-[28px] border-[6px] border-slate-950 bg-slate-950 p-1 shadow-[0_18px_45px_rgba(15,23,42,0.18)]">
+          <div className="mx-auto w-[202px]">
-            <div className="overflow-hidden rounded-[19px] bg-white">
+            <div>
               <Image
-                src="/screenshots/product-glass-2026-08-20/medications-light.png"
+                src="/screenshots/product-bezel-2026-08-20/medications-black.webp"
                 alt="Medscribe medications screen"
-                width={1206}
+                width={1350}
-                height={2622}
+                height={2760}
                 priority
                 unoptimized
-                className="block h-auto w-full"
+                className="block h-auto w-full drop-shadow-[0_18px_30px_rgba(15,23,42,0.18)]"
               />
             </div>
           </div>

src/components/feature-showcase.tsx

@@ -26,8 +26,8 @@ const features = [
       "The person reviews generated information",
       "Structured visit-to-record change review is still roadmap",
     ],
-    image: "/screenshots/product-glass-2026-08-20/visits-light.png",
+    image: "/screenshots/product-bezel-2026-08-20/visits-natural.webp",
-    darkImage: "/screenshots/product-glass-2026-08-20/visits-dark.png",
+    darkImage: "/screenshots/product-bezel-2026-08-20/visits-natural-dark.webp",
     alt: "Synthetic Medscribe beta visit detail showing a visit summary and follow-up information",
   },
   {
@@ -42,9 +42,10 @@ const features = [
       "Bundled facts and known pairs use named reference datasets",
       "Coverage is intentionally bounded, not a complete interaction check",
     ],
-    image: "/screenshots/product-glass-2026-08-20/medication-detail-light.png",
+    image:
+      "/screenshots/product-bezel-2026-08-20/medication-detail-natural.webp",
     darkImage:
-      "/screenshots/product-glass-2026-08-20/medication-detail-dark.png",
+      "/screenshots/product-bezel-2026-08-20/medication-detail-natural-dark.webp",
     alt: "Synthetic Medscribe beta medication detail with schedule and medication information",
   },
   {
@@ -59,8 +60,8 @@ const features = [
       "The local model helps with conversational phrasing",
       "High-risk or unsupported questions defer to a professional",
     ],
-    image: "/screenshots/product-glass-2026-08-20/ask-light.png",
+    image: "/screenshots/product-bezel-2026-08-20/ask-black.webp",
-    darkImage: "/screenshots/product-glass-2026-08-20/ask-dark.png",
+    darkImage: "/screenshots/product-bezel-2026-08-20/ask-black-dark.webp",
     alt: "Synthetic Medscribe beta answer with medication context and a safety boundary",
   },
   {
@@ -75,8 +76,9 @@ const features = [
       "The person can show or share the snapshot they reviewed",
       "It complements—not replaces—clinical verification",
     ],
-    image: "/screenshots/product-glass-2026-08-20/know-me-light.png",
+    image: "/screenshots/product-bezel-2026-08-20/know-me-natural.webp",
-    darkImage: "/screenshots/product-glass-2026-08-20/know-me-dark.png",
+    darkImage:
+      "/screenshots/product-bezel-2026-08-20/know-me-natural-dark.webp",
     alt: "Synthetic Medscribe beta Know Me handoff with active medications and review state",
   },
 ] as const;

src/components/northwell-print-summary.tsx

@@ -124,16 +124,16 @@ export function NorthwellPrintSummary() {
             </div>
           </div>
 
-          <div className="mx-auto w-[194px] rounded-[28px] border-[6px] border-slate-950 bg-slate-950 p-1 shadow-[0_18px_45px_rgba(15,23,42,0.18)]">
+          <div className="mx-auto w-[210px]">
-            <div className="overflow-hidden rounded-[19px] bg-white">
+            <div>
               <Image
-                src="/screenshots/product-glass-2026-08-20/home-light.png"
+                src="/screenshots/product-bezel-2026-08-20/home-black.webp"
                 alt="Medscribe home screen"
-                width={1206}
+                width={1350}
-                height={2622}
+                height={2760}
                 priority
                 unoptimized
-                className="block h-auto w-full"
+                className="block h-auto w-full drop-shadow-[0_18px_30px_rgba(15,23,42,0.18)]"
               />
             </div>
           </div>

src/components/phone-mockup.tsx

@@ -1,5 +1,4 @@
-import { getImageProps } from "next/image";
+import { ProductDevice } from "~/components/product-device";
-
 import { cn } from "~/lib/utils";
 
 interface PhoneMockupProps {
@@ -10,8 +9,6 @@ interface PhoneMockupProps {
   priority?: boolean;
   /** Rendered mockup width in px. @default 280 */
   width?: number;
-  /** Use "simulator" only for captures that already include device chrome. */
-  captureMode?: "simulator" | "raw";
 }
 
 export function PhoneMockup({
@@ -21,45 +18,16 @@ export function PhoneMockup({
   className,
   priority,
   width = 280,
-  captureMode = "raw",
 }: PhoneMockupProps) {
-  const isSimulatorCapture = captureMode === "simulator";
-  const shared = {
-    alt,
-    width: 1206,
-    height: 2622,
-    sizes: `${width}px`,
-    priority,
-    className: cn(
-      "absolute inset-0 h-full w-full object-cover",
-      isSimulatorCapture ? "scale-[1.22] object-[50%_58%]" : "object-top",
-    ),
-  };
-  const { props: lightProps } = getImageProps({ src, ...shared });
-  const darkProps = darkSrc
-    ? getImageProps({ src: darkSrc, ...shared }).props
-    : null;
-
   return (
-    <div
+    <div className={cn("mx-auto", className)} style={{ width }}>
-      className={cn(
+      <ProductDevice
-        "mx-auto overflow-hidden rounded-[2.25rem] border-[7px] border-slate-950 bg-slate-950 p-1 shadow-[0_24px_60px_rgba(15,23,42,0.18)]",
+        src={src}
-        className,
+        darkSrc={darkSrc}
-      )}
+        alt={alt}
-      style={{ width }}
+        priority={priority}
-    >
+        sizes={`${width}px`}
-      <div className="bg-surface relative aspect-[1206/2622] overflow-hidden rounded-[1.65rem]">
+      />
-        <picture>
-          {darkProps ? (
-            <source
-              media="(prefers-color-scheme: dark)"
-              srcSet={darkProps.srcSet}
-              sizes={darkProps.sizes}
-            />
-          ) : null}
-          <img {...lightProps} alt={alt} />
-        </picture>
-      </div>
     </div>
   );
 }

src/components/product-device.tsx

@@ -13,7 +13,7 @@ type ProductDeviceProps = {
 
 /**
  * A precomposited product capture using the licensed device bezels in
- * `public/screenshots/pitch-glass-2026-08-20`. Keeping the frame in the source
+ * `public/screenshots/product-bezel-2026-08-20`. Keeping the frame in the source
  * image preserves the bezel details without adding layout or client-side work.
  */
 export function ProductDevice({

src/components/walgreens-print-summary.tsx

@@ -159,16 +159,16 @@ export function WalgreensPrintSummary() {
             </div>
           </div>
 
-          <div className="mx-auto w-[186px] rounded-[28px] border-[6px] border-slate-950 bg-slate-950 p-1 shadow-[0_18px_45px_rgba(15,23,42,0.18)]">
+          <div className="mx-auto w-[202px]">
-            <div className="overflow-hidden rounded-[19px] bg-white">
+            <div>
               <Image
-                src="/screenshots/product-glass-2026-08-20/medications-light.png"
+                src="/screenshots/product-bezel-2026-08-20/medications-black.webp"
                 alt="Medscribe medications screen"
-                width={1206}
+                width={1350}
-                height={2622}
+                height={2760}
                 priority
                 unoptimized
-                className="block h-auto w-full"
+                className="block h-auto w-full drop-shadow-[0_18px_30px_rgba(15,23,42,0.18)]"
               />
             </div>
           </div>