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.

app/newsletter/components/HowItWorks.tsx

@@ -1,6 +1,7 @@
 import { Fragment } from "react";
 import Image from "next/image";
 import { Reveal, RevealGroup, RevealItem } from "../../components/Reveal";
+import { StepArrow } from "../../components/StepArrow";
 
 // Each icon's own real pixel dimensions (not uniformly square) — needed so
 // the `h-16 w-auto` sizing below infers the correct aspect ratio instead of
@@ -71,22 +72,15 @@ export function HowItWorks() {
               <p className="text-body-sm text-text-primary text-center">{step.desc}</p>
             </RevealItem>
             {i < steps.length - 1 && (
-              // md:mt-[1.625rem] (26px) centers the arrow on the h-16
-              // (64px) icon above it — same margin-based centering
-              // technique as Challenge's step connector and todo-cards'
-              // identical HowItWorks, not just the same icon asset.
-              <div className="flex items-center justify-center shrink-0 md:mt-[1.625rem]">
-                {/* object-contain — see todo-cards/HowItWorks.tsx's own
-                    comment on this same fix: the SVG's preserveAspectRatio
-                    ="none" stretched it to fill the square mobile box
-                    instead of keeping its thin-arrow ratio. */}
-                <Image
-                  alt=""
-                  src="/icon-arrow-connector.svg"
-                  width={24}
-                  height={24}
-                  className="w-6 h-6 object-contain rotate-90 md:w-10 md:h-3 md:rotate-0"
-                />
+              // md:mt-[1.5rem] centers the arrow on the h-16 icon above it,
+              // same technique as todo-cards'/Challenge's own step
+              // connector. Below md: pulled up with a negative margin so it
+              // sits nearer the icon row above it instead of dead-center in
+              // the whole gap between steps (fixed 2026-07-24, consistency
+              // with Challenge's icon-at-top layout). Bigger below md:
+              // (w-8 h-8, was w-6 h-6) per explicit feedback.
+              <div className="flex items-center justify-center shrink-0 -mt-2 md:mt-[1.5rem]">
+                <StepArrow className="w-8 h-8 rotate-90 md:w-10 md:h-4 md:rotate-0" />
               </div>
             )}
           </Fragment>