diff --git a/web/app/about/page.tsx b/web/app/about/page.tsx
index cf1a6c3a..a96fa8ea 100644
--- a/web/app/about/page.tsx
+++ b/web/app/about/page.tsx
@@ -6,6 +6,7 @@ import { HomePosterText } from '../../components/home/HomePosterText';
 import { ScribbleUnderline } from '../../components/home/icons';
 import { SiteFooter } from '../../components/SiteFooter';
 import { SiteNav } from '../../components/SiteNav';
+import { SiteNavActions } from '../../components/SiteNavActions';
 import { DEFAULT_OG_IMAGE_PATH, ogImage } from '../../lib/og-meta';
 import { absoluteUrl, SITE_NAME } from '../../lib/site';
 import s from '../landing.module.css';
@@ -66,20 +67,10 @@ export const metadata: Metadata = {
 };
 
 export default function AboutPage() {
-  const navGetStartedLink = (
-    <Link href="/docs" className={`${s.ctaPrimary} ${s.homeNavAction}`}>
-      Get Started
-    </Link>
-  );
-  const mobileGetStartedLink = (
-    <Link href="/docs" className={`${s.ctaPrimary} ${s.homeNavAction}`}>
-      Get Started
-    </Link>
-  );
 
   return (
     <div className={`${s.page} ${s.homePage}`}>
-      <SiteNav actions={navGetStartedLink} mobileMenuContent={mobileGetStartedLink} hideLinks />
+      <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
 
       <main className={s.homeMain}>
         <HomePosterText visual="relay" />
diff --git a/web/app/agents/[slug]/page.tsx b/web/app/agents/[slug]/page.tsx
index 3ea1e3ae..d1a93a20 100644
--- a/web/app/agents/[slug]/page.tsx
+++ b/web/app/agents/[slug]/page.tsx
@@ -1,9 +1,9 @@
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
-import { GitHubStarsBadge } from '../../../components/GitHubStars';
 import { SiteFooter } from '../../../components/SiteFooter';
 import { SiteNav } from '../../../components/SiteNav';
+import { SiteNavActions } from '../../../components/SiteNavActions';
 import { agentAsset, allAgentSlugs, getAgent } from '../../../lib/agents';
 import { absoluteUrl, SITE_NAME } from '../../../lib/site';
 import { AgentDetail } from './AgentDetail';
@@ -46,7 +46,7 @@ export default async function AgentPage({ params }: PageProps) {
 
   return (
     <>
-      <SiteNav actions={<GitHubStarsBadge />} />
+      <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
       <AgentDetail agent={agent} />
       <SiteFooter />
     </>
diff --git a/web/app/agents/page.tsx b/web/app/agents/page.tsx
index 9caf0b78..196e5c99 100644
--- a/web/app/agents/page.tsx
+++ b/web/app/agents/page.tsx
@@ -1,8 +1,8 @@
 import type { Metadata } from 'next';
 
-import { GitHubStarsBadge } from '../../components/GitHubStars';
 import { SiteFooter } from '../../components/SiteFooter';
 import { SiteNav } from '../../components/SiteNav';
+import { SiteNavActions } from '../../components/SiteNavActions';
 import { absoluteUrl, SITE_NAME } from '../../lib/site';
 import { AgentsGallery } from './AgentsGallery';
 
@@ -27,7 +27,7 @@ export const metadata: Metadata = {
 export default function AgentsPage() {
   return (
     <>
-      <SiteNav actions={<GitHubStarsBadge />} />
+      <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
       <AgentsGallery />
       <SiteFooter />
     </>
diff --git a/web/app/agents/register/checklist/page.tsx b/web/app/agents/register/checklist/page.tsx
index 97ff613f..40aa6a90 100644
--- a/web/app/agents/register/checklist/page.tsx
+++ b/web/app/agents/register/checklist/page.tsx
@@ -7,6 +7,7 @@ import remarkGfm from 'remark-gfm';
 import { mdxComponents } from '../../../../components/docs/mdx-components';
 import { SiteFooter } from '../../../../components/SiteFooter';
 import { SiteNav } from '../../../../components/SiteNav';
+import { SiteNavActions } from '../../../../components/SiteNavActions';
 import {
   REGISTER_CHECKLIST_BODY,
   REGISTER_CHECKLIST_MARKDOWN_URL,
@@ -62,7 +63,7 @@ export default async function RegisterChecklistPage() {
   return (
     <div className={`${flows.page} ${home.messagingPage} ${s.page}`}>
       <a className="skip-link" href="#main">Skip to content</a>
-      <SiteNav />
+      <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
 
       <main id="main" className={r.content}>
         <section className={s.hero}>
diff --git a/web/app/agents/register/page.tsx b/web/app/agents/register/page.tsx
index 001aff8b..f83325c8 100644
--- a/web/app/agents/register/page.tsx
+++ b/web/app/agents/register/page.tsx
@@ -3,6 +3,7 @@ import type { Metadata } from 'next';
 import { CopyCodeButton } from '../../../components/docs/CopyCodeButton';
 import { SiteFooter } from '../../../components/SiteFooter';
 import { SiteNav } from '../../../components/SiteNav';
+import { SiteNavActions } from '../../../components/SiteNavActions';
 import {
   AGENT_DIRECTORY_URL,
   ARELAY_LIVE_EXAMPLE_URL,
@@ -41,7 +42,7 @@ export default function RegisterAgentPage() {
   return (
     <div className={`${flows.page} ${home.messagingPage} ${s.page}`}>
       <a className="skip-link" href="#main">Skip to content</a>
-      <SiteNav />
+      <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
 
       <main id="main" className={r.content}>
         <section className={s.hero}>
diff --git a/web/app/agents/use-cases/page.tsx b/web/app/agents/use-cases/page.tsx
index e848c98b..907ee17a 100644
--- a/web/app/agents/use-cases/page.tsx
+++ b/web/app/agents/use-cases/page.tsx
@@ -1,8 +1,8 @@
 import type { Metadata } from 'next';
 
-import { GitHubStarsBadge } from '../../../components/GitHubStars';
 import { SiteFooter } from '../../../components/SiteFooter';
 import { SiteNav } from '../../../components/SiteNav';
+import { SiteNavActions } from '../../../components/SiteNavActions';
 import { absoluteUrl, SITE_NAME } from '../../../lib/site';
 import { UseCasesContent } from './UseCasesContent';
 
@@ -27,7 +27,7 @@ export const metadata: Metadata = {
 export default function UseCasesPage() {
   return (
     <>
-      <SiteNav actions={<GitHubStarsBadge />} />
+      <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
       <UseCasesContent />
       <SiteFooter />
     </>
diff --git a/web/app/blog/[slug]/page.tsx b/web/app/blog/[slug]/page.tsx
index 422f734d..5fcb60bd 100644
--- a/web/app/blog/[slug]/page.tsx
+++ b/web/app/blog/[slug]/page.tsx
@@ -14,11 +14,11 @@ import { HighlightedPre } from '../../../components/docs/HighlightedCode';
 import { SignupBand } from '../../../components/home/SignupBand';
 import { SiteFooter } from '../../../components/SiteFooter';
 import { SiteNav } from '../../../components/SiteNav';
+import { SiteNavActions } from '../../../components/SiteNavActions';
 import { getAllPosts, getPost, slugifyHeading } from '../../../lib/blog';
 import { getAuthorInitials, getBlogAuthor } from '../../../lib/blog-authors';
 import { OG_IMAGE_HEIGHT, OG_IMAGE_WIDTH } from '../../../lib/og-meta';
 import { absoluteUrl, SITE_NAME, SITE_URL } from '../../../lib/site';
-import landingStyles from '../../landing.module.css';
 
 type PageProps = {
   params: Promise<{ slug: string }>;
@@ -134,16 +134,6 @@ export default async function BlogPostPage({ params }: PageProps) {
     .slice(0, 4);
   const postUrl = absoluteUrl(`/blog/${slug}`);
   const imageUrl = post.frontmatter.coverImage || absoluteUrl(`/blog/${slug}/og.png`);
-  const navGetStartedLink = (
-    <Link href="/docs" className={`${landingStyles.ctaPrimary} ${landingStyles.homeNavAction}`}>
-      Get Started
-    </Link>
-  );
-  const mobileGetStartedLink = (
-    <Link href="/docs" className={`${landingStyles.ctaPrimary} ${landingStyles.homeNavAction}`}>
-      Get Started
-    </Link>
-  );
   const structuredData = {
     '@context': 'https://schema.org',
     '@type': 'BlogPosting',
@@ -264,7 +254,7 @@ export default async function BlogPostPage({ params }: PageProps) {
 
   return (
     <div className={styles.blogPage}>
-      <SiteNav actions={navGetStartedLink} mobileMenuContent={mobileGetStartedLink} hideLinks />
+      <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
 
       <section className={styles.postHero}>
         <div className={styles.postHeroInner}>
diff --git a/web/app/blog/page.tsx b/web/app/blog/page.tsx
index 644b3c28..16008683 100644
--- a/web/app/blog/page.tsx
+++ b/web/app/blog/page.tsx
@@ -5,11 +5,11 @@ import { Rss } from 'lucide-react';
 import styles from '../../components/blog/blog.module.css';
 import { SiteFooter } from '../../components/SiteFooter';
 import { SiteNav } from '../../components/SiteNav';
+import { SiteNavActions } from '../../components/SiteNavActions';
 import { getAllPosts } from '../../lib/blog';
 import { getAuthorInitials, getBlogAuthor } from '../../lib/blog-authors';
 import { defaultOgImage } from '../../lib/og-meta';
 import { absoluteUrl, SITE_NAME, SITE_URL } from '../../lib/site';
-import landingStyles from '../landing.module.css';
 
 export const metadata: Metadata = {
   title: { absolute: 'Agent Relay Blog — Multi-Agent Systems & AI Coordination' },
@@ -47,16 +47,6 @@ function formatDate(dateStr: string): string {
 export default function BlogIndexPage() {
   const posts = getAllPosts();
   const allPosts = posts;
-  const navGetStartedLink = (
-    <Link href="/docs" className={`${landingStyles.ctaPrimary} ${landingStyles.homeNavAction}`}>
-      Get Started
-    </Link>
-  );
-  const mobileGetStartedLink = (
-    <Link href="/docs" className={`${landingStyles.ctaPrimary} ${landingStyles.homeNavAction}`}>
-      Get Started
-    </Link>
-  );
   const structuredData = {
     '@context': 'https://schema.org',
     '@type': 'CollectionPage',
@@ -77,7 +67,7 @@ export default function BlogIndexPage() {
 
   return (
     <div className={styles.blogPage}>
-      <SiteNav actions={navGetStartedLink} mobileMenuContent={mobileGetStartedLink} hideLinks />
+      <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
 
       <main className={styles.blogMain}>
         <script
diff --git a/web/app/brand/deploy-button/page.tsx b/web/app/brand/deploy-button/page.tsx
index 0157aa13..b93458e1 100644
--- a/web/app/brand/deploy-button/page.tsx
+++ b/web/app/brand/deploy-button/page.tsx
@@ -1,8 +1,8 @@
 import type { Metadata } from 'next';
 
-import { GitHubStarsBadge } from '../../../components/GitHubStars';
 import { SiteFooter } from '../../../components/SiteFooter';
 import { SiteNav } from '../../../components/SiteNav';
+import { SiteNavActions } from '../../../components/SiteNavActions';
 import { absoluteUrl } from '../../../lib/site';
 import { DeployButtonShowcase } from './DeployButtonShowcase';
 
@@ -21,7 +21,7 @@ export const metadata: Metadata = {
 export default function DeployButtonPage() {
   return (
     <>
-      <SiteNav actions={<GitHubStarsBadge />} />
+      <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
       <DeployButtonShowcase />
       <SiteFooter />
     </>
diff --git a/web/app/brand/page.tsx b/web/app/brand/page.tsx
index 37b7acac..8e923bca 100644
--- a/web/app/brand/page.tsx
+++ b/web/app/brand/page.tsx
@@ -1,8 +1,8 @@
 import type { Metadata } from 'next';
 
-import { GitHubStarsBadge } from '../../components/GitHubStars';
 import { SiteFooter } from '../../components/SiteFooter';
 import { SiteNav } from '../../components/SiteNav';
+import { SiteNavActions } from '../../components/SiteNavActions';
 import { absoluteUrl, SITE_NAME } from '../../lib/site';
 import { BrandShowcase } from './BrandShowcase';
 
@@ -51,7 +51,7 @@ export const metadata: Metadata = {
 export default function BrandPage() {
   return (
     <>
-      <SiteNav actions={<GitHubStarsBadge />} />
+      <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
       <BrandShowcase />
       <SiteFooter />
     </>
diff --git a/web/app/brand/theme/page.tsx b/web/app/brand/theme/page.tsx
index 2fc79dd3..a7b87c4b 100644
--- a/web/app/brand/theme/page.tsx
+++ b/web/app/brand/theme/page.tsx
@@ -1,8 +1,8 @@
 import type { Metadata } from 'next';
 
-import { GitHubStarsBadge } from '../../../components/GitHubStars';
 import { SiteFooter } from '../../../components/SiteFooter';
 import { SiteNav } from '../../../components/SiteNav';
+import { SiteNavActions } from '../../../components/SiteNavActions';
 import { defaultOgImage } from '../../../lib/og-meta';
 import { absoluteUrl, SITE_NAME } from '../../../lib/site';
 import { ThemeShowcase } from './ThemeShowcase';
@@ -43,7 +43,7 @@ export const metadata: Metadata = {
 export default function BrandThemePage() {
   return (
     <>
-      <SiteNav actions={<GitHubStarsBadge />} />
+      <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
       <ThemeShowcase />
       <SiteFooter />
     </>
diff --git a/web/app/careers/page.tsx b/web/app/careers/page.tsx
index 7401b4e6..2f36d6fd 100644
--- a/web/app/careers/page.tsx
+++ b/web/app/careers/page.tsx
@@ -1,8 +1,8 @@
 import type { Metadata } from 'next';
-import Link from 'next/link';
 
 import { SiteFooter } from '../../components/SiteFooter';
 import { SiteNav } from '../../components/SiteNav';
+import { SiteNavActions } from '../../components/SiteNavActions';
 import { HOME_OG_IMAGE_PATH, ogImage } from '../../lib/og-meta';
 import { absoluteUrl, SITE_NAME } from '../../lib/site';
 import s from '../landing.module.css';
@@ -30,20 +30,10 @@ export const metadata: Metadata = {
 };
 
 export default function CareersPage() {
-  const navGetStartedLink = (
-    <Link href="/docs" className={`${s.ctaPrimary} ${s.homeNavAction}`}>
-      Get Started
-    </Link>
-  );
-  const mobileGetStartedLink = (
-    <Link href="/docs" className={`${s.ctaPrimary} ${s.homeNavAction}`}>
-      Get Started
-    </Link>
-  );
 
   return (
     <div className={`${s.page} ${s.homePage}`}>
-      <SiteNav actions={navGetStartedLink} mobileMenuContent={mobileGetStartedLink} hideLinks />
+      <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
 
       <main className={`${s.homeMain} ${s.careersMain}`}>
         <section className={s.careersCallout} aria-label="Careers contact">
diff --git a/web/app/company/page.tsx b/web/app/company/page.tsx
index c9f277ad..3d3fc2b7 100644
--- a/web/app/company/page.tsx
+++ b/web/app/company/page.tsx
@@ -1,8 +1,8 @@
 import type { Metadata } from 'next';
-import Link from 'next/link';
 
 import { SiteFooter } from '../../components/SiteFooter';
 import { SiteNav } from '../../components/SiteNav';
+import { SiteNavActions } from '../../components/SiteNavActions';
 import { HOME_OG_IMAGE_PATH, ogImage } from '../../lib/og-meta';
 import { absoluteUrl, SITE_NAME } from '../../lib/site';
 import s from '../landing.module.css';
@@ -30,20 +30,10 @@ export const metadata: Metadata = {
 };
 
 export default function CompanyPage() {
-  const navGetStartedLink = (
-    <Link href="/docs" className={`${s.ctaPrimary} ${s.homeNavAction}`}>
-      Get Started
-    </Link>
-  );
-  const mobileGetStartedLink = (
-    <Link href="/docs" className={`${s.ctaPrimary} ${s.homeNavAction}`}>
-      Get Started
-    </Link>
-  );
 
   return (
     <div className={`${s.page} ${s.homePage} ${s.aboutPage}`}>
-      <SiteNav actions={navGetStartedLink} mobileMenuContent={mobileGetStartedLink} hideLinks />
+      <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
 
       <main className={s.aboutMain}>
         <div className={s.aboutWaveField} aria-hidden="true">
diff --git a/web/app/directory/page.tsx b/web/app/directory/page.tsx
index 1d01bb32..3054297c 100644
--- a/web/app/directory/page.tsx
+++ b/web/app/directory/page.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 
 import { SiteFooter } from '../../components/SiteFooter';
 import { SiteNav } from '../../components/SiteNav';
+import { SiteNavActions } from '../../components/SiteNavActions';
 import { AGENT_DIRECTORY_PATH, getAgentDirectory, type AgentDirectory } from '../../lib/agent-directory';
 import { defaultOgImage } from '../../lib/og-meta';
 import { absoluteUrl } from '../../lib/site';
@@ -47,7 +48,7 @@ export default async function AgentDirectoryPage() {
   return (
     <div className={`${flows.page} ${home.messagingPage} ${s.page}`}>
       <a className="skip-link" href="#main">Skip to content</a>
-      <SiteNav />
+      <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
 
       <main id="main">
         <section className={s.hero}>
diff --git a/web/app/docs/layout.tsx b/web/app/docs/layout.tsx
index 698e22db..17b55258 100644
--- a/web/app/docs/layout.tsx
+++ b/web/app/docs/layout.tsx
@@ -6,6 +6,7 @@ import { DocsSearch } from '../../components/docs/DocsSearch';
 import { DocsGitHubStarsBadgeServer } from '../../components/DocsGitHubStarsBadgeServer';
 import { SiteFooter } from '../../components/SiteFooter';
 import { SiteNav } from '../../components/SiteNav';
+import { NavDownloadButton } from '../../components/SiteNavActions';
 import styles from '../../components/docs/docs.module.css';
 import { getSearchIndex } from '../../lib/docs';
 import { productBasePath, productSections, getProductSearchIndex } from '../../lib/product-docs';
@@ -30,8 +31,18 @@ export default function DocsLayout({ children }: { children: ReactNode }) {
       <div className={styles.docsPage}>
         <SiteNav
           center={<DocsSearch index={searchIndex} productScopes={productScopes} />}
-          actions={<DocsGitHubStarsBadgeServer />}
-          mobileMenuContent={<DocsNav variant="mobileMenu" />}
+          actions={
+            <>
+              <DocsGitHubStarsBadgeServer />
+              <NavDownloadButton />
+            </>
+          }
+          mobileMenuContent={
+            <>
+              <DocsNav variant="mobileMenu" />
+              <NavDownloadButton />
+            </>
+          }
           hideMobileDocsLink
         />
         <div className={styles.docsBody}>
diff --git a/web/app/download/DownloadButton.tsx b/web/app/download/DownloadButton.tsx
index 921eff57..400135cc 100644
--- a/web/app/download/DownloadButton.tsx
+++ b/web/app/download/DownloadButton.tsx
@@ -1,20 +1,14 @@
 'use client';
 
-import { useEffect, useState } from 'react';
-
 import {
   alternateDesktopAsset,
   type DesktopPlatform,
   desktopAssetUrl,
-  detectDesktopPlatform,
   primaryDesktopAsset,
 } from '../../lib/desktop-downloads';
+import { useDesktopPlatform } from '../../lib/use-desktop-platform';
 import s from './download.module.css';
 
-type UADataNavigator = Navigator & {
-  userAgentData?: { getHighEntropyValues(hints: string[]): Promise<{ architecture?: string }> };
-};
-
 /** What the server renders, and what a visitor whose OS can't be read gets: every platform. */
 const EVERY_PLATFORM: readonly DesktopPlatform[] = [
   { os: 'macos', arch: 'arm64' },
@@ -24,25 +18,7 @@ const EVERY_PLATFORM: readonly DesktopPlatform[] = [
 
 /** Leads with the build for the visitor's OS and architecture. */
 export function DownloadButton() {
-  const [platform, setPlatform] = useState<DesktopPlatform | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-    const nav = navigator as UADataNavigator;
-    const detect = (architecture?: string) => {
-      if (!cancelled) {
-        setPlatform(detectDesktopPlatform(nav.userAgent, { architecture, touchPoints: nav.maxTouchPoints }));
-      }
-    };
-    detect();
-    nav.userAgentData
-      ?.getHighEntropyValues(['architecture'])
-      .then(({ architecture }) => detect(architecture || undefined))
-      .catch(() => {});
-    return () => {
-      cancelled = true;
-    };
-  }, []);
+  const platform = useDesktopPlatform();
 
   if (!platform) {
     return (
diff --git a/web/app/download/page.tsx b/web/app/download/page.tsx
index b0e71604..36119359 100644
--- a/web/app/download/page.tsx
+++ b/web/app/download/page.tsx
@@ -4,9 +4,9 @@ import { WaveDivider } from '../../components/home/icons';
 import sections from '../../components/home/home-sections.module.css';
 import { SiteFooter } from '../../components/SiteFooter';
 import { SiteNav } from '../../components/SiteNav';
+import { SiteNavActions } from '../../components/SiteNavActions';
 import { DESKTOP_ASSETS, type DesktopAsset, type DesktopOs, desktopAssetUrl } from '../../lib/desktop-downloads';
 import { absoluteUrl } from '../../lib/site';
-import { teamsGoogleAuthHref } from '../../lib/teams-cloud';
 import s from '../landing.module.css';
 import { DownloadButton } from './DownloadButton';
 import d from './download.module.css';
@@ -55,20 +55,7 @@ export default function DownloadPage() {
         Skip to content
       </a>
 
-      <SiteNav
-        hideLinks
-        singleAction
-        actions={
-          <>
-            <a className={`${s.ctaSecondary} ${s.homeNavAction}`} href="/login">
-              Log in
-            </a>
-            <a className={`${s.ctaPrimary} ${s.homeNavAction}`} href={teamsGoogleAuthHref('download_nav')}>
-              Sign up
-            </a>
-          </>
-        }
-      />
+      <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
 
       <main id="main">
         <header className={d.hero}>
diff --git a/web/app/download/start/DownloadStatus.tsx b/web/app/download/start/DownloadStatus.tsx
new file mode 100644
index 00000000..f949002a
--- /dev/null
+++ b/web/app/download/start/DownloadStatus.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { usePostHog } from '@posthog/next';
+
+import { captureDesktopDownload } from '../../../lib/desktop-download-analytics';
+import { type DesktopAsset, desktopAssetUrl, shouldStartDownload } from '../../../lib/desktop-downloads';
+import s from './start.module.css';
+
+/** Long enough for the arrow to drop into the tray twice before it settles. */
+const SETTLE_MS = 1900;
+
+/** Builds started in this document; client-side navigation back here keeps it. */
+const startedThisDocument = new Set<string>();
+
+const LABELS = {
+  pending: 'Starting download…',
+  started: 'Download started',
+  skipped: 'Check your Downloads folder',
+} as const;
+
+/**
+ * The download's status: a marker and a label. Opening the page starts the
+ * download (GitHub answers the release link with an attachment, so the
+ * browser saves the file and stays here); the arrow drops into the tray, then
+ * becomes a check. A reload, a Back from sign-in, or a return through in-app
+ * navigation downloads nothing, shows the check at once and says where the
+ * earlier file went; every fresh page load from a download button downloads.
+ */
+export function DownloadStatus({ asset }: { asset: DesktopAsset }) {
+  const href = desktopAssetUrl(asset.file);
+  const ph = usePostHog();
+  const alreadyStarted = useRef<boolean | null>(null);
+  const [outcome, setOutcome] = useState<keyof typeof LABELS>('pending');
+  const [settled, setSettled] = useState(false);
+
+  useEffect(() => {
+    if (alreadyStarted.current === null) {
+      const [navigation] = performance.getEntriesByType('navigation') as PerformanceNavigationTiming[];
+      alreadyStarted.current = !shouldStartDownload(href, navigation?.type, startedThisDocument);
+      if (!alreadyStarted.current) {
+        startedThisDocument.add(href);
+        captureDesktopDownload(ph, 'started', asset);
+        window.location.assign(href);
+      }
+    }
+    setOutcome(alreadyStarted.current ? 'skipped' : 'started');
+
+    const instant = alreadyStarted.current || window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    const timer = setTimeout(() => setSettled(true), instant ? 0 : SETTLE_MS);
+    return () => clearTimeout(timer);
+  }, [href, asset, ph]);
+
+  return (
+    <>
+      <span className={`${s.marker} ${s.markerDownload}`} data-settled={settled || undefined} aria-hidden="true">
+        <svg className={s.arrow} viewBox="0 0 20 20" fill="none">
+          <path d="M10 3v9m0 0-3.5-3.5M10 12l3.5-3.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+        <svg className={s.tray} viewBox="0 0 20 20" fill="none">
+          <path d="M3.5 12.5v2.5a1.5 1.5 0 0 0 1.5 1.5h10a1.5 1.5 0 0 0 1.5-1.5v-2.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
+        </svg>
+        <svg className={s.check} viewBox="0 0 20 20" fill="none">
+          <path d="m5 10.5 3.2 3L15 6.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </span>
+      <span aria-live="polite">{LABELS[outcome]}</span>
+    </>
+  );
+}
diff --git a/web/app/download/start/page.tsx b/web/app/download/start/page.tsx
new file mode 100644
index 00000000..0baa8176
--- /dev/null
+++ b/web/app/download/start/page.tsx
@@ -0,0 +1,105 @@
+import type { Metadata } from 'next';
+import Link from 'next/link';
+import { LockKeyhole, MessagesSquare, MonitorCog } from 'lucide-react';
+
+import { AGENT_TOOLS, type AgentTool } from '../../../components/home/AgentMarks';
+import { LogoIcon, LogoWordmark } from '../../../components/SiteNav';
+import { desktopAssetByFile, desktopAssetUrl } from '../../../lib/desktop-downloads';
+import { absoluteUrl } from '../../../lib/site';
+import { DownloadStatus } from './DownloadStatus';
+import s from './start.module.css';
+
+export const metadata: Metadata = {
+  title: 'Downloading Agent Relay',
+  description: 'What the Agent Relay app does on your computer, and what to do once it has downloaded.',
+  alternates: { canonical: absoluteUrl('/download') },
+  robots: { index: false, follow: true },
+};
+
+/** The agents shown under "Works with the agents you already use", in order. */
+const AGENTS: AgentTool[] = ['claude', 'codex', 'cursor', 'grok', 'opencode', 'devin'];
+
+type PageProps = { searchParams: Promise<{ build?: string | string[] }> };
+
+export default async function DownloadStartPage({ searchParams }: PageProps) {
+  const { build } = await searchParams;
+  const asset = desktopAssetByFile(typeof build === 'string' ? build : undefined);
+
+  return (
+    <div className={s.page}>
+      <main id="main" className={s.side}>
+        <Link href="/" className={s.brand} aria-label="Agent Relay home">
+          <LogoIcon />
+          <LogoWordmark />
+        </Link>
+
+        <div className={s.content}>
+          <h1 className={s.title}>Let your agents talk to each other</h1>
+
+          {asset ? (
+            <div className={s.status}>
+              <DownloadStatus asset={asset} />
+            </div>
+          ) : (
+            <p className={s.status}>
+              <a href="/download">Get the app for your machine</a>
+            </p>
+          )}
+
+          <p className={s.lead}>When it finishes, open Agent Relay and sign in. It connects your agents from there.</p>
+
+          {asset ? (
+            <p className={s.fallback}>
+              Didn’t start? <a href={desktopAssetUrl(asset.file)}>Download again</a> ·{' '}
+              <a href="/download#all-downloads">Other builds</a>
+            </p>
+          ) : null}
+        </div>
+      </main>
+
+      <aside className={s.explainer} aria-labelledby="explainer-title">
+        <h2 id="explainer-title" className="sr-only">
+          What Agent Relay does on your computer
+        </h2>
+        <ul className={s.facts}>
+          <li className={s.fact}>
+            <span className={s.factIcon} aria-hidden="true">
+              <MonitorCog />
+            </span>
+            <div>
+              <h3>Runs quietly in the background</h3>
+              <p>Keep working in your terminal and editor as usual. The window is there when you want it.</p>
+            </div>
+          </li>
+          <li className={s.fact}>
+            <span className={s.factIcon} aria-hidden="true">
+              <MessagesSquare />
+            </span>
+            <div>
+              <h3>Works with the agents you already use</h3>
+              <p>Ask your agent to check with a teammate’s agent. The answer comes back in your chat, so you stop copying between them.</p>
+              <ul className={s.agents} aria-label="Works with">
+                {AGENTS.map((tool) => (
+                  <li key={tool} title={AGENT_TOOLS[tool].name}>
+                    {AGENT_TOOLS[tool].logo}
+                    <span className="sr-only">{AGENT_TOOLS[tool].name}</span>
+                  </li>
+                ))}
+                <li className={s.more}>and more</li>
+              </ul>
+            </div>
+          </li>
+          <li className={s.fact}>
+            <span className={s.factIcon} aria-hidden="true">
+              <LockKeyhole />
+            </span>
+            <div>
+              <h3>Shares only what you choose</h3>
+              <p>A new install shares no sessions. You switch each chat on yourself, and can switch it off any time.</p>
+            </div>
+          </li>
+        </ul>
+      </aside>
+    </div>
+  );
+}
diff --git a/web/app/download/start/start.module.css b/web/app/download/start/start.module.css
new file mode 100644
index 00000000..df285636
--- /dev/null
+++ b/web/app/download/start/start.module.css
@@ -0,0 +1,312 @@
+/* While the app downloads, a split like sign-in: the task on the left (the promise,
+   the download status, the next step), and on the right, plainly, what the
+   app does on your computer and what it shares. Nothing moves but the
+   download marker. */
+
+.page {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  min-height: 100dvh;
+  background: #0b1c2a;
+  color: var(--fg);
+}
+
+@media (min-width: 960px) {
+  .page {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  }
+}
+
+/* ---- Left: the task ---- */
+
+.side {
+  display: flex;
+  flex-direction: column;
+  padding: 36px clamp(24px, 6vw, 88px) 56px;
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  align-self: flex-start;
+  color: #fff;
+}
+
+.brand svg:first-child {
+  width: auto;
+  height: 26px;
+  color: #74b8e2;
+}
+
+.brand svg:nth-child(2) {
+  width: auto;
+  height: 22px;
+  color: #fff;
+}
+
+.content {
+  width: 100%;
+  max-width: 540px;
+  margin: auto 0;
+  padding-top: 64px;
+}
+
+.status {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  margin: 20px 0 0;
+  color: var(--fg-faint);
+  font-size: 0.86rem;
+}
+
+.status a {
+  color: #74b8e2;
+  text-decoration: none;
+}
+
+.status a:hover {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+/* The way out if the download misbehaves: present, but quiet. */
+.fallback {
+  margin: 56px 0 0;
+  color: rgba(168, 184, 200, 0.72);
+  font-size: 0.82rem;
+}
+
+.fallback a {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-color: rgba(168, 184, 200, 0.35);
+  text-underline-offset: 3px;
+}
+
+.fallback a:hover {
+  color: var(--fg-muted);
+  text-decoration-color: currentColor;
+}
+
+.title {
+  margin: 0;
+  color: #fff;
+  font-family: var(--font-heading), sans-serif;
+  font-size: clamp(2.2rem, 3.6vw, 3.1rem);
+  font-weight: 600;
+  letter-spacing: -0.04em;
+  line-height: 1.04;
+  text-wrap: balance;
+}
+
+.lead {
+  margin: 16px 0 0;
+  color: var(--fg-muted);
+  font-size: 1.08rem;
+  line-height: 1.5;
+  text-wrap: balance;
+}
+
+
+
+/* ---- Right: what it does on your computer ---- */
+
+.explainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 56px clamp(24px, 6vw, 88px);
+  border-left: 1px solid rgba(160, 205, 235, 0.08);
+  background: #08131d;
+}
+
+
+.facts {
+  display: grid;
+  gap: 32px;
+  max-width: 460px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.fact {
+  display: grid;
+  grid-template-columns: 40px minmax(0, 1fr);
+  gap: 16px;
+}
+
+.factIcon {
+  display: grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  border: 1px solid rgba(116, 184, 226, 0.28);
+  border-radius: 12px 12px 12px 3px;
+  background: rgba(16, 38, 57, 0.8);
+  color: #74b8e2;
+}
+
+.factIcon svg {
+  width: 19px;
+  height: 19px;
+  stroke-width: 1.8;
+}
+
+.fact h3 {
+  margin: 0;
+  padding-top: 2px;
+  color: #fff;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.fact p {
+  margin: 6px 0 0;
+  color: var(--fg-muted);
+  font-size: 0.94rem;
+  line-height: 1.55;
+  text-wrap: pretty;
+}
+
+.agents {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin: 14px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.agents li {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  padding: 7px;
+  border: 1px solid rgba(160, 205, 235, 0.14);
+  border-radius: 9px 9px 9px 2px;
+  background: #0f1d2b;
+}
+
+.agents li svg,
+.agents li img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.agents .more {
+  width: auto;
+  padding: 0 4px;
+  border: 0;
+  background: none;
+  color: var(--fg-faint);
+  font-size: 0.82rem;
+}
+
+/* ---- The download marker ---- */
+
+.marker {
+  position: relative;
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid rgba(160, 205, 235, 0.22);
+  border-radius: 9px 9px 9px 2px;
+  transition:
+    background-color 240ms ease,
+    border-color 240ms ease;
+}
+
+.markerDownload {
+  overflow: hidden;
+  border-color: rgba(116, 184, 226, 0.4);
+  color: #74b8e2;
+}
+
+.markerDownload svg {
+  position: absolute;
+  inset: 6px;
+  width: 16px;
+  height: 16px;
+}
+
+/* The arrow drops into the tray twice while the download starts. */
+.arrow {
+  animation: drop 900ms cubic-bezier(0.55, 0, 0.45, 1) 2;
+}
+
+@keyframes drop {
+  0% {
+    opacity: 0;
+    transform: translateY(-9px);
+  }
+  35% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 1;
+    transform: translateY(1px);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(3px);
+  }
+}
+
+.check {
+  opacity: 0;
+  transform: scale(0.6);
+}
+
+/* Settled: the brand blue filled in, never a green that the page has nowhere else. */
+.markerDownload[data-settled] {
+  border-color: rgba(116, 184, 226, 0.6);
+  background: rgba(116, 184, 226, 0.16);
+}
+
+.markerDownload[data-settled] .arrow,
+.markerDownload[data-settled] .tray {
+  opacity: 0;
+  transition: opacity 160ms ease;
+}
+
+.markerDownload[data-settled] .check {
+  opacity: 1;
+  transform: scale(1);
+  transition:
+    opacity 200ms ease,
+    transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .arrow {
+    animation: none;
+  }
+
+  .marker,
+  .markerDownload[data-settled] .arrow,
+  .markerDownload[data-settled] .tray,
+  .markerDownload[data-settled] .check {
+    transition: none;
+  }
+}
+
+/* ---- Stacked: the task first, what it does beneath ---- */
+
+@media (max-width: 959px) {
+  .content {
+    padding-top: 56px;
+  }
+
+  .explainer {
+    border-top: 1px solid rgba(160, 205, 235, 0.08);
+    border-left: 0;
+  }
+}
diff --git a/web/app/flows/plugins/page.tsx b/web/app/flows/plugins/page.tsx
index 94c49513..beb6422d 100644
--- a/web/app/flows/plugins/page.tsx
+++ b/web/app/flows/plugins/page.tsx
@@ -1,8 +1,8 @@
 import type { Metadata } from 'next';
 
-import { GitHubStarsBadge } from '../../../components/GitHubStars';
 import { SiteFooter } from '../../../components/SiteFooter';
 import { SiteNav } from '../../../components/SiteNav';
+import { SiteNavActions } from '../../../components/SiteNavActions';
 import { absoluteUrl, SITE_NAME } from '../../../lib/site';
 import { PluginsGallery } from './PluginsGallery';
 
@@ -27,7 +27,7 @@ export const metadata: Metadata = {
 export default function FlowPluginsPage() {
   return (
     <>
-      <SiteNav actions={<GitHubStarsBadge />} />
+      <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
       <PluginsGallery />
       <SiteFooter />
     </>
diff --git a/web/app/open-source/page.tsx b/web/app/open-source/page.tsx
index 14030d0d..ed7ebbff 100644
--- a/web/app/open-source/page.tsx
+++ b/web/app/open-source/page.tsx
@@ -6,10 +6,10 @@ import sections from '../../components/home/home-sections.module.css';
 import { LiveStarsProvider, StarCount, TotalStars } from '../../components/open-source/LiveStars';
 import { SiteFooter } from '../../components/SiteFooter';
 import { SiteNav } from '../../components/SiteNav';
+import { SiteNavActions } from '../../components/SiteNavActions';
 import { DEFAULT_OG_IMAGE_PATH, ogImage } from '../../lib/og-meta';
 import { fetchOrgRepoStats, GITHUB_ORG, GITHUB_ORG_URL, OSS_CATEGORIES, type OssRepo } from '../../lib/open-source';
 import { absoluteUrl, DISCORD_URL, SITE_NAME } from '../../lib/site';
-import { teamsGoogleAuthHref } from '../../lib/teams-cloud';
 import s from '../landing.module.css';
 import o from './open-source.module.css';
 
@@ -91,20 +91,7 @@ export default async function OpenSourcePage() {
           Skip to content
         </a>
 
-        <SiteNav
-          hideLinks
-          singleAction
-          actions={
-            <>
-              <a className={`${s.ctaSecondary} ${s.homeNavAction}`} href="/login">
-                Log in
-              </a>
-              <a className={`${s.ctaPrimary} ${s.homeNavAction}`} href={teamsGoogleAuthHref('open_source_nav')}>
-                Sign up
-              </a>
-            </>
-          }
-        />
+        <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
 
         <main id="main">
           <header className={o.hero}>
diff --git a/web/app/openclaw/page.tsx b/web/app/openclaw/page.tsx
index b519b70e..a03cc016 100644
--- a/web/app/openclaw/page.tsx
+++ b/web/app/openclaw/page.tsx
@@ -1,9 +1,9 @@
 import type { Metadata } from 'next';
 
 import { CopyInstructionsButton } from '../../components/CopyInstructionsButton';
-import { GitHubStarsBadge } from '../../components/GitHubStars';
 import { SiteFooter } from '../../components/SiteFooter';
 import { SiteNav } from '../../components/SiteNav';
+import { SiteNavActions } from '../../components/SiteNavActions';
 import { defaultOgImage } from '../../lib/og-meta';
 import { absoluteUrl, SITE_HOST, SITE_NAME } from '../../lib/site';
 import s from './openclaw.module.css';
@@ -67,7 +67,7 @@ const steps = [
 export default function OpenClawPage() {
   return (
     <div className={s.page}>
-      <SiteNav actions={<GitHubStarsBadge />} />
+      <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
 
       <main className={s.main}>
         <section className={s.hero}>
diff --git a/web/app/privacy/page.tsx b/web/app/privacy/page.tsx
index 0c3aa774..c6420623 100644
--- a/web/app/privacy/page.tsx
+++ b/web/app/privacy/page.tsx
@@ -1,9 +1,9 @@
 import type { Metadata } from 'next';
 import Link from 'next/link';
 
-import { GitHubStarsBadge } from '../../components/GitHubStars';
 import { SiteFooter } from '../../components/SiteFooter';
 import { SiteNav } from '../../components/SiteNav';
+import { SiteNavActions } from '../../components/SiteNavActions';
 import { absoluteUrl, SITE_EMAIL } from '../../lib/site';
 import s from '../legal.module.css';
 
@@ -19,7 +19,7 @@ export const metadata: Metadata = {
 export default function PrivacyPage() {
   return (
     <div className={s.page}>
-      <SiteNav actions={<GitHubStarsBadge />} />
+      <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
 
       <main className={s.content}>
         <p className={s.meta}>Last updated: October 14, 2026</p>
diff --git a/web/app/process/page.tsx b/web/app/process/page.tsx
index 290965df..dfd69a1a 100644
--- a/web/app/process/page.tsx
+++ b/web/app/process/page.tsx
@@ -2,9 +2,9 @@ import type { Metadata } from 'next';
 import Link from 'next/link';
 
 import { FadeIn } from '../../components/FadeIn';
-import { GitHubStarsBadge } from '../../components/GitHubStars';
 import { SiteFooter } from '../../components/SiteFooter';
 import { SiteNav } from '../../components/SiteNav';
+import { SiteNavActions } from '../../components/SiteNavActions';
 import { absoluteUrl } from '../../lib/site';
 import s from './process.module.css';
 
@@ -58,7 +58,7 @@ const offerings = [
 export default function ProcessPage() {
   return (
     <div className={s.page}>
-      <SiteNav actions={<GitHubStarsBadge />} />
+      <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
 
       <main>
         <section className={s.hero}>
diff --git a/web/app/security/page.tsx b/web/app/security/page.tsx
index a45789db..b4e56e20 100644
--- a/web/app/security/page.tsx
+++ b/web/app/security/page.tsx
@@ -1,8 +1,8 @@
 import type { Metadata } from 'next';
 import Link from 'next/link';
-import { GitHubStarsBadge } from '../../components/GitHubStars';
 import { SiteFooter } from '../../components/SiteFooter';
 import { SiteNav } from '../../components/SiteNav';
+import { SiteNavActions } from '../../components/SiteNavActions';
 import { absoluteUrl } from '../../lib/site';
 import s from '../legal.module.css';
 
@@ -15,7 +15,7 @@ export const metadata: Metadata = {
 export default function Page() {
   return (
     <div className={s.page}>
-      <SiteNav actions={<GitHubStarsBadge />} />
+      <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
       <main className={s.content}>
         <p className={s.meta}>Last reviewed: October 14, 2026</p>
         <h1 className={s.title}>Vulnerability disclosure</h1>
diff --git a/web/app/support/page.tsx b/web/app/support/page.tsx
index 258637a0..36b89508 100644
--- a/web/app/support/page.tsx
+++ b/web/app/support/page.tsx
@@ -1,9 +1,9 @@
 import type { Metadata } from 'next';
 import Link from 'next/link';
 
-import { GitHubStarsBadge } from '../../components/GitHubStars';
 import { SiteFooter } from '../../components/SiteFooter';
 import { SiteNav } from '../../components/SiteNav';
+import { SiteNavActions } from '../../components/SiteNavActions';
 import { absoluteUrl, SITE_EMAIL } from '../../lib/site';
 import s from '../legal.module.css';
 
@@ -18,7 +18,7 @@ export const metadata: Metadata = {
 export default function SupportPage() {
   return (
     <div className={s.page}>
-      <SiteNav actions={<GitHubStarsBadge />} />
+      <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
 
       <main className={s.content}>
         <h1 className={s.title}>Agent Relay support</h1>
diff --git a/web/app/telemetry/page.tsx b/web/app/telemetry/page.tsx
index 7fea5885..c10b247f 100644
--- a/web/app/telemetry/page.tsx
+++ b/web/app/telemetry/page.tsx
@@ -1,8 +1,8 @@
 import type { Metadata } from 'next';
 
-import { GitHubStarsBadge } from '../../components/GitHubStars';
 import { SiteFooter } from '../../components/SiteFooter';
 import { SiteNav } from '../../components/SiteNav';
+import { SiteNavActions } from '../../components/SiteNavActions';
 import { absoluteUrl } from '../../lib/site';
 import s from './telemetry.module.css';
 
@@ -17,7 +17,7 @@ export const metadata: Metadata = {
 export default function TelemetryPage() {
   return (
     <div className={s.page}>
-      <SiteNav actions={<GitHubStarsBadge />} />
+      <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
 
       <main className={s.content}>
         <h1 className={s.title}>Telemetry</h1>
diff --git a/web/app/terms/page.tsx b/web/app/terms/page.tsx
index ebfce84b..31672653 100644
--- a/web/app/terms/page.tsx
+++ b/web/app/terms/page.tsx
@@ -1,9 +1,9 @@
 import type { Metadata } from 'next';
 import Link from 'next/link';
 
-import { GitHubStarsBadge } from '../../components/GitHubStars';
 import { SiteFooter } from '../../components/SiteFooter';
 import { SiteNav } from '../../components/SiteNav';
+import { SiteNavActions } from '../../components/SiteNavActions';
 import { absoluteUrl, SITE_EMAIL } from '../../lib/site';
 import s from '../legal.module.css';
 
@@ -19,7 +19,7 @@ export const metadata: Metadata = {
 export default function TermsPage() {
   return (
     <div className={s.page}>
-      <SiteNav actions={<GitHubStarsBadge />} />
+      <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
 
       <main className={s.content}>
         <p className={s.meta}>Last updated: May 27, 2026</p>
diff --git a/web/app/trust/page.tsx b/web/app/trust/page.tsx
index d4621895..99056873 100644
--- a/web/app/trust/page.tsx
+++ b/web/app/trust/page.tsx
@@ -1,8 +1,8 @@
 import type { Metadata } from 'next';
 import Link from 'next/link';
-import { GitHubStarsBadge } from '../../components/GitHubStars';
 import { SiteFooter } from '../../components/SiteFooter';
 import { SiteNav } from '../../components/SiteNav';
+import { SiteNavActions } from '../../components/SiteNavActions';
 import { absoluteUrl } from '../../lib/site';
 import s from '../legal.module.css';
 
@@ -15,7 +15,7 @@ export const metadata: Metadata = {
 export default function Page() {
   return (
     <div className={s.page}>
-      <SiteNav actions={<GitHubStarsBadge />} />
+      <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
       <main className={s.content}>
         <p className={s.meta}>Last reviewed: October 14, 2026</p>
         <h1 className={s.title}>Security and trust</h1>
diff --git a/web/app/u/[handle]/dashboard/page.tsx b/web/app/u/[handle]/dashboard/page.tsx
index c94071b1..3ee3f1f0 100644
--- a/web/app/u/[handle]/dashboard/page.tsx
+++ b/web/app/u/[handle]/dashboard/page.tsx
@@ -5,6 +5,7 @@ import type { ReactNode } from 'react';
 
 import { SiteFooter } from '../../../../components/SiteFooter';
 import { SiteNav } from '../../../../components/SiteNav';
+import { SiteNavActions } from '../../../../components/SiteNavActions';
 import {
   DASHBOARD_SESSION_COOKIE,
   dashboardPath,
@@ -99,7 +100,7 @@ function Shell({ handle, children }: { handle: string; children: ReactNode }) {
   return (
     <div className={`${flows.page} ${home.messagingPage} ${s.page}`}>
       <a className="skip-link" href="#main">Skip to content</a>
-      <SiteNav />
+      <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
       {/* ph-sensitive/ph-no-capture: session replay must never record dashboard data. */}
       <main id="main" className={`${s.main} ph-sensitive ph-no-capture`}>
         <header className={s.header}>
diff --git a/web/app/u/[handle]/page.tsx b/web/app/u/[handle]/page.tsx
index e778effa..d56130dd 100644
--- a/web/app/u/[handle]/page.tsx
+++ b/web/app/u/[handle]/page.tsx
@@ -4,6 +4,7 @@ import { notFound } from 'next/navigation';
 import { AgentChatSnippet } from '../../../components/AgentChatSnippet';
 import { SiteFooter } from '../../../components/SiteFooter';
 import { SiteNav } from '../../../components/SiteNav';
+import { SiteNavActions } from '../../../components/SiteNavActions';
 import { getAgentProfile, validRegistryHandle } from '../../../lib/agent-registry';
 import {
   agentChatUrlForHandle,
@@ -66,7 +67,7 @@ export default async function RegisteredAgentPage({ params }: PageProps) {
   return (
     <div className={`${flows.page} ${home.messagingPage} ${s.page}`}>
       <a className="skip-link" href="#main">Skip to content</a>
-      <SiteNav />
+      <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
 
       <main id="main">
         <section className={s.hero}>
diff --git a/web/app/u/agent-relay/page.tsx b/web/app/u/agent-relay/page.tsx
index 0c082c3b..43e89e4b 100644
--- a/web/app/u/agent-relay/page.tsx
+++ b/web/app/u/agent-relay/page.tsx
@@ -3,6 +3,7 @@ import type { Metadata } from 'next';
 import { AgentChatSnippet } from '../../../components/AgentChatSnippet';
 import { SiteFooter } from '../../../components/SiteFooter';
 import { SiteNav } from '../../../components/SiteNav';
+import { SiteNavActions } from '../../../components/SiteNavActions';
 import { newConversationId } from '../../../lib/agent-chat-snippet';
 import { defaultOgImage } from '../../../lib/og-meta';
 import { absoluteUrl } from '../../../lib/site';
@@ -52,7 +53,7 @@ export default function AgentRelayChatPage() {
   return (
     <div className={`${flows.page} ${home.messagingPage} ${s.page}`}>
       <a className="skip-link" href="#main">Skip to content</a>
-      <SiteNav />
+      <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
 
       <main id="main">
         <section className={s.hero}>
diff --git a/web/components/SiteNavActions.tsx b/web/components/SiteNavActions.tsx
new file mode 100644
index 00000000..df42780e
--- /dev/null
+++ b/web/components/SiteNavActions.tsx
@@ -0,0 +1,25 @@
+import landing from '../app/landing.module.css';
+import { GitHubStarsBadge } from './GitHubStars';
+import { DesktopDownloadCta } from './homepage/DesktopDownloadCta';
+
+/** The nav's download button: "Download for macOS / Windows / Linux", or "Get started" on phones. */
+export function NavDownloadButton() {
+  return (
+    <DesktopDownloadCta
+      className={`${landing.ctaPrimary} ${landing.homeNavAction}`}
+      placement="nav"
+      iconSize={15}
+      fallback="Get started"
+    />
+  );
+}
+
+/** The right side of the site nav on every page but the product landings: GitHub stars and the download button. */
+export function SiteNavActions() {
+  return (
+    <>
+      <GitHubStarsBadge />
+      <NavDownloadButton />
+    </>
+  );
+}
diff --git a/web/components/home/MessagingLandingPage.tsx b/web/components/home/MessagingLandingPage.tsx
index 67e48930..2e626e16 100644
--- a/web/components/home/MessagingLandingPage.tsx
+++ b/web/components/home/MessagingLandingPage.tsx
@@ -1,7 +1,7 @@
 import { DurableWorkflowFeature } from './DeliveryFeature';
-import { GitHubStarsBadge } from '../GitHubStars';
 import { SiteFooter } from '../SiteFooter';
 import { SiteNav } from '../SiteNav';
+import { SiteNavActions } from '../SiteNavActions';
 import { Deploy } from './Deploy';
 import { Hero } from './Hero';
 import { HowItWorks } from './HowItWorks';
@@ -17,7 +17,7 @@ export function MessagingLandingPage() {
         Skip to content
       </a>
 
-      <SiteNav actions={<GitHubStarsBadge />} />
+      <SiteNav hideLinks singleAction actions={<SiteNavActions />} />
 
       <main id="main">
         <Hero />
diff --git a/web/components/home/icons.tsx b/web/components/home/icons.tsx
index 44c1339a..377d4d6d 100644
--- a/web/components/home/icons.tsx
+++ b/web/components/home/icons.tsx
@@ -18,6 +18,47 @@ export function GitHubIcon({ className, size = 18 }: { className?: string; size?
   );
 }
 
+/** X (Twitter) mark. */
+export function XIcon({ className, size = 18 }: { className?: string; size?: number }) {
+  return (
+    <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+    </svg>
+  );
+}
+
+type OsIconProps = { className?: string; size?: number };
+
+/** Apple logo (Simple Icons, CC0). */
+export function AppleIcon({ className, size = 18 }: OsIconProps) {
+  return (
+    <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" />
+    </svg>
+  );
+}
+
+/** Windows logo: four panes. */
+export function WindowsIcon({ className, size = 18 }: OsIconProps) {
+  return (
+    <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M1 3.5 10 2.3v8.9H1zM11.2 2.1 23 .5v10.7H11.2zM1 12.8h9v8.9L1 20.5zM11.2 12.8H23v10.7l-11.8-1.6z" />
+    </svg>
+  );
+}
+
+/** Linux Tux (Simple Icons, CC0). */
+export function LinuxIcon({ className, size = 18 }: OsIconProps) {
+  return (
+    <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M12.504 0c-.155 0-.315.008-.48.021-4.226.333-3.105 4.807-3.17 6.298-.076 1.092-.3 1.953-1.05 3.02-.885 1.051-2.127 2.75-2.716 4.521-.278.832-.41 1.684-.287 2.489a.424.424 0 00-.11.135c-.26.268-.45.6-.663.839-.199.199-.485.267-.797.4-.313.136-.658.269-.864.68-.09.189-.136.394-.132.602 0 .199.027.4.055.536.058.399.116.728.04.97-.249.68-.28 1.145-.106 1.484.174.334.535.47.94.601.81.2 1.91.135 2.774.6.926.466 1.866.67 2.616.47.526-.116.97-.464 1.208-.946.587-.003 1.23-.269 2.26-.334.699-.058 1.574.267 2.577.2.025.134.063.198.114.333l.003.003c.391.778 1.113 1.132 1.884 1.071.771-.06 1.592-.536 2.257-1.306.631-.765 1.683-1.084 2.378-1.503.348-.199.629-.469.649-.853.023-.4-.2-.811-.714-1.376v-.097l-.003-.003c-.17-.2-.25-.535-.338-.926-.085-.401-.182-.786-.492-1.046h-.003c-.059-.054-.123-.067-.188-.135a.357.357 0 00-.19-.064c.431-1.278.264-2.55-.173-3.694-.533-1.41-1.465-2.638-2.175-3.483-.796-1.005-1.576-1.957-1.56-3.368.026-2.152.236-6.133-3.544-6.139zm.529 3.405h.013c.213 0 .396.062.584.198.19.135.33.332.438.533.105.259.158.459.166.724 0-.02.006-.04.006-.06v.105a.086.086 0 01-.004-.021l-.004-.024a1.807 1.807 0 01-.15.706.953.953 0 01-.213.335.71.71 0 00-.088-.042c-.104-.045-.198-.064-.284-.133a1.312 1.312 0 00-.22-.066c.05-.06.146-.133.183-.198.053-.128.082-.264.088-.402v-.02a1.21 1.21 0 00-.061-.4c-.045-.134-.101-.2-.183-.333-.084-.066-.167-.132-.267-.132h-.016c-.093 0-.176.03-.262.132a.8.8 0 00-.205.334 1.18 1.18 0 00-.09.4v.019c.002.089.008.179.02.267-.193-.067-.438-.135-.607-.202a1.635 1.635 0 01-.018-.2v-.02a1.772 1.772 0 01.15-.768c.082-.22.232-.406.43-.533a.985.985 0 01.594-.2zm-2.962.059h.036c.142 0 .27.048.399.135.146.129.264.288.344.465.09.199.14.4.153.667v.004c.007.134.006.2-.002.266v.08c-.03.007-.056.018-.083.024-.152.055-.274.135-.393.2.012-.09.013-.18.003-.267v-.015c-.012-.133-.04-.2-.082-.333a.613.613 0 00-.166-.267.248.248 0 00-.183-.064h-.021c-.071.006-.13.04-.186.132a.552.552 0 00-.12.27.944.944 0 00-.023.33v.015c.012.135.037.2.08.334.046.134.098.2.166.268.01.009.02.018.034.024-.07.057-.117.07-.176.136a.304.304 0 01-.131.068 2.62 2.62 0 01-.275-.402 1.772 1.772 0 01-.155-.667 1.759 1.759 0 01.08-.668 1.43 1.43 0 01.283-.535c.128-.133.26-.2.418-.2zm1.37 1.706c.332 0 .733.065 1.216.399.293.2.523.269 1.052.468h.003c.255.136.405.266.478.399v-.131a.571.571 0 01.016.47c-.123.31-.516.643-1.063.842v.002c-.268.135-.501.333-.775.465-.276.135-.588.292-1.012.267a1.139 1.139 0 01-.448-.067 3.566 3.566 0 01-.322-.198c-.195-.135-.363-.332-.612-.465v-.005h-.005c-.4-.246-.616-.512-.686-.71-.07-.268-.005-.47.193-.6.224-.135.38-.271.483-.336.104-.074.143-.102.176-.131h.002v-.003c.169-.202.436-.47.839-.601.139-.036.294-.065.466-.065zm2.8 2.142c.358 1.417 1.196 3.475 1.735 4.473.286.534.855 1.659 1.102 3.024.156-.005.33.018.513.064.646-1.671-.546-3.467-1.089-3.966-.22-.2-.232-.335-.123-.335.59.534 1.365 1.572 1.646 2.757.13.535.16 1.104.021 1.67.067.028.135.06.205.067 1.032.534 1.413.938 1.23 1.537v-.043c-.06-.003-.12 0-.18 0h-.016c.151-.467-.182-.825-1.065-1.224-.915-.4-1.646-.336-1.77.465-.008.043-.013.066-.018.135-.068.023-.139.053-.209.064-.43.268-.662.669-.793 1.187-.13.533-.17 1.156-.205 1.869v.003c-.02.334-.17.838-.319 1.35-1.5 1.072-3.58 1.538-5.348.334a2.645 2.645 0 00-.402-.533 1.45 1.45 0 00-.275-.333c.182 0 .338-.03.465-.067a.615.615 0 00.314-.334c.108-.267 0-.697-.345-1.163-.345-.467-.931-.995-1.788-1.521-.63-.4-.986-.87-1.15-1.396-.165-.534-.143-1.085-.015-1.645.245-1.07.873-2.11 1.274-2.763.107-.065.037.135-.408.974-.396.751-1.14 2.497-.122 3.854a8.123 8.123 0 01.647-2.876c.564-1.278 1.743-3.504 1.836-5.268.048.036.217.135.289.202.218.133.38.333.59.465.21.201.477.335.876.335.039.003.075.006.11.006.412 0 .73-.134.997-.268.29-.134.52-.334.74-.4h.005c.467-.135.835-.402 1.044-.7zm2.185 8.958c.037.6.343 1.245.882 1.377.588.134 1.434-.333 1.791-.765l.211-.01c.315-.007.577.01.847.268l.003.003c.208.199.305.53.391.876.085.4.154.78.409 1.066.486.527.645.906.636 1.14l.003-.007v.018l-.003-.012c-.015.262-.185.396-.498.595-.63.401-1.746.712-2.457 1.57-.618.737-1.37 1.14-2.036 1.191-.664.053-1.237-.2-1.574-.898l-.005-.003c-.21-.4-.12-1.025.056-1.69.176-.668.428-1.344.463-1.897.037-.714.076-1.335.195-1.814.12-.465.308-.797.641-.984l.045-.022zm-10.814.049h.01c.053 0 .105.005.157.014.376.055.706.333 1.023.752l.91 1.664.003.003c.243.533.754 1.064 1.189 1.637.434.598.77 1.131.729 1.57v.006c-.057.744-.48 1.148-1.125 1.294-.645.135-1.52.002-2.395-.464-.968-.536-2.118-.469-2.857-.602-.369-.066-.61-.2-.723-.4-.11-.2-.113-.602.123-1.23v-.004l.002-.003c.117-.334.03-.752-.027-1.118-.055-.401-.083-.71.043-.94.16-.334.396-.4.69-.533.294-.135.64-.202.915-.47h.002v-.002c.256-.268.445-.601.668-.838.19-.201.38-.336.663-.336zm7.159-9.074c-.435.201-.945.535-1.488.535-.542 0-.97-.267-1.28-.466-.154-.134-.28-.268-.373-.335-.164-.134-.144-.333-.074-.333.109.016.129.134.199.2.096.066.215.2.36.333.292.2.68.467 1.167.467.485 0 1.053-.267 1.398-.466.195-.135.445-.334.648-.467.156-.136.149-.267.279-.267.128.016.034.134-.147.332a8.097 8.097 0 01-.69.468zm-1.082-1.583V5.64c-.006-.02.013-.042.029-.05.074-.043.18-.027.26.004.063 0 .16.067.15.135-.006.049-.085.066-.135.066-.055 0-.092-.043-.141-.068-.052-.018-.146-.008-.163-.065zm-.551 0c-.02.058-.113.049-.166.066-.047.025-.086.068-.14.068-.05 0-.13-.02-.136-.068-.01-.066.088-.133.15-.133.08-.031.184-.047.259-.005.019.009.036.03.03.05v.02h.003z" />
+    </svg>
+  );
+}
+
+/** Each desktop OS's logo, keyed like `DesktopOs`. */
+export const DESKTOP_OS_ICONS = { macos: AppleIcon, windows: WindowsIcon, linux: LinuxIcon } as const;
+
 /** Self-host / monitor glyph for the deploy cards. */
 export function MonitorIcon() {
   return (
diff --git a/web/components/homepage/CustomerQuotes.tsx b/web/components/homepage/CustomerQuotes.tsx
new file mode 100644
index 00000000..b49c333e
--- /dev/null
+++ b/web/components/homepage/CustomerQuotes.tsx
@@ -0,0 +1,64 @@
+import { CUSTOMER_QUOTES, type CustomerQuote, type QuoteSegment } from '../../lib/customer-quotes';
+import { XIcon } from '../home/icons';
+import s from './customer-quotes.module.css';
+
+const toneClass: Record<QuoteSegment['tone'], string> = {
+  lead: s.lead,
+  key: s.key,
+  accent: s.accent,
+  plain: s.plain,
+};
+
+function QuoteCard({ quote }: { quote: CustomerQuote }) {
+  return (
+    <figure className={s.card}>
+      <blockquote className={`${s.bubble} ${quote.post ? s.hasPost : ''}`} cite={quote.post?.href}>
+        {quote.post ? (
+          <a className={s.post} href={quote.post.href} target="_blank" rel="noopener noreferrer" aria-label={`View ${quote.name}’s post on X`}>
+            <XIcon size={16} />
+          </a>
+        ) : null}
+        {quote.post?.replyingTo ? <span className={s.context}>Replying to {quote.post.replyingTo}</span> : null}
+        <p>
+          {quote.segments.map(({ tone, text }, i) => (
+            <span key={i} className={toneClass[tone]}>
+              {i > 0 ? ' ' : null}
+              {text}
+            </span>
+          ))}
+        </p>
+      </blockquote>
+      <figcaption className={s.who}>
+        <span className={`${s.avatar} ${quote.avatarPortrait ? s.portrait : ''}`}>
+          <img src={quote.avatar} alt="" width={200} height={200} loading="lazy" />
+        </span>
+        <span>
+          <span className={s.name}>{quote.name}</span>
+          <span className={s.role}>
+            {quote.title}
+            {quote.company ? (
+              <>
+                ,{' '}
+                {quote.companyLogo ? <img src={quote.companyLogo} alt="" width={16} height={16} loading="lazy" /> : null}
+                {quote.company}
+              </>
+            ) : null}
+          </span>
+        </span>
+      </figcaption>
+    </figure>
+  );
+}
+
+/** A compact row of customer quotes, each a small message bubble with the speaker under its tail. */
+export function CustomerQuotes() {
+  return (
+    <section className={s.section} aria-label="What customers say about Agent Relay">
+      <div className={s.row}>
+        {CUSTOMER_QUOTES.map(quote => (
+          <QuoteCard key={quote.name} quote={quote} />
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/web/components/homepage/DesktopDownloadCta.tsx b/web/components/homepage/DesktopDownloadCta.tsx
new file mode 100644
index 00000000..c834024a
--- /dev/null
+++ b/web/components/homepage/DesktopDownloadCta.tsx
@@ -0,0 +1,56 @@
+'use client';
+
+import type { ComponentProps, ReactNode } from 'react';
+import { usePostHog } from '@posthog/next';
+
+import { DESKTOP_OS_NAMES, desktopStartHref, primaryDesktopAsset } from '../../lib/desktop-downloads';
+import { captureDesktopDownload, type DownloadPlacement } from '../../lib/desktop-download-analytics';
+import { useDesktopPlatform } from '../../lib/use-desktop-platform';
+import { DESKTOP_OS_ICONS } from '../home/icons';
+import s from './desktop-download-cta.module.css';
+
+type DesktopDownloadCtaProps = Omit<ComponentProps<'a'>, 'href' | 'children'> & {
+  /** Reported with `desktop_download_clicked`. */
+  placement: DownloadPlacement;
+  iconSize?: number;
+  /** What the link says on the server and on devices without a desktop build; it opens the getting-started guide. */
+  fallback: ReactNode;
+};
+
+/**
+ * "Download for macOS / Windows / Linux" with that OS’s logo, opening the
+ * download page for the visitor’s build. Phones, tablets and unknown systems keep the
+ * getting-started link. Until the OS is read, the label stays invisible so the
+ * button never flashes one label and then swaps to another.
+ */
+export function DesktopDownloadCta({ placement, iconSize = 18, fallback, className, ...anchor }: DesktopDownloadCtaProps) {
+  const platform = useDesktopPlatform();
+  const ph = usePostHog();
+
+  if (!platform) {
+    return (
+      <a
+        {...anchor}
+        className={`${className ?? ''} ${s.cta}`}
+        href="/docs/getting-started"
+        data-detecting={platform === undefined || undefined}
+      >
+        {fallback}
+      </a>
+    );
+  }
+
+  const Icon = DESKTOP_OS_ICONS[platform.os];
+  const asset = primaryDesktopAsset(platform);
+  return (
+    <a
+      {...anchor}
+      className={`${className ?? ''} ${s.cta}`}
+      href={desktopStartHref(asset.file)}
+      onClick={() => captureDesktopDownload(ph, 'clicked', asset, { placement })}
+    >
+      Download for {DESKTOP_OS_NAMES[platform.os]}
+      <Icon size={iconSize} />
+    </a>
+  );
+}
diff --git a/web/components/homepage/HomeHero.tsx b/web/components/homepage/HomeHero.tsx
index ab376e46..dc56159a 100644
--- a/web/components/homepage/HomeHero.tsx
+++ b/web/components/homepage/HomeHero.tsx
@@ -3,12 +3,14 @@ import type { CSSProperties } from 'react';
 import { InvestorStrip } from '../InvestorStrip';
 import { HOME_HERO_SUBTITLE, HOME_HERO_TITLE_LINES } from '../../lib/home-copy';
 import s from '../../app/landing.module.css';
+import { DesktopDownloadCta } from './DesktopDownloadCta';
 import { HeroLogoCloud } from './HeroLogoCloud';
 import home from './home-hero.module.css';
 
 /**
  * The homepage hero: the two-line headline rising in, the description, one
- * getting-started button and the backers on navy, inside the orbiting agents.
+ * download button for the visitor's OS (getting started on phones) and the
+ * backers on navy, inside the orbiting agents.
  * The button is marked so the nav can show its own once this one scrolls away.
  */
 export function HomeHero() {
@@ -30,12 +32,19 @@ export function HomeHero() {
           <p className={`${s.subtitle} ${s.heroCenterSubtitle}`}>{HOME_HERO_SUBTITLE}</p>
 
           <div className={`${s.heroCenterCtas} ${home.actions}`}>
-            <a className={`${s.ctaPrimary} ${s.heroCta}`} href="/docs/getting-started" data-hero-cta="">
-              Get started
-              <svg className={s.heroCtaArrow} viewBox="0 0 16 16" aria-hidden="true">
-                <path d="M3 8h9M8.5 4l4 4-4 4" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
-              </svg>
-            </a>
+            <DesktopDownloadCta
+              className={`${s.ctaPrimary} ${s.heroCta} ${home.downloadCta}`}
+              placement="hero"
+              data-hero-cta=""
+              fallback={
+                <>
+                  Get started
+                  <svg className={s.heroCtaArrow} viewBox="0 0 16 16" aria-hidden="true">
+                    <path d="M3 8h9M8.5 4l4 4-4 4" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
+                  </svg>
+                </>
+              }
+            />
           </div>
         </div>
       </section>
diff --git a/web/components/homepage/HomePage.tsx b/web/components/homepage/HomePage.tsx
index 20aac2b7..9342218d 100644
--- a/web/components/homepage/HomePage.tsx
+++ b/web/components/homepage/HomePage.tsx
@@ -10,6 +10,7 @@ import { MessengerSection } from './MessengerSection';
 import { MiddleOptions } from './MiddleOptions';
 import { NavActions } from './NavActions';
 import { RotatingHeadline } from './RotatingHeadline';
+import { CustomerQuotes } from './CustomerQuotes';
 import { Hosting } from './Hosting';
 import { SetupItem } from './Setup';
 import { ToolsYouLove } from './ToolsYouLove';
@@ -19,9 +20,9 @@ import headline from './rotating-headline.module.css';
 
 /**
  * The homepage: the "Stop copy-pasting between your agents" hero with one
- * Get started button, then "Let X talk to Y", the move-faster rows, the
+ * download button, then "Let X talk to Y", the move-faster rows, the
  * tools you keep and why it fits how you work, multi-player agent work with
- * your agent's public address, and hosting.
+ * your agent's public address, hosting, and customer quotes.
  */
 export function HomeLandingPage() {
   return (
@@ -60,6 +61,7 @@ export function HomeLandingPage() {
           </div>
           <MessengerSection />
           <Hosting />
+          <CustomerQuotes />
         </div>
       </main>
 
diff --git a/web/components/homepage/NavActions.tsx b/web/components/homepage/NavActions.tsx
index 72fe000a..a661506c 100644
--- a/web/components/homepage/NavActions.tsx
+++ b/web/components/homepage/NavActions.tsx
@@ -3,9 +3,10 @@
 import { useEffect, useState } from 'react';
 
 import landing from '../../app/landing.module.css';
+import { DesktopDownloadCta } from './DesktopDownloadCta';
 import s from './nav-actions.module.css';
 
-/** The hero's getting-started button, shown in the nav once the hero's own copy has scrolled out of view. */
+/** The hero's download button, shown in the nav once the hero's own copy has scrolled out of view. */
 export function NavActions() {
   const [showCta, setShowCta] = useState(false);
 
@@ -21,14 +22,14 @@ export function NavActions() {
   }, []);
 
   return (
-    <a
+    <DesktopDownloadCta
       className={`${landing.ctaPrimary} ${landing.homeNavAction} ${s.cta}`}
-      href="/docs/getting-started"
+      placement="nav"
+      iconSize={15}
       data-shown={showCta || undefined}
       aria-hidden={!showCta}
       tabIndex={showCta ? undefined : -1}
-    >
-      Get started
-    </a>
+      fallback="Get started"
+    />
   );
 }
diff --git a/web/components/homepage/customer-quotes.module.css b/web/components/homepage/customer-quotes.module.css
new file mode 100644
index 00000000..9b1f947c
--- /dev/null
+++ b/web/components/homepage/customer-quotes.module.css
@@ -0,0 +1,153 @@
+/* A quiet row of customer quotes: up to three small message bubbles (tail at
+   bottom-left) with each speaker's avatar and company under the tail. */
+.section {
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 72px 40px 104px;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 24px;
+}
+
+.card {
+  display: flex;
+  flex: 1 1 300px;
+  flex-direction: column;
+  max-width: 460px;
+  margin: 0;
+}
+
+.bubble {
+  position: relative;
+  flex: 1;
+  margin: 0;
+  padding: 20px 22px;
+  border: 1px solid rgba(160, 205, 235, 0.14);
+  border-radius: 16px 16px 16px 3px;
+  background: rgba(6, 16, 28, 0.5);
+}
+
+.bubble p {
+  margin: 0;
+  color: rgba(214, 228, 240, 0.62);
+  font-size: 0.95rem;
+  line-height: 1.55;
+  text-wrap: pretty;
+}
+
+.lead {
+  color: #fff;
+  font-weight: 600;
+}
+
+.key {
+  color: rgba(237, 244, 251, 0.88);
+}
+
+.accent {
+  color: #74b8e2;
+  font-weight: 600;
+}
+
+.who {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 12px 0 0 2px;
+}
+
+.avatar {
+  position: relative;
+  flex: none;
+  width: 36px;
+  height: 36px;
+  overflow: hidden;
+  border: 1px solid rgba(160, 205, 235, 0.2);
+  border-radius: 8px 8px 8px 2px;
+}
+
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Half-length portraits: crop in on the face. */
+.portrait img {
+  position: absolute;
+  top: -2px;
+  left: -16px;
+  width: 70px;
+  max-width: none;
+  height: 70px;
+}
+
+/* The X mark in the bubble's corner links to the original post. */
+.post {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px 8px 8px 2px;
+  color: rgba(214, 228, 240, 0.6);
+  transition: color 150ms ease, background-color 150ms ease;
+}
+
+/* Keeps the quote's lines clear of the X link and its full tap area. */
+.hasPost {
+  padding-right: 56px;
+}
+
+/* 28px to the eye, a 44px target to the finger. */
+.post::before {
+  position: absolute;
+  inset: -8px;
+  content: '';
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .post:hover {
+    background: rgba(255, 255, 255, 0.06);
+    color: #fff;
+  }
+}
+
+.context {
+  display: block;
+  margin-bottom: 6px;
+  color: rgba(214, 228, 240, 0.6);
+  font-size: 0.8rem;
+}
+
+.name {
+  display: block;
+  color: #fff;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.role {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: rgba(214, 228, 240, 0.6);
+  font-size: 0.8rem;
+}
+
+.role img {
+  width: 16px;
+  height: 16px;
+}
+
+@media (max-width: 640px) {
+  .section {
+    padding: 56px 16px 72px;
+  }
+}
diff --git a/web/components/homepage/desktop-download-cta.module.css b/web/components/homepage/desktop-download-cta.module.css
new file mode 100644
index 00000000..fefe5ebf
--- /dev/null
+++ b/web/components/homepage/desktop-download-cta.module.css
@@ -0,0 +1,10 @@
+/* The label is hidden, not removed, until the visitor's OS is read; the
+   shared button transition then fades it in. The button's surface holds its
+   place and the text never swaps in view. Only browsers that run scripts hide
+   it, so no-script visitors (and browsers without the media feature) always
+   see the getting-started label. */
+@media (scripting: enabled) {
+  .cta[data-detecting] {
+    color: transparent;
+  }
+}
diff --git a/web/components/homepage/home-hero.module.css b/web/components/homepage/home-hero.module.css
index d14087f9..fc9a0488 100644
--- a/web/components/homepage/home-hero.module.css
+++ b/web/components/homepage/home-hero.module.css
@@ -50,3 +50,11 @@
     font-size: 8.2vw;
   }
 }
+
+/* Wide enough for "Download for Windows" and its logo, so swapping from the
+   placeholder label to the visitor's OS never changes the button's width. */
+@media (min-width: 601px) {
+  .downloadCta {
+    min-width: 17.5rem;
+  }
+}
diff --git a/web/components/site-nav.module.css b/web/components/site-nav.module.css
index fbe8b573..63d6a912 100644
--- a/web/components/site-nav.module.css
+++ b/web/components/site-nav.module.css
@@ -190,6 +190,14 @@
   }
 }
 
+/* The narrowest phones keep only the last action (the download or sign-up
+   button) beside the logo; the GitHub stars no longer fit. */
+@media (max-width: 400px) {
+  .singleAction .actions > :not(:last-child) {
+    display: none;
+  }
+}
+
 .hamburger {
   display: none;
   align-items: center;
diff --git a/web/lib/customer-quotes.ts b/web/lib/customer-quotes.ts
new file mode 100644
index 00000000..0df3e157
--- /dev/null
+++ b/web/lib/customer-quotes.ts
@@ -0,0 +1,64 @@
+/**
+ * Customer quotes shown on the homepage and rendered as shareable images by
+ * `scripts/generate-customer-quote.mjs`. A quote is split into segments so the
+ * headline sentence and the key claim can be emphasised in both places.
+ */
+export type QuoteSegment = {
+  text: string;
+  /** `lead` is bold white, `key` a brighter claim, `accent` the brand-blue takeaway, `plain` the rest. */
+  tone: 'lead' | 'key' | 'accent' | 'plain';
+};
+
+export type CustomerQuote = {
+  name: string;
+  /** Job title, or a social handle when the quote is a public post. */
+  title: string;
+  company?: string;
+  /** Public paths under `web/public`. */
+  avatar: string;
+  /** The avatar is a half-length portrait and is cropped in on the face. */
+  avatarPortrait?: boolean;
+  companyLogo?: string;
+  /** Shareable rendered card, linkable at agentrelay.com<image>. */
+  image?: string;
+  /** The public post the quote comes from. */
+  post?: { href: string; replyingTo?: string };
+  segments: QuoteSegment[];
+};
+
+export const POMERADO_QUOTE: CustomerQuote = {
+  name: 'Akshay Manglik',
+  title: 'Founder',
+  company: 'Pomerado',
+  avatar: '/img/customers/akshay-manglik.png',
+  avatarPortrait: true,
+  companyLogo: '/img/customers/pomerado.png',
+  image: '/img/customer-quote-pomerado.png',
+  segments: [
+    { tone: 'lead', text: 'It’s truly insane how fast our dev velocity has increased with Agent Relay!' },
+    {
+      tone: 'plain',
+      text: 'Feels like once you hit a certain amount of agent usage, you hit a ceiling due to context switching limits —',
+    },
+    {
+      tone: 'key',
+      text: 'Agent Relay removes those barriers by allowing agents to self‑coordinate and resolve bottlenecks.',
+    },
+    { tone: 'plain', text: 'We’re super happy customers!' },
+  ],
+};
+
+export const SERG_POST: CustomerQuote = {
+  name: 'Serg',
+  title: '@sg_HGA',
+  avatar: '/img/customers/serg.jpg',
+  post: { href: 'https://x.com/sg_HGA/status/2116514305143123972', replyingTo: '@UltraLinx' },
+  segments: [
+    { tone: 'plain', text: '@agent_relay does this automatically' },
+    { tone: 'lead', text: 'with no workarounds.' },
+    { tone: 'accent', text: 'Highly recommend' },
+  ],
+};
+
+/** Quotes shown on the homepage, in order. The row fits up to three. */
+export const CUSTOMER_QUOTES: CustomerQuote[] = [POMERADO_QUOTE, SERG_POST];
diff --git a/web/lib/desktop-download-analytics.ts b/web/lib/desktop-download-analytics.ts
new file mode 100644
index 00000000..1e4fa79f
--- /dev/null
+++ b/web/lib/desktop-download-analytics.ts
@@ -0,0 +1,27 @@
+import type { usePostHog } from '@posthog/next';
+
+import type { DesktopAsset } from './desktop-downloads';
+
+/** Where a download button sits: the homepage hero, or the site nav on any page. */
+export type DownloadPlacement = 'hero' | 'nav';
+
+/**
+ * The desktop download funnel: `desktop_download_clicked` when a download
+ * button is pressed, `desktop_download_started` when the start page actually
+ * starts the file (not on a reload or a return to it). Both carry the build,
+ * so the funnel splits by OS and architecture. Sent by beacon, since a click
+ * navigates away at once.
+ */
+export function captureDesktopDownload(
+  ph: ReturnType<typeof usePostHog> | undefined,
+  event: 'clicked' | 'started',
+  asset: DesktopAsset,
+  extra: { placement?: DownloadPlacement } = {},
+) {
+  if (!process.env.NEXT_PUBLIC_POSTHOG_KEY || !ph || ph.has_opted_out_capturing()) return;
+  ph.capture(
+    `desktop_download_${event}`,
+    { build: asset.file, os: asset.os, arch: asset.arch, path: window.location.pathname, ...extra },
+    { transport: 'sendBeacon' },
+  );
+}
diff --git a/web/lib/desktop-downloads.ts b/web/lib/desktop-downloads.ts
index 32bba5e3..4c9cb5e8 100644
--- a/web/lib/desktop-downloads.ts
+++ b/web/lib/desktop-downloads.ts
@@ -4,6 +4,9 @@ export const DESKTOP_RELEASES = 'https://github.com/AgentWorkforce/relay-desktop
 export type DesktopOs = 'macos' | 'linux' | 'windows';
 export type DesktopArch = 'arm64' | 'x64';
 
+/** The OS's own name, as used in "Download for macOS". */
+export const DESKTOP_OS_NAMES: Record<DesktopOs, string> = { macos: 'macOS', linux: 'Linux', windows: 'Windows' };
+
 export type DesktopAsset = {
   os: DesktopOs;
   arch: DesktopArch;
@@ -30,6 +33,25 @@ export function desktopAssetUrl(file: string): string {
   return `${DESKTOP_RELEASES}/${file}`;
 }
 
+/** The page a download button opens: it starts `file` downloading and explains what is being installed. */
+export function desktopStartHref(file: string): string {
+  return `/download/start?build=${encodeURIComponent(file)}`;
+}
+
+/**
+ * Whether the start page should download `href` now: on a fresh page load,
+ * but not on a reload or Back/Forward, and not when this document already
+ * started it (a return through client-side navigation remounts the page).
+ */
+export function shouldStartDownload(href: string, navigationType: string | undefined, startedThisDocument: ReadonlySet<string>): boolean {
+  if (startedThisDocument.has(href)) return false;
+  return navigationType !== 'reload' && navigationType !== 'back_forward';
+}
+
+export function desktopAssetByFile(file: string | undefined): DesktopAsset | undefined {
+  return DESKTOP_ASSETS.find((asset) => asset.file === file);
+}
+
 export type DesktopPlatform = { os: DesktopOs; arch: DesktopArch };
 
 /**
diff --git a/web/lib/og/template.tsx b/web/lib/og/template.tsx
index 8415f8a8..aa77eafb 100644
--- a/web/lib/og/template.tsx
+++ b/web/lib/og/template.tsx
@@ -46,12 +46,13 @@ export type LoadedFonts = {
 /**
  * Full glyph set requested from Google Fonts so every rendered character — the
  * uppercase letters produced by `text-transform: uppercase`, digits, and every
- * punctuation mark we emit (em/en dash, curly apostrophe, arrow, middot, hash,
- * at, slash, ampersand, percent, parens) — is present in the downloaded subset.
+ * punctuation mark we emit (em/en dash, curly apostrophe and double quotes,
+ * arrow, middot, hash, at, slash, ampersand, percent, parens, non-breaking
+ * space and hyphen) — is present in the downloaded subset.
  * A missing glyph silently falls back to satori's default font, which would
  * break the typography, so the subset must be exhaustive for what we render.
  */
-const GLYPHS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 .,:;!?\'’"#·—–-→@()/&%';
+const GLYPHS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 .,:;!?\'’“”"#·—–-→@()/&%\u00a0\u2011';
 
 /**
  * Fetch a Google Font for embedding into the OG image.
diff --git a/web/lib/test/desktop-download-analytics.test.ts b/web/lib/test/desktop-download-analytics.test.ts
new file mode 100644
index 00000000..0856d689
--- /dev/null
+++ b/web/lib/test/desktop-download-analytics.test.ts
@@ -0,0 +1,55 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { captureDesktopDownload } from '../desktop-download-analytics';
+import { desktopAssetByFile } from '../desktop-downloads';
+
+const asset = desktopAssetByFile('AgentRelay-macOS-arm64.dmg')!;
+
+function fakePostHog(optedOut = false) {
+  return { capture: vi.fn(), has_opted_out_capturing: () => optedOut } as unknown as Parameters<typeof captureDesktopDownload>[0] & {
+    capture: ReturnType<typeof vi.fn>;
+  };
+}
+
+describe('captureDesktopDownload', () => {
+  beforeEach(() => {
+    vi.stubEnv('NEXT_PUBLIC_POSTHOG_KEY', 'phc_test');
+    vi.stubGlobal('window', { location: { pathname: '/blog' } });
+  });
+
+  afterEach(() => {
+    vi.unstubAllEnvs();
+    vi.unstubAllGlobals();
+  });
+
+  it('sends the click with the build, OS, architecture, placement and page, by beacon', () => {
+    const ph = fakePostHog();
+    captureDesktopDownload(ph, 'clicked', asset, { placement: 'nav' });
+    expect(ph.capture).toHaveBeenCalledWith(
+      'desktop_download_clicked',
+      { build: 'AgentRelay-macOS-arm64.dmg', os: 'macos', arch: 'arm64', path: '/blog', placement: 'nav' },
+      { transport: 'sendBeacon' },
+    );
+  });
+
+  it('sends the start without a placement', () => {
+    const ph = fakePostHog();
+    captureDesktopDownload(ph, 'started', asset);
+    expect(ph.capture).toHaveBeenCalledWith(
+      'desktop_download_started',
+      { build: 'AgentRelay-macOS-arm64.dmg', os: 'macos', arch: 'arm64', path: '/blog' },
+      { transport: 'sendBeacon' },
+    );
+  });
+
+  it('sends nothing when the visitor opted out or PostHog is not configured', () => {
+    const optedOut = fakePostHog(true);
+    captureDesktopDownload(optedOut, 'clicked', asset, { placement: 'hero' });
+    expect(optedOut.capture).not.toHaveBeenCalled();
+
+    vi.stubEnv('NEXT_PUBLIC_POSTHOG_KEY', '');
+    const unconfigured = fakePostHog();
+    captureDesktopDownload(unconfigured, 'clicked', asset, { placement: 'hero' });
+    expect(unconfigured.capture).not.toHaveBeenCalled();
+  });
+});
diff --git a/web/lib/test/desktop-downloads.test.ts b/web/lib/test/desktop-downloads.test.ts
index 5c7ffb27..9cb50b53 100644
--- a/web/lib/test/desktop-downloads.test.ts
+++ b/web/lib/test/desktop-downloads.test.ts
@@ -1,5 +1,14 @@
 import { describe, expect, it } from 'vitest';
-import { alternateDesktopAsset, DESKTOP_ASSETS, desktopAssetUrl, detectDesktopPlatform, primaryDesktopAsset } from '../desktop-downloads';
+import {
+  alternateDesktopAsset,
+  DESKTOP_ASSETS,
+  desktopAssetByFile,
+  desktopAssetUrl,
+  desktopStartHref,
+  shouldStartDownload,
+  detectDesktopPlatform,
+  primaryDesktopAsset,
+} from '../desktop-downloads';
 
 const MAC = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.0 Safari/605.1.15';
 const LINUX_X64 = 'Mozilla/5.0 (X11; Linux x86_64; rv:131.0) Gecko/20100101 Firefox/131.0';
@@ -63,3 +72,32 @@ describe('desktop assets', () => {
     );
   });
 });
+
+describe('download start page', () => {
+  it('links each build to the start page and resolves only known builds back', () => {
+    for (const asset of DESKTOP_ASSETS) {
+      const build = new URL(desktopStartHref(asset.file), 'https://agentrelay.com').searchParams.get('build') ?? undefined;
+      expect(desktopAssetByFile(build)).toBe(asset);
+    }
+    expect(desktopAssetByFile('evil.exe')).toBeUndefined();
+    expect(desktopAssetByFile(undefined)).toBeUndefined();
+  });
+});
+
+describe('shouldStartDownload', () => {
+  const href = desktopAssetUrl('AgentRelay-macOS-arm64.dmg');
+
+  it('downloads on a fresh page load', () => {
+    expect(shouldStartDownload(href, 'navigate', new Set())).toBe(true);
+  });
+
+  it('does not download again on a reload or Back/Forward', () => {
+    expect(shouldStartDownload(href, 'reload', new Set())).toBe(false);
+    expect(shouldStartDownload(href, 'back_forward', new Set())).toBe(false);
+  });
+
+  it('does not download again when this document already started the build', () => {
+    expect(shouldStartDownload(href, 'navigate', new Set([href]))).toBe(false);
+    expect(shouldStartDownload(desktopAssetUrl('AgentRelay-Linux-x64.deb'), 'navigate', new Set([href]))).toBe(true);
+  });
+});
diff --git a/web/lib/use-desktop-platform.ts b/web/lib/use-desktop-platform.ts
new file mode 100644
index 00000000..f7b31bad
--- /dev/null
+++ b/web/lib/use-desktop-platform.ts
@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+
+import { type DesktopPlatform, detectDesktopPlatform } from './desktop-downloads';
+
+type UADataNavigator = Navigator & {
+  userAgentData?: { getHighEntropyValues(hints: string[]): Promise<{ architecture?: string }> };
+};
+
+/**
+ * The visitor's desktop platform, read after hydration: `undefined` on the
+ * server and until detection runs, `null` on phones, tablets and anything else
+ * without a desktop build.
+ */
+export function useDesktopPlatform(): DesktopPlatform | null | undefined {
+  const [platform, setPlatform] = useState<DesktopPlatform | null | undefined>(undefined);
+
+  useEffect(() => {
+    let cancelled = false;
+    const nav = navigator as UADataNavigator;
+    const detect = (architecture?: string) => {
+      if (!cancelled) {
+        setPlatform(detectDesktopPlatform(nav.userAgent, { architecture, touchPoints: nav.maxTouchPoints }));
+      }
+    };
+    detect();
+    nav.userAgentData
+      ?.getHighEntropyValues(['architecture'])
+      .then(({ architecture }) => detect(architecture || undefined))
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return platform;
+}
diff --git a/web/public/img/customer-quote-pomerado.png b/web/public/img/customer-quote-pomerado.png
new file mode 100644
index 00000000..5032b1f0
Binary files /dev/null and b/web/public/img/customer-quote-pomerado.png differ
diff --git a/web/public/img/customers/akshay-manglik.png b/web/public/img/customers/akshay-manglik.png
new file mode 100644
index 00000000..342e007f
Binary files /dev/null and b/web/public/img/customers/akshay-manglik.png differ
diff --git a/web/public/img/customers/pomerado.png b/web/public/img/customers/pomerado.png
new file mode 100644
index 00000000..08c161ce
Binary files /dev/null and b/web/public/img/customers/pomerado.png differ
diff --git a/web/public/img/customers/serg.jpg b/web/public/img/customers/serg.jpg
new file mode 100644
index 00000000..cdf2b00f
Binary files /dev/null and b/web/public/img/customers/serg.jpg differ
diff --git a/web/scripts/generate-customer-quote.mjs b/web/scripts/generate-customer-quote.mjs
new file mode 100644
index 00000000..19eb8080
--- /dev/null
+++ b/web/scripts/generate-customer-quote.mjs
@@ -0,0 +1,68 @@
+// Run from web: node scripts/generate-customer-quote.mjs
+// Renders the shareable customer quote card (629:368, 1258x736 @2x) to public/img.
+import { chromium } from '@playwright/test';
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { createJiti } from 'jiti';
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+const jiti = createJiti(import.meta.url, { jsx: { runtime: 'automatic' } });
+const { BrandLockup, SwoopLines, loadBrandFonts } = await jiti.import('../lib/og/template.tsx');
+const { POMERADO_QUOTE: quote } = await jiti.import('../lib/customer-quotes.ts');
+
+const { fonts } = await loadBrandFonts();
+if (!fonts.some(font => font.name === 'Sora') || !fonts.some(font => font.name === 'Inter')) {
+  throw new Error('Brand fonts are required to render the quote card');
+}
+const fontCss = fonts.map(font => `@font-face { font-family: ${font.name}; font-weight: ${font.weight}; src: url(data:font/woff;base64,${Buffer.from(font.data).toString('base64')}); }`).join('\n');
+const brand = renderToStaticMarkup(React.createElement(BrandLockup, { scale: 1 }));
+const waves = renderToStaticMarkup(React.createElement(SwoopLines, { top: 560, opacity: 0.16 }));
+const publicFile = path => new URL(`../public${path}`, import.meta.url);
+const dataUri = path => `data:image/png;base64,${readFileSync(publicFile(path)).toString('base64')}`;
+const escape = text => text.replace(/&/g, '&amp;').replace(/</g, '&lt;');
+const tag = { lead: 'strong', key: 'em', accent: 'b', plain: 'span' };
+const body = quote.segments.map(({ tone, text }) => `<${tag[tone]}>${escape(text)}</${tag[tone]}>`).join(' ');
+
+const WIDTH = 1258;
+const HEIGHT = 736;
+const browser = await chromium.launch();
+try {
+  const page = await browser.newPage({ viewport: { width: WIDTH, height: HEIGHT }, deviceScaleFactor: 2 });
+  await page.setContent(`<!doctype html><html><head><style>
+    ${fontCss}
+    * { box-sizing: border-box; }
+    body { margin: 0; width: ${WIDTH}px; height: ${HEIGHT}px; overflow: hidden; color: #edf4fb; font-family: Inter, sans-serif;
+      background: radial-gradient(70% 55% at 50% 0%, rgba(116,184,226,.14), transparent 70%), linear-gradient(180deg, #121c28 0%, #0d1620 100%); }
+    main { position: relative; height: 100%; padding: 52px 72px; display: flex; flex-direction: column; }
+    .top { display: flex; justify-content: flex-end; }
+    .bubble { position: relative; margin-top: auto; padding: 50px 96px 40px 52px; border: 2px solid rgba(160,205,235,.16);
+      border-radius: 34px 34px 34px 6px; background: rgba(6,16,28,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 40px 90px rgba(0,0,0,.35); }
+    .mark { position: absolute; top: -38px; left: 44px; font-family: Sora; font-weight: 700; font-size: 124px; line-height: 1; color: #74b8e2; }
+    blockquote { margin: 0; font-weight: 500; font-size: 34px; line-height: 1.38; letter-spacing: -.015em; color: #a8b8c8; text-wrap: pretty; }
+    blockquote strong { font-family: Sora; font-weight: 700; color: #fff; letter-spacing: -.03em; }
+    blockquote em { font-style: normal; color: #edf4fb; }
+    blockquote b { font-weight: 600; color: #74b8e2; }
+    .who { display: flex; align-items: center; gap: 20px; margin: 24px 0 0 2px; }
+    .avatar { position: relative; flex: none; width: 80px; height: 80px; overflow: hidden; border-radius: 16px 16px 16px 3px; border: 2px solid rgba(160,205,235,.22); }
+    .avatar img { position: absolute; width: 156px; height: 156px; left: -36px; top: -4px; }
+    .name { font-family: Sora; font-weight: 700; font-size: 26px; letter-spacing: -.02em; color: #fff; }
+    .role { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 20px; color: #a8b8c8; }
+    .role img { width: 30px; height: 30px; margin-left: 2px; }
+    .spacer { margin-top: auto; }
+  </style></head><body><main>${waves}
+    <div class="top">${brand}</div>
+    <div class="bubble"><div class="mark">“</div><blockquote>${body}</blockquote></div>
+    <div class="who">
+      <div class="avatar"><img src="${dataUri(quote.avatar)}" alt=""></div>
+      <div><div class="name">${quote.name}</div><div class="role">${quote.title}, <img src="${dataUri(quote.companyLogo)}" alt="">${quote.company}</div></div>
+    </div>
+    <div class="spacer"></div>
+  </main></body></html>`);
+  await page.evaluate(() => document.fonts.ready);
+  const fits = await page.evaluate(height => document.querySelector('main').scrollHeight <= height, HEIGHT);
+  if (!fits) throw new Error('Quote overflows the card');
+  await page.screenshot({ path: fileURLToPath(publicFile(quote.image)) });
+} finally {
+  await browser.close();
+}