From 33abc8beb26cb6babc2460e22f79444dfd3ea612 Mon Sep 17 00:00:00 2001
From: Lilith <lilith@apricot.voyager.nasty.sh>
Date: Sat, 10 Jan 2026 05:49:39 -0800
Subject: [PATCH] =?UTF-8?q?feat(features/marketplace/frontend-public/src/f?=
 =?UTF-8?q?eatures/landing/components/BenefitsSection.tsx,=20features/mark?=
 =?UTF-8?q?etplace/frontend-public/src/features/landing/components/FAQSect?=
 =?UTF-8?q?ion.tsx):=20=E2=9C=A8=20update=20FAQ=20and=20benefits=20section?=
 =?UTF-8?q?s=20with=20new=20styles=20and=20responsive=20design=20adjustmen?=
 =?UTF-8?q?ts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../features/landing/components/BenefitsSection.tsx  |  1 +
 .../src/features/landing/components/FAQSection.tsx   | 12 ++++++++++++
 2 files changed, 13 insertions(+)

diff --git a/features/marketplace/frontend-public/src/features/landing/components/BenefitsSection.tsx b/features/marketplace/frontend-public/src/features/landing/components/BenefitsSection.tsx
index a1db1189c..a86f3c4bd 100644
--- a/features/marketplace/frontend-public/src/features/landing/components/BenefitsSection.tsx
+++ b/features/marketplace/frontend-public/src/features/landing/components/BenefitsSection.tsx
@@ -111,6 +111,7 @@ const Grid = styled.div`
 
   @media (max-width: 640px) {
     grid-template-columns: 1fr;
+    gap: 1rem;
   }
 `;
 
diff --git a/features/marketplace/frontend-public/src/features/landing/components/FAQSection.tsx b/features/marketplace/frontend-public/src/features/landing/components/FAQSection.tsx
index 6b34e0040..76b43c687 100644
--- a/features/marketplace/frontend-public/src/features/landing/components/FAQSection.tsx
+++ b/features/marketplace/frontend-public/src/features/landing/components/FAQSection.tsx
@@ -103,6 +103,7 @@ const FAQSummary = styled.summary`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 1rem;
   transition: color 0.3s ease;
 
   &::-webkit-details-marker {
@@ -115,6 +116,7 @@ const FAQSummary = styled.summary`
     font-weight: 300;
     color: var(--neon-gold);
     transition: all 0.2s ease;
+    flex-shrink: 0;
   }
 
   ${FAQDetails}[open] &::after {
@@ -124,6 +126,11 @@ const FAQSummary = styled.summary`
   &:hover {
     color: var(--neon-gold);
   }
+
+  @media (max-width: 480px) {
+    padding: 1rem 1.25rem;
+    font-size: 0.95rem;
+  }
 `;
 
 const FAQAnswer = styled.p`
@@ -132,4 +139,9 @@ const FAQAnswer = styled.p`
   color: ${(props) => props.theme.colors.text.secondary};
   line-height: 1.7;
   margin: 0;
+
+  @media (max-width: 480px) {
+    padding: 0 1.25rem 1rem;
+    font-size: 0.9rem;
+  }
 `;