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).

app/todo-cards/components/HowItWorks.tsx

@@ -32,7 +32,7 @@ const steps = [
 
 export function HowItWorks() {
   return (
-    <section className="w-full bg-bg-base flex flex-col gap-12 items-center py-12 md:py-16 px-[var(--layout-padding-x)]">
+    <section className="w-full bg-bg-base flex flex-col gap-12 items-center py-12 sm:py-16 px-[var(--layout-padding-x)]">
       <Reveal className="flex flex-col gap-2 items-center text-center">
         <p
           className="font-semibold text-h-emphasis text-text-primary"
@@ -47,17 +47,17 @@ export function HowItWorks() {
 
       {/* Arrows always visible (see Divider lesson — hiding them below a
           breakpoint isn't the fix), just rotated 90° to point down while
-          stacked below md:. lg:px-[16.25rem] mirrors Figma's Desktop-only
+          stacked below sm:. lg:px-[16.25rem] mirrors Figma's Desktop-only
           px-[260px] inset — that value doesn't get its own fluid token
           since it's a pure aesthetic narrowing, not something that breaks
           if it's just absent below lg:. RevealGroup/RevealItem stagger the
           3 steps in on scroll, same pattern as Tools.tsx's card grid —
           arrows aren't part of the stagger (purely decorative connectors,
           not content), they just sit in the DOM between items. */}
-      <RevealGroup className="flex flex-col md:flex-row gap-8 items-center md:items-start w-full lg:px-[16.25rem]">
+      <RevealGroup className="flex flex-col sm:flex-row gap-8 items-center sm:items-start w-full lg:px-[16.25rem]">
         {steps.map((step, i) => (
           <Fragment key={step.title}>
-            <RevealItem className="group flex flex-col gap-4 items-center text-center flex-1 max-w-xs md:max-w-none">
+            <RevealItem className="group flex flex-col gap-4 items-center text-center flex-1 max-w-xs sm:max-w-none">
               {/* Explicit per-icon width/height (real pixel dimensions, not
                   a guessed/uniform size) — matters since one of the three
                   source PNGs isn't square (icon-step-2 is 180x168); passing
@@ -79,13 +79,13 @@ export function HowItWorks() {
               <p className="text-body-sm text-text-primary text-center">{step.desc}</p>
             </RevealItem>
             {i < steps.length - 1 && (
-              // md:mt-[1.625rem] (26px) centers the arrow on the h-16
+              // sm:mt-[1.625rem] (26px) centers the arrow on the h-16
               // (64px) icon above it — (64 - arrow's own 16px height) / 2
               // — same margin-based centering technique as Challenge's
               // step connector, not just the same icon asset. Bigger below
-              // md: (w-8 h-8, was w-6 h-6) per explicit feedback.
-              <div className="flex items-center justify-center shrink-0 md:mt-[1.5rem]">
-                <StepArrow className="w-8 h-8 rotate-90 md:w-10 md:h-4 md:rotate-0" />
+              // sm: (w-8 h-8, was w-6 h-6) per explicit feedback.
+              <div className="flex items-center justify-center shrink-0 sm:mt-[1.5rem]">
+                <StepArrow className="w-8 h-8 rotate-90 sm:w-10 sm:h-4 sm:rotate-0" />
               </div>
             )}
           </Fragment>

app/todo-cards/components/TodoKartenHero.tsx

@@ -50,7 +50,8 @@ export async function TodoKartenHero() {
       {/* Same lg:-only structural exception as the Home Hero (see
           figma-to-nextjs skill Gotcha #5) — a wide fixed-ratio photo next
           to a text column is exactly the shape that gets too cramped at
-          Tablet widths under the site-wide md: convention. lg:items-center
+          Tablet widths even under the site-wide sm: (640px) structural
+          consolidation. lg:items-center
           removed (default grid align-items is stretch) — that's what lets
           the breadcrumb below sit at a fixed Y position across every hero
           section on the site instead of shifting per page depending on how