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

@@ -428,7 +428,17 @@ export function Navbar({ singleActiveProduct }: { singleActiveProduct: boolean }
               Figma's Navbar-Mobile component set exactly, see the plan.
               Matches the Figma NavLink component's hover: text never
               changes color, an underline (brand, 2px x 40px) fades in on
-              hover and stays on for the active section. */}
+              hover and stays on for the active section.
+
+              Deliberate exception to the site-wide sm: (640px) structural
+              consolidation (see the 640px-breakpoint plan): this md:/lg:
+              3-tier scheme (hamburger-only <768, hamburger+inline-CTAs
+              768-1023, full-inline ≥1024) is untouched by that migration.
+              Horizontal nav-link overflow is a different failure mode than
+              the vertical grid/flex reflows the rest of the site has —
+              there's no fluid token that shrinks link text to make a full
+              inline nav fit at 640px, and nothing here was ever tied to
+              the fluid token scale the way Hero/About/etc. were. */}
           <nav className="hidden lg:flex items-center gap-12">
             {navLinks.map((link) => {
               const isActive = isNavLinkActive(link.href, pathname, activeSection);