diff --git a/website/src/components/layout/footer.tsx b/website/src/components/layout/footer.tsx
index c381315..a1ec59f 100644
--- a/website/src/components/layout/footer.tsx
+++ b/website/src/components/layout/footer.tsx
@@ -45,7 +45,7 @@ const COLUMNS: readonly FooterColumn[] = [
   },
 ]
 
-const LINK_CLASS = 'text-[13px] text-secondary hover:text-primary'
+const LINK_CLASS = 'text-[12.5px] text-secondary hover:text-primary sm:text-[13px]'
 
 const FooterAnchor = ({ label, href }: FooterLink) =>
   href.startsWith('/') ? (
@@ -59,12 +59,15 @@ const FooterAnchor = ({ label, href }: FooterLink) =>
   )
 
 export const Footer = () => (
-  <footer className="border-t border-hairline bg-base pt-11 pb-10">
+  <footer className="border-t border-hairline bg-base pt-7 pb-6 sm:pt-11 sm:pb-10">
     <Wrap>
-      <div className="grid grid-cols-1 gap-8 min-[520px]:grid-cols-2 md:grid-cols-[1.6fr_1fr_1fr_1fr]">
-        <div className="flex max-w-[320px] flex-col gap-3.5">
+      {/* Two columns even on the narrowest phone, with the brand spanning
+          both — one column per link group makes the footer taller than the
+          page it closes. */}
+      <div className="grid grid-cols-2 gap-x-4 gap-y-5 sm:gap-8 md:grid-cols-[1.6fr_1fr_1fr_1fr]">
+        <div className="col-span-2 flex max-w-[320px] flex-col gap-2 sm:gap-3.5 md:col-span-1">
           <Wordmark size={22} />
-          <p className="text-[13px] leading-[22px] text-secondary">
+          <p className="text-xs leading-[19px] text-secondary sm:text-[13px] sm:leading-[22px]">
             A Soulseek client and protocol library for Rust.
           </p>
           <p className="font-forum text-xs text-muted">
@@ -74,12 +77,12 @@ export const Footer = () => (
 
         {COLUMNS.map((column) => (
           <div key={column.heading}>
-            <h2 className="mb-3.5 text-label uppercase tracking-[var(--tracking-label)] text-secondary">
+            <h2 className="mb-2 text-label uppercase tracking-[var(--tracking-label)] text-secondary sm:mb-3.5">
               {column.heading}
             </h2>
             <ul>
               {column.links.map((link) => (
-                <li key={link.label} className="mb-2.5">
+                <li key={link.label} className="mb-1.5 sm:mb-2.5">
                   <FooterAnchor {...link} />
                 </li>
               ))}
@@ -88,10 +91,10 @@ export const Footer = () => (
         ))}
       </div>
 
-      <div className="mt-11 flex flex-wrap items-center gap-x-6 gap-y-2 border-t border-hairline pt-5.5 text-[12.5px] text-muted">
+      <div className="mt-5.5 flex flex-wrap items-center gap-x-4 gap-y-1 border-t border-hairline pt-4 text-[11.5px] text-muted sm:mt-11 sm:gap-x-6 sm:gap-y-2 sm:pt-5.5 sm:text-[12.5px]">
         <span>MIT · © 2026 Michel de Graaf</span>
         <span className="text-success">No telemetry. Ever.</span>
-        <span className="ml-auto">{VERSION}</span>
+        <span className="sm:ml-auto">{VERSION}</span>
       </div>
     </Wrap>
   </footer>
diff --git a/website/src/components/layout/nav.tsx b/website/src/components/layout/nav.tsx
index 8809ca7..fd9d2d7 100644
--- a/website/src/components/layout/nav.tsx
+++ b/website/src/components/layout/nav.tsx
@@ -26,7 +26,7 @@ export const Nav = () => (
 
       <nav
         aria-label="Main"
-        className="order-3 flex w-full items-center gap-0.5 overflow-x-auto border-t border-hairline py-1 [-ms-overflow-style:none] [scrollbar-width:none] sm:order-none sm:w-auto sm:border-t-0 sm:py-0 [&::-webkit-scrollbar]:hidden"
+        className="order-3 flex w-full items-center justify-center gap-0.5 overflow-x-auto border-t border-hairline py-1 [-ms-overflow-style:none] [scrollbar-width:none] sm:order-none sm:w-auto sm:justify-start sm:border-t-0 sm:py-0 [&::-webkit-scrollbar]:hidden"
       >
         {ITEMS.map((item) => (
           <NavLink
diff --git a/website/src/components/ui/os-icon.tsx b/website/src/components/ui/os-icon.tsx
index 238a909..e83463a 100644
--- a/website/src/components/ui/os-icon.tsx
+++ b/website/src/components/ui/os-icon.tsx
@@ -1,3 +1,5 @@
+import { cn } from '@/lib/utils'
+
 export type OsName = 'macOS' | 'Linux' | 'Windows'
 
 const PATHS: Record<Exclude<OsName, 'Windows'>, string> = {
@@ -10,12 +12,24 @@ const PATHS: Record<Exclude<OsName, 'Windows'>, string> = {
 const WINDOWS_PATH =
   'M2 3.6l8.5-1.2v9.1H2V3.6zm10 -1.35L22.5 1v10.5H12V2.25zM2 12.5h8.5v9.1L2 20.4v-7.9zm10 0h10.5V23L12 21.75V12.5z'
 
-/** Decorative — the adjacent label already names the platform. */
-export const OsIcon = ({ name }: { name: OsName }) => (
+interface OsIconProps {
+  name: OsName
+  className?: string
+}
+
+/*
+ * Labelled rather than decorative: below 520px the adjacent text is hidden,
+ * so the icon becomes the only thing naming the platform.
+ */
+export const OsIcon = ({ name, className }: OsIconProps) => (
   <svg
     viewBox="0 0 24 24"
-    aria-hidden="true"
-    className="block size-[22px] shrink-0 text-primary"
+    role="img"
+    aria-label={name}
+    className={cn(
+      'block size-[22px] shrink-0 text-primary transition-colors group-hover:text-accent',
+      className,
+    )}
   >
     <path fill="currentColor" d={name === 'Windows' ? WINDOWS_PATH : PATHS[name]} />
   </svg>
diff --git a/website/src/pages/home.tsx b/website/src/pages/home.tsx
index 5d4c6bb..ca5f655 100644
--- a/website/src/pages/home.tsx
+++ b/website/src/pages/home.tsx
@@ -11,6 +11,7 @@ import { OsIcon, type OsName } from '@/components/ui/os-icon'
 import { Callout } from '@/components/ui/panel'
 import { Terminal } from '@/components/ui/terminal'
 import { LINKS } from '@/lib/links'
+import { cn } from '@/lib/utils'
 
 const PLATFORMS: readonly { name: OsName; note: string; anchor: string }[] = [
   { name: 'macOS', note: 'Apple Keychain', anchor: 'macos' },
@@ -103,20 +104,24 @@ export const Home = () => {
       <section className="pt-5 pb-8 sm:pt-7 sm:pb-10">
         <Wrap>
           <div className="flex flex-col gap-[22px]">
-            <Eyebrow>Soulseek client · terminal · Rust</Eyebrow>
+            {/* Eyebrow and sub are desktop-only: on a phone the headline and
+                the CTA should be all that stands between the top of the page
+                and the terminal. */}
+            <Eyebrow className="max-md:hidden">Soulseek client · terminal · Rust</Eyebrow>
             <div className="flex items-start gap-3.5 sm:gap-6 md:gap-11">
-              <Logo size={172} className="mt-2 shrink-0 max-md:!h-28 max-sm:!h-16" />
+              <Logo size={172} className="mt-2 max-md:!h-28 max-sm:!h-16" />
               <h1 className="text-[29px] leading-[37px] font-bold tracking-[-0.01em] text-balance sm:text-[34px] sm:leading-[42px] md:text-display md:leading-[var(--text-display--line-height)]">
-                A Soulseek client for people who live in the terminal.
+                Soulseek for the terminal. Built for agents and people who live there.
+                Blazingly fast, in Rust 🦀.
               </h1>
             </div>
-            <p className="text-lg leading-[29px] text-pretty text-secondary">
+            <p className="text-lg leading-[29px] text-pretty text-secondary max-md:hidden">
               Search the network, share your files, browse someone&rsquo;s collection, join
               a room. It runs over ssh on the machine where your music already lives, with
-              no window and no mouse.
+              no window and no mouse, and it&rsquo;s blazingly fast Rust 🦀.
             </p>
             <div className="flex flex-wrap items-center justify-between gap-x-5 gap-y-3 sm:gap-y-4">
-              <div className="flex flex-wrap items-center gap-2 max-sm:w-full sm:gap-3">
+              <div className="flex flex-wrap items-center gap-2 max-md:w-full max-md:justify-center sm:gap-3">
                 <Button href="/install" variant="accent">
                   Install
                 </Button>
@@ -135,24 +140,31 @@ export const Home = () => {
 
       <section className="border-t border-hairline py-6">
         <Wrap>
+          {/*
+            Three layouts, narrowest first: under 520px the labels drop and it
+            becomes a centred row of icons; up to 820px each platform is a
+            full-width stacked row; above that they sit inline, rule-separated.
+          */}
           <div className="flex flex-wrap items-center gap-3.5 sm:gap-8">
-            <Eyebrow>Runs on</Eyebrow>
-            <ul className="flex w-full flex-wrap sm:w-auto">
+            <Eyebrow className="max-[519px]:hidden">Runs on</Eyebrow>
+            <ul className="flex w-full flex-nowrap justify-center min-[520px]:flex-wrap min-[520px]:justify-start sm:w-auto">
               {PLATFORMS.map((platform, i) => (
                 <li
                   key={platform.name}
-                  className={
+                  className={cn(
+                    'flex w-auto border-hairline px-[18px] first:border-l-0 first:pl-0 not-first:border-l',
+                    'min-[520px]:w-full min-[520px]:border-l-0 min-[520px]:px-0',
                     i === 0
-                      ? 'flex w-full sm:w-auto sm:pr-6.5'
-                      : 'flex w-full border-hairline sm:w-auto sm:border-l sm:px-6.5'
-                  }
+                      ? 'sm:w-auto sm:pr-6.5'
+                      : 'sm:w-auto sm:border-l sm:px-6.5',
+                  )}
                 >
                   <Link
                     to={`/install#${platform.anchor}`}
-                    className="group flex w-full items-center gap-2.5 border-t border-hairline py-2.5 first:border-t-0 sm:w-auto sm:border-t-0 sm:py-0"
+                    className="group flex min-h-11 w-auto items-center justify-center gap-2.5 border-hairline py-1.5 min-[520px]:w-full min-[520px]:justify-start min-[520px]:border-t min-[520px]:py-2.5 min-[520px]:first:border-t-0 sm:w-auto sm:border-t-0 sm:py-0"
                   >
-                    <OsIcon name={platform.name} />
-                    <span className="flex flex-col leading-[1.35]">
+                    <OsIcon name={platform.name} className="max-[519px]:size-[26px]" />
+                    <span className="flex flex-col leading-[1.35] max-[519px]:hidden">
                       <b className="text-[13.5px] font-medium text-primary transition-colors group-hover:text-accent">
                         {platform.name}
                       </b>
@@ -198,11 +210,15 @@ export const Home = () => {
                 </Link>
               </p>
             </Callout>
-            <Callout title="share back">
+            <Callout title="agents and automation">
               <p>
-                Point <Code>--shared-dir</Code> at your library and leave it running in a
-                tmux session on your share or headless box. The network only works because
-                people share, and users who share back tend to get queue slots faster.
+                Every command runs as a one-off from the shell: <Code>search</Code>,{' '}
+                <Code>browse</Code>, <Code>rooms</Code>, <Code>chat</Code>,{' '}
+                <Code>message</Code>, <Code>portmap</Code>. Point cron, a script, or an
+                agent at them and read the output back. No daemon, no API to stand up.{' '}
+                <Link to="/docs" className="text-link hover:text-link-hover">
+                  See the commands →
+                </Link>
               </p>
             </Callout>
           </div>