Move structural breakpoint to 640px, shorten Hero heading

Tablet layout (768-1023px) hit the md: grid switch exactly where the
fluid clamp() tokens were already at their floor, leaving no room to
shrink. Moves the fluid floor and structural breakpoint down together
to sm: (640px) so real tablets always get the fluid, desktop-like
structure; consolidates the ad-hoc md:+lg: patchwork in Hero/About/
Newsletter/Footer/Tools back onto one line, leaving documented lg:
exceptions where content genuinely doesn't fit yet. Also shortens the
Hero heading to a single sentence with no trailing period (the brand's
orange dot already renders one, animated).

README.md

@@ -1855,6 +1855,56 @@ Verified locally by curling each page and grepping the rendered
 Google's Rich Results Test (no live Stripe-style external validation
 step for this), so worth a manual check there once deployed.
 
+## Structural breakpoint moved to 640px (2026-07-29)
+
+The Tablet layout (768-1023px) was still not landing right after the
+2026-07-24 fixes above: real tablets (768px+) hit the structural `md:`
+grid switch at the exact viewport width where the fluid `clamp()` tokens
+(`app/lib/fluid.ts`) were already at their smallest (floor) value, leaving
+no room to shrink — cramped images/text in 2-column sections. Fixed by
+moving both the fluid floor and the structural switch down together, from
+768px to Tailwind's `sm:` (640px):
+
+- **`app/lib/fluid.ts`**: `MIN_VW` 768 → 640. All `clamp()` values in
+  `app/globals.css`'s `@theme`/`:root` blocks are hand-authored (no build
+  step calls `fluid()`), so they were individually regenerated for the new
+  640→1440 range, not just re-anchored by editing the constant.
+- **Hero/About/Newsletter/Footer/Tools** — the `md:`+`lg:` two-tier
+  patchwork from the 2026-07-24 fixes above collapsed back onto a single
+  `sm:` structural line (grid/flex switches now happen at 640px, aligned
+  with the new fluid floor). Content-sizing exceptions that still don't
+  fit at 640px (Hero/Tools' fixed-size CTA/text/icon swaps, Newsletter's
+  input+button row, About's inner quote/bio row) stay gated behind `lg:`,
+  documented in each file as a deliberate exception, not a leftover.
+- Every other component with a plain `md:` structural switch (TrustRow,
+  Blog, TestimonialsGrid, ProductSpotlight, ProductGrid, RelatedProducts,
+  NewsletterModal, `/blog`, `/not-found`, both `HowItWorks` components)
+  renamed mechanically to `sm:`.
+- Components with a genuine fixed-width constraint (Cart/Checkout's
+  two-column split, `SectionTOC.tsx` + the 5 legal pages, the newsletter/
+  todo-cards hero/benefits sections, `/challenge`) stay on `lg:` — the
+  math still doesn't fit at 640px either, only their code comments'
+  "768px floor" language was updated.
+- **`Navbar.tsx`** is a deliberate, documented exception to the whole
+  migration — its `md:`/`lg:` 3-tier scheme (hamburger-only, hamburger+
+  inline-CTAs, full-inline) is about horizontal nav-link overflow, a
+  different failure mode than the vertical grid/flex reflows everywhere
+  else, with no fluid token that would make a full inline nav fit at
+  640px.
+
+No browser/screenshot tool is available in this environment, so this
+migration is verified by typecheck/build/lint/`test:unit` only — actual
+visual confirmation at 640/768/1024/1440px is still owed by the user.
+
+Same session: **`Hero.tsx`'s heading** shortened from two sentences
+("Verliere dich nicht im Mehr. Finde heraus, was wichtig ist.") to one
+("Finde heraus, was wichtig ist") with no trailing period, since the
+brand's orange dot (`PopIn`) already renders one, animated, right after
+it. The homepage's **"3x3-System" werkzeuge-card** description was also
+lengthened to match the other two cards' length (see the Payload repo's
+own README for the `fix-3x3-copy-length.ts` one-off that changed the
+live content).
+
 ## Tests
 
 `npm run test:unit` (Vitest, `node` environment, no jsdom/Next.js runtime