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/challenge/page.tsx

@@ -4,6 +4,7 @@ import Image from "next/image";
 import { draftMode } from "next/headers";
 import { Footer } from "../components/Footer";
 import { Reveal, RevealGroup, RevealItem } from "../components/Reveal";
+import { StepArrow } from "../components/StepArrow";
 import { TestimonialsGrid } from "../components/TestimonialsGrid";
 import { LiveTestimonialsGrid } from "../components/LiveTestimonialsGrid";
 import { getTestimonials } from "../lib/payload";
@@ -251,23 +252,14 @@ export default async function ChallengePage() {
                   </div>
                 </RevealItem>,
                 i < steps.length - 1 ? (
-                  // Same /icon-arrow-connector.svg asset and rotate-on-stack
-                  // pattern as todo-cards/newsletter's HowItWorks — this
-                  // used to be its own hand-drawn SVG arrow, inconsistent
-                  // with those two. Always visible (rotated 90° while
-                  // stacked below lg, this page's own structural
-                  // breakpoint) rather than hidden below lg like before.
+                  // Shared StepArrow component (see its own file) — same
+                  // rotate-on-stack pattern as todo-cards/newsletter's
+                  // HowItWorks. Always visible (rotated 90° while stacked
+                  // below lg, this page's own structural breakpoint) rather
+                  // than hidden below lg like before. Bigger below lg:
+                  // (w-8 h-8, was w-6 h-6) per explicit feedback.
                   <div key={`arrow-${i}`} className="flex items-center justify-center shrink-0 lg:mt-5">
-                    {/* object-contain — same preserveAspectRatio="none" fix
-                        as todo-cards/newsletter's HowItWorks; the square
-                        mobile box was stretching this into a blob. */}
-                    <Image
-                      alt=""
-                      src="/icon-arrow-connector.svg"
-                      width={24}
-                      height={24}
-                      className="w-6 h-6 object-contain rotate-90 lg:w-10 lg:h-3 lg:rotate-0"
-                    />
+                    <StepArrow className="w-8 h-8 rotate-90 lg:w-10 lg:h-4 lg:rotate-0" />
                   </div>
                 ) : null,
               ])}