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/illustrations/AutomationFlow.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { BitAura } from "@/src/components/bits/BitAura";
+import { SwipeRow } from "@/src/components/SwipeRow";
 import * as React from "react";
 import { useNarrow } from "./useNarrow";
 import { useContent } from "@/src/components/ContentProvider";
@@ -391,7 +392,7 @@ export const AutomationFlow: React.FC = () => {
           </div>
 
           <div className="grid grid-cols-1 border-t border-slate-800 md:grid-cols-12">
-            <div className="border-b border-slate-800 px-5 py-5 md:col-span-7 md:border-b-0 md:border-r md:px-7">
+            <div className="px-5 py-5 md:col-span-7 md:border-r md:border-slate-800 md:px-7">
               <p className={`${MONO} m-0 text-slate-500`}>{automation.log}</p>
               <ol
                 className="m-0 mt-3 min-h-[7.5rem] list-none p-0 font-mono text-[12px] leading-relaxed text-slate-300 md:text-[13px]"
@@ -413,7 +414,7 @@ export const AutomationFlow: React.FC = () => {
                 ))}
               </ol>
             </div>
-            <ul className="m-0 flex list-none flex-col justify-center gap-2 px-5 py-5 md:col-span-5 md:px-7">
+            <ul className="m-0 hidden list-none flex-col justify-center gap-2 px-5 py-5 md:col-span-5 md:flex md:px-7">
               {KINDS.filter((kind) =>
                 flow.nodes.some((node) => node.kind === kind),
               ).map((kind) => (
@@ -442,7 +443,7 @@ export const AutomationFlow: React.FC = () => {
         </div>
       </BitAura>
 
-      <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-2">
+      <SwipeRow className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-2">
         <div className="rounded-3xl border border-slate-200 p-6 md:p-8">
           <p className={`${MONO} m-0 text-slate-400`}>{automation.byHand}</p>
           <p className="m-0 mt-3 font-sans text-lg leading-relaxed text-slate-500 md:text-xl">
@@ -455,7 +456,7 @@ export const AutomationFlow: React.FC = () => {
             {flow.automated}
           </p>
         </div>
-      </div>
+      </SwipeRow>
     </div>
   );
 };