feat: restore mini previews on the landing hero

The animated product mini-previews are back, recovered from before
the redesign into components/landing/mini-previews.tsx ('use client',
own module for separation). They render framed as product screenshots
(window chrome + bordered surface in the landing palette) in a
two-column hero, so they read as the real app sitting inside the
editorial marketing page. Hidden below 900px.

266/266 tests pass. Build clean. No migration.

app/(landing)/landing.css

@@ -77,6 +77,26 @@
 
 /* Hero */
 .landing-root .landing-hero { padding: 88px 0 72px; border-bottom: 1px solid var(--ln-border); }
+.landing-root .landing-hero-grid {
+  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
+}
+.landing-root .landing-preview-frame {
+  border: 1px solid var(--ln-border);
+  background: var(--ln-surface);
+  border-radius: 8px;
+  padding: 14px;
+}
+.landing-root .landing-preview-chrome {
+  display: flex; gap: 6px; padding: 2px 4px 12px;
+}
+.landing-root .landing-preview-chrome span {
+  width: 9px; height: 9px; border-radius: 50%;
+  background: var(--ln-border);
+}
+@media (max-width: 900px) {
+  .landing-root .landing-hero-grid { grid-template-columns: 1fr; gap: 40px; }
+  .landing-root .landing-hero-visual { display: none; }
+}
 .landing-root .landing-eyebrow {
   font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em;
   text-transform: uppercase; color: var(--ln-text-dim); margin-bottom: 24px;

app/(landing)/page.tsx

@@ -2,6 +2,7 @@ import Link from 'next/link'
 import { BrandMark } from '@/components/brand-mark'
 import { GithubIcon, ArrowIcon } from '@/components/landing/icons'
 import { ResourceShowcase } from '@/components/landing/resource-showcase'
+import { HeroPreviewCluster } from '@/components/landing/mini-previews'
 
 const MODULES = [
   { num: '01', title: 'Members', desc: 'Tiers, dues status, contact info, custom roles. Know who is current and who is not, at a glance.' },
@@ -45,21 +46,31 @@ export default function LandingPage() {
       </nav>
 
       <header className="landing-hero">
-        <div className="landing-container">
-          <p className="landing-eyebrow">Operating system for hackerspaces</p>
-          <h1 className="landing-display">
-            Run your <em>space</em>, not a spreadsheet
-          </h1>
-          <p className="landing-lede">
-            Members, dues, tasks, projects, ops docs, and governance in one
-            place. Built by people who have actually run these spaces, for the
-            people who keep them running.
-          </p>
-          <div className="landing-cta-row">
-            <Link href="/signup" className="landing-btn-accent">
-              Get started <ArrowIcon className="w-3.5 h-3.5" />
-            </Link>
-            <Link href="/login" className="landing-btn">Log in</Link>
+        <div className="landing-container landing-hero-grid">
+          <div>
+            <p className="landing-eyebrow">Operating system for hackerspaces</p>
+            <h1 className="landing-display">
+              Run your <em>space</em>, not a spreadsheet
+            </h1>
+            <p className="landing-lede">
+              Members, dues, tasks, projects, ops docs, and governance in one
+              place. Built by people who have actually run these spaces, for the
+              people who keep them running.
+            </p>
+            <div className="landing-cta-row">
+              <Link href="/signup" className="landing-btn-accent">
+                Get started <ArrowIcon className="w-3.5 h-3.5" />
+              </Link>
+              <Link href="/login" className="landing-btn">Log in</Link>
+            </div>
+          </div>
+          <div className="landing-hero-visual">
+            <div className="landing-preview-frame">
+              <div className="landing-preview-chrome" aria-hidden="true">
+                <span /><span /><span />
+              </div>
+              <HeroPreviewCluster />
+            </div>
           </div>
         </div>
       </header>