docs: meet the mobile baseline, which the carousel was not doing

Checked the section against MOBILE.md at its three reference widths instead
of assuming the breakpoints were enough. Two real failures at 360px.

The arrows sat in the heading's flex row, taking 96px from a 328px card and
crushing the lede into a four-line column — for a control that swiping
already provides. Below 640px they are now gone, the header is a single
column, one card shows at 86% so the next one peeks, and the affordance is
the right-edge scroll-fade MOBILE.md already documents for horizontal
scrollers. The fade lifts at the end of the travel, so the at-end state is
computed whether or not an arrow exists to consume it.

The arrow and add-to-compare buttons were 40px against a 44px floor. Both
are 44 now. A card title's own box is shorter, but its hit area is the whole
card through the ::after overlay, so it passes on the target that actually
receives the tap.

360, 390 and 430 now all report zero overflow, no failing tap targets and no
text under 11px. MOBILE.md wanted a Playwright width check and recorded that
Playwright was not in the project; it is, so the journey now carries one for
this page.

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

docs/superpowers/specs/2026-09-21-similar-schools-nearby-design.md

@@ -223,13 +223,38 @@ beyond a reader with no JavaScript.
 So the scroller is a plain overflowing `<ul>` with `scroll-snap-type: x
 mandatory`, and the arrows call `scrollBy` on it. With no JavaScript it
 degrades to a horizontally scrollable row that still works by touch and by
-trackpad. Three cards are visible at desktop width, two below 820px, and one
-below 560px, where touch swiping makes the arrows redundant but harmless.
+trackpad. Three cards are visible at desktop width and two below 820px.
 
 **Arrows appear only when there is somewhere to go** — that is, only when more
 than three schools were found. Each disables itself at its own end of the
 travel.
 
+#### Below 640px the arrows go away
+
+This follows [MOBILE.md](../../../MOBILE.md), which makes 360px the design
+floor and mobile the primary target at ≥55% of traffic.
+
+Kept in the heading's flex row at 360px, the two arrow buttons take 96px from a
+328px card and crush the lede into a four-line column — measured, not guessed.
+And swiping already does what they do. So below 640px the header becomes a
+single column, the arrows are not rendered, one card shows at 86% width so the
+next one peeks, and the affordance is carried by the right-edge scroll-fade that
+MOBILE.md documents for exactly this case:
+
+```css
+mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
+```
+
+The fade lifts at the end of the travel, where there is nothing left to hint
+at. That means the at-end state must be computed whether or not an arrow exists
+to consume it — on mobile it drives the mask alone.
+
+**Every interactive element clears 44×44px**, per MOBILE.md's iOS HIG check: the
+arrow buttons and the add-to-compare button are both 44px, up from the 40px they
+were first drawn at. A card title's own box is shorter than that, but its hit
+area is the whole card through the `::after` overlay, so it passes on the target
+that actually receives the tap.
+
 **The edge test needs a tolerance, and this is not fussiness.** The scroller
 carries 2px of padding so focus rings are not clipped, and scroll-snap treats
 that padding as the first card's snap position: a scroller sitting at its start
@@ -355,6 +380,8 @@ repository's rule on user-facing behaviour:
   moves the row
 - selecting a school does not reset the scroll position
 - add-to-compare reaches `/compare` with the expected `urns`
+- at 360, 390 and 430px: no horizontal overflow, every interactive element in the
+  section clears 44×44px, and no arrows are rendered
 
 The E2E gate runs after merge on this project, so these journeys are not
 provable in the PR checks; the PR is verified on the unit tests, and the