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.

README.md

@@ -1479,6 +1479,40 @@ while auditing every page's metadata were fixed in the same pass: 3
 route (now uses the real order number), and `/shop`/`/blog` were missing an
 Open Graph image.
 
+## Tablet responsive fixes (2026-07-24)
+
+A follow-up to the Mobile pass above — testing at real Tablet widths
+(768-1023px) surfaced a few spots where the Mobile-focused fixes had left
+Tablet worse off than before, or where a component's own structural
+breakpoint no longer needed to be as conservative as originally set:
+
+- **`Hero.tsx` reverted from `lg:` back to `md:` as its structural
+  breakpoint.** It was moved to `lg:` earlier (see the figma-to-nextjs
+  skill's Gotcha #5) because at `md:col-span-5` the text column was only
+  ~283px at 768px and the then-full-size CTA/subtitle text made the whole
+  row wrap to 3 cramped lines. The smaller fixed CTA/subtitle/icon sizes
+  added during the Mobile pass (for true phone widths) are well under half
+  that column's width, so the original wrapping problem doesn't recur —
+  moving back to `md:` means Tablet gets the real 5/7 grid (image beside
+  text) again instead of a phone-style stacked layout. Every `lg:`-gated
+  size override in that file moved to `md:` to match.
+- **`Tools.tsx`'s card icon** — full 56px size pushed from `md:` to `lg:`;
+  at Tablet the title/description text is still close to its own fluid
+  floor, and the full-size icon read as too big next to it.
+- **`About.tsx`'s text/photo columns** — the Desktop overlap layout
+  (`flex-[1.4_0_0]` on the photo, `-ml-48`, gradient) kicked in from `md:`
+  already, giving the text column (fixed against the smaller 1:1.4 share)
+  too little room for its fixed-width statement + quote/bio row at Tablet.
+  The ratio is swapped at Tablet (text gets the bigger 1.4 share, photo the
+  smaller one, no overlap) and reverts to the original ratio + overlap only
+  from `lg:` up, where it was designed for.
+- **`Newsletter.tsx`'s input+submit row** and **`Footer.tsx`'s logo/handle/
+  legal-links row** — both went side-by-side at `md:`, but the columns
+  around them (the newsletter card's fixed-width copy column; the footer's
+  3 groups sharing one `justify-between` row) didn't leave enough width at
+  768px. Both pushed from `md:flex-row` to `lg:flex-row` — stacked through
+  the whole Tablet range, side by side again once there's real room.
+
 ## Tests
 
 `npm run test:unit` (Vitest, `node` environment, no jsdom/Next.js runtime