Show the native Questions workflow

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

@@ -11,7 +11,6 @@ import {
 import Link from "next/link";
 
 import { PhoneMockup } from "~/components/phone-mockup";
-import { QuestionsPreview } from "~/components/questions-preview";
 import { SectionLabel } from "~/components/section-label";
 import { Badge } from "~/components/ui/badge";
 import { Button } from "~/components/ui/button";
@@ -190,7 +189,17 @@ export default function HowItWorksPage() {
                 important question does not disappear in the moment.
               </p>
             </div>
-            <QuestionsPreview className="justify-self-center lg:order-1 lg:w-full lg:max-w-md" />
+            <div className="justify-self-center py-2 lg:order-1">
+              <PhoneMockup
+                src="/screenshots/product-bezel-2026-08-24-clipped/questions-black.webp"
+                darkSrc="/screenshots/product-bezel-2026-08-24-clipped/questions-black-dark.webp"
+                alt="Illustrative Medscribe Questions to ask interface"
+                width={235}
+              />
+              <p className="text-muted-foreground mt-4 text-center text-xs">
+                Illustrative profile · Medscribe interface
+              </p>
+            </div>
           </div>
 
           <div className="grid gap-12 lg:grid-cols-2 lg:items-center">

src/app/(marketing)/page.tsx

@@ -12,7 +12,6 @@ import {
 import Link from "next/link";
 
 import { ProductDevice } from "~/components/product-device";
-import { QuestionsPreview } from "~/components/questions-preview";
 import { Button } from "~/components/ui/button";
 import { productClaims, productRelease } from "~/content/product";
 import { ACCESS_INVITE_MAILTO } from "~/lib/access";
@@ -331,17 +330,25 @@ export default function HomePage() {
               </p>
             </div>
           </div>
-          <div className="mx-auto grid w-full max-w-[43rem] items-center justify-center gap-2 sm:grid-cols-[minmax(0,18rem)_minmax(0,22rem)] lg:justify-end">
+          <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-black.webp"
+                src="/screenshots/product-bezel-2026-08-24-clipped/ask-questions-black.webp"
-                darkSrc="/screenshots/product-bezel-2026-08-24-clipped/ask-black-dark.webp"
+                darkSrc="/screenshots/product-bezel-2026-08-24-clipped/ask-questions-black-dark.webp"
                 alt="Medscribe Ask response shown in a black titanium iPhone product bezel"
                 className="pitch-device-motion pitch-device-drift-left"
                 sizes="(min-width: 640px) 288px, 72vw"
               />
             </div>
-            <QuestionsPreview className="pitch-card-motion w-full max-w-[22rem]" />
+            <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"
+                darkSrc="/screenshots/product-bezel-2026-08-24-clipped/questions-black-dark.webp"
+                alt="Medscribe Questions to ask interface shown in a black titanium iPhone product bezel"
+                className="pitch-device-motion pitch-device-drift-right"
+                sizes="(min-width: 640px) 288px, 72vw"
+              />
+            </div>
           </div>
         </div>
       </section>

src/components/feature-showcase.tsx

@@ -61,9 +61,10 @@ const features = [
       "Keep a ready list for the next appointment",
       "See whether a doctor, prescriber, or pharmacist may be helpful",
     ],
-    image: "/screenshots/product-bezel-2026-08-24-clipped/ask-black.webp",
+    image:
+      "/screenshots/product-bezel-2026-08-24-clipped/ask-questions-black.webp",
     darkImage:
-      "/screenshots/product-bezel-2026-08-24-clipped/ask-black-dark.webp",
+      "/screenshots/product-bezel-2026-08-24-clipped/ask-questions-black-dark.webp",
     alt: "Illustrative Medscribe answer with medication context and a safety boundary",
   },
   {

src/components/questions-preview.tsx

@@ -1,76 +0,0 @@
-import { ArrowUpRight, Check, MessageCircleQuestion, Plus } from "lucide-react";
-
-import { cn } from "~/lib/utils";
-
-const questions = [
-  {
-    question: "Could this change be related to my medication?",
-    recipient: "Prescriber",
-  },
-  {
-    question: "What should I expect at the follow-up?",
-    recipient: "Care team",
-  },
-  {
-    question: "Is this still the right time to take it?",
-    recipient: "Pharmacist",
-  },
-] as const;
-
-export function QuestionsPreview({ className }: { className?: string }) {
-  return (
-    <div
-      className={cn(
-        "surface-panel overflow-hidden rounded-[2rem] p-5 sm:p-6",
-        className,
-      )}
-      aria-label="Illustrative Questions list in Medscribe"
-    >
-      <div className="flex items-start justify-between gap-5 px-1 pb-5">
-        <div>
-          <p className="text-primary text-xs font-bold tracking-[0.16em] uppercase">
-            Questions
-          </p>
-          <h3 className="text-foreground mt-2 font-serif text-2xl font-semibold tracking-[-0.02em]">
-            Ready for the conversation
-          </h3>
-        </div>
-        <span className="bg-primary-light text-primary flex size-10 shrink-0 items-center justify-center rounded-full">
-          <MessageCircleQuestion className="size-5" aria-hidden="true" />
-        </span>
-      </div>
-
-      <div className="bg-canvas/70 overflow-hidden rounded-[1.35rem]">
-        {questions.map((item, index) => (
-          <div
-            key={item.question}
-            className={cn(
-              "grid grid-cols-[1fr_auto] gap-4 px-4 py-4 sm:px-5",
-              index > 0 && "border-border-soft/55 border-t",
-            )}
-          >
-            <div className="min-w-0">
-              <p className="text-foreground text-sm leading-snug font-semibold text-pretty">
-                {item.question}
-              </p>
-              <p className="text-muted-foreground mt-2 flex items-center gap-1.5 text-xs">
-                Ask your {item.recipient.toLowerCase()}
-                <ArrowUpRight className="size-3" aria-hidden="true" />
-              </p>
-            </div>
-            <span className="bg-success-light text-success mt-0.5 flex size-6 items-center justify-center rounded-full">
-              <Check className="size-3.5" aria-hidden="true" />
-            </span>
-          </div>
-        ))}
-      </div>
-
-      <div className="text-muted-foreground mt-5 flex items-center gap-2 px-1 text-xs leading-relaxed">
-        <span className="bg-primary-light text-primary flex size-7 shrink-0 items-center justify-center rounded-full">
-          <Plus className="size-3.5" aria-hidden="true" />
-        </span>
-        Save a question the moment it comes to you.
-      </div>
-    </div>
-  );
-}