diff --git a/apps/landing/src/components/docs/Breadcrumb.astro b/apps/landing/src/components/docs/Breadcrumb.astro
index 1c2113360..cfb4e8ff4 100644
--- a/apps/landing/src/components/docs/Breadcrumb.astro
+++ b/apps/landing/src/components/docs/Breadcrumb.astro
@@ -11,7 +11,7 @@ const { group, title } = Astro.props;
 const groupHref = group === "Instrumentation" ? `/docs/${INSTRUMENTATION_SLUG}` : null;
 ---
 
-<nav aria-label="Breadcrumb" class="flex items-center gap-1.5 text-[10px] text-fg-muted uppercase tracking-wider mb-4 min-w-0">
+<nav aria-label="Breadcrumb" class="mb-5 flex min-w-0 items-center gap-1.5 font-mono text-[10px] uppercase tracking-[0.14em] text-fg-muted">
     <a href="/docs" class="hover:text-fg transition-colors">Docs</a>
     <span class="text-border">/</span>
     {groupHref ? (
@@ -20,5 +20,5 @@ const groupHref = group === "Instrumentation" ? `/docs/${INSTRUMENTATION_SLUG}`
         <span>{group}</span>
     )}
     <span class="text-border">/</span>
-    <span class="text-fg-muted/80 truncate normal-case tracking-normal text-xs">{title}</span>
+    <span class="truncate font-display text-[12.5px] normal-case tracking-normal text-fg-muted/80">{title}</span>
 </nav>
diff --git a/apps/landing/src/components/docs/DocsCategoryIcon.astro b/apps/landing/src/components/docs/DocsCategoryIcon.astro
index 008008c7d..b6d46c238 100644
--- a/apps/landing/src/components/docs/DocsCategoryIcon.astro
+++ b/apps/landing/src/components/docs/DocsCategoryIcon.astro
@@ -1,6 +1,5 @@
 ---
-// Nucleo Pixel glyphs for the docs category nav (header bar + sidebar group
-// headings). Converted from the licensed "Nucleo Pixel" set (24-grid): strokes
+// Nucleo Pixel glyphs for the docs groups (sidebar headings + index cards). Converted from the licensed "Nucleo Pixel" set (24-grid): strokes
 // remapped to currentColor, square caps + stroke-width 2 preserve the pixel look.
 interface Props {
 	name: string;
diff --git a/apps/landing/src/components/docs/DocsCategoryNav.astro b/apps/landing/src/components/docs/DocsCategoryNav.astro
deleted file mode 100644
index 74aadcf2a..000000000
--- a/apps/landing/src/components/docs/DocsCategoryNav.astro
+++ /dev/null
@@ -1,62 +0,0 @@
----
-import { getCollection } from "astro:content";
-import DocsCategoryIcon from "./DocsCategoryIcon.astro";
-import { HEADER_NAV } from "../../lib/docs-nav";
-
-interface Props {
-	currentSlug: string;
-}
-const { currentSlug } = Astro.props;
-
-const allDocs = await getCollection("docs", ({ data }) => !data.draft);
-const activeGroup = allDocs.find((d) => d.id === currentSlug)?.data.group ?? null;
-
-// First page (lowest `order`) of a group is the category's target.
-const firstHrefForGroup = (group: string): string | null => {
-	const page = allDocs.filter((d) => d.data.group === group).sort((a, b) => a.data.order - b.data.order)[0];
-	return page ? `/docs/${page.id}` : null;
-};
-
-const cats = HEADER_NAV.flatMap((group) => {
-	const href = firstHrefForGroup(group);
-	return href ? [{ label: group, href, active: activeGroup === group }] : [];
-});
----
-
-<nav class="docs-cat-nav flex items-stretch gap-0.5 h-11 px-3 sm:px-5 border-t border-border/60 overflow-x-auto" aria-label="Documentation categories">
-	{cats.map((cat) => (
-		<a
-			href={cat.href}
-			aria-current={cat.active ? "page" : undefined}
-			class:list={[
-				"group relative flex items-center gap-2 px-2.5 text-[11px] font-medium whitespace-nowrap transition-colors",
-				cat.active ? "text-primary" : "text-fg-muted hover:text-fg",
-			]}
-		>
-			<DocsCategoryIcon
-				name={cat.label}
-				class:list={[
-					"w-3.5 h-3.5 shrink-0 transition-colors",
-					cat.active ? "text-primary" : "text-fg-muted/70 group-hover:text-fg-muted",
-				]}
-			/>
-			<span class="tracking-wide">{cat.label}</span>
-			<span
-				class:list={[
-					"pointer-events-none absolute inset-x-1 -bottom-px h-0.5 bg-primary transition-opacity",
-					cat.active ? "opacity-100" : "opacity-0 group-hover:opacity-30",
-				]}
-			></span>
-		</a>
-	))}
-</nav>
-
-<style>
-	/* Hide the horizontal scrollbar on the category strip (it scrolls on narrow viewports). */
-	.docs-cat-nav {
-		scrollbar-width: none;
-	}
-	.docs-cat-nav::-webkit-scrollbar {
-		display: none;
-	}
-</style>
diff --git a/apps/landing/src/components/docs/DocsMobileNav.astro b/apps/landing/src/components/docs/DocsMobileNav.astro
index 006aea9e6..f4f822d7c 100644
--- a/apps/landing/src/components/docs/DocsMobileNav.astro
+++ b/apps/landing/src/components/docs/DocsMobileNav.astro
@@ -14,14 +14,14 @@ const allDocs = await getCollection("docs", ({ data }) => !data.draft);
 const currentDoc = allDocs.find((d) => d.id === currentSlug);
 ---
 
-<details class="lg:hidden mb-6 rounded-lg border border-border">
-    <summary class="flex items-center justify-between px-4 py-3 cursor-pointer text-xs text-fg-muted hover:text-fg transition-colors list-none [&::-webkit-details-marker]:hidden">
+<details class="mb-8 rounded-lg border border-border lg:hidden">
+    <summary class="flex items-center justify-between px-4 py-3 cursor-pointer text-[13px] text-fg-muted hover:text-fg transition-colors list-none [&::-webkit-details-marker]:hidden">
         <span class="truncate">Browse the docs</span>
         <svg class="w-3 h-3 shrink-0 transition-transform details-open:rotate-180" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
             <path d="M3 5l3 3 3-3" />
         </svg>
     </summary>
-    <div class="px-3 pb-4 border-t border-border pt-4 max-h-[70vh] overflow-y-auto">
+    <div class="max-h-[70vh] overflow-y-auto border-t border-border px-3 pt-4 pb-4">
         <DocsSidebar currentSlug={currentSlug} idPrefix="docs-nav-mobile" />
     </div>
 </details>
diff --git a/apps/landing/src/components/docs/DocsPrevNext.astro b/apps/landing/src/components/docs/DocsPrevNext.astro
index 078e7dc7b..773299fb8 100644
--- a/apps/landing/src/components/docs/DocsPrevNext.astro
+++ b/apps/landing/src/components/docs/DocsPrevNext.astro
@@ -1,7 +1,9 @@
 ---
-// Previous / next across the whole docs tree in sidebar order, so reading
-// straight through follows the same path the sidebar shows.
+// Previous / next within the current section, in sidebar order, so reading
+// straight through follows the same path the sidebar shows and stops where
+// the section does.
 import { getDocGroups } from "../../lib/docs-order";
+import { sectionForGroup } from "../../lib/docs-nav";
 
 interface Props {
     currentSlug: string;
@@ -9,25 +11,28 @@ interface Props {
 
 const { currentSlug } = Astro.props;
 
-const flat = (await getDocGroups()).flatMap((g) => g.docs);
+const groups = await getDocGroups();
+const current = groups.flatMap((g) => g.docs).find((d) => d.id === currentSlug);
+const section = current ? sectionForGroup(current.data.group) : null;
+const flat = groups.filter((g) => section && sectionForGroup(g.group).id === section.id).flatMap((g) => g.docs);
 const i = flat.findIndex((d) => d.id === currentSlug);
 const prev = i > 0 ? flat[i - 1] : null;
 const next = i >= 0 && i < flat.length - 1 ? flat[i + 1] : null;
 ---
 
-<nav class="mt-12 pt-8 border-t border-border grid grid-cols-1 sm:grid-cols-2 gap-3" aria-label="Page navigation">
+<nav class="mt-14 grid grid-cols-1 gap-3 border-t border-border pt-8 sm:grid-cols-2" aria-label="Page navigation">
     {prev ? (
         <a href={`/docs/${prev.id}`} class="group rounded-lg border border-border p-4 hover:bg-bg-elevated transition-colors">
-            <span class="block text-[10px] text-fg-muted uppercase tracking-wider">Previous</span>
-            <span class="block text-sm text-fg mt-1">{prev.data.title}</span>
-            <span class="block text-[11px] text-fg-muted mt-0.5">{prev.data.group}</span>
+            <span class="block font-mono text-[10px] uppercase tracking-[0.14em] text-fg-muted">Previous</span>
+            <span class="mt-1.5 block text-[14px] font-medium text-fg">{prev.data.title}</span>
+            <span class="mt-0.5 block text-[12px] text-fg-muted">{prev.data.group}</span>
         </a>
     ) : <div />}
     {next ? (
         <a href={`/docs/${next.id}`} class="group rounded-lg border border-border p-4 hover:bg-bg-elevated transition-colors sm:text-right">
-            <span class="block text-[10px] text-fg-muted uppercase tracking-wider">Next</span>
-            <span class="block text-sm text-fg mt-1">{next.data.title}</span>
-            <span class="block text-[11px] text-fg-muted mt-0.5">{next.data.group}</span>
+            <span class="block font-mono text-[10px] uppercase tracking-[0.14em] text-fg-muted">Next</span>
+            <span class="mt-1.5 block text-[14px] font-medium text-fg">{next.data.title}</span>
+            <span class="mt-0.5 block text-[12px] text-fg-muted">{next.data.group}</span>
         </a>
     ) : <div />}
 </nav>
diff --git a/apps/landing/src/components/docs/DocsSearch.tsx b/apps/landing/src/components/docs/DocsSearch.tsx
index 753be7989..bbd45082b 100644
--- a/apps/landing/src/components/docs/DocsSearch.tsx
+++ b/apps/landing/src/components/docs/DocsSearch.tsx
@@ -152,11 +152,11 @@ export default function DocsSearch() {
 				type="button"
 				onClick={() => setPaletteOpen(true)}
 				aria-label="Search docs"
-				className="flex h-7 items-center gap-2 border border-border px-2 text-fg-muted text-xs transition-colors hover:border-fg-muted/50 hover:text-fg"
+				className="flex h-7 items-center gap-2 rounded-lg border border-border px-2 text-fg-muted text-xs transition-colors hover:border-fg-muted/40 hover:text-fg sm:w-56"
 			>
-				<MagnifierIcon className="size-3.5" />
+				<MagnifierIcon className="size-3.5 shrink-0" />
 				<span className="hidden sm:inline">Search docs</span>
-				<kbd className="hidden font-medium text-[10px] text-fg-muted/70 tracking-widest sm:inline">
+				<kbd className="ml-auto hidden font-mono font-medium text-[10px] text-fg-muted/70 tracking-widest sm:inline">
 					⌘K
 				</kbd>
 			</button>
diff --git a/apps/landing/src/components/docs/DocsSectionNav.astro b/apps/landing/src/components/docs/DocsSectionNav.astro
new file mode 100644
index 000000000..dba824b5a
--- /dev/null
+++ b/apps/landing/src/components/docs/DocsSectionNav.astro
@@ -0,0 +1,48 @@
+---
+// Section strip under the docs header: the same four sections the sidebar
+// switcher shows, as tabs with the group glyphs. Both read getDocSections so
+// the two never disagree about where a page lives.
+import DocsCategoryIcon from "./DocsCategoryIcon.astro";
+import { getDocSections } from "../../lib/docs-order";
+
+interface Props {
+    currentSlug: string;
+}
+const { currentSlug } = Astro.props;
+const sections = await getDocSections(currentSlug);
+---
+
+<nav class="docs-section-nav flex h-10 items-stretch gap-1 overflow-x-auto border-t border-border/60 px-2 sm:px-4" aria-label="Documentation sections">
+    {sections.map((s) => (
+        <a
+            href={s.href}
+            aria-current={s.active ? "page" : undefined}
+            class:list={[
+                "group relative flex items-center gap-2 whitespace-nowrap px-2.5 text-[13px] transition-colors",
+                s.active ? "font-medium text-fg" : "text-fg-muted hover:text-fg",
+            ]}
+        >
+            <DocsCategoryIcon
+                name={s.icon}
+                class:list={["h-3.5 w-3.5 shrink-0 transition-colors", s.active ? "text-primary" : "text-fg-muted/70 group-hover:text-fg-muted"]}
+            />
+            <span>{s.label}</span>
+            <span
+                class:list={[
+                    "pointer-events-none absolute inset-x-1 -bottom-px h-0.5 bg-primary transition-opacity",
+                    s.active ? "opacity-100" : "opacity-0 group-hover:opacity-30",
+                ]}
+            ></span>
+        </a>
+    ))}
+</nav>
+
+<style>
+    /* Scrolls sideways on phones; the scrollbar would only add a second rule. */
+    .docs-section-nav {
+        scrollbar-width: none;
+    }
+    .docs-section-nav::-webkit-scrollbar {
+        display: none;
+    }
+</style>
diff --git a/apps/landing/src/components/docs/DocsSidebar.astro b/apps/landing/src/components/docs/DocsSidebar.astro
index 78c0486b0..833c6a00b 100644
--- a/apps/landing/src/components/docs/DocsSidebar.astro
+++ b/apps/landing/src/components/docs/DocsSidebar.astro
@@ -1,12 +1,13 @@
 ---
-// The whole docs tree, always. Every group is visible on every page so a
-// reader on a Python guide can still see Go, alerting or the API without
-// going through a picker. Language rows carry their logo; Effect's platform
-// pages nest under the Effect row.
+// One section of the docs tree at a time: only the groups of the section
+// picked in the header strip render, so a reader on a Python guide scans
+// languages, not alerting.
+// Language rows carry their logo; Effect's platform pages nest under Effect.
 import { getCollection } from "astro:content";
 import DocsCategoryIcon from "./DocsCategoryIcon.astro";
 import LanguageLogo from "./LanguageLogo.astro";
-import { groupRank, isDocGroup } from "../../lib/docs-nav";
+import { groupRank, isDocGroup, sectionForGroup } from "../../lib/docs-nav";
+import { getDocSections } from "../../lib/docs-order";
 
 interface Props {
     currentSlug: string;
@@ -33,7 +34,12 @@ for (const doc of allDocs.sort(byOrder)) {
     rows.push({ doc, children: doc.id === EFFECT_ROOT ? effectChildren : [] });
     groups.set(doc.data.group, rows);
 }
-const ordered = [...groups.entries()].sort(([a], [b]) => groupRank(a) - groupRank(b) || a.localeCompare(b));
+const sections = await getDocSections(currentSlug);
+const section = sections.find((s) => s.active) ?? sections[0];
+
+const ordered = [...groups.entries()]
+    .filter(([group]) => sectionForGroup(group).id === section.id)
+    .sort(([a], [b]) => groupRank(a) - groupRank(b) || a.localeCompare(b));
 
 const label = (doc: Doc) => doc.data.navLabel ?? doc.data.title;
 const headingId = (group: string) => `${idPrefix}-${group.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`;
@@ -46,13 +52,13 @@ const rowClass = (active: boolean) =>
 
 <nav aria-label="Documentation">
     {ordered.map(([groupName, rows]) => (
-        <section class="mb-6" aria-labelledby={headingId(groupName)}>
+        <section class="mb-7" aria-labelledby={headingId(groupName)}>
             <h3
                 id={headingId(groupName)}
-                class="flex items-center gap-1.5 text-[10px] text-fg/75 uppercase tracking-wider font-semibold mb-2 px-2"
+                class="mb-2 flex items-center gap-1.5 px-2.5 font-mono text-[10px] font-medium uppercase tracking-[0.14em] text-fg-muted"
             >
                 {isDocGroup(groupName) && (
-                    <DocsCategoryIcon name={groupName} class="w-3 h-3 shrink-0 text-primary/80" />
+                    <DocsCategoryIcon name={groupName} class="h-3 w-3 shrink-0 text-primary/80" />
                 )}
                 {groupName}
             </h3>
@@ -65,7 +71,7 @@ const rowClass = (active: boolean) =>
                             <a
                                 href={`/docs/${doc.id}`}
                                 aria-current={active ? "page" : undefined}
-                                class:list={["flex items-center gap-2 py-1.5 px-2 text-xs transition-colors", rowClass(active)]}
+                                class:list={["flex items-center gap-2 px-2.5 py-1.5 text-[13px] leading-5 transition-colors", rowClass(active)]}
                             >
                                 {doc.data.sdk && (
                                     <LanguageLogo id={doc.data.sdk} class="h-3.5 w-3.5 shrink-0" />
@@ -75,7 +81,7 @@ const rowClass = (active: boolean) =>
                             {children.length > 0 && (
                                 <ul
                                     class:list={[
-                                        "ml-[1.15rem] border-l border-border/70 mt-px mb-1",
+                                        "ml-[1.35rem] border-l border-border/70 mt-px mb-1",
                                         !(active || childActive) && "hidden",
                                     ]}
                                 >
@@ -87,7 +93,7 @@ const rowClass = (active: boolean) =>
                                                     href={`/docs/${child.id}`}
                                                     aria-current={on ? "page" : undefined}
                                                     class:list={[
-                                                        "block py-1 pl-3 pr-2 text-xs transition-colors -ml-px",
+                                                        "-ml-px block py-1 pl-3 pr-2 text-[13px] leading-5 transition-colors",
                                                         on
                                                             ? "text-primary border-l border-primary"
                                                             : "text-fg-muted hover:text-fg border-l border-transparent",
diff --git a/apps/landing/src/components/docs/DocsTableOfContents.astro b/apps/landing/src/components/docs/DocsTableOfContents.astro
index 86a702c19..54f25fb62 100644
--- a/apps/landing/src/components/docs/DocsTableOfContents.astro
+++ b/apps/landing/src/components/docs/DocsTableOfContents.astro
@@ -14,7 +14,7 @@ const tocHeadings = headings.filter((h) => h.depth >= 2 && h.depth <= 3);
 
 {tocHeadings.length > 0 && (
     <nav aria-label="Table of contents" data-toc-spy={spy ? "" : undefined}>
-        <h4 class="text-[10px] text-fg-muted uppercase tracking-wider font-medium mb-3">
+        <h4 class="mb-3 font-mono text-[10px] font-medium uppercase tracking-[0.14em] text-fg-muted">
             On this page
         </h4>
         <ul class="border-l border-border">
@@ -24,7 +24,7 @@ const tocHeadings = headings.filter((h) => h.depth >= 2 && h.depth <= 3);
                         href={`#${heading.slug}`}
                         data-toc-link
                         class:list={[
-                            "toc-link block -ml-px border-l border-transparent py-1 text-xs text-fg-muted leading-snug transition-colors hover:text-fg",
+                            "toc-link -ml-px block border-l border-transparent py-[3px] text-[12.5px] leading-snug text-fg-muted transition-colors hover:text-fg",
                             heading.depth === 3 ? "pl-6" : "pl-3",
                         ]}
                     >
@@ -55,7 +55,7 @@ const tocHeadings = headings.filter((h) => h.depth >= 2 && h.depth <= 3);
             const el = document.getElementById(id);
             return el ? [{ link, el }] : [];
         });
-        const OFFSET = 6.75 * 16 + 24; // html.docs scroll-padding-top + breathing room
+        const OFFSET = 6 * 16 + 24; // html.docs scroll-padding-top + breathing room
 
         let current: HTMLAnchorElement | null = null;
         let ticking = false;
diff --git a/apps/landing/src/layouts/DocsLayout.astro b/apps/landing/src/layouts/DocsLayout.astro
index b50e088fb..097eea62b 100644
--- a/apps/landing/src/layouts/DocsLayout.astro
+++ b/apps/landing/src/layouts/DocsLayout.astro
@@ -4,7 +4,7 @@ import DocsSidebar from "../components/docs/DocsSidebar.astro";
 import DocsTableOfContents from "../components/docs/DocsTableOfContents.astro";
 import DocsPrevNext from "../components/docs/DocsPrevNext.astro";
 import DocsMobileNav from "../components/docs/DocsMobileNav.astro";
-import DocsCategoryNav from "../components/docs/DocsCategoryNav.astro";
+import DocsSectionNav from "../components/docs/DocsSectionNav.astro";
 import DocsSearch from "../components/docs/DocsSearch.tsx";
 import { getGitHubStars } from "../lib/github-stars";
 import { GithubStarButton } from "../components/GithubStarButton";
@@ -28,6 +28,7 @@ const stars = await getGitHubStars();
 const pageTitle = currentSlug ? `${title} — Maple Docs` : "Maple Docs";
 const canonicalUrl = new URL(Astro.url.pathname, Astro.site).toString();
 const absoluteImage = image.startsWith("http") ? image : new URL(image, Astro.site).toString();
+const hasToc = !wide && headings.some((h) => h.depth >= 2 && h.depth <= 3);
 ---
 
 <!doctype html>
@@ -64,55 +65,49 @@ const absoluteImage = image.startsWith("http") ? image : new URL(image, Astro.si
             startLandingTelemetry();
         </script>
     </head>
-    <body class="min-h-screen antialiased bg-bg text-fg font-sans">
-        <!-- Docs header -->
+    <!-- Docs are a reading surface: proportional Geist for everything, the way
+         the blog sets its prose. Mono is opted back in per element for code,
+         eyebrows and labels. -->
+    <body class="min-h-screen antialiased bg-bg text-fg font-display">
         <header class="fixed top-0 left-0 right-0 z-50 border-b border-border bg-bg/95 backdrop-blur-md">
-            <div class="h-12 flex items-center justify-between px-5">
-                <div class="flex items-center gap-3">
-                    <a href="/" class="flex items-center gap-2 text-fg-muted hover:text-fg transition-colors">
-                        <MapleMark size={19} className="text-primary shrink-0" />
-                        <span class="text-xs font-medium text-fg">Maple</span>
-                    </a>
-                    <a
-                        href="/docs"
-                        class="text-[10px] uppercase tracking-wider font-medium px-1.5 py-0.5 border border-border text-fg-muted hover:text-fg hover:border-fg-muted/50 transition-colors"
-                    >
-                        Docs
-                    </a>
-                </div>
-                <div class="flex items-center gap-4">
+            <div class="flex h-14 items-center gap-5 px-4 sm:px-6">
+                <a href="/" class="flex items-center gap-2 text-fg transition-colors hover:text-primary">
+                    <MapleMark size={20} className="text-primary shrink-0" />
+                    <span class="text-[15px] font-semibold tracking-[-0.01em]">Maple</span>
+                </a>
+                <span class="h-4 w-px bg-border" aria-hidden="true"></span>
+                <a href="/docs" class="text-[14px] text-fg-muted transition-colors hover:text-fg">Docs</a>
+                <div class="ml-auto flex items-center gap-2.5">
                     <DocsSearch client:idle />
-                    <GithubStarButton stars={stars} className="inline-flex" />
+                    <GithubStarButton stars={stars} className="hidden sm:inline-flex" />
                     <a
                         href="https://app.maple.dev"
-                        class="text-[10px] text-fg-muted hover:text-primary transition-colors font-medium uppercase tracking-wider"
+                        class="inline-flex h-7 items-center rounded-lg border border-border px-2.5 text-xs font-medium text-fg-muted transition-colors hover:border-fg-muted/40 hover:text-fg"
                     >
-                        App
+                        Open app
                     </a>
                 </div>
             </div>
-            <DocsCategoryNav currentSlug={currentSlug} />
+            <DocsSectionNav currentSlug={currentSlug} />
         </header>
 
-        <div class="pt-[5.75rem] min-h-screen flex">
-            <!-- Sidebar -->
-            <aside class="hidden lg:block w-60 shrink-0 fixed top-[5.75rem] left-0 bottom-0 overflow-y-auto border-r border-border py-6 px-5">
+        <div class="flex min-h-screen pt-24">
+            <aside class="fixed top-24 bottom-0 left-0 hidden w-64 shrink-0 overflow-y-auto border-r border-border px-4 py-7 lg:block">
                 <DocsSidebar currentSlug={currentSlug} />
             </aside>
 
-            <!-- Main content -->
-            <main class:list={["flex-1 min-w-0 lg:ml-60", !wide && "xl:mr-52"]}>
-                <div class:list={["mx-auto py-10 px-6", wide ? "max-w-4xl" : "max-w-3xl"]}>
+            <main class:list={["min-w-0 flex-1 lg:ml-64", hasToc && "xl:mr-60"]}>
+                <div class:list={["mx-auto px-5 py-10 sm:px-8 md:py-12", wide ? "max-w-5xl" : "max-w-3xl"]}>
                     <DocsMobileNav currentSlug={currentSlug} />
-                    {!wide && headings.some((h) => h.depth >= 2 && h.depth <= 3) && (
-                        <details class="xl:hidden mb-6 rounded-lg border border-border">
-                            <summary class="flex items-center justify-between px-4 py-3 cursor-pointer text-xs text-fg-muted hover:text-fg transition-colors list-none [&::-webkit-details-marker]:hidden">
+                    {hasToc && (
+                        <details class="mb-8 rounded-lg border border-border xl:hidden">
+                            <summary class="flex cursor-pointer list-none items-center justify-between px-4 py-3 text-[13px] text-fg-muted transition-colors hover:text-fg [&::-webkit-details-marker]:hidden">
                                 <span>On this page</span>
-                                <svg class="w-3 h-3 shrink-0 transition-transform details-open:rotate-180" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
+                                <svg class="h-3 w-3 shrink-0 transition-transform details-open:rotate-180" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
                                     <path d="M3 5l3 3 3-3" />
                                 </svg>
                             </summary>
-                            <div class="px-4 pb-4 border-t border-border pt-4 max-h-[60vh] overflow-y-auto">
+                            <div class="max-h-[60vh] overflow-y-auto border-t border-border px-4 pt-4 pb-4">
                                 <DocsTableOfContents headings={headings} spy={false} />
                             </div>
                         </details>
@@ -122,9 +117,8 @@ const absoluteImage = image.startsWith("http") ? image : new URL(image, Astro.si
                 </div>
             </main>
 
-            <!-- Table of Contents -->
-            {!wide && (
-                <aside class="hidden xl:block w-52 shrink-0 fixed top-[5.75rem] right-0 bottom-0 overflow-y-auto py-6 px-5 border-l border-border">
+            {hasToc && (
+                <aside class="fixed top-24 right-0 bottom-0 hidden w-60 shrink-0 overflow-y-auto py-7 pr-6 pl-4 xl:block">
                     <DocsTableOfContents headings={headings} />
                 </aside>
             )}
@@ -168,20 +162,22 @@ const absoluteImage = image.startsWith("http") ? image : new URL(image, Astro.si
                 }
             }
 
-            // Sidebar: the active row is often below the fold on long trees.
+            // Sidebar: the active row is often below the fold on long trees. Scroll
+            // just far enough to show it.
             const sidebar = document.querySelector<HTMLElement>("aside nav[aria-label='Documentation']");
             const active = sidebar?.querySelector<HTMLElement>("a[aria-current='page']");
             const rail = sidebar?.closest<HTMLElement>("aside");
-            if (active && rail && active.offsetTop > rail.clientHeight - 80) {
-                rail.scrollTop = active.offsetTop - rail.clientHeight / 2;
+            if (active && rail) {
+                const bottom = active.offsetTop + active.offsetHeight + 32;
+                if (bottom > rail.clientHeight) rail.scrollTop = bottom - rail.clientHeight;
             }
 
-            // Category strip scrolls horizontally on phones; keep the active one visible.
-            const strip = document.querySelector<HTMLElement>(".docs-cat-nav");
-            const category = strip?.querySelector<HTMLElement>("a[aria-current='page']");
-            if (strip && category) {
-                const overflow = category.offsetLeft + category.offsetWidth - strip.clientWidth;
-                if (overflow > 0) strip.scrollLeft = overflow + 24;
+            // Section strip scrolls horizontally on phones; keep the active one visible.
+            const strip = document.querySelector<HTMLElement>(".docs-section-nav");
+            const section = strip?.querySelector<HTMLElement>("a[aria-current='page']");
+            if (strip && section) {
+                const overflow = section.offsetLeft + section.offsetWidth - strip.clientWidth;
+                if (overflow > 0) strip.scrollLeft = overflow + 16;
             }
         </script>
     </body>
diff --git a/apps/landing/src/lib/docs-nav.ts b/apps/landing/src/lib/docs-nav.ts
index 1a38c5609..f6d32ab0b 100644
--- a/apps/landing/src/lib/docs-nav.ts
+++ b/apps/landing/src/lib/docs-nav.ts
@@ -1,25 +1,58 @@
-// Single source of truth for docs navigation ordering + the header category bar.
-// The sidebar (DocsSidebar), the index page, prev/next, search and the header
-// category bar (DocsCategoryNav) all read from here so group order and icons
-// never drift apart. Pure data — client islands import it.
+// Single source of truth for docs navigation ordering. The sidebar
+// (DocsSidebar), the index page, prev/next and search all read from here so
+// section and group order never drift apart. Pure data — client islands import it.
 
-/** Doc groups in sidebar order. Every doc's `group` must appear here. */
-export const GROUP_ORDER = [
-	"Getting Started",
-	"Instrumentation",
-	"Concepts",
-	"Session Replay",
-	"Product Events",
-	"Agent Sessions",
-	"Dashboards",
-	"Infrastructure",
-	"Integrations",
-	"Alerting",
-	"Local Mode",
-	"Reference",
+/**
+ * The sidebar is split into sections so a reader sees one section's tree at a
+ * time: product surfaces, the "get data in" guides, the local binary, and the
+ * machine-facing references. Groups are listed in sidebar order; `icon` is a
+ * DocsCategoryIcon id, shared with the header strip.
+ */
+export const SECTIONS = [
+	{
+		id: "platform",
+		icon: "Dashboards",
+		label: "Platform",
+		blurb: "Concepts and every product surface.",
+		groups: [
+			"Getting Started",
+			"Concepts",
+			"Session Replay",
+			"Product Events",
+			"Agent Sessions",
+			"Dashboards",
+			"Alerting",
+			"Integrations",
+		],
+	},
+	{
+		id: "instrumentation",
+		icon: "Instrumentation",
+		label: "Instrumentation",
+		blurb: "Languages, frameworks, hosts and clusters.",
+		groups: ["Instrumentation", "Infrastructure"],
+	},
+	{
+		id: "local",
+		icon: "Local Mode",
+		label: "Local Mode",
+		blurb: "The whole product as one binary.",
+		groups: ["Local Mode"],
+	},
+	{
+		id: "reference",
+		icon: "Reference",
+		label: "Reference",
+		blurb: "REST API and the MCP server.",
+		groups: ["Reference"],
+	},
 ] as const
 
-export type DocGroup = (typeof GROUP_ORDER)[number]
+export type DocSection = (typeof SECTIONS)[number]
+export type DocGroup = DocSection["groups"][number]
+
+/** Doc groups in sidebar order (sections in order, groups within each). */
+export const GROUP_ORDER: readonly DocGroup[] = SECTIONS.flatMap((section) => section.groups)
 
 export const isDocGroup = (group: string): group is DocGroup => GROUP_ORDER.some((known) => known === group)
 
@@ -28,28 +61,13 @@ export const groupRank = (group: string): number => {
 	return i === -1 ? GROUP_ORDER.length : i
 }
 
+/** The section a group belongs to; unknown groups fall into the first one. */
+export const sectionForGroup = (group: string): DocSection =>
+	SECTIONS.find((section) => section.groups.some((known) => known === group)) ?? SECTIONS[0]
+
 /** Slug of the instrumentation overview — the "SDKs" entry point everywhere. */
 export const INSTRUMENTATION_SLUG = "instrumentation"
 
-/**
- * Left-to-right order of the header category bar. Each entry links to the
- * first page of its group; the group name doubles as the DocsCategoryIcon id.
- */
-export const HEADER_NAV: readonly DocGroup[] = [
-	"Getting Started",
-	"Instrumentation",
-	"Concepts",
-	"Session Replay",
-	"Product Events",
-	"Agent Sessions",
-	"Dashboards",
-	"Infrastructure",
-	"Integrations",
-	"Alerting",
-	"Local Mode",
-	"Reference",
-]
-
 /** One-line blurb per group for the docs index cards. */
 export const GROUP_BLURBS = {
 	"Getting Started": "What Maple is and the three steps to first data.",
diff --git a/apps/landing/src/lib/docs-order.ts b/apps/landing/src/lib/docs-order.ts
index 2f95a2a26..88b8f2cb7 100644
--- a/apps/landing/src/lib/docs-order.ts
+++ b/apps/landing/src/lib/docs-order.ts
@@ -7,7 +7,7 @@
  * it into a browser bundle.
  */
 import { getCollection, type CollectionEntry } from "astro:content"
-import { groupRank } from "./docs-nav"
+import { SECTIONS, groupRank, sectionForGroup } from "./docs-nav"
 
 export type Doc = CollectionEntry<"docs">
 
@@ -31,3 +31,23 @@ export async function getDocGroups(): Promise<{ group: string; docs: Doc[] }[]>
 			),
 		}))
 }
+
+/**
+ * The four sidebar sections with what the switchers need: the page count,
+ * the first page to open on, and whether `currentSlug` lives inside.
+ */
+export async function getDocSections(currentSlug: string) {
+	const groups = await getDocGroups()
+	const currentGroup = groups.find((g) => g.docs.some((d) => d.id === currentSlug))?.group
+	const activeId = currentGroup ? sectionForGroup(currentGroup).id : SECTIONS[0].id
+	return SECTIONS.map((section) => {
+		const docs = groups.filter((g) => sectionForGroup(g.group).id === section.id).flatMap((g) => g.docs)
+		const first = docs[0]
+		return {
+			...section,
+			count: docs.length,
+			href: first ? `/docs/${first.id}` : "/docs",
+			active: section.id === activeId,
+		}
+	})
+}
diff --git a/apps/landing/src/pages/docs/[...slug].astro b/apps/landing/src/pages/docs/[...slug].astro
index 7acdaf5e3..8d242edc6 100644
--- a/apps/landing/src/pages/docs/[...slug].astro
+++ b/apps/landing/src/pages/docs/[...slug].astro
@@ -22,11 +22,11 @@ const { Content, headings } = await render(doc);
     currentSlug={doc.id}
     mdHref={`/docs/${doc.id}.md`}
 >
-    <article class="docs-content max-w-none">
+    <article class="docs-content docs-prose max-w-none">
         <Breadcrumb group={doc.data.group} title={doc.data.title} />
-        <h1 class="font-display text-2xl md:text-3xl font-medium tracking-[-0.02em] text-fg mb-2">{doc.data.title}</h1>
-        <p class="text-sm text-fg-muted mb-8 leading-relaxed">{doc.data.description}</p>
-        <div class="border-t border-border pt-8">
+        <h1 class="text-[30px] font-semibold leading-[1.15] tracking-[-0.025em] text-balance text-fg md:text-[34px]">{doc.data.title}</h1>
+        <p class="mt-3 max-w-[62ch] text-[16px] leading-[1.6] text-pretty text-fg-muted">{doc.data.description}</p>
+        <div class="docs-body mt-8 border-t border-border pt-8">
             <Content />
         </div>
     </article>
diff --git a/apps/landing/src/pages/docs/index.astro b/apps/landing/src/pages/docs/index.astro
index a67afc376..714aa7444 100644
--- a/apps/landing/src/pages/docs/index.astro
+++ b/apps/landing/src/pages/docs/index.astro
@@ -47,20 +47,20 @@ const topics = [...new Set(allDocs.map((d) => d.data.group))]
 >
     <div class="docs-index">
         <header>
-            <h1 class="font-display text-3xl md:text-4xl font-medium tracking-[-0.02em] text-fg">Documentation</h1>
-            <p class="mt-3 max-w-[60ch] text-sm leading-relaxed text-fg-muted">
+            <h1 class="text-[34px] font-semibold leading-[1.1] tracking-[-0.03em] text-fg md:text-[40px]">Documentation</h1>
+            <p class="mt-4 max-w-[58ch] text-[16px] leading-[1.6] text-pretty text-fg-muted">
                 Maple is an OpenTelemetry-native observability platform for traces, logs, metrics, errors and sessions. Point any OTel SDK at it and start exploring; these pages cover the how.
             </p>
         </header>
 
         {/* ── Start here ─────────────────────────────────────── */}
         <section class="mt-10" aria-labelledby="start-here">
-            <h2 id="start-here" class="text-[10px] font-medium uppercase tracking-[0.18em] text-fg-muted">Start here</h2>
+            <h2 id="start-here" class="font-mono text-[10px] font-medium uppercase tracking-[0.18em] text-fg-muted">Start here</h2>
             <div class="hairline-grid mt-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
                 {START_HERE.map((doc) => (
                     <a href={`/docs/${doc.id}`} class="cell block p-5 transition-colors hover:bg-bg-elevated">
-                        <span class="block text-[13px] font-medium text-fg">{doc.data.title}</span>
-                        <p class="mt-1.5 text-[12px] leading-relaxed text-fg-muted line-clamp-3">{doc.data.description}</p>
+                        <span class="block text-[14px] font-medium text-fg">{doc.data.title}</span>
+                        <p class="mt-1.5 text-[13px] leading-relaxed text-fg-muted line-clamp-3">{doc.data.description}</p>
                     </a>
                 ))}
             </div>
@@ -69,8 +69,8 @@ const topics = [...new Set(allDocs.map((d) => d.data.group))]
         {/* ── Instrumentation ─────────────────────────────────── */}
         <section class="mt-12" aria-labelledby="instrument">
             <div class="flex items-baseline justify-between gap-4">
-                <h2 id="instrument" class="text-[10px] font-medium uppercase tracking-[0.18em] text-fg-muted">Instrument your application</h2>
-                <a href={`/docs/${INSTRUMENTATION_SLUG}`} class="text-[12.5px] text-primary transition-colors hover:text-fg">All guides</a>
+                <h2 id="instrument" class="font-mono text-[10px] font-medium uppercase tracking-[0.18em] text-fg-muted">Instrument your application</h2>
+                <a href={`/docs/${INSTRUMENTATION_SLUG}`} class="text-[13px] text-primary transition-colors hover:text-fg">All guides</a>
             </div>
             <div class="hairline-grid mt-4 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4">
                 {LANGUAGES.map((lang) => (
@@ -78,39 +78,39 @@ const topics = [...new Set(allDocs.map((d) => d.data.group))]
                         <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border bg-bg-elevated" aria-hidden="true">
                             <LanguageLogo id={lang.id} class="h-4 w-4" />
                         </span>
-                        <span class="truncate text-[13px] font-medium text-fg">{lang.name}</span>
+                        <span class="truncate text-[14px] font-medium text-fg">{lang.name}</span>
                     </a>
                 ))}
                 <a href="/docs/session-replay/browser-sdk" class="cell flex items-center gap-3 p-4 transition-colors hover:bg-bg-elevated">
                     <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border bg-bg-elevated" aria-hidden="true">
                         <BrandMarkIcon id="javascript" class="h-4 w-4" />
                     </span>
-                    <span class="truncate text-[13px] font-medium text-fg">Browser</span>
+                    <span class="truncate text-[14px] font-medium text-fg">Browser</span>
                 </a>
                 <a href={`/docs/${INSTRUMENTATION_SLUG}#anything-that-speaks-otlp`} class="cell flex items-center gap-3 p-4 transition-colors hover:bg-bg-elevated">
                     <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border bg-bg-elevated" aria-hidden="true">
                         <BrandMarkIcon id="opentelemetry" class="h-4 w-4" />
                     </span>
-                    <span class="truncate text-[13px] font-medium text-fg">Any OTLP exporter</span>
+                    <span class="truncate text-[14px] font-medium text-fg">Any OTLP exporter</span>
                 </a>
             </div>
         </section>
 
         {/* ── Browse by topic ─────────────────────────────────── */}
         <section class="mt-12" aria-labelledby="topics">
-            <h2 id="topics" class="text-[10px] font-medium uppercase tracking-[0.18em] text-fg-muted">Browse by topic</h2>
+            <h2 id="topics" class="font-mono text-[10px] font-medium uppercase tracking-[0.18em] text-fg-muted">Browse by topic</h2>
             <div class="hairline-grid mt-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
                 {topics.map(({ group, blurb, docs }) => (
                     <div class="cell p-5">
-                        <h3 class="flex items-center gap-2 text-[13px] font-medium text-fg">
+                        <h3 class="flex items-center gap-2 text-[14px] font-medium text-fg">
                             <DocsCategoryIcon name={group} class="h-3.5 w-3.5 shrink-0 text-primary/80" />
                             {group}
                         </h3>
-                        {blurb && <p class="mt-1.5 text-[12px] leading-relaxed text-fg-muted">{blurb}</p>}
+                        {blurb && <p class="mt-1.5 text-[13px] leading-relaxed text-fg-muted">{blurb}</p>}
                         <ul class="mt-3 space-y-1.5">
                             {docs.map((doc) => (
                                 <li>
-                                    <a href={`/docs/${doc.id}`} class="text-[12.5px] text-fg-muted transition-colors hover:text-fg">
+                                    <a href={`/docs/${doc.id}`} class="text-[13.5px] text-fg-muted transition-colors hover:text-fg">
                                         {doc.data.title}
                                     </a>
                                 </li>
@@ -122,7 +122,7 @@ const topics = [...new Set(allDocs.map((d) => d.data.group))]
         </section>
 
         {/* ── Footer ──────────────────────────────────────────── */}
-        <footer class="mt-12 flex flex-col gap-2 border-t border-border pt-6 text-[12px] text-fg-muted sm:flex-row sm:items-center sm:justify-between">
+        <footer class="mt-14 flex flex-col gap-2 border-t border-border pt-6 text-[13px] text-fg-muted sm:flex-row sm:items-center sm:justify-between">
             <p>
                 Every page is also plain markdown: append <code class="rounded bg-bg-elevated px-1.5 py-0.5 text-fg">.md</code> to its URL, or start from
                 <a href="/llms.txt" class="text-fg transition-colors hover:text-primary">/llms.txt</a>.
diff --git a/apps/landing/src/styles/global.css b/apps/landing/src/styles/global.css
index 2b0db049c..54d6021a0 100644
--- a/apps/landing/src/styles/global.css
+++ b/apps/landing/src/styles/global.css
@@ -1379,6 +1379,62 @@
 	@apply w-full h-auto aspect-[1280/660] object-cover bg-bg-deep border border-border rounded-xl my-8;
 }
 
+/* ──────────────────────────────────────────────────────────────
+   Docs reading scale. Docs pages run in proportional Geist (DocsLayout
+   sets it on <body>, as the blog does for its prose), so this block only
+   sizes the type; `.docs-content` above stays the shared plumbing the
+   changelog also renders with. Same specificity — source order decides,
+   so it stays below the .docs-content block.
+   ────────────────────────────────────────────────────────────── */
+.docs-prose p {
+	@apply text-[15px] leading-[1.7] text-fg/80 mb-5;
+}
+
+.docs-prose ul,
+.docs-prose ol {
+	@apply text-[15px] leading-[1.7] text-fg/80 mb-5 space-y-1.5 pl-5;
+}
+
+.docs-prose h2 {
+	@apply text-[22px] tracking-[-0.02em] mt-12 mb-4;
+}
+
+.docs-prose h3 {
+	@apply text-[17px] tracking-[-0.01em] mt-9 mb-3;
+}
+
+.docs-prose h4 {
+	@apply text-[15px] font-semibold text-fg mt-7 mb-2;
+}
+
+/* The body sits under its own rule, so the first heading needs no top gap. */
+.docs-prose .docs-body > :first-child {
+	margin-top: 0;
+}
+
+.docs-prose blockquote {
+	@apply text-[14.5px] leading-[1.65] text-fg/80 my-6;
+}
+
+.docs-prose table {
+	@apply text-[14px];
+}
+
+.docs-prose th {
+	@apply font-mono p-2.5;
+}
+
+.docs-prose td {
+	@apply p-2.5 align-top;
+}
+
+/* Shiki wraps lines inline (`wrap: true`, for the blog column). Guides are
+   read for their commands, so code scrolls sideways instead of folding. */
+.docs-prose pre {
+	white-space: pre !important;
+	@apply my-6;
+}
+
 /* ──────────────────────────────────────────────────────────────
    Blog long-form scale. Blog posts render with
    class="docs-content blog-content": the docs rules above supply the
@@ -1511,7 +1567,7 @@ html {
 	scroll-padding-top: 5rem;
 }
 
-/* Docs stack a category strip under the header (5.75rem), so anchors need more room. */
+/* Docs stack a section strip under the header (6rem), so anchors need more room. */
 html.docs {
-	scroll-padding-top: 6.75rem;
+	scroll-padding-top: 7rem;
 }