diff --git a/src/features/how-it-works/HowItWorks.tsx b/src/features/how-it-works/HowItWorks.tsx
index 765c60b..58c1e91 100644
--- a/src/features/how-it-works/HowItWorks.tsx
+++ b/src/features/how-it-works/HowItWorks.tsx
@@ -82,7 +82,7 @@ function StepRow({
       role="presentation"
     >
       {/* Grid: number | icon | title + content area | chevron */}
-      <div className="grid grid-cols-[auto_auto_1fr_auto] items-start gap-4">
+      <div className="grid grid-cols-[auto_auto_1fr_auto] items-start gap-3">
         <button
           id={triggerId}
           type="button"
@@ -90,7 +90,7 @@ function StepRow({
           aria-controls={contentId}
           onClick={onToggle}
           className={cn(
-            "col-span-4 grid grid-cols-subgrid items-center gap-4 py-5 text-left outline-none transition-colors",
+            "col-span-4 grid grid-cols-subgrid items-center gap-3 py-4 text-left outline-none transition-colors",
             "focus-visible:ring-2 focus-visible:ring-white/30 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent",
             "hover:opacity-90"
           )}
@@ -99,7 +99,7 @@ function StepRow({
           <span
             className={cn(
               "tabular-nums font-semibold transition-colors duration-300",
-              "text-5xl sm:text-6xl md:text-7xl lg:text-8xl",
+              "text-4xl sm:text-5xl md:text-6xl lg:text-7xl",
               isExpanded ? "text-white" : "text-white/20"
             )}
             aria-hidden
@@ -112,8 +112,8 @@ function StepRow({
             className={cn(
               "flex shrink-0 items-center justify-center rounded-full transition-all duration-300",
               isExpanded
-                ? "bg-white p-3 text-black ring-1 ring-white/20"
-                : "bg-transparent p-2 text-white/40"
+                ? "bg-white p-2.5 text-black ring-1 ring-white/20"
+                : "bg-transparent p-1.5 text-white/40"
             )}
             aria-hidden
           >
@@ -123,7 +123,7 @@ function StepRow({
           {/* Title */}
           <span
             className={cn(
-              "text-lg font-semibold sm:text-xl md:text-2xl transition-colors duration-300",
+              "text-base font-semibold sm:text-lg md:text-xl transition-colors duration-300",
               isExpanded ? "text-white" : "text-white/50"
             )}
           >
@@ -138,7 +138,7 @@ function StepRow({
             )}
             aria-hidden
           >
-            <ChevronDown className="h-5 w-5 sm:h-6 sm:w-6" />
+            <ChevronDown className="h-4 w-4 sm:h-5 sm:w-5" />
           </span>
         </button>
 
@@ -178,13 +178,13 @@ function StepRow({
                         transition: { duration: OPEN_DURATION * 0.75, ease },
                       },
                     }}
-                    className="pb-6 pr-0"
+                    className="pb-5 pr-0"
                   >
                     <div className="max-w-2xl">
-                      <p className="text-sm text-[#616161] sm:text-base leading-relaxed">
+                      <p className="text-xs text-[#616161] sm:text-sm leading-relaxed">
                         {step.description}
                       </p>
-                      <ul className="mt-4 space-y-4 text-sm text-white/70 sm:text-base">
+                      <ul className="mt-3 space-y-3 text-xs text-white/70 sm:text-sm">
                         {step.bullets.map((b, k) => (
                           <li key={k} className="flex items-start gap-2">
                             <span
@@ -224,7 +224,7 @@ export default function HowItWorks() {
       {/* Headline */}
       <h2
         id="how-it-works-heading"
-        className="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl md:text-5xl"
+        className="mt-2 text-2xl font-bold tracking-tight text-white sm:text-3xl md:text-4xl"
       >
         Three steps.
         <br />
@@ -232,7 +232,7 @@ export default function HowItWorks() {
       </h2>
 
       {/* Accordion steps */}
-      <div className="mt-10 sm:mt-12">
+      <div className="mt-8 sm:mt-10">
         {stepsData.map((step, index) => {
           const triggerId = `${baseId}-trigger-${step.id}`;
           const contentId = `${baseId}-content-${step.id}`;