feat: a shorter page on phones

On a phone the homepage was about 29 screens long; it is now about 22.
The desktop layout is unchanged to the pixel.

Lists of equal items (automation notes, project fit, principles, reasons for
a web presentation, by hand vs. automated) are swiped through side by side
(SwipeRow) instead of stacked. The four service cards form a compact 2x2
grid, step lists spell out only the current step, the workflow legend and
the per-project task lists are left out, and sections use less padding.

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

apps/web/src/components/SwipeRow.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+/**
+ * SwipeRow: on phones the items stand side by side and are swiped through,
+ * with the next one peeking in; from tablet width on they fall back into the
+ * grid given by `className`. It keeps long lists of equal items from
+ * stretching the page on a small screen. Styles: `swipe-row` in globals.css.
+ */
+export const SwipeRow: React.FC<{
+  className?: string;
+  children: React.ReactNode;
+}> = ({ className = "", children }) => (
+  <div className={`swipe-row ${className}`}>
+    {React.Children.map(children, (child) => (
+      <div className="swipe-slide">{child}</div>
+    ))}
+  </div>
+);