Fix homepage Tablet layout: Hero grid, Tools icon, About columns, Newsletter/Footer stacking

- Hero.tsx: structural breakpoint reverted from lg: back to md: — the
  smaller CTA/subtitle/icon sizes added during the Mobile pass fit
  comfortably in the ~283px Tablet column, so the original 3-line-wrap
  problem that justified lg: doesn't recur. Tablet gets the real 5/7
  grid (image beside text) again instead of a stacked mobile layout.
- Tools.tsx: full-size (56px) card icon pushed from md: to lg: — at
  Tablet it dwarfed the still-close-to-floor title/description text.
- About.tsx: text/photo flex ratio swapped at Tablet (text gets the
  bigger share, no overlap) vs. the original ratio + overlap trick from
  lg: up, where it was designed for — Tablet's text column was too
  narrow for its fixed-width statement + quote/bio row otherwise.
- Newsletter.tsx/Footer.tsx: the input+button row and the logo/handle/
  legal-links row both went side-by-side at md:, but their surrounding
  columns didn't leave enough width at 768px — pushed to lg:flex-row.

app/components/Tools.tsx

@@ -42,9 +42,13 @@ export async function Tools() {
                 size-14 (56px) is a fixed value at every width (14 isn't
                 one of this project's fluid spacing-scale steps) — smaller
                 below md: so it doesn't dwarf the title/description text,
-                which does shrink toward its own fluid floor there. */}
-            <div className="relative flex items-center justify-center shrink-0 size-11 md:size-14">
-              <Image alt="" src={tool.icon} fill sizes="(min-width: 768px) 56px, 44px" className="object-contain" />
+                which does shrink toward its own fluid floor there. Full
+                56px only from lg: up — at md: (Tablet, where this grid
+                already switches to 3-up) the title/description are still
+                fairly close to their own fluid floor, so the full-size
+                icon read as too big next to them too. */}
+            <div className="relative flex items-center justify-center shrink-0 size-11 lg:size-14">
+              <Image alt="" src={tool.icon} fill sizes="(min-width: 1024px) 56px, 44px" className="object-contain" />
             </div>
 
             {/* Card content — self-stretch + h-full + justify-between so