fix: compact getting started section

website/style.css

@@ -124,6 +124,10 @@ section {
     padding: 6rem 0;
 }
 
+#how-it-works {
+    padding: 4.5rem 0;
+}
+
 /* Content-visibility for offscreen sections to improve INP */
 .use-cases-section,
 #self-hosting,
@@ -1457,13 +1461,13 @@ input:checked + .mock-slider:before {
 .steps {
     display: flex;
     flex-direction: column;
-    gap: 8rem;
+    gap: 4rem;
 }
 
 .step {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 5rem;
+    gap: 3rem;
     align-items: center;
 }
 
@@ -1472,36 +1476,36 @@ input:checked + .mock-slider:before {
 }
 
 .step-num {
-    font-size: 5rem;
+    font-size: 3.25rem;
     font-weight: 900;
     background: linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(168, 85, 247, 0.15));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     line-height: 1;
-    margin-bottom: 0.75rem;
+    margin-bottom: 0.5rem;
     font-family: inherit;
-    letter-spacing: -2px;
+    letter-spacing: 0;
 }
 
 .step-text h3 {
-    font-size: 2.1rem;
+    font-size: 1.65rem;
-    margin-bottom: 1.1rem;
+    margin-bottom: 0.75rem;
     font-weight: 850;
     color: white;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
 }
 
 .step-text p {
     color: #94a3b8;
-    font-size: 1.1rem;
+    font-size: 1rem;
-    line-height: 1.75;
+    line-height: 1.55;
 }
 
 /* Custom CSS Mockups for step illustrations */
 .step-illustration-1, .step-illustration-2, .step-illustration-3 {
     background: radial-gradient(circle at 10% 10%, #1e1b4b, #030712);
-    height: 300px; /* Slightly taller for more detail and breathing room */
+    height: 240px;
-    border-radius: 24px;
+    border-radius: 18px;
     border: 1px solid rgba(255, 255, 255, 0.06);
     position: relative;
     overflow: hidden;
@@ -1512,6 +1516,41 @@ input:checked + .mock-slider:before {
     transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+@media (max-width: 900px) {
+    #how-it-works {
+        padding: 3.5rem 0;
+    }
+
+    .steps {
+        gap: 2.75rem;
+    }
+
+    .step {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 1.1rem;
+        text-align: left;
+    }
+
+    #how-it-works .step .step-text {
+        order: 1;
+    }
+
+    #how-it-works .step-illustration-1,
+    #how-it-works .step-illustration-2,
+    #how-it-works .step-illustration-3 {
+        order: 2;
+        height: 220px;
+    }
+
+    .step-num {
+        font-size: 2.5rem;
+    }
+
+    .step-text h3 {
+        font-size: 1.45rem;
+    }
+}
+
 .step-illustration-1:hover, .step-illustration-2:hover, .step-illustration-3:hover {
     transform: translateY(-6px) scale(1.02);
     border-color: rgba(99, 102, 241, 0.25);
@@ -2411,10 +2450,14 @@ footer a:hover {
         min-height: auto;
     }
 
-    .hero-grid, .step {
+    .hero-grid {
         grid-template-columns: minmax(0, 1fr);
         text-align: center;
     }
+    .step {
+        grid-template-columns: minmax(0, 1fr);
+        text-align: left;
+    }
     .hero-text h1 {
         font-size: 2.5rem;
         max-width: none;

website/template.html

@@ -981,7 +981,7 @@
 
     <section id="how-it-works" style="background: var(--section-tint)">
         <div class="container">
-            <h2 style="font-size: 2.5rem; text-align: center; margin-bottom: 4rem;">
+            <h2 style="font-size: 2.2rem; text-align: center; margin-bottom: 2.25rem;">
                 <span>{{STEPS_TITLE}}</span>
             </h2>