From e517f1d331be9a66258002d0274f15d81dea0305 Mon Sep 17 00:00:00 2001
From: Marco Allegretti <mightymarco4@gmail.com>
Date: Wed, 4 Feb 2026 01:01:19 +0100
Subject: [PATCH] ui: improve demo page mobile spacing

---
 frontend/src/pages/demo.astro | 66 +++++++++++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)

diff --git a/frontend/src/pages/demo.astro b/frontend/src/pages/demo.astro
index 11624bb..b764ea5 100644
--- a/frontend/src/pages/demo.astro
+++ b/frontend/src/pages/demo.astro
@@ -261,12 +261,24 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
     padding: 0 2rem;
   }
 
+  @media (max-width: 640px) {
+    .demo-page {
+      padding: 0 1rem;
+    }
+  }
+
   .page-header {
     text-align: center;
     padding: 3rem 0 3.5rem;
     border-bottom: 1px solid var(--color-border);
   }
 
+  @media (max-width: 640px) {
+    .page-header {
+      padding: 2.25rem 0 2.5rem;
+    }
+  }
+
   .page-label {
     display: inline-block;
     font-size: 0.6875rem;
@@ -287,6 +299,12 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
     letter-spacing: -0.02em;
   }
 
+  @media (max-width: 640px) {
+    .page-header h1 {
+      font-size: 1.85rem;
+    }
+  }
+
   .lead {
     font-size: 1.25rem;
     color: var(--color-text-muted);
@@ -295,11 +313,23 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
     line-height: 1.6;
   }
 
+  @media (max-width: 640px) {
+    .lead {
+      font-size: 1.05rem;
+    }
+  }
+
   .demo-start {
     padding: 3rem 0;
     border-bottom: 1px solid var(--color-border);
   }
 
+  @media (max-width: 640px) {
+    .demo-start {
+      padding: 2.25rem 0;
+    }
+  }
+
   .demo-start h2 {
     font-size: 1.75rem;
     text-align: center;
@@ -355,6 +385,12 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
     border-bottom: 1px solid var(--color-border);
   }
 
+  @media (max-width: 640px) {
+    .demo-intro {
+      padding: 2.25rem 0;
+    }
+  }
+
   .intro-content h2 {
     font-size: 1.75rem;
     margin-bottom: 1rem;
@@ -392,6 +428,12 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
     border-bottom: 1px solid var(--color-border);
   }
 
+  @media (max-width: 640px) {
+    .demo-communities {
+      padding: 2.25rem 0;
+    }
+  }
+
   .demo-communities h2 {
     font-size: 1.75rem;
     text-align: center;
@@ -472,6 +514,12 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
     border-bottom: 1px solid var(--color-border);
   }
 
+  @media (max-width: 640px) {
+    .demo-access {
+      padding: 2.25rem 0;
+    }
+  }
+
   .demo-access h2 {
     font-size: 1.75rem;
     text-align: center;
@@ -607,6 +655,12 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
     border-bottom: 1px solid var(--color-border);
   }
 
+  @media (max-width: 640px) {
+    .demo-journey {
+      padding: 2.25rem 0;
+    }
+  }
+
   .demo-journey h2 {
     font-size: 1.75rem;
     text-align: center;
@@ -658,6 +712,12 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
     border-bottom: 1px solid var(--color-border);
   }
 
+  @media (max-width: 640px) {
+    .demo-cta {
+      padding: 3rem 0;
+    }
+  }
+
   .demo-cta h2 {
     font-size: 2rem;
     margin-bottom: 1rem;
@@ -680,6 +740,12 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
     padding: 3rem 0;
   }
 
+  @media (max-width: 640px) {
+    .demo-next {
+      padding: 2.25rem 0;
+    }
+  }
+
   .demo-next h2 {
     font-size: 1.75rem;
     text-align: center;