From c3c73bb45ecae0770fed5ce640e88b652ca379cf Mon Sep 17 00:00:00 2001
From: Lilith <lilith@apricot.voyager.nasty.sh>
Date: Sat, 10 Jan 2026 05:47:23 -0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E2=9C=A8=20update=20media=20q?=
 =?UTF-8?q?ueries=20for=20smaller=20screens?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../landing/components/AudienceHero.tsx       | 43 ++++++++++++++++++-
 1 file changed, 41 insertions(+), 2 deletions(-)

diff --git a/features/marketplace/frontend-public/src/features/landing/components/AudienceHero.tsx b/features/marketplace/frontend-public/src/features/landing/components/AudienceHero.tsx
index 22c18d1f5..21d10a095 100644
--- a/features/marketplace/frontend-public/src/features/landing/components/AudienceHero.tsx
+++ b/features/marketplace/frontend-public/src/features/landing/components/AudienceHero.tsx
@@ -317,9 +317,16 @@ const StatBadge = styled.div<{ $theme: AudienceTheme; $highlight?: boolean }>`
     border-color: ${(props) => props.$theme.primary}80;
   }
 
-  @media (max-width: 640px) {
+  @media (max-width: 768px) {
     padding: 0.75rem 1rem;
   }
+
+  @media (max-width: 480px) {
+    padding: 0.625rem 0.5rem;
+    border-radius: 0.5rem;
+    min-height: 60px;
+    justify-content: center;
+  }
 `;
 
 const StatValue = styled.span`
@@ -327,9 +334,13 @@ const StatValue = styled.span`
   font-weight: 700;
   color: white;
 
-  @media (max-width: 640px) {
+  @media (max-width: 768px) {
     font-size: 1.25rem;
   }
+
+  @media (max-width: 480px) {
+    font-size: 1.1rem;
+  }
 `;
 
 const StatLabel = styled.span`
@@ -337,6 +348,12 @@ const StatLabel = styled.span`
   color: rgba(255, 255, 255, 0.7);
   text-transform: uppercase;
   letter-spacing: 0.05em;
+  text-align: center;
+
+  @media (max-width: 480px) {
+    font-size: 0.65rem;
+    letter-spacing: 0.03em;
+  }
 `;
 
 const CTAGroup = styled.div`
@@ -345,6 +362,14 @@ const CTAGroup = styled.div`
   gap: 1rem;
   flex-wrap: wrap;
   margin-top: 1.5rem;
+
+  @media (max-width: 480px) {
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+    width: 100%;
+    padding: 0 1rem;
+  }
 `;
 
 const primaryCTAStyles = css<{ $theme: AudienceTheme }>`
@@ -389,6 +414,14 @@ const primaryCTAStyles = css<{ $theme: AudienceTheme }>`
     padding: 1rem 2rem;
     font-size: 1.1rem;
   }
+
+  @media (max-width: 480px) {
+    width: 100%;
+    justify-content: center;
+    padding: 1rem 1.5rem;
+    font-size: 1rem;
+    min-height: 48px;
+  }
 `;
 
 const PrimaryCTALink = styled(Link)<{ $theme: AudienceTheme }>`
@@ -423,6 +456,12 @@ const secondaryCTAStyles = css<{ $theme: AudienceTheme }>`
     padding: 1rem 1.5rem;
     font-size: 1rem;
   }
+
+  @media (max-width: 480px) {
+    width: 100%;
+    justify-content: center;
+    min-height: 48px;
+  }
 `;
 
 const SecondaryCTALink = styled(Link)<{ $theme: AudienceTheme }>`