Refine website vertical rhythm

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

@@ -68,13 +68,13 @@ export default function HowItWorksPage() {
         </div>
       </section>
 
-      <section className="section-wash px-4 py-18 sm:px-6 lg:py-22">
+      <section className="section-wash px-4 py-16 sm:px-6 lg:py-18">
         <div className="mx-auto max-w-6xl">
           <SectionLabel>Start with what matters</SectionLabel>
           <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">
+          <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
             {dailyRhythm.map((item, index) => {
               const Icon = item.icon;
 
@@ -114,9 +114,9 @@ export default function HowItWorksPage() {
         </div>
       </section>
 
-      <section className="px-4 py-20 sm:px-6 lg:py-28">
+      <section className="px-4 py-16 sm:px-6 lg:py-20">
-        <div className="mx-auto max-w-6xl space-y-24">
+        <div className="mx-auto max-w-6xl space-y-16 lg:space-y-20">
-          <div className="grid gap-12 lg:grid-cols-2 lg:items-center">
+          <div className="grid gap-8 lg:grid-cols-2 lg:items-center lg:gap-12">
             <div>
               <SectionLabel>Review what changed</SectionLabel>
               <h2 className="text-foreground mt-4 font-display text-4xl font-semibold tracking-tight sm:text-5xl">
@@ -137,7 +137,7 @@ export default function HowItWorksPage() {
                 src="/screenshots/product-bezel-2026-08-24-unified-type/summary-reviewed-natural.webp"
                 darkSrc="/screenshots/product-bezel-2026-08-24-unified-type/summary-reviewed-natural-dark.webp"
                 alt="Illustrative Medscribe visit summary"
-                width={280}
+                width={260}
               />
               <p className="text-muted-foreground mt-4 text-center text-xs">
                 Illustrative profile · Medscribe interface
@@ -145,13 +145,13 @@ export default function HowItWorksPage() {
             </div>
           </div>
 
-          <div className="grid gap-12 lg:grid-cols-2 lg:items-center">
+          <div className="grid gap-8 lg:grid-cols-2 lg:items-center lg:gap-12">
             <div className="justify-self-center py-2 lg:order-1">
               <PhoneMockup
                 src="/screenshots/product-bezel-2026-08-24-unified-type/medication-detail-lisinopril-natural.webp"
                 darkSrc="/screenshots/product-bezel-2026-08-24-unified-type/medication-detail-lisinopril-natural-dark.webp"
                 alt="Illustrative Medscribe medication detail"
-                width={280}
+                width={260}
               />
               <p className="text-muted-foreground mt-4 text-center text-xs">
                 Illustrative profile · Medscribe interface
@@ -173,7 +173,7 @@ export default function HowItWorksPage() {
             </div>
           </div>
 
-          <div className="grid gap-12 lg:grid-cols-2 lg:items-center">
+          <div className="grid gap-8 lg:grid-cols-2 lg:items-center lg:gap-12">
             <div className="lg:order-2">
               <SectionLabel>Keep the next question</SectionLabel>
               <h2 className="text-foreground mt-4 font-display text-4xl font-semibold tracking-tight sm:text-5xl">
@@ -194,7 +194,7 @@ export default function HowItWorksPage() {
                 src="/screenshots/product-bezel-2026-08-24-unified-type/questions-black.webp"
                 darkSrc="/screenshots/product-bezel-2026-08-24-unified-type/questions-black-dark.webp"
                 alt="Illustrative Medscribe Questions to ask interface"
-                width={280}
+                width={260}
               />
               <p className="text-muted-foreground mt-4 text-center text-xs">
                 Illustrative profile · Medscribe interface
@@ -202,7 +202,7 @@ export default function HowItWorksPage() {
             </div>
           </div>
 
-          <div className="grid gap-12 lg:grid-cols-2 lg:items-center">
+          <div className="grid gap-8 lg:grid-cols-2 lg:items-center lg:gap-12">
             <div>
               <SectionLabel>Prepare the handoff</SectionLabel>
               <h2 className="text-foreground mt-4 font-display text-4xl font-semibold tracking-tight sm:text-5xl">
@@ -223,7 +223,7 @@ export default function HowItWorksPage() {
                 src="/screenshots/product-bezel-2026-08-24-unified-type/know-me-natural.webp"
                 darkSrc="/screenshots/product-bezel-2026-08-24-unified-type/know-me-natural-dark.webp"
                 alt="Illustrative Medscribe Know Me handoff"
-                width={280}
+                width={260}
               />
               <p className="text-muted-foreground mt-4 text-center text-xs">
                 Illustrative profile · Medscribe interface
@@ -233,8 +233,8 @@ export default function HowItWorksPage() {
         </div>
       </section>
 
-      <section className="section-wash px-4 py-20 sm:px-6">
+      <section className="section-wash px-4 py-16 sm:px-6">
-        <div className="mx-auto grid max-w-6xl gap-12 lg:grid-cols-2">
+        <div className="mx-auto grid max-w-6xl gap-8 lg:grid-cols-2 lg:gap-12">
           <div>
             <div className="bg-primary-light text-primary flex size-12 items-center justify-center rounded-xl">
               <ShieldAlert className="size-6" aria-hidden="true" />
@@ -263,7 +263,7 @@ export default function HowItWorksPage() {
         </div>
       </section>
 
-      <section className="px-4 py-20 sm:px-6">
+      <section className="px-4 py-16 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-display text-3xl font-semibold">

src/app/(marketing)/page.tsx

@@ -101,7 +101,7 @@ const accessFit = [
 export default function HomePage() {
   return (
     <>
-      <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">
+      <section className="section-wash relative isolate min-h-[calc(100svh-4rem)] overflow-hidden px-4 pt-12 sm:px-6 sm:pt-16 lg:pt-20">
         <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">
@@ -131,7 +131,7 @@ export default function HomePage() {
           </div>
         </div>
 
-        <div className="relative mx-auto mt-12 h-[44rem] max-w-5xl sm:h-[58rem] lg:mt-8 lg:h-[64rem]">
+        <div className="relative mx-auto mt-10 h-[42rem] max-w-5xl sm:h-[52rem] lg:mt-6 lg:h-[60rem]">
           <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-unified-type/summary-reviewed-natural.webp"
@@ -153,20 +153,20 @@ export default function HomePage() {
             />
           </div>
         </div>
-        <p className="text-muted-foreground relative z-20 mx-auto pb-8 text-center text-xs font-medium tracking-wide">
+        <p className="text-muted-foreground relative z-20 mx-auto pb-6 text-center text-xs font-medium tracking-wide">
           Illustrative profile · Medscribe interface
         </p>
       </section>
 
-      <section className="pitch-lazy section-wash flex min-h-[78svh] items-center px-4 py-24 sm:px-6 lg:py-32">
+      <section className="pitch-lazy section-wash px-4 pt-12 pb-20 sm:px-6 lg:pt-16 lg:pb-24">
         <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
           </p>
-          <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]">
+          <h2 className="text-foreground mx-auto mt-6 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">
+          <p className="text-muted-foreground mx-auto mt-6 max-w-2xl text-lg leading-relaxed sm:text-xl">
             One instruction lives in a portal. A medication label sits in a
             cabinet. The latest change lives in someone&apos;s memory. Medscribe
             is the patient-held thread between those moments.
@@ -174,21 +174,21 @@ export default function HomePage() {
         </div>
       </section>
 
-      <section className="pitch-lazy px-4 py-24 sm:px-6 lg:py-36">
+      <section className="pitch-lazy px-4 py-20 sm:px-6 lg:py-28">
-        <div className="mx-auto grid max-w-7xl gap-16 lg:grid-cols-[0.78fr_1.22fr] lg:gap-24">
+        <div className="mx-auto grid max-w-7xl gap-12 lg:grid-cols-[0.78fr_1.22fr] lg:gap-20">
           <div className="lg:sticky lg:top-28 lg:h-fit">
             <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-display text-5xl leading-[0.98] font-semibold tracking-[-0.04em] sm:text-6xl">
+            <h2 className="text-foreground mt-5 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">
+            <p className="text-muted-foreground mt-6 max-w-lg text-lg leading-relaxed">
               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="surface-panel mt-8 max-w-lg rounded-2xl p-5">
+            <div className="surface-panel mt-6 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
@@ -197,11 +197,11 @@ export default function HomePage() {
             </div>
           </div>
 
-          <ol className="space-y-8 sm:space-y-12">
+          <ol className="space-y-6 sm:space-y-8">
             {visitMoments.map((moment, index) => (
               <li
                 key={moment.number}
-                className="pitch-card-motion surface-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-7 sm:px-10 sm:pt-9"
               >
                 <div className="relative z-10 max-w-xl">
                   <div className="flex items-center gap-3">
@@ -220,7 +220,7 @@ export default function HomePage() {
                   </p>
                 </div>
                 <div className="bg-primary-light/45 absolute -right-36 bottom-14 -z-0 size-96 rounded-full blur-3xl" />
-                <div className="relative mx-auto mt-10 w-[min(72vw,21rem)] translate-y-14">
+                <div className="relative mx-auto mt-8 w-[min(72vw,20rem)] translate-y-10">
                   <ProductDevice
                     src={moment.image}
                     darkSrc={moment.darkImage}
@@ -235,24 +235,24 @@ export default function HomePage() {
         </div>
       </section>
 
-      <section className="pitch-lazy brand-night relative isolate overflow-hidden px-4 py-24 text-white sm:px-6 lg:py-36">
+      <section className="pitch-lazy brand-night relative isolate overflow-hidden px-4 py-20 text-white sm:px-6 lg:py-28">
         <div className="mx-auto max-w-7xl">
           <div className="pitch-copy-motion mx-auto max-w-4xl text-center">
             <p className="text-xs font-bold tracking-[0.2em] text-teal-200 uppercase">
               Between visits
             </p>
-            <h2 className="mt-6 font-display text-[clamp(3rem,7vw,6.7rem)] leading-[0.94] font-semibold tracking-[-0.045em]">
+            <h2 className="mt-5 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">
+            <p className="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-teal-50/75 sm:text-xl">
               The list, the label, the schedule, and the latest confirmation
               belong in the same view—not scattered across paper and memory.
             </p>
           </div>
 
-          <div className="mt-16 grid gap-14 lg:grid-cols-2 lg:items-center lg:gap-6">
+          <div className="mt-12 grid gap-10 lg:grid-cols-2 lg:items-center lg:gap-6">
-            <div className="relative mx-auto h-[42rem] w-full max-w-2xl sm:h-[50rem] lg:h-[56rem]">
+            <div className="relative mx-auto h-[36rem] w-full max-w-2xl sm:h-[44rem] lg:h-[50rem]">
-              <div className="absolute top-20 left-[4%] w-[17rem] -rotate-6 sm:w-[21rem] lg:w-[23rem]">
+              <div className="absolute top-12 left-[4%] w-[15rem] -rotate-6 sm:top-16 sm:w-[19rem] lg:w-[22rem]">
                 <ProductDevice
                   src="/screenshots/product-bezel-2026-08-24-unified-type/medication-detail-lisinopril-natural.webp"
                   darkSrc="/screenshots/product-bezel-2026-08-24-unified-type/medication-detail-lisinopril-natural-dark.webp"
@@ -261,7 +261,7 @@ export default function HomePage() {
                   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]">
+              <div className="absolute top-0 right-[2%] z-10 w-[16rem] rotate-5 sm:w-[20rem] lg:w-[23rem]">
                 <ProductDevice
                   src="/screenshots/product-bezel-2026-08-24-unified-type/medications-black.webp"
                   darkSrc="/screenshots/product-bezel-2026-08-24-unified-type/medications-black-dark.webp"
@@ -289,10 +289,10 @@ export default function HomePage() {
               ].map((item) => (
                 <article
                   key={item.title}
-                  className="border-white/10 border-t p-7 first:border-t-0 sm:p-9"
+                  className="border-white/10 border-t p-6 first:border-t-0 sm:p-8"
                 >
                   <Check className="size-5 text-teal-200" aria-hidden="true" />
-                  <h3 className="mt-5 font-display text-2xl font-semibold sm:text-3xl">
+                  <h3 className="mt-4 font-display text-2xl font-semibold sm:text-3xl">
                     {item.title}
                   </h3>
                   <p className="mt-3 leading-relaxed text-teal-50/70">
@@ -305,24 +305,24 @@ export default function HomePage() {
         </div>
       </section>
 
-      <section className="pitch-lazy section-wash overflow-hidden px-4 py-24 sm:px-6 lg:py-36">
+      <section className="pitch-lazy section-wash overflow-hidden px-4 py-20 sm:px-6 lg:py-28">
         <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"
+          className="mx-auto grid max-w-7xl scroll-mt-24 items-center gap-10 lg:grid-cols-[0.82fr_1.18fr] lg:gap-16"
         >
           <div className="pitch-copy-motion">
             <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-display text-[clamp(3.25rem,6vw,6.5rem)] leading-[0.94] font-semibold tracking-[-0.045em]">
+            <h2 className="text-foreground mt-5 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">
+            <p className="text-muted-foreground mt-6 max-w-xl text-lg leading-relaxed sm:text-xl">
               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">
+            <div className="text-muted-foreground mt-6 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>
@@ -332,8 +332,8 @@ export default function HomePage() {
               </p>
             </div>
           </div>
-          <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 grid w-full max-w-[40rem] grid-cols-2 items-center justify-center gap-1 sm:gap-2 lg:justify-end">
-            <div className="mx-auto w-[min(72vw,18rem)] -rotate-2 sm:w-full">
+            <div className="mx-auto w-full -rotate-2">
               <ProductDevice
                 src="/screenshots/product-bezel-2026-08-24-unified-type/ask-questions-black.webp"
                 darkSrc="/screenshots/product-bezel-2026-08-24-unified-type/ask-questions-black-dark.webp"
@@ -342,7 +342,7 @@ export default function HomePage() {
                 sizes="(min-width: 640px) 288px, 72vw"
               />
             </div>
-            <div className="mx-auto w-[min(72vw,18rem)] rotate-2 sm:w-full">
+            <div className="mx-auto w-full rotate-2">
               <ProductDevice
                 src="/screenshots/product-bezel-2026-08-24-unified-type/questions-black.webp"
                 darkSrc="/screenshots/product-bezel-2026-08-24-unified-type/questions-black-dark.webp"
@@ -355,10 +355,10 @@ export default function HomePage() {
         </div>
       </section>
 
-      <section className="pitch-lazy overflow-hidden px-4 py-24 sm:px-6 lg:py-36">
+      <section className="pitch-lazy overflow-hidden px-4 py-20 sm:px-6 lg:py-28">
         <div className="mx-auto max-w-7xl">
-          <div className="grid items-center gap-16 lg:grid-cols-[0.92fr_1.08fr] lg:gap-24">
+          <div className="grid items-center gap-12 lg:grid-cols-[0.92fr_1.08fr] lg:gap-20">
-            <div className="relative mx-auto w-[min(80vw,28rem)]">
+            <div className="relative mx-auto w-[min(70vw,24rem)]">
               <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-unified-type/know-me-natural.webp"
@@ -372,15 +372,15 @@ 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-display text-[clamp(3.2rem,6vw,6.2rem)] leading-[0.95] font-semibold tracking-[-0.045em]">
+              <h2 className="text-foreground mt-5 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">
+              <p className="text-muted-foreground mt-6 max-w-xl text-lg leading-relaxed sm:text-xl">
                 Know Me gathers selected medications, allergies, conditions,
                 baseline, and contacts into one readable snapshot that is easy
                 to review together.
               </p>
-              <div className="mt-9 grid gap-4 sm:grid-cols-2">
+              <div className="mt-7 grid gap-4 sm:grid-cols-2">
                 <div className="surface-panel rounded-2xl p-5">
                   <ScanLine
                     className="text-primary size-6"
@@ -409,8 +409,8 @@ export default function HomePage() {
             </div>
           </div>
 
-          <div className="night-card mt-24 overflow-hidden rounded-[2.5rem] p-7 text-white sm:p-10 lg:p-14">
+          <div className="night-card mt-16 overflow-hidden rounded-[2.5rem] p-6 text-white sm:p-8 lg:p-12">
-            <div className="grid gap-12 lg:grid-cols-[0.85fr_1.15fr] lg:items-center">
+            <div className="grid gap-8 lg:grid-cols-[0.85fr_1.15fr] lg:items-center">
               <div>
                 <HeartHandshake
                   className="size-7 text-teal-200"
@@ -437,7 +437,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-display text-xl font-semibold">
+                    <p className="mt-5 font-display text-xl font-semibold">
                       {title}
                     </p>
                     <p className="mt-2 text-sm leading-relaxed text-teal-50/65">
@@ -451,50 +451,50 @@ export default function HomePage() {
         </div>
       </section>
 
-      <section className="pitch-lazy brand-night relative isolate overflow-hidden px-4 py-24 text-white sm:px-6 lg:py-36">
+      <section className="pitch-lazy brand-night relative isolate overflow-hidden px-4 py-20 text-white sm:px-6 lg:py-28">
         <div className="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_50%_0%,rgba(45,212,191,0.13),transparent_36%)]" />
         <div className="mx-auto max-w-7xl">
           <div className="pitch-copy-motion mx-auto max-w-4xl text-center">
             <p className="text-xs font-bold tracking-[0.2em] text-teal-300 uppercase">
               Privacy that feels personal
             </p>
-            <h2 className="mt-6 font-display text-[clamp(3.2rem,7vw,7rem)] leading-[0.92] font-semibold tracking-[-0.05em]">
+            <h2 className="mt-5 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">
+            <p className="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-slate-300 sm:text-xl">
               Medscribe keeps the experience focused on your choices: what you
               keep, what you review, and what you share with people you trust.
             </p>
           </div>
 
-          <dl className="mt-20 grid gap-10 md:grid-cols-3 md:gap-0 md:divide-x md:divide-white/12">
+          <dl className="mt-14 grid gap-6 md:grid-cols-3 md:gap-0 md:divide-x md:divide-white/12">
             {proofStats.map((stat) => (
               <div
                 key={stat.label}
-                className="px-5 py-2 text-center md:py-10 lg:py-14"
+                className="px-5 py-2 text-center md:py-8 lg:py-10"
               >
                 <dt className="text-sm text-slate-400">{stat.label}</dt>
-                <dd className="mt-3 font-display text-5xl font-semibold tracking-[-0.04em] text-teal-200 sm:text-6xl lg:text-7xl">
+                <dd className="mt-3 font-display text-4xl font-semibold tracking-[-0.04em] text-teal-200 sm:text-5xl lg:text-6xl">
                   {stat.value}
                 </dd>
               </div>
             ))}
           </dl>
 
-          <div className="mt-16 grid gap-4 md:grid-cols-3">
+          <div className="mt-12 grid gap-4 md:grid-cols-3">
             {privacyPrinciples.map((principle) => {
               const Icon = principle.icon;
 
               return (
                 <article
                   key={principle.title}
-                  className="rounded-[1.75rem] bg-white/[0.05] p-7"
+                  className="rounded-[1.75rem] bg-white/[0.05] p-6"
                 >
                   <Icon className="size-6 text-teal-200" aria-hidden="true" />
-                  <h3 className="mt-8 font-display text-2xl font-semibold">
+                  <h3 className="mt-5 font-display text-2xl font-semibold">
                     {principle.title}
                   </h3>
-                  <p className="mt-4 text-sm leading-relaxed text-slate-400">
+                  <p className="mt-3 text-sm leading-relaxed text-slate-400">
                     {principle.body}
                   </p>
                 </article>
@@ -502,7 +502,7 @@ export default function HomePage() {
             })}
           </div>
 
-          <div className="mt-10 text-center">
+          <div className="mt-8 text-center">
             <Button asChild variant="secondary">
               <Link href="/privacy">
                 Read about privacy
@@ -515,9 +515,9 @@ export default function HomePage() {
 
       <section
         id="partners"
-        className="pitch-lazy overflow-hidden px-4 py-20 sm:px-6 lg:py-28"
+        className="pitch-lazy overflow-hidden px-4 py-16 sm:px-6 lg:py-20"
       >
-        <div className="section-wash surface-panel mx-auto grid max-w-6xl gap-10 rounded-[2.75rem] px-6 py-12 sm:px-10 lg:grid-cols-[1fr_auto] lg:items-center lg:px-14 lg:py-16">
+        <div className="section-wash surface-panel mx-auto grid max-w-6xl gap-8 rounded-[2.75rem] px-6 py-10 sm:px-10 lg:grid-cols-[1fr_auto] lg:items-center lg:px-14 lg:py-12">
           <div className="pitch-copy-motion max-w-3xl">
             <div className="bg-primary-light text-primary flex size-12 items-center justify-center rounded-2xl">
               <FileText className="size-6" aria-hidden="true" />
@@ -561,19 +561,19 @@ export default function HomePage() {
         </div>
       </section>
 
-      <section className="pitch-lazy flex min-h-[82svh] items-center px-4 py-24 sm:px-6 lg:py-32">
+      <section className="pitch-lazy px-4 py-20 sm:px-6 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">
+        <div className="pitch-copy-motion section-wash surface-panel mx-auto w-full max-w-6xl overflow-hidden rounded-[3rem] px-6 py-14 text-center sm:px-10 lg:px-20 lg:py-18">
           <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-display text-[clamp(3.2rem,7vw,7rem)] leading-[0.92] font-semibold tracking-[-0.05em]">
+          <h2 className="text-foreground mx-auto mt-5 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">
+          <p className="text-muted-foreground mx-auto mt-6 max-w-2xl text-lg leading-relaxed sm:text-xl">
             Bring visits, medication routines, and trusted caregivers into one
             clearer picture—without losing your place at the center.
           </p>
-          <ul className="mx-auto mt-9 grid max-w-4xl gap-3 text-left md:grid-cols-3">
+          <ul className="mx-auto mt-7 grid max-w-4xl gap-3 text-left md:grid-cols-3">
             {accessFit.map((item) => (
               <li
                 key={item}
@@ -586,7 +586,7 @@ export default function HomePage() {
               </li>
             ))}
           </ul>
-          <div className="mt-10 flex flex-col items-center justify-center gap-3 sm:flex-row">
+          <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
             <Button asChild size="lg">
               <a href={ACCESS_INVITE_MAILTO}>
                 Request access