diff --git a/website/src/content/docs/index.mdx b/website/src/content/docs/index.mdx
index 12e0263..960e60e 100644
--- a/website/src/content/docs/index.mdx
+++ b/website/src/content/docs/index.mdx
@@ -2,23 +2,29 @@
 title: RDBMS Playground
 description: A terminal playground for learning relational databases — tables, keys, relationships, indexes, queries, and query plans, hands-on.
 template: splash
+# Title-only hero: this keeps Starlight's splash from emitting a second,
+# page-title <h1> in a content panel (which can't be styled per-page). The hero
+# <h1> lives inside `.hero`, so it can be visually hidden (kept for SEO/a11y)
+# while the Wordmark + tagline + buttons below it carry the visible hero — see
+# `.hero h1` in global.css. tagline/actions are rendered in the body so they sit
+# *below* the wordmark, where the old title used to be.
 hero:
-  tagline: Learn relational databases by doing — in your terminal.
-  actions:
-    - text: Get started
-      link: /getting-started/installation/
-      icon: right-arrow
-    - text: Browse the reference
-      link: /reference/types/
-      variant: minimal
+  title: RDBMS Playground
 ---
 
-import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components';
+import { Card, CardGrid, LinkCard, LinkButton } from '@astrojs/starlight/components';
 import Demo from '../../components/Demo.astro';
 import Wordmark from '../../components/Wordmark.astro';
 
 <Wordmark />
 
+<p class="hero-tagline">Learn relational databases by doing — in your terminal.</p>
+
+<div class="hero-actions">
+	<LinkButton href="/getting-started/installation/" icon="right-arrow">Get started</LinkButton>
+	<LinkButton href="/reference/types/" variant="minimal" icon="right-arrow">Browse the reference</LinkButton>
+</div>
+
 RDBMS Playground is a cross-platform terminal app that gives you a safe
 sandbox for exploring relational database concepts: tables, columns,
 primary and foreign keys, relationships, indexes, queries, and query
diff --git a/website/src/styles/global.css b/website/src/styles/global.css
index f2a4368..93eec37 100644
--- a/website/src/styles/global.css
+++ b/website/src/styles/global.css
@@ -22,16 +22,42 @@
 	--sl-color-accent-high: #063b42;
 }
 
-/* Landing hero spacing. On wide viewports Starlight pads the splash hero with
-   up to 10rem block padding (Hero.astro, @media min-width:50rem), which leaves
-   an outsized gap between the hero actions and the wordmark that follows it.
-   Trim just the bottom so the wordmark sits closer; the top padding (hero
-   breathing room below the header) is untouched. Only the landing uses the
-   splash template, so this is scoped in practice. */
-@media (min-width: 50rem) {
-	.hero {
-		padding-block-end: 2.5rem;
-	}
+/* Landing hero. The visible brand is the Wordmark lockup (rendered first in the
+   body); Starlight's splash still emits an <h1> from the page title, so keep it
+   in the DOM for the document outline / SEO but hide it visually — otherwise the
+   name shows three times (header logo, this h1, the wordmark). With only the
+   hidden h1 left, the hero block is trimmed to near-nothing so the wordmark sits
+   up near the header (it was almost below the fold on an iPad). Only the landing
+   uses the splash template, so .hero is scoped to it in practice. */
+.hero h1[data-page-title] {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip-path: inset(50%);
+	white-space: nowrap;
+	border: 0;
+}
+.hero {
+	padding-block: 1.5rem 0;
+}
+
+/* Tagline + action buttons, rebuilt in the body so they sit just below the
+   wordmark — where the old hero title used to be. Centred to match the splash. */
+.hero-tagline {
+	text-align: center;
+	font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
+	color: var(--sl-color-gray-2);
+	margin: 0 0 1.5rem;
+}
+.hero-actions {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 1rem;
+	margin-block-end: 3rem;
 }
 
 /* Keep short inline code from breaking mid-token. Browsers insert a break