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/newsletter/components/HowItWorks.tsx

@@ -39,7 +39,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"
@@ -53,14 +53,14 @@ export function HowItWorks() {
       </Reveal>
 
       {/* Same pattern as /todo-cards's HowItWorks: arrows always visible
-          (rotated to point down while stacked below md:), RevealGroup/
+          (rotated to point down while stacked below sm:), RevealGroup/
           RevealItem stagger the steps in. lg:px-[10rem] mirrors Figma's
           Desktop-only px-[160px] inset (no fluid token — pure aesthetic
           narrowing, fine to just drop below lg:). */}
-      <RevealGroup className="flex flex-col md:flex-row gap-8 items-center md:items-start w-full lg:px-[10rem]">
+      <RevealGroup className="flex flex-col sm:flex-row gap-8 items-center sm:items-start w-full lg:px-[10rem]">
         {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">
               <Image
                 src={step.icon}
                 alt=""
@@ -72,15 +72,15 @@ export function HowItWorks() {
               <p className="text-body-sm text-text-primary text-center">{step.desc}</p>
             </RevealItem>
             {i < steps.length - 1 && (
-              // md:mt-[1.5rem] centers the arrow on the h-16 icon above it,
+              // sm:mt-[1.5rem] centers the arrow on the h-16 icon above it,
               // same technique as todo-cards'/Challenge's own step
-              // connector. Below md: pulled up with a negative margin so it
+              // connector. Below sm: pulled up with a negative margin so it
               // sits nearer the icon row above it instead of dead-center in
               // the whole gap between steps (fixed 2026-07-24, consistency
-              // with Challenge's icon-at-top layout). Bigger below md:
+              // with Challenge's icon-at-top layout). Bigger below sm:
               // (w-8 h-8, was w-6 h-6) per explicit feedback.
-              <div className="flex items-center justify-center shrink-0 -mt-2 md:mt-[1.5rem]">
-                <StepArrow className="w-8 h-8 rotate-90 md:w-10 md:h-4 md:rotate-0" />
+              <div className="flex items-center justify-center shrink-0 -mt-2 sm:mt-[1.5rem]">
+                <StepArrow className="w-8 h-8 rotate-90 sm:w-10 sm:h-4 sm:rotate-0" />
               </div>
             )}
           </Fragment>

app/newsletter/components/WeeklyImpulsesHero.tsx

@@ -42,9 +42,10 @@ export function WeeklyImpulsesHero() {
     <section className="bg-bg-base w-full overflow-hidden">
       {/* Same lg:-only structural exception as Home/todo-cards Hero (see
           figma-to-nextjs skill Gotcha #5) — a wide fixed-ratio photo next
-          to a text column gets too cramped at Tablet widths under the
-          site-wide md: convention. lg:items-center removed — see the
-          breadcrumb/centering comment below, same fix as /todo-cards. */}
+          to a text column gets too cramped at Tablet widths even under
+          the site-wide sm: (640px) structural consolidation. lg:items-
+          center removed — see the breadcrumb/centering comment below,
+          same fix as /todo-cards. */}
       {/* pt-10 md:pt-12, no lg override — same fix and same reasoning as
           /todo-cards's Hero: this is now the only thing positioning the
           breadcrumb, and it must match /todo-cards's and /challenge's