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

@@ -11,10 +11,10 @@ export async function TrustRow() {
   if (items.length === 0) return null;
 
   return (
-    <div className="w-full bg-bg-base flex flex-col md:flex-row gap-6 md:gap-12 items-start md:items-center justify-center py-8 px-[var(--layout-padding-x)]">
+    <div className="w-full bg-bg-base flex flex-col sm:flex-row gap-6 sm:gap-12 items-start sm:items-center justify-center py-8 px-[var(--layout-padding-x)]">
       {items.map((item, i) => (
-        <div key={item.id} className="flex items-center gap-6 md:gap-12">
-          {i > 0 && <div className="hidden md:block h-10 w-px bg-border" />}
+        <div key={item.id} className="flex items-center gap-6 sm:gap-12">
+          {i > 0 && <div className="hidden sm:block h-10 w-px bg-border" />}
           <div className="flex gap-4 items-center">
             <div className="relative size-8 shrink-0">
               <Image alt="" src={item.icon} fill sizes="32px" className="object-contain" />