Unify typography and refresh product screenshots

README.md

@@ -52,10 +52,11 @@ bun run start
 ```
 
 Screenshots live in `public/screenshots/`. Every route uses the same fresh,
-precomposited iPhone product-bezel assets in
+precomposited iPhone 17 Pro assets in
-`public/screenshots/product-bezel-2026-08-24-clipped/`; there are no raw or CSS-framed
+`public/screenshots/product-bezel-2026-08-24-unified-type/`; there are no raw or
-product captures in the rendered site. The versioned path keeps newly captured
+CSS-framed product captures in the rendered site. The neutral Silver bezel and
-UI from being hidden by stale browser or image-optimizer caches.
+the versioned path keep the imagery consistent and prevent stale optimizer
+caches from hiding a new capture set.
 Public pages label product imagery as an illustrative profile and Medscribe
 interface.
 
@@ -63,11 +64,12 @@ interface.
 
 Export **in-app content only** from the simulator or device — no simulator chrome or macOS capture toolbar. A normal in-app status bar/tab bar is fine.
 
-1. Run the app on **iPhone 17 Pro** (or 16 Pro) simulator or device, or on an **Android** emulator/device.
+1. Run the app on an **iPhone 17 Pro** simulator or device.
-2. Capture each screen (⌘S in Simulator saves to Desktop; `adb exec-out screencap -p` on Android).
+2. Capture each screen (⌘S in Simulator saves to Desktop).
-3. Clip each 1206 × 2622 capture to the bezel's rounded display opening, then
+3. Fit each 1206 × 2622 capture into the bezel's 1201 × 2617 display opening,
-   composite it into a 1350 × 2760 product bezel at offset `+72+69`. Export a
+   clip it with a 198 px corner radius, and composite it into the 1350 × 2760
-   transparent, lossless WebP and update the shared versioned asset directory
+   Silver bezel at offset `+74+71`. Export a transparent, lossless WebP and
+   update the shared versioned asset directory.
    referenced by the routes.
 
 Product images are composited at the bezel source size of 1350 × 2760 with

src/app/(marketing)/access/page.tsx

@@ -68,7 +68,7 @@ export default function AccessPage() {
               <Badge variant="success">{productRelease.stage}</Badge>
               <Badge variant="outline">{productRelease.platforms}</Badge>
             </div>
-            <h1 className="text-foreground mt-6 max-w-3xl font-serif text-5xl leading-[1.02] font-semibold tracking-[-0.03em] sm:text-6xl">
+            <h1 className="text-foreground mt-6 max-w-3xl font-display text-5xl leading-[1.02] font-semibold tracking-[-0.03em] sm:text-6xl">
               Bring your care context together.
             </h1>
             <p className="text-muted-foreground mt-6 max-w-2xl text-lg leading-relaxed sm:text-xl">
@@ -82,7 +82,7 @@ export default function AccessPage() {
             <div className="bg-primary-light text-primary flex size-12 items-center justify-center rounded-xl">
               <Mail className="size-6" aria-hidden="true" />
             </div>
-            <h2 className="text-foreground mt-5 font-serif text-3xl font-semibold">
+            <h2 className="text-foreground mt-5 font-display text-3xl font-semibold">
               Request Medscribe access
             </h2>
             <p className="text-muted-foreground mt-4 text-sm leading-relaxed">
@@ -107,7 +107,7 @@ export default function AccessPage() {
       <section className="section-wash px-4 py-20 sm:px-6 lg:py-24">
         <div className="mx-auto max-w-6xl">
           <SectionLabel>Made for real life</SectionLabel>
-          <h2 className="text-foreground mt-4 max-w-3xl font-serif text-4xl font-semibold tracking-tight sm:text-5xl">
+          <h2 className="text-foreground mt-4 max-w-3xl font-display text-4xl font-semibold tracking-tight sm:text-5xl">
             Keep the details close without carrying the whole burden in your
             head.
           </h2>
@@ -121,7 +121,7 @@ export default function AccessPage() {
                   className="surface-panel rounded-2xl p-6"
                 >
                   <Icon className="text-primary size-6" aria-hidden="true" />
-                  <h3 className="text-foreground mt-5 font-serif text-2xl font-semibold">
+                  <h3 className="text-foreground mt-5 font-display text-2xl font-semibold">
                     {item.title}
                   </h3>
                   <p className="text-muted-foreground mt-3 text-sm leading-relaxed">
@@ -137,7 +137,7 @@ export default function AccessPage() {
       <section className="px-4 py-20 sm:px-6 lg:py-28">
         <div className="mx-auto max-w-6xl">
           <SectionLabel>One connected picture</SectionLabel>
-          <h2 className="text-foreground mt-4 max-w-3xl font-serif text-4xl font-semibold tracking-tight sm:text-5xl">
+          <h2 className="text-foreground mt-4 max-w-3xl font-display text-4xl font-semibold tracking-tight sm:text-5xl">
             Visits, medications, and the people who matter—together.
           </h2>
           <div className="mt-10 grid gap-4 md:grid-cols-3">
@@ -150,7 +150,7 @@ export default function AccessPage() {
                   className="surface-panel rounded-2xl p-6"
                 >
                   <Icon className="text-primary size-6" aria-hidden="true" />
-                  <h3 className="text-foreground mt-5 font-serif text-2xl font-semibold">
+                  <h3 className="text-foreground mt-5 font-display text-2xl font-semibold">
                     {item.title}
                   </h3>
                   <p className="text-muted-foreground mt-3 text-sm leading-relaxed">
@@ -165,7 +165,7 @@ export default function AccessPage() {
             <p className="text-xs font-bold tracking-[0.14em] text-teal-100 uppercase">
               Keep your care team in the loop
             </p>
-            <h2 className="mt-4 max-w-3xl font-serif text-3xl font-semibold sm:text-4xl">
+            <h2 className="mt-4 max-w-3xl font-display text-3xl font-semibold sm:text-4xl">
               Medscribe helps you prepare for better conversations. Medical
               decisions remain with you and your qualified care team.
             </h2>

src/app/(marketing)/briefs/northwell/page.tsx

@@ -15,7 +15,7 @@ export default function NorthwellBriefPage() {
       <NorthwellPrintSummary />
       <div className="print-hidden mx-auto max-w-2xl px-4 py-16 text-center sm:px-6 lg:py-24">
         <SectionLabel>Executive summary · Northwell Health</SectionLabel>
-        <h1 className="text-foreground mt-4 font-serif text-4xl font-semibold tracking-tight sm:text-5xl">
+        <h1 className="text-foreground mt-4 font-display text-4xl font-semibold tracking-tight sm:text-5xl">
           The health-system executive summary
         </h1>
         <p className="text-muted-foreground mx-auto mt-5 max-w-xl leading-relaxed">

src/app/(marketing)/cvs/page.tsx

@@ -15,7 +15,7 @@ export default function CvsSummaryPage() {
       <CvsPrintSummary />
       <div className="print-hidden mx-auto max-w-2xl px-4 py-16 text-center sm:px-6 lg:py-24">
         <SectionLabel>Executive summary · CVS Health</SectionLabel>
-        <h1 className="text-foreground mt-4 font-serif text-4xl font-semibold tracking-tight sm:text-5xl">
+        <h1 className="text-foreground mt-4 font-display text-4xl font-semibold tracking-tight sm:text-5xl">
           The pharmacy executive summary
         </h1>
         <p className="text-muted-foreground mx-auto mt-5 max-w-xl leading-relaxed">

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

@@ -57,7 +57,7 @@ export default function HowItWorksPage() {
       <section className="px-4 pt-16 pb-18 sm:px-6 sm:pt-22">
         <div className="mx-auto max-w-6xl">
           <Badge variant="success">A day with Medscribe</Badge>
-          <h1 className="text-foreground mt-6 max-w-4xl font-serif text-5xl leading-[1.02] font-semibold tracking-[-0.03em] sm:text-6xl">
+          <h1 className="text-foreground mt-6 max-w-4xl font-display text-5xl leading-[1.02] font-semibold tracking-[-0.03em] sm:text-6xl">
             One record, built through everyday use.
           </h1>
           <p className="text-muted-foreground mt-6 max-w-2xl text-lg leading-relaxed sm:text-xl">
@@ -71,7 +71,7 @@ export default function HowItWorksPage() {
       <section className="section-wash px-4 py-18 sm:px-6 lg:py-22">
         <div className="mx-auto max-w-6xl">
           <SectionLabel>Start with what matters</SectionLabel>
-          <h2 className="text-foreground mt-4 max-w-3xl font-serif text-4xl font-semibold tracking-tight sm:text-5xl">
+          <h2 className="text-foreground mt-4 max-w-3xl font-display text-4xl font-semibold tracking-tight sm:text-5xl">
             A clear rhythm from the moment to the next conversation.
           </h2>
           <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
@@ -91,7 +91,7 @@ export default function HowItWorksPage() {
                       0{index + 1}
                     </span>
                   </div>
-                  <h3 className="text-foreground mt-5 font-serif text-2xl font-semibold">
+                  <h3 className="text-foreground mt-5 font-display text-2xl font-semibold">
                     {item.title}
                   </h3>
                   <p className="text-muted-foreground mt-3 text-sm leading-relaxed">
@@ -119,7 +119,7 @@ export default function HowItWorksPage() {
           <div className="grid gap-12 lg:grid-cols-2 lg:items-center">
             <div>
               <SectionLabel>Review what changed</SectionLabel>
-              <h2 className="text-foreground mt-4 font-serif text-4xl font-semibold tracking-tight sm:text-5xl">
+              <h2 className="text-foreground mt-4 font-display text-4xl font-semibold tracking-tight sm:text-5xl">
                 Keep the visit and the takeaway together.
               </h2>
               <p className="text-muted-foreground mt-5 leading-relaxed">
@@ -134,10 +134,10 @@ export default function HowItWorksPage() {
             </div>
             <div className="justify-self-center py-2">
               <PhoneMockup
-                src="/screenshots/product-bezel-2026-08-24-clipped/summary-reviewed-natural.webp"
+                src="/screenshots/product-bezel-2026-08-24-unified-type/summary-reviewed-natural.webp"
-                darkSrc="/screenshots/product-bezel-2026-08-24-clipped/summary-reviewed-natural-dark.webp"
+                darkSrc="/screenshots/product-bezel-2026-08-24-unified-type/summary-reviewed-natural-dark.webp"
                 alt="Illustrative Medscribe visit summary"
-                width={235}
+                width={280}
               />
               <p className="text-muted-foreground mt-4 text-center text-xs">
                 Illustrative profile · Medscribe interface
@@ -148,10 +148,10 @@ export default function HowItWorksPage() {
           <div className="grid gap-12 lg:grid-cols-2 lg:items-center">
             <div className="justify-self-center py-2 lg:order-1">
               <PhoneMockup
-                src="/screenshots/product-bezel-2026-08-24-clipped/medication-detail-natural.webp"
+                src="/screenshots/product-bezel-2026-08-24-unified-type/medication-detail-natural.webp"
-                darkSrc="/screenshots/product-bezel-2026-08-24-clipped/medication-detail-natural-dark.webp"
+                darkSrc="/screenshots/product-bezel-2026-08-24-unified-type/medication-detail-natural-dark.webp"
                 alt="Illustrative Medscribe medication detail"
-                width={235}
+                width={280}
               />
               <p className="text-muted-foreground mt-4 text-center text-xs">
                 Illustrative profile · Medscribe interface
@@ -159,7 +159,7 @@ export default function HowItWorksPage() {
             </div>
             <div className="lg:order-2">
               <SectionLabel>Maintain the medication picture</SectionLabel>
-              <h2 className="text-foreground mt-4 font-serif text-4xl font-semibold tracking-tight sm:text-5xl">
+              <h2 className="text-foreground mt-4 font-display text-4xl font-semibold tracking-tight sm:text-5xl">
                 Keep the daily routine easy to read.
               </h2>
               <p className="text-muted-foreground mt-5 leading-relaxed">
@@ -176,7 +176,7 @@ export default function HowItWorksPage() {
           <div className="grid gap-12 lg:grid-cols-2 lg:items-center">
             <div className="lg:order-2">
               <SectionLabel>Keep the next question</SectionLabel>
-              <h2 className="text-foreground mt-4 font-serif text-4xl font-semibold tracking-tight sm:text-5xl">
+              <h2 className="text-foreground mt-4 font-display text-4xl font-semibold tracking-tight sm:text-5xl">
                 Save it while it is on your mind.
               </h2>
               <p className="text-muted-foreground mt-5 leading-relaxed">
@@ -191,10 +191,10 @@ export default function HowItWorksPage() {
             </div>
             <div className="justify-self-center py-2 lg:order-1">
               <PhoneMockup
-                src="/screenshots/product-bezel-2026-08-24-clipped/questions-black.webp"
+                src="/screenshots/product-bezel-2026-08-24-unified-type/questions-black.webp"
-                darkSrc="/screenshots/product-bezel-2026-08-24-clipped/questions-black-dark.webp"
+                darkSrc="/screenshots/product-bezel-2026-08-24-unified-type/questions-black-dark.webp"
                 alt="Illustrative Medscribe Questions to ask interface"
-                width={235}
+                width={280}
               />
               <p className="text-muted-foreground mt-4 text-center text-xs">
                 Illustrative profile · Medscribe interface
@@ -205,7 +205,7 @@ export default function HowItWorksPage() {
           <div className="grid gap-12 lg:grid-cols-2 lg:items-center">
             <div>
               <SectionLabel>Prepare the handoff</SectionLabel>
-              <h2 className="text-foreground mt-4 font-serif text-4xl font-semibold tracking-tight sm:text-5xl">
+              <h2 className="text-foreground mt-4 font-display text-4xl font-semibold tracking-tight sm:text-5xl">
                 Know Me is the view. Sharing is a separate choice.
               </h2>
               <p className="text-muted-foreground mt-5 leading-relaxed">
@@ -220,10 +220,10 @@ export default function HowItWorksPage() {
             </div>
             <div className="justify-self-center py-2">
               <PhoneMockup
-                src="/screenshots/product-bezel-2026-08-24-clipped/know-me-natural.webp"
+                src="/screenshots/product-bezel-2026-08-24-unified-type/know-me-natural.webp"
-                darkSrc="/screenshots/product-bezel-2026-08-24-clipped/know-me-natural-dark.webp"
+                darkSrc="/screenshots/product-bezel-2026-08-24-unified-type/know-me-natural-dark.webp"
                 alt="Illustrative Medscribe Know Me handoff"
-                width={235}
+                width={280}
               />
               <p className="text-muted-foreground mt-4 text-center text-xs">
                 Illustrative profile · Medscribe interface
@@ -239,7 +239,7 @@ export default function HowItWorksPage() {
             <div className="bg-primary-light text-primary flex size-12 items-center justify-center rounded-xl">
               <ShieldAlert className="size-6" aria-hidden="true" />
             </div>
-            <h2 className="text-foreground mt-5 font-serif text-4xl font-semibold tracking-tight">
+            <h2 className="text-foreground mt-5 font-display text-4xl font-semibold tracking-tight">
               What Medscribe does not do
             </h2>
             <p className="text-muted-foreground mt-4 leading-relaxed">
@@ -266,7 +266,7 @@ export default function HowItWorksPage() {
       <section className="px-4 py-20 sm:px-6">
         <div className="night-card mx-auto flex max-w-6xl flex-col items-start justify-between gap-7 rounded-[2rem] px-7 py-10 text-white sm:px-10 md:flex-row md:items-center">
           <div>
-            <h2 className="font-serif text-3xl font-semibold">
+            <h2 className="font-display text-3xl font-semibold">
               Privacy should feel understandable.
             </h2>
             <p className="mt-2 text-sm leading-relaxed text-teal-50/75">

src/app/(marketing)/page.tsx

@@ -28,10 +28,10 @@ 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/product-bezel-2026-08-24-clipped/visits-natural.webp",
+    image: "/screenshots/product-bezel-2026-08-24-unified-type/visits-natural.webp",
     darkImage:
-      "/screenshots/product-bezel-2026-08-24-clipped/visits-natural-dark.webp",
+      "/screenshots/product-bezel-2026-08-24-unified-type/visits-natural-dark.webp",
-    alt: "Medscribe Visits screen in a natural titanium iPhone product bezel",
+    alt: "Medscribe Visits screen in an iPhone 17 Pro product bezel",
   },
   {
     number: "02",
@@ -39,10 +39,10 @@ const visitMoments = [
     title: "Go back to what was actually said.",
     body: "Search the transcript and compare it with the generated summary before relying on it later.",
     image:
-      "/screenshots/product-bezel-2026-08-24-clipped/transcript-populated-black.webp",
+      "/screenshots/product-bezel-2026-08-24-unified-type/transcript-populated-black.webp",
     darkImage:
-      "/screenshots/product-bezel-2026-08-24-clipped/transcript-populated-black-dark.webp",
+      "/screenshots/product-bezel-2026-08-24-unified-type/transcript-populated-black-dark.webp",
-    alt: "Medscribe visit transcript in a black titanium iPhone product bezel",
+    alt: "Medscribe visit transcript in an iPhone 17 Pro product bezel",
   },
   {
     number: "03",
@@ -50,10 +50,10 @@ const visitMoments = [
     title: "Review the useful part. Keep your judgment.",
     body: "Bring medications, follow-ups, diagnoses, and instructions into view, then check the details that matter.",
     image:
-      "/screenshots/product-bezel-2026-08-24-clipped/summary-reviewed-natural.webp",
+      "/screenshots/product-bezel-2026-08-24-unified-type/summary-reviewed-natural.webp",
     darkImage:
-      "/screenshots/product-bezel-2026-08-24-clipped/summary-reviewed-natural-dark.webp",
+      "/screenshots/product-bezel-2026-08-24-unified-type/summary-reviewed-natural-dark.webp",
-    alt: "Medscribe appointment summary in a natural titanium iPhone product bezel",
+    alt: "Medscribe appointment summary in an iPhone 17 Pro product bezel",
   },
 ] as const;
 
@@ -109,7 +109,7 @@ export default function HomePage() {
               {productRelease.platforms}
             </span>
           </div>
-          <h1 className="animate-fade-in-up-delay-1 text-foreground mx-auto mt-7 max-w-6xl font-serif text-[clamp(3.6rem,9vw,8.5rem)] leading-[0.86] font-semibold tracking-[-0.055em]">
+          <h1 className="animate-fade-in-up-delay-1 text-foreground mx-auto mt-7 max-w-6xl font-display text-[clamp(3.6rem,9vw,8.5rem)] leading-[0.86] font-semibold tracking-[-0.055em]">
             Carry the context.
           </h1>
           <p className="animate-fade-in-up-delay-2 text-muted-foreground mx-auto mt-7 max-w-2xl text-lg leading-relaxed sm:text-xl lg:text-2xl">
@@ -132,9 +132,9 @@ export default function HomePage() {
         <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-24-clipped/summary-reviewed-natural.webp"
+              src="/screenshots/product-bezel-2026-08-24-unified-type/summary-reviewed-natural.webp"
-              darkSrc="/screenshots/product-bezel-2026-08-24-clipped/summary-reviewed-natural-dark.webp"
+              darkSrc="/screenshots/product-bezel-2026-08-24-unified-type/summary-reviewed-natural-dark.webp"
-              alt="Medscribe visit summary in a natural titanium iPhone product bezel"
+              alt="Medscribe visit summary in an iPhone 17 Pro product bezel"
               className="pitch-device-motion pitch-device-drift-left"
               sizes="(min-width: 1024px) 416px, (min-width: 640px) 352px, 272px"
               priority
@@ -142,9 +142,9 @@ 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/product-bezel-2026-08-24-clipped/home-black.webp"
+              src="/screenshots/product-bezel-2026-08-24-unified-type/home-black.webp"
-              darkSrc="/screenshots/product-bezel-2026-08-24-clipped/home-black-dark.webp"
+              darkSrc="/screenshots/product-bezel-2026-08-24-unified-type/home-black-dark.webp"
-              alt="Medscribe home screen in a black titanium iPhone product bezel"
+              alt="Medscribe home screen in an iPhone 17 Pro product bezel"
               className="pitch-device-motion pitch-device-drift-right"
               sizes="(min-width: 1024px) 448px, (min-width: 640px) 368px, 288px"
               priority
@@ -161,7 +161,7 @@ export default function HomePage() {
           <p className="text-primary text-xs font-bold tracking-[0.2em] uppercase">
             The connected picture
           </p>
-          <h2 className="text-foreground mx-auto mt-7 max-w-5xl font-serif text-[clamp(2.8rem,7vw,6.5rem)] leading-[0.98] font-semibold tracking-[-0.045em]">
+          <h2 className="text-foreground mx-auto mt-7 max-w-5xl font-display text-[clamp(2.8rem,7vw,6.5rem)] leading-[0.98] font-semibold tracking-[-0.045em]">
             Care happens in fragments. Your context shouldn&apos;t.
           </h2>
           <p className="text-muted-foreground mx-auto mt-8 max-w-2xl text-lg leading-relaxed sm:text-xl">
@@ -178,7 +178,7 @@ export default function HomePage() {
             <p className="text-primary text-xs font-bold tracking-[0.2em] uppercase">
               After the visit
             </p>
-            <h2 className="text-foreground mt-6 max-w-xl font-serif text-5xl leading-[0.98] font-semibold tracking-[-0.04em] sm:text-6xl">
+            <h2 className="text-foreground mt-6 max-w-xl font-display text-5xl leading-[0.98] font-semibold tracking-[-0.04em] sm:text-6xl">
               Turn what happened into something you can check.
             </h2>
             <p className="text-muted-foreground mt-7 max-w-lg text-lg leading-relaxed">
@@ -210,7 +210,7 @@ export default function HomePage() {
                       {moment.eyebrow}
                     </p>
                   </div>
-                  <h3 className="text-foreground mt-5 font-serif text-3xl font-semibold tracking-[-0.025em] sm:text-4xl">
+                  <h3 className="text-foreground mt-5 font-display text-3xl font-semibold tracking-[-0.025em] sm:text-4xl">
                     {moment.title}
                   </h3>
                   <p className="text-muted-foreground mt-4 max-w-lg leading-relaxed">
@@ -239,7 +239,7 @@ export default function HomePage() {
             <p className="text-xs font-bold tracking-[0.2em] text-teal-200 uppercase">
               Between visits
             </p>
-            <h2 className="mt-6 font-serif text-[clamp(3rem,7vw,6.7rem)] leading-[0.94] font-semibold tracking-[-0.045em]">
+            <h2 className="mt-6 font-display text-[clamp(3rem,7vw,6.7rem)] leading-[0.94] font-semibold tracking-[-0.045em]">
               Keep the medication picture current.
             </h2>
             <p className="mx-auto mt-8 max-w-2xl text-lg leading-relaxed text-teal-50/75 sm:text-xl">
@@ -252,18 +252,18 @@ 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/product-bezel-2026-08-24-clipped/medication-detail-natural.webp"
+                  src="/screenshots/product-bezel-2026-08-24-unified-type/medication-detail-natural.webp"
-                  darkSrc="/screenshots/product-bezel-2026-08-24-clipped/medication-detail-natural-dark.webp"
+                  darkSrc="/screenshots/product-bezel-2026-08-24-unified-type/medication-detail-natural-dark.webp"
-                  alt="Medscribe medication detail in a natural titanium iPhone product bezel"
+                  alt="Medscribe medication detail in an iPhone 17 Pro product bezel"
                   className="pitch-device-motion pitch-device-drift-left"
                   sizes="(min-width: 1024px) 368px, (min-width: 640px) 336px, 272px"
                 />
               </div>
               <div className="absolute top-0 right-[2%] z-10 w-[18rem] rotate-5 sm:w-[22rem] lg:w-[24rem]">
                 <ProductDevice
-                  src="/screenshots/product-bezel-2026-08-24-clipped/medications-black.webp"
+                  src="/screenshots/product-bezel-2026-08-24-unified-type/medications-black.webp"
-                  darkSrc="/screenshots/product-bezel-2026-08-24-clipped/medications-black-dark.webp"
+                  darkSrc="/screenshots/product-bezel-2026-08-24-unified-type/medications-black-dark.webp"
-                  alt="Medscribe medication list in a black titanium iPhone product bezel"
+                  alt="Medscribe medication list in an iPhone 17 Pro product bezel"
                   className="pitch-device-motion pitch-device-drift-right"
                   sizes="(min-width: 1024px) 384px, (min-width: 640px) 352px, 288px"
                 />
@@ -290,7 +290,7 @@ export default function HomePage() {
                   className="border-white/10 border-t p-7 first:border-t-0 sm:p-9"
                 >
                   <Check className="size-5 text-teal-200" aria-hidden="true" />
-                  <h3 className="mt-5 font-serif text-2xl font-semibold sm:text-3xl">
+                  <h3 className="mt-5 font-display text-2xl font-semibold sm:text-3xl">
                     {item.title}
                   </h3>
                   <p className="mt-3 leading-relaxed text-teal-50/70">
@@ -312,7 +312,7 @@ export default function HomePage() {
             <p className="text-primary text-xs font-bold tracking-[0.2em] uppercase">
               Questions for the doctor
             </p>
-            <h2 className="text-foreground mt-6 max-w-2xl font-serif text-[clamp(3.25rem,6vw,6.5rem)] leading-[0.94] font-semibold tracking-[-0.045em]">
+            <h2 className="text-foreground mt-6 max-w-2xl font-display text-[clamp(3.25rem,6vw,6.5rem)] leading-[0.94] font-semibold tracking-[-0.045em]">
               Ask now. Save what belongs in the room.
             </h2>
             <p className="text-muted-foreground mt-8 max-w-xl text-lg leading-relaxed sm:text-xl">
@@ -333,18 +333,18 @@ export default function HomePage() {
           <div className="mx-auto grid w-full max-w-[40rem] items-center justify-center gap-2 sm:grid-cols-2 lg:justify-end">
             <div className="mx-auto w-[min(72vw,18rem)] -rotate-2 sm:w-full">
               <ProductDevice
-                src="/screenshots/product-bezel-2026-08-24-clipped/ask-questions-black.webp"
+                src="/screenshots/product-bezel-2026-08-24-unified-type/ask-questions-black.webp"
-                darkSrc="/screenshots/product-bezel-2026-08-24-clipped/ask-questions-black-dark.webp"
+                darkSrc="/screenshots/product-bezel-2026-08-24-unified-type/ask-questions-black-dark.webp"
-                alt="Medscribe Ask response shown in a black titanium iPhone product bezel"
+                alt="Medscribe Ask response shown in an iPhone 17 Pro product bezel"
                 className="pitch-device-motion pitch-device-drift-left"
                 sizes="(min-width: 640px) 288px, 72vw"
               />
             </div>
             <div className="mx-auto w-[min(72vw,18rem)] rotate-2 sm:w-full">
               <ProductDevice
-                src="/screenshots/product-bezel-2026-08-24-clipped/questions-black.webp"
+                src="/screenshots/product-bezel-2026-08-24-unified-type/questions-black.webp"
-                darkSrc="/screenshots/product-bezel-2026-08-24-clipped/questions-black-dark.webp"
+                darkSrc="/screenshots/product-bezel-2026-08-24-unified-type/questions-black-dark.webp"
-                alt="Medscribe Questions to ask interface shown in a black titanium iPhone product bezel"
+                alt="Medscribe Questions to ask interface shown in an iPhone 17 Pro product bezel"
                 className="pitch-device-motion pitch-device-drift-right"
                 sizes="(min-width: 640px) 288px, 72vw"
               />
@@ -359,9 +359,9 @@ 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/product-bezel-2026-08-24-clipped/know-me-natural.webp"
+                src="/screenshots/product-bezel-2026-08-24-unified-type/know-me-natural.webp"
-                darkSrc="/screenshots/product-bezel-2026-08-24-clipped/know-me-natural-dark.webp"
+                darkSrc="/screenshots/product-bezel-2026-08-24-unified-type/know-me-natural-dark.webp"
-                alt="Medscribe Know Me handoff record in a natural titanium iPhone product bezel"
+                alt="Medscribe Know Me handoff record in an iPhone 17 Pro product bezel"
                 className="pitch-device-motion pitch-device-drift-left"
                 sizes="(min-width: 1024px) 448px, (min-width: 640px) 400px, 80vw"
               />
@@ -370,7 +370,7 @@ export default function HomePage() {
               <p className="text-primary text-xs font-bold tracking-[0.2em] uppercase">
                 At the handoff
               </p>
-              <h2 className="text-foreground mt-6 max-w-2xl font-serif text-[clamp(3.2rem,6vw,6.2rem)] leading-[0.95] font-semibold tracking-[-0.045em]">
+              <h2 className="text-foreground mt-6 max-w-2xl font-display text-[clamp(3.2rem,6vw,6.2rem)] leading-[0.95] font-semibold tracking-[-0.045em]">
                 Bring the picture when care gets complicated.
               </h2>
               <p className="text-muted-foreground mt-8 max-w-xl text-lg leading-relaxed sm:text-xl">
@@ -414,7 +414,7 @@ export default function HomePage() {
                   className="size-7 text-teal-200"
                   aria-hidden="true"
                 />
-                <h3 className="mt-5 font-serif text-4xl leading-tight font-semibold sm:text-5xl">
+                <h3 className="mt-5 font-display text-4xl leading-tight font-semibold sm:text-5xl">
                   Share with intention.
                 </h3>
                 <p className="mt-5 max-w-xl leading-relaxed text-teal-50/75">
@@ -435,7 +435,7 @@ export default function HomePage() {
                     <span className="flex size-8 items-center justify-center rounded-full bg-white/12 text-xs font-bold">
                       {number}
                     </span>
-                    <p className="mt-8 font-serif text-xl font-semibold">
+                    <p className="mt-8 font-display text-xl font-semibold">
                       {title}
                     </p>
                     <p className="mt-2 text-sm leading-relaxed text-teal-50/65">
@@ -456,7 +456,7 @@ export default function HomePage() {
             <p className="text-xs font-bold tracking-[0.2em] text-teal-300 uppercase">
               Privacy that feels personal
             </p>
-            <h2 className="mt-6 font-serif text-[clamp(3.2rem,7vw,7rem)] leading-[0.92] font-semibold tracking-[-0.05em]">
+            <h2 className="mt-6 font-display text-[clamp(3.2rem,7vw,7rem)] leading-[0.92] font-semibold tracking-[-0.05em]">
               Your health story stays centered on you.
             </h2>
             <p className="mx-auto mt-8 max-w-2xl text-lg leading-relaxed text-slate-300 sm:text-xl">
@@ -472,7 +472,7 @@ export default function HomePage() {
                 className="px-5 py-2 text-center md:py-10 lg:py-14"
               >
                 <dt className="text-sm text-slate-400">{stat.label}</dt>
-                <dd className="mt-3 font-serif text-5xl font-semibold tracking-[-0.04em] text-teal-200 sm:text-6xl lg:text-7xl">
+                <dd className="mt-3 font-display text-5xl font-semibold tracking-[-0.04em] text-teal-200 sm:text-6xl lg:text-7xl">
                   {stat.value}
                 </dd>
               </div>
@@ -489,7 +489,7 @@ export default function HomePage() {
                   className="rounded-[1.75rem] bg-white/[0.05] p-7"
                 >
                   <Icon className="size-6 text-teal-200" aria-hidden="true" />
-                  <h3 className="mt-8 font-serif text-2xl font-semibold">
+                  <h3 className="mt-8 font-display text-2xl font-semibold">
                     {principle.title}
                   </h3>
                   <p className="mt-4 text-sm leading-relaxed text-slate-400">
@@ -516,7 +516,7 @@ export default function HomePage() {
           <p className="text-primary text-xs font-bold tracking-[0.2em] uppercase">
             Made for people who carry a lot
           </p>
-          <h2 className="text-foreground mx-auto mt-6 max-w-4xl font-serif text-[clamp(3.2rem,7vw,7rem)] leading-[0.92] font-semibold tracking-[-0.05em]">
+          <h2 className="text-foreground mx-auto mt-6 max-w-4xl font-display text-[clamp(3.2rem,7vw,7rem)] leading-[0.92] font-semibold tracking-[-0.05em]">
             Carry the record that helps you move forward.
           </h2>
           <p className="text-muted-foreground mx-auto mt-8 max-w-2xl text-lg leading-relaxed sm:text-xl">

src/app/(marketing)/privacy/page.tsx

@@ -68,7 +68,7 @@ export default function PrivacyPage() {
             <ShieldCheck className="size-7" aria-hidden="true" />
           </div>
           <SectionLabel className="mt-6">Privacy</SectionLabel>
-          <h1 className="text-foreground mx-auto mt-5 max-w-4xl font-serif text-5xl leading-[1.02] font-semibold tracking-[-0.035em] sm:text-6xl lg:text-7xl">
+          <h1 className="text-foreground mx-auto mt-5 max-w-4xl font-display text-5xl leading-[1.02] font-semibold tracking-[-0.035em] sm:text-6xl lg:text-7xl">
             Your story stays yours.
           </h1>
           <p className="text-muted-foreground mx-auto mt-7 max-w-2xl text-lg leading-relaxed sm:text-xl">
@@ -89,7 +89,7 @@ export default function PrivacyPage() {
                 className="surface-panel rounded-2xl p-6"
               >
                 <Icon className="text-primary size-6" aria-hidden="true" />
-                <h2 className="text-foreground mt-5 font-serif text-2xl font-semibold">
+                <h2 className="text-foreground mt-5 font-display text-2xl font-semibold">
                   {item.title}
                 </h2>
                 <p className="text-muted-foreground mt-3 text-sm leading-relaxed">
@@ -105,7 +105,7 @@ export default function PrivacyPage() {
         <div className="mx-auto grid max-w-6xl gap-14 lg:grid-cols-[0.78fr_1.22fr] lg:items-start">
           <div>
             <SectionLabel>Plain-language commitments</SectionLabel>
-            <h2 className="text-foreground mt-4 font-serif text-4xl font-semibold tracking-tight sm:text-5xl">
+            <h2 className="text-foreground mt-4 font-display text-4xl font-semibold tracking-tight sm:text-5xl">
               Privacy should feel understandable.
             </h2>
             <p className="text-muted-foreground mt-5 leading-relaxed">
@@ -126,7 +126,7 @@ export default function PrivacyPage() {
                     <EyeOff className="size-5" aria-hidden="true" />
                   </div>
                   <div>
-                    <h3 className="text-foreground font-serif text-2xl font-semibold">
+                    <h3 className="text-foreground font-display text-2xl font-semibold">
                       {item.title}
                     </h3>
                     <p className="text-muted-foreground mt-2 text-sm leading-relaxed">
@@ -146,7 +146,7 @@ export default function PrivacyPage() {
             <p className="text-xs font-bold tracking-[0.16em] text-teal-200 uppercase">
               Your choices
             </p>
-            <h2 className="mt-5 font-serif text-4xl font-semibold tracking-tight sm:text-5xl">
+            <h2 className="mt-5 font-display text-4xl font-semibold tracking-tight sm:text-5xl">
               Keep the context that helps. Share it when it matters.
             </h2>
           </div>
@@ -170,7 +170,7 @@ export default function PrivacyPage() {
       <section className="px-4 py-18 sm:px-6">
         <div className="surface-panel mx-auto flex max-w-6xl flex-col items-start justify-between gap-6 rounded-[2rem] p-7 sm:flex-row sm:items-center sm:p-9">
           <div>
-            <h2 className="text-foreground font-serif text-3xl font-semibold">
+            <h2 className="text-foreground font-display text-3xl font-semibold">
               See how Medscribe fits into the day.
             </h2>
             <p className="text-muted-foreground mt-2 text-sm leading-relaxed">

src/app/(marketing)/walgreens/page.tsx

@@ -15,7 +15,7 @@ export default function WalgreensSummaryPage() {
       <WalgreensPrintSummary />
       <div className="print-hidden mx-auto max-w-2xl px-4 py-16 text-center sm:px-6 lg:py-24">
         <SectionLabel>Executive summary · Walgreens</SectionLabel>
-        <h1 className="text-foreground mt-4 font-serif text-4xl font-semibold tracking-tight sm:text-5xl">
+        <h1 className="text-foreground mt-4 font-display text-4xl font-semibold tracking-tight sm:text-5xl">
           The pharmacy executive summary
         </h1>
         <p className="text-muted-foreground mx-auto mt-5 max-w-xl leading-relaxed">

src/app/layout.tsx

@@ -1,7 +1,7 @@
 import "~/styles/globals.css";
 
 import { type Metadata, type Viewport } from "next";
-import { Instrument_Sans, Playfair_Display } from "next/font/google";
+import { Instrument_Sans } from "next/font/google";
 
 import { UmamiAnalytics } from "~/components/umami-analytics";
 
@@ -10,11 +10,6 @@ const instrumentSans = Instrument_Sans({
   variable: "--font-instrument-sans",
 });
 
-const playfair = Playfair_Display({
-  subsets: ["latin"],
-  variable: "--font-playfair",
-});
-
 export const metadata: Metadata = {
   title: {
     default: "Medscribe | Carry the context when care gets complicated",
@@ -53,10 +48,7 @@ export default function RootLayout({
   children,
 }: Readonly<{ children: React.ReactNode }>) {
   return (
-    <html
+    <html lang="en" className={instrumentSans.variable}>
-      lang="en"
-      className={`${instrumentSans.variable} ${playfair.variable}`}
-    >
       <body className="min-h-screen">
         {children}
         <UmamiAnalytics />

src/components/cvs-print-summary.tsx

@@ -37,7 +37,7 @@ function PrintPage({
           <div className="flex items-center gap-2.5">
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img className="h-6 w-auto" src="/medscribe-ms-logo.svg" alt="" />
-            <span className="font-serif text-[17px] font-semibold text-slate-950">
+            <span className="font-display text-[17px] font-semibold text-slate-950">
               Medscribe
             </span>
           </div>
@@ -134,7 +134,7 @@ export function CvsPrintSummary() {
         <div className="grid grid-cols-[1.16fr_0.84fr] items-start gap-9 pt-5">
           <div>
             <p className="northwell-print-label">What Medscribe is</p>
-            <h1 className="mt-4 font-serif text-[40px] leading-[1.0] font-semibold tracking-[-0.035em] text-slate-950">
+            <h1 className="mt-4 font-display text-[40px] leading-[1.0] font-semibold tracking-[-0.035em] text-slate-950">
               It captures, understands, and carries the patient&apos;s whole
               medical picture.
             </h1>
@@ -161,7 +161,7 @@ export function CvsPrintSummary() {
           <div className="mx-auto w-[202px]">
             <div>
               <Image
-                src="/screenshots/product-bezel-2026-08-24-clipped/medications-black.webp"
+                src="/screenshots/product-bezel-2026-08-24-unified-type/medications-black.webp"
                 alt="Medscribe medications screen"
                 width={1350}
                 height={2760}
@@ -175,7 +175,7 @@ export function CvsPrintSummary() {
 
         <div className="mt-8 border-t border-teal-700/25 pt-5">
           <p className="northwell-print-label">What it can do</p>
-          <h2 className="mt-2 font-serif text-[25px] leading-[1.12] font-semibold text-slate-950">
+          <h2 className="mt-2 font-display text-[25px] leading-[1.12] font-semibold text-slate-950">
             The daily tools patients need, connected in one place
           </h2>
         </div>
@@ -184,7 +184,7 @@ export function CvsPrintSummary() {
           {capabilities.map(({ icon: Icon, title, body }) => (
             <div key={title}>
               <Icon className="size-5 text-teal-700" strokeWidth={1.75} />
-              <h3 className="mt-2.5 font-serif text-[16px] leading-[1.15] font-semibold text-slate-950">
+              <h3 className="mt-2.5 font-display text-[16px] leading-[1.15] font-semibold text-slate-950">
                 {title}
               </h3>
               <p className="mt-1.5 text-[10px] leading-[1.5] text-slate-600">
@@ -210,7 +210,7 @@ export function CvsPrintSummary() {
             ],
           ].map(([title, body]) => (
             <div key={title}>
-              <p className="font-serif text-[14px] font-semibold text-slate-950">
+              <p className="font-display text-[14px] font-semibold text-slate-950">
                 {title}
               </p>
               <p className="mt-1.5 text-[9.5px] leading-[1.5] text-slate-600">
@@ -250,7 +250,7 @@ export function CvsPrintSummary() {
               className="grid grid-cols-[0.92fr_1.08fr] gap-8 border-t border-slate-200 py-3"
             >
               <div>
-                <h3 className="font-serif text-[14px] leading-[1.2] font-semibold text-slate-950">
+                <h3 className="font-display text-[14px] leading-[1.2] font-semibold text-slate-950">
                   {row.patientTitle}
                 </h3>
                 <p className="mt-1 text-[9.5px] leading-[1.45] text-slate-600">
@@ -258,7 +258,7 @@ export function CvsPrintSummary() {
                 </p>
               </div>
               <div className="border-l border-teal-600/30 pl-8">
-                <h3 className="font-serif text-[14px] leading-[1.2] font-semibold text-teal-900">
+                <h3 className="font-display text-[14px] leading-[1.2] font-semibold text-teal-900">
                   {row.cvsTitle}
                 </h3>
                 <p className="mt-1 text-[9.5px] leading-[1.45] text-slate-600">
@@ -282,7 +282,7 @@ export function CvsPrintSummary() {
         <section className="mt-6 grid grid-cols-[1.12fr_0.88fr] items-start gap-9 border-t border-slate-300 pt-5">
           <div>
             <p className="northwell-print-label">The ask</p>
-            <h3 className="mt-3 font-serif text-[20px] leading-[1.22] font-semibold text-slate-950">
+            <h3 className="mt-3 font-display text-[20px] leading-[1.22] font-semibold text-slate-950">
               A short conversation about a record that moves adherence and keeps
               refills at CVS.
             </h3>
@@ -293,7 +293,7 @@ export function CvsPrintSummary() {
           </div>
           <div>
             <p className="northwell-print-label">Who is behind it</p>
-            <h3 className="mt-3 font-serif text-[19px] font-semibold text-slate-950">
+            <h3 className="mt-3 font-display text-[19px] font-semibold text-slate-950">
               Sean O&apos;Connor
             </h3>
             <p className="mt-3 text-[10.5px] leading-[1.5] text-slate-600">

src/components/feature-showcase.tsx

@@ -26,9 +26,9 @@ const features = [
       "Review important details before relying on them",
       "Carry follow-ups into the next conversation",
     ],
-    image: "/screenshots/product-bezel-2026-08-24-clipped/visits-natural.webp",
+    image: "/screenshots/product-bezel-2026-08-24-unified-type/visits-natural.webp",
     darkImage:
-      "/screenshots/product-bezel-2026-08-24-clipped/visits-natural-dark.webp",
+      "/screenshots/product-bezel-2026-08-24-unified-type/visits-natural-dark.webp",
     alt: "Illustrative Medscribe visit detail showing a visit summary and follow-up information",
   },
   {
@@ -44,9 +44,9 @@ const features = [
       "Bring important questions to a clinician or pharmacist",
     ],
     image:
-      "/screenshots/product-bezel-2026-08-24-clipped/medication-detail-natural.webp",
+      "/screenshots/product-bezel-2026-08-24-unified-type/medication-detail-natural.webp",
     darkImage:
-      "/screenshots/product-bezel-2026-08-24-clipped/medication-detail-natural-dark.webp",
+      "/screenshots/product-bezel-2026-08-24-unified-type/medication-detail-natural-dark.webp",
     alt: "Illustrative Medscribe medication detail with schedule and medication information",
   },
   {
@@ -62,9 +62,9 @@ const features = [
       "See whether a doctor, prescriber, or pharmacist may be helpful",
     ],
     image:
-      "/screenshots/product-bezel-2026-08-24-clipped/ask-questions-black.webp",
+      "/screenshots/product-bezel-2026-08-24-unified-type/ask-questions-black.webp",
     darkImage:
-      "/screenshots/product-bezel-2026-08-24-clipped/ask-questions-black-dark.webp",
+      "/screenshots/product-bezel-2026-08-24-unified-type/ask-questions-black-dark.webp",
     alt: "Illustrative Medscribe answer with medication context and a safety boundary",
   },
   {
@@ -80,9 +80,9 @@ const features = [
       "It complements—not replaces—clinical verification",
     ],
     image:
-      "/screenshots/product-bezel-2026-08-24-clipped/know-me-natural.webp",
+      "/screenshots/product-bezel-2026-08-24-unified-type/know-me-natural.webp",
     darkImage:
-      "/screenshots/product-bezel-2026-08-24-clipped/know-me-natural-dark.webp",
+      "/screenshots/product-bezel-2026-08-24-unified-type/know-me-natural-dark.webp",
     alt: "Illustrative Medscribe Know Me handoff with active medications and review state",
   },
 ] as const;
@@ -167,7 +167,7 @@ export function FeatureShowcase() {
           <p className="text-primary text-xs font-bold tracking-[0.14em] uppercase">
             Medscribe
           </p>
-          <h3 className="text-foreground mt-3 max-w-xl font-serif text-3xl font-semibold tracking-tight sm:text-4xl">
+          <h3 className="text-foreground mt-3 max-w-xl font-display text-3xl font-semibold tracking-tight sm:text-4xl">
             {active.title}
           </h3>
           <p className="text-muted-foreground mt-4 max-w-xl leading-relaxed">

src/components/login-form.tsx

@@ -59,7 +59,7 @@ export function LoginForm({ redirectTo }: LoginFormProps) {
         <CardHeader className="items-center space-y-4 text-center">
           <MedscribeLogo className="h-8 w-[100px] text-foreground" />
           <div className="space-y-2">
-            <CardTitle className="font-serif text-2xl">
+            <CardTitle className="font-display text-2xl">
               Enter site password
             </CardTitle>
             <CardDescription>

src/components/northwell-print-summary.tsx

@@ -19,7 +19,7 @@ function PrintPage({
           <div className="flex items-center gap-2.5">
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img className="h-6 w-auto" src="/medscribe-ms-logo.svg" alt="" />
-            <span className="font-serif text-[17px] font-semibold text-slate-950">
+            <span className="font-display text-[17px] font-semibold text-slate-950">
               Medscribe
             </span>
           </div>
@@ -101,7 +101,7 @@ export function NorthwellPrintSummary() {
         <div className="grid grid-cols-[1.16fr_0.84fr] items-start gap-9 pt-5">
           <div>
             <p className="northwell-print-label">The patient-owned record</p>
-            <h1 className="mt-4 font-serif text-[44px] leading-[0.98] font-semibold tracking-[-0.035em] text-slate-950">
+            <h1 className="mt-4 font-display text-[44px] leading-[0.98] font-semibold tracking-[-0.035em] text-slate-950">
               Be known when care gets complicated
             </h1>
             <p className="mt-5 text-[16px] leading-[1.55] text-slate-600">
@@ -127,7 +127,7 @@ export function NorthwellPrintSummary() {
           <div className="mx-auto w-[210px]">
             <div>
               <Image
-                src="/screenshots/product-bezel-2026-08-24-clipped/home-black.webp"
+                src="/screenshots/product-bezel-2026-08-24-unified-type/home-black.webp"
                 alt="Medscribe home screen"
                 width={1350}
                 height={2760}
@@ -141,7 +141,7 @@ export function NorthwellPrintSummary() {
 
         <div className="mt-7 border-t border-teal-700/25 pt-5">
           <p className="northwell-print-label">The job</p>
-          <p className="mt-3 font-serif text-[25px] leading-[1.2] font-semibold text-slate-950">
+          <p className="mt-3 font-display text-[25px] leading-[1.2] font-semibold text-slate-950">
             One trustworthy picture that survives fragmented care, missed
             appointments, secondhand updates, and emergency handoffs.
           </p>
@@ -163,7 +163,7 @@ export function NorthwellPrintSummary() {
             ],
           ].map(([title, body]) => (
             <div key={title} className="pr-3">
-              <p className="font-serif text-[16px] font-semibold text-slate-950">
+              <p className="font-display text-[16px] font-semibold text-slate-950">
                 {title}
               </p>
               <p className="mt-2 text-[10.5px] leading-[1.5] text-slate-600">
@@ -210,7 +210,7 @@ export function NorthwellPrintSummary() {
                 <span className="text-[10px] font-bold text-teal-700">
                   0{index + 1}
                 </span>
-                <h3 className="mt-2 font-serif text-[17px] font-semibold text-slate-950">
+                <h3 className="mt-2 font-display text-[17px] font-semibold text-slate-950">
                   {title}
                 </h3>
                 <p className="mt-2 text-[10.5px] leading-[1.5] text-slate-600">
@@ -229,7 +229,7 @@ export function NorthwellPrintSummary() {
           <div className="mt-4 grid grid-cols-2 gap-x-7 gap-y-2">
             {people.map(([title, body]) => (
               <div key={title} className="min-h-[70px] pr-4">
-                <h3 className="font-serif text-[15px] font-semibold text-slate-950">
+                <h3 className="font-display text-[15px] font-semibold text-slate-950">
                   {title}
                 </h3>
                 <p className="mt-1.5 text-[10.5px] leading-[1.45] text-slate-600">
@@ -242,7 +242,7 @@ export function NorthwellPrintSummary() {
 
         <section className="mt-7 border-l-4 border-teal-600 bg-teal-50/50 py-5 pr-5 pl-6">
           <p className="northwell-print-label">What makes it different</p>
-          <h2 className="mt-3 font-serif text-[24px] font-semibold text-slate-950">
+          <h2 className="mt-3 font-display text-[24px] font-semibold text-slate-950">
             Every alternative owns a slice. Medscribe owns the whole job.
           </h2>
           <div className="mt-3 grid grid-cols-2 gap-6 text-[10.5px] leading-[1.55] text-slate-600">
@@ -294,7 +294,7 @@ export function NorthwellPrintSummary() {
                 <span className="text-[10px] font-bold text-teal-700">
                   0{index + 1}
                 </span>
-                <h3 className="font-serif text-[16px] font-semibold text-slate-950">
+                <h3 className="font-display text-[16px] font-semibold text-slate-950">
                   {title}
                 </h3>
                 <p className="mt-2 text-[10px] leading-[1.55] text-slate-600">
@@ -307,7 +307,7 @@ export function NorthwellPrintSummary() {
 
         <section className="mt-7 bg-teal-50/60 px-6 py-5">
           <p className="northwell-print-label">The touchstone</p>
-          <h2 className="mt-2 font-serif text-[24px] leading-[1.18] font-semibold text-slate-950">
+          <h2 className="mt-2 font-display text-[24px] leading-[1.18] font-semibold text-slate-950">
             MyChart organizes the appointment. Medscribe helps the patient live
             the plan.
           </h2>
@@ -323,7 +323,7 @@ export function NorthwellPrintSummary() {
           <p className="northwell-print-label">How it fits the stack</p>
           <div className="mt-4 grid grid-cols-2 gap-9">
             <div>
-              <h3 className="font-serif text-[16px] font-semibold text-slate-950">
+              <h3 className="font-display text-[16px] font-semibold text-slate-950">
                 Epic remains the record of care
               </h3>
               <p className="mt-2 text-[10.5px] leading-[1.55] text-slate-600">
@@ -333,7 +333,7 @@ export function NorthwellPrintSummary() {
               </p>
             </div>
             <div>
-              <h3 className="font-serif text-[16px] font-semibold text-slate-950">
+              <h3 className="font-display text-[16px] font-semibold text-slate-950">
                 The patient carries personal context
               </h3>
               <p className="mt-2 text-[10.5px] leading-[1.55] text-slate-600">
@@ -348,7 +348,7 @@ export function NorthwellPrintSummary() {
         <section className="mt-6 grid grid-cols-[1.12fr_0.88fr] gap-9 border-t border-slate-300 pt-5">
           <div>
             <p className="northwell-print-label">The marketing value</p>
-            <h3 className="mt-3 font-serif text-[19px] leading-[1.25] font-semibold text-slate-950">
+            <h3 className="mt-3 font-display text-[19px] leading-[1.25] font-semibold text-slate-950">
               A patient promise people can understand
             </h3>
             <p className="mt-2 text-[10.5px] leading-[1.5] text-slate-600">
@@ -360,7 +360,7 @@ export function NorthwellPrintSummary() {
           </div>
           <div>
             <p className="northwell-print-label">Built and live</p>
-            <h3 className="mt-3 font-serif text-[19px] font-semibold text-slate-950">
+            <h3 className="mt-3 font-display text-[19px] font-semibold text-slate-950">
               Sean O&apos;Connor
             </h3>
             <p className="mt-3 text-[10.5px] leading-[1.5] text-slate-600">

src/components/phone-mockup.tsx

@@ -20,7 +20,10 @@ export function PhoneMockup({
   width = 280,
 }: PhoneMockupProps) {
   return (
-    <div className={cn("mx-auto", className)} style={{ width }}>
+    <div
+      className={cn("mx-auto", className)}
+      style={{ width: `min(${width}px, 78vw)` }}
+    >
       <ProductDevice
         src={src}
         darkSrc={darkSrc}

src/components/product-device.tsx

@@ -12,9 +12,10 @@ type ProductDeviceProps = {
 };
 
 /**
- * A precomposited product capture using the licensed device bezels in
+ * A precomposited iPhone 17 Pro capture using the calibrated Silver bezel in
- * `public/screenshots/product-bezel-2026-08-24-clipped`. Keeping the frame in the source
+ * `public/screenshots/product-bezel-2026-08-24-unified-type`. Keeping the frame in
- * image preserves the bezel details without adding layout or client-side work.
+ * the source image preserves its fine edge detail without adding layout or
+ * client-side work.
  */
 export function ProductDevice({
   src,

src/components/site-footer.tsx

@@ -18,7 +18,7 @@ export function SiteFooter() {
             className="text-foreground focus-visible:ring-primary/40 inline-flex items-center gap-2.5 rounded-md outline-none focus-visible:ring-2"
           >
             <MedscribeLogo className="h-7 w-auto" />
-            <span className="font-serif text-lg font-semibold">Medscribe</span>
+            <span className="font-display text-lg font-semibold">Medscribe</span>
           </Link>
           <p className="text-muted-foreground mt-4 max-w-md leading-relaxed">
             A private, patient-controlled way to keep visits, medications, and

src/components/site-header.tsx

@@ -50,7 +50,7 @@ export function SiteHeader() {
           aria-label="Medscribe home"
         >
           <MedscribeLogo className="h-7 w-auto" />
-          <span className="font-serif text-lg font-semibold tracking-tight">
+          <span className="font-display text-lg font-semibold tracking-tight">
             Medscribe
           </span>
         </Link>

src/components/ui/card.tsx

@@ -21,7 +21,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
 function CardTitle({ className, ...props }: React.ComponentProps<"h3">) {
   return (
     <h3
-      className={cn("font-serif text-lg font-semibold leading-tight", className)}
+      className={cn("font-display text-lg font-semibold leading-tight", className)}
       {...props}
     />
   );

src/components/walgreens-print-summary.tsx

@@ -37,7 +37,7 @@ function PrintPage({
           <div className="flex items-center gap-2.5">
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img className="h-6 w-auto" src="/medscribe-ms-logo.svg" alt="" />
-            <span className="font-serif text-[17px] font-semibold text-slate-950">
+            <span className="font-display text-[17px] font-semibold text-slate-950">
               Medscribe
             </span>
           </div>
@@ -134,7 +134,7 @@ export function WalgreensPrintSummary() {
         <div className="grid grid-cols-[1.16fr_0.84fr] items-start gap-9 pt-5">
           <div>
             <p className="northwell-print-label">What Medscribe is</p>
-            <h1 className="mt-4 font-serif text-[40px] leading-[1.0] font-semibold tracking-[-0.035em] text-slate-950">
+            <h1 className="mt-4 font-display text-[40px] leading-[1.0] font-semibold tracking-[-0.035em] text-slate-950">
               It captures, understands, and carries the patient&apos;s whole
               medical picture.
             </h1>
@@ -161,7 +161,7 @@ export function WalgreensPrintSummary() {
           <div className="mx-auto w-[202px]">
             <div>
               <Image
-                src="/screenshots/product-bezel-2026-08-24-clipped/medications-black.webp"
+                src="/screenshots/product-bezel-2026-08-24-unified-type/medications-black.webp"
                 alt="Medscribe medications screen"
                 width={1350}
                 height={2760}
@@ -175,7 +175,7 @@ export function WalgreensPrintSummary() {
 
         <div className="mt-8 border-t border-teal-700/25 pt-5">
           <p className="northwell-print-label">What it can do</p>
-          <h2 className="mt-2 font-serif text-[25px] leading-[1.12] font-semibold text-slate-950">
+          <h2 className="mt-2 font-display text-[25px] leading-[1.12] font-semibold text-slate-950">
             The daily tools patients need, connected in one place
           </h2>
         </div>
@@ -184,7 +184,7 @@ export function WalgreensPrintSummary() {
           {capabilities.map(({ icon: Icon, title, body }) => (
             <div key={title}>
               <Icon className="size-5 text-teal-700" strokeWidth={1.75} />
-              <h3 className="mt-2.5 font-serif text-[16px] leading-[1.15] font-semibold text-slate-950">
+              <h3 className="mt-2.5 font-display text-[16px] leading-[1.15] font-semibold text-slate-950">
                 {title}
               </h3>
               <p className="mt-1.5 text-[10px] leading-[1.5] text-slate-600">
@@ -210,7 +210,7 @@ export function WalgreensPrintSummary() {
             ],
           ].map(([title, body]) => (
             <div key={title}>
-              <p className="font-serif text-[14px] font-semibold text-slate-950">
+              <p className="font-display text-[14px] font-semibold text-slate-950">
                 {title}
               </p>
               <p className="mt-1.5 text-[9.5px] leading-[1.5] text-slate-600">
@@ -250,7 +250,7 @@ export function WalgreensPrintSummary() {
               className="grid grid-cols-[0.92fr_1.08fr] gap-8 border-t border-slate-200 py-3"
             >
               <div>
-                <h3 className="font-serif text-[14px] leading-[1.2] font-semibold text-slate-950">
+                <h3 className="font-display text-[14px] leading-[1.2] font-semibold text-slate-950">
                   {row.patientTitle}
                 </h3>
                 <p className="mt-1 text-[9.5px] leading-[1.45] text-slate-600">
@@ -258,7 +258,7 @@ export function WalgreensPrintSummary() {
                 </p>
               </div>
               <div className="border-l border-teal-600/30 pl-8">
-                <h3 className="font-serif text-[14px] leading-[1.2] font-semibold text-teal-900">
+                <h3 className="font-display text-[14px] leading-[1.2] font-semibold text-teal-900">
                   {row.bizTitle}
                 </h3>
                 <p className="mt-1 text-[9.5px] leading-[1.45] text-slate-600">
@@ -282,7 +282,7 @@ export function WalgreensPrintSummary() {
         <section className="mt-6 grid grid-cols-[1.12fr_0.88fr] items-start gap-9 border-t border-slate-300 pt-5">
           <div>
             <p className="northwell-print-label">The ask</p>
-            <h3 className="mt-3 font-serif text-[20px] leading-[1.22] font-semibold text-slate-950">
+            <h3 className="mt-3 font-display text-[20px] leading-[1.22] font-semibold text-slate-950">
               A short conversation about a record that moves adherence and keeps
               refills at Walgreens.
             </h3>
@@ -294,7 +294,7 @@ export function WalgreensPrintSummary() {
           </div>
           <div>
             <p className="northwell-print-label">Who is behind it</p>
-            <h3 className="mt-3 font-serif text-[19px] font-semibold text-slate-950">
+            <h3 className="mt-3 font-display text-[19px] font-semibold text-slate-950">
               Sean O&apos;Connor
             </h3>
             <p className="mt-3 text-[10.5px] leading-[1.5] text-slate-600">

src/styles/globals.css

@@ -3,7 +3,8 @@
 @theme {
   --font-sans:
     var(--font-instrument-sans), ui-sans-serif, system-ui, sans-serif;
-  --font-serif: var(--font-playfair), ui-serif, Georgia, serif;
+  --font-display:
+    var(--font-instrument-sans), ui-sans-serif, system-ui, sans-serif;
 
   /* Calm, layered palette shared with the current iOS visual language. */
   --color-canvas: #f4f9f7;
@@ -479,7 +480,8 @@
 
   .northwell-print-title {
     margin-top: 0.12in;
-    font-family: var(--font-playfair), Georgia, serif;
+    font-family: var(--font-instrument-sans), ui-sans-serif, system-ui,
+      sans-serif;
     font-size: 28px;
     line-height: 1.08;
     font-weight: 600;