Polish website flow and add Questions story

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

@@ -78,7 +78,7 @@ export default function AccessPage() {
             </p>
           </div>
 
-          <div className="glass-panel rounded-[2rem] p-7 sm:p-9">
+          <div className="surface-panel rounded-[2rem] p-7 sm:p-9">
             <div className="bg-primary-light text-primary flex size-12 items-center justify-center rounded-xl">
               <Mail className="size-6" aria-hidden="true" />
             </div>
@@ -104,7 +104,7 @@ export default function AccessPage() {
         </div>
       </section>
 
-      <section className="brand-warm border-border-soft/70 border-y px-4 py-20 sm:px-6 lg:py-24">
+      <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">
@@ -118,7 +118,7 @@ export default function AccessPage() {
               return (
                 <article
                   key={item.title}
-                  className="glass-panel rounded-2xl p-6"
+                  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">
@@ -147,7 +147,7 @@ export default function AccessPage() {
               return (
                 <article
                   key={item.title}
-                  className="glass-panel rounded-2xl p-6"
+                  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">
@@ -161,7 +161,7 @@ export default function AccessPage() {
             })}
           </div>
 
-          <div className="brand-night mt-14 rounded-[2rem] p-7 text-white shadow-[0_28px_70px_rgba(7,20,21,0.2)] sm:p-10">
+          <div className="night-card mt-14 rounded-[2rem] p-7 text-white sm:p-10">
             <p className="text-xs font-bold tracking-[0.14em] text-teal-100 uppercase">
               Keep your care team in the loop
             </p>

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

@@ -1,16 +1,17 @@
 import type { Metadata } from "next";
 import {
   ArrowRight,
-  Camera,
+  CalendarDays,
   Check,
-  FileText,
-  Keyboard,
-  Mic,
+  ListChecks,
+  MessageCircleQuestion,
+  RotateCcw,
   ShieldAlert,
 } from "lucide-react";
 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";
@@ -21,26 +22,26 @@ export const metadata: Metadata = {
     "See how Medscribe brings visits, medication routines, and important context into one reviewable record.",
 };
 
-const inputs = [
+const dailyRhythm = [
   {
-    icon: Keyboard,
-    title: "Type or paste",
-    body: "Start from notes you already have and keep the original details easy to revisit.",
+    icon: CalendarDays,
+    title: "Start with the moment",
+    body: "Give each visit a clear place so the details remain easy to find later.",
   },
   {
-    icon: Camera,
-    title: "Import a screenshot",
-    body: "Bring in a portal summary or prescription label, then correct extracted fields.",
+    icon: ListChecks,
+    title: "Review what matters",
+    body: "Check the useful details and keep your own judgment in the loop.",
   },
   {
-    icon: FileText,
-    title: "Attach a document",
-    body: "Bring a photo or document into a guided review workflow.",
+    icon: MessageCircleQuestion,
+    title: "Keep the next question",
+    body: "Save what you want to ask while it is still fresh in your mind.",
   },
   {
-    icon: Mic,
-    title: "Record with consent",
-    body: "With permission, turn optional visit audio into notes you can review.",
+    icon: RotateCcw,
+    title: "Return when needed",
+    body: "Revisit the same picture before the next appointment or handoff.",
   },
 ] as const;
 
@@ -68,20 +69,20 @@ export default function HowItWorksPage() {
         </div>
       </section>
 
-      <section className="brand-warm border-border-soft/70 border-y px-4 py-18 sm:px-6 lg:py-22">
+      <section className="section-wash px-4 py-18 sm:px-6 lg:py-22">
         <div className="mx-auto max-w-6xl">
-          <SectionLabel>Start where the information is</SectionLabel>
+          <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">
-            Four ways in. One clear place to review.
+            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">
-            {inputs.map((item, index) => {
+            {dailyRhythm.map((item, index) => {
               const Icon = item.icon;
 
               return (
                 <article
                   key={item.title}
-                  className="glass-panel rounded-2xl p-6"
+                  className="surface-panel rounded-2xl p-6"
                 >
                   <div className="flex items-center justify-between">
                     <span className="bg-primary-light text-primary flex size-11 items-center justify-center rounded-xl">
@@ -101,14 +102,14 @@ export default function HowItWorksPage() {
               );
             })}
           </div>
-          <div className="border-primary/20 bg-primary-light/45 mt-6 flex gap-3 rounded-2xl border p-5">
+          <div className="surface-panel mt-6 flex gap-3 rounded-2xl p-5">
             <Check
               className="text-primary mt-0.5 size-5 shrink-0"
               aria-hidden="true"
             />
             <p className="text-foreground text-sm leading-relaxed">
-              You review summaries and medication details before they become
-              part of the record you carry.
+              You review the details before they become part of the picture you
+              carry.
             </p>
           </div>
         </div>
@@ -126,13 +127,13 @@ export default function HowItWorksPage() {
                 The visit remains available beside the summary so you can check
                 wording, follow-ups, and the details you want to remember.
               </p>
-              <p className="glass-panel text-muted-foreground mt-5 rounded-2xl p-5 text-sm leading-relaxed">
+              <p className="surface-panel text-muted-foreground mt-5 rounded-2xl p-5 text-sm leading-relaxed">
                 <strong className="text-foreground">Stay oriented:</strong> move
                 between the transcript and summary whenever you want the fuller
                 context.
               </p>
             </div>
-            <div className="bg-primary-light/45 justify-self-center rounded-[2.5rem] p-7">
+            <div className="section-wash justify-self-center rounded-[2.5rem] p-7">
               <PhoneMockup
                 src="/screenshots/product-bezel-2026-08-23-complete/summary-reviewed-natural.webp"
                 darkSrc="/screenshots/product-bezel-2026-08-23-complete/summary-reviewed-natural-dark.webp"
@@ -146,7 +147,7 @@ export default function HowItWorksPage() {
           </div>
 
           <div className="grid gap-12 lg:grid-cols-2 lg:items-center">
-            <div className="brand-warm justify-self-center rounded-[2.5rem] p-7 lg:order-1">
+            <div className="section-wash justify-self-center rounded-[2.5rem] p-7 lg:order-1">
               <PhoneMockup
                 src="/screenshots/product-bezel-2026-08-23-complete/medication-detail-natural.webp"
                 darkSrc="/screenshots/product-bezel-2026-08-23-complete/medication-detail-natural-dark.webp"
@@ -167,13 +168,31 @@ export default function HowItWorksPage() {
                 information together without hunting through separate notes.
               </p>
               <p className="text-muted-foreground mt-5 text-sm leading-relaxed">
-                Medscribe records timing supplied by a label, pharmacist, or
-                prescribing team. It does not calculate or shift medication
-                times.
+                Keep medication timing easy to read and confirm changes with
+                the care professional who gave you the instructions.
               </p>
             </div>
           </div>
 
+          <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">
+                Save it while it is on your mind.
+              </h2>
+              <p className="text-muted-foreground mt-5 leading-relaxed">
+                Add questions as they come up between visits. If Ask reaches a
+                question that needs professional judgment, Medscribe can offer
+                to save it and suggest who may be helpful to ask.
+              </p>
+              <p className="text-muted-foreground mt-5 text-sm leading-relaxed">
+                Your list is ready when the appointment starts, so the most
+                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>
+
           <div className="grid gap-12 lg:grid-cols-2 lg:items-center">
             <div>
               <SectionLabel>Prepare the handoff</SectionLabel>
@@ -190,7 +209,7 @@ export default function HowItWorksPage() {
                 it, and when the conversation happens.
               </p>
             </div>
-            <div className="bg-primary-light/45 justify-self-center rounded-[2.5rem] p-7">
+            <div className="section-wash justify-self-center rounded-[2.5rem] p-7">
               <PhoneMockup
                 src="/screenshots/product-bezel-2026-08-23-complete/know-me-natural.webp"
                 darkSrc="/screenshots/product-bezel-2026-08-23-complete/know-me-natural-dark.webp"
@@ -205,7 +224,7 @@ export default function HowItWorksPage() {
         </div>
       </section>
 
-      <section className="brand-warm border-border-soft/70 border-t px-4 py-20 sm:px-6">
+      <section className="section-wash px-4 py-20 sm:px-6">
         <div className="mx-auto grid max-w-6xl gap-12 lg:grid-cols-2">
           <div>
             <div className="bg-primary-light text-primary flex size-12 items-center justify-center rounded-xl">
@@ -222,7 +241,7 @@ export default function HowItWorksPage() {
             {boundaries.map((item) => (
               <li
                 key={item}
-                className="glass-panel text-foreground flex gap-3 rounded-2xl p-4 text-sm leading-relaxed"
+                className="surface-panel text-foreground flex gap-3 rounded-2xl p-4 text-sm leading-relaxed"
               >
                 <Check
                   className="text-primary mt-0.5 size-5 shrink-0"
@@ -236,7 +255,7 @@ export default function HowItWorksPage() {
       </section>
 
       <section className="px-4 py-20 sm:px-6">
-        <div className="brand-night mx-auto flex max-w-6xl flex-col items-start justify-between gap-7 rounded-[2rem] px-7 py-10 text-white shadow-[0_28px_70px_rgba(7,20,21,0.2)] sm:px-10 md:flex-row md:items-center">
+        <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">
               Privacy should feel understandable.

src/app/(marketing)/page.tsx

@@ -12,6 +12,7 @@ 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";
@@ -99,9 +100,7 @@ const accessFit = [
 export default function HomePage() {
   return (
     <>
-      <section className="relative isolate min-h-[calc(100svh-4rem)] overflow-hidden px-4 pt-14 sm:px-6 sm:pt-20 lg:pt-24">
-        <div className="bg-primary-light/60 absolute -top-32 left-1/2 -z-10 h-[42rem] w-[74rem] max-w-[125vw] -translate-x-1/2 rounded-full blur-3xl" />
-        <div className="absolute top-48 -right-28 -z-10 size-[28rem] rounded-full bg-[#d9ecff]/35 blur-3xl dark:bg-[#123d5b]/28" />
+      <section className="section-wash relative isolate min-h-[calc(100svh-4rem)] overflow-hidden px-4 pt-14 sm:px-6 sm:pt-20 lg:pt-24">
         <div className="mx-auto max-w-7xl text-center">
           <div className="animate-fade-in-up flex items-center justify-center gap-3">
             <span className="bg-success-light text-success rounded-full px-3 py-1.5 text-xs font-bold tracking-[0.12em] uppercase">
@@ -158,7 +157,7 @@ export default function HomePage() {
         </p>
       </section>
 
-      <section className="pitch-lazy brand-warm border-border-soft/70 flex min-h-[78svh] items-center border-y px-4 py-24 sm:px-6 lg:py-32">
+      <section className="pitch-lazy section-wash flex min-h-[78svh] items-center px-4 py-24 sm:px-6 lg:py-32">
         <div className="pitch-copy-motion mx-auto max-w-6xl text-center">
           <p className="text-primary text-xs font-bold tracking-[0.2em] uppercase">
             The connected picture
@@ -184,11 +183,11 @@ export default function HomePage() {
               Turn what happened into something you can check.
             </h2>
             <p className="text-muted-foreground mt-7 max-w-lg text-lg leading-relaxed">
-              Bring in typed notes, a portal screenshot, a document, or an
-              optional consent-gated recording. You decide what is useful and
-              what belongs in your record.
+              Bring the important details from a visit into one reviewable
+              record. You decide what is useful and what belongs in the picture
+              you carry forward.
             </p>
-            <div className="border-primary/25 bg-primary-light/35 mt-8 max-w-lg rounded-2xl border p-5">
+            <div className="surface-panel mt-8 max-w-lg rounded-2xl p-5">
               <p className="text-foreground text-sm leading-relaxed">
                 <strong className="font-semibold">The safety loop:</strong>{" "}
                 review generated information before acting. Medscribe does not
@@ -201,7 +200,7 @@ export default function HomePage() {
             {visitMoments.map((moment, index) => (
               <li
                 key={moment.number}
-                className="pitch-card-motion glass-panel relative overflow-hidden rounded-[2.5rem] px-5 pt-8 sm:px-10 sm:pt-10"
+                className="pitch-card-motion surface-panel relative overflow-hidden rounded-[2.5rem] px-5 pt-8 sm:px-10 sm:pt-10"
               >
                 <div className="relative z-10 max-w-xl">
                   <div className="flex items-center gap-3">
@@ -272,7 +271,7 @@ export default function HomePage() {
               </div>
             </div>
 
-            <div className="grid gap-px overflow-hidden rounded-[2rem] border border-white/12 bg-white/12">
+            <div className="overflow-hidden rounded-[2rem] bg-white/[0.055]">
               {[
                 {
                   title: "Keep schedules easy to understand",
@@ -289,7 +288,7 @@ export default function HomePage() {
               ].map((item) => (
                 <article
                   key={item.title}
-                  className="bg-[#0c2727]/88 p-7 backdrop-blur-sm sm:p-9"
+                  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">
@@ -305,32 +304,44 @@ export default function HomePage() {
         </div>
       </section>
 
-      <section className="pitch-lazy brand-warm px-4 py-24 sm:px-6 lg:py-36">
-        <div className="mx-auto grid max-w-7xl items-center gap-14 lg:grid-cols-[1fr_0.9fr] lg:gap-24">
-          <div className="pitch-copy-motion order-2 lg:order-1">
+      <section className="pitch-lazy section-wash overflow-hidden px-4 py-24 sm:px-6 lg:py-36">
+        <div
+          id="questions"
+          className="mx-auto grid max-w-7xl scroll-mt-4 items-center gap-14 lg:grid-cols-[0.82fr_1.18fr] lg:gap-20"
+        >
+          <div className="pitch-copy-motion">
             <p className="text-primary text-xs font-bold tracking-[0.2em] uppercase">
-              Ask from the record
+              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]">
-              Better questions begin with your context.
+              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">
-              Ask about a visit or medication using the context you have already
-              collected. Answers help you prepare for a clearer conversation.
-            </p>
-            <p className="border-primary/35 text-muted-foreground mt-7 max-w-xl border-l-2 pl-5 text-sm leading-relaxed">
-              Informational only. Medication changes still belong with a
-              clinician or pharmacist.
+              Ask about a visit or medication. When the answer needs a care
+              professional&apos;s judgment, Medscribe can suggest saving the
+              question and who may be helpful to ask.
             </p>
+            <div className="text-muted-foreground mt-7 flex max-w-xl items-start gap-3 text-sm leading-relaxed">
+              <span className="bg-primary-light text-primary mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full">
+                <Check className="size-3.5" aria-hidden="true" />
+              </span>
+              <p>
+                Keep a calm, ready list for your next appointment instead of
+                relying on memory when the conversation begins.
+              </p>
+            </div>
           </div>
-          <div className="order-1 mx-auto w-[min(78vw,27rem)] lg:order-2">
-            <ProductDevice
-              src="/screenshots/product-bezel-2026-08-23-complete/ask-black.webp"
-              darkSrc="/screenshots/product-bezel-2026-08-23-complete/ask-black-dark.webp"
-              alt="Medscribe Ask response 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"
-            />
+          <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 w-[min(72vw,18rem)] -rotate-2 sm:w-full">
+              <ProductDevice
+                src="/screenshots/product-bezel-2026-08-23-complete/ask-black.webp"
+                darkSrc="/screenshots/product-bezel-2026-08-23-complete/ask-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>
         </div>
       </section>
@@ -361,7 +372,7 @@ export default function HomePage() {
                 to review together.
               </p>
               <div className="mt-9 grid gap-4 sm:grid-cols-2">
-                <div className="glass-panel rounded-2xl p-5">
+                <div className="surface-panel rounded-2xl p-5">
                   <ScanLine
                     className="text-primary size-6"
                     aria-hidden="true"
@@ -373,7 +384,7 @@ export default function HomePage() {
                     Show or share a selected, readable snapshot.
                   </p>
                 </div>
-                <div className="glass-panel rounded-2xl p-5">
+                <div className="surface-panel rounded-2xl p-5">
                   <ContactRound
                     className="text-primary size-6"
                     aria-hidden="true"
@@ -389,7 +400,7 @@ export default function HomePage() {
             </div>
           </div>
 
-          <div className="brand-night mt-24 overflow-hidden rounded-[2.5rem] p-7 text-white shadow-[0_35px_90px_rgba(7,20,21,0.22)] sm:p-10 lg:p-14">
+          <div className="night-card mt-24 overflow-hidden rounded-[2.5rem] p-7 text-white sm:p-10 lg:p-14">
             <div className="grid gap-12 lg:grid-cols-[0.85fr_1.15fr] lg:items-center">
               <div>
                 <HeartHandshake
@@ -412,7 +423,7 @@ export default function HomePage() {
                 ].map(([number, title, body]) => (
                   <li
                     key={number}
-                    className="rounded-2xl border border-white/15 bg-white/8 p-5"
+                    className="rounded-2xl bg-white/[0.065] p-5"
                   >
                     <span className="flex size-8 items-center justify-center rounded-full bg-white/12 text-xs font-bold">
                       {number}
@@ -447,11 +458,11 @@ export default function HomePage() {
             </p>
           </div>
 
-          <dl className="mt-20 grid border-y border-white/12 md:grid-cols-3 md:divide-x md:divide-white/12">
+          <dl className="mt-20 grid gap-10 md:grid-cols-3 md:gap-0 md:divide-x md:divide-white/12">
             {proofStats.map((stat) => (
               <div
                 key={stat.label}
-                className="border-b border-white/12 px-5 py-10 text-center last:border-b-0 md:border-b-0 lg:py-14"
+                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">
@@ -468,7 +479,7 @@ export default function HomePage() {
               return (
                 <article
                   key={principle.title}
-                  className="rounded-[1.75rem] border border-white/12 bg-white/[0.045] p-7"
+                  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">
@@ -494,7 +505,7 @@ export default function HomePage() {
       </section>
 
       <section className="pitch-lazy flex min-h-[82svh] items-center px-4 py-24 sm:px-6 lg:py-32">
-        <div className="pitch-copy-motion brand-warm border-border-soft/65 mx-auto w-full max-w-6xl overflow-hidden rounded-[3rem] border px-6 py-16 text-center shadow-[0_35px_110px_rgba(15,118,110,0.14)] sm:px-10 lg:px-20 lg:py-24">
+        <div className="pitch-copy-motion section-wash surface-panel mx-auto w-full max-w-6xl overflow-hidden rounded-[3rem] px-6 py-16 text-center sm:px-10 lg:px-20 lg:py-24">
           <p className="text-primary text-xs font-bold tracking-[0.2em] uppercase">
             Made for people who carry a lot
           </p>
@@ -509,7 +520,7 @@ export default function HomePage() {
             {accessFit.map((item) => (
               <li
                 key={item}
-                className="border-primary/15 bg-surface/65 text-foreground flex items-start gap-3 rounded-2xl border p-4 text-sm leading-relaxed"
+                className="bg-surface/65 text-foreground flex items-start gap-3 rounded-2xl p-4 text-sm leading-relaxed"
               >
                 <span className="bg-primary-light mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full">
                   <Check className="text-primary size-3" aria-hidden="true" />

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

@@ -78,13 +78,16 @@ export default function PrivacyPage() {
         </div>
       </section>
 
-      <section className="brand-warm border-border-soft/70 border-y px-4 py-20 sm:px-6 lg:py-24">
+      <section className="section-wash px-4 py-20 sm:px-6 lg:py-24">
         <div className="mx-auto grid max-w-6xl gap-4 md:grid-cols-3">
           {principles.map((item) => {
             const Icon = item.icon;
 
             return (
-              <article key={item.title} className="glass-panel rounded-2xl p-6">
+              <article
+                key={item.title}
+                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">
                   {item.title}
@@ -116,7 +119,7 @@ export default function PrivacyPage() {
             {commitments.map((item) => (
               <article
                 key={item.title}
-                className="glass-panel rounded-2xl p-6 sm:p-7"
+                className="surface-panel rounded-2xl p-6 sm:p-7"
               >
                 <div className="flex items-start gap-4">
                   <div className="bg-primary-light text-primary flex size-10 shrink-0 items-center justify-center rounded-xl">
@@ -151,7 +154,7 @@ export default function PrivacyPage() {
             {choices.map((item) => (
               <li
                 key={item}
-                className="flex items-start gap-3 rounded-xl border border-white/15 bg-white/8 p-4 text-sm leading-relaxed text-teal-50/90"
+                className="flex items-start gap-3 rounded-xl bg-white/[0.06] p-4 text-sm leading-relaxed text-teal-50/90"
               >
                 <Check
                   className="mt-0.5 size-4 shrink-0 text-teal-200"
@@ -165,7 +168,7 @@ export default function PrivacyPage() {
       </section>
 
       <section className="px-4 py-18 sm:px-6">
-        <div className="glass-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 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">
               See how Medscribe fits into the day.