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/Hero.tsx

@@ -22,19 +22,19 @@ export function Hero() {
             viewport — this doubles as the page's entrance animation. */}
         <Reveal className="order-1 lg:order-none lg:col-span-5 flex flex-col gap-7 items-start pl-[var(--layout-padding-x)] pr-10 lg:pr-0">
 
-          {/* Heading — forced break after "darf" below lg: (1024px),
-              natural wrap from lg: up. Below lg: the Hero is stacked
-              full-width and narrower per-viewport, where natural wrap
-              produced an awkward break — force it after "darf" there via
-              a responsive <br/> (visible by default, turned off at lg:+).
-              From lg: up the 5/12 grid's text column wraps fine on its
-              own, no forced break needed. */}
+          {/* Heading — forced break after "darf" only in the sm-lg tablet
+              range (Hero stacked full-width, natural wrap there landed
+              awkwardly). Removed at true mobile widths (below sm:) 2026-07-24
+              — narrower still, natural wrap there reads fine, and the
+              forced break made "darf" the whole first line, leaving very
+              little text above the CTA. Natural wrap from lg: up too, once
+              the 5/12 grid gives the column real width again. */}
           <p
             className="font-semibold leading-[0] shrink-0 text-[0px] text-text-primary"
             style={{ fontFamily: "var(--font-playfair)" }}
           >
             <span className="text-display">
-              Produktivität darf<br className="lg:hidden" /> sich leicht anfühlen
+              Produktivität darf<br className="hidden sm:inline lg:hidden" /> sich leicht anfühlen
             </span>
             {/* Brand's signature orange dot (also in the logo/footer) —
                 bouncy pop-in once the heading scrolls into view, timed to
@@ -57,17 +57,14 @@ export function Hero() {
             href="/challenge"
             className="flex gap-4 items-center justify-center overflow-clip px-6 py-3 rounded-sm shrink-0 max-w-full bg-brand hover:brightness-95 active:scale-[0.97] transition-all"
           >
-            {/* whitespace-nowrap only from lg: up, where the 5-col text
-                column has room for the full phrase on one line. Below
-                lg: (stacked, narrower column) nowrap forced this button
-                wider than the column itself, overflowing on mobile —
-                fixed 2026-07-24 by letting it wrap to two lines instead
-                (leading-[2.375rem] was already sized for that). max-w-full
-                on the Link above is what actually makes the wrap happen —
-                without it, a flex item with items-start siblings just
-                grows to fit the unwrapped text instead of respecting the
-                column width. */}
-            <span className="font-semibold leading-[2.375rem] text-text-primary text-h3 lg:whitespace-nowrap not-italic">
+            {/* Letting this wrap to two lines below lg: (tried 2026-07-24)
+                put the icon beside a two-line text block, which read as
+                broken rather than intentional. Smaller fixed size below
+                lg: instead, so the full phrase fits on one line within
+                the stacked mobile column's width — text-h3's own 19px
+                floor was still too wide for that at ~236px of available
+                text budget on a 375px phone. */}
+            <span className="font-semibold leading-[2.375rem] text-text-primary text-[0.8125rem] lg:text-h3 whitespace-nowrap not-italic">
               Starte mit der 7-Tage-Challenge
             </span>
             <div className="relative h-[1.1875rem] w-[1.5625rem] shrink-0">
@@ -75,8 +72,12 @@ export function Hero() {
             </div>
           </Link>
 
-          {/* Social proof */}
-          <div className="flex gap-3 items-start overflow-clip shrink-0 w-full">
+          {/* Social proof — flex-wrap + justify-center rather than a fixed
+              breakpoint: at narrow widths avatars+text don't fit on one
+              row, so the text wraps to its own line and both lines end up
+              centered; from lg: up (real column width) it still fits on
+              one row exactly as before, so nothing changes there. */}
+          <div className="flex flex-wrap gap-3 items-center justify-center overflow-clip shrink-0 w-full">
             {/* Avatars — gap 2px, not overlapping */}
             <div className="flex gap-[0.125rem] items-center shrink-0">
               {["/avatar-1.jpg", "/avatar-2.jpg", "/avatar-3.jpg"].map((src, i) => (
@@ -89,7 +90,7 @@ export function Hero() {
                 </div>
               ))}
             </div>
-            <p className="flex-[1_0_0] font-normal leading-[1.5rem] text-text-primary text-body [word-break:break-word]">
+            <p className="flex-[1_0_0] font-normal leading-[1.5rem] text-text-primary text-body text-center [word-break:break-word]">
               10.000+ Menschen vertrauen <span className="whitespace-nowrap">einfach-produktiv</span>
             </p>
           </div>