diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index 28792a6..e54c2df 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -15,7 +15,12 @@ const config: Config = {
   trailingSlash: false,
 
   onBrokenLinks: 'throw',
-  onBrokenMarkdownLinks: 'warn',
+
+  markdown: {
+    hooks: {
+      onBrokenMarkdownLinks: 'warn',
+    },
+  },
 
   i18n: {
     defaultLocale: 'en',
@@ -40,6 +45,13 @@ const config: Config = {
 
   themeConfig: {
     image: 'img/social-card.png',
+    metadata: [
+      {
+        name: 'keywords',
+        content:
+          'sched_ext, sched_ext scheduler, Linux scheduler, BPF, OCI, Kubernetes operator, eBPF',
+      },
+    ],
     colorMode: {
       defaultMode: 'dark',
       respectPrefersColorScheme: true,
@@ -71,6 +83,7 @@ const config: Config = {
           href: 'https://github.com/schedkit',
           label: 'GitHub',
           position: 'right',
+          className: 'navbar__cta',
         },
       ],
     },
@@ -107,7 +120,7 @@ const config: Config = {
     prism: {
       theme: prismThemes.github,
       darkTheme: prismThemes.dracula,
-      additionalLanguages: ['bash', 'yaml', 'toml', 'go', 'docker'],
+      additionalLanguages: ['bash', 'yaml', 'toml', 'go', 'docker', 'json'],
     },
   } satisfies Preset.ThemeConfig,
 };
diff --git a/src/css/custom.css b/src/css/custom.css
index f6701cc..ff297f6 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -1,38 +1,1039 @@
 /**
- * Light customisations on top of the default Docusaurus theme.
- * Keep this file small. Heavy theming belongs in a swizzled component.
+ * schedkit docs — monochrome with one earned accent.
+ *
+ * The page is grey. There is exactly one colour, and it has exactly one job:
+ * to mark the product, a pointer, the current position, or keyboard focus.
+ *
+ *   --sk-accent is allowed on: the logo, links, the active sidebar/TOC
+ *   entry, and the focus ring. Nothing else.
+ *
+ * The test for adding more colour is not "would this look nicer" but "does
+ * this encode something a reader could act on". Decoration loses.
+ *
+ * Structure is carried by type scale and 1px hairlines; mono is used only
+ * for literal code, commands and check IDs. Dark and light are the same
+ * design inverted, not two designs.
  */
 
+/* ------------------------------------------------------------------ *
+ * Typography
+ * ------------------------------------------------------------------ */
+
 :root {
-  --ifm-color-primary: #2174b6;
-  --ifm-color-primary-dark: #1e69a4;
-  --ifm-color-primary-darker: #1c639b;
-  --ifm-color-primary-darkest: #175280;
-  --ifm-color-primary-light: #257fc4;
-  --ifm-color-primary-lighter: #2885cb;
-  --ifm-color-primary-lightest: #4296d9;
-  --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
-}
-
-[data-theme='dark'] {
-  --ifm-color-primary: #69ace2;
-  --ifm-color-primary-dark: #4799dc;
-  --ifm-color-primary-darker: #358fd9;
-  --ifm-color-primary-darkest: #237ec3;
-  --ifm-color-primary-light: #8bc0e9;
-  --ifm-color-primary-lighter: #a0cbed;
-  --ifm-color-primary-lightest: #c7e0f4;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
-}
-
-/* A bit more breathing room between paragraphs in long-form pages. */
-.markdown > p {
-  margin-bottom: 1.1rem;
-}
-
-/* Slightly tighter inline code so it doesn't feel pasted on. */
+  --ifm-font-family-base:
+    ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+  --ifm-font-family-monospace:
+    ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas,
+    'Liberation Mono', monospace;
+
+  --ifm-font-size-base: 16.5px;
+  --ifm-line-height-base: 1.72;
+  --ifm-code-font-size: 87.5%;
+  --ifm-heading-font-weight: 700;
+  --ifm-heading-line-height: 1.12;
+
+  --ifm-global-radius: 0;
+
+  --docusaurus-highlighted-code-line-bg: rgba(128, 128, 128, 0.18);
+  --ifm-h1-font-size: 2.5rem;
+  --ifm-h2-font-size: 1.6rem;
+  --ifm-h3-font-size: 1.2rem;
+}
+
+/* ------------------------------------------------------------------ *
+ * Dark (default). True black, off-white text, achromatic hairlines.
+ * ------------------------------------------------------------------ */
+
+/*
+ * Infima ships its whole dark palette on `html[data-theme=dark]`, which is
+ * specificity (0,1,1) — it beats a bare `:root` or `[data-theme='light']`
+ * selector. That silently overrode the page background (landing on #1b1b1d
+ * slate instead of true black) plus ~30 other tokens. `:root[data-theme=...]`
+ * is (0,2,0) and wins, so both theme blocks are scoped this way.
+ */
+:root,
+:root[data-theme='dark'] {
+  --sk-bg: #000000;
+  --sk-surface: #0e0e0e;
+  --sk-surface-2: #171717;
+  --sk-fg: #ededed;
+  --sk-fg-muted: #a8a8a8;
+  --sk-fg-subtle: #8a8a8a;
+  --sk-line: #2b2b2b;
+  --sk-line-strong: #4a4a4a;
+  /* The one colour. Logo, links, current position, focus. Nothing else. */
+  --sk-accent: #4c9be8;
+
+  --ifm-background-color: var(--sk-bg);
+  --ifm-background-surface-color: var(--sk-surface);
+  --ifm-font-color-base: var(--sk-fg);
+  --ifm-heading-color: var(--sk-fg);
+  --ifm-font-color-dark: var(--sk-fg);
+  --ifm-font-color-darker: var(--sk-fg);
+  --ifm-font-color-darkest: #ffffff;
+  --ifm-font-color-light: var(--sk-fg-muted);
+  --ifm-font-color-lighter: var(--sk-fg-muted);
+  --ifm-font-color-lightest: var(--sk-fg-subtle);
+  --ifm-link-color: var(--sk-accent);
+
+  /* Infima derives the font ramp from these; pin them so it stays grey. */
+  --ifm-color-content: var(--sk-fg);
+  --ifm-color-content-secondary: var(--sk-fg-muted);
+
+  --ifm-color-emphasis-0: var(--sk-fg);
+  --ifm-color-emphasis-100: var(--sk-bg);
+  --ifm-color-emphasis-200: var(--sk-surface);
+  --ifm-color-emphasis-300: var(--sk-surface-2);
+  --ifm-color-emphasis-400: var(--sk-line-strong);
+  --ifm-color-emphasis-500: var(--sk-line-strong);
+  --ifm-color-emphasis-600: var(--sk-fg-muted);
+  --ifm-color-emphasis-700: var(--sk-fg);
+  --ifm-color-emphasis-800: var(--sk-fg);
+  --ifm-color-emphasis-900: #ffffff;
+  --ifm-color-emphasis-1000: #ffffff;
+
+  /*
+   * Every stop is the same achromatic foreground so nothing can smuggle hue
+   * back in.
+   */
+  --ifm-color-primary: #ededed;
+  --ifm-color-primary-dark: #d8d8d8;
+  --ifm-color-primary-darker: #cccccc;
+  --ifm-color-primary-darkest: #b0b0b0;
+  --ifm-color-primary-light: #ffffff;
+  --ifm-color-primary-lighter: #ffffff;
+  --ifm-color-primary-lightest: #ffffff;
+  --ifm-color-primary-contrast-background: #ededed;
+  --ifm-color-primary-contrast-foreground: #000000;
+
+  /* Infima tints these by default; this theme is untinted. */
+  --ifm-table-stripe-background: transparent;
+  --ifm-code-background: var(--sk-surface-2);
+  --ifm-hover-overlay: rgba(255, 255, 255, 0.06);
+  --ifm-breadcrumb-item-background-active: transparent;
+
+  --ifm-navbar-background-color: rgba(0, 0, 0, 0.88);
+  --ifm-navbar-shadow: none;
+  --ifm-footer-background-color: #000000;
+}
+
+/* ------------------------------------------------------------------ *
+ * Light. Same design, inverted.
+ * ------------------------------------------------------------------ */
+
+:root[data-theme='light'] {
+  --sk-bg: #ffffff;
+  --sk-surface: #ffffff;
+  --sk-surface-2: #f4f4f4;
+  --sk-fg: #111111;
+  --sk-fg-muted: #5c5c5c;
+  --sk-fg-subtle: #6e6e6e;
+  --sk-line: #e2e2e2;
+  --sk-line-strong: #c2c2c2;
+  /* Exactly the logo blue — 4.8:1 on white, so it clears AA for link text. */
+  --sk-accent: #2376b8;
+
+  --ifm-background-color: var(--sk-bg);
+  --ifm-background-surface-color: var(--sk-surface);
+  --ifm-font-color-base: var(--sk-fg);
+  --ifm-heading-color: #000000;
+  --ifm-font-color-light: var(--sk-fg-muted);
+  --ifm-font-color-lighter: var(--sk-fg-muted);
+  --ifm-font-color-lightest: var(--sk-fg-subtle);
+  --ifm-link-color: var(--sk-accent);
+  --ifm-color-content: var(--sk-fg);
+  --ifm-color-content-secondary: var(--sk-fg-muted);
+
+  --ifm-color-emphasis-0: var(--sk-fg);
+  --ifm-color-emphasis-100: var(--sk-bg);
+  --ifm-color-emphasis-200: var(--sk-surface-2);
+  --ifm-color-emphasis-300: var(--sk-surface-2);
+  --ifm-color-emphasis-400: var(--sk-line-strong);
+  --ifm-color-emphasis-500: var(--sk-line-strong);
+  --ifm-color-emphasis-600: var(--sk-fg-muted);
+  --ifm-color-emphasis-700: var(--sk-fg);
+  --ifm-color-emphasis-800: var(--sk-fg);
+  --ifm-color-emphasis-900: #000000;
+  --ifm-color-emphasis-1000: #000000;
+
+  --ifm-color-primary: #111111;
+  --ifm-color-primary-dark: #000000;
+  --ifm-color-primary-darker: #000000;
+  --ifm-color-primary-darkest: #000000;
+  --ifm-color-primary-light: #3d3d3d;
+  --ifm-color-primary-lighter: #4a4a4a;
+  --ifm-color-primary-lightest: #6e6e6e;
+  --ifm-color-primary-contrast-background: #111111;
+  --ifm-color-primary-contrast-foreground: #ffffff;
+
+  --ifm-table-stripe-background: transparent;
+  --ifm-code-background: var(--sk-surface-2);
+  --ifm-hover-overlay: rgba(0, 0, 0, 0.05);
+  --ifm-breadcrumb-item-background-active: transparent;
+
+  --ifm-navbar-background-color: rgba(255, 255, 255, 0.9);
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.07);
+}
+
+/* ------------------------------------------------------------------ *
+ * Base
+ * ------------------------------------------------------------------ */
+
+html {
+  scroll-behavior: smooth;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Inverted selection: the loudest thing on the page, for the right reason. */
+::selection {
+  background: var(--sk-fg);
+  color: var(--sk-bg);
+}
+
+/*
+ * Focus is blue. A keyboard user must be able to tell focus apart from a
+ * decorative state at a glance, and blue is the only thing on this page that
+ * already means "actionable".
+ */
+:focus-visible {
+  outline: 2px solid var(--sk-accent);
+  outline-offset: 3px;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--sk-line-strong) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--sk-line-strong);
+  border: 3px solid transparent;
+  background-clip: content-box;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--sk-fg-subtle);
+  background-clip: content-box;
+}
+
+/* ------------------------------------------------------------------ *
+ * Navbar
+ * ------------------------------------------------------------------ */
+
+.navbar {
+  border-bottom: 1px solid var(--sk-line);
+  padding-inline: 0.75rem;
+  backdrop-filter: saturate(120%) blur(10px);
+  -webkit-backdrop-filter: saturate(120%) blur(10px);
+}
+
+.navbar__inner {
+  max-width: 1440px;
+  margin-inline: auto;
+}
+
+.navbar__brand {
+  margin-right: 2rem;
+}
+
+.navbar__logo {
+  height: 22px;
+  width: auto;
+  /* Full saturation: the logo is the one surface that earns the accent. */
+}
+
+.navbar__title {
+  font-weight: 700;
+  font-size: 1rem;
+  letter-spacing: -0.03em;
+  padding-inline-start: 0.6rem;
+}
+
+.navbar__logo + .navbar__title {
+  padding-inline-start: 0.6rem;
+}
+
+.navbar__link {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--sk-fg-muted);
+  transition: color 120ms ease;
+}
+
+.navbar__link:hover {
+  color: var(--sk-fg);
+}
+
+.navbar__link--active {
+  color: var(--sk-accent);
+  font-weight: 700;
+}
+
+.navbar__link--github {
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.78rem;
+  letter-spacing: 0.02em;
+}
+
+.navbar__items--right {
+  margin-inline-start: auto;
+}
+
+.navbar .clean-btn {
+  border: 1px solid var(--sk-line);
+  border-radius: 0;
+  transition: color 120ms ease, border-color 120ms ease;
+}
+
+.navbar .clean-btn:hover {
+  border-color: var(--sk-line-strong);
+  background: transparent;
+  color: var(--sk-fg);
+}
+
+.navbar__toggle,
+.navbar__login {
+  border-radius: 0;
+}
+
+/* ------------------------------------------------------------------ *
+ * Sidebar
+ * ------------------------------------------------------------------ */
+
+.sidebar {
+  border-right: 1px solid var(--sk-line);
+  padding-block: 1.75rem 3rem;
+}
+
+.sidebar__group {
+  padding-inline-start: 0.6rem;
+}
+
+.menu__list-item-collapsible {
+  list-style-type: none;
+}
+
+.menu__list-item-collapsible > .menu__list-item-collapsible-toggle {
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.68rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--sk-fg-subtle);
+  padding-block: 0.9rem 0.45rem;
+}
+
+.menu__list-item-collapsible > .menu__list-item-collapsible-toggle:hover {
+  background: transparent;
+  color: var(--sk-fg);
+}
+
+.menu__list-item-collapsible-toggle::before {
+  background: var(--sk-line);
+  height: 1px;
+  opacity: 1;
+}
+
+.menu__link {
+  font-size: 0.9rem;
+  line-height: 1.45;
+  border-radius: 0;
+  padding-block: 0.34rem;
+  padding-inline: 0.5rem;
+  color: var(--sk-fg-muted);
+  transition: color 120ms ease, background-color 120ms ease;
+}
+
+.menu__link:hover {
+  background: var(--sk-surface-2);
+  color: var(--sk-fg);
+  text-decoration: none;
+}
+
+/*
+ * Active sidebar entry: blue, no fill. "You are here" is a pointer, so it
+ * gets the pointer colour rather than a chip — a background fill would be the
+ * one place on the page where the accent stops meaning anything.
+ */
+.menu__link--active:not(.menu__link--sublist) {
+  background: transparent;
+  color: var(--sk-accent);
+  font-weight: 700;
+  border-left: 2px solid var(--sk-accent);
+  padding-left: calc(0.5rem - 2px);
+}
+
+.menu__link--active:not(.menu__link--sublist)::before {
+  display: none;
+}
+
+.menu__list-item > .menu__list-item-collapsible:hover {
+  background: transparent;
+}
+
+/* ------------------------------------------------------------------ *
+ * Doc content
+ * ------------------------------------------------------------------ */
+
+.docItemContainer {
+  padding-block: 2.75rem 4rem;
+}
+
+.theme-doc-markdown {
+  font-size: 1.01rem;
+}
+
+.theme-doc-markdown > p,
+.theme-doc-markdown > ul,
+.theme-doc-markdown > ol {
+  margin-bottom: 1.15rem;
+}
+
+/* Docusaurus wraps the title in <header><h1>, so cover both shapes. */
+.theme-doc-markdown header > h1,
+.theme-doc-markdown > h1 {
+  font-size: 2.4rem;
+  font-weight: 700;
+  letter-spacing: -0.04em;
+  line-height: 1.08;
+  margin-bottom: 1.75rem;
+}
+
+.theme-doc-markdown > h2 {
+  font-size: 1.55rem;
+  letter-spacing: -0.028em;
+  margin-top: 3rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--sk-line);
+}
+
+.theme-doc-markdown > h3 {
+  font-size: 1.15rem;
+  letter-spacing: -0.015em;
+  margin-top: 2.1rem;
+}
+
+.theme-doc-markdown > h4,
+.theme-doc-markdown > h5,
+.theme-doc-markdown > h6 {
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.78rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--sk-fg-subtle);
+  margin-top: 2rem;
+}
+
+@media screen and (min-width: 997px) {
+  .theme-doc-markdown {
+    max-width: 45rem;
+  }
+}
+
+/* Links: blue and underlined. The underline means "pointer" even when the
+   colour is missed or the link is visited. */
+.theme-doc-markdown a {
+  color: var(--sk-accent);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.2em;
+  text-decoration-color: var(--sk-line-strong);
+  transition: text-decoration-color 120ms ease;
+}
+
+.theme-doc-markdown a:hover {
+  color: var(--sk-accent);
+  text-decoration-color: var(--sk-accent);
+}
+
+.theme-doc-markdown strong {
+  font-weight: 700;
+}
+
+.theme-doc-markdown blockquote {
+  border-inline-start: 1px solid var(--sk-line-strong);
+  padding-inline-start: 1.1rem;
+  font-style: normal;
+  color: var(--sk-fg-muted);
+}
+
+.theme-doc-markdown ul,
+.theme-doc-markdown ol {
+  padding-inline-start: 1.35rem;
+}
+
+.theme-doc-markdown li {
+  margin-bottom: 0.35rem;
+}
+
+.theme-doc-markdown li::marker {
+  color: var(--sk-fg-subtle);
+}
+
+.theme-doc-markdown hr {
+  border: 0;
+  border-top: 1px solid var(--sk-line);
+  margin-block: 3rem;
+}
+
+.theme-doc-markdown img {
+  border: 1px solid var(--sk-line);
+}
+
+/* Breadcrumbs: plain path, mono, no chips. */
+.theme-doc-breadcrumbs {
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.72rem;
+  letter-spacing: 0.02em;
+  margin-bottom: 1.25rem;
+}
+
+/*
+ * Docusaurus puts only `theme-doc-breadcrumbs` on the <nav>; the items and
+ * links carry plain Infima `breadcrumbs__*` classes. Targeting
+ * `theme-doc-breadcrumbs__link` matches nothing — the active crumb therefore
+ * kept Infima's rounded chip. These selectors are anchored to the nav and
+ * out-specify Infima's (0,3,0) rules.
+ */
+.theme-doc-breadcrumbs .breadcrumbs__link,
+.theme-doc-breadcrumbs .breadcrumbs__item--active .breadcrumbs__link {
+  background: transparent;
+  border-radius: 0;
+  padding: 0;
+  color: var(--sk-fg-subtle);
+}
+
+.theme-doc-breadcrumbs .breadcrumbs__link:hover,
+.theme-doc-breadcrumbs .breadcrumbs__item--active .breadcrumbs__link {
+  color: var(--sk-fg);
+}
+
+.theme-doc-breadcrumbs__link--active {
+  color: var(--sk-fg);
+}
+
+.theme-doc-footer-edit-info-row,
+.theme-doc-footer-edit-meta-row {
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.72rem;
+  color: var(--sk-fg-subtle);
+}
+
+.theme-doc-footer-edit-meta-row {
+  margin-bottom: 2.5rem;
+}
+
+.theme-doc-footer-edit-meta-row .button.button {
+  border: 1px solid var(--sk-line);
+  border-radius: 0;
+  background: transparent;
+  color: var(--sk-fg-muted);
+}
+
+.theme-doc-footer-edit-meta-row .button.button:hover {
+  border-color: var(--sk-line-strong);
+  background: transparent;
+  color: var(--sk-fg);
+}
+
+/* ------------------------------------------------------------------ *
+ * Code
+ * ------------------------------------------------------------------ */
+
 code {
-  border-radius: 4px;
-  padding: 0.1rem 0.3rem;
+  font-family: var(--ifm-font-family-monospace);
+  font-variant-ligatures: none;
+}
+
+/* Inline code: background only, no border. These docs are dense with inline
+   code, and a border on each one turns a paragraph into a chain of chips. */
+:not(pre) > code {
+  background: var(--sk-surface-2);
+  color: var(--sk-fg);
+  border: 0;
+  border-radius: 0;
+  padding: 0.1em 0.3em;
+  font-size: 0.86em;
+  word-break: break-word;
+}
+
+/* Docs use `## \`schedctl list\``, so a heading is often a code span. Drop the
+   chip so it reads as a heading that happens to be monospaced. */
+.theme-doc-markdown h1 code,
+.theme-doc-markdown h2 code,
+.theme-doc-markdown h3 code,
+.theme-doc-markdown h4 code,
+.theme-doc-markdown h5 code,
+.theme-doc-markdown h6 code {
+  background: transparent;
+  padding: 0;
+  font-size: 0.95em;
+  color: inherit;
+}
+
+.theme-code-block {
+  margin-block: 1.5rem;
+  border: 1px solid var(--sk-line);
+  border-radius: 0;
+  background: var(--sk-surface);
+  box-shadow: none;
+  overflow: hidden;
+}
+
+/*
+ * The code-block surface must come from this theme, not from Prism.
+ * `colorMode.defaultMode` is 'dark', so SSR emits prism's *dark* theme and
+ * swaps to the light one on hydration — meaning a light-mode visitor gets a
+ * flash of dracula's #282a36 background, and a no-JS visitor keeps it
+ * permanently. These selectors out-specify prism's `[class*="language-"]`
+ * rules so the block surface is correct in both themes at every stage.
+ */
+.theme-code-block pre[class*='language-'],
+.theme-code-block code[class*='language-'],
+.theme-code-block pre {
+  background: var(--sk-surface);
+}
+
+.theme-code-block > pre {
+  margin: 0;
+  padding: 1rem 1.1rem;
+  font-size: 0.855rem;
+  line-height: 1.62;
+  background: transparent;
+}
+
+.theme-code-block > pre > code {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  font-size: inherit;
+  color: var(--sk-fg);
+  display: block;
+  white-space: pre;
+  overflow-x: auto;
+}
+
+/* Plain language label. No dot, no hue. */
+.theme-code-block .code-block__title {
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.66rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--sk-fg-subtle);
+  background: transparent;
+  border-bottom: 1px solid var(--sk-line);
+  padding: 0.35rem 0.75rem;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.theme-code-block .code-block__title::before {
+  content: none;
+}
+
+.theme-code-block > button {
+  border-radius: 0;
+  background: var(--sk-surface-2);
+  border: 1px solid var(--sk-line-strong);
+  color: var(--sk-fg-muted);
+  transition: color 120ms ease, border-color 120ms ease;
+}
+
+.theme-code-block > button:hover {
+  color: var(--sk-fg);
+  border-color: var(--sk-fg-muted);
+}
+
+.code-block__copy-button {
+  opacity: 0;
+  transition: opacity 140ms ease;
+}
+
+.theme-code-block:hover .code-block__copy-button,
+.code-block__copy-button:focus-visible {
+  opacity: 1;
+}
+
+/*
+ * prism-react-renderer injects its theme from the JS bundle at runtime, after
+ * the stylesheet, so ordinary specificity does not reliably win. Force every
+ * token to the foreground: syntax colour is decoration here, and dracula's
+ * palette would reintroduce exactly the hue this theme removes.
+ */
+[data-theme='dark'] .token,
+[data-theme='dark'] .token.keyword,
+[data-theme='dark'] .token.string,
+[data-theme='dark'] .token.function,
+[data-theme='dark'] .token.parameter,
+[data-theme='dark'] .token.number,
+[data-theme='dark'] .token.comment,
+[data-theme='dark'] .token.operator,
+[data-theme='dark'] .token.punctuation,
+[data-theme='dark'] .token.tag,
+[data-theme='dark'] .token.attr-name,
+[data-theme='dark'] .token.boolean {
+  color: var(--sk-fg) !important;
+  font-style: normal;
+}
+
+[data-theme='dark'] .token.comment {
+  color: var(--sk-fg-subtle) !important;
+  font-style: italic;
+}
+
+[data-theme='light'] .token,
+[data-theme='light'] .token.keyword,
+[data-theme='light'] .token.string,
+[data-theme='light'] .token.function,
+[data-theme='light'] .token.parameter,
+[data-theme='light'] .token.number,
+[data-theme='light'] .token.comment,
+[data-theme='light'] .token.operator,
+[data-theme='light'] .token.punctuation,
+[data-theme='light'] .token.tag,
+[data-theme='light'] .token.attr-name,
+[data-theme='light'] .token.boolean {
+  color: var(--sk-fg) !important;
+}
+
+[data-theme='light'] .token.comment {
+  color: var(--sk-fg-subtle) !important;
+  font-style: italic;
+}
+
+/* ------------------------------------------------------------------ *
+ * Tables — hairlines only
+ * ------------------------------------------------------------------ */
+
+.theme-doc-markdown table {
+  display: table;
+  width: 100%;
+  margin-block: 1.5rem;
+  font-size: 0.9rem;
+  border-collapse: collapse;
+  border-top: 1px solid var(--sk-line-strong);
+  border-bottom: 1px solid var(--sk-line-strong);
+}
+
+.theme-doc-markdown table thead {
+  background: transparent;
+}
+
+.theme-doc-markdown table th {
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--sk-fg-subtle);
+  text-align: left;
+  border-bottom: 1px solid var(--sk-line);
+}
+
+.theme-doc-markdown table th,
+.theme-doc-markdown table td {
+  padding: 0.6rem 0.9rem 0.6rem 0;
+  vertical-align: top;
+}
+
+.theme-doc-markdown table td {
+  border-bottom: 1px solid var(--sk-line);
+}
+
+.theme-doc-markdown table tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.theme-doc-markdown table tbody tr:hover {
+  background: var(--sk-surface-2);
+}
+
+/* ------------------------------------------------------------------ *
+ * Admonitions — monochrome, never colour-only
+ * ------------------------------------------------------------------ */
+
+.theme-doc-markdown .alert {
+  border: 0;
+  border-inline-start: 2px solid var(--sk-fg);
+  border-radius: 0;
+  background: var(--sk-surface-2);
+  box-shadow: none;
+  color: var(--sk-fg);
+  margin-block: 1.6rem;
+}
+
+.theme-doc-markdown .alert--tip {
+  border-inline-start-style: double;
+  border-inline-start-width: 4px;
+}
+
+.theme-doc-markdown .alert--warning,
+.theme-doc-markdown .alert--danger {
+  border-inline-start-width: 4px;
+}
+
+.theme-doc-markdown .alert__icon {
+  color: var(--sk-fg);
+}
+
+.theme-doc-markdown .alert__title {
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--sk-fg);
+}
+
+/* ------------------------------------------------------------------ *
+ * Cards, pagination, buttons
+ * ------------------------------------------------------------------ */
+
+.card {
+  border: 1px solid var(--sk-line);
+  border-radius: 0;
+  background: var(--sk-surface);
+  box-shadow: none;
+  transition: border-color 140ms ease;
+}
+
+.card:hover {
+  border-color: var(--sk-line-strong);
+}
+
+.card__header,
+.card__body,
+.card__footer {
+  border-color: var(--sk-line);
+}
+
+.card__title {
+  font-size: 1rem;
+  letter-spacing: -0.015em;
+}
+
+.pagination-nav__link {
+  border: 1px solid var(--sk-line);
+  border-radius: 0;
+  transition: border-color 140ms ease, color 140ms ease;
+}
+
+.pagination-nav__link:hover {
+  border-color: var(--sk-line-strong);
+}
+
+.pagination-nav__sublabel {
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.66rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--sk-fg-subtle);
+}
+
+.pagination-nav__label {
+  font-size: 0.95rem;
+  font-weight: 700;
+}
+
+/*
+ * Infima ships competing rules at (0,2,0) — `.button.button--secondary`,
+ * `.button.button--outline`, `.button:hover` — so every rule below is scoped
+ * with `.button` and declares hover explicitly. A bare `.button--secondary`
+ * silently loses and renders black-on-black in dark mode.
+ */
+.button {
+  border-radius: 0;
+  font-weight: 600;
+  transition: background-color 120ms ease, border-color 120ms ease,
+    color 120ms ease;
+}
+
+/* Primary is inverted: foreground on background. The only "solid" on the site. */
+.button.button--primary {
+  background: var(--sk-fg);
+  border-color: var(--sk-fg);
+  color: var(--sk-bg);
+}
+
+.button.button--primary:hover {
+  background: transparent;
+  border-color: var(--sk-fg);
+  color: var(--sk-fg);
+}
+
+.button.button--secondary,
+.button.button--outline,
+.button.button--outline--primary {
+  background: transparent;
+  border: 1px solid var(--sk-line-strong);
+  color: var(--sk-fg);
+}
+
+.button.button--secondary:hover,
+.button.button--outline:hover,
+.button.button--outline--primary:hover {
+  background: var(--sk-fg);
+  border-color: var(--sk-fg);
+  color: var(--sk-bg);
+}
+
+/*
+ * `button--outline` and `button--primary` are two separate Infima classes, so
+ * `.button--outline--primary` alone never matches an element carrying both.
+ */
+.button.button--outline.button--primary,
+[data-theme='dark'] .button.button--outline.button--primary {
+  background: transparent;
+  border: 1px solid var(--sk-line-strong);
+  color: var(--sk-fg);
+}
+
+.button.button--outline.button--primary:hover,
+[data-theme='dark'] .button.button--outline.button--primary:hover {
+  background: var(--sk-fg);
+  border-color: var(--sk-fg);
+  color: var(--sk-bg);
+}
+
+.tabs-container .tabs {
+  border-bottom: 1px solid var(--sk-line);
+}
+
+.tabs-container .tabs__item {
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.78rem;
+  letter-spacing: 0.02em;
+  border-color: var(--sk-line-strong);
+  color: var(--sk-fg-muted);
+}
+
+.tabs-container .tabs__item--active {
+  color: var(--sk-fg);
+  border-color: var(--sk-fg);
+}
+
+.dropdown__menu {
+  border: 1px solid var(--sk-line-strong);
+  border-radius: 0;
+  background: var(--sk-surface);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
+}
+
+/* ------------------------------------------------------------------ *
+ * TOC
+ * ------------------------------------------------------------------ */
+
+.table-of-contents {
+  font-size: 0.83rem;
+  padding-block-start: 2.75rem;
+}
+
+.table-of-contents__title {
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.66rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--sk-fg-subtle);
+  margin-bottom: 0.8rem;
+}
+
+.table-of-contents__link {
+  color: var(--sk-fg-subtle);
+  line-height: 1.5;
+  padding-block: 0.15rem;
+}
+
+.table-of-contents__link:hover,
+.table-of-contents__link--active {
+  color: var(--sk-fg);
+}
+
+.table-of-contents__link--active {
+  color: var(--sk-accent);
+  font-weight: 600;
+}
+
+/* ------------------------------------------------------------------ *
+ * Footer
+ * ------------------------------------------------------------------ */
+
+.footer {
+  border-top: 1px solid var(--sk-line);
+  margin-top: 4rem;
+  background: var(--sk-bg);
+}
+
+.footer__title {
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.68rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--sk-fg-subtle);
+  margin-bottom: 0.9rem;
+}
+
+.footer__link-item {
+  font-size: 0.875rem;
+  color: var(--sk-fg-muted);
+}
+
+.footer__link-item a,
+.footer__link-item a:hover {
+  color: var(--sk-fg-muted);
+  text-decoration: none;
+}
+
+.footer__link-item a:hover {
+  color: var(--sk-fg);
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+}
+
+.footer__bottom {
+  border-top: 1px solid var(--sk-line);
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.74rem;
+  color: var(--sk-fg-subtle);
+  text-align: center;
+}
+
+.footer__copyright {
+  margin-top: 0.35rem;
+}
+
+/* ------------------------------------------------------------------ *
+ * Motion — respect the OS, always.
+ * ------------------------------------------------------------------ */
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+  }
 }
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index a80aca5..92f2372 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -1,32 +1,373 @@
+/**
+ * Homepage styles. Scoped to src/pages/index.tsx.
+ *
+ * Structure comes from type scale and 1px rules. No grids, no glow, no pills,
+ * no rounded cards, no hover lift, no colour.
+ */
+
 .hero {
-  padding: 4rem 0;
-  text-align: center;
-  background: linear-gradient(135deg, var(--ifm-color-primary-darkest) 0%, var(--ifm-color-primary) 100%);
-  color: white;
+  padding: 4.5rem 0 4rem;
+  border-bottom: 1px solid var(--sk-line);
+}
+
+/*
+ * The type scale is the whole design: this is the biggest thing on the site.
+ * It stays grey — the navbar logo is the only place the accent is allowed to
+ * sit beside the product name, and two blues competing for the same wordmark
+ * would undo the rule.
+ */
+.wordmark {
+  margin: 0 0 1.25rem;
+  font-size: clamp(3.4rem, 11vw, 7.5rem);
+  font-weight: 700;
+  line-height: 0.9;
+  letter-spacing: -0.055em;
+  color: var(--sk-fg);
+}
+
+.tagline {
+  margin: 0 0 3rem;
+  max-width: 28ch;
+  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
+  font-weight: 500;
+  line-height: 1.25;
+  letter-spacing: -0.03em;
+  color: var(--sk-fg);
+  text-wrap: balance;
+}
+
+.heroLower {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 4rem;
+  align-items: start;
+}
+
+.heroProse p {
+  margin: 0 0 1rem;
+  max-width: 54ch;
+  color: var(--sk-fg-muted);
+}
+
+.heroActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-top: 1.75rem;
 }
 
-.buttons {
+/* ---- Transcript ---- */
+
+.transcript {
+  margin: 0;
+  border: 1px solid var(--sk-line);
+  background: var(--sk-surface);
+}
+
+.transcriptBar {
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 1rem;
-  margin-top: 2rem;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.3rem 0.4rem 0.3rem 0.8rem;
+  border-bottom: 1px solid var(--sk-line);
+}
+
+.transcriptTitle {
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.7rem;
+  letter-spacing: 0.04em;
+  color: var(--sk-fg-subtle);
+}
+
+.transcriptButton {
+  flex: 0 0 auto;
+  width: 15px;
+  height: 15px;
+  border: 1px solid var(--sk-line-strong);
 }
 
-.projects {
+.transcriptBody {
+  margin: 0;
+  padding: 1rem 1.1rem;
+  overflow-x: auto;
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.78rem;
+  line-height: 1.7;
+}
+
+.transcriptBody code {
+  display: block;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  font-size: inherit;
+  white-space: pre;
+  color: var(--sk-fg);
+}
+
+/* ---- Sections ---- */
+
+.section {
   padding: 4rem 0;
+  border-bottom: 1px solid var(--sk-line);
+}
+
+.section:last-child {
+  border-bottom: 0;
+}
+
+.sectionTitle {
+  margin: 0 0 2rem;
+  font-size: clamp(1.6rem, 3.4vw, 2.25rem);
+  font-weight: 700;
+  letter-spacing: -0.04em;
+  line-height: 1.05;
+  color: var(--sk-fg);
+}
+
+.sectionLede {
+  margin: -1.25rem 0 2rem;
+  max-width: 56ch;
+  color: var(--sk-fg-muted);
+}
+
+/* ---- Tools ---- */
+
+.tools {
+  margin: 0;
+  border-top: 1px solid var(--sk-line-strong);
+}
+
+.tool {
+  display: grid;
+  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
+  gap: 2rem;
+  padding-block: 2rem;
+  border-bottom: 1px solid var(--sk-line);
+}
+
+.toolHead {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  margin: 0;
+}
+
+.toolNameRow {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+}
+
+.toolName {
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 1.2rem;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  color: var(--sk-fg);
+}
+
+/* Monochrome status pill: encodes maturity, adds no hue. */
+.toolBadge {
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.6rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--sk-fg-muted);
+  border: 1px solid var(--sk-line-strong);
+  background: var(--sk-surface);
+  padding: 0.1rem 0.4rem;
+  line-height: 1.5;
+  user-select: none;
+}
+
+.toolLine {
+  font-size: 0.92rem;
+  color: var(--sk-fg-subtle);
+}
+
+.toolBody {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1.1rem;
+}
+
+.toolBody p {
+  margin: 0;
+  max-width: 58ch;
+  color: var(--sk-fg-muted);
+}
+
+.install {
+  margin: 0;
+  padding: 0.6rem 0.85rem;
+  border: 1px solid var(--sk-line);
+  background: var(--sk-surface);
+  overflow-x: auto;
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.82rem;
+}
+
+.install code {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  color: var(--sk-fg);
+}
+
+.prompt {
+  color: var(--sk-fg-subtle);
+  user-select: none;
+}
+
+/* Same rule as the doc pages: blue marks a pointer, never a decoration. */
+.toolLink {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--sk-accent);
+  text-decoration: underline;
+  text-decoration-color: var(--sk-line-strong);
+  text-underline-offset: 0.22em;
+  text-decoration-thickness: 1px;
+  transition: text-decoration-color 120ms ease;
+}
+
+.toolLink:hover {
+  color: var(--sk-accent);
+  text-decoration-color: var(--sk-accent);
+}
+
+/* ---- Requirements table ---- */
+
+.reqTable {
+  display: table;
+  width: 100%;
+  margin: 0;
+  font-size: 0.92rem;
+  border-collapse: collapse;
+  border-top: 1px solid var(--sk-line-strong);
+}
+
+.reqTable thead,
+.reqTable tbody tr:nth-child(2n) {
+  background: transparent;
+}
+
+.reqTable th {
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.68rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  text-align: left;
+  color: var(--sk-fg-subtle);
+  padding: 0.7rem 0.8rem;
+  border-bottom: 1px solid var(--sk-line);
+}
+
+.reqTable td {
+  padding: 0.85rem 0.8rem;
+  vertical-align: top;
+  border-bottom: 1px solid var(--sk-line);
+}
+
+.reqTable tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.reqTable td code {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  font-size: 0.85rem;
+  color: var(--sk-fg);
 }
 
-.projects h2 {
-  margin-top: 0;
+.reqNote {
+  color: var(--sk-fg-muted);
 }
 
+/* ---- Routes ---- */
+
+.routes {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border-top: 1px solid var(--sk-line-strong);
+}
+
+.route {
+  display: grid;
+  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
+  gap: 2rem;
+  padding-block: 1.4rem;
+  border-bottom: 1px solid var(--sk-line);
+  color: inherit;
+  transition: color 120ms ease;
+}
+
+.route:hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+.routeWhen {
+  font-weight: 600;
+  color: var(--sk-fg);
+}
+
+.route:hover .routeWhen {
+  text-decoration: underline;
+  text-underline-offset: 0.22em;
+  text-decoration-color: var(--sk-accent);
+}
+
+.routeWhat {
+  color: var(--sk-fg-muted);
+}
+
+/* ------------------------------------------------------------------ *
+ * Responsive
+ * ------------------------------------------------------------------ */
+
 @media screen and (max-width: 996px) {
   .hero {
-    padding: 2rem 1rem;
+    padding: 3rem 0;
+  }
+
+  .tagline {
+    margin-bottom: 2rem;
+  }
+
+  .heroLower {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 2.5rem;
+  }
+
+  .section {
+    padding: 3rem 0;
+  }
+
+  .tool,
+  .route {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0.75rem;
   }
+}
 
-  .buttons {
+@media screen and (max-width: 576px) {
+  .heroActions {
     flex-direction: column;
+    align-items: stretch;
+  }
+
+  .heroActions :global(.button) {
+    width: 100%;
   }
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index bbd60bc..d032497 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -7,74 +7,272 @@ import Heading from '@theme/Heading';
 
 import styles from './index.module.css';
 
+/* ------------------------------------------------------------------ *
+ * Hero
+ * ------------------------------------------------------------------ */
+
+const DOCTOR_TRANSCRIPT: string[] = [
+  '$ sudo schedctl doctor',
+  '',
+  'schedctl doctor — host readiness check',
+  '',
+  '[PASS]  kernel.version             7.1.8-1-default',
+  '[PASS]  kernel.sched_ext           /sys/kernel/sched_ext is present',
+  '[PASS]  kernel.btf                 /sys/kernel/btf/vmlinux (5993874 bytes)',
+  '[PASS]  kernel.config              all required CONFIG_* flags enabled',
+  '[PASS]  caps.cap_bpf               CapEff bit 39 set',
+  '[PASS]  caps.cap_sys_admin         CapEff bit 21 set',
+  '[PASS]  caps.cap_perfmon           CapEff bit 38 set',
+  '[PASS]  runtime.podman_socket      /run/podman/podman.sock',
+  '[WARN]  runtime.containerd_socket  none reachable: /run/containerd/containerd.sock',
+  '[PASS]  runtime.any                /run/podman/podman.sock',
+  '',
+  'Remediation:',
+  '  - runtime.containerd_socket: start containerd (e.g. `systemctl enable --now containerd`) or rely on Podman',
+  '',
+  'Summary: 9 passed, 1 failed, 0 skipped (0 blocking)',
+];
+
+/** Single right-aligned button, old-school Linux titlebar. Not macOS dots. */
+function Transcript() {
+  return (
+    <figure className={styles.transcript}>
+      <div className={styles.transcriptBar}>
+        <figcaption className={styles.transcriptTitle}>
+          schedctl doctor
+        </figcaption>
+        <span className={styles.transcriptButton} aria-hidden="true" />
+      </div>
+      <pre className={styles.transcriptBody}>
+        <code>{DOCTOR_TRANSCRIPT.join('\n')}</code>
+      </pre>
+    </figure>
+  );
+}
+
 function Hero() {
   const {siteConfig} = useDocusaurusContext();
   return (
-    <header className={clsx('hero', styles.hero)}>
+    <header className={styles.hero}>
       <div className="container">
-        <Heading as="h1" className="hero__title">
+        <Heading as="h1" className={styles.wordmark}>
           {siteConfig.title}
         </Heading>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link className="button button--primary button--lg" to="/docs/intro">
-            Get started
-          </Link>
-          <Link className="button button--secondary button--lg" to="/docs/concepts/sched-ext">
-            What's sched_ext?
-          </Link>
+        <p className={styles.tagline}>{siteConfig.tagline}</p>
+
+        <div className={styles.heroLower}>
+          <div className={styles.heroProse}>
+            <p>
+              Linux 6.12 made the CPU scheduler a BPF program the kernel loads,
+              verifies and unloads on demand. No custom kernel, no module, no
+              maintenance window.
+            </p>
+            <p>
+              schedkit handles everything around that: shipping a scheduler as
+              an OCI image, checking whether a host can run one, reporting what
+              is actually attached, and doing the same across a cluster.
+            </p>
+            <div className={styles.heroActions}>
+              <Link className="button button--primary button--lg" to="/docs/intro">
+                Introduction
+              </Link>
+              <Link
+                className="button button--outline button--lg"
+                to="/docs/concepts/sched-ext"
+              >
+                What is sched_ext?
+              </Link>
+            </div>
+          </div>
+          <div className={styles.heroAside}>
+            <Transcript />
+          </div>
         </div>
       </div>
     </header>
   );
 }
 
-function Projects() {
+/* ------------------------------------------------------------------ *
+ * Tools
+ * ------------------------------------------------------------------ */
+
+const TOOLS = [
+  {
+    name: 'schedctl',
+    line: 'The host-side CLI.',
+    alpha: false,
+    body: 'Verifies, pulls and runs an OCI-packaged sched_ext scheduler on a single machine, with a kernel preflight built in. Reaches for one scheduler for the length of a build, a game session, or a test run.',
+    install: 'sudo zypper in schedctl',
+    href: '/docs/schedctl/overview',
+  },
+  {
+    name: 'sked',
+    line: 'The Kubernetes operator.',
+    alpha: true,
+    body: 'A SchedExt resource names the OCI scheduler image; sked reconciles it into a privileged DaemonSet on every node it should run on. The cluster-native path — schedctl is not installed on the nodes.',
+    install: 'make deploy IMG=ghcr.io/schedkit/sked:latest',
+    href: '/docs/sked/overview',
+  },
+];
+
+function Tools() {
   return (
-    <section className={styles.projects}>
+    <section className={styles.section}>
       <div className="container">
-        <div className="row">
-          <div className="col col--6">
-            <Heading as="h2">schedctl</Heading>
-            <p>
-              The host-side CLI. Verifies, pulls, and runs an OCI-packaged
-              sched_ext scheduler, with built-in kernel preflight
-              (<code>schedctl doctor</code>) and discrepancy reporting
-              (<code>schedctl status</code>). Available on openSUSE Tumbleweed
-              and the AUR.
-            </p>
-            <Link className="button button--outline button--primary" to="/docs/schedctl/overview">
-              Read the docs
-            </Link>
-          </div>
-          <div className="col col--6">
-            <Heading as="h2">sked</Heading>
-            <p>
-              The Kubernetes operator. A <code>SchedExt</code> resource names
-              the OCI scheduler image you want to run; sked creates a
-              privileged DaemonSet that runs it on the cluster. Early-stage
-              and minimal today — the place to start if your nodes already
-              live in Kubernetes.
-            </p>
-            <Link className="button button--outline button--primary" to="/docs/sked/overview">
-              Read the docs
-            </Link>
-          </div>
-        </div>
+        <Heading as="h2" className={styles.sectionTitle}>
+          Two tools
+        </Heading>
+        <dl className={styles.tools}>
+          {TOOLS.map((tool) => (
+            <div key={tool.name} className={styles.tool}>
+              <dt className={styles.toolHead}>
+                <span className={styles.toolNameRow}>
+                  <span className={styles.toolName}>{tool.name}</span>
+                  {tool.alpha && (
+                    <span
+                      className={styles.toolBadge}
+                      title="Alpha: pre-production, not recommended for production use"
+                    >
+                      alpha
+                    </span>
+                  )}
+                </span>
+                <span className={styles.toolLine}>{tool.line}</span>
+              </dt>
+              <dd className={styles.toolBody}>
+                <p>{tool.body}</p>
+                <pre className={styles.install}>
+                  <code>
+                    <span className={styles.prompt}>$ </span>
+                    {tool.install}
+                  </code>
+                </pre>
+                <Link to={tool.href} className={styles.toolLink}>
+                  {tool.name} documentation
+                </Link>
+              </dd>
+            </div>
+          ))}
+        </dl>
+      </div>
+    </section>
+  );
+}
+
+/* ------------------------------------------------------------------ *
+ * Requirements
+ * ------------------------------------------------------------------ */
+
+/* Check IDs are the real ones from `schedctl doctor` (see commands.md). */
+const REQUIREMENTS: Array<[string, string, string]> = [
+  ['kernel.version', 'Linux 6.12 or later', 'The release that shipped sched_ext upstream.'],
+  ['kernel.config', 'CONFIG_SCHED_CLASS_EXT=y', 'With the CONFIG_BPF* flags and CONFIG_DEBUG_INFO_BTF for CO-RE programs.'],
+  ['caps.*', 'CAP_BPF, CAP_SYS_ADMIN, CAP_PERFMON', 'Verified by schedctl doctor. Under sked each scheduler runs in a privileged DaemonSet instead.'],
+  ['runtime.any', 'A reachable runtime socket', 'Podman or containerd, so the scheduler can be pulled as an OCI image.'],
+];
+
+function Requirements() {
+  return (
+    <section className={styles.section}>
+      <div className="container">
+        <Heading as="h2" className={styles.sectionTitle}>
+          What a host needs
+        </Heading>
+        <p className={styles.sectionLede}>
+          Each of these is a check ID that <code>schedctl doctor</code> reports
+          by name, and exits non-zero on when one fails.
+        </p>
+        <table className={styles.reqTable}>
+          <thead>
+            <tr>
+              <th scope="col">Check</th>
+              <th scope="col">Requires</th>
+              <th scope="col">Notes</th>
+            </tr>
+          </thead>
+          <tbody>
+            {REQUIREMENTS.map(([id, needs, note]) => (
+              <tr key={id}>
+                <td>
+                  <code>{id}</code>
+                </td>
+                <td>{needs}</td>
+                <td className={styles.reqNote}>{note}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
       </div>
     </section>
   );
 }
 
+/* ------------------------------------------------------------------ *
+ * Where to start
+ * ------------------------------------------------------------------ */
+
+const ROUTES: Array<[string, string, string]> = [
+  [
+    'Understand the design first',
+    'What sched_ext is and is not, and why OCI ended up as the distribution format.',
+    '/docs/concepts/sched-ext',
+  ],
+  [
+    'One machine, right now',
+    'Install schedctl, run the preflight, attach a scheduler.',
+    '/docs/schedctl/installation',
+  ],
+  [
+    'Nodes already in Kubernetes',
+    'Install sked and declare a SchedExt resource.',
+    '/docs/sked/installation',
+  ],
+  [
+    'Package your own scheduler',
+    'The image layout that schedctl and sked both expect.',
+    '/docs/schedctl/packaging-a-scheduler',
+  ],
+];
+
+function Routes() {
+  return (
+    <section className={styles.section}>
+      <div className="container">
+        <Heading as="h2" className={styles.sectionTitle}>
+          Where to start
+        </Heading>
+        <ul className={styles.routes}>
+          {ROUTES.map(([when, what, href]) => (
+            <li key={href}>
+              <Link to={href} className={styles.route}>
+                <span className={styles.routeWhen}>{when}</span>
+                <span className={styles.routeWhat}>{what}</span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+}
+
+/* ------------------------------------------------------------------ *
+ * Page
+ * ------------------------------------------------------------------ */
+
 export default function Home(): ReactNode {
   const {siteConfig} = useDocusaurusContext();
   return (
     <Layout
       title={siteConfig.title}
-      description="OCI-packaged sched_ext schedulers, plus the tools to run them anywhere">
+      description="OCI-packaged sched_ext schedulers, plus the tools to run them anywhere"
+    >
       <Hero />
       <main>
-        <Projects />
+        <Tools />
+        <Requirements />
+        <Routes />
       </main>
     </Layout>
   );