Fix several mobile responsive issues across Hero, Newsletter, cart, and Challenge

- Hero CTA: back to a single line below lg: (wrapping put the icon
  beside two lines and looked broken), sized down instead so the full
  phrase fits.
- Hero heading: dropped the forced <br> after "darf" at true mobile
  widths, kept it only for the sm-lg tablet range it was added for.
- Hero social proof: avatars+text now wrap and center instead of
  cramming onto one row (flex-wrap + justify-center, no fixed
  breakpoint needed).
- Newsletter card icon: stacked above the copy and centered below md:
  instead of squeezed into a row beside it.
- TrustRow: left-aligned below md: instead of centered (shop, cart, and
  every other page using this component).
- Cart line item image: full width below sm: instead of a fixed 150px
  square.
- Challenge EmailCapture (top + bottom CTA, same shared component):
  input and button stack full-width below sm: instead of squeezing
  into one row.
- Challenge steps: icon above text and centered at every breakpoint
  (previously only from lg: up), connector arrows centered to match.

app/components/Newsletter.tsx

@@ -46,8 +46,14 @@ export function Newsletter({
         {/* Rounded card: cream bg, stacks below md */}
         <Reveal className="bg-bg-muted flex flex-col md:flex-row gap-8 md:gap-12 items-center px-8 py-8 md:py-0 rounded-md w-full">
 
-          {/* Left: copy — fixed width from md+ so the form always gets the remaining space */}
-          <div className="flex gap-8 items-start w-full md:w-[var(--newsletter-copy-width)] md:py-4 md:shrink-0">
+          {/* Left: copy — fixed width from md+ so the form always gets the remaining space.
+              Icon+text stacked (icon on top, centered) below md: — side by
+              side they squeezed the text into a ~164px column on a 375px
+              phone (icon width + gap eating most of the card's inner
+              width), wrapping awkwardly. Row layout with the icon beside
+              the text is fine again from md+, where the fixed copy-column
+              width leaves real room. */}
+          <div className="flex flex-col items-center gap-4 text-center w-full md:flex-row md:items-start md:gap-8 md:text-left md:w-[var(--newsletter-copy-width)] md:py-4 md:shrink-0">
 
             {/* Decorative envelope icon, tilted -4° as per design */}
             <div className="flex items-center justify-center shrink-0 w-[4.23rem] h-[3.71rem]">