diff --git a/.gitignore b/.gitignore
index 1681c346..97638a26 100644
--- a/.gitignore
+++ b/.gitignore
@@ -47,3 +47,4 @@ apps/yerd-gui/src-tauri/binaries/
 @docs
 .agents
 .openai
+.mcp.json
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index 807ab903..34076760 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -27,7 +27,30 @@ export default withMermaid({
 
   head: [
     ['link', { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }],
-    ['meta', { name: 'theme-color', content: '#6366f1' }],
+    ['meta', { name: 'theme-color', content: '#3a63ee' }],
+    // The two faces every page paints above the fold: the display face used by
+    // the navbar wordmark and marketing headlines, and the latin subset of the
+    // UI/body face. Both are self-hosted (see theme/styles/fonts.css).
+    [
+      'link',
+      {
+        rel: 'preload',
+        as: 'font',
+        type: 'font/ttf',
+        href: '/fonts/OutageCut.ttf',
+        crossorigin: '',
+      },
+    ],
+    [
+      'link',
+      {
+        rel: 'preload',
+        as: 'font',
+        type: 'font/woff2',
+        href: '/fonts/space-grotesk-latin.woff2',
+        crossorigin: '',
+      },
+    ],
     ['meta', { name: 'author', content: 'Forjed' }],
     [
       'meta',
diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue
index bbe3de5c..f342d7fc 100644
--- a/docs/.vitepress/theme/Layout.vue
+++ b/docs/.vitepress/theme/Layout.vue
@@ -3,43 +3,13 @@ import DefaultTheme from 'vitepress/theme'
 import Lightbox from './components/Lightbox.vue'
 
 // Wrap the default theme layout so the single global <Lightbox> overlay is
-// mounted once for every page (via the `layout-bottom` slot).
+// mounted once for every page (via the `layout-bottom` slot). The home page
+// supplies its own layout component, so no hero slots are overridden here.
 const { Layout } = DefaultTheme
 </script>
 
 <template>
   <Layout>
-    <!-- Social-card-style hero lockup: logo + "Yerd" wordmark, then the headline
-         with a blue accent on "without the friction." -->
-    <template #home-hero-info>
-      <h1 class="heading">
-        <span class="hero-brand">
-          <img class="hero-logo" src="/logo.svg" alt="" />
-          <span class="name">Yerd</span>
-        </span>
-        <span class="text"
-          >Local PHP, <span class="accent">without the friction.</span></span
-        >
-      </h1>
-      <p class="tagline">
-        Serve your projects on .test domains over HTTP and HTTPS, run a different
-        PHP version per site, and manage it all from one tiny daemon. No Docker,
-        no sudo for everyday work, no subscription.
-      </p>
-    </template>
-    <!-- Hero screenshot, with light/dark variants toggled by CSS on html.dark. -->
-    <template #home-hero-image>
-      <img
-        class="hero-shot hero-shot--light"
-        src="/images/overview-light.png"
-        alt="The Yerd desktop app"
-      />
-      <img
-        class="hero-shot hero-shot--dark"
-        src="/images/overview-dark.png"
-        alt="The Yerd desktop app"
-      />
-    </template>
     <template #layout-bottom>
       <Lightbox />
     </template>
diff --git a/docs/.vitepress/theme/components/ShowcaseRow.vue b/docs/.vitepress/theme/components/ShowcaseRow.vue
deleted file mode 100644
index 58ac92ad..00000000
--- a/docs/.vitepress/theme/components/ShowcaseRow.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import { openLightbox } from '../composables/lightbox'
-
-// One alternating screenshot + copy row for the home page. `reverse` flips the
-// image to the right. Renders both theme images; custom.css hides the off-theme
-// one (same mechanism as <ThemedImage>). Clicking the image opens the lightbox.
-const props = defineProps<{
-  title: string
-  description: string
-  light: string
-  dark: string
-  reverse?: boolean
-}>()
-
-function zoom(): void {
-  openLightbox({ light: props.light, dark: props.dark, alt: props.title })
-}
-</script>
-
-<template>
-  <section class="showcase" :class="{ 'showcase--reverse': reverse }">
-    <div class="showcase__media">
-      <img
-        :src="light"
-        :alt="title"
-        loading="lazy"
-        class="themed-img--light showcase__img"
-        @click="zoom"
-      />
-      <img
-        :src="dark"
-        :alt="title"
-        loading="lazy"
-        class="themed-img--dark showcase__img"
-        @click="zoom"
-      />
-    </div>
-    <div class="showcase__body">
-      <h3 class="showcase__title">{{ title }}</h3>
-      <p class="showcase__text">{{ description }}</p>
-    </div>
-  </section>
-</template>
diff --git a/docs/.vitepress/theme/components/home/AppSection.vue b/docs/.vitepress/theme/components/home/AppSection.vue
new file mode 100644
index 00000000..01b1a8c8
--- /dev/null
+++ b/docs/.vitepress/theme/components/home/AppSection.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import SectionHead from './SectionHead.vue'
+import { openLightbox } from '../../composables/lightbox'
+
+export interface Shot {
+  light: string
+  dark: string
+  alt: string
+}
+
+defineProps<{
+  eyebrow: string
+  heading: string
+  sub: string
+  primary: Shot
+  secondary: Shot[]
+  captions: string[]
+  chipsLabel: string
+  chips: string[]
+}>()
+</script>
+
+<template>
+  <section class="y-section y-glow y-glow--right">
+    <SectionHead :eyebrow="eyebrow" :heading="heading" :sub="sub" />
+
+    <div class="y-shots">
+      <button
+        class="y-shot y-shot--primary"
+        type="button"
+        :aria-label="primary.alt"
+        @click="openLightbox(primary)"
+      >
+        <img
+          class="themed-img--light"
+          :src="primary.light"
+          :alt="primary.alt"
+          loading="lazy"
+        />
+        <img
+          class="themed-img--dark"
+          :src="primary.dark"
+          :alt="primary.alt"
+          loading="lazy"
+        />
+      </button>
+
+      <div class="y-shots__stack">
+        <button
+          v-for="shot in secondary"
+          :key="shot.light"
+          class="y-shot"
+          type="button"
+          :aria-label="shot.alt"
+          @click="openLightbox(shot)"
+        >
+          <img
+            class="themed-img--light"
+            :src="shot.light"
+            :alt="shot.alt"
+            loading="lazy"
+          />
+          <img
+            class="themed-img--dark"
+            :src="shot.dark"
+            :alt="shot.alt"
+            loading="lazy"
+          />
+        </button>
+      </div>
+    </div>
+
+    <div class="y-shots__captions">
+      <p v-for="caption in captions" :key="caption">{{ caption }}</p>
+    </div>
+
+    <p class="y-chips__label">{{ chipsLabel }}</p>
+    <ul class="y-chips">
+      <li v-for="chip in chips" :key="chip" class="y-tag">
+        <span class="y-tag__dot" />{{ chip }}
+      </li>
+    </ul>
+  </section>
+</template>
diff --git a/docs/.vitepress/theme/components/home/CapabilitySection.vue b/docs/.vitepress/theme/components/home/CapabilitySection.vue
new file mode 100644
index 00000000..fc8c732c
--- /dev/null
+++ b/docs/.vitepress/theme/components/home/CapabilitySection.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import HomeIcon from './HomeIcon.vue'
+import SectionHead from './SectionHead.vue'
+
+defineProps<{
+  eyebrow: string
+  heading: string
+  sub: string
+  items: {
+    icon: string
+    title: string
+    details: string
+    command: string
+    link?: string
+  }[]
+}>()
+</script>
+
+<template>
+  <section class="y-section y-glow y-glow--left">
+    <SectionHead :eyebrow="eyebrow" :heading="heading" :sub="sub" />
+
+    <ul class="y-cards">
+      <li v-for="item in items" :key="item.title" class="y-card">
+        <component
+          :is="item.link ? 'a' : 'div'"
+          :href="item.link"
+          class="y-card__body"
+        >
+          <HomeIcon class="y-card__icon" :name="item.icon" />
+          <h3 class="y-card__title">{{ item.title }}</h3>
+          <p class="y-card__text">{{ item.details }}</p>
+          <code class="y-chip">{{ item.command }}</code>
+        </component>
+      </li>
+    </ul>
+  </section>
+</template>
diff --git a/docs/.vitepress/theme/components/home/ClosingSection.vue b/docs/.vitepress/theme/components/home/ClosingSection.vue
new file mode 100644
index 00000000..93128658
--- /dev/null
+++ b/docs/.vitepress/theme/components/home/ClosingSection.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HeroAction } from './HeroSection.vue'
+
+defineProps<{ lines: string[]; sub: string; actions: HeroAction[] }>()
+</script>
+
+<template>
+  <section class="y-close y-glow">
+    <h2 class="y-close__heading">
+      <span v-for="line in lines" :key="line">{{ line + ' ' }}</span>
+    </h2>
+    <p class="y-close__sub">{{ sub }}</p>
+    <div class="y-close__actions">
+      <a
+        v-for="action in actions"
+        :key="action.link"
+        class="y-btn"
+        :class="action.theme === 'alt' ? 'y-btn--alt' : 'y-btn--brand'"
+        :href="action.link"
+        >{{ action.text }}</a
+      >
+    </div>
+  </section>
+</template>
diff --git a/docs/.vitepress/theme/components/home/CopyCommand.vue b/docs/.vitepress/theme/components/home/CopyCommand.vue
new file mode 100644
index 00000000..9018f553
--- /dev/null
+++ b/docs/.vitepress/theme/components/home/CopyCommand.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// The hero's "your first command" field: a read-only terminal line with a copy
+// button. Falls back silently when the Clipboard API is unavailable (insecure
+// origins), leaving the text selectable by hand.
+const props = defineProps<{ label: string; command: string }>()
+
+const copied = ref(false)
+let timer: ReturnType<typeof setTimeout> | undefined
+
+async function copy(): Promise<void> {
+  try {
+    await navigator.clipboard.writeText(props.command)
+  } catch {
+    return
+  }
+  copied.value = true
+  clearTimeout(timer)
+  timer = setTimeout(() => (copied.value = false), 1600)
+}
+</script>
+
+<template>
+  <div class="y-cmd">
+    <p class="y-cmd__label">{{ label }}</p>
+    <div class="y-cmd__bar">
+      <code class="y-cmd__text"
+        ><span class="y-cmd__prompt">$</span> {{ command
+        }}<span class="y-cmd__caret" aria-hidden="true"></span
+      ></code>
+      <button
+        class="y-cmd__copy"
+        type="button"
+        :aria-label="copied ? 'Copied' : 'Copy command'"
+        @click="copy"
+      >
+        <svg
+          v-if="!copied"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.7"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <rect x="9" y="9" width="12" height="12" rx="2" />
+          <path d="M5 15V5a2 2 0 0 1 2-2h10" />
+        </svg>
+        <svg
+          v-else
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M4 12.5l5 5 11-11" />
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/docs/.vitepress/theme/components/home/FootprintSection.vue b/docs/.vitepress/theme/components/home/FootprintSection.vue
new file mode 100644
index 00000000..bbac052f
--- /dev/null
+++ b/docs/.vitepress/theme/components/home/FootprintSection.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import SectionHead from './SectionHead.vue'
+
+// The install-size comparison bar. The track stands for `scaleMax` megabytes,
+// and each bar is drawn as a percentage of it - so the numbers in the
+// frontmatter are the only thing to keep truthful.
+const props = defineProps<{
+  eyebrow: string
+  heading: string
+  sub: string
+  scaleMax: number
+  ticks: string[]
+  yerd: { label: string; mb: number }
+  middle: { label: string; mb: number }
+  full: { label: string }
+}>()
+
+const yerdWidth = computed(
+  () => `max(6px, ${(props.yerd.mb / props.scaleMax) * 100}%)`,
+)
+const middleWidth = computed(
+  () => `${(props.middle.mb / props.scaleMax) * 100}%`,
+)
+
+// Ticks are pinned to their position on the track: the first hugs the left
+// edge, the last the right, and the rest centre on their mark.
+function tickClass(i: number): string {
+  if (i === 0) return 'is-first'
+  return i === props.ticks.length - 1 ? 'is-last' : ''
+}
+
+function tickStyle(i: number): Record<string, string> {
+  if (i === 0 || i === props.ticks.length - 1) return {}
+  return { left: `${(i / (props.ticks.length - 1)) * 100}%` }
+}
+</script>
+
+<template>
+  <section class="y-section">
+    <SectionHead :eyebrow="eyebrow" :heading="heading" :sub="sub" />
+
+    <div class="y-fp">
+      <div class="y-fp__track">
+        <div class="y-fp__middle" :style="{ width: middleWidth }" />
+        <div class="y-fp__yerd" :style="{ width: yerdWidth }" />
+      </div>
+
+      <div class="y-fp__scale">
+        <span
+          v-for="(tick, i) in ticks"
+          :key="tick"
+          class="y-fp__tick"
+          :class="tickClass(i)"
+          :style="tickStyle(i)"
+          >{{ tick }}</span
+        >
+      </div>
+
+      <div class="y-fp__keys">
+        <span class="y-fp__key y-fp__key--brand">{{ yerd.label }}</span>
+        <span class="y-fp__key">{{ middle.label }}</span>
+        <span class="y-fp__key y-fp__key--end">{{ full.label }}</span>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/docs/.vitepress/theme/components/home/HeroSection.vue b/docs/.vitepress/theme/components/home/HeroSection.vue
new file mode 100644
index 00000000..da00efaa
--- /dev/null
+++ b/docs/.vitepress/theme/components/home/HeroSection.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import CopyCommand from './CopyCommand.vue'
+import { openLightbox } from '../../composables/lightbox'
+import type { Shot } from './AppSection.vue'
+
+export interface HeroAction {
+  text: string
+  link: string
+  theme?: 'brand' | 'alt'
+}
+
+defineProps<{
+  pill: string
+  lines: string[]
+  accent: string
+  tagline: string
+  command: { label: string; text: string }
+  actions: HeroAction[]
+  platforms: string
+  shot: Shot
+}>()
+</script>
+
+<template>
+  <section class="y-hero y-glow y-glow--hero">
+    <div class="y-hero__inner">
+      <div class="y-hero__copy">
+        <p class="y-pill"><span class="y-pill__dot" />{{ pill }}</p>
+
+        <h1 class="y-hero__title">
+          <span v-for="line in lines" :key="line">{{ line + ' ' }}</span>
+          <span class="y-hero__accent">{{ accent }}</span>
+        </h1>
+
+        <p class="y-hero__tagline">{{ tagline }}</p>
+
+        <CopyCommand :label="command.label" :command="command.text" />
+
+        <div class="y-hero__actions">
+          <a
+            v-for="action in actions"
+            :key="action.link"
+            class="y-btn"
+            :class="action.theme === 'alt' ? 'y-btn--alt' : 'y-btn--brand'"
+            :href="action.link"
+            >{{ action.text }}</a
+          >
+        </div>
+
+        <p class="y-hero__platforms">{{ platforms }}</p>
+      </div>
+
+      <div class="y-hero__demo">
+        <button
+          class="y-hero__shot"
+          type="button"
+          :aria-label="shot.alt"
+          @click="openLightbox(shot)"
+        >
+          <img class="themed-img--light" :src="shot.light" :alt="shot.alt" />
+          <img class="themed-img--dark" :src="shot.dark" :alt="shot.alt" />
+        </button>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/docs/.vitepress/theme/components/home/HomeIcon.vue b/docs/.vitepress/theme/components/home/HomeIcon.vue
new file mode 100644
index 00000000..b0ca8ba5
--- /dev/null
+++ b/docs/.vitepress/theme/components/home/HomeIcon.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+// The line icons used on the capability cards. Kept inline (rather than an icon
+// dependency) so the home page ships no extra runtime and the strokes inherit
+// the card's colour.
+defineProps<{ name: string }>()
+
+const paths: Record<string, string[]> = {
+  grid: ['M3 3h7v7H3z', 'M14 3h7v7h-7z', 'M3 14h7v7H3z', 'M14 14h7v7h-7z'],
+  lock: ['M5 11h14v10H5z', 'M8 11V7a4 4 0 0 1 8 0v4'],
+  stack: ['M12 3 2 8l10 5 10-5-10-5z', 'M2 16l10 5 10-5', 'M2 12l10 5 10-5'],
+  database: [
+    'M12 3c4.4 0 8 1.3 8 3s-3.6 3-8 3-8-1.3-8-3 3.6-3 8-3z',
+    'M4 6v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6',
+    'M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3',
+  ],
+  mail: ['M3 5h18v14H3z', 'M3 7l9 6 9-6'],
+  shield: ['M12 3l8 3v6c0 5-3.4 8.2-8 9-4.6-.8-8-4-8-9V6l8-3z', 'M9 12l2 2 4-4'],
+}
+</script>
+
+<template>
+  <svg
+    class="y-icon"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.6"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path v-for="(d, i) in paths[name] ?? []" :key="i" :d="d" />
+  </svg>
+</template>
diff --git a/docs/.vitepress/theme/components/home/HomeLayout.vue b/docs/.vitepress/theme/components/home/HomeLayout.vue
new file mode 100644
index 00000000..e49af919
--- /dev/null
+++ b/docs/.vitepress/theme/components/home/HomeLayout.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import AppSection from './AppSection.vue'
+import CapabilitySection from './CapabilitySection.vue'
+import ClosingSection from './ClosingSection.vue'
+import FootprintSection from './FootprintSection.vue'
+import HeroSection from './HeroSection.vue'
+import StatsBar from './StatsBar.vue'
+import StepsSection from './StepsSection.vue'
+
+// The home page layout, selected by `layout: HomeLayout` in index.md.
+// Every string it renders comes from that page's frontmatter, so the marketing
+// copy stays in the content file rather than in the theme.
+const { frontmatter } = useData()
+</script>
+
+<template>
+  <div class="y-home">
+    <HeroSection v-bind="frontmatter.hero" />
+    <StatsBar :stats="frontmatter.stats" />
+    <FootprintSection v-bind="frontmatter.footprint" />
+    <CapabilitySection v-bind="frontmatter.capabilities" />
+    <StepsSection v-bind="frontmatter.steps" />
+    <AppSection v-bind="frontmatter.app" />
+    <ClosingSection v-bind="frontmatter.closing" />
+  </div>
+</template>
diff --git a/docs/.vitepress/theme/components/home/SectionHead.vue b/docs/.vitepress/theme/components/home/SectionHead.vue
new file mode 100644
index 00000000..793c8759
--- /dev/null
+++ b/docs/.vitepress/theme/components/home/SectionHead.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+// Shared section lead-in: a small mono eyebrow, a display-face heading, and an
+// optional supporting line.
+defineProps<{ eyebrow: string; heading: string; sub?: string }>()
+</script>
+
+<template>
+  <header class="y-head">
+    <p class="y-head__eyebrow">{{ eyebrow }}</p>
+    <h2 class="y-head__heading">{{ heading }}</h2>
+    <p v-if="sub" class="y-head__sub">{{ sub }}</p>
+  </header>
+</template>
diff --git a/docs/.vitepress/theme/components/home/StatsBar.vue b/docs/.vitepress/theme/components/home/StatsBar.vue
new file mode 100644
index 00000000..9d8f1bd6
--- /dev/null
+++ b/docs/.vitepress/theme/components/home/StatsBar.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps<{ stats: { value: string; label: string }[] }>()
+</script>
+
+<template>
+  <section class="y-section y-section--tight">
+    <dl class="y-stats">
+      <div v-for="stat in stats" :key="stat.label" class="y-stats__cell">
+        <dt class="y-stats__value">{{ stat.value }}</dt>
+        <dd class="y-stats__label">{{ stat.label }}</dd>
+      </div>
+    </dl>
+  </section>
+</template>
diff --git a/docs/.vitepress/theme/components/home/StepsSection.vue b/docs/.vitepress/theme/components/home/StepsSection.vue
new file mode 100644
index 00000000..03a9a583
--- /dev/null
+++ b/docs/.vitepress/theme/components/home/StepsSection.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import SectionHead from './SectionHead.vue'
+
+defineProps<{
+  eyebrow: string
+  heading: string
+  items: { command: string; details: string }[]
+}>()
+</script>
+
+<template>
+  <section class="y-section">
+    <SectionHead :eyebrow="eyebrow" :heading="heading" />
+
+    <ol class="y-steps">
+      <li v-for="(item, i) in items" :key="item.command" class="y-step">
+        <span class="y-step__badge">{{ String(i + 1).padStart(2, '0') }}</span>
+        <code class="y-chip y-chip--lg">{{ item.command }}</code>
+        <p class="y-step__text">{{ item.details }}</p>
+      </li>
+    </ol>
+  </section>
+</template>
diff --git a/docs/.vitepress/theme/composables/lightbox.ts b/docs/.vitepress/theme/composables/lightbox.ts
index ce521a40..aefa35d1 100644
--- a/docs/.vitepress/theme/composables/lightbox.ts
+++ b/docs/.vitepress/theme/composables/lightbox.ts
@@ -1,7 +1,8 @@
 import { ref } from 'vue'
 
-// Shared lightbox state. Any image (e.g. <ShowcaseRow>) calls openLightbox()
-// with its light/dark sources; the single global <Lightbox> overlay renders it.
+// Shared lightbox state. Any image (e.g. the home page's app screenshots)
+// calls openLightbox() with its light/dark sources; the single global
+// <Lightbox> overlay renders it.
 export interface LightboxImage {
   light: string
   dark: string
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index 84e10e08..c5e2f728 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -1,500 +1,11 @@
 /**
- * Yerd brand theme for VitePress.
+ * Yerd theme entry point.
  *
- * Brand color is the logo's indigo gradient: #6366F1 (indigo-500) → #4338CA
- * (indigo-700). Link/UI colors are pulled a shade darker in light mode for
- * contrast on white, and a shade lighter in dark mode for readability.
+ * The stylesheet is split by concern; this file only sequences the parts, and
+ * the order matters: fonts and tokens must land before anything that uses them.
  */
-
-/* Forjed display face (Outage Cut), self-hosted. Used for the hero wordmark,
- * the navbar title, and documentation page titles - matching forjed.io and the
- * Yerd social cards. It's a single heavy all-caps weight, so headings using it
- * set font-weight: normal to avoid faux-bold synthesis. */
-@font-face {
-  font-family: 'Outage Cut';
-  src: url('/fonts/OutageCut.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* Homepage hero: the "Yerd" wordmark and the "Local PHP, without the friction."
- * line, in the Forjed display face. The wordmark keeps its indigo gradient
- * (background-clip: text). The homepage showcase headings get the same face (see
- * the .home-showcase rules); documentation body headings stay in the default
- * readable face. */
-.VPHero .name,
-.VPHero .text {
-  font-family: var(--forjed-display);
-  font-weight: 400;
-  letter-spacing: 0.01em;
-}
-
-/* Hero lockup (logo + "Yerd"), matching the social card. Markup comes from the
- * #home-hero-info slot in Layout.vue. Hidden below the hero's stacked
- * breakpoint - the navbar already shows the logo + wordmark there, so
- * repeating it right below the screenshot is redundant. */
-.VPHero .hero-brand {
-  display: flex;
-  align-items: center;
-  gap: 1.4em;
-  margin-bottom: 3rem;
-}
-@media (max-width: 959px) {
-  .VPHero .hero-brand {
-    display: none;
-  }
-  /* Restore the breathing room the lockup used to provide between the
-   * screenshot and the headline, now that it's hidden here. */
-  .VPHero .text {
-    margin-top: 3rem;
-  }
-}
-.VPHero .hero-logo {
-  display: block;
-  flex-shrink: 0;
-  width: 34px;
-  height: 34px;
-}
-@media (min-width: 640px) {
-  .VPHero .hero-logo {
-    width: 46px;
-    height: 46px;
-  }
-}
-@media (min-width: 960px) {
-  .VPHero .hero-logo {
-    width: 54px;
-    height: 54px;
-  }
-}
-/* "Yerd" in the foreground colour (white on dark, ink on light) - the default
- * hero gradient is overridden here. */
-.VPHero .name {
-  color: var(--vp-c-text-1);
-  -webkit-text-fill-color: var(--vp-c-text-1);
-  background: none;
-  font-size: 34px;
-  line-height: 1.05;
-  /* Outage Cut's caps sit high in the line box; nudge down to centre on the logo. */
-  position: relative;
-  top: 0.07em;
-}
-@media (min-width: 640px) {
-  .VPHero .name {
-    font-size: 46px;
-  }
-}
-@media (min-width: 960px) {
-  .VPHero .name {
-    font-size: 54px;
-  }
-}
-/* "without the friction." in brand blue, like the social card's accent line. */
-.VPHero .text .accent {
-  color: var(--vp-c-brand-1);
-  -webkit-text-fill-color: var(--vp-c-brand-1);
-}
-
-/* The headline reads large in a heavy display face, so pull it below the default
- * hero sizes at each breakpoint. overflow-wrap guards against the fallback font
- * (rendered briefly before Outage Cut swaps in) measuring a word wider than a
- * narrow viewport - without it, a single long word can push the hero wider than
- * the screen instead of wrapping. */
-.VPHero .text {
-  display: block;
-  font-size: 28px;
-  line-height: 1.2;
-  overflow-wrap: break-word;
-}
-@media (min-width: 640px) {
-  .VPHero .text {
-    font-size: 36px;
-  }
-}
-@media (min-width: 960px) {
-  .VPHero .text {
-    font-size: 44px;
-  }
-}
-
-/* Supporting tagline: a touch smaller for balance, with a generous gap above it
- * to separate it clearly from the headline. */
-.VPHero .tagline {
-  margin-top: 2rem;
-  font-size: 16px;
-  line-height: 1.6;
-}
-@media (min-width: 960px) {
-  .VPHero .tagline {
-    font-size: 18px;
-  }
-}
-
-/* Navbar site title, matching the hero wordmark. Sized up so it reads as a
- * wordmark and sits centered against the logo - the display face has a small cap
- * height, so the default 16px looks tiny and high. */
-.VPNavBarTitle .title {
-  font-family: var(--forjed-display);
-  font-weight: 400;
-  font-size: 22px;
-  letter-spacing: 0.02em;
-}
-/* Centre the wordmark against the logo (the display face sits high in its box). */
-.VPNavBarTitle .title span {
-  display: inline-block;
-  transform: translateY(2px);
-}
-
-/* ---- Hero screenshot (replaces the logo image) ----
- * A rounded card on the right showing the overview dashboard from the top.
- * Pushed to the page's right edge (margin-left:auto opens a wide gap from the
- * text); about 90% of the shot's height is visible, with all corners rounded -
- * framed like a product shot rather than a hard bleed. */
-.VPHero .image-bg {
-  display: none;
-}
-/* Vertically centre the text column against the taller screenshot card. */
-@media (min-width: 960px) {
-  .VPHero .container {
-    align-items: center;
-  }
-}
-.VPHero .image {
-  flex: 0 0 auto;
-  margin: 0 0 0 auto;
-}
-.VPHero .image-container {
-  display: block;
-  width: 520px;
-  height: auto;
-  max-height: 466px;
-  margin: 0;
-  transform: none;
-  overflow: hidden;
-  border-radius: 16px;
-  border: 1px solid var(--vp-c-divider);
-  box-shadow:
-    0 26px 50px -20px rgba(0, 0, 0, 0.3),
-    0 10px 22px -12px rgba(0, 0, 0, 0.18);
-}
-.dark .VPHero .image-container {
-  border-color: rgba(255, 255, 255, 0.08);
-  box-shadow:
-    0 26px 50px -16px rgba(0, 0, 0, 0.6),
-    0 10px 22px -12px rgba(0, 0, 0, 0.5);
-}
-/* Anchor the shot to its top-left so the window titlebar shows; it's wider than
- * the card, so the right of the dashboard is cropped behind the rounded edge.
- * The light/dark variants both render and CSS hides the off-theme one (keyed on
- * the .dark class VitePress sets on <html> before paint, so there's no flash). */
-.VPHero .hero-shot {
-  display: block;
-  position: relative;
-  width: 780px;
-  max-width: none;
-  max-height: none;
-  height: auto;
-}
-html.dark .VPHero .hero-shot--light {
-  display: none;
-}
-html:not(.dark) .VPHero .hero-shot--dark {
-  display: none;
-}
-@media (max-width: 959px) {
-  .VPHero .image {
-    margin: 0;
-  }
-  .VPHero .image-container {
-    width: 100%;
-    max-height: none;
-  }
-  .VPHero .hero-shot {
-    width: 100%;
-  }
-}
-
-:root {
-  --forjed-display: 'Outage Cut', var(--vp-font-family-base);
-
-  --vp-c-brand-1: #4f46e5; /* indigo-600 — links, accents (light) */
-  --vp-c-brand-2: #4338ca; /* indigo-700 */
-  --vp-c-brand-3: #6366f1; /* indigo-500 — button hover */
-  --vp-c-brand-soft: rgba(99, 102, 241, 0.14);
-
-  /* Hero "Yerd" wordmark: the logo gradient. */
-  --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: linear-gradient(
-    120deg,
-    #6366f1 30%,
-    #4338ca
-  );
-
-  /* Glow behind the hero logo image. A cool teal -> sky gradient so it
-   * contrasts with (rather than blends into) the indigo logo. */
-  --vp-home-hero-image-background-image: linear-gradient(
-    -45deg,
-    #2dd4bf 40%,
-    #38bdf8
-  );
-  --vp-home-hero-image-filter: blur(44px);
-}
-
-.dark {
-  --vp-c-brand-1: #818cf8; /* indigo-400 — readable on dark */
-  --vp-c-brand-2: #6366f1; /* indigo-500 */
-  --vp-c-brand-3: #6366f1;
-  --vp-c-brand-soft: rgba(129, 140, 248, 0.16);
-}
-
-@media (min-width: 640px) {
-  :root {
-    --vp-home-hero-image-filter: blur(56px);
-  }
-}
-
-@media (min-width: 960px) {
-  :root {
-    --vp-home-hero-image-filter: blur(68px);
-  }
-}
-
-/* ---- Theme-aware screenshots (<ThemedImage>) ----
- * Both images render; CSS hides the off-theme one keyed on the `.dark` class
- * VitePress sets on <html> before paint, so there's no flash.
- */
-html.dark .themed-img--light {
-  display: none;
-}
-html:not(.dark) .themed-img--dark {
-  display: none;
-}
-.themed-img {
-  display: block;
-  width: 100%;
-  margin: 1.25rem 0;
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-}
-
-/* ---- Home page screenshot showcase (<ShowcaseRow>) ---- */
-.home-showcase {
-  max-width: 1152px;
-  margin: 5rem auto 1rem;
-  padding: 0 24px;
-}
-/* Scoped with an element selector so these beat VitePress's `.vp-doc h2`/`p`
- * rules (which otherwise override the margins and break the centering). */
-.home-showcase h2.home-showcase__heading {
-  text-align: center;
-  border-top: 0;
-  margin: 0 0 0.5rem;
-  padding-top: 0;
-  font-family: var(--forjed-display);
-  font-size: clamp(1.8rem, 4vw, 2.4rem);
-  font-weight: 400;
-  letter-spacing: 0.01em;
-}
-.home-showcase p.home-showcase__sub {
-  text-align: center;
-  color: var(--vp-c-text-2);
-  max-width: 36rem;
-  margin: 0 auto 1rem;
-}
-.showcase {
-  display: grid;
-  grid-template-columns: 1.05fr 0.95fr;
-  gap: 3rem;
-  align-items: center;
-  margin: 3.5rem 0;
-}
-.showcase--reverse .showcase__media {
-  order: 2;
-}
-.showcase__img {
-  display: block;
-  width: 100%;
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 12px;
-  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.1);
-  cursor: zoom-in;
-  transition:
-    transform 0.18s ease,
-    box-shadow 0.18s ease;
-}
-.showcase__img:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
-}
-.dark .showcase__img {
-  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
-}
-.showcase__title {
-  font-family: var(--forjed-display);
-  font-size: 1.6rem;
-  font-weight: 400;
-  line-height: 1.2;
-  letter-spacing: 0.01em;
-  margin: 0 0 0.75rem;
-  border-top: 0;
-  padding-top: 0;
-}
-.showcase__text {
-  color: var(--vp-c-text-2);
-  font-size: 1.02rem;
-  line-height: 1.7;
-  margin: 0;
-}
-@media (max-width: 768px) {
-  .showcase {
-    grid-template-columns: 1fr;
-    gap: 1.5rem;
-    margin: 2.5rem 0;
-  }
-  .showcase--reverse .showcase__media {
-    order: 0;
-  }
-  .home-showcase {
-    padding: 0 16px;
-    margin-top: 3rem;
-  }
-}
-
-/* ---- Lightbox image viewer (<Lightbox>) ---- */
-.lightbox {
-  position: fixed;
-  inset: 0;
-  z-index: 200;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 2.5rem;
-  background: rgba(0, 0, 0, 0.82);
-  backdrop-filter: blur(4px);
-  cursor: zoom-out;
-}
-.lightbox__img {
-  max-width: min(1200px, 95vw);
-  max-height: 90vh;
-  width: auto;
-  height: auto;
-  border-radius: 10px;
-  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
-  cursor: default;
-}
-.lightbox__close {
-  position: fixed;
-  top: 0.75rem;
-  right: 1.25rem;
-  width: 2.5rem;
-  height: 2.5rem;
-  font-size: 2rem;
-  line-height: 1;
-  color: #fff;
-  background: transparent;
-  border: 0;
-  border-radius: 9999px;
-  cursor: pointer;
-  opacity: 0.75;
-  transition: opacity 0.15s ease;
-}
-.lightbox__close:hover {
-  opacity: 1;
-}
-.lightbox-fade-enter-active,
-.lightbox-fade-leave-active {
-  transition: opacity 0.2s ease;
-}
-.lightbox-fade-enter-from,
-.lightbox-fade-leave-to {
-  opacity: 0;
-}
-
-/* ---- Mermaid diagrams ----
- * Let diagrams size to their content and stay responsive, instead of being
- * clipped to a fixed pixel height (which cut off multi-line node labels).
- */
-.mermaid {
-  margin: 1.25rem 0;
-  text-align: center;
-}
-
-/* The SVG carries a fixed height attribute; override it so the diagram grows
- * to fit its content and scales down on narrow screens. */
-.mermaid svg {
-  max-width: 100%;
-  height: auto !important;
-}
-
-/* HTML labels wrap into a <foreignObject> (node and edge labels alike); make
- * sure every wrapped line is visible and the box is not clipped vertically. */
-.mermaid foreignObject {
-  overflow: visible;
-}
-.mermaid foreignObject > div,
-.mermaid foreignObject p,
-.mermaid .nodeLabel,
-.mermaid span.nodeLabel,
-.mermaid .edgeLabel {
-  white-space: normal !important;
-  overflow: visible !important;
-  line-height: 1.35;
-}
-
-/* ---- Video embeds (<YouTubeEmbed>) ---- */
-.yt-embed {
-  position: relative;
-  width: 100%;
-  aspect-ratio: 16 / 9;
-  margin: 1.25rem 0;
-  overflow: hidden;
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 12px;
-  background: var(--vp-c-bg-soft);
-  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.1);
-}
-.dark .yt-embed {
-  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
-}
-.yt-embed__facade {
-  display: block;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  border: 0;
-  background: none;
-  cursor: pointer;
-}
-.yt-embed__thumb {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: filter 0.18s ease;
-}
-.yt-embed__facade:hover .yt-embed__thumb {
-  filter: brightness(0.85);
-}
-.yt-embed__play {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.yt-embed__play svg {
-  width: 68px;
-  height: 48px;
-  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
-  transition: transform 0.18s ease;
-}
-.yt-embed__facade:hover .yt-embed__play svg {
-  transform: scale(1.08);
-}
-.yt-embed__frame {
-  display: block;
-  width: 100%;
-  height: 100%;
-  border: 0;
-}
+@import './styles/fonts.css';
+@import './styles/tokens.css';
+@import './styles/doc.css';
+@import './styles/home.css';
+@import './styles/components.css';
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index bce099de..94dce7f8 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -2,19 +2,20 @@ import DefaultTheme from 'vitepress/theme'
 import type { Theme } from 'vitepress'
 import Layout from './Layout.vue'
 import ThemedImage from './components/ThemedImage.vue'
-import ShowcaseRow from './components/ShowcaseRow.vue'
 import YouTubeEmbed from './components/YouTubeEmbed.vue'
+import HomeLayout from './components/home/HomeLayout.vue'
 import './custom.css'
 
-// Extends the VitePress default theme with Yerd's indigo brand palette and
-// hero styling (see custom.css), plus globals for light/dark screenshots
-// (<ThemedImage>, <ShowcaseRow>) and click-to-load video embeds (<YouTubeEmbed>).
+// Extends the VitePress default theme with Yerd's palette and typography (see
+// styles/), the bespoke home page (`layout: HomeLayout` in index.md), and the
+// globals markdown pages use: light/dark screenshots (<ThemedImage>) and
+// click-to-load video embeds (<YouTubeEmbed>).
 export default {
   extends: DefaultTheme,
   Layout,
   enhanceApp({ app }) {
+    app.component('HomeLayout', HomeLayout)
     app.component('ThemedImage', ThemedImage)
-    app.component('ShowcaseRow', ShowcaseRow)
     app.component('YouTubeEmbed', YouTubeEmbed)
   },
 } satisfies Theme
diff --git a/docs/.vitepress/theme/styles/components.css b/docs/.vitepress/theme/styles/components.css
new file mode 100644
index 00000000..8f515d70
--- /dev/null
+++ b/docs/.vitepress/theme/styles/components.css
@@ -0,0 +1,227 @@
+/**
+ * Shared content components: theme-aware screenshots, the lightbox overlay,
+ * Mermaid diagrams, and click-to-load video embeds.
+ */
+
+/* ---- Theme-aware screenshots (<ThemedImage>) ----
+ * Both images render; CSS hides the off-theme one keyed on the `.dark` class
+ * VitePress sets on <html> before paint, so there's no flash.
+ */
+html.dark .themed-img--light {
+  display: none;
+}
+html:not(.dark) .themed-img--dark {
+  display: none;
+}
+.themed-img {
+  display: block;
+  width: 100%;
+  margin: 1.25rem 0;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+}
+
+/* ---- Lightbox image viewer (<Lightbox>) ---- */
+.lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2.5rem;
+  background: rgba(4, 7, 14, 0.86);
+  backdrop-filter: blur(4px);
+  cursor: zoom-out;
+}
+.lightbox__img {
+  max-width: min(1200px, 95vw);
+  max-height: 90vh;
+  width: auto;
+  height: auto;
+  border-radius: 12px;
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
+  cursor: default;
+}
+.lightbox__close {
+  position: fixed;
+  top: 0.75rem;
+  right: 1.25rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: 2rem;
+  line-height: 1;
+  color: #fff;
+  background: transparent;
+  border: 0;
+  border-radius: 9999px;
+  cursor: pointer;
+  opacity: 0.75;
+  transition: opacity 0.15s ease;
+}
+.lightbox__close:hover {
+  opacity: 1;
+}
+.lightbox-fade-enter-active,
+.lightbox-fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.lightbox-fade-enter-from,
+.lightbox-fade-leave-to {
+  opacity: 0;
+}
+
+/* ---- Mermaid diagrams ----
+ * Let diagrams size to their content and stay responsive, instead of being
+ * clipped to a fixed pixel height (which cut off multi-line node labels).
+ */
+.mermaid {
+  margin: 1.25rem 0;
+  text-align: center;
+}
+
+/* The SVG carries a fixed height attribute; override it so the diagram grows
+ * to fit its content and scales down on narrow screens. */
+.mermaid svg {
+  max-width: 100%;
+  height: auto !important;
+}
+
+/* Repaint Mermaid's own theme in the Yerd palette. The plugin renders in the
+ * browser and swaps between mermaid's `default`/`dark` themes on the fly, so
+ * the colours have to be forced from CSS to stay theme-aware - hence the
+ * !important on every declaration mermaid writes into the SVG's own <style>. */
+.mermaid svg {
+  font-family: var(--y-sans) !important;
+}
+.mermaid svg .node rect,
+.mermaid svg .node polygon,
+.mermaid svg .node circle,
+.mermaid svg .node path,
+.mermaid svg .label-container {
+  fill: var(--vp-c-bg-elv) !important;
+  stroke: var(--vp-c-brand-1) !important;
+  stroke-width: 1px !important;
+}
+.mermaid svg .cluster rect {
+  fill: var(--vp-c-bg-alt) !important;
+  stroke: var(--vp-c-divider) !important;
+}
+.mermaid svg .nodeLabel,
+.mermaid svg .cluster-label,
+.mermaid svg .label,
+.mermaid svg text {
+  color: var(--vp-c-text-1) !important;
+  fill: var(--vp-c-text-1) !important;
+}
+.mermaid svg .edgePath .path,
+.mermaid svg .flowchart-link,
+.mermaid svg .messageLine0,
+.mermaid svg .messageLine1,
+.mermaid svg .transition {
+  stroke: var(--vp-c-text-3) !important;
+}
+.mermaid svg marker path,
+.mermaid svg .arrowheadPath,
+.mermaid svg .marker {
+  fill: var(--vp-c-text-3) !important;
+  stroke: var(--vp-c-text-3) !important;
+}
+.mermaid svg .edgeLabel,
+.mermaid svg .edgeLabel p,
+.mermaid svg .edgeLabel rect,
+.mermaid svg .labelBkg {
+  background-color: var(--vp-c-bg) !important;
+  fill: var(--vp-c-bg) !important;
+  color: var(--vp-c-text-2) !important;
+}
+.mermaid svg .edgeLabel .edgeLabel {
+  color: var(--vp-c-text-2) !important;
+}
+/* Sequence diagrams: actor boxes, lifelines, and message text. */
+.mermaid svg .actor {
+  fill: var(--vp-c-bg-elv) !important;
+  stroke: var(--vp-c-brand-1) !important;
+}
+.mermaid svg text.actor > tspan,
+.mermaid svg .messageText,
+.mermaid svg .loopText,
+.mermaid svg .noteText {
+  fill: var(--vp-c-text-1) !important;
+}
+.mermaid svg line.actor-line {
+  stroke: var(--vp-c-divider) !important;
+}
+.mermaid svg .note {
+  fill: var(--vp-c-bg-alt) !important;
+  stroke: var(--vp-c-divider) !important;
+}
+
+/* HTML labels wrap into a <foreignObject> (node and edge labels alike); make
+ * sure every wrapped line is visible and the box is not clipped vertically. */
+.mermaid foreignObject {
+  overflow: visible;
+}
+.mermaid foreignObject > div,
+.mermaid foreignObject p,
+.mermaid .nodeLabel,
+.mermaid span.nodeLabel,
+.mermaid .edgeLabel {
+  white-space: normal !important;
+  overflow: visible !important;
+  line-height: 1.35;
+}
+
+/* ---- Video embeds (<YouTubeEmbed>) ---- */
+.yt-embed {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  margin: 1.25rem 0;
+  overflow: hidden;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  background: var(--vp-c-bg-soft);
+  box-shadow: var(--y-shadow);
+}
+.yt-embed__facade {
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+}
+.yt-embed__thumb {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: filter 0.18s ease;
+}
+.yt-embed__facade:hover .yt-embed__thumb {
+  filter: brightness(0.85);
+}
+.yt-embed__play {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.yt-embed__play svg {
+  width: 68px;
+  height: 48px;
+  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
+  transition: transform 0.18s ease;
+}
+.yt-embed__facade:hover .yt-embed__play svg {
+  transform: scale(1.08);
+}
+.yt-embed__frame {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
diff --git a/docs/.vitepress/theme/styles/doc.css b/docs/.vitepress/theme/styles/doc.css
new file mode 100644
index 00000000..7c6a6d60
--- /dev/null
+++ b/docs/.vitepress/theme/styles/doc.css
@@ -0,0 +1,394 @@
+/**
+ * Documentation chrome: navbar, sidebar, prose, code, aside, and page footer.
+ *
+ * Everything here reshapes the VitePress default theme rather than replacing
+ * it, so upstream keeps owning behaviour (routing, search, mobile nav) while
+ * Yerd owns the look.
+ */
+
+/* ---- Navbar ------------------------------------------------------------- */
+
+/* Floats over the hero glow on the home page and over the doc glow elsewhere,
+ * so it is a translucent blurred band rather than a solid one. */
+.VPNav {
+  background-color: transparent;
+}
+.VPNavBar {
+  background-color: color-mix(in srgb, var(--vp-c-bg) 76%, transparent);
+  backdrop-filter: saturate(140%) blur(14px);
+}
+.VPNavBar.home.top,
+.VPNavBar.top:not(.has-sidebar) {
+  background-color: transparent;
+  backdrop-filter: none;
+}
+/* The default theme only draws the navbar hairline once scrolled; the design
+ * has it always, running the full width under the bar. */
+.VPNavBar .divider {
+  display: none;
+}
+.VPNavBar::after {
+  content: '';
+  position: absolute;
+  inset: auto 0 0;
+  height: 1px;
+  background-color: var(--vp-c-divider);
+}
+
+.VPNavBarTitle .title {
+  font-family: var(--y-display);
+  font-weight: 400;
+  font-size: 21px;
+  letter-spacing: 0.045em;
+  border-bottom: 0;
+}
+/* Outage Cut's caps sit high in the line box - nudge down to centre on the mark. */
+.VPNavBarTitle .title > span:last-child {
+  display: inline-block;
+  transform: translateY(2px);
+}
+
+.VPNavBarMenuLink,
+.VPNavBarMenuGroup .VPFlyout .button {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+/* The version dropdown reads as a chip, matching the design's `v2.x` badge. */
+.VPNavBarMenuGroup > .button > .text {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 6px 0 12px;
+  height: 28px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background-color: var(--y-surface);
+  font-family: var(--y-mono);
+  font-size: 12px;
+  letter-spacing: 0.02em;
+  color: var(--vp-c-text-2);
+  transition:
+    border-color 0.2s,
+    color 0.2s;
+}
+.VPNavBarMenuGroup > .button:hover > .text {
+  border-color: var(--y-line-3);
+  color: var(--vp-c-text-1);
+}
+
+/* Search: a bordered field, not a bare button. */
+.VPNavBarSearch .DocSearch-Button,
+.VPNavBarSearch button.DocSearch-Button {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background-color: var(--y-surface);
+}
+.VPNavBarSearch .DocSearch-Button:hover {
+  border-color: var(--y-line-3);
+  background-color: var(--y-surface);
+}
+.DocSearch-Button-Placeholder {
+  font-size: 13px;
+  color: var(--vp-c-text-3);
+}
+.DocSearch-Button-Key {
+  font-family: var(--y-mono);
+  font-size: 11px;
+}
+
+/* ---- Sidebar ------------------------------------------------------------ */
+
+.VPSidebar {
+  border-right: 1px solid var(--vp-c-divider);
+}
+.VPSidebarItem.level-0 > .item > .text {
+  font-family: var(--y-sans);
+  font-size: 13.5px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--vp-c-text-1);
+}
+.VPSidebarItem.level-0 .VPSidebarItem .link .text,
+.VPSidebarItem.level-1 > .item > .text {
+  font-size: 13.5px;
+  font-weight: 400;
+  color: var(--vp-c-text-2);
+  transition: color 0.2s;
+}
+.VPSidebarItem .link:hover .text {
+  color: var(--vp-c-text-1);
+}
+.VPSidebarItem.is-active > .item .link .text,
+.VPSidebarItem.is-active > .item > .text {
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
+}
+/* A hairline between top-level groups, as in the design. */
+.VPSidebarItem.level-0:not(:first-child) {
+  border-top: 1px solid var(--vp-c-divider);
+  padding-top: 22px;
+  margin-top: 4px;
+}
+
+/* ---- The blue wash behind the top of every doc page --------------------- */
+
+.Layout:not(.home-page) .VPContent:not(.is-home) {
+  background-image: radial-gradient(
+    1740px 560px at 50% 216px,
+    var(--y-glow-doc),
+    var(--y-glow-none) 68%
+  );
+  background-repeat: no-repeat;
+}
+
+/* ---- Prose -------------------------------------------------------------- */
+
+.vp-doc h1,
+.vp-doc h2,
+.vp-doc h3,
+.vp-doc h4 {
+  font-family: var(--y-sans);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+.vp-doc h1 {
+  font-size: 30px;
+  line-height: 1.2;
+  margin-bottom: 20px;
+}
+.vp-doc h2 {
+  font-size: 22px;
+  line-height: 1.2;
+  margin: 44px 0 18px;
+  padding-top: 26px;
+  border-top: 1px solid var(--vp-c-divider);
+  letter-spacing: -0.018em;
+}
+.vp-doc h3 {
+  font-size: 18px;
+  line-height: 1.3;
+  margin: 30px 0 12px;
+}
+.vp-doc p,
+.vp-doc li {
+  font-size: 15.5px;
+  line-height: 1.7;
+  color: var(--vp-c-text-2);
+}
+.vp-doc strong {
+  color: var(--vp-c-text-1);
+  font-weight: 700;
+}
+.vp-doc a {
+  font-weight: 500;
+  text-underline-offset: 3px;
+}
+/* Blue markers, as in the design. */
+.vp-doc ul {
+  list-style: none;
+  padding-left: 22px;
+}
+.vp-doc ul > li {
+  position: relative;
+}
+.vp-doc ul > li::before {
+  content: '';
+  position: absolute;
+  left: -16px;
+  top: 0.72em;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background-color: var(--vp-c-brand-1);
+}
+.vp-doc ol {
+  padding-left: 24px;
+}
+.vp-doc ol > li::marker {
+  font-family: var(--y-mono);
+  font-size: 0.85em;
+  color: var(--vp-c-text-3);
+}
+
+/* Inline code renders as a bordered chip. */
+.vp-doc :not(pre) > code {
+  padding: 3px 6px;
+  border: 1px solid var(--y-line-2);
+  border-radius: 6px;
+  background-color: var(--vp-code-bg);
+  font-weight: 400;
+}
+
+/* ---- Code blocks -------------------------------------------------------- */
+
+.vp-doc div[class*='language-'],
+.vp-block {
+  border: 1px solid var(--y-line-2);
+  border-radius: 10px;
+  background-color: var(--vp-code-block-bg);
+}
+.vp-doc [class*='language-'] code {
+  font-size: 13px;
+}
+/* The language tag stays visible instead of fading in on hover. */
+.vp-doc [class*='language-'] > span.lang {
+  opacity: 1;
+  font-family: var(--y-mono);
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  color: var(--vp-c-text-3);
+}
+.vp-doc [class*='language-']:hover > button.copy + span.lang {
+  opacity: 0;
+}
+
+/* ---- Tables ------------------------------------------------------------- */
+
+.vp-doc table {
+  display: table;
+  width: 100%;
+  border-collapse: collapse;
+  overflow-x: auto;
+}
+.vp-doc th {
+  font-family: var(--y-mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--vp-c-text-3);
+  background-color: transparent;
+}
+.vp-doc td,
+.vp-doc th {
+  border-color: var(--vp-c-divider);
+  font-size: 14px;
+}
+.vp-doc tr {
+  background-color: transparent;
+  border-top-color: var(--vp-c-divider);
+}
+
+/* ---- Custom blocks ------------------------------------------------------ */
+
+.vp-doc .custom-block {
+  border: 1px solid var(--y-line-2);
+  border-radius: 12px;
+  background-color: var(--vp-c-bg-elv);
+}
+.vp-doc .custom-block.tip,
+.vp-doc .custom-block.info,
+.vp-doc .custom-block.note {
+  border-color: color-mix(in srgb, var(--vp-c-brand-1) 30%, var(--y-line-2));
+}
+.vp-doc .custom-block.warning {
+  border-color: color-mix(in srgb, var(--vp-c-warning-1) 34%, var(--y-line-2));
+}
+.vp-doc .custom-block.danger,
+.vp-doc .custom-block.caution {
+  border-color: color-mix(in srgb, var(--vp-c-danger-1) 34%, var(--y-line-2));
+}
+.vp-doc .custom-block .custom-block-title {
+  font-family: var(--y-mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--vp-c-brand-1);
+}
+.vp-doc .custom-block.warning .custom-block-title {
+  color: var(--vp-c-warning-1);
+}
+.vp-doc .custom-block.danger .custom-block-title {
+  color: var(--vp-c-danger-1);
+}
+.vp-doc .custom-block p {
+  font-size: 14px;
+}
+
+/* ---- Right-hand outline ------------------------------------------------- */
+
+.VPDocAsideOutline .outline-title {
+  font-family: var(--y-sans);
+  font-size: 13.5px;
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+}
+.VPDocAsideOutline .outline-link {
+  font-size: 13.5px;
+  color: var(--vp-c-text-2);
+}
+.VPDocAsideOutline .root .outline-marker {
+  background-color: var(--vp-c-brand-1);
+}
+
+/* ---- Page footer: edit link, timestamp, prev/next ----------------------- */
+
+.VPDocFooter {
+  margin-top: 56px;
+  padding-top: 24px;
+  border-top: 1px solid var(--vp-c-divider);
+}
+.VPDocFooter .edit-info {
+  padding-bottom: 24px;
+}
+.VPDocFooter .edit-link-button,
+.VPDocFooter .VPLastUpdated {
+  font-size: 13.5px;
+  font-weight: 500;
+}
+.VPDocFooter .prev-next {
+  border-top: 0;
+  padding-top: 0;
+}
+.VPDocFooter .pager-link {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 15px 16px;
+  background-color: var(--vp-c-bg-elv);
+  transition:
+    border-color 0.2s,
+    transform 0.2s;
+}
+.VPDocFooter .pager-link:hover {
+  border-color: var(--vp-c-brand-1);
+  transform: translateY(-1px);
+}
+.VPDocFooter .pager-link .desc {
+  font-family: var(--y-mono);
+  font-size: 10.5px;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--vp-c-text-3);
+}
+.VPDocFooter .pager-link .title {
+  font-family: var(--y-sans);
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--vp-c-brand-1);
+}
+
+/* ---- Local nav (mobile "On this page" bar) ------------------------------ */
+
+.VPLocalNav {
+  background-color: color-mix(in srgb, var(--vp-c-bg) 88%, transparent);
+  backdrop-filter: saturate(140%) blur(14px);
+  border-bottom-color: var(--vp-c-divider);
+}
+
+/* ---- Site footer -------------------------------------------------------- */
+
+.VPFooter {
+  background-color: var(--vp-c-bg);
+  border-top-color: var(--vp-c-divider);
+}
+.VPFooter .message,
+.VPFooter .copyright {
+  font-family: var(--y-prose);
+  font-size: 14px;
+  font-weight: 400;
+}
+.VPFooter .copyright {
+  color: var(--vp-c-text-3);
+}
diff --git a/docs/.vitepress/theme/styles/fonts.css b/docs/.vitepress/theme/styles/fonts.css
new file mode 100644
index 00000000..bbe3320e
--- /dev/null
+++ b/docs/.vitepress/theme/styles/fonts.css
@@ -0,0 +1,68 @@
+/**
+ * Self-hosted webfonts. Nothing is fetched from a third-party host, so the
+ * site renders identically offline and leaks no requests to visitors' browsers.
+ *
+ * - Outage Cut: the Forjed display face, used for the marketing headlines and
+ *   the wordmark. Licensed for @font-face use by its author (see
+ *   `public/fonts/OutageCut.LICENSE.txt`). One heavy all-caps weight only, so
+ *   anything set in it uses font-weight: 400 to avoid faux-bold synthesis.
+ * - Space Grotesk: the UI and documentation face (variable, 300-700).
+ * - JetBrains Mono: code, terminals, and the small uppercase labels (variable,
+ *   100-800). Only the latin and latin-ext subsets are shipped.
+ */
+
+@font-face {
+  font-family: 'Outage Cut';
+  src: url('/fonts/OutageCut.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Space Grotesk - latin */
+@font-face {
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-weight: 300 700;
+  font-display: swap;
+  src: url('/fonts/space-grotesk-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
+    U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Space Grotesk - latin-ext */
+@font-face {
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-weight: 300 700;
+  font-display: swap;
+  src: url('/fonts/space-grotesk-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
+    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
+    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* JetBrains Mono - latin */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 100 800;
+  font-display: swap;
+  src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
+    U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* JetBrains Mono - latin-ext */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 100 800;
+  font-display: swap;
+  src: url('/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
+    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
+    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
diff --git a/docs/.vitepress/theme/styles/home.css b/docs/.vitepress/theme/styles/home.css
new file mode 100644
index 00000000..08bc830a
--- /dev/null
+++ b/docs/.vitepress/theme/styles/home.css
@@ -0,0 +1,835 @@
+/**
+ * The home page (layout: HomeLayout).
+ *
+ * Layout follows a 1152px content column on a 1440px canvas - the same grid the
+ * design was drawn on. The blue washes behind each section are painted as
+ * radial background images rather than blurred elements, so scrolling never
+ * composites a large blur layer.
+ */
+
+.y-home {
+  background-color: var(--y-canvas);
+  font-family: var(--y-prose);
+  overflow-x: clip;
+  isolation: isolate;
+}
+/* The footer belongs to the same canvas as the page above it. */
+.home-page .VPFooter {
+  background-color: var(--y-canvas);
+}
+/* The default theme only hides its mobile local-nav bar on `layout: home`,
+ * which a custom layout is not - without this a "Return to top" bar pins
+ * itself over the hero below 960px. */
+.home-page .VPLocalNav {
+  display: none;
+}
+
+.y-section {
+  max-width: var(--y-content-width);
+  margin: 0 auto;
+  padding: 0 24px;
+}
+.y-home > .y-section {
+  padding-top: 112px;
+}
+.y-home > .y-section--tight {
+  padding-top: 96px;
+}
+
+/* ---- Shared atoms ------------------------------------------------------- */
+
+.y-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  margin: 0;
+  padding: 0 18px;
+  height: 32px;
+  border: 1px solid var(--y-line-2);
+  border-radius: 999px;
+  background-color: var(--y-surface);
+  font-family: var(--y-mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.145em;
+  color: var(--vp-c-text-2);
+}
+.y-pill__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--y-blue-bright);
+}
+
+.y-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 196px;
+  height: 54px;
+  padding: 0 24px;
+  border-radius: 11px;
+  border: 1px solid transparent;
+  font-size: 15.5px;
+  font-weight: 600;
+  transition:
+    background-color 0.2s,
+    border-color 0.2s,
+    transform 0.2s;
+}
+.y-btn:hover {
+  transform: translateY(-1px);
+}
+.y-btn--brand {
+  background-color: var(--y-blue);
+  color: #fff;
+  box-shadow: 0 4px 34px -4px rgba(58, 99, 238, 0.5);
+}
+.y-btn--brand:hover {
+  background-color: #2b4ecc;
+}
+.y-btn--alt {
+  background-color: var(--y-surface);
+  border-color: var(--y-line-3);
+  color: var(--vp-c-text-1);
+  box-shadow: var(--y-shadow);
+}
+.y-btn--alt:hover {
+  border-color: var(--y-blue);
+}
+.dark .y-btn--alt {
+  background-color: #0e1626;
+}
+
+.y-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 12px;
+  height: 30px;
+  border: 1px solid var(--y-line-2);
+  border-radius: 8px;
+  background-color: var(--y-surface-2);
+  font-family: var(--y-mono);
+  font-size: 12.5px;
+  color: var(--y-blue-code);
+  white-space: nowrap;
+}
+.y-chip--lg {
+  height: 32px;
+  font-size: 13px;
+}
+
+.y-head {
+  margin-bottom: 52px;
+}
+.y-head__eyebrow {
+  margin: 0 0 16px;
+  font-family: var(--y-mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.145em;
+  color: var(--y-blue-bright);
+}
+.y-head__heading {
+  margin: 0;
+  font-family: var(--y-display);
+  font-weight: 400;
+  font-size: clamp(28px, 3.2vw, 40px);
+  line-height: 1.08;
+  letter-spacing: -0.01em;
+  color: var(--vp-c-text-1);
+}
+.y-head__sub {
+  max-width: 740px;
+  margin: 20px 0 0;
+  font-size: 15.5px;
+  line-height: 1.6;
+  color: var(--vp-c-text-2);
+}
+
+/* ---- Hero --------------------------------------------------------------- */
+
+.y-hero {
+  padding: 72px 0 0;
+}
+.y-hero__inner {
+  display: grid;
+  padding: 0 24px;
+  grid-template-columns: minmax(0, 1fr) 532px;
+  gap: 56px;
+  align-items: start;
+  max-width: var(--y-content-width);
+  margin: 0 auto;
+}
+.y-hero__copy {
+  max-width: 560px;
+}
+.y-hero__demo {
+  margin-top: 80px;
+}
+
+.y-hero__title {
+  display: flex;
+  flex-direction: column;
+  margin: 58px 0 0;
+  font-family: var(--y-display);
+  font-weight: 400;
+  font-size: clamp(38px, 5vw, 72px);
+  line-height: 1.03;
+  letter-spacing: -0.017em;
+  color: var(--vp-c-text-1);
+}
+.y-hero__accent {
+  color: var(--y-blue-bright);
+}
+.y-hero__tagline {
+  max-width: 520px;
+  margin: 42px 0 0;
+  font-size: 17.5px;
+  line-height: 1.6;
+  color: var(--vp-c-text-2);
+}
+.y-hero__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-top: 36px;
+}
+.y-hero__platforms {
+  margin: 32px 0 0;
+  font-family: var(--y-mono);
+  font-size: 11px;
+  color: var(--vp-c-text-3);
+}
+
+/* The copyable first command. */
+.y-cmd {
+  margin-top: 32px;
+  max-width: 520px;
+}
+.y-cmd__label {
+  margin: 0 0 9px;
+  font-family: var(--y-mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.145em;
+  color: var(--vp-c-text-3);
+}
+.y-cmd__bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  height: 52px;
+  padding: 0 10px 0 20px;
+  border: 1px solid var(--y-line-2);
+  border-radius: 11px;
+  background-color: var(--y-surface);
+  box-shadow: var(--y-shadow);
+}
+.y-cmd__text {
+  font-family: var(--y-mono);
+  font-size: 13.5px;
+  color: var(--vp-c-text-1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.y-cmd__prompt {
+  color: var(--y-blue-bright);
+}
+.y-cmd__caret {
+  display: inline-block;
+  width: 8px;
+  height: 16px;
+  margin-left: 3px;
+  vertical-align: -3px;
+  background-color: var(--y-blue-bright);
+  opacity: 0.75;
+  animation: y-blink 1.15s steps(1) infinite;
+}
+.y-cmd__copy {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--y-line-2);
+  border-radius: 8px;
+  background-color: var(--y-surface-2);
+  color: var(--vp-c-text-2);
+  cursor: pointer;
+  transition:
+    color 0.2s,
+    border-color 0.2s;
+}
+.y-cmd__copy:hover {
+  color: var(--y-blue-bright);
+  border-color: var(--y-blue-bright);
+}
+.y-cmd__copy svg {
+  width: 15px;
+  height: 15px;
+}
+
+@keyframes y-blink {
+  0%,
+  50% {
+    opacity: 0.75;
+  }
+  51%,
+  100% {
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .y-cmd__caret {
+    animation: none;
+  }
+}
+
+/* ---- Hero screenshot --------------------------------------------------- */
+
+.y-hero__shot {
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: 1px solid var(--y-line-2);
+  border-radius: 14px;
+  background-color: var(--y-surface);
+  box-shadow: var(--y-shadow-lg);
+  overflow: hidden;
+  cursor: zoom-in;
+  transition:
+    border-color 0.2s,
+    transform 0.2s;
+}
+.y-hero__shot:hover {
+  border-color: var(--y-blue);
+  transform: translateY(-2px);
+}
+.y-hero__shot img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+/* ---- Stats -------------------------------------------------------------- */
+
+.y-stats {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  margin: 0;
+  border: 1px solid var(--y-line);
+  border-radius: 16px;
+  background-color: var(--y-surface);
+  box-shadow: var(--y-shadow);
+}
+.y-stats__cell {
+  padding: 32px;
+  border-left: 1px solid var(--y-line);
+}
+.y-stats__cell:first-child {
+  border-left: 0;
+}
+.y-stats__value {
+  margin: 0;
+  font-family: var(--y-display);
+  font-weight: 400;
+  font-size: 32px;
+  line-height: 1.1;
+  letter-spacing: -0.01em;
+  color: var(--vp-c-text-1);
+}
+.y-stats__label {
+  margin: 10px 0 0;
+  font-family: var(--y-mono);
+  font-size: 11px;
+  letter-spacing: 0.13em;
+  color: var(--vp-c-text-2);
+}
+
+/* ---- Footprint bar ------------------------------------------------------ */
+
+.y-fp__track {
+  position: relative;
+  height: 72px;
+  border: 1px solid var(--y-line);
+  border-radius: 6px;
+  background-color: var(--y-surface);
+  box-shadow: var(--y-shadow);
+  overflow: hidden;
+}
+.y-fp__middle {
+  position: absolute;
+  inset: 0 auto 0 0;
+  background-color: #dbe1ec;
+}
+.dark .y-fp__middle {
+  background-color: #16223c;
+}
+.y-fp__yerd {
+  position: absolute;
+  inset: 0 auto 0 0;
+  background-image: linear-gradient(180deg, #93aeff, var(--y-blue));
+  box-shadow: 0 4px 22px 2px rgba(58, 99, 238, 0.45);
+}
+.dark .y-fp__yerd {
+  background-image: linear-gradient(180deg, #b9ccff, #5c86ff);
+  box-shadow: 0 4px 22px 2px rgba(92, 134, 255, 0.6);
+}
+.y-fp__scale {
+  position: relative;
+  height: 24px;
+  margin-top: 12px;
+  font-family: var(--y-mono);
+  font-size: 10px;
+  color: var(--vp-c-text-3);
+}
+.y-fp__tick {
+  position: absolute;
+  top: 0;
+  padding-top: 12px;
+  transform: translateX(-50%);
+  white-space: nowrap;
+}
+.y-fp__tick::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 1px;
+  height: 6px;
+  background-color: var(--y-line-2);
+}
+.y-fp__tick.is-first {
+  left: 0;
+  transform: none;
+}
+.y-fp__tick.is-first::before {
+  left: 0;
+}
+.y-fp__tick.is-last {
+  right: 0;
+  transform: none;
+}
+.y-fp__tick.is-last::before {
+  left: auto;
+  right: 0;
+}
+.y-fp__keys {
+  display: flex;
+  gap: 32px;
+  margin-top: 18px;
+  font-family: var(--y-mono);
+  font-size: 11px;
+  color: var(--vp-c-text-2);
+}
+.y-fp__key--brand {
+  font-weight: 500;
+  color: var(--y-blue-bright);
+}
+.y-fp__key--end {
+  margin-left: auto;
+}
+
+/* ---- Capability cards --------------------------------------------------- */
+
+.y-cards {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.y-card {
+  position: relative;
+  border: 1px solid var(--y-line);
+  border-radius: 16px;
+  background-color: var(--y-surface);
+  box-shadow: var(--y-shadow);
+  overflow: hidden;
+  transition:
+    border-color 0.2s,
+    transform 0.2s;
+}
+.dark .y-card {
+  border-color: var(--y-line);
+}
+.y-card:hover {
+  border-color: var(--y-blue);
+  transform: translateY(-2px);
+}
+/* The blue hairline that fades out along the top edge of every card. */
+.y-card::before {
+  content: '';
+  position: absolute;
+  inset: 0 0 auto;
+  height: 1px;
+  background-image: linear-gradient(
+    90deg,
+    var(--y-blue-bright),
+    var(--y-glow-none)
+  );
+}
+.y-card__body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  min-height: 248px;
+  padding: 28px;
+  color: inherit;
+}
+.y-card__icon {
+  width: 22px;
+  height: 22px;
+  color: var(--y-blue-bright);
+}
+.y-card__title {
+  margin: 24px 0 0;
+  font-family: var(--y-sans);
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--vp-c-text-1);
+}
+.y-card__text {
+  margin: 10px 0 20px;
+  font-size: 14.5px;
+  line-height: 1.55;
+  color: var(--vp-c-text-2);
+}
+.y-card__body .y-chip {
+  margin-top: auto;
+}
+
+/* ---- Three steps -------------------------------------------------------- */
+
+.y-steps {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+/* The hairline that threads through the numbered badges. */
+.y-steps::before {
+  content: '';
+  position: absolute;
+  top: 22px;
+  left: 22px;
+  right: 22px;
+  height: 1px;
+  background-color: var(--y-line);
+}
+.y-step {
+  position: relative;
+}
+.y-step__badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border: 1px solid var(--y-line-2);
+  border-radius: 50%;
+  background-color: var(--y-surface);
+  box-shadow: var(--y-shadow);
+  font-family: var(--y-display);
+  font-size: 18px;
+  color: var(--y-blue-bright);
+}
+.y-step .y-chip {
+  margin-top: 24px;
+}
+.y-step__text {
+  margin: 22px 0 0;
+  font-size: 14.5px;
+  line-height: 1.55;
+  color: var(--vp-c-text-2);
+}
+
+/* ---- Desktop app screenshots + service chips ---------------------------- */
+
+.y-shots {
+  display: grid;
+  grid-template-columns: minmax(0, 760fr) minmax(0, 368fr);
+  gap: 24px;
+}
+.y-shots__stack {
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  gap: 24px;
+  min-width: 0;
+}
+.y-shot {
+  display: block;
+  padding: 0;
+  border: 1px solid var(--y-line);
+  border-radius: 14px;
+  background-color: var(--y-surface);
+  box-shadow: var(--y-shadow);
+  overflow: hidden;
+  cursor: zoom-in;
+  transition:
+    border-color 0.2s,
+    transform 0.2s;
+}
+.y-shot:hover {
+  border-color: var(--y-blue);
+  transform: translateY(-2px);
+}
+.y-shot img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top left;
+}
+.y-shot--primary {
+  aspect-ratio: 760 / 428;
+}
+.y-shots__stack .y-shot {
+  aspect-ratio: 368 / 202;
+}
+.y-shots__captions {
+  display: grid;
+  grid-template-columns: minmax(0, 760fr) minmax(0, 368fr);
+  gap: 24px;
+  margin-top: 18px;
+}
+.y-shots__captions p {
+  margin: 0;
+  font-family: var(--y-mono);
+  font-size: 11px;
+  color: var(--vp-c-text-2);
+}
+
+.y-chips__label {
+  margin: 56px 0 14px;
+  text-align: center;
+  font-family: var(--y-mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.145em;
+  color: var(--vp-c-text-3);
+}
+.y-chips {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.y-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  height: 40px;
+  padding: 0 18px;
+  border: 1px solid var(--y-line-2);
+  border-radius: 20px;
+  background-color: var(--y-surface);
+  font-size: 13.5px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+.dark .y-tag {
+  background-color: #0e1626;
+  color: #c8d5ec;
+}
+.y-tag__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--y-blue-bright);
+}
+
+/* ---- Closing ------------------------------------------------------------ */
+
+.y-close {
+  position: relative;
+  max-width: var(--y-content-width);
+  margin: 0 auto;
+  padding: 130px 24px 96px;
+  text-align: center;
+}
+.y-close::before {
+  top: -320px;
+  bottom: -40px;
+  background-image: radial-gradient(
+    1080px 630px at 50% 50%,
+    var(--y-glow-strong),
+    var(--y-glow-none) 66%
+  );
+}
+.y-close__heading {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  font-family: var(--y-display);
+  font-weight: 400;
+  font-size: clamp(30px, 4vw, 52px);
+  line-height: 1.14;
+  letter-spacing: -0.01em;
+  color: var(--vp-c-text-1);
+}
+.y-close__sub {
+  margin: 30px 0 0;
+  font-size: 16px;
+  color: var(--vp-c-text-2);
+}
+.y-close__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 16px;
+  margin-top: 42px;
+}
+
+/* ---- Section washes ----------------------------------------------------- */
+
+/* The washes are painted on a full-bleed layer rather than on the section box,
+ * so on wide screens they keep spreading into the page margins instead of
+ * stopping dead at the edge of the 1152px column. `.y-home` isolates so the
+ * negative z-index stays above its own background, and clips so the 100vw
+ * layer never adds a horizontal scrollbar.
+ */
+.y-glow {
+  position: relative;
+}
+.y-glow::before {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  left: 50%;
+  width: 100vw;
+  transform: translateX(-50%);
+  background-repeat: no-repeat;
+  pointer-events: none;
+}
+/* Hero: the layer runs to the top of the page and well past the fold, so both
+ * washes finish fading inside it rather than being cut at the fold. */
+.y-glow--hero::before {
+  top: -64px;
+  bottom: -300px;
+  background-image:
+    radial-gradient(
+      840px 720px at 76% 364px,
+      var(--y-glow-term),
+      var(--y-glow-none) 70%
+    ),
+    radial-gradient(
+      1400px 1040px at 50% 124px,
+      var(--y-glow-strong),
+      var(--y-glow-none) 66%
+    );
+}
+/* Capabilities: centred on the left of the column, spreading further left. */
+.y-glow--left::before {
+  top: -260px;
+  bottom: -260px;
+  background-image: radial-gradient(
+    1240px 640px at calc(50% - 438px) 50%,
+    var(--y-glow-soft),
+    var(--y-glow-none) 62%
+  );
+}
+/* The app section, reaching up behind the three steps and out to the right. */
+.y-glow--right::before {
+  top: -440px;
+  bottom: -160px;
+  background-image: radial-gradient(
+    1240px 1000px at calc(50% + 438px) 45%,
+    var(--y-glow-soft),
+    var(--y-glow-none) 62%
+  );
+}
+
+/* ---- Responsive --------------------------------------------------------- */
+
+@media (max-width: 1150px) {
+  .y-hero__inner {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
+    gap: 40px;
+  }
+}
+
+@media (max-width: 960px) {
+  .y-hero {
+    padding-top: 56px;
+  }
+  .y-hero__inner {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .y-hero__copy,
+  .y-cmd,
+  .y-hero__tagline {
+    max-width: none;
+  }
+  .y-hero__demo {
+    margin-top: 0;
+  }
+  .y-home > .y-section,
+  .y-home > .y-section--tight {
+    padding-top: 80px;
+  }
+  .y-cards,
+  .y-steps {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .y-steps::before {
+    display: none;
+  }
+  .y-shots,
+  .y-shots__captions {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .y-shots__stack {
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: none;
+  }
+  .y-stats {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .y-stats__cell:nth-child(odd) {
+    border-left: 0;
+  }
+  .y-stats__cell:nth-child(n + 3) {
+    border-top: 1px solid var(--y-line);
+  }
+  .y-close {
+    padding-top: 96px;
+  }
+}
+
+@media (max-width: 640px) {
+  .y-cards,
+  .y-steps,
+  .y-shots__stack {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .y-card__body {
+    min-height: 0;
+  }
+  .y-btn {
+    min-width: 0;
+    flex: 1 1 auto;
+  }
+  .y-fp__keys {
+    flex-direction: column;
+    gap: 6px;
+  }
+  .y-fp__key--end {
+    margin-left: 0;
+  }
+  .y-fp__scale .y-fp__tick:nth-child(even) {
+    display: none;
+  }
+}
diff --git a/docs/.vitepress/theme/styles/tokens.css b/docs/.vitepress/theme/styles/tokens.css
new file mode 100644
index 00000000..f6ce0406
--- /dev/null
+++ b/docs/.vitepress/theme/styles/tokens.css
@@ -0,0 +1,174 @@
+/**
+ * Yerd design tokens, and the VitePress variables they drive.
+ *
+ * The palette is the Forjed "deep navy + signal blue" system: a near-black
+ * canvas in dark mode, a cool off-white one in light mode, one blue for every
+ * accent, and a single green reserved for "running / healthy" status text.
+ *
+ * `--y-*` are Yerd's own tokens (used by the home page and the custom doc
+ * chrome); the `--vp-*` blocks below map them onto the default theme so
+ * VitePress's own components inherit the same palette.
+ */
+
+:root {
+  /* Type */
+  --y-display: 'Outage Cut', 'Space Grotesk', ui-sans-serif, system-ui,
+    sans-serif;
+  --y-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
+  /* Marketing prose sits in Inter - denser and quieter next to the display
+   * face than Space Grotesk, which carries the documentation instead. */
+  --y-prose: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --y-mono: 'JetBrains Mono', ui-monospace, 'Menlo', 'Consolas', monospace;
+
+  /* Surfaces */
+  --y-canvas: #f4f6f9;
+  --y-surface: #ffffff;
+  --y-surface-2: #edf1f8;
+  --y-terminal: #080d18;
+
+  /* Lines, weakest to strongest */
+  --y-line: #e4e9f1;
+  --y-line-2: #dde1e8;
+  --y-line-3: #c8d0de;
+
+  /* Ink */
+  --y-ink: #0c1a30;
+  --y-slate: #58647a;
+  --y-faint: #97a1b2;
+
+  /* Accents */
+  --y-blue: #3a63ee;
+  --y-blue-bright: #3a63ee;
+  --y-blue-code: #2b4ecc;
+  --y-green: #12b981;
+
+  /* Elevation + glow. The home page paints these as radial background
+   * images rather than blurred elements, so nothing is composited on scroll. */
+  --y-shadow: 0 4px 10px rgba(12, 26, 48, 0.07);
+  --y-shadow-lg: 0 18px 44px -12px rgba(12, 26, 48, 0.18);
+  --y-glow-strong: rgba(58, 99, 238, 0.16);
+  --y-glow-soft: rgba(58, 99, 238, 0.11);
+  --y-glow-term: rgba(92, 134, 255, 0.14);
+  --y-glow-doc: rgba(58, 99, 238, 0.1);
+  --y-glow-none: rgba(58, 99, 238, 0);
+
+  /* Layout rhythm shared by the home page sections. */
+  --y-content-width: 1152px;
+  --y-section-gap: 116px;
+}
+
+.dark {
+  --y-canvas: #070b14;
+  --y-surface: #0c1322;
+  --y-surface-2: #101a2e;
+  --y-terminal: #080d18;
+
+  --y-line: #1b2740;
+  --y-line-2: #22304c;
+  --y-line-3: #2a3a5c;
+
+  --y-ink: #f2f5fb;
+  --y-slate: #8a99b4;
+  --y-faint: #6b7d9c;
+
+  --y-blue: #3a63ee;
+  --y-blue-bright: #5c86ff;
+  --y-blue-code: #a9c0ff;
+  --y-green: #3fcf6e;
+
+  --y-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
+  --y-shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, 0.66);
+  --y-glow-strong: rgba(58, 99, 238, 0.5);
+  --y-glow-soft: rgba(58, 99, 238, 0.3);
+  --y-glow-term: rgba(92, 134, 255, 0.45);
+  --y-glow-doc: rgba(58, 99, 238, 0.34);
+}
+
+/* ---- VitePress theme variables ---- */
+
+:root {
+  --vp-font-family-base: var(--y-sans);
+  --vp-font-family-mono: var(--y-mono);
+
+  --vp-c-bg: #ffffff;
+  --vp-c-bg-alt: var(--y-canvas);
+  --vp-c-bg-elv: var(--y-surface);
+  --vp-c-bg-soft: var(--y-canvas);
+
+  --vp-c-border: var(--y-line-2);
+  --vp-c-divider: var(--y-line);
+  --vp-c-gutter: var(--y-line);
+
+  --vp-c-text-1: var(--y-ink);
+  --vp-c-text-2: var(--y-slate);
+  --vp-c-text-3: var(--y-faint);
+
+  --vp-c-brand-1: var(--y-blue);
+  --vp-c-brand-2: #2b4ecc;
+  --vp-c-brand-3: var(--y-blue);
+  --vp-c-brand-soft: rgba(58, 99, 238, 0.12);
+
+  --vp-c-default-1: var(--y-line-3);
+  --vp-c-default-2: var(--y-line-2);
+  --vp-c-default-3: var(--y-surface-2);
+  --vp-c-default-soft: rgba(58, 99, 238, 0.07);
+
+  --vp-c-green-1: #0f9a6c;
+  --vp-c-green-2: #12b981;
+  --vp-c-green-3: #12b981;
+
+  /* The navbar floats over the hero glow, so it is translucent rather than
+   * a solid band; `doc.css` adds the backdrop blur that makes that readable. */
+  --vp-nav-bg-color: transparent;
+  --vp-sidebar-bg-color: var(--vp-c-bg-alt);
+  --vp-sidebar-width: 270px;
+  --vp-layout-max-width: 1440px;
+
+  --vp-code-font-size: 0.86em;
+  --vp-code-color: var(--y-blue-code);
+  --vp-code-bg: var(--y-surface-2);
+  --vp-code-block-bg: #f7f9fd;
+  --vp-code-block-color: var(--y-slate);
+  --vp-code-lang-color: var(--y-faint);
+  --vp-code-copy-code-bg: var(--y-surface-2);
+  --vp-code-copy-code-border-color: var(--y-line-2);
+  --vp-code-copy-code-hover-bg: var(--y-surface);
+  --vp-code-copy-code-hover-border-color: var(--y-line-3);
+
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-text: #ffffff;
+  --vp-button-brand-bg: var(--y-blue);
+  --vp-button-brand-hover-bg: #2b4ecc;
+  --vp-button-brand-active-bg: #2445b8;
+
+  --vp-input-bg-color: var(--y-surface);
+  --vp-input-border-color: var(--y-line-2);
+
+  --vp-local-search-bg: var(--y-surface);
+  --vp-local-search-result-bg: var(--y-surface);
+  --vp-local-search-result-border: var(--y-line);
+  --vp-local-search-result-selected-bg: var(--y-surface);
+  --vp-local-search-result-selected-border: var(--y-blue);
+}
+
+.dark {
+  --vp-c-bg: #070b14;
+  --vp-c-bg-alt: #0a1120;
+  --vp-c-bg-elv: var(--y-surface);
+  --vp-c-bg-soft: var(--y-surface);
+
+  --vp-c-brand-1: var(--y-blue-bright);
+  --vp-c-brand-2: #7ea3ff;
+  --vp-c-brand-3: var(--y-blue);
+  --vp-c-brand-soft: rgba(92, 134, 255, 0.16);
+
+  --vp-c-default-soft: rgba(92, 134, 255, 0.1);
+
+  --vp-c-green-1: var(--y-green);
+  --vp-c-green-2: var(--y-green);
+  --vp-c-green-3: #2fa858;
+
+  --vp-code-block-bg: var(--y-surface);
+  --vp-button-brand-hover-bg: #4a71f2;
+  --vp-button-brand-active-bg: #2b4ecc;
+}
diff --git a/docs/index.md b/docs/index.md
index 46428cbc..56519d35 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,97 +1,149 @@
 ---
-layout: home
+layout: HomeLayout
+pageClass: home-page
 
 # A descriptive <title> for the homepage (the default would just be "Yerd").
 title: Yerd - Local PHP development environment for macOS & Linux
 titleTemplate: false
+description: Serve every project in a folder on its own .test domain over HTTPS, run a different PHP version per site, and manage databases, mail and tooling from one ~8 MB Rust daemon. Free, MIT-licensed, rootless, and Docker-free.
 
 hero:
-  name: Yerd
-  text: Local PHP, without the friction.
-  tagline: Serve your projects on .test domains over HTTP and HTTPS, run a different PHP version per site, and manage it all from one tiny daemon. No Docker, no sudo for everyday work, no subscription.
-  image:
-    src: /images/overview-dark.png
-    alt: The Yerd desktop app
+  pill: OPEN SOURCE · ROOTLESS · MIT
+  lines:
+    - LOCAL PHP,
+    - WITHOUT THE
+  accent: WEIGHT.
+  tagline: Every project in a parked folder is live on its own .test domain - HTTPS, per-site PHP, databases and mail. One tiny Rust daemon, and no Docker anywhere.
+  command:
+    label: YOUR FIRST COMMAND
+    text: yerd park ~/Code
   actions:
     - theme: brand
-      text: Get Started
+      text: Get started →
       link: /guide/getting-started
-    - theme: alt
-      text: Why Yerd?
-      link: /guide/introduction
     - theme: alt
       text: View on GitHub
       link: https://github.com/forjedio/yerd
+  platforms: macOS (Apple Silicon) · Debian · Ubuntu · Arch · Fedora
+  shot:
+    light: /images/overview-light.png
+    dark: /images/overview-dark.png
+    alt: The Yerd desktop app Overview dashboard
 
-features:
-  - icon: 🚀
-    title: Zero-config sites
-    details: Drop a project into a parked directory and it's instantly live at <name>.test. Park a whole folder or link a single project under a name you choose.
-  - icon: 🔒
-    title: Automatic HTTPS
-    details: A local certificate authority issues a per-site certificate on demand. No mkcert dance, no OpenSSL, no browser warnings once trusted - just a green padlock.
-  - icon: 🐘
-    title: Per-site PHP
-    details: Install multiple PHP versions and pin each site to the one it needs. Set a global default, then override individual sites with a single command.
-  - icon: 🪶
-    title: Lightweight & native
-    details: A single ~8 MB daemon binary written in Rust. No containers, no VM, no Electron - just native processes managed for you.
-  - icon: 🛡️
-    title: Rootless by design
-    details: Setup elevates exactly once. The daemon, CLI, and GUI never run as root - everything after the one-time setup runs as your own user.
-  - icon: 🔍
-    title: Self-diagnosing
-    details: yerd status shows what's running; yerd doctor tells you exactly what's broken and how to fix it - and auto-repairs the safe problems.
----
-
-<div class="home-showcase">
-
-<h2 class="home-showcase__heading">See Yerd in action</h2>
-<p class="home-showcase__sub">A tiny tray app over the whole toolchain - PHP, sites, services, mail, Laravel telemetry, and public sharing, all in one place.</p>
+stats:
+  - value: 8 MB
+    label: ONE RUST DAEMON
+  - value: '0'
+    label: CONTAINERS OR VMS
+  - value: 1 CMD
+    label: FOLDER TO LIVE SITES
+  - value: MIT
+    label: FREE AND OPEN SOURCE
 
-<ShowcaseRow
-  title="Multiple PHP versions"
-  description="Run as many PHP versions as you need, side by side. Set a global default, pin per-site versions, tune the shared ini settings, and update in place - every version is an isolated static build the daemon supervises."
-  light="/images/php-light.png"
-  dark="/images/php-dark.png"
-/>
+footprint:
+  eyebrow: FOOTPRINT
+  heading: THE BLUE SLIVER IS YERD.
+  sub: The bar below stands for 1.6 GB - about what a container runtime costs you before a single site is served. Yerd's daemon is the few pixels glowing on the left.
+  scaleMax: 1600
+  ticks: ['0', 400 MB, 800 MB, 1.2 GB, 1.6 GB]
+  yerd:
+    label: YERD · ~8 MB
+    mb: 8
+  middle:
+    label: ELECTRON APP · ~180 MB
+    mb: 180
+  full:
+    label: CONTAINER RUNTIME · ~1.6 GB
 
-<ShowcaseRow
-  reverse
-  title="Developer tooling, managed"
-  description="Composer, Node, and Bun installed onto your PATH alongside PHP and managed by Yerd - no global installs to collide with, no version juggling. Add or remove a tool in a click."
-  light="/images/tooling-light.png"
-  dark="/images/tooling-dark.png"
-/>
+capabilities:
+  eyebrow: WHAT IT DOES
+  heading: EVERY CAPABILITY HAS A COMMAND.
+  sub: The desktop app and the CLI drive the same daemon. Whatever you can click, you can script.
+  items:
+    - icon: grid
+      title: Zero-config sites
+      details: Drop a project into a parked folder and it is live at its own .test domain straight away.
+      command: yerd park ~/Code
+      link: /guide/sites
+    - icon: lock
+      title: Automatic HTTPS
+      details: A local certificate authority issues a per-site certificate on demand. No mkcert, no browser warnings.
+      command: yerd secure my-app
+      link: /guide/https
+    - icon: stack
+      title: Per-site PHP
+      details: Install as many PHP versions as you need, set a global default, then pin the sites that disagree.
+      command: yerd use 8.4
+      link: /guide/php-versions
+    - icon: database
+      title: Databases & caches
+      details: MySQL, MariaDB, PostgreSQL, Redis and Meilisearch, supervised as native processes and started with the daemon.
+      command: yerd db create app
+      link: /guide/services
+    - icon: mail
+      title: Mail, caught locally
+      details: Every message your apps send is captured on the machine and readable in the app. Nothing escapes.
+      command: yerd mail list
+      link: /guide/mail
+    - icon: shield
+      title: Self-diagnosing
+      details: Status shows what is running. Doctor tells you exactly what is broken, and repairs the safe problems.
+      command: yerd doctor fix
+      link: /guide/diagnostics
 
-<ShowcaseRow
-  title="Every project, instantly served"
-  description="Park a folder and every project inside it is live on its own .test domain automatically, or link a single directory under a name you choose. Per-site PHP version and one-click HTTPS, all from one list."
-  light="/images/sites-light.png"
-  dark="/images/sites-dark.png"
-/>
+steps:
+  eyebrow: FROM ZERO
+  heading: THREE COMMANDS TO A WORKING SITE.
+  items:
+    - command: yerd install php 8.5
+      details: PHP is not bundled. Yerd downloads a prebuilt static build on demand and supervises its FPM pool for you.
+    - command: yerd park ~/Code
+      details: Every project inside the folder is served on its own .test domain, immediately and with no config file.
+    - command: yerd secure my-app
+      details: A certificate issued on demand by your own local CA. Green padlock, no browser warnings, no mkcert.
 
-<ShowcaseRow
-  reverse
-  title="Databases & caches on tap"
-  description="Redis, MySQL, MariaDB, and PostgreSQL supervised as native processes. Install a version, create and back up databases, and copy a ready-made Laravel .env - every installed engine starts with the daemon."
-  light="/images/services-light.png"
-  dark="/images/services-dark.png"
-/>
+app:
+  eyebrow: THE APP
+  heading: ONE WINDOW OVER THE WHOLE TOOLCHAIN.
+  sub: Sites, PHP versions, services, mail and Laravel telemetry - the desktop app is a thin window over the same daemon the CLI drives.
+  primary:
+    light: /images/overview-light.png
+    dark: /images/overview-dark.png
+    alt: The Yerd desktop app Overview dashboard
+  secondary:
+    - light: /images/sites-light.png
+      dark: /images/sites-dark.png
+      alt: The Sites page in the Yerd desktop app
+    - light: /images/services-light.png
+      dark: /images/services-dark.png
+      alt: The Services page in the Yerd desktop app
+  captions:
+    - OVERVIEW · every project and service at a glance
+    - SITES · SERVICES · managed in place
+  chipsLabel: ALSO INSTALLED ON DEMAND
+  chips:
+    - MySQL
+    - MariaDB
+    - PostgreSQL
+    - Redis
+    - Meilisearch
+    - SMTP mail
+    - Composer
+    - Node
+    - Bun
+    - Laravel dumps
+    - LAN sharing
 
-<ShowcaseRow
-  title="Catch every outgoing email"
-  description="A built-in SMTP server captures everything your app sends during development so you can preview it - nothing ever leaves your machine. Copy the Laravel mail config and you're wired up in seconds."
-  light="/images/mail-light.png"
-  dark="/images/mail-dark.png"
-/>
-
-<ShowcaseRow
-  reverse
-  title="Laravel dumps, live"
-  description="dump() and dd() plus queries, jobs, views, requests, logs, cache, and outgoing HTTP - streamed live to a dedicated window with zero code changes, captured by a native PHP extension."
-  light="/images/dumps-light.png"
-  dark="/images/dumps-dark.png"
-/>
-
-</div>
+closing:
+  lines:
+    - STOP RUNNING A DATA CENTRE
+    - TO BUILD A WEBSITE.
+  sub: Free and MIT-licensed. macOS and Linux. No account, no subscription.
+  actions:
+    - theme: brand
+      text: Get started →
+      link: /guide/getting-started
+    - theme: alt
+      text: View on GitHub
+      link: https://github.com/forjedio/yerd
+---
diff --git a/docs/public/fonts/OutageCut.LICENSE.txt b/docs/public/fonts/OutageCut.LICENSE.txt
new file mode 100644
index 00000000..e7deda59
--- /dev/null
+++ b/docs/public/fonts/OutageCut.LICENSE.txt
@@ -0,0 +1,16 @@
+Outage Cut
+==========
+
+Designer: Dave Whitley (www.davewhitley.com, www.losttype.com)
+Copyright (c) 2011 by Dave Whitley. All rights reserved.
+Outage is a trademark of Dave Whitley.
+
+This font file is redistributed here unmodified. Its End User License
+Agreement explicitly permits web use:
+
+    "Can I use it on my cool website using @fontface? Sure. Any link back
+     to davewhitley.com or losttype.com would be awesome."
+
+The full agreement is embedded in the font file itself (name record 13) and
+can be read with any font inspector. Yerd uses the face for display headings
+only; the font data and design remain the copyright of Dave Whitley.
diff --git a/docs/public/fonts/jetbrains-mono-latin-ext.woff2 b/docs/public/fonts/jetbrains-mono-latin-ext.woff2
new file mode 100644
index 00000000..310faddf
Binary files /dev/null and b/docs/public/fonts/jetbrains-mono-latin-ext.woff2 differ
diff --git a/docs/public/fonts/jetbrains-mono-latin.woff2 b/docs/public/fonts/jetbrains-mono-latin.woff2
new file mode 100644
index 00000000..2ca6ac60
Binary files /dev/null and b/docs/public/fonts/jetbrains-mono-latin.woff2 differ
diff --git a/docs/public/fonts/space-grotesk-latin-ext.woff2 b/docs/public/fonts/space-grotesk-latin-ext.woff2
new file mode 100644
index 00000000..e3aa61cc
Binary files /dev/null and b/docs/public/fonts/space-grotesk-latin-ext.woff2 differ
diff --git a/docs/public/fonts/space-grotesk-latin.woff2 b/docs/public/fonts/space-grotesk-latin.woff2
new file mode 100644
index 00000000..7b0e76a5
Binary files /dev/null and b/docs/public/fonts/space-grotesk-latin.woff2 differ