fix mobile responsive

src/components/sections/WingsHowItWorks.module.css

@@ -241,6 +241,34 @@
 }
 
 @media (max-width: 600px) {
+  /* The clamp() on .section floors at a fixed 56px/80px on any phone width
+     (no further breakpoint-based step-down), noticeably heavier than the
+     rhythm every other Wings section settles into on mobile — normalized to
+     the same 44px/44px here.
+
+     .section's own margin-left/right also stays fixed at 24px below 1024px
+     (set at the top of this file, for the card's inset from the viewport
+     edge). Stacked with .sectionShell's padding that put the card's content
+     34px from the screen edge on phones — noticeably narrower than the
+     Footer's real 10px edge gutter (--dm-mobile-gutter, see globals.css's
+     .dm-section-container). Moving the full 10px gutter onto .section's
+     margin reproduces that same 10px screen-to-card edge, so the card sits
+     flush with its neighbors. .sectionShell then gets its own small 10px
+     breathing-room padding (independent of the outer gutter) so the eyebrow,
+     heading, progress indicator, and step content aren't flush against the
+     card's inner edge. */
+  .section {
+    padding-top: 44px;
+    padding-bottom: 44px;
+    margin-left: var(--dm-mobile-gutter, 10px);
+    margin-right: var(--dm-mobile-gutter, 10px);
+  }
+
+  .sectionShell {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
   .flow {
     display: flex;
     flex-direction: column;