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..1876ec43 100644
--- a/landing/src/components/Download.tsx
+++ b/landing/src/components/Download.tsx
@@ -1,37 +1,48 @@
 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 }) {
+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'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 = (
+    <>
+      <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} border-transparent`}>{body}</div>;
   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"
+      className={`press group ${ROW} border-border bg-background/60 hover:border-ring/60 hover:bg-accent/50`}
     >
-      <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>
+      {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 +52,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..b6766b66 100644
--- a/landing/src/components/Footer.tsx
+++ b/landing/src/components/Footer.tsx
@@ -1,22 +1,21 @@
 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">
+          {/* 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>
@@ -30,7 +29,6 @@ export function FinalCta({ repo }: { repo: RepoInfo }) {
               )}
             </ButtonLink>
           </div>
-          <CommandPill command={INSTALL_STEPS[2].cmd} className="mt-4" />
         </div>
       </div>
     </section>
@@ -68,10 +66,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 +85,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..ddfa6a2b 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
@@ -22,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);
@@ -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..4ffc55c4 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);
   }
@@ -334,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,
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"],