From d6c1852509c68f3d04fe3eb64c48844508b03091 Mon Sep 17 00:00:00 2001
From: esson <55195336+githubesson@users.noreply.github.com>
Date: Fri, 30 Oct 2026 18:38:21 +0000
Subject: [PATCH 1/4] Landing: a polish pass that drops the template effects

The landing page kept its palette, Geist, layout, device showcase and
every demo's motion, and lost the effects that made it read like any
developer-tool page:

- Gradient-filled headings, the blurred glow and blueprint grid behind
  the hero and the closing call to action, the grid behind the
  architecture diagram, and the pointer spotlight on cards. Cards are a
  surface step and a hairline, with a small shadow in light mode only.
- The "New" pill above the headline and the docker command pill under
  the hero and closing buttons (the self-host terminal has all three
  commands). The hero is the headline, two buttons and the devices; the
  buttons share one width when stacked on phones.
- Uppercase tracked mono labels (section labels, "One server, every
  screen", "Built with", Replay, Collaborative, Listening to Lumen) are
  sentence case; mono stays for files, paths, byte ranges and commands.
  Headings are weight 500 with looser tracking; small titles lose
  tracking-tight.
- Decorative icons: section-label dots, the AudioLines before the
  mobile footnote, an icon in each format chip, tiles behind the
  security icons, the footer's status dot. The Web download card's
  dashed placeholder and "Works in mobile browsers too" fake button are
  two plain rows and a note, like the other cards.
- Copy: no trailing periods on headings, card lines or captions;
  "Self-host in 5 minutes" is "Set up your server", the FAQ heading is
  "Before you set it up", "Scrub anywhere, instantly" is "Scrub
  anywhere".
- Motion: the hero entrance has no blur, the "healthy" dot no longer
  pings, the handoff demo's active card doesn't scale, and the scroll
  reveal runs once per section instead of per card with a stagger
  (threshold 0, since a section can be taller than the viewport).

ui-policy.json drops the two exceptions for the gradient headings and
the grid layers, which no longer exist.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 landing/src/App.tsx                           |  2 +-
 landing/src/components/Download.tsx           | 73 ++++++--------
 landing/src/components/Faq.tsx                |  6 +-
 landing/src/components/Footer.tsx             | 28 +++---
 landing/src/components/Hero.tsx               | 52 ++--------
 landing/src/components/Logo.tsx               |  2 +-
 landing/src/components/Nav.tsx                |  6 +-
 landing/src/components/Platforms.tsx          | 17 ++--
 landing/src/components/SelfHost.tsx           | 38 +++-----
 .../src/components/features/FeatureCard.tsx   | 15 +--
 landing/src/components/features/Features.tsx  | 30 +++---
 .../src/components/features/HandoffDemo.tsx   |  5 +-
 .../src/components/features/MiniFeatures.tsx  | 28 +++---
 .../src/components/features/PlaylistDemo.tsx  |  6 +-
 .../src/components/features/ReplayDemo.tsx    |  8 +-
 landing/src/components/ui.tsx                 | 67 ++-----------
 landing/src/index.css                         | 96 +++----------------
 landing/src/lib/hooks.ts                      | 16 +---
 landing/tests/page.ui.ts                      |  2 +-
 landing/ui-policy.json                        | 10 --
 20 files changed, 139 insertions(+), 368 deletions(-)

diff --git a/landing/src/App.tsx b/landing/src/App.tsx
index 6832b039..f08e0428 100644
--- a/landing/src/App.tsx
+++ b/landing/src/App.tsx
@@ -18,7 +18,7 @@ export default function App() {
     <>
       <Nav repo={repo} theme={theme} onToggleTheme={toggle} />
       <main>
-        <Hero repo={repo} />
+        <Hero />
         <Platforms />
         <Features />
         <SelfHost />
diff --git a/landing/src/components/Download.tsx b/landing/src/components/Download.tsx
index 2f24e704..7ccb125e 100644
--- a/landing/src/components/Download.tsx
+++ b/landing/src/components/Download.tsx
@@ -1,37 +1,42 @@
 import { ArrowUpRight, Globe, Smartphone } from "lucide-react";
 import type { ComponentType, ReactNode, SVGProps } from "react";
 import type { RepoInfo } from "../lib/github";
-import { spotlight } from "../lib/hooks";
 import { MOBILE_README_URL, RELEASES_URL } from "../lib/site";
 import { AndroidIcon, AppleIcon, LinuxIcon, WindowsIcon } from "./icons";
-import { ButtonLink, SectionHeading, delay } from "./ui";
+import { SectionHeading } from "./ui";
 
 type Icon = ComponentType<SVGProps<SVGSVGElement>>;
 
-function PlatformRow({ icon: I, name, formats, href }: { icon: Icon; name: string; formats: string; href: string }) {
-  return (
-    <a
-      href={href}
-      target="_blank"
-      rel="noreferrer"
-      className="press group flex items-center gap-3 rounded-lg border border-border bg-background/60 px-3 py-2.5 hover:border-ring/60 hover:bg-accent/50"
-    >
+const ROW = "flex items-center gap-3 rounded-lg border border-border bg-background/60 px-3 py-2.5";
+
+/** A platform and what you get for it. With `href` it links out to the
+ *  download; without, it's a plain row with nothing to fetch. */
+function PlatformRow({ icon: I, name, formats, href }: { icon: Icon; name: string; formats: string; href?: string }) {
+  const body = (
+    <>
       <I className="size-4 text-muted-foreground" />
       <span className="text-sm font-medium">{name}</span>
       <span className="ml-auto font-mono text-[11px] text-muted-foreground">{formats}</span>
+    </>
+  );
+  if (!href) return <div className={ROW}>{body}</div>;
+  return (
+    <a href={href} target="_blank" rel="noreferrer" className={`press group ${ROW} hover:border-ring/60 hover:bg-accent/50`}>
+      {body}
       <ArrowUpRight className="size-3.5 text-muted-foreground transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
     </a>
   );
 }
 
-function Card({ title, badge, children, stagger = 0 }: { title: string; badge?: ReactNode; children: ReactNode; stagger?: number }) {
+function Card({ title, meta, children, note }: { title: string; meta?: ReactNode; children: ReactNode; note: string }) {
   return (
-    <div onPointerMove={spotlight} style={delay(stagger)} className="card-surface spotlight reveal flex flex-col rounded-2xl p-6">
+    <div className="card-surface flex flex-col rounded-2xl p-6">
       <div className="flex items-center justify-between">
-        <h3 className="font-semibold tracking-tight">{title}</h3>
-        {badge}
+        <h3 className="font-medium">{title}</h3>
+        {meta}
       </div>
-      <div className="mt-5 flex flex-1 flex-col gap-2">{children}</div>
+      <div className="mt-5 flex flex-col gap-2">{children}</div>
+      <p className="mt-auto pt-5 text-xs text-muted-foreground">{note}</p>
     </div>
   );
 }
@@ -41,47 +46,31 @@ export default function Download({ repo }: { repo: RepoInfo }) {
 
   return (
     <section id="download" className="relative py-28">
-      <div className="mx-auto max-w-6xl px-5">
-        <SectionHeading eyebrow="Download">Get the apps.</SectionHeading>
+      <div className="reveal mx-auto max-w-6xl px-5">
+        <SectionHeading eyebrow="Download">Get the apps</SectionHeading>
 
         <div className="mt-16 grid gap-4 lg:grid-cols-3">
           <Card
             title="Desktop"
-            badge={
-              repo.release && (
-                <span className="rounded-full border border-border px-2 py-0.5 font-mono text-[11px] text-muted-foreground">
-                  {repo.release.tag}
-                </span>
-              )
-            }
+            meta={repo.release && <span className="font-mono text-xs text-muted-foreground">{repo.release.tag}</span>}
+            note="Unsigned builds. Discord Rich Presence and in-app updates on Windows and Linux."
           >
             <PlatformRow icon={WindowsIcon} name="Windows" formats="installer · portable" href={href} />
             <PlatformRow icon={AppleIcon} name="macOS" formats="universal .dmg" href={href} />
             <PlatformRow icon={LinuxIcon} name="Linux" formats=".AppImage · .deb" href={href} />
-            <p className="mt-auto pt-3 text-xs text-muted-foreground">
-              Unsigned builds. Discord Rich Presence and in-app updates on Windows and Linux.
-            </p>
           </Card>
 
-          <Card title="Mobile" stagger={80}>
+          <Card
+            title="Mobile"
+            note="Not in the stores yet. The Expo app builds from source with your own Apple or Google account."
+          >
             <PlatformRow icon={AppleIcon} name="iOS" formats="build with EAS" href={MOBILE_README_URL} />
             <PlatformRow icon={AndroidIcon} name="Android" formats="build with EAS" href={MOBILE_README_URL} />
-            <p className="mt-auto pt-3 text-xs text-muted-foreground">
-              Not in the stores yet. The Expo app builds from source with your own Apple or Google account.
-            </p>
           </Card>
 
-          <Card title="Web" stagger={160}>
-            <div className="flex flex-1 flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-border py-6 text-center">
-              <span className="grid size-10 place-items-center rounded-full bg-brand-soft text-brand">
-                <Globe className="size-5" />
-              </span>
-              <span className="text-sm font-medium">Already running</span>
-              <span className="font-mono text-xs text-muted-foreground">ships with the server</span>
-            </div>
-            <ButtonLink href="#self-host" variant="outline" size="sm" className="mt-2">
-              <Smartphone /> Works in mobile browsers too
-            </ButtonLink>
+          <Card title="Web" note="Nothing to install. Open your server's address on a computer or a phone.">
+            <PlatformRow icon={Globe} name="Any browser" formats="ships with the server" />
+            <PlatformRow icon={Smartphone} name="Phone browsers" formats="same address" />
           </Card>
         </div>
       </div>
diff --git a/landing/src/components/Faq.tsx b/landing/src/components/Faq.tsx
index de8d4f8e..1cf7bfc9 100644
--- a/landing/src/components/Faq.tsx
+++ b/landing/src/components/Faq.tsx
@@ -93,11 +93,11 @@ export default function Faq() {
   const [open, setOpen] = useState<number | null>(0);
   return (
     <section id="faq" className="py-28">
-      <div className="mx-auto grid max-w-6xl gap-12 px-5 lg:grid-cols-[1fr_1.6fr]">
+      <div className="reveal mx-auto grid max-w-6xl gap-12 px-5 lg:grid-cols-[1fr_1.6fr]">
         <SectionHeading eyebrow="FAQ" align="left">
-          Questions, answered.
+          Before you set it up
         </SectionHeading>
-        <div className="reveal border-t border-border">
+        <div className="border-t border-border">
           {QUESTIONS.map((item, i) => (
             <Item key={item.q} {...item} open={open === i} onToggle={() => setOpen(open === i ? null : i)} />
           ))}
diff --git a/landing/src/components/Footer.tsx b/landing/src/components/Footer.tsx
index 948257d7..509fd8e3 100644
--- a/landing/src/components/Footer.tsx
+++ b/landing/src/components/Footer.tsx
@@ -1,20 +1,18 @@
 import { ArrowRight, Star } from "lucide-react";
 import type { RepoInfo } from "../lib/github";
-import { INSTALL_STEPS, ISSUES_URL, README_URL, RELEASES_URL, REPO_URL } from "../lib/site";
+import { ISSUES_URL, README_URL, RELEASES_URL, REPO_URL } from "../lib/site";
 import { GitHubIcon } from "./icons";
 import Logo, { LogoMark } from "./Logo";
-import { ButtonLink, CommandPill } from "./ui";
+import { ButtonLink } from "./ui";
 
 export function FinalCta({ repo }: { repo: RepoInfo }) {
   return (
-    <section className="relative overflow-hidden px-5 pb-28">
-      <div className="card-surface reveal relative mx-auto max-w-6xl overflow-hidden rounded-3xl px-6 py-20 text-center">
-        <div className="bg-grid pointer-events-none absolute inset-0" />
-        <div className="glow pointer-events-none absolute left-1/2 top-full h-[420px] w-[900px] -translate-x-1/2 -translate-y-1/2" />
-        <div className="relative flex flex-col items-center">
-          <LogoMark className="size-14 shadow-lg" />
-          <h2 className="text-gradient mt-8 max-w-2xl text-balance text-4xl font-semibold tracking-[-0.035em] sm:text-5xl">
-            Own your music again.
+    <section className="px-5 pb-28">
+      <div className="card-surface reveal mx-auto max-w-6xl rounded-3xl px-6 py-20 text-center">
+        <div className="flex flex-col items-center">
+          <LogoMark className="size-14" />
+          <h2 className="mt-8 max-w-2xl text-balance text-4xl font-medium tracking-[-0.02em] sm:text-5xl">
+            Own your music again
           </h2>
           <div className="mt-10 flex flex-col items-center gap-3 sm:flex-row">
             <ButtonLink href="#self-host" size="lg">
@@ -30,7 +28,6 @@ export function FinalCta({ repo }: { repo: RepoInfo }) {
               )}
             </ButtonLink>
           </div>
-          <CommandPill command={INSTALL_STEPS[2].cmd} className="mt-4" />
         </div>
       </div>
     </section>
@@ -68,10 +65,7 @@ export default function Footer() {
       <div className="mx-auto grid max-w-6xl gap-10 px-5 py-14 sm:grid-cols-[1.5fr_repeat(3,1fr)]">
         <div className="flex flex-col gap-4">
           <Logo />
-          <span className="flex items-center gap-2 text-xs text-muted-foreground">
-            <span className="size-1.5 rounded-full bg-success" />
-            Self-hosted. No accounts with us, no ads.
-          </span>
+          <span className="text-xs text-muted-foreground">Self-hosted, no accounts with us, no ads</span>
         </div>
         {COLUMNS.map((c) => (
           <div key={c.title} className="flex flex-col gap-3">
@@ -90,9 +84,9 @@ export default function Footer() {
         ))}
       </div>
       <div className="border-t border-border">
-        <div className="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-2 px-5 py-6 font-mono text-[11px] text-muted-foreground">
+        <div className="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-2 px-5 py-6 text-xs text-muted-foreground">
           <span>© {new Date().getFullYear()} Lumen</span>
-          <span>Made for people who still keep their music in folders.</span>
+          <span>Made for people who still keep their music in folders</span>
         </div>
       </div>
     </footer>
diff --git a/landing/src/components/Hero.tsx b/landing/src/components/Hero.tsx
index cf318df3..28dffb24 100644
--- a/landing/src/components/Hero.tsx
+++ b/landing/src/components/Hero.tsx
@@ -1,61 +1,27 @@
 import { ArrowRight, Download } from "lucide-react";
-import type { RepoInfo } from "../lib/github";
-import { INSTALL_STEPS, RELEASES_URL } from "../lib/site";
 import Showcase from "./devices/Showcase";
-import { ButtonLink, CommandPill, delay } from "./ui";
-
-export default function Hero({ repo }: { repo: RepoInfo }) {
-  const release = repo.release;
+import { ButtonLink, delay } from "./ui";
 
+export default function Hero() {
   return (
-    <section id="top" className="relative overflow-hidden pb-24 pt-36 sm:pt-44">
-      <div className="bg-grid pointer-events-none absolute inset-0 -z-10" />
-      <div className="glow pointer-events-none absolute left-1/2 top-[520px] -z-10 h-[640px] w-[1100px] -translate-x-1/2" />
-
+    <section id="top" className="relative overflow-hidden pb-24 pt-28 sm:pt-40">
       <div className="mx-auto flex max-w-6xl flex-col items-center px-5 text-center">
-        <a
-          href={release?.url ?? RELEASES_URL}
-          target="_blank"
-          rel="noreferrer"
-          className="enter press group inline-flex items-center gap-2 rounded-full border border-border bg-background/60 py-1 pl-1 pr-3 text-[13px] backdrop-blur hover:border-ring/60"
-        >
-          <span className="rounded-full bg-brand-soft px-2 py-0.5 text-xs font-medium text-brand">
-            New
-          </span>
-          <span className="text-muted-foreground">
-            {release ? (
-              <>
-                Lumen <span className="font-mono text-foreground">{release.tag.replace(/^v/, "")}</span> is out
-              </>
-            ) : (
-              "Free, open source, self-hosted"
-            )}
-          </span>
-          <ArrowRight className="size-3.5 text-muted-foreground transition-transform group-hover:translate-x-0.5" />
-        </a>
-
-        <h1
-          className="enter text-gradient mt-7 max-w-4xl text-balance text-5xl font-semibold leading-[1.02] tracking-[-0.045em] sm:text-7xl"
-          style={delay(80)}
-        >
-          Your music library, <span className="text-brand-gradient">on your own server.</span>
+        <h1 className="enter max-w-4xl text-balance text-5xl font-medium leading-[1.04] tracking-[-0.03em] sm:text-7xl">
+          Your music library, on your own server
         </h1>
 
-        <div
-          className="enter mt-10 flex flex-col items-center gap-3 sm:flex-row"
-          style={delay(160)}
-        >
+        {/* Stacked on phones at one shared width; side by side from sm up. */}
+        <div className="enter mt-10 flex w-full max-w-xs flex-col gap-3 sm:w-auto sm:max-w-none sm:flex-row" style={delay(80)}>
           <ButtonLink href="#self-host" size="lg">
-            Self-host in 5 minutes <ArrowRight />
+            Set up your server <ArrowRight />
           </ButtonLink>
           <ButtonLink href="#download" size="lg" variant="outline">
             <Download /> Get the apps
           </ButtonLink>
         </div>
-        <CommandPill command={INSTALL_STEPS[2].cmd} className="enter mt-4" style={delay(220)} />
       </div>
 
-      <div className="enter-plain mx-auto mt-16 max-w-6xl px-5" style={delay(320)}>
+      <div className="enter mx-auto mt-16 max-w-6xl px-5" style={delay(160)}>
         <Showcase />
       </div>
     </section>
diff --git a/landing/src/components/Logo.tsx b/landing/src/components/Logo.tsx
index f019b45c..1fb8a059 100644
--- a/landing/src/components/Logo.tsx
+++ b/landing/src/components/Logo.tsx
@@ -20,7 +20,7 @@ export default function Logo({ className }: { className?: string }) {
   return (
     <span className={clsx("inline-flex items-center gap-2", className)}>
       <LogoMark />
-      <span className="text-base font-semibold tracking-tight">Lumen</span>
+      <span className="text-base font-semibold">Lumen</span>
     </span>
   );
 }
diff --git a/landing/src/components/Nav.tsx b/landing/src/components/Nav.tsx
index fcc46751..fa52616f 100644
--- a/landing/src/components/Nav.tsx
+++ b/landing/src/components/Nav.tsx
@@ -71,12 +71,12 @@ export default function Nav({
               href={REPO_URL}
               target="_blank"
               rel="noreferrer"
-              className="press hidden h-8 items-center gap-2 rounded-lg border border-border px-2.5 text-[13px] hover:bg-accent sm:inline-flex"
+              className="press hidden h-8 items-center gap-2 rounded-lg px-2.5 text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground sm:inline-flex"
             >
               <GitHubIcon className="size-4" />
-              <span className="font-medium">GitHub</span>
+              GitHub
               {repo.stars !== null && (
-                <span className="flex items-center gap-1 border-l border-border pl-2 font-mono text-xs text-muted-foreground">
+                <span className="flex items-center gap-1 font-mono text-xs">
                   <Star className="size-3" />
                   {repo.stars}
                 </span>
diff --git a/landing/src/components/Platforms.tsx b/landing/src/components/Platforms.tsx
index d4763d96..aebe398e 100644
--- a/landing/src/components/Platforms.tsx
+++ b/landing/src/components/Platforms.tsx
@@ -1,6 +1,5 @@
 import { Globe } from "lucide-react";
 import { AndroidIcon, AppleIcon, LinuxIcon, WindowsIcon } from "./icons";
-import { delay } from "./ui";
 
 const PLATFORMS = [
   { icon: Globe, label: "Web" },
@@ -16,9 +15,9 @@ const STACK = ["Go", "Postgres", "React", "Electron", "Expo", "Docker"];
 export default function Platforms() {
   return (
     <section className="border-y border-border bg-sidebar/50">
-      <div className="mx-auto grid max-w-6xl items-center gap-8 px-5 py-10 md:grid-cols-[1fr_auto_1fr]">
-        <div className="reveal flex flex-col gap-3">
-          <span className="font-mono text-[11px] uppercase tracking-[0.14em] text-muted-foreground">One server, every screen</span>
+      <div className="reveal mx-auto grid max-w-6xl items-center gap-8 px-5 py-10 md:grid-cols-[1fr_auto_1fr]">
+        <div className="flex flex-col gap-3">
+          <span className="text-[13px] text-muted-foreground">One server, every screen</span>
           <div className="flex flex-wrap gap-x-6 gap-y-3">
             {PLATFORMS.map(({ icon: I, label }) => (
               <span key={label} className="flex items-center gap-2 text-sm text-foreground/80">
@@ -29,13 +28,11 @@ export default function Platforms() {
           </div>
         </div>
         <div className="hidden h-10 w-px bg-border md:block" />
-        <div className="reveal flex flex-col gap-3 md:items-end" style={delay(100)}>
-          <span className="font-mono text-[11px] uppercase tracking-[0.14em] text-muted-foreground">Built with</span>
-          <div className="flex flex-wrap gap-2">
+        <div className="flex flex-col gap-3 md:items-end">
+          <span className="text-[13px] text-muted-foreground">Built with</span>
+          <div className="flex flex-wrap gap-x-5 gap-y-3 text-sm text-foreground/80">
             {STACK.map((s) => (
-              <span key={s} className="rounded-md border border-border bg-background px-2 py-1 font-mono text-xs text-muted-foreground">
-                {s}
-              </span>
+              <span key={s}>{s}</span>
             ))}
           </div>
         </div>
diff --git a/landing/src/components/SelfHost.tsx b/landing/src/components/SelfHost.tsx
index c7845999..a64c9968 100644
--- a/landing/src/components/SelfHost.tsx
+++ b/landing/src/components/SelfHost.tsx
@@ -18,7 +18,7 @@ import { useEffect, useId, useState } from "react";
 import { useCopy, useInView, usePrefersReducedMotion } from "../lib/hooks";
 import { INSTALL_STEPS, README_URL } from "../lib/site";
 import IconSwap from "./IconSwap";
-import { ButtonLink, SectionHeading, delay } from "./ui";
+import { ButtonLink, SectionHeading } from "./ui";
 
 const OUTPUT = [
   { name: "postgres", detail: "healthy" },
@@ -156,11 +156,10 @@ function Node({
 /** Clients → server → storage. Requests travel in; audio comes back out. */
 function Architecture() {
   return (
-    <div className="card-surface relative flex items-center overflow-hidden rounded-2xl p-5">
-      <div className="bg-grid absolute inset-0 opacity-70 [mask-image:none]" />
+    <div className="card-surface flex items-center overflow-hidden rounded-2xl p-5">
       <svg
         viewBox="0 0 520 300"
-        className="relative h-auto w-full"
+        className="h-auto w-full"
         fill="none"
         role="img"
         aria-label="Web, desktop and mobile apps talk to the Lumen server, which reads Postgres and your music folder"
@@ -296,13 +295,6 @@ function Architecture() {
             Go · :8080
           </text>
           <circle cx={SERVER.x + SERVER.w / 2 - 22} cy={SERVER.y + 97} r="3" className="fill-success" />
-          <circle
-            cx={SERVER.x + SERVER.w / 2 - 22}
-            cy={SERVER.y + 97}
-            r="3"
-            className="fill-success motion-safe:animate-ping"
-            style={{ transformBox: "fill-box", transformOrigin: "center" }}
-          />
           <text
             x={SERVER.x + SERVER.w / 2 - 14}
             y={SERVER.y + 100.5}
@@ -325,11 +317,7 @@ const SECURITY = [
 ];
 
 function SecurityIcon({ icon: I }: { icon: typeof Globe }) {
-  return (
-    <span className="grid size-7 shrink-0 place-items-center rounded-md bg-muted">
-      <I className="size-3.5" />
-    </span>
-  );
+  return <I className="size-4 shrink-0 text-muted-foreground" />;
 }
 
 /** Phones get the security list folded into one card; four stacked cards
@@ -344,7 +332,7 @@ function SecurityDisclosure() {
         onClick={() => setOpen((o) => !o)}
         aria-expanded={open}
         aria-controls={id}
-        className="flex w-full items-center gap-3 px-4 py-3.5 text-left text-[13px] font-medium"
+        className="flex h-12 w-full items-center gap-3 px-4 text-left text-[13px] font-medium"
       >
         <SecurityIcon icon={ShieldCheck} />
         <span className="flex-1">Secure by default</span>
@@ -370,7 +358,7 @@ function SecurityDisclosure() {
             )}
           >
             {SECURITY.map(({ icon, text }) => (
-              <li key={text} className="flex items-center gap-3 py-1.5 text-[13px]">
+              <li key={text} className="flex items-center gap-3 py-2 text-[13px]">
                 <SecurityIcon icon={icon} />
                 {text}
               </li>
@@ -385,21 +373,21 @@ function SecurityDisclosure() {
 export default function SelfHost() {
   return (
     <section id="self-host" className="relative border-t border-border bg-sidebar/40 py-28">
-      <div className="mx-auto max-w-6xl px-5">
-        <SectionHeading eyebrow="Self-host">Up and running in three commands.</SectionHeading>
+      <div className="reveal mx-auto max-w-6xl px-5">
+        <SectionHeading eyebrow="Self-host">Up and running in three commands</SectionHeading>
 
         <div className="mt-16 grid grid-cols-1 gap-4 lg:grid-cols-2">
-          <div className="reveal min-w-0">
+          <div className="min-w-0">
             <Terminal />
           </div>
-          <div className="reveal grid min-w-0" style={delay(100)}>
+          <div className="grid min-w-0">
             <Architecture />
           </div>
-          <div className="reveal lg:col-span-2" style={delay(160)}>
+          <div className="lg:col-span-2">
             <SecurityDisclosure />
             <ul className="hidden gap-4 sm:grid sm:grid-cols-2 lg:grid-cols-4">
               {SECURITY.map(({ icon, text }) => (
-                <li key={text} className="card-surface flex items-center gap-3 rounded-xl px-4 py-3.5 text-[13px]">
+                <li key={text} className="card-surface flex h-12 items-center gap-3 rounded-xl px-4 text-[13px]">
                   <SecurityIcon icon={icon} />
                   {text}
                 </li>
@@ -408,7 +396,7 @@ export default function SelfHost() {
           </div>
         </div>
 
-        <div className="reveal mt-10 flex justify-center">
+        <div className="mt-10 flex justify-center">
           <ButtonLink href={README_URL} variant="outline">
             Read the setup guide
           </ButtonLink>
diff --git a/landing/src/components/features/FeatureCard.tsx b/landing/src/components/features/FeatureCard.tsx
index 161082f8..7a6b6f15 100644
--- a/landing/src/components/features/FeatureCard.tsx
+++ b/landing/src/components/features/FeatureCard.tsx
@@ -1,33 +1,22 @@
 import clsx from "clsx";
 import type { ReactNode } from "react";
-import { spotlight } from "../../lib/hooks";
-import { delay } from "../ui";
 
 export default function FeatureCard({
   title,
   line,
   children,
   className,
-  stagger = 0,
 }: {
   title: string;
   line: string;
   children: ReactNode;
   className?: string;
-  stagger?: number;
 }) {
   return (
-    <article
-      onPointerMove={spotlight}
-      style={delay(stagger)}
-      className={clsx(
-        "card-surface spotlight reveal group flex flex-col overflow-hidden rounded-2xl",
-        className,
-      )}
-    >
+    <article className={clsx("card-surface group flex flex-col overflow-hidden rounded-2xl", className)}>
       <div className="relative flex min-h-56 flex-1 items-center justify-center overflow-hidden p-6">{children}</div>
       <div className="border-t border-border/70 px-6 py-5">
-        <h3 className="text-base font-semibold tracking-tight">{title}</h3>
+        <h3 className="text-base font-medium">{title}</h3>
         {/* Two lines reserved, so the divider above lines up across a row even
             when one card's line wraps and its neighbour's doesn't. */}
         <p className="mt-1 min-h-[2lh] text-sm text-muted-foreground">{line}</p>
diff --git a/landing/src/components/features/Features.tsx b/landing/src/components/features/Features.tsx
index 1bf391c0..545bc5ee 100644
--- a/landing/src/components/features/Features.tsx
+++ b/landing/src/components/features/Features.tsx
@@ -1,4 +1,3 @@
-import { AudioLines } from "lucide-react";
 import { SectionHeading } from "../ui";
 import FeatureCard from "./FeatureCard";
 import HandoffDemo from "./HandoffDemo";
@@ -13,54 +12,50 @@ import ShareDemo from "./ShareDemo";
 export default function Features() {
   return (
     <section id="features" className="relative py-28">
-      <div className="mx-auto max-w-6xl px-5">
-        <SectionHeading eyebrow="Features">Everything a streaming app does. Minus the subscription.</SectionHeading>
+      <div className="reveal mx-auto max-w-6xl px-5">
+        <SectionHeading eyebrow="Features">Everything a streaming app does, minus the subscription</SectionHeading>
 
         <div className="mt-16 grid gap-4 lg:grid-cols-6">
           <FeatureCard
             className="lg:col-span-4"
-            title="Scrub anywhere, instantly"
-            line="Range-request streaming from your disk. Hover the waveform, click to seek."
+            title="Scrub anywhere"
+            line="Range requests straight from your disk: hover the waveform, click to seek"
           >
             <ScrubDemo />
           </FeatureCard>
           <FeatureCard
             className="lg:col-span-2"
             title="Pick up on any device"
-            line="Live sync over WebSockets, with remote control."
-            stagger={80}
+            line="Live sync over WebSockets, with remote control"
           >
             <HandoffDemo />
           </FeatureCard>
 
-          <FeatureCard className="lg:col-span-2" title="Replay, every year" line="Your listening recap, ready to share.">
+          <FeatureCard className="lg:col-span-2" title="Replay, every year" line="Your listening recap, ready to share">
             <ReplayDemo />
           </FeatureCard>
           <FeatureCard
             className="lg:col-span-2"
             title="Links that unfurl"
-            line="Public shares with previews, signed so they can't be forged."
-            stagger={80}
+            line="Public shares with previews, signed so they can't be forged"
           >
             <ShareDemo />
           </FeatureCard>
           <FeatureCard
             className="lg:col-span-2"
             title="Invite-only by design"
-            line="Mint invites with a role, max uses, and expiry."
-            stagger={160}
+            line="Mint invites with a role, max uses, and expiry"
           >
             <InviteDemo />
           </FeatureCard>
 
-          <FeatureCard className="lg:col-span-3" title="Playlists, together" line="Invite collaborators to any playlist.">
+          <FeatureCard className="lg:col-span-3" title="Playlists, together" line="Invite collaborators to any playlist">
             <PlaylistDemo />
           </FeatureCard>
           <FeatureCard
             className="lg:col-span-3"
             title="Importers that keep watch"
-            line="Poll external sources and file new music into the right folder."
-            stagger={80}
+            line="Poll external sources and file new music into the right folder"
           >
             <ImportersDemo />
           </FeatureCard>
@@ -68,9 +63,8 @@ export default function Features() {
 
         <MiniFeatures />
 
-        <p className="reveal mt-8 flex items-center justify-center gap-2 text-sm text-muted-foreground">
-          <AudioLines className="size-4 text-brand" />
-          Plus CarPlay, AirPlay, lock-screen controls, and offline downloads on mobile.
+        <p className="mt-8 text-center text-sm text-muted-foreground">
+          Plus CarPlay, AirPlay, lock-screen controls, and offline downloads on mobile
         </p>
       </div>
     </section>
diff --git a/landing/src/components/features/HandoffDemo.tsx b/landing/src/components/features/HandoffDemo.tsx
index 6eea90dc..34d08559 100644
--- a/landing/src/components/features/HandoffDemo.tsx
+++ b/landing/src/components/features/HandoffDemo.tsx
@@ -22,8 +22,7 @@ export default function HandoffDemo() {
   return (
     <div
       ref={ref}
-      // The active card scales up 2%; gap-2.5 keeps 8px between cards anyway.
-      className="flex w-full max-w-xs flex-col gap-2.5"
+      className="flex w-full max-w-xs flex-col gap-2"
       onPointerEnter={() => setPaused(true)}
       onPointerLeave={() => setPaused(false)}
     >
@@ -36,7 +35,7 @@ export default function HandoffDemo() {
             onClick={() => setActive(i)}
             className={clsx(
               "flex items-center gap-3 rounded-xl border px-3 py-2.5 text-left transition-[border-color,background-color,scale] duration-300 ease-[var(--ease-out)]",
-              on ? "scale-[1.02] border-foreground/25 bg-brand-soft active:scale-100" : "border-border bg-background/60 hover:bg-accent/60 active:scale-[0.97]",
+              on ? "border-foreground/25 bg-brand-soft" : "border-border bg-background/60 hover:bg-accent/60 active:scale-[0.97]",
             )}
           >
             <span
diff --git a/landing/src/components/features/MiniFeatures.tsx b/landing/src/components/features/MiniFeatures.tsx
index 7ac22855..7bd186ff 100644
--- a/landing/src/components/features/MiniFeatures.tsx
+++ b/landing/src/components/features/MiniFeatures.tsx
@@ -1,11 +1,10 @@
 import clsx from "clsx";
-import { Check, FileAudio, Search, UploadCloud } from "lucide-react";
+import { Check, Search, UploadCloud } from "lucide-react";
 import { useEffect, useState, type ReactNode } from "react";
-import { spotlight, useAutoplay, useInView } from "../../lib/hooks";
+import { useAutoplay, useInView } from "../../lib/hooks";
 import { byId } from "../../lib/music";
 import CoverImg from "../CoverImg";
 import { DiscordIcon } from "../icons";
-import { delay } from "../ui";
 
 // Small tiles are still by default, and each one plays a single small step of
 // its feature on hover, via the `play:` variant. Touch screens can't hover, so
@@ -37,15 +36,13 @@ function Tile({ title, line, children, stagger }: { title: string; line: string;
     <article
       ref={ref}
       data-play={autoplay && playing ? "" : undefined}
-      onPointerMove={spotlight}
-      style={delay(stagger)}
-      className="card-surface spotlight reveal group flex flex-col overflow-hidden rounded-2xl"
+      className="card-surface group flex flex-col overflow-hidden rounded-2xl"
     >
       <div className="relative flex h-36 items-center justify-center overflow-hidden px-6 pt-5" aria-hidden>
         {children}
       </div>
       <div className="px-6 pb-5 pt-4">
-        <h3 className="text-sm font-semibold tracking-tight">{title}</h3>
+        <h3 className="text-sm font-medium">{title}</h3>
         <p className="mt-1 text-sm text-muted-foreground">{line}</p>
       </div>
     </article>
@@ -60,10 +57,9 @@ function Formats() {
       {FORMATS.map((f, i) => (
         <span
           key={f}
-          className="flex h-9 flex-col items-center justify-center rounded-md border border-border bg-background/70 font-mono text-[11px] font-medium transition-[translate,border-color] duration-200 ease-[var(--ease-out)] play:-translate-y-0.5 play:border-foreground/20 motion-reduce:play:translate-y-0"
+          className="flex h-8 items-center justify-center rounded-md border border-border bg-background/70 font-mono text-[11px] font-medium transition-[translate,border-color] duration-200 ease-[var(--ease-out)] play:-translate-y-0.5 play:border-foreground/20 motion-reduce:play:translate-y-0"
           style={{ transitionDelay: `${i * 25}ms` }}
         >
-          <FileAudio className="mb-0.5 size-3 text-muted-foreground" />
           {f}
         </span>
       ))}
@@ -149,7 +145,7 @@ function Presence() {
   const t = byId("everywhere");
   return (
     <div className="w-full max-w-64 rounded-lg bg-muted/60 p-3 dark:bg-black/25">
-      <div className="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+      <div className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
         <DiscordIcon className="size-3" /> Listening to Lumen
       </div>
       <div className="mt-2 flex items-center gap-3">
@@ -232,12 +228,12 @@ function Upload() {
 }
 
 const TILES = [
-  { title: "Plays what you have", line: "FLAC, MP3, AAC, Opus, Ogg and WAV, served as-is.", body: <Formats /> },
-  { title: "Lyrics", line: "Time-synced when available, in a side panel.", body: <Lyrics /> },
-  { title: "Last.fm scrobbling", line: "Per user, now-playing and scrobbles.", body: <Scrobble /> },
-  { title: "Discord Rich Presence", line: "“Listening to Lumen”, with cover art.", body: <Presence /> },
-  { title: "Command palette", line: "⌘K to jump to any track, album, or artist.", body: <Palette /> },
-  { title: "Uploads & tag editing", line: "From the browser or your phone.", body: <Upload /> },
+  { title: "Plays what you have", line: "FLAC, MP3, AAC, Opus, Ogg and WAV, served as-is", body: <Formats /> },
+  { title: "Lyrics", line: "Time-synced when available, in a side panel", body: <Lyrics /> },
+  { title: "Last.fm scrobbling", line: "Per user, now-playing and scrobbles", body: <Scrobble /> },
+  { title: "Discord Rich Presence", line: "“Listening to Lumen”, with cover art", body: <Presence /> },
+  { title: "Command palette", line: "⌘K to jump to any track, album, or artist", body: <Palette /> },
+  { title: "Uploads & tag editing", line: "From the browser or your phone", body: <Upload /> },
 ];
 
 export default function MiniFeatures() {
diff --git a/landing/src/components/features/PlaylistDemo.tsx b/landing/src/components/features/PlaylistDemo.tsx
index bfc43384..55c7905e 100644
--- a/landing/src/components/features/PlaylistDemo.tsx
+++ b/landing/src/components/features/PlaylistDemo.tsx
@@ -22,7 +22,7 @@ function Avatar({ person, className }: { person: number; className?: string }) {
   return (
     <span
       className={clsx(
-        "grid place-items-center rounded-full bg-muted font-semibold text-foreground/80 ring-2 ring-card",
+        "grid place-items-center rounded-full bg-muted font-medium text-foreground/80 ring-2 ring-card",
         className,
       )}
       title={PEOPLE[person].name}
@@ -51,8 +51,8 @@ export default function PlaylistDemo() {
           ))}
         </div>
         <div className="min-w-0 flex-1">
-          <div className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">Collaborative</div>
-          <div className="truncate text-base font-semibold tracking-tight">Late drives</div>
+          <div className="text-xs text-muted-foreground">Collaborative</div>
+          <div className="truncate text-base font-medium">Late drives</div>
           <div className="text-xs tabular-nums text-muted-foreground">{20 + rows[0].key} tracks</div>
         </div>
         <div className="flex items-center gap-2">
diff --git a/landing/src/components/features/ReplayDemo.tsx b/landing/src/components/features/ReplayDemo.tsx
index b05e99a8..f1a84d83 100644
--- a/landing/src/components/features/ReplayDemo.tsx
+++ b/landing/src/components/features/ReplayDemo.tsx
@@ -56,10 +56,10 @@ export default function ReplayDemo() {
     <div ref={ref} className="flex w-full max-w-xs flex-col gap-4">
       <div className="flex items-end justify-between gap-3">
         <div>
-          <div className="font-mono text-[11px] uppercase tracking-[0.14em] text-muted-foreground">
+          <div className="text-xs text-muted-foreground">
             {active === null ? "Replay 2026" : `${MONTH_NAMES[active]} 2026`}
           </div>
-          <div className="mt-1 text-3xl font-semibold tabular-nums tracking-tight">
+          <div className="mt-1 text-3xl font-medium tabular-nums">
             {value.toLocaleString("en-US")}
             <span className="ml-1 text-sm font-normal text-muted-foreground">min</span>
           </div>
@@ -116,8 +116,8 @@ export default function ReplayDemo() {
         })}
       </div>
       <div className="flex justify-between font-mono text-[11px] text-muted-foreground">
-        <span>JAN</span>
-        <span>DEC</span>
+        <span>Jan</span>
+        <span>Dec</span>
       </div>
     </div>
   );
diff --git a/landing/src/components/ui.tsx b/landing/src/components/ui.tsx
index 1d1544c0..3ea1dd57 100644
--- a/landing/src/components/ui.tsx
+++ b/landing/src/components/ui.tsx
@@ -1,10 +1,7 @@
 import clsx from "clsx";
-import { Check, Copy } from "lucide-react";
 import { useId, type AnchorHTMLAttributes, type ButtonHTMLAttributes, type CSSProperties, type ReactNode } from "react";
-import IconSwap from "./IconSwap";
-import { useCopy } from "../lib/hooks";
 
-/** Stagger for `.reveal` elements. */
+/** Stagger for the hero's `.enter` elements. */
 export const delay = (ms: number) => ({ "--delay": `${ms}ms` }) as CSSProperties;
 
 type Variant = "primary" | "outline" | "ghost";
@@ -12,7 +9,7 @@ type Size = "sm" | "md" | "lg";
 
 const variants: Record<Variant, string> = {
   primary: "bg-primary text-primary-foreground hover:bg-primary/85",
-  outline: "border border-border bg-background/60 backdrop-blur hover:bg-accent dark:bg-input/20 dark:hover:bg-input/40",
+  outline: "border border-border bg-background hover:bg-accent dark:bg-input/20 dark:hover:bg-input/40",
   ghost: "hover:bg-accent dark:hover:bg-accent/60",
 };
 const sizes: Record<Size, string> = {
@@ -70,21 +67,7 @@ export function IconButton({
   );
 }
 
-/** Small pill label above section headings. */
-export function Eyebrow({ children, className }: { children: ReactNode; className?: string }) {
-  return (
-    <span
-      className={clsx(
-        "inline-flex items-center gap-2 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-muted-foreground",
-        className,
-      )}
-    >
-      <span className="size-1.5 rounded-full bg-brand" />
-      {children}
-    </span>
-  );
-}
-
+/** A section's name in small muted text, then its heading. */
 export function SectionHeading({
   eyebrow,
   children,
@@ -95,47 +78,9 @@ export function SectionHeading({
   align?: "center" | "left";
 }) {
   return (
-    <div className={clsx("reveal flex flex-col gap-4", align === "center" ? "items-center text-center" : "items-start")}>
-      <Eyebrow>{eyebrow}</Eyebrow>
-      <h2 className="text-gradient max-w-3xl text-balance text-4xl font-semibold tracking-[-0.035em] sm:text-5xl">
-        {children}
-      </h2>
+    <div className={clsx("flex flex-col gap-3", align === "center" ? "items-center text-center" : "items-start")}>
+      <span className="text-sm text-muted-foreground">{eyebrow}</span>
+      <h2 className="max-w-3xl text-balance text-4xl font-medium tracking-[-0.02em] sm:text-5xl">{children}</h2>
     </div>
   );
 }
-
-/** A shell command with a copy button. */
-export function CommandPill({
-  command,
-  className,
-  style,
-}: {
-  command: string;
-  className?: string;
-  style?: CSSProperties;
-}) {
-  const { copied, copy } = useCopy();
-  return (
-    <button
-      type="button"
-      onClick={() => copy(command)}
-      style={style}
-      className={clsx(
-        "press group inline-flex h-11 items-center gap-3 rounded-lg border border-border bg-card/70 pl-4 pr-2 font-mono text-[13px] backdrop-blur hover:border-ring/60",
-        className,
-      )}
-      aria-label={`Copy command: ${command}`}
-    >
-      <span className="text-brand select-none">$</span>
-      <span className="truncate">{command}</span>
-      <span className="grid size-7 place-items-center rounded-md text-muted-foreground transition-colors group-hover:bg-accent group-hover:text-foreground">
-        <IconSwap
-          show={copied === command ? "b" : "a"}
-          a={<Copy className="size-3.5" />}
-          b={<Check className="size-3.5 text-success" />}
-          className="size-3.5"
-        />
-      </span>
-    </button>
-  );
-}
diff --git a/landing/src/index.css b/landing/src/index.css
index bec90ecd..7b62559e 100644
--- a/landing/src/index.css
+++ b/landing/src/index.css
@@ -77,10 +77,7 @@
     to { background-color: transparent; }
   }
   @keyframes enter {
-    from { opacity: 0; transform: translateY(12px); filter: blur(4px); }
-  }
-  @keyframes enter-plain {
-    from { opacity: 0; transform: translateY(24px); }
+    from { opacity: 0; transform: translateY(12px); }
   }
   @keyframes fade-in {
     from { opacity: 0; }
@@ -145,7 +142,7 @@
   --brand: oklch(0.205 0 0);
   --brand-soft: oklch(0 0 0 / 0.05);
   --success: oklch(0.6 0.13 155);
-  --grid-line: oklch(0 0 0 / 0.05);
+  --shadow-card: 0 1px 2px oklch(0 0 0 / 0.05);
   --shadow-float: 0 1px 2px oklch(0 0 0 / 0.06), 0 12px 40px -12px oklch(0 0 0 / 0.18);
   color-scheme: light;
 }
@@ -170,7 +167,8 @@
   --brand: oklch(0.985 0 0);
   --brand-soft: oklch(1 0 0 / 0.07);
   --success: oklch(0.72 0.13 155);
-  --grid-line: oklch(1 0 0 / 0.045);
+  /* Depth on dark comes from the surface step and the hairline. */
+  --shadow-card: none;
   --shadow-float: 0 1px 2px oklch(0 0 0 / 0.4), 0 24px 60px -20px oklch(0 0 0 / 0.7);
   color-scheme: dark;
 }
@@ -199,83 +197,21 @@ body {
 
 /* ---------- Page-level treatments ---------- */
 
-/* Blueprint grid behind the hero, faded out at the edges. */
-.bg-grid {
-  background-image:
-    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
-    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
-  background-size: 48px 48px;
-  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 75%);
-}
-
-.glow {
-  background:
-    radial-gradient(40% 50% at 50% 50%, color-mix(in oklch, var(--foreground) 10%, transparent), transparent 70%),
-    radial-gradient(30% 40% at 30% 60%, color-mix(in oklch, var(--foreground) 5%, transparent), transparent 70%);
-  filter: blur(40px);
-}
-
-.text-gradient {
-  background: linear-gradient(180deg, var(--foreground) 30%, color-mix(in oklch, var(--foreground) 55%, transparent));
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-}
-
-.text-brand-gradient {
-  background: linear-gradient(100deg, var(--foreground) 10%, var(--muted-foreground) 100%);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-}
-
-/* Card with a hairline highlight on the top edge, like a lit bezel. */
+/* Raised card: one surface step up and a hairline. */
 .card-surface {
   background: var(--card);
   border: 1px solid var(--border);
-  box-shadow:
-    inset 0 1px 0 0 oklch(1 0 0 / 0.04),
-    var(--shadow-float);
+  box-shadow: var(--shadow-card);
 }
 
-/* Pointer spotlight on feature cards; --mx/--my are set from JS. */
-.spotlight {
-  position: relative;
-  isolation: isolate;
-}
-.spotlight::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, -40%), var(--brand-soft), transparent 60%);
-  opacity: 0;
-  /* Hidden, not just transparent, while idle, so contrast checkers can see
-     the card behind the text. visibility flips at the right end of the fade
-     in both directions. */
-  visibility: hidden;
-  transition:
-    opacity 200ms ease,
-    visibility 200ms;
-  pointer-events: none;
-  z-index: -1;
-}
-@media (hover: hover) and (pointer: fine) {
-  .spotlight:hover::before {
-    opacity: 1;
-    visibility: visible;
-  }
-}
-
-/* Scroll reveal. JS adds data-shown once the element enters the viewport.
-   Marketing entrance, so it may run longer than UI motion. */
+/* Scroll reveal, once per section. JS adds data-shown once the section
+   enters the viewport. */
 .reveal {
   opacity: 0;
-  transform: translateY(16px);
+  transform: translateY(12px);
   transition:
-    opacity 600ms var(--ease-out),
-    transform 600ms var(--ease-out);
-  transition-delay: var(--delay, 0ms);
+    opacity 500ms var(--ease-out),
+    transform 500ms var(--ease-out);
 }
 .reveal[data-shown] {
   opacity: 1;
@@ -286,12 +222,7 @@ body {
    JS reveal, so it starts without waiting for React and the observer, and
    stays smooth while the page is still loading. */
 .enter {
-  animation: enter 800ms var(--ease-out) both;
-  animation-delay: var(--delay, 0ms);
-}
-/* Same, without the blur: filters are expensive on large layers. */
-.enter-plain {
-  animation: enter-plain 900ms var(--ease-out) both;
+  animation: enter 500ms var(--ease-out) both;
   animation-delay: var(--delay, 0ms);
 }
 
@@ -323,8 +254,7 @@ body {
     transform: none;
     transition: opacity 400ms ease;
   }
-  .enter,
-  .enter-plain {
+  .enter {
     animation: fade-in 400ms ease both;
     animation-delay: var(--delay, 0ms);
   }
diff --git a/landing/src/lib/hooks.ts b/landing/src/lib/hooks.ts
index 68ce05d9..2d658081 100644
--- a/landing/src/lib/hooks.ts
+++ b/landing/src/lib/hooks.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState, type KeyboardEvent, type PointerEvent } from "react";
+import { useCallback, useEffect, useRef, useState, type KeyboardEvent } from "react";
 
 export type Theme = "light" | "dark";
 const THEME_KEY = "lumen-landing-theme";
@@ -65,7 +65,9 @@ export function usePrefersReducedMotion(onReduce?: () => void) {
   return reduced;
 }
 
-/** Marks every `.reveal` element with data-shown once it scrolls into view. */
+/** Marks every `.reveal` element with data-shown once its top edge scrolls
+ *  into view. Threshold 0, since a whole section can be taller than the
+ *  viewport. */
 export function useRevealOnScroll() {
   useEffect(() => {
     const els = document.querySelectorAll<HTMLElement>(".reveal:not([data-shown])");
@@ -78,7 +80,7 @@ export function useRevealOnScroll() {
           }
         }
       },
-      { rootMargin: "0px 0px -10% 0px", threshold: 0.1 },
+      { rootMargin: "0px 0px -10% 0px", threshold: 0 },
     );
     els.forEach((el) => io.observe(el));
     return () => io.disconnect();
@@ -112,14 +114,6 @@ export function useInterval(tick: () => void, ms: number, active = true) {
   }, [ms, active]);
 }
 
-/** Feeds pointer position to the `.spotlight` gradient. */
-export function spotlight(e: PointerEvent<HTMLElement>) {
-  const el = e.currentTarget;
-  const r = el.getBoundingClientRect();
-  el.style.setProperty("--mx", `${e.clientX - r.left}px`);
-  el.style.setProperty("--my", `${e.clientY - r.top}px`);
-}
-
 /** Clipboard API where available; otherwise the legacy execCommand path.
  *  navigator.clipboard only exists in secure contexts (HTTPS, localhost), so
  *  plain-HTTP self-hosted or LAN setups need the fallback. */
diff --git a/landing/tests/page.ui.ts b/landing/tests/page.ui.ts
index bc2c6ca0..45cf6e00 100644
--- a/landing/tests/page.ui.ts
+++ b/landing/tests/page.ui.ts
@@ -3,7 +3,7 @@ import { expectUI } from "lintapple/playwright";
 
 test.beforeEach(async ({ page }) => {
   // Fixed GitHub data keeps the run offline and renders the stars and the
-  // release pill.
+  // release tag.
   await page.route("https://api.github.com/repos/**", (route) => {
     const releases = new URL(route.request().url()).pathname.endsWith("/releases");
     return route.fulfill({
diff --git a/landing/ui-policy.json b/landing/ui-policy.json
index 1cfc1f0a..ad22703c 100644
--- a/landing/ui-policy.json
+++ b/landing/ui-policy.json
@@ -22,16 +22,6 @@
       "rules": ["font-family", "font-size", "text-contrast"],
       "reason": "Text drawn inside an SVG illustration: the self-host diagram and the MacBook's macOS menu bar. It is sized in viewBox units and axe cannot measure its background. Pixel sampling measured the diagram labels at 5.1:1 or more."
     },
-    {
-      "selector": ".text-gradient, .text-gradient *, .text-brand-gradient, .text-brand-gradient *",
-      "rules": ["text-contrast"],
-      "reason": "Gradient-filled headings (background-clip: text), which axe cannot measure. Pixel sampling measured the lightest end of the gradient at 4.1:1 or more; these are large text, which needs 3:1."
-    },
-    {
-      "selector": ".card-surface > .bg-grid ~ * *",
-      "rules": ["text-contrast"],
-      "reason": "Buttons in the closing call to action sit on translucent surfaces over the decorative grid and glow layers, which axe cannot see through. Pixel sampling measured 5.4:1 or more."
-    },
     {
       "selector": ".truncate, .truncate *",
       "rules": ["content-clipping"],

From 0ee218c15f3de6eacd9b66f1eee61fbe1d7fcd25 Mon Sep 17 00:00:00 2001
From: esson <55195336+githubesson@users.noreply.github.com>
Date: Fri, 30 Oct 2026 18:45:01 +0000
Subject: [PATCH 2/4] Landing: Web download rows without a border, so they
 don't read as links

The Web card's two rows have nothing to download, but they reused the
bordered surface of the Desktop and Mobile link rows next to them. They
keep the same grid and padding, with a transparent border and no fill.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 landing/src/components/Download.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/landing/src/components/Download.tsx b/landing/src/components/Download.tsx
index 7ccb125e..1876ec43 100644
--- a/landing/src/components/Download.tsx
+++ b/landing/src/components/Download.tsx
@@ -7,10 +7,11 @@ import { SectionHeading } from "./ui";
 
 type Icon = ComponentType<SVGProps<SVGSVGElement>>;
 
-const ROW = "flex items-center gap-3 rounded-lg border border-border bg-background/60 px-3 py-2.5";
+const ROW = "flex items-center gap-3 rounded-lg border px-3 py-2.5";
 
-/** A platform and what you get for it. With `href` it links out to the
- *  download; without, it's a plain row with nothing to fetch. */
+/** A platform and what you get for it. With `href` it's a bordered link to
+ *  the download; without, a borderless row in the same grid, so it doesn't
+ *  read as one of the links. */
 function PlatformRow({ icon: I, name, formats, href }: { icon: Icon; name: string; formats: string; href?: string }) {
   const body = (
     <>
@@ -19,9 +20,14 @@ function PlatformRow({ icon: I, name, formats, href }: { icon: Icon; name: strin
       <span className="ml-auto font-mono text-[11px] text-muted-foreground">{formats}</span>
     </>
   );
-  if (!href) return <div className={ROW}>{body}</div>;
+  if (!href) return <div className={`${ROW} border-transparent`}>{body}</div>;
   return (
-    <a href={href} target="_blank" rel="noreferrer" className={`press group ${ROW} hover:border-ring/60 hover:bg-accent/50`}>
+    <a
+      href={href}
+      target="_blank"
+      rel="noreferrer"
+      className={`press group ${ROW} border-border bg-background/60 hover:border-ring/60 hover:bg-accent/50`}
+    >
       {body}
       <ArrowUpRight className="size-3.5 text-muted-foreground transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
     </a>

From 192f117d2b0b8c9344cd0a6dc159d2f98fa5976c Mon Sep 17 00:00:00 2001
From: esson <55195336+githubesson@users.noreply.github.com>
Date: Fri, 30 Oct 2026 18:51:47 +0000
Subject: [PATCH 3/4] Landing: drop .animate-ping from the reduced-motion list

Its only user, the self-host diagram's pinging health dot, is gone.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 landing/src/index.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/landing/src/index.css b/landing/src/index.css
index 7b62559e..4ffc55c4 100644
--- a/landing/src/index.css
+++ b/landing/src/index.css
@@ -264,7 +264,6 @@ body {
   /* Decorative loops stop; the demos' autoplay is paused in JS. */
   .animate-eq,
   .animate-blink,
-  .animate-ping,
   .animate-pulse,
   .animate-spin,
   .animate-row-in,

From cf0b4f2e2ef065676c94da97839c2a9fc369b055 Mon Sep 17 00:00:00 2001
From: esson <55195336+githubesson@users.noreply.github.com>
Date: Fri, 30 Oct 2026 18:58:27 +0000
Subject: [PATCH 4/4] Landing: closing call to action stacks its buttons at one
 width on phones

Same treatment as the hero's buttons. Also rewords a MiniFeatures comment
that still pointed at the per-tile scroll reveal.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 landing/src/components/Footer.tsx                | 3 ++-
 landing/src/components/features/MiniFeatures.tsx | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/landing/src/components/Footer.tsx b/landing/src/components/Footer.tsx
index 509fd8e3..b6766b66 100644
--- a/landing/src/components/Footer.tsx
+++ b/landing/src/components/Footer.tsx
@@ -14,7 +14,8 @@ export function FinalCta({ repo }: { repo: RepoInfo }) {
           <h2 className="mt-8 max-w-2xl text-balance text-4xl font-medium tracking-[-0.02em] sm:text-5xl">
             Own your music again
           </h2>
-          <div className="mt-10 flex flex-col items-center gap-3 sm:flex-row">
+          {/* Stacked on phones at one shared width, as in the hero. */}
+          <div className="mt-10 flex w-full max-w-xs flex-col gap-3 sm:w-auto sm:max-w-none sm:flex-row">
             <ButtonLink href="#self-host" size="lg">
               Get started <ArrowRight />
             </ButtonLink>
diff --git a/landing/src/components/features/MiniFeatures.tsx b/landing/src/components/features/MiniFeatures.tsx
index 7bd186ff..ddfa6a2b 100644
--- a/landing/src/components/features/MiniFeatures.tsx
+++ b/landing/src/components/features/MiniFeatures.tsx
@@ -21,8 +21,8 @@ function Tile({ title, line, children, stagger }: { title: string; line: string;
 
   useEffect(() => {
     if (!autoplay) return;
-    // First step lands once the scroll reveal has settled; the stagger keeps
-    // neighbouring tiles from flipping in lockstep.
+    // First step lands a moment after the tile scrolls into view; the stagger
+    // keeps neighbouring tiles from flipping in lockstep.
     let id = 0;
     const flip = () => {
       setPlaying((p) => !p);