feat(mobile): section-nav scroll affordance and drop illegible home previews

MOB-03: The school-detail section nav (SATs / Admissions / Pupils /
Location / History) overflows on phones (scrollWidth 462 vs clientWidth
356) with no signal that more tabs exist past the right edge. Add a
right-edge mask-image fade at ≤640px, scroll-snap on each link, and
bigger tap targets (min-height 36px, padding bumped). A scroll/resize
listener toggles an .atEnd class that removes the fade once the user
has scrolled to the last tab.

MOB-04: The "What you'll see on every school" cards rendered preview
visuals (mini cascade chart, Ofsted badge, compare table) with text
scaled down to 6–10px — unreadable on a phone. Hide .hiwVisual at
≤640px and let the explanatory text carry each card; tiny visible
text count on the home dropped from 51 to 8.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

nextjs-app/components/SchoolDetailView.module.css

@@ -190,6 +190,8 @@
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
+    scroll-snap-type: x proximity;
+    scroll-padding-inline: 1rem;
 }
 
 .sectionNav::-webkit-scrollbar {
@@ -202,6 +204,21 @@
     align-items: center;
 }
 
+/* Right-edge fade so users see there's more to scroll to. */
+@media (max-width: 640px) {
+    .sectionNav {
+        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
+                mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
+        padding-right: 1.75rem;
+    }
+
+    /* When scrolled to the end, drop the fade so the last item isn't dimmed. */
+    .sectionNav.atEnd {
+        -webkit-mask-image: none;
+                mask-image: none;
+    }
+}
+
 .sectionNavBack {
     display: inline-flex;
     align-items: center;
@@ -232,7 +249,8 @@
 }
 
 .sectionNavLink {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     padding: 0.3rem 0.625rem;
     font-size: 0.75rem;
     font-weight: 500;
@@ -241,6 +259,16 @@
     border-radius: 4px;
     transition: all 0.15s ease;
     white-space: nowrap;
+    scroll-snap-align: start;
+}
+
+@media (max-width: 640px) {
+    .sectionNavLink,
+    .sectionNavBack {
+        min-height: 36px;
+        padding: 0.5rem 0.75rem;
+        font-size: 0.8125rem;
+    }
 }
 
 .sectionNavLink:hover {