Fix orange dot/hero image visibility, arrow alignment, and add a mobile legal-page TOC

- PopIn (Home Hero's brand dot) switched from whileInView to animate — its
  translate-based entrance could push the element off-screen on a narrow
  phone before the IntersectionObserver ever saw it as visible, leaving it
  stuck invisible permanently.
- Hero image: no longer wrapped in Reveal below lg: — whileInView's margin
  meant it stayed at opacity:0 (a white gap above the fold) on short mobile
  viewports until scrolled. Reveal's fade-in kept from lg: up.
- "→ Label" CTA links (Tools.tsx, Blog.tsx) now use a flex row with the
  arrow as its own span instead of a literal inline "→" character, which
  doesn't reliably align to the surrounding text's cap-height.
- Replaced icon-arrow-connector.svg with a new shared StepArrow component
  (inline SVG) across all three step sections — the old asset's color
  couldn't be overridden from outside the SVG file, so it could never
  actually become brand-orange. Bigger and better-shaped below the
  structural breakpoint per feedback.
- Added MobileSectionTOC (SectionTOC.tsx) — a <details> accordion shown
  below lg: on Impressum/Datenschutz/AGB/Widerruf/Versand, which previously
  had no on-page navigation aid at all below lg: (the sidebar TOC is
  `hidden` entirely there).
- Updated the figma-to-nextjs skill with 8 new dated Gotchas from this
  mobile-responsive pass, and expanded Step 6's verification checklist.
- README: new "Mobile responsive pass" section summarizing the above.

README.md

@@ -1408,6 +1408,39 @@ session (low-stock digest, stale-unverified-accounts report, weekly revenue
 report, expired-discount-code cleanup) needed no monitor changes of their
 own; see the Payload README's "Jobs Queue" section.
 
+## Mobile responsive pass (2026-07-24)
+
+A full-site pass fixing concrete Mobile-width bugs across the Home Hero,
+Navbar, Newsletter, cart, `/challenge`, `/todo-cards`, blog detail, and the
+legal pages — found by testing on a real phone rather than just resizing a
+desktop browser to 768px. The detailed technical lessons (aspect-ratio
+distortion from mixing fluid/fixed sizing, `preserveAspectRatio="none"` SVGs,
+`whileInView` failing to trigger on short/narrow viewports, etc.) are written
+up as dated Gotchas in the `figma-to-nextjs` skill
+(`~/.claude/skills/figma-to-nextjs/SKILL.md`) rather than duplicated here —
+that's now the reference for "why" on any of this. Two changes are worth
+calling out specifically since they add new shared components:
+
+- **`app/components/StepArrow.tsx`** — a small inline-SVG connector arrow,
+  replacing `/icon-arrow-connector.svg` across all three "how it works" step
+  sections (`/challenge`, `/todo-cards`, `/newsletter`). The old asset's
+  color lived in a CSS custom property scoped to the SVG file itself, so it
+  could never actually become the brand orange used everywhere else once
+  loaded via `next/image` — converting it to a real component was the only
+  fix, and having one shared component means a future color/shape/size
+  tweak is one edit instead of three.
+- **`app/components/SectionTOC.tsx`'s `MobileSectionTOC`** — the
+  Impressum/Datenschutz/AGB/Widerruf/Versand table-of-contents sidebar was
+  `hidden` entirely below `lg:` (a 360px sidebar genuinely doesn't fit next
+  to a readable content column below that), which meant Mobile/Tablet had no
+  on-page navigation aid at all on these often-long pages — exactly where
+  scanning a long legal document by scrolling is hardest. `MobileSectionTOC`
+  is a `<details>/<summary>` accordion (no extra JS state needed) sharing the
+  same scroll-spy "active section" logic (extracted into a `useActiveSection`
+  hook) as the desktop sidebar nav, rendered as its own element right after
+  each page's heading — not nested inside the sidebar's `hidden lg:...`
+  wrapper, which would hide it too regardless of its own `lg:hidden` class.
+
 ## Tests
 
 `npm run test:unit` (Vitest, `node` environment, no jsdom/Next.js runtime