diff --git a/website/README.md b/website/README.md
index 546e26eb7a..14cb348fc6 100644
--- a/website/README.md
+++ b/website/README.md
@@ -20,12 +20,138 @@ CI blocks on critical and serious violations. Minor and moderate best-practice i
 
 Authoring conventions: resource cards use `div[role="listitem"]` wrappers, not `<article>`; only add `role="list"` to containers whose direct children are list items; do not nest interactive controls inside another focusable element; `.btn-primary` and ToC links must meet WCAG AA (4.5:1) contrast in both light and dark themes.
 
+## Discovery and visual conventions
+
+The landing page prioritizes the Learning Hub, with the repository as its
+secondary destination. Resource cards and navigation reuse their catalog pages'
+branded icons, with visible text labels. Resources without branded artwork keep
+their Octicons. Repeated SVGs use instance-specific clipping IDs.
+Resource-card CTAs reveal their border, expand with the arrow moving right, then
+fade the label into the padded space. Labels fade out before collapse rather
+than sliding through the border. Touch and narrow layouts keep labels visible;
+reduced-motion preferences skip the transitions.
+Expanded card buttons inset their labels past the rounded ends; the hero
+button keeps Primer's default padding.
+The secondary hero CTA uses Primer's theme-aware background tokens for its
+rest, hover, and pressed states instead of fixed gray fills.
+The resource grid stays single-column below 768px, uses two columns up to
+1280px, then three columns. Nested card padding decreases on narrower layouts
+so full CTA labels remain on one line without shrinking their text.
+At 1920px and wider, the homepage header and content share the catalogs'
+centered 1296px frame; smaller viewports retain the same responsive gutters.
+The landing hero concentrates a green-tinted square grid and soft glow around
+the lower center, fading toward the headline and side edges rather than covering
+the panel uniformly. Other heading panels use a static theme-token texture. Both treatments
+are disabled in forced-colors mode.
+The bottom learning panel links to YouTube and the GitHub Copilot docs; the
+primary hero remains the entry point to the Learning Hub. Its outer frame shares
+the banner's background token so the color reaches both side edges.
+The shared footer pairs the GitHub wordmark with the official GitHub mark,
+bundled locally as a theme-colored mask while retaining Primer's footer link.
+
+The catalog's user-facing label is **Extensions**, including navigation,
+breadcrumbs, and search result types. A canvas is the interactive panel an
+extension can supply, and a plugin can package it with other resources.
+Existing `/extensions/` and `/extension/<id>/` URLs, schema fields, and install
+identifiers remain unchanged. Menu links and search group headings use the
+same artwork as the cards, at a compact 16px size. Individual search results
+omit redundant type labels and icons. The desktop Learning Hub
+link stays text-only; its icon appears on the primary hero CTA instead.
+Search groups use stronger headings and solid dividers between groups. Hover
+and keyboard selection fill the entire result-row width while text remains inset.
+Arrow, Home, and End navigation keep the selected result visible inside scrollable
+panels without moving focus away from the search field.
+Dropdown links that leave the site have a trailing external-link arrow, including
+Hooks, Workflows, and Tools (local redirects to GitHub), and the mobile Contribute button.
+
+Run the landing/navigation and reported image regressions against a built site:
+
+```bash
+node website/scripts/site-refinement-regression.mjs
+node website/scripts/resource-card-layout-regression.mjs
+node website/scripts/mobile-nav-regression.mjs
+```
+
+These browser regressions default to Astro's `http://127.0.0.1:4321`.
+Set `SITE_BASE_URL` to target another development or production-preview server.
+On PowerShell, use `$env:SITE_BASE_URL = 'http://127.0.0.1:4331'`.
+
+The mobile menu spans the actual header width (excluding scrollbars), with
+content aligned to the wordmark and a scrollable panel on short screens.
+The mobile navigation regression checks menu bounds, padding, icon consistency,
+and keyboard behavior.
+
+## Reading headers and catalog pagination
+
+Resource details and learning articles let their expanded title, description,
+and actions scroll away. On roomy desktop viewports, an observer reveals a
+compact title with a small, right-aligned primary install action where available.
+Its right edge aligns with the top bar's trailing actions.
+The full install menu stays in the expanded hero. The strip fades in as the
+remaining hero reaches the strip's height, without changing document height or
+briefly exposing a bare progress line. Hidden install actions are inert.
+The title releases on mobile, short viewports, and enlarged
+text; anchor and sidebar offsets share its measured height. Back to top restores
+heading focus and respects reduced motion. The green progress line celebrates
+when the article's bottom is visible, consistently across resource details and
+learning articles, rather than waiting for the footer or stopping at a heading.
+
+All six catalogs share the pagination control alignment correction, preserving
+Primer's current-page styling and the keyboard scroll/focus handoff to `#catalog`.
+With the website running locally, run the focused browser regressions:
+
+```bash
+node website/scripts/reading-catalog-regression.mjs
+node website/scripts/reading-header-regression.mjs
+```
+
+These use the same `SITE_BASE_URL` setting and default as the landing-page regressions.
+
 ## Security hardening notes
 
 - The site ships with a baseline meta CSP and `referrer` policy in `src/components/Head.astro`.
 - Because the site is hosted on GitHub Pages, response headers are not controllable in-repo. For stricter enforcement (for example, header-based CSP with nonce/hashes), place the site behind infrastructure that can set HTTP security headers.
 - Markdown rendered for detail/file-browser experiences is sanitized with the shared `sanitizeHtml()` helper before insertion.
 
+## Search locale
+
+Both catalog and Pagefind results are scoped to the rendered page's `<html lang>`,
+before grouping and result limits. English fallback pages search English even
+when their URL has another locale prefix. Real translated pages do not mix in
+English catalog records; without Pagefind, they show no results rather than
+silently searching another language.
+
+Run `node --test website/scripts/search.test.mjs` for adapter coverage and
+`node --test website/scripts/search-browser.test.mjs` after a production build
+for desktop/mobile locale and search interaction coverage.
+
+## Embedded markdown images
+
+Standalone documentation images receive 24px of vertical margin through a
+shared reading-content rule. The markdown sanitizer marks image-only blocks,
+including linked images and themed pictures; inline icons and badge rows retain
+their existing layout. Component-owned hero and gallery images are unaffected.
+
+Resource details and skill/cookbook file previews resolve embedded `src` and
+picture/image `srcset` URLs from the originating repository document directory
+and revision, not the website route or locale. Canvas READMEs use the same
+generated commit ref as their preview image; other curated documents use their
+existing `main` source. Site-root `/images/...` assets and HTTP(S) images remain
+valid, and ordinary image hyperlinks remain links.
+
+External catalog entries do not currently fetch README bodies. Any future
+cached external README must supply its actual raw repository base, revision,
+and document path to `readResourceMarkdown`; its local cache filename is not
+source provenance. Missing or invalid provenance for relative images is
+reported and the image URL is removed rather than guessed. Sanitization still
+runs on the resolved attributes.
+
+Run focused media regressions from the repository root with Node 24 or later:
+
+```bash
+node --test website/scripts/markdown-images.test.mjs
+```
+
 ## Social preview cards (LinkedIn, etc.)
 
 Shared links render as large preview cards driven by Open Graph / Twitter meta tags.
diff --git a/website/scripts/markdown-images.test.mjs b/website/scripts/markdown-images.test.mjs
new file mode 100644
index 0000000000..d6f94b6659
--- /dev/null
+++ b/website/scripts/markdown-images.test.mjs
@@ -0,0 +1,219 @@
+import assert from "node:assert/strict";
+import { existsSync } from "node:fs";
+import { registerHooks } from "node:module";
+import { fileURLToPath } from "node:url";
+import { test } from "node:test";
+import { marked } from "marked";
+
+// Node's native TS support needs extensions; Astro/Vite imports omit them.
+const lib = new URL("../src/lib/", import.meta.url).href;
+registerHooks({
+  resolve(specifier, context, nextResolve) {
+    if (context.parentURL?.startsWith(lib) && specifier.startsWith(".")) {
+      const candidate = new URL(`${specifier}.ts`, context.parentURL);
+      if (existsSync(candidate)) return nextResolve(candidate.href, context);
+    }
+    return nextResolve(specifier, context);
+  },
+});
+
+process.chdir(fileURLToPath(new URL("..", import.meta.url)));
+const { resolveMarkdownImage, resolveMarkdownSrcset } =
+  await import("../src/lib/markdown-images.ts");
+const { sanitizeHtml } = await import("../src/lib/sanitize-html.ts");
+const { readResourceMarkdown } = await import("../src/lib/detail-page.ts");
+
+const revision = "a".repeat(40);
+const rawBase = `https://raw.githubusercontent.com/github/awesome-copilot/${revision}`;
+const source = {
+  rawBase,
+  filePath: "extensions/pr-artifact-explorer/README.md",
+};
+const render = (markdown, provenance = source) =>
+  sanitizeHtml(marked.parse(markdown, { async: false }), provenance);
+
+test("standalone documentation images receive the shared spacing marker", () => {
+  for (const markdown of [
+    "![Preview](assets/preview.png)",
+    "[![Preview](assets/preview.png)](https://example.com)",
+    '<picture><source srcset="assets/preview.png"><img src="assets/preview.png" alt="Preview"></picture>',
+    '<a href="https://example.com"><picture><img src="assets/preview.png" alt="Preview"></picture></a>',
+  ]) {
+    const html = render(markdown);
+    assert.match(html, /<img\b[^>]*data-markdown-block-image=""/);
+    assert.equal(sanitizeHtml(html), html, "Repeated sanitization preserves block classification");
+  }
+  assert.match(readResourceMarkdown(source.filePath, source).markdownHtml,
+    /<img\b[^>]*data-markdown-block-image=""/);
+});
+
+test("inline icons, text, and badge rows do not receive block image spacing", () => {
+  for (const markdown of [
+    "Click ![Icon](assets/preview.png) to continue.",
+    "**Before** ![Icon](assets/preview.png) **after**",
+    "[![Build](assets/preview.png)](https://example.com) [![Version](assets/preview.png)](https://example.com)",
+    '<span><img src="assets/preview.png" alt="Icon"></span>',
+    '<div>Click <img src="assets/preview.png" alt="Icon"> to continue.</div>',
+    '<p>Click <img src="assets/preview.png" data-markdown-block-image="" alt="Icon"> to continue.</p>',
+  ]) {
+    assert.doesNotMatch(render(markdown), /data-markdown-block-image/);
+  }
+});
+
+test("relative images resolve against the document directory and revision", () => {
+  for (const [input, expected] of [
+    ["assets/preview.png", "extensions/pr-artifact-explorer/assets/preview.png"],
+    ["./assets/preview.png", "extensions/pr-artifact-explorer/assets/preview.png"],
+    ["../shared/image.png", "extensions/shared/image.png"],
+    ["../../shared/image.png", "shared/image.png"],
+    ["assets/a b.png?raw=true#dark", "extensions/pr-artifact-explorer/assets/a%20b.png?raw=true#dark"],
+    ["assets/a%20b.png", "extensions/pr-artifact-explorer/assets/a%20b.png"],
+  ]) {
+    assert.equal(resolveMarkdownImage(input, source), `${rawBase}/${expected}`);
+  }
+});
+
+test("site-root, absolute, and already pinned assets retain their destinations", () => {
+  for (const url of [
+    "/images/learning-hub/example.png",
+    "https://example.com/image.png?q=1#preview",
+    "http://example.com/image.png",
+    `${rawBase}/extensions/pr-artifact-explorer/assets/preview.png`,
+    "https://github.com/user-attachments/assets/image-id",
+    "https://github.com/owner/repo/blob/feature/branch/image.png?raw=true",
+  ]) {
+    assert.equal(resolveMarkdownImage(url, null), url);
+  }
+  assert.equal(resolveMarkdownImage("//example.com/image.png", null), "https://example.com/image.png");
+});
+
+test("only unambiguous commit-pinned embedded blob URLs become raw URLs", () => {
+  const blob = `https://github.com/owner/repo/blob/${revision}/docs/image.png?raw=true#dark`;
+  assert.equal(
+    resolveMarkdownImage(blob, source),
+    `https://raw.githubusercontent.com/owner/repo/${revision}/docs/image.png?raw=true#dark`,
+  );
+  const html = render(`[An image link](${blob})\n\n![An embedded image](${blob})`);
+  assert.ok(html.includes(`href="${blob}"`));
+  assert.equal((html.match(/<img\b/g) ?? []).length, 1);
+  assert.ok(html.includes('alt="An embedded image"'));
+});
+
+test("external documents use explicit remote provenance, not the local cache path", () => {
+  const external = {
+    rawBase: `https://raw.githubusercontent.com/third-party/plugin/${revision}`,
+    filePath: "packages/canvas/docs/README.md",
+  };
+  const result = readResourceMarkdown(source.filePath, external);
+  assert.ok(result.markdownHtml.includes(
+    `src="${external.rawBase}/packages/canvas/docs/assets/preview.png"`,
+  ));
+  assert.ok(!/src(?:set)?="https:\/\/raw\.githubusercontent\.com\/github\/awesome-copilot/.test(
+    result.markdownHtml,
+  ));
+  assert.equal(
+    resolveMarkdownImage("../image.png", {
+      ...external,
+      rawBase: "https://raw.githubusercontent.com/third-party/plugin/release%2Fv1",
+    }),
+    "https://raw.githubusercontent.com/third-party/plugin/release%2Fv1/packages/canvas/image.png",
+  );
+});
+
+test("Artifact Explorer README rewrites img and both themed picture sources", () => {
+  const { markdownHtml } = readResourceMarkdown(source.filePath, source);
+  const assets = `${rawBase}/extensions/pr-artifact-explorer/assets`;
+  assert.ok(markdownHtml.includes(`src="${assets}/preview.png"`));
+  assert.ok(markdownHtml.includes(`srcset="${assets}/preview-dark.png"`));
+  assert.ok(markdownHtml.includes(`srcset="${assets}/preview.png"`));
+  assert.ok(markdownHtml.includes('alt="Artifact Explorer showing pull request workflow artifacts'));
+  assert.ok(!markdownHtml.includes("<h1"));
+  // Fallback locales reuse this render, not their URL as the source.
+  for (const route of ["/extension/pr-artifact-explorer/", "/ko-kr/extension/pr-artifact-explorer/"]) {
+    assert.equal(
+      new URL(`${assets}/preview.png`, `https://awesome-copilot.github.com${route}`).href,
+      `${assets}/preview.png`,
+    );
+  }
+});
+
+test("curated plugin parent-relative images and markdown syntax are resolved", () => {
+  const { markdownHtml } = readResourceMarkdown("plugins/napkin/README.md");
+  assert.ok(markdownHtml.includes(
+    'src="https://raw.githubusercontent.com/github/awesome-copilot/main/skills/napkin/assets/step1-activate.svg"',
+  ));
+  assert.ok(render('![A & B](assets/preview.png "Preview")').includes(
+    `src="${rawBase}/extensions/pr-artifact-explorer/assets/preview.png" alt="A &amp; B" title="Preview"`,
+  ));
+});
+
+test("file previews use each selected file path even when contents are identical", () => {
+  for (const filePath of [
+    "skills/example/docs/guide.md",
+    "skills/example/other/guide.md",
+    "cookbook/copilot-sdk/nodejs/guide.md",
+  ]) {
+    const directory = filePath.slice(0, filePath.lastIndexOf("/"));
+    assert.ok(render("![Diagram](./diagram.png)", { rawBase, filePath }).includes(
+      `src="${rawBase}/${directory}/diagram.png"`,
+    ));
+  }
+});
+
+test("srcset handles descriptors, whitespace, parent paths, and commas in URLs", () => {
+  assert.equal(
+    resolveMarkdownSrcset("assets/a.png 1x, ../b.png 2x", source),
+    `${rawBase}/extensions/pr-artifact-explorer/assets/a.png 1x, ${rawBase}/extensions/b.png 2x`,
+  );
+  assert.equal(
+    resolveMarkdownSrcset("/images/a.png 320w, https://example.com/a,b.png 640w", source),
+    "/images/a.png 320w, https://example.com/a,b.png 640w",
+  );
+  assert.equal(
+    resolveMarkdownSrcset("assets/a.png, \n assets/b.png", source),
+    `${rawBase}/extensions/pr-artifact-explorer/assets/a.png, ${rawBase}/extensions/pr-artifact-explorer/assets/b.png`,
+  );
+});
+
+test("unsafe URLs and ambiguous or escaping provenance fail explicitly", () => {
+  for (const url of [
+    "javascript:alert(1)", "data:image/png;base64,AA", "file:///tmp/a.png",
+    "vbscript:bad", "java\nscript:bad", "\\\\evil.test\\a.png", "",
+    "../../../outside.png", "%2e%2e/%2e%2e/%2e%2e/outside.png",
+  ]) {
+    assert.throws(() => resolveMarkdownImage(url, source));
+  }
+  assert.throws(() => resolveMarkdownImage("image.png", null), /no document source/);
+  for (const invalidSource of [
+    { ...source, rawBase: "https://github.com/owner/repo/tree/main" },
+    { ...source, rawBase: "https://raw.githubusercontent.com/owner/repo" },
+    { ...source, rawBase: "https://raw.githubusercontent.com/owner/repo/feature/branch" },
+    { ...source, filePath: "../README.md" },
+  ]) {
+    assert.throws(() => resolveMarkdownImage("image.png", invalidSource));
+  }
+});
+
+test("final markup stays sanitized, preserves alt/links, and isolates render sources", (t) => {
+  const warnings = [];
+  t.mock.method(console, "warn", (message) => warnings.push(message));
+  const html = render(`
+<picture><source srcset="javascript:bad 1x"><img src="javascript&#58;bad" alt="Keep me" onerror="bad()"></picture>
+<img src="data:image/png;base64,AA" alt="No data">
+<script>alert(1)</script>
+<a href="javascript:bad" target="_blank">Unsafe link</a>
+<a href="assets/preview.png" target="_blank">Ordinary image link</a>`);
+  assert.ok(!/javascript|data:image|onerror|<script/.test(html));
+  assert.ok(html.includes('alt="Keep me"'));
+  assert.ok(html.includes('href="assets/preview.png"'));
+  assert.ok(html.includes('rel="noopener noreferrer"'));
+  assert.equal(warnings.length, 3);
+  assert.ok(warnings.every((warning) => warning.includes(source.filePath)));
+  assert.ok(!render("![Missing source](relative.png)", null).includes("src="));
+  assert.ok(render("![Known source](relative.png)").includes(`src="${rawBase}/`));
+  // The Learning Hub path, which has no repository provenance, is unchanged.
+  assert.ok(sanitizeHtml('<img src="/images/learning-hub/a.png" alt="Lesson">').includes(
+    'src="/images/learning-hub/a.png"',
+  ));
+  assert.ok(sanitizeHtml('<img src="untouched.png">').includes('src="untouched.png"'));
+});
diff --git a/website/scripts/mobile-nav-regression.mjs b/website/scripts/mobile-nav-regression.mjs
new file mode 100644
index 0000000000..9d90dbcb20
--- /dev/null
+++ b/website/scripts/mobile-nav-regression.mjs
@@ -0,0 +1,122 @@
+import assert from "node:assert/strict";
+import { chromium } from "playwright";
+
+const base = process.env.SITE_BASE_URL ?? "http://127.0.0.1:4321";
+const routes = ["/", "/agents/", "/instruction/dotnet-framework/", "/learning-hub/github-copilot-app/"];
+const widths = [320, 390, 696, 768, 1024, 1199];
+const browser = await chromium.launch();
+const artwork = (markup) => markup
+  .replace(/id="(?:skills-icon|learning-hub-icon)-[^"]+"/g, 'id="icon-clip"')
+  .replace(/clip-path="url\(#[^)]+\)"/g, 'clip-path="url(#icon-clip)"');
+let checks = 0;
+
+async function assertExternalArrows(menu) {
+  for (const [name, href] of [["Hooks", "/hooks/"], ["Workflows", "/workflows/"], ["Tools", "/tools/"]]) {
+    const link = menu.getByRole("link", { name, exact: true });
+    assert.equal(await link.getAttribute("href"), href, "Keep existing external redirects");
+    const arrow = link.locator(".octicon-arrow-up-right");
+    assert.equal(await arrow.count(), 1, `${name}: external-link arrow`);
+    assert.equal(await arrow.getAttribute("aria-hidden"), "true");
+    const bounds = await arrow.boundingBox();
+    assert.equal(bounds.width, 16);
+    assert.equal(bounds.height, 16);
+  }
+  assert.equal(await menu.locator('[class*="linkContent"] .octicon-arrow-up-right:visible').count(), 3,
+    "Internal destinations do not receive external-link arrows");
+}
+
+try {
+  for (const colorScheme of ["light", "dark"]) {
+    const page = await browser.newPage({ colorScheme, deviceScaleFactor: 1.375 });
+    await page.goto(base);
+    await page.waitForFunction(() => !document.querySelector("astro-island[ssr]"));
+    const expectedIcons = await page.locator('#resources [class*="resourceCard"]').evaluateAll((cards) =>
+      Object.fromEntries(cards.map((card) => [
+        new URL(card.querySelector("a").href).pathname,
+        card.querySelector('[class*="resourceIcon"] svg').innerHTML,
+      ])),
+    );
+    for (const route of routes) {
+      for (const width of widths) {
+        await page.setViewportSize({ width, height: 568 });
+        await page.goto(new URL(route, base).href);
+        await page.waitForFunction(() => !document.querySelector("astro-island[ssr]"));
+        await page.evaluate(() => document.fonts.ready);
+        // Reserve a classic scrollbar gutter: 100vw exceeds the header by 15px.
+        await page.addStyleTag({ content: "html { scrollbar-gutter: stable; }" });
+        const trigger = page.getByLabel("Open Resources menu", { exact: true });
+        await trigger.click();
+        const menu = page.getByRole("navigation", { name: "Resources", exact: true });
+        await assertExternalArrows(menu);
+        const iconSizes = await menu.locator('[class*="linkIcon"] svg').evaluateAll((icons) =>
+          icons.map((icon) => ({ width: icon.getBoundingClientRect().width, height: icon.getBoundingClientRect().height })),
+        );
+        assert.ok(iconSizes.length > 0 && iconSizes.every(({ width, height }) => width === 16 && height === 16), "Compact 16px navigation icons");
+        assert.equal(await menu.getByRole("link", { name: "Extensions", exact: true }).getAttribute("href"), "/extensions/");
+        const bounds = await menu.evaluate((element) => {
+          const header = element.closest("header");
+          const x = (selector) => element.querySelector(selector).getBoundingClientRect().left;
+          return {
+            panel: element.getBoundingClientRect().toJSON(),
+            header: header.getBoundingClientRect().toJSON(),
+            brandX: header.querySelector("a > svg").getBoundingClientRect().left,
+            contentX: x('[class*="linkContent"]'),
+            searchX: x('[class*="inlineField"]'),
+            heartX: x('[class*="heart"]'),
+            scrollable: element.scrollHeight > element.clientHeight,
+          };
+        });
+        assert.ok(Math.abs(bounds.panel.left - bounds.header.left) <= 1, `${route} ${width}: left edge`);
+        assert.ok(Math.abs(bounds.panel.right - bounds.header.right) <= 1, `${route} ${width}: right edge`);
+        assert.ok(Math.abs(bounds.panel.top - bounds.header.bottom) <= 1, "Panel meets header border");
+        assert.ok(bounds.panel.bottom <= 569, "Menu fits the available viewport");
+        assert.ok(bounds.scrollable, "Short screens scroll the menu instead of clipping actions");
+        for (const key of ["contentX", "searchX", "heartX"]) {
+          assert.ok(Math.abs(bounds[key] - bounds.brandX) <= 1, `${route} ${width}: ${key} aligns with wordmark`);
+        }
+        assert.equal(await page.evaluate(() => document.documentElement.scrollWidth > innerWidth), false);
+        const icons = await menu.locator('[class*="mobileLink"]').evaluateAll((links) =>
+          Object.fromEntries(links.map((link) => [new URL(link.href).pathname, link.querySelector("svg").innerHTML])),
+        );
+        for (const [path, expected] of Object.entries(expectedIcons)) {
+          assert.equal(artwork(icons[path]), artwork(expected), `${path}: menu and card share artwork`);
+        }
+        const ids = await page.locator('clipPath[id^="skills-icon-"], clipPath[id^="learning-hub-icon-"]').evaluateAll((clips) =>
+          clips.map((clip) => clip.id),
+        );
+        assert.equal(new Set(ids).size, ids.length, "Repeated icons have independent clipping IDs");
+        const contribute = menu.getByRole("link", { name: "Contribute", exact: true });
+        assert.equal(await contribute.locator(".octicon-arrow-up-right").count(), 1);
+        await contribute.focus();
+        const contributeBounds = await contribute.boundingBox();
+        assert.ok(contributeBounds.y + contributeBounds.height <= 568,
+          `${route} ${width}: last action remains reachable by keyboard: ${JSON.stringify(contributeBounds)}`);
+        await page.keyboard.press("Escape");
+        assert.equal(await menu.isVisible(), false);
+        assert.equal(await trigger.evaluate((element) => element === document.activeElement), true);
+        checks++;
+      }
+    }
+    await page.setViewportSize({ width: 1440, height: 900 });
+    await page.goto(base);
+    await page.waitForFunction(() => !document.querySelector("astro-island[ssr]"));
+    const primary = page.getByRole("navigation", { name: "Primary", exact: true });
+    await primary.locator("summary:visible").click();
+    await assertExternalArrows(primary);
+    for (const [path, expected] of Object.entries(expectedIcons)) {
+      if (path === "/learning-hub/") {
+        assert.equal(await primary.locator(`a[href="${path}"]:visible svg`).count(), 0, "Desktop Learning Hub is text-only");
+        continue;
+      }
+      const icon = primary.locator(`a[href="${path}"]:visible svg`).first();
+      assert.equal(artwork(await icon.evaluate((element) => element.innerHTML)), artwork(expected), `${path}: desktop icon parity`);
+      const size = await icon.boundingBox();
+      assert.equal(size.width, 16);
+      assert.equal(size.height, 16);
+    }
+    await page.close();
+  }
+  console.log(`PASS ${checks} mobile/tablet scenarios: scrollbar gutters, padding, short screens, keyboard access, and shared icons; desktop icons match too.`);
+} finally {
+  await browser.close();
+}
diff --git a/website/scripts/reading-catalog-regression.mjs b/website/scripts/reading-catalog-regression.mjs
new file mode 100644
index 0000000000..1a487e8f16
--- /dev/null
+++ b/website/scripts/reading-catalog-regression.mjs
@@ -0,0 +1,229 @@
+import assert from "node:assert/strict";
+import { chromium } from "playwright";
+
+const baseUrl = process.env.SITE_BASE_URL ?? "http://127.0.0.1:4321";
+const browser = await chromium.launch();
+const catalogs = ["agents", "instructions", "skills", "plugins", "extensions", "learning-hub"];
+const articles = ["/instruction/a11y/", "/learning-hub/github-copilot-app/"];
+const hostSelector = '[class*="_scrollHost_"]';
+const headerSelector = "[data-reading-header]";
+let checks = 0;
+
+async function open(page, route) {
+  const response = await page.goto(new URL(route, baseUrl).href, {
+    waitUntil: "domcontentloaded",
+    timeout: 120_000,
+  });
+  assert.equal(response.status(), 200, route);
+  await page.waitForFunction(() =>
+    [...document.querySelectorAll("astro-island")].every((island) => !island.hasAttribute("ssr")),
+  );
+  await page.evaluate(() => document.fonts.ready);
+}
+
+async function catalog(page, route) {
+  await open(page, `/${route}/`);
+  const nav = page.getByRole("navigation", { name: "Pagination", exact: true });
+  await nav.scrollIntoViewIfNeeded();
+  const previous = nav.getByRole("button", { name: "Previous Page", exact: true });
+  assert.equal(await previous.getAttribute("aria-disabled"), "true");
+  const centers = await nav.locator("[rel]").evaluateAll((controls) => {
+    const center = (element) => {
+      const rect = element.getBoundingClientRect();
+      return rect.top + rect.height / 2;
+    };
+    return controls.map((control) => {
+      const text = control.querySelector('[class*="Pagination__controlText"]');
+      const arrow = control.querySelector("svg");
+      return {
+        control: center(control),
+        arrow: center(arrow),
+        text: getComputedStyle(text).display === "none" ? null : center(text),
+      };
+    });
+  });
+  for (const { control, arrow, text } of centers) {
+    assert.ok(Math.abs(control - arrow) <= 1, `${route}: arrow/control centers`);
+    if (text !== null) assert.ok(Math.abs(control - text) <= 1, `${route}: label/control centers`);
+  }
+  const next = nav.getByRole("button", { name: "Next Page", exact: true });
+  if (await next.getAttribute("aria-disabled") !== "true") {
+    await next.focus();
+    await page.keyboard.press("Enter");
+    await page.waitForFunction(() => document.activeElement?.id === "catalog");
+    assert.equal(await page.locator("#catalog").getAttribute("tabindex"), "-1");
+    assert.equal(await nav.locator('[aria-current="page"]').innerText(), "2");
+    await previous.click();
+    await page.waitForFunction(() => document.activeElement?.id === "catalog");
+    assert.equal(await nav.locator('[aria-current="page"]').innerText(), "1");
+  }
+  console.log(`PASS ${route}: pagination centers and keyboard/focus handoff`);
+  checks++;
+}
+
+async function article(page, route, desktop) {
+  await open(page, route);
+  await page.waitForFunction(() => document.querySelector("[data-reading-header]")?.dataset.visible !== undefined);
+  assert.equal(await page.locator(hostSelector).locator("h1").count(), 1);
+  const strip = page.locator(headerSelector);
+  assert.equal(await strip.locator("h1").count(), 0);
+  assert.equal(await strip.evaluate((element) => element.inert), true);
+  const title = await page.locator(hostSelector).locator("h1").evaluate((heading) => {
+    const copy = heading.cloneNode(true);
+    copy.querySelectorAll('[aria-hidden="true"]').forEach((element) => element.remove());
+    return copy.textContent.trim();
+  });
+  assert.equal(await strip.locator("[title]").getAttribute("title"), title);
+  const initial = await page.locator(hostSelector).evaluate((host) => ({
+    height: host.scrollHeight,
+    boundary: host.querySelector("h1").closest("section").getBoundingClientRect().bottom -
+      host.getBoundingClientRect().top + host.scrollTop -
+      host.querySelector("[data-reading-header]").firstElementChild.offsetHeight,
+  }));
+
+  if (desktop) {
+    // Cross the observer boundary in both directions. Neither visibility change
+    // may change document height or the requested scroll position.
+    for (const delta of [-2, 2, -2, 2]) {
+      const requested = initial.boundary + delta;
+      await page.locator(hostSelector).evaluate((host, top) => { host.scrollTop = top; }, requested);
+      await page.waitForFunction(({ expected }) =>
+        document.querySelector("[data-reading-header]").dataset.visible === String(expected),
+      { expected: delta > 0 });
+      const geometry = await page.locator(hostSelector).evaluate((host) => ({
+        top: host.scrollTop, height: host.scrollHeight,
+      }));
+      assert.ok(Math.abs(geometry.top - requested) <= 1, `${route}: no transition scroll jump`);
+      assert.equal(geometry.height, initial.height, `${route}: stable flow height`);
+    }
+    const rect = await strip.locator(":scope > div").boundingBox();
+    assert.ok(rect.height <= 64, `${route}: compact title <=64px`);
+    assert.ok(rect.y + rect.height <= 144, `${route}: combined chrome <=144px`);
+    console.log(`PASS ${route}: strip ${rect.height}px, combined chrome ${rect.y + rect.height}px`);
+  } else {
+    await page.evaluate(() => window.scrollTo(0, 900));
+    assert.equal(await strip.isVisible(), false);
+  }
+
+  const toc = page.getByRole("navigation", { name: "In this article", exact: true });
+  const hasToc = await toc.count() > 0;
+  const targetLink = hasToc ? toc.locator("a").nth(2) : null;
+  const target = targetLink
+    ? await targetLink.getAttribute("href")
+    : `#${await page.locator("article h2[id]").nth(2).getAttribute("id")}`;
+  if (targetLink) await targetLink.click();
+  else await page.evaluate((hash) => { window.location.hash = hash; }, target);
+  const targetTop = await page.locator(target).evaluate((element) => element.getBoundingClientRect().top);
+  const chromeBottom = desktop
+    ? await strip.locator(":scope > div").evaluate((element) => element.getBoundingClientRect().bottom)
+    : 0;
+  assert.ok(targetTop >= chromeBottom, `${route}: anchor clears reading chrome`);
+  if (targetLink) assert.equal(await targetLink.getAttribute("aria-current"), "true");
+
+  await page.locator(hostSelector).evaluate((host) => {
+    if (matchMedia("(min-width: 75rem)").matches) host.scrollTop = host.scrollHeight;
+    else window.scrollTo(0, document.documentElement.scrollHeight);
+  });
+  await page.waitForFunction(() => document.querySelector('[data-burst="true"]'));
+  const reduced = await page.locator('[data-burst="true"]').first().evaluate((rider) => ({
+    transition: getComputedStyle(rider).transitionProperty,
+    animation: getComputedStyle(rider.querySelector('[class*="_confettiPiece_"]')).animationName,
+  }));
+  assert.equal(reduced.transition, "none", `${route}: reduced-motion rider`);
+  assert.equal(reduced.animation, "none", `${route}: reduced-motion completion`);
+  const back = page.getByRole("button", { name: "Back to top" });
+  await back.click();
+  await page.waitForFunction(() => document.activeElement?.tagName === "H1");
+  const scroll = await page.locator(hostSelector).evaluate((host) => ({ internal: host.scrollTop, window: window.scrollY }));
+  assert.equal(desktop ? scroll.internal : scroll.window, 0);
+  await page.waitForFunction(() => !document.querySelector('[data-burst="true"]'));
+  assert.equal(await strip.isVisible(), false);
+  await page.goto("about:blank");
+  await open(page, `${route}${target}`);
+  await page.waitForFunction(() => {
+    const target = document.querySelector(":target");
+    const header = document.querySelector("[data-reading-header]");
+    if (!target || header?.dataset.visible === undefined) return false;
+    const top = target.getBoundingClientRect().top;
+    const bottom = header.dataset.visible === "true"
+      ? header.firstElementChild.getBoundingClientRect().bottom : 0;
+    return top >= bottom && top < window.innerHeight / 2;
+  });
+  checks++;
+}
+
+try {
+  for (const colorScheme of ["light", "dark"]) {
+    for (const viewport of [{ width: 1440, height: 900 }, { width: 390, height: 844 }]) {
+      const page = await browser.newPage({ viewport, colorScheme, reducedMotion: "reduce" });
+      for (const route of catalogs) await catalog(page, route);
+      for (const route of articles) await article(page, route, viewport.width >= 1200);
+      await page.close();
+    }
+  }
+  for (const route of articles) {
+    const page = await browser.newPage({ viewport: { width: 1440, height: 500 }, reducedMotion: "reduce" });
+    await open(page, route);
+    await page.locator(hostSelector).evaluate((host) => { host.scrollTop = 800; });
+    await page.waitForFunction(() => document.querySelector("[data-reading-header]")?.dataset.visible === "false");
+    assert.equal(await page.locator(headerSelector).isVisible(), false, `${route}: short viewport releases title`);
+    await page.setViewportSize({ width: 1440, height: 900 });
+    await page.waitForFunction(() => document.querySelector("[data-reading-header]")?.dataset.visible === "true");
+    await page.evaluate(() => { document.documentElement.style.fontSize = "32px"; });
+    await page.waitForFunction(() => document.querySelector("[data-reading-header]")?.dataset.visible === "false");
+    assert.equal(await page.locator(headerSelector).isVisible(), false, `${route}: enlarged text releases title`);
+    await page.close();
+    checks++;
+  }
+  for (const route of articles) {
+    const page = await browser.newPage({ viewport: { width: 1280, height: 900 }, reducedMotion: "no-preference" });
+    await open(page, route);
+    await page.waitForFunction(() => document.querySelector("[data-reading-header]")?.dataset.visible !== undefined);
+    await page.waitForFunction(() => {
+      const heading = document.querySelector("h1");
+      const typed = heading.querySelector('[aria-hidden="true"]');
+      return !typed || typed.textContent === document.querySelector("[data-reading-header] [title]").textContent;
+    });
+    await page.waitForFunction(() => document.querySelector("h1").closest("section")
+      .getAnimations({ subtree: true }).every((animation) => animation.playState === "finished"));
+    await page.evaluate(() => {
+      window.readingLayoutShift = 0;
+      new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+          if (!entry.hadRecentInput) window.readingLayoutShift += entry.value;
+        }
+      }).observe({ type: "layout-shift" });
+    });
+    await page.locator(hostSelector).evaluate((host) => { host.scrollTop = host.scrollHeight; });
+    await page.waitForFunction(() => document.querySelector('[data-reading-header] [data-burst="true"]'));
+    const motion = await page.locator(headerSelector).evaluate((header) => ({
+      animation: getComputedStyle(header.querySelector('[class*="_confettiPiece_"]')).animationName,
+      lineTransition: getComputedStyle(header.firstElementChild, "::after").transitionDuration,
+      lineWidth: parseFloat(getComputedStyle(header.firstElementChild, "::after").width),
+    }));
+    assert.notEqual(motion.animation, "none", `${route}: original completion animation retained`);
+    assert.notEqual(motion.lineTransition, "0s", `${route}: progress interpolation retained`);
+    assert.ok(motion.lineWidth > 0, `${route}: green progress rule visible`);
+    await page.getByRole("button", { name: "Back to top" }).click();
+    await page.waitForFunction(() => document.querySelector('[class*="_scrollHost_"]').scrollTop === 0);
+    const cls = await page.evaluate(() => window.readingLayoutShift);
+    assert.ok(cls < 0.01, `${route}: local transition layout-shift budget (not field CWV): ${cls}`);
+    await page.setViewportSize({ width: 1024, height: 900 });
+    await page.emulateMedia({ reducedMotion: "reduce" });
+    await page.evaluate(() => window.scrollTo(0, 900));
+    await page.waitForFunction(() => window.scrollY > 0);
+    assert.equal(await page.locator(headerSelector).isVisible(), false, `${route}: tablet title released`);
+    const columns = await page.locator('[class*="_layout_"]').first().evaluate((element) =>
+      getComputedStyle(element).gridTemplateColumns.split(" ").length,
+    );
+    assert.equal(columns, 1, `${route}: tablet sidebar moves into document flow`);
+    await page.getByRole("button", { name: "Back to top" }).click();
+    await page.waitForFunction(() => window.scrollY === 0);
+    console.log(`PASS ${route}: normal progress/completion motion, transition CLS=${cls}, tablet document scrolling`);
+    await page.close();
+    checks++;
+  }
+  console.log(`Passed ${checks} reading/catalog scenarios (light/dark, desktop/tablet/mobile, motion, short viewport, enlarged text).`);
+} finally {
+  await browser.close();
+}
diff --git a/website/scripts/reading-header-regression.mjs b/website/scripts/reading-header-regression.mjs
new file mode 100644
index 0000000000..c0ef59c9ef
--- /dev/null
+++ b/website/scripts/reading-header-regression.mjs
@@ -0,0 +1,134 @@
+import assert from "node:assert/strict";
+import { chromium } from "playwright";
+
+const base = process.env.SITE_BASE_URL ?? "http://127.0.0.1:4321";
+const routes = [
+  "/instruction/dotnet-framework/",
+  "/agent/accessibility/",
+  "/plugin/accessibility-kanban/",
+  "/extension/pr-artifact-explorer/",
+  "/skill/acquire-codebase-knowledge/",
+  "/learning-hub/github-copilot-app/",
+];
+const browser = await chromium.launch();
+try {
+  for (const colorScheme of ["light", "dark"]) {
+    const page = await browser.newPage({ colorScheme, viewport: { width: 1440, height: 900 } });
+    for (const route of routes) {
+      await page.goto(new URL(route, base).href);
+      await page.waitForFunction(() => !document.querySelector("astro-island[ssr]"));
+      await page.evaluate(() => document.fonts.ready);
+      const header = page.locator("[data-reading-header]");
+      const host = page.locator('[class*="_scrollHost_"]');
+      const geometry = await host.evaluate((element) => ({
+        height: element.scrollHeight,
+        boundary: element.querySelector("h1").closest("section").getBoundingClientRect().bottom -
+          element.getBoundingClientRect().top + element.scrollTop -
+          element.querySelector("[data-reading-header]").firstElementChild.offsetHeight,
+      }));
+      assert.equal(await header.evaluate((element) => element.inert), true);
+      const samples = [];
+      for (const delta of [-4, 1, 8, 30, 65]) {
+        const requested = Math.ceil(geometry.boundary + delta);
+        await host.evaluate((element, top) => element.scrollTo({ top, behavior: "instant" }), requested);
+        await page.waitForFunction((visible) =>
+          document.querySelector("[data-reading-header]").dataset.visible === String(visible), delta > 0);
+        await page.waitForTimeout(220);
+        const state = await host.evaluate((element) => {
+          const strip = element.querySelector("[data-reading-header]");
+          const bounds = strip.firstElementChild.getBoundingClientRect();
+          return {
+            top: element.scrollTop, height: element.scrollHeight,
+            headerTop: bounds.top, headerHeight: bounds.height, rootTop: element.getBoundingClientRect().top,
+            opacity: getComputedStyle(strip.firstElementChild).opacity,
+          };
+        });
+        assert.equal(state.height, geometry.height, `${route}: no flow-height change`);
+        assert.ok(Math.abs(state.top - requested) <= 1, `${route}: no scroll jump`);
+        if (delta > 0) {
+          assert.equal(state.opacity, "1", `${route}: title visible before expanded hero leaves`);
+          assert.equal(state.headerTop, state.rootTop, `${route}: strip stays pinned`);
+          assert.ok(state.headerHeight <= 64);
+          samples.push(state.headerHeight);
+        }
+      }
+      assert.equal(new Set(samples).size, 1, `${route}: no compact-height bounce`);
+      const action = header.locator("[data-reading-action] a, [data-reading-action] button");
+      if (!route.startsWith("/learning-hub")) {
+        assert.equal(await action.count(), 1, `${route}: primary install action remains available`);
+        const actionBox = await action.boundingBox();
+        const titleBox = await header.locator("[title]").boundingBox();
+        assert.ok(actionBox.x >= titleBox.x + titleBox.width);
+        const topActionBox = await page.getByRole("navigation", { name: "Primary", exact: true })
+          .getByRole("link", { name: "Contribute", exact: true }).boundingBox();
+        assert.ok(Math.abs(actionBox.x + actionBox.width - topActionBox.x - topActionBox.width) <= 1,
+          `${route}: compact action shares the top bar's right edge`);
+        const original = page.locator("[data-hero-actions] a, [data-hero-actions] button").first();
+        assert.equal(await action.getAttribute("href"), await original.getAttribute("href"));
+        assert.equal(await page.locator("[data-hero-actions]").evaluate((element) => element.inert), true);
+        if (route.startsWith("/skill/")) {
+          await page.context().grantPermissions(["clipboard-read", "clipboard-write"]);
+          const command = (await page.locator("section pre").first().innerText()).trimEnd();
+          await action.click();
+          await page.waitForFunction(() =>
+            document.querySelector("[data-reading-action] button")?.textContent.includes("Copied"),
+          );
+          assert.equal(await page.evaluate(() => navigator.clipboard.readText()), command);
+          assert.equal(await header.evaluate((element) => element.inert), false, "Copy feedback keeps compact action accessible");
+        }
+        await action.focus();
+        await host.evaluate((element) => element.scrollTo({ top: 0, behavior: "instant" }));
+        await page.waitForTimeout(80);
+        assert.equal(await header.getAttribute("data-visible"), "true", "Focused action does not disappear");
+        await page.locator("#main-content").focus();
+        await page.waitForFunction(() => document.querySelector("[data-reading-header]").dataset.visible === "false");
+      }
+
+      const finish = await host.evaluate((element) =>
+        element.querySelector("[data-reading-content]").getBoundingClientRect().bottom -
+        element.getBoundingClientRect().top + element.scrollTop - element.clientHeight,
+      );
+      await host.evaluate((element, top) => element.scrollTo({ top, behavior: "instant" }), Math.max(0, Math.floor(finish) - 3));
+      await page.waitForTimeout(50);
+      assert.equal(await header.locator('[data-burst="true"]').count(), 0, `${route}: not before article end`);
+      await host.evaluate((element, top) => element.scrollTo({ top, behavior: "instant" }), Math.ceil(finish) + 1);
+      await page.waitForFunction(() => document.querySelector('[data-reading-header] [data-burst="true"]'));
+      const completion = await host.evaluate((element) => ({
+        beforeFooter: element.scrollTop < element.scrollHeight - element.clientHeight,
+        animation: getComputedStyle(element.querySelector('[data-reading-header] [class*="_confettiPiece_"]')).animationName,
+      }));
+      assert.equal(completion.beforeFooter, true, `${route}: celebrate without scrolling to footer`);
+      assert.notEqual(completion.animation, "none");
+      if (await action.count()) await action.focus();
+
+      for (const width of [1024, 390, 320]) {
+        await page.setViewportSize({ width, height: 844 });
+        await page.evaluate(() => window.scrollTo({ top: 900, behavior: "instant" }));
+        await page.waitForFunction(() => document.querySelector("[data-reading-header]").inert);
+        assert.equal(await header.locator(":scope > div").isVisible(), false);
+        const overflow = await page.evaluate(() => ({
+          width: document.documentElement.scrollWidth,
+          elements: [...document.querySelectorAll("body *")].filter((element) =>
+            element.getBoundingClientRect().right > innerWidth + 1 &&
+            getComputedStyle(element).visibility !== "hidden",
+          ).slice(0, 8).map((element) => `${element.tagName}.${element.className}`),
+        }));
+        assert.ok(overflow.width <= width, `${route}: no mobile overflow at ${width}px: ${JSON.stringify(overflow)}`);
+        assert.equal(await page.locator("[data-hero-actions]").evaluateAll((elements) => elements.some((element) => element.inert)), false);
+        assert.equal(await header.evaluate((element) => element.contains(document.activeElement)), false);
+        if (route.startsWith("/instruction/")) {
+          const trigger = page.locator("[data-hero-actions] button[aria-haspopup]");
+          await trigger.click();
+          await page.getByRole("menuitem", { name: "Install in VS Code Insiders", exact: true }).waitFor();
+          await page.keyboard.press("Escape");
+          assert.equal(await trigger.getAttribute("aria-expanded"), "false", "Mobile install menu dismisses with Escape");
+        }
+      }
+      await page.setViewportSize({ width: 1440, height: 900 });
+      console.log(`PASS ${colorScheme} ${route}: stable handoff, primary action, article-end confetti, tablet/mobile`);
+    }
+    await page.close();
+  }
+} finally {
+  await browser.close();
+}
diff --git a/website/scripts/resource-card-layout-regression.mjs b/website/scripts/resource-card-layout-regression.mjs
new file mode 100644
index 0000000000..303e1b9cc4
--- /dev/null
+++ b/website/scripts/resource-card-layout-regression.mjs
@@ -0,0 +1,83 @@
+import assert from "node:assert/strict";
+import { chromium } from "playwright";
+
+const base = process.env.SITE_BASE_URL ?? "http://127.0.0.1:4321";
+const widths = [320, 390, 543, 544, 682, 696, 767, 768, 1024, 1279, 1280, 1366, 1439, 1440, 1919, 1920, 2560];
+const browser = await chromium.launch();
+
+try {
+  for (const colorScheme of ["light", "dark"]) {
+    const page = await browser.newPage({ colorScheme, reducedMotion: "reduce", deviceScaleFactor: 1.375 });
+    for (const width of widths) {
+      await page.setViewportSize({ width, height: 900 });
+      await page.goto(base);
+      await page.waitForFunction(() => !document.querySelector("astro-island[ssr]"));
+      await page.evaluate(() => document.fonts.ready);
+      await page.addStyleTag({ content: "html { scrollbar-gutter: stable; }" });
+      const homeFrame = await page.locator('[class*="heroFrameInner"]').boundingBox();
+      const frameSelectors = [
+        '#resources [class*="Grid-module__Grid___"]',
+        '[class*="ctaFrameInner"]',
+        ...(width >= 768 ? ['nav[aria-label="Primary"]'] : []),
+      ];
+      for (const selector of frameSelectors) {
+        const frame = await page.locator(selector).boundingBox();
+        assert.ok(Math.abs(frame.x - homeFrame.x) < 1, `${width}px: ${selector} aligns with the hero`);
+        assert.ok(Math.abs(frame.width - homeFrame.width) < 1, `${width}px: ${selector} matches the hero width`);
+      }
+      const cards = page.locator('#resources [class*="resourceCard"]');
+      const columns = await cards.evaluateAll((elements) =>
+        new Set(elements.map((element) => Math.round(element.getBoundingClientRect().left))).size,
+      );
+      assert.equal(columns, width < 768 ? 1 : width < 1280 ? 2 : 3, `${width}px: responsive column count`);
+      for (const card of await cards.all()) {
+        await card.getByRole("link").focus();
+        const result = await card.evaluate((element) => {
+          const label = element.querySelector('[class*="Card__actionLabel___"]');
+          const action = element.querySelector('[class*="Card__action___"]');
+          const labelBounds = label.getBoundingClientRect();
+          const actionBounds = action.getBoundingClientRect();
+          const circleBounds = action.querySelector('[class*="Card__actionIcon--arrowOnly"]').getBoundingClientRect();
+          const cardBounds = element.getBoundingClientRect();
+          return {
+            text: label.textContent,
+            labelHeight: labelBounds.height,
+            lineHeight: parseFloat(getComputedStyle(label).lineHeight),
+            textWidth: label.scrollWidth,
+            availableWidth: label.clientWidth,
+            labelLeft: labelBounds.left,
+            labelRight: labelBounds.right,
+            actionLeft: actionBounds.left,
+            actionRight: actionBounds.right,
+            circleRight: circleBounds.right,
+            endRadius: actionBounds.height / 2,
+            cardRight: cardBounds.right,
+            fontSize: getComputedStyle(label).fontSize,
+          };
+        });
+        const message = `${colorScheme} ${width}px ${result.text}`;
+        assert.ok(result.labelHeight <= result.lineHeight + 1, `${message}: single-line label`);
+        assert.ok(result.textWidth <= result.availableWidth + 1, `${message}: no clipping or ellipsis`);
+        assert.ok(result.actionRight <= result.cardRight, `${message}: action stays in its card`);
+        assert.ok(result.labelRight < result.actionRight, `${message}: label stays within the control`);
+        assert.ok(result.labelLeft - result.actionLeft >= result.endRadius, `${message}: text clears the left curve`);
+        assert.ok(result.actionRight - result.labelRight >= result.endRadius, `${message}: text clears the right curve`);
+        assert.ok(result.actionRight - result.circleRight >= 4 && result.actionRight - result.circleRight <= 6,
+          `${message}: chevron circle keeps its original inset at the right edge`);
+        assert.equal(result.fontSize, "16px", `${message}: preserve readable button type`);
+        await card.getByRole("link").evaluate((element) => element.blur());
+      }
+      assert.equal(await page.evaluate(() => document.documentElement.scrollWidth > innerWidth), false);
+      await page.goto(new URL("agents/", base).href);
+      await page.waitForFunction(() => !document.querySelector("astro-island[ssr]"));
+      await page.addStyleTag({ content: "html { scrollbar-gutter: stable; }" });
+      const catalogFrame = await page.locator('[class*="heroInner"]').boundingBox();
+      assert.ok(Math.abs(homeFrame.x - catalogFrame.x) < 1, `${width}px: homepage and catalog share the same inset`);
+      assert.ok(Math.abs(homeFrame.width - catalogFrame.width) < 1, `${width}px: homepage and catalog share the same width`);
+    }
+    await page.close();
+  }
+  console.log(`PASS ${widths.length * 2} responsive layouts: consistent homepage/catalog frames, correct columns, and single-line CTA labels from 320px to 2560px.`);
+} finally {
+  await browser.close();
+}
diff --git a/website/scripts/search-browser.test.mjs b/website/scripts/search-browser.test.mjs
new file mode 100644
index 0000000000..444a18cfd8
--- /dev/null
+++ b/website/scripts/search-browser.test.mjs
@@ -0,0 +1,321 @@
+// After the production website build:
+// node --test website/scripts/search-browser.test.mjs
+// SEARCH_DIST can point at an isolated production build.
+// SEARCH_BASE_URL can exercise a running dev client against that production index.
+// Set only SEARCH_BASE_URL to test an existing server without starting another.
+import assert from "node:assert/strict";
+import { after, before, test } from "node:test";
+import { createServer } from "node:http";
+import { readFile, stat } from "node:fs/promises";
+import { extname, resolve, sep } from "node:path";
+import { fileURLToPath } from "node:url";
+import { chromium } from "playwright";
+
+const root = process.env.SEARCH_DIST || fileURLToPath(new URL("../dist/", import.meta.url));
+const types = { ".html": "text/html", ".js": "text/javascript", ".css": "text/css",
+  ".json": "application/json", ".wasm": "application/wasm", ".svg": "image/svg+xml" };
+let server;
+let browser;
+let base;
+let productionBase;
+const iconArtwork = (markup) => markup
+  .replace(/id="(?:skills-icon|learning-hub-icon)-[^"]+"/g, 'id="icon-clip"')
+  .replace(/clip-path="url\(#[^)]+\)"/g, 'clip-path="url(#icon-clip)"');
+
+before(async () => {
+  if (process.env.SEARCH_BASE_URL && !process.env.SEARCH_DIST) {
+    base = process.env.SEARCH_BASE_URL;
+    browser = await chromium.launch({ headless: true });
+    return;
+  }
+  await stat(resolve(root, "pagefind", "pagefind.js"));
+  server = createServer(async (request, response) => {
+    try {
+      let path = resolve(root, `.${decodeURIComponent(new URL(request.url, "http://localhost").pathname)}`);
+      if (path !== resolve(root) && !path.startsWith(`${resolve(root)}${sep}`)) {
+        response.writeHead(403).end();
+        return;
+      }
+      if ((await stat(path)).isDirectory()) path = resolve(path, "index.html");
+      response.setHeader("Content-Type", types[extname(path)] || "application/octet-stream");
+      response.end(await readFile(path));
+    } catch (error) {
+      response.writeHead(error.code === "ENOENT" ? 404 : 500).end(String(error));
+    }
+  });
+  await new Promise((resolve) => server.listen(0, "127.0.0.1", resolve));
+  productionBase = `http://127.0.0.1:${server.address().port}`;
+  base = process.env.SEARCH_BASE_URL || productionBase;
+  browser = await chromium.launch({ headless: true });
+});
+
+async function connectProductionIndex(page) {
+  if (!process.env.SEARCH_BASE_URL || !productionBase) return;
+  await page.route("**/pagefind/**", async (route) => {
+    const response = await route.fetch({
+      url: `${productionBase}${new URL(route.request().url()).pathname}`,
+    });
+    await route.fulfill({ response });
+  });
+}
+
+async function assertGroupIcon(result, expectedArtwork) {
+  await result.waitFor();
+  assert.equal(await result.locator("svg").count(), 0, "No repeated icon on individual results");
+  assert.equal(await result.locator('[class*="resultContext"]').count(), 0, "No repeated type label");
+  const group = result.locator("..");
+  const icon = group.locator(':scope > p [aria-hidden="true"] svg');
+  await icon.waitFor();
+  assert.equal(await icon.count(), 1);
+  assert.equal(iconArtwork(await icon.evaluate((element) => element.innerHTML)), iconArtwork(expectedArtwork));
+  const size = await icon.boundingBox();
+  assert.equal(size.width, 16);
+  assert.equal(size.height, 16);
+  const title = await result.locator('[class*="resultText"]').boundingBox();
+  assert.ok(Math.abs(title.x - size.x - 24) <= 1, "Result titles align with the group heading text");
+  assert.ok(title.y > size.y, "Category icon belongs above the results");
+}
+
+after(async () => {
+  await browser?.close();
+  if (server) await new Promise((resolve) => server.close(resolve));
+});
+
+async function searchData(page, term) {
+  return page.evaluate(async (term) => {
+    const pagefind = await import("/pagefind/pagefind.js");
+    const response = await pagefind.search(term);
+    return Promise.all(response.results.map(async (hit) => {
+      const data = await hit.data();
+      return { id: hit.id, url: data.url, meta: data.meta };
+    }));
+  }, term);
+}
+
+test("production Pagefind has one canvas and one plugin identity, not fallback/custom copies", async () => {
+  const page = await browser.newPage();
+  try {
+    await connectProductionIndex(page);
+    await page.goto(base);
+    await page.waitForFunction(() =>
+      [...document.querySelectorAll('astro-island[client="load"]')]
+        .every((island) => !island.hasAttribute("ssr")),
+    );
+    const hits = await searchData(page, "Artifact Explorer");
+    for (const type of ["extension", "plugin"]) {
+      const matches = hits.filter((hit) => hit.url === `/${type}/pr-artifact-explorer/`);
+      assert.equal(matches.length, 1, JSON.stringify(hits));
+      assert.equal(matches[0].meta.locale, "en");
+      assert.equal(matches[0].meta.canonical, matches[0].url);
+      assert.ok(matches[0].meta.description);
+    }
+    assert.ok(hits.every((hit) => !/^\/(ko-kr|es-es|ja-jp|pt-br|zh-cn)\//.test(hit.url)));
+    assert.equal(new Set(hits.map((hit) => hit.meta.canonical)).size, hits.length);
+    console.log(`Artifact Explorer: ${hits.length} distinct English destinations; one canvas and one plugin.`);
+  } finally {
+    await page.close();
+  }
+});
+
+test("the real Spanish workshop remains searchable with its language context", async () => {
+  const page = await browser.newPage();
+  try {
+    await connectProductionIndex(page);
+    await page.goto(`${base}/es-es/learning-hub/copilot-workshops/app/`);
+    assert.equal(await page.locator("html").getAttribute("lang"), "es-es");
+    const hits = await searchData(page, "Copilot");
+    assert.ok(hits.some((hit) => hit.url === "/es-es/learning-hub/copilot-workshops/app/"));
+    assert.ok(hits.every((hit) => hit.meta.locale === "es-es"));
+    console.log(`Spanish Copilot search: ${hits.length} translated destinations preserved.`);
+  } finally {
+    await page.close();
+  }
+});
+
+for (const withIndex of [true, false]) {
+  for (const width of [1440, 390]) {
+    for (const [route, language, query] of [
+      ["/es-es/learning-hub/copilot-workshops/app/", "es-es", "Copilot"],
+      ["/ko-kr/extension/pr-artifact-explorer/", "en", "Artifact Explorer"],
+    ]) {
+      test(`content-language search: ${language}, ${width}px, Pagefind ${withIndex}`, async () => {
+        const page = await browser.newPage({ viewport: { width, height: 900 }, reducedMotion: "reduce" });
+        try {
+          if (withIndex) await connectProductionIndex(page);
+          else await page.route("**/pagefind/**", (route) => route.abort());
+          await page.goto(`${base}${route}`);
+          await page.waitForFunction(() => !document.querySelector("astro-island[ssr]"));
+          assert.equal(await page.locator("html").getAttribute("lang"), language);
+          const trigger = page.locator('button[aria-label="Search"]:visible');
+          if (await trigger.count()) await trigger.click();
+          else await page.getByLabel("Open Resources menu", { exact: true }).click();
+          const input = page.locator('input[role="combobox"]:visible').first();
+          await input.fill(query);
+          const results = page.getByRole("listbox", { name: "Search results" });
+          if (language === "es-es" && !withIndex) {
+            await results.getByRole("status").filter({ hasText: "No results" }).waitFor();
+            assert.equal(await results.getByRole("option").count(), 0);
+          } else {
+            await results.getByRole("option").first().waitFor();
+            const hrefs = await results.getByRole("option").evaluateAll((links) =>
+              links.map((link) => link.getAttribute("href")),
+            );
+            assert.equal(new Set(hrefs).size, hrefs.length);
+            if (language === "es-es") {
+              assert.ok(hrefs.every((href) => href.startsWith("/es-es/")), JSON.stringify(hrefs));
+            } else {
+              assert.ok(hrefs.includes("/extension/pr-artifact-explorer/"));
+              assert.ok(hrefs.every((href) => !/^\/[a-z]{2}-[a-z]{2}\//i.test(href)), JSON.stringify(hrefs));
+            }
+          }
+        } finally {
+          await page.close();
+        }
+      });
+    }
+  }
+}
+
+for (const colorScheme of ["light", "dark"]) {
+  for (const viewport of [
+    { width: 1440, height: 900 }, { width: 1280, height: 600 },
+    { width: 768, height: 1024 }, { width: 390, height: 844 },
+  ]) {
+    test(`typed keyboard search: ${colorScheme}, ${viewport.width}x${viewport.height}`, async () => {
+      const context = await browser.newContext({ colorScheme, viewport, reducedMotion: "reduce" });
+      const page = await context.newPage();
+      page.setDefaultTimeout(10_000);
+      try {
+        await connectProductionIndex(page);
+        await page.goto(base);
+        await page.waitForFunction(() =>
+          [...document.querySelectorAll('astro-island[client="load"]')]
+            .every((island) => !island.hasAttribute("ssr")),
+        );
+        await page.evaluate(() => new Promise((resolve) =>
+          requestAnimationFrame(() => requestAnimationFrame(resolve)),
+        ));
+        const expectedIcons = await page.locator('#resources [class*="resourceCard"]').evaluateAll((cards) =>
+          Object.fromEntries(cards.map((card) => [
+            new URL(card.querySelector("a").href).pathname,
+            card.querySelector('[class*="resourceIcon"] svg').innerHTML,
+          ])),
+        );
+        const trigger = page.locator('button[aria-label="Search"]:visible');
+        const desktop = await trigger.count() > 0;
+        if (desktop) {
+          await trigger.click();
+        } else {
+          await page.getByLabel("Open Resources menu").click();
+        }
+        const input = page.locator('input[role="combobox"]:visible').first();
+        await input.waitFor();
+        if (desktop) {
+          await input.press("Escape");
+          await page.locator('button[aria-label="Search"]:focus').waitFor();
+          await page.keyboard.press("Control+k");
+          await input.waitFor();
+        }
+        const results = page.getByRole("listbox", { name: "Search results" });
+        for (const [query, href, catalog] of [
+          [".NET Self Learning Architect", "/agent/dotnet-self-learning-architect/", "/agents/"],
+          [".NET Framework Upgrade Specialist", "/instruction/dotnet-upgrade/", "/instructions/"],
+          ["Acquire Codebase Knowledge", "/skill/acquire-codebase-knowledge/", "/skills/"],
+          ["Working with Canvas Extensions", "/learning-hub/working-with-canvas-extensions/", "/learning-hub/"],
+        ]) {
+          await input.fill(query);
+          await assertGroupIcon(results.locator(`a[href="${href}"]`), expectedIcons[catalog]);
+          const clipIds = await page.locator('clipPath[id^="skills-icon-"], clipPath[id^="learning-hub-icon-"]').evaluateAll((clips) =>
+            clips.map((clip) => clip.id),
+          );
+          assert.equal(new Set(clipIds).size, clipIds.length, "Search artwork keeps independent clipping IDs");
+        }
+        await input.fill("Artifact Explorer");
+        await results.locator('a[href="/extension/pr-artifact-explorer/"]').waitFor();
+        await results.locator('a[href="/plugin/pr-artifact-explorer/"]').waitFor();
+        const options = results.getByRole("option");
+        const hrefs = await options.evaluateAll((elements) => elements.map((element) => element.getAttribute("href")));
+        assert.equal(new Set(hrefs).size, hrefs.length);
+        assert.ok(hrefs.length <= 8);
+        const canvas = results.locator('a[href="/extension/pr-artifact-explorer/"]');
+        assert.match(await canvas.innerText(), /^Artifact Explorer\n.+/);
+        for (const type of ["extension", "plugin"]) {
+          await assertGroupIcon(results.locator(`a[href="/${type}/pr-artifact-explorer/"]`), expectedIcons[`/${type}s/`]);
+        }
+        assert.equal(await results.getByRole("group", { name: "Plugins", exact: true }).count(), 1);
+        assert.equal(await results.getByRole("group", { name: "Extensions", exact: true }).count(), 1);
+        const sections = await results.evaluate((listbox) =>
+          [...listbox.querySelectorAll('[role="group"]')].map((group) => {
+            const style = getComputedStyle(group);
+            const heading = group.querySelector("p");
+            const headingStyle = getComputedStyle(heading);
+            return {
+              dividerWidth: parseFloat(style.borderBlockStartWidth),
+              dividerStyle: style.borderBlockStartStyle,
+              weight: Number(headingStyle.fontWeight),
+              semibold: Number(headingStyle.getPropertyValue("--brand-text-weight-semibold")),
+              normal: Number(headingStyle.getPropertyValue("--brand-text-weight-normal")),
+            };
+          }),
+        );
+        assert.ok(sections.every((section) => section.weight === section.semibold && section.weight > section.normal),
+          "Group headings use Primer's stronger semantic weight");
+        assert.equal(sections[0].dividerWidth, 0, "No stray divider above the first group");
+        assert.ok(sections.slice(1).every((section) => section.dividerWidth > 0 && section.dividerStyle === "solid"),
+          "Solid dividers separate result groups");
+        await canvas.hover();
+        const highlight = await canvas.evaluate((row) => {
+          const listbox = row.closest('[role="listbox"]');
+          const box = listbox.getBoundingClientRect();
+          const bounds = row.getBoundingClientRect();
+          return {
+            left: bounds.left, width: bounds.width,
+            expectedLeft: box.left + listbox.clientLeft,
+            expectedWidth: listbox.clientWidth,
+            background: getComputedStyle(row).backgroundColor,
+          };
+        });
+        assert.ok(Math.abs(highlight.left - highlight.expectedLeft) <= 1, "Hover starts at the panel's inner edge");
+        assert.ok(Math.abs(highlight.width - highlight.expectedWidth) <= 1, "Hover spans the full panel width");
+        assert.notEqual(highlight.background, "rgba(0, 0, 0, 0)", "Full-row hover is visibly filled");
+        await page.mouse.move(0, 0);
+        const bounds = await canvas.boundingBox();
+        assert.ok(bounds.x >= 0 && bounds.x + bounds.width <= viewport.width + 1);
+        await input.press("ArrowDown");
+        const activeId = await input.getAttribute("aria-activedescendant");
+        assert.equal(await page.locator(`[id="${activeId}"]`).getAttribute("aria-selected"), "true");
+        assert.equal(await page.locator(`[id="${activeId}"]`).evaluate((row) => getComputedStyle(row).backgroundColor),
+          highlight.background, "Keyboard selection uses the same full-row highlight");
+        await input.fill("copilot");
+        await results.getByRole("option").first().waitFor();
+        for (const key of ["End", "Home", ...Array(8).fill("ArrowDown"), "ArrowUp"]) {
+          await input.press(key);
+          const selectedId = await input.getAttribute("aria-activedescendant");
+          const visible = await page.locator(`[id="${selectedId}"]`).evaluate((row) => {
+            const bounds = row.getBoundingClientRect();
+            let top = 0;
+            let bottom = innerHeight;
+            for (let parent = row.parentElement; parent; parent = parent.parentElement) {
+              if (!["auto", "scroll", "hidden"].includes(getComputedStyle(parent).overflowY)) continue;
+              const clip = parent.getBoundingClientRect();
+              top = Math.max(top, clip.top + parent.clientTop);
+              bottom = Math.min(bottom, clip.top + parent.clientTop + parent.clientHeight);
+            }
+            return bounds.top >= top - 1 && bounds.bottom <= bottom + 1;
+          });
+          assert.ok(visible, `${key}: selected result stays within the visible scroll panel`);
+          assert.equal(await input.evaluate((element) => element === document.activeElement), true,
+            "Keyboard navigation retains combobox focus");
+        }
+        await input.press("End");
+        await input.press("Home");
+        const firstId = await input.getAttribute("aria-activedescendant");
+        const expected = await page.locator(`[id="${firstId}"]`).getAttribute("href");
+        await input.press("Enter");
+        await page.waitForURL(`${base}${expected}`);
+      } finally {
+        await context.close();
+      }
+    });
+  }
+}
diff --git a/website/scripts/search.test.mjs b/website/scripts/search.test.mjs
new file mode 100644
index 0000000000..0c5f958269
--- /dev/null
+++ b/website/scripts/search.test.mjs
@@ -0,0 +1,265 @@
+// Run: node --test website/scripts/search.test.mjs
+// Uses the existing Vite/esbuild toolchain to load the production TS adapters.
+import assert from "node:assert/strict";
+import { after, test } from "node:test";
+import { mkdir, mkdtemp, rm, writeFile } from "node:fs/promises";
+import { fileURLToPath, pathToFileURL } from "node:url";
+import { join, sep } from "node:path";
+import { build } from "esbuild";
+import * as pagefind from "pagefind";
+
+const directory = await mkdtemp(fileURLToPath(new URL(".search-test-", import.meta.url)));
+after(async () => {
+  await pagefind.close();
+  await rm(directory, { recursive: true });
+});
+
+async function load(relative, name) {
+  const outfile = join(directory, `${name}.mjs`);
+  const result = await build({
+    entryPoints: [fileURLToPath(new URL(relative, import.meta.url))],
+    outfile, bundle: true, write: false, format: "esm", platform: "node",
+    packages: "external", define: { "import.meta.env.BASE_URL": '"/"' },
+  });
+  await writeFile(outfile, result.outputFiles[0].contents);
+  return import(pathToFileURL(outfile).href);
+}
+
+const { buildSearchIndex, categoryOf, filterSearchItemsByLocale, hrefKey, mergeSearchItems, CATEGORY_LABELS } =
+  await load("../src/components/brand/searchIndex.ts", "index");
+const { currentSearchLocale, pagefindItem, searchPagefind } =
+  await load("../src/components/brand/pagefindSearch.ts", "adapter");
+const { prepareSearchHtml, default: pagefindResources } =
+  await load("../src/integrations/pagefind-resources.ts", "integration");
+
+const item = (href, category = "Extensions", description = "") => ({
+  href, category, title: "Shared name", description,
+});
+
+test("canonical URL formatting merges, but case, types, IDs and anchors stay distinct", () => {
+  assert.equal(hrefKey("https://awesome-copilot.github.com/skill/%61gent/index.html"), hrefKey("/skill/agent/"));
+  assert.equal(hrefKey("/skill//agent/"), hrefKey("/skill/agent"));
+  assert.notEqual(hrefKey("/skill/Agent/"), hrefKey("/skill/agent/"));
+  assert.notEqual(hrefKey("/skill/a%2Fb/"), hrefKey("/skill/a/b/"));
+  assert.notEqual(hrefKey("/skill/agent/#one"), hrefKey("/skill/agent/#two"));
+  assert.notEqual(hrefKey("/skills/?page=1"), hrefKey("/skills/?page=2"));
+  assert.equal(mergeSearchItems([
+    item("/skill/one/"), item("/skill/two/"), item("/plugin/one/"),
+  ]).length, 3);
+});
+
+test("static duplicates and provider duplicates prefer the rich typed record", () => {
+  const rich = item("/extension/pr-artifact-explorer/", "Extensions", "Explore PR artifacts");
+  const merged = mergeSearchItems([
+    item("/extension/pr-artifact-explorer", "Pages"),
+    rich, { ...rich },
+    { ...item("/ko-kr/extension/pr-artifact-explorer/"), canonicalHref: rich.href },
+  ]);
+  assert.deepEqual(merged, [rich]);
+});
+
+test("actual translations and unknown locale identities are never guessed away", () => {
+  const path = "/learning-hub/copilot-workshops/app/";
+  assert.equal(mergeSearchItems([
+    { ...item(path, "Articles"), locale: "en" },
+    { ...item(`/es-es${path}`, "Articles"), locale: "es-es" },
+    item(`/ja-jp${path}`, "Articles"),
+  ]).length, 3);
+  assert.equal(categoryOf(`/es-es${path}`), "Articles");
+  assert.equal(categoryOf("/site/ko-kr/extension/example/", "/site/"), "Extensions");
+  assert.equal(categoryOf("/extensions/"), "Pages");
+});
+
+test("canvas aliases share one record and preserve extension routes and IDs", () => {
+  const index = buildSearchIndex([{
+    type: "extension", id: "my-canvas", title: "Canvas", description: "Canvas extension",
+  }], "/site/");
+  assert.equal(index.filter((entry) => entry.href === "/site/extensions/").length, 1);
+  assert.equal(index.find((entry) => entry.href === "/site/extensions/").title, "Extensions");
+  assert.equal(index.at(-1).href, "/site/extension/my-canvas/");
+  assert.equal(index.at(-1).category, "Extensions");
+  assert.equal(CATEGORY_LABELS.Extensions, "Extensions");
+});
+
+test("locale scope uses content metadata, canonical fallbacks, and the configured base path", () => {
+  const english = item("/site/skill/example/", "Skills");
+  const spanish = { ...item("/site/es-es/learning-hub/example/", "Articles"), locale: "es-es" };
+  const japanese = item("/site/ja-jp/learning-hub/example/", "Articles");
+  const fallback = { ...item("/site/ko-kr/extension/example/"), locale: "en" };
+  const canonicalFallback = { ...item("/site/es-es/skill/other/"), canonicalHref: "/site/skill/other/" };
+  const all = [english, spanish, japanese, fallback, canonicalFallback];
+  assert.deepEqual(filterSearchItemsByLocale(all, "en", "/site/"), [english, fallback, canonicalFallback]);
+  assert.deepEqual(filterSearchItemsByLocale(all, "ES-es", "/site/"), [spanish]);
+  assert.deepEqual(filterSearchItemsByLocale(all, "ja-jp", "/site/"), [japanese]);
+  assert.deepEqual(filterSearchItemsByLocale(all, "ko-kr", "/site/"), []);
+});
+
+test("Pagefind uses canonical metadata and actual content locale, retaining exact resource titles", () => {
+  const hit = pagefindItem({
+    url: "/ko-kr/extension/pr-artifact-explorer/",
+    meta: {
+      canonical: "/extension/pr-artifact-explorer/", locale: "en",
+      resourceTitle: "My title — Plugin", description: "Curated context",
+    },
+    excerpt: "<mark>Uncurated</mark>",
+  });
+  assert.equal(hit.href, "/extension/pr-artifact-explorer/");
+  assert.equal(hit.title, "My title — Plugin");
+  assert.equal(hit.description, "Curated context");
+  assert.equal(hit.category, "Extensions");
+  assert.equal(hit.locale, "en");
+  assert.equal(pagefindItem({ url: "/skill/x/", excerpt: "<mark>Text</mark>" }).description.trim(), "Text");
+});
+
+test("Extension and legacy Canvas suffixes retain the Extensions display category", () => {
+  for (const suffix of ["Extension", "Canvas"]) {
+    const hit = pagefindItem({
+      url: "/extension/pr-artifact-explorer/",
+      meta: { title: `Artifact Explorer — ${suffix}` },
+    });
+    assert.equal(hit.title, "Artifact Explorer");
+    assert.equal(hit.category, "Extensions");
+    assert.equal(CATEGORY_LABELS[hit.category], "Extensions");
+    assert.equal(hit.href, "/extension/pr-artifact-explorer/");
+  }
+  const catalog = pagefindItem({
+    url: "/extensions/",
+    meta: { title: "Extensions" },
+  });
+  assert.equal(catalog.title, "Extensions");
+  assert.equal(catalog.category, "Pages");
+  assert.equal(catalog.href, "/extensions/");
+});
+
+test("Pagefind result limits apply after dedupe and locale filtering", async () => {
+  const fixture = join(directory, "pagefind");
+  await mkdir(fixture);
+  await writeFile(join(fixture, "pagefind.js"), `
+    export async function search(term) {
+      if (term === "localized") {
+        return { results: [
+          { url: "/skill/english/", meta: { locale: "en" } },
+          { url: "/es-es/skill/english-fallback/", meta: { locale: "en" } },
+          ...Array.from({ length: 3 }, () => ({
+            url: "/es-es/learning-hub/one/", meta: { locale: "es-es" }
+          })),
+          { url: "/es-es/learning-hub/two/", meta: { locale: "es-es" } }
+        ].map(entry => ({ data: async () => entry })) };
+      }
+      return { results: [
+        ...Array.from({ length: 5 }, () => "/skill/one/"), "/plugin/two/"
+      ].map(url => ({ data: async () => ({ url, meta: { title: "Same name" } }) })) };
+    }
+  `);
+  const originalWindow = globalThis.window;
+  const originalDocument = globalThis.document;
+  globalThis.window = {};
+  globalThis.document = { documentElement: { dataset: {
+    basePath: `${pathToFileURL(directory).href}/`,
+  } } };
+  try {
+    const items = await searchPagefind("same", 2);
+    assert.deepEqual(items.map((item) => item.href), ["/skill/one/", "/plugin/two/"]);
+    globalThis.document.documentElement.lang = "es-es";
+    assert.equal(currentSearchLocale(), "es-es");
+    const localized = await searchPagefind("localized", 2);
+    assert.deepEqual(localized.map((item) => item.href), [
+      "/es-es/learning-hub/one/", "/es-es/learning-hub/two/",
+    ]);
+    globalThis.document.documentElement.lang = "en";
+    assert.equal(currentSearchLocale(), "en");
+  } finally {
+    if (originalWindow === undefined) delete globalThis.window;
+    else globalThis.window = originalWindow;
+    if (originalDocument === undefined) delete globalThis.document;
+    else globalThis.document = originalDocument;
+  }
+});
+
+const html = (canonical, lang = "en") => `<!doctype html><html lang="${lang}">
+  <head><title>Shared name</title>
+  <link rel="canonical" href="https://awesome-copilot.github.com${canonical}">
+  <meta name="description" content="Useful &amp; specific context"></head>
+  <body data-pagefind-body><header>Shared chrome sentinel</header>
+  <main><h1>Shared name</h1><p>Resource content</p></main>
+  <footer>Shared footer sentinel</footer></body></html>`;
+const options = { locales: ["en", "ko-kr", "es-es"], defaultLocale: "en" };
+
+test("built fallback resource AND self-canonical learning rewrites are excluded", () => {
+  assert.equal(prepareSearchHtml(
+    html("/extension/pr-artifact-explorer/"),
+    "/ko-kr/extension/pr-artifact-explorer/", options,
+  ), null);
+  assert.equal(prepareSearchHtml(
+    html("/ko-kr/learning-hub/github-copilot-app/"),
+    "/ko-kr/learning-hub/github-copilot-app/", options,
+  ), null);
+  assert.equal(prepareSearchHtml(
+    html("/site/ko-kr/learning-hub/github-copilot-app/"),
+    "/site/ko-kr/learning-hub/github-copilot-app/", { ...options, base: "/site/" },
+  ), null);
+});
+
+test("real translated HTML keeps its own canonical identity and language", () => {
+  const url = "/es-es/learning-hub/copilot-workshops/app/";
+  const prepared = prepareSearchHtml(html(url, "es-es"), url, options);
+  assert.equal(prepared.url, url);
+  assert.match(prepared.content, /data-pagefind-meta="locale\[content\]" content="es-es"/);
+  assert.match(prepared.content, /<main data-pagefind-body>/);
+  assert.doesNotMatch(prepared.content, /<body data-pagefind-body/);
+  assert.throws(() => prepareSearchHtml("<html></html>", "/", options), /Missing content language/);
+  assert.equal(prepareSearchHtml('<meta name="robots" content="noindex">', "/hooks/", options), null);
+});
+
+test("real Pagefind parses enriched HTML metadata without adding a duplicate custom record", async () => {
+  const url = "/extension/pr-artifact-explorer/";
+  const record = {
+    type: "extension", id: "pr-artifact-explorer", title: 'Artifact "Explorer"',
+    description: "Useful & specific context", path: "extensions/pr-artifact-explorer",
+    searchText: "unique-keyword",
+  };
+  const prepared = prepareSearchHtml(html(url), url, options, record);
+  const response = await pagefind.createIndex();
+  assert.deepEqual(response.errors, []);
+  const result = await response.index.addHTMLFile(prepared);
+  assert.deepEqual(result.errors, []);
+  assert.equal(result.file.meta.resourceTitle, record.title);
+  assert.equal(result.file.meta.description, record.description);
+  assert.equal(result.file.meta.canonical, url);
+  assert.equal(result.file.meta.locale, "en");
+  await response.index.deleteIndex();
+});
+
+for (const state of ["missing", "invalid JSON"]) {
+  test(`integration fails explicitly when generated search data is ${state}`, async () => {
+    const fixture = await mkdtemp(join(directory, "missing-data-"));
+    if (state === "invalid JSON") {
+      await mkdir(join(fixture, "data"));
+      await writeFile(join(fixture, "data", "search-index.json"), "{invalid");
+    }
+    const messages = [];
+    const logger = {
+      info: (message) => messages.push(message),
+      warn: (message) => messages.push(message),
+      error: (message) => messages.push(message),
+      fork() { return this; },
+    };
+    const integration = pagefindResources();
+    await assert.rejects(
+      integration.hooks["astro:build:done"]({
+        dir: pathToFileURL(`${fixture}${sep}`), logger,
+      }),
+      (error) => {
+        assert.match(error.message, /Failed to build Pagefind search index/);
+        if (state === "missing") {
+          assert.equal(error.cause.code, "ENOENT");
+          assert.match(error.cause.path, /search-index\.json$/);
+        } else {
+          assert.ok(error.cause instanceof SyntaxError);
+        }
+        return true;
+      },
+    );
+    assert.ok(messages.every((message) => !/skipping|Added 0|Search index built/.test(message)));
+  });
+}
diff --git a/website/scripts/site-refinement-regression.mjs b/website/scripts/site-refinement-regression.mjs
new file mode 100644
index 0000000000..0cd9921737
--- /dev/null
+++ b/website/scripts/site-refinement-regression.mjs
@@ -0,0 +1,347 @@
+import assert from "node:assert/strict";
+import { chromium } from "playwright";
+
+const baseUrl = process.env.SITE_BASE_URL ?? "http://127.0.0.1:4321";
+const browser = await chromium.launch();
+const results = [];
+const iconArtwork = (markup) => markup
+  .replace(/id="(?:skills-icon|learning-hub-icon)-[^"]+"/g, 'id="icon-clip"')
+  .replace(/clip-path="url\(#[^)]+\)"/g, 'clip-path="url(#icon-clip)"');
+
+try {
+  for (const colorScheme of ["light", "dark"]) {
+    for (const width of [1440, 1200, 1024, 390]) {
+      const page = await browser.newPage({
+        colorScheme,
+        viewport: { width, height: 900 },
+        reducedMotion: "reduce",
+      });
+      try {
+        await page.addInitScript(() => {
+          window.__layoutShiftScore = 0;
+          new PerformanceObserver((list) => {
+            for (const entry of list.getEntries()) {
+              if (!entry.hadRecentInput) window.__layoutShiftScore += entry.value;
+            }
+          }).observe({ type: "layout-shift", buffered: true });
+        });
+        await page.goto(baseUrl);
+        await page.waitForFunction(() => !document.querySelector("astro-island[ssr]"));
+        await page.evaluate(() => document.fonts.ready);
+        const hero = page.locator('[class*="heroFrameInner"]');
+        const learning = hero.getByRole("link", { name: "Explore Learning Hub" });
+        await learning.waitFor();
+        assert.equal(await learning.getAttribute("href"), "/learning-hub/");
+        const learningIcon = learning.locator('[aria-hidden="true"] svg');
+        assert.equal(await learningIcon.count(), 1);
+        assert.equal(
+          iconArtwork(await learningIcon.evaluate((element) => element.innerHTML)),
+          iconArtwork(await page.locator('#resources a[href="/learning-hub/"] [class*="resourceIcon"] svg').evaluate((element) => element.innerHTML)),
+          "Primary CTA reuses the Learning Hub artwork",
+        );
+        assert.ok(await learningIcon.evaluate((element) => {
+          const color = getComputedStyle(element).color;
+          return [...element.querySelectorAll("path")].every((path) => {
+            const style = getComputedStyle(path);
+            return (style.fill === "none" || style.fill === color) &&
+              (style.stroke === "none" || style.stroke === color);
+          });
+        }), "CTA icon follows the button's foreground color");
+        assert.equal(
+          await hero.getByRole("link", { name: "View on GitHub" }).getAttribute("href"),
+          "https://github.com/github/awesome-copilot",
+        );
+        const secondary = hero.getByRole("link", { name: "View on GitHub" });
+        for (const state of ["rest", "hover", "focus"]) {
+          if (state === "hover") await secondary.hover();
+          if (state === "focus") {
+            await page.mouse.move(0, 0);
+            await secondary.focus();
+          }
+          const colors = await secondary.evaluate((button, state) => {
+            const sample = document.createElement("span");
+            sample.style.position = "absolute";
+            sample.style.backgroundColor = `var(--brand-button-secondary-bgColor-${state === "focus" ? "rest" : state})`;
+            button.append(sample);
+            const expected = getComputedStyle(sample).backgroundColor;
+            sample.remove();
+            return { actual: getComputedStyle(button).backgroundColor, expected };
+          }, state);
+          assert.equal(colors.actual, colors.expected, `${colorScheme}: secondary CTA uses Primer's ${state} surface`);
+        }
+        await page.mouse.move(0, 0);
+        await secondary.evaluate((button) => button.blur());
+        const bounds = await learning.boundingBox();
+        assert.ok(bounds && bounds.y + bounds.height <= 900, "Primary CTA fits the viewport");
+        assert.equal(await page.locator('[class*="resourceIcon"] svg').count(), 6);
+        const extensionCard = page.locator("#resources").getByRole("link", { name: /^Extensions / });
+        assert.equal(await extensionCard.getAttribute("href"), "/extensions/");
+        assert.equal(
+          await page.evaluate(() => document.documentElement.scrollWidth > innerWidth),
+          false,
+          `No horizontal overflow at ${width}px`,
+        );
+        assert.notEqual(
+          await hero.evaluate((element) => getComputedStyle(element).backgroundImage),
+          "none",
+        );
+        const grid = await hero.evaluate((element) => {
+          const style = getComputedStyle(element, "::before");
+          return {
+            image: style.backgroundImage,
+            fade: style.maskImage,
+            pointerEvents: style.pointerEvents,
+          };
+        });
+        assert.ok(grid.image.includes("linear-gradient") && !grid.image.includes("radial-gradient"));
+        assert.ok(grid.fade.includes("radial-gradient"), "Grid fades outward from the lower focal area");
+        assert.equal(grid.pointerEvents, "none");
+        if (width === 1440) {
+          const heroBounds = await hero.boundingBox();
+          const capturePixels = async (x, y) => {
+            const png = await page.screenshot({
+              clip: { x: Math.ceil(heroBounds.x + x), y: Math.ceil(heroBounds.y + y), width: 120, height: 64 },
+            });
+            return page.evaluate(async (base64) => {
+              const bytes = Uint8Array.from(atob(base64), (character) => character.charCodeAt(0));
+              const image = await createImageBitmap(new Blob([bytes], { type: "image/png" }));
+              const canvas = new OffscreenCanvas(image.width, image.height);
+              const context = canvas.getContext("2d");
+              context.drawImage(image, 0, 0);
+              return Array.from(context.getImageData(0, 0, image.width, image.height).data);
+            }, png.toString("base64"));
+          };
+          const center = heroBounds.width / 2 - 60;
+          const lower = heroBounds.height - 72;
+          const sampleRegions = async () => ({
+            focal: await capturePixels(center, lower),
+            top: await capturePixels(center, 24),
+            edge: await capturePixels(16, lower),
+          });
+          const withGrid = await sampleRegions();
+          const hideGrid = await page.addStyleTag({ content: ".heading-grid::before { background-image: none !important; }" });
+          const withoutGrid = await sampleRegions();
+          await hideGrid.evaluate((element) => element.remove());
+          const visiblePixels = withGrid.focal.filter((value, index) =>
+            index % 4 !== 3 && Math.abs(value - withoutGrid.focal[index]) >= 12,
+          ).length;
+          assert.ok(visiblePixels > 200, `${colorScheme}: lower grid must be visible in rendered pixels`);
+          const contrast = (region) => withGrid[region].reduce((sum, value, index) =>
+            sum + (index % 4 === 3 ? 0 : Math.abs(value - withoutGrid[region][index])), 0,
+          );
+          assert.ok(contrast("top") < contrast("focal") * 0.1, `${colorScheme}: headline area stays quiet`);
+          assert.ok(contrast("edge") < contrast("focal") * 0.5, `${colorScheme}: grid fades at the sides`);
+        }
+        const bottom = page.locator("#learning-hub");
+        assert.equal(await bottom.locator('[class*="CTABanner-container--border-gridlines"]').count(), 0,
+          "Use the outer frame without nested banner gridlines");
+        const bannerBackgrounds = await bottom.evaluate((element) => ({
+          frame: getComputedStyle(element).backgroundColor,
+          surface: getComputedStyle(element.querySelector('[class*="CTABanner-container--background"]')).backgroundColor,
+        }));
+        assert.notEqual(bannerBackgrounds.frame, "rgba(0, 0, 0, 0)", "Background reaches the frame edges");
+        assert.equal(bannerBackgrounds.frame, bannerBackgrounds.surface, "No contrasting side strips inside the banner");
+        assert.equal(await bottom.getByRole("link", { name: "Watch on YouTube", exact: true }).getAttribute("href"), "https://www.youtube.com/@GitHub/featured");
+        assert.equal(await bottom.getByRole("link", { name: "Read the docs", exact: true }).getAttribute("href"), "https://docs.github.com/en/copilot");
+        assert.equal(await bottom.getByRole("link").count(), 2, "No repeated Learning Hub CTA or detached video link");
+        const nav = page.getByRole("navigation", { name: "Primary", exact: true });
+        const navBounds = await nav.boundingBox();
+        assert.ok(navBounds && navBounds.height <= 80, "Navigation remains a single compact row");
+        const cls = await page.evaluate(() => window.__layoutShiftScore);
+        assert.ok(cls < 0.1, `Landing layout shift stays below 0.1, measured ${cls}`);
+        if (width < 1200) {
+          await page.getByLabel("Open Resources menu", { exact: true }).click();
+          const menu = page.getByRole("navigation", { name: "Resources", exact: true });
+          await menu.getByRole("link", { name: "Extensions", exact: true }).waitFor();
+          assert.equal(await menu.getByRole("link", { name: "Extensions", exact: true }).getAttribute("href"), "/extensions/");
+          await page.keyboard.press("Escape");
+          assert.equal(await menu.isVisible(), false);
+        } else {
+          await nav.locator("summary:visible").click();
+          assert.equal(await nav.getByRole("link", { name: "Extensions", exact: true }).getAttribute("href"), "/extensions/");
+          await page.keyboard.press("Escape");
+        }
+        const footerLogo = page.locator('footer a[aria-label="GitHub"]');
+        assert.equal(await footerLogo.getAttribute("href"), "https://github.com");
+        const mark = await footerLogo.evaluate((element) => {
+          const style = getComputedStyle(element, "::before");
+          return {
+            width: style.width, height: style.height, mask: style.maskImage,
+            color: style.backgroundColor,
+            wordmarkColor: getComputedStyle(element.querySelector("svg")).fill,
+          };
+        });
+        assert.equal(mark.width, "32px");
+        assert.equal(mark.height, "32px");
+        assert.notEqual(mark.mask, "none");
+        assert.equal(mark.color, mark.wordmarkColor, "Footer mark matches the wordmark in both themes");
+        const withMark = await footerLogo.screenshot();
+        const hideMark = await page.addStyleTag({
+          content: 'footer a[aria-label="GitHub"]::before { background-color: transparent !important; }',
+        });
+        const withoutMark = await footerLogo.screenshot();
+        await hideMark.evaluate((element) => element.remove());
+        const paintedPixels = await page.evaluate(async ({ before, after }) => {
+          const pixels = async (data) => {
+            const bytes = Uint8Array.from(atob(data), (character) => character.charCodeAt(0));
+            const image = await createImageBitmap(new Blob([bytes], { type: "image/png" }));
+            const canvas = new OffscreenCanvas(image.width, image.height);
+            const context = canvas.getContext("2d");
+            context.drawImage(image, 0, 0);
+            return context.getImageData(0, 0, 32, image.height).data;
+          };
+          const a = await pixels(before);
+          const b = await pixels(after);
+          return a.filter((value, index) => index % 4 !== 3 && Math.abs(value - b[index]) > 16).length;
+        }, { before: withMark.toString("base64"), after: withoutMark.toString("base64") });
+        assert.ok(paintedPixels > 200, "Footer GitHub mark actually paints beside the wordmark");
+        results.push(`${colorScheme} ${width}px: landing, icons, navigation, texture, footer mark`);
+      } finally {
+        await page.close();
+      }
+    }
+  }
+
+  for (const reducedMotion of ["no-preference", "reduce"]) {
+    for (const width of [1440, 390, 320]) {
+      const page = await browser.newPage({ viewport: { width, height: 900 }, reducedMotion });
+      try {
+        await page.goto(baseUrl);
+        await page.waitForFunction(() => !document.querySelector("astro-island[ssr]"));
+        await page.evaluate(() => document.fonts.ready);
+        const cards = page.locator('#resources [class*="resourceCard"]');
+        for (const card of await cards.all()) {
+          await page.mouse.move(0, 0);
+          await card.scrollIntoViewIfNeeded();
+          const measure = () => card.evaluate((element) => {
+            const action = element.querySelector('[class*="Card__action___"]');
+            const label = element.querySelector('[class*="Card__actionLabel___"]');
+            const clip = element.querySelector('[class*="Card__actionLabelClip"]');
+            const arrow = action.querySelector("svg");
+            return {
+              action: action.getBoundingClientRect().toJSON(),
+              label: label.getBoundingClientRect().toJSON(),
+              arrow: arrow.getBoundingClientRect().toJSON(),
+              transform: getComputedStyle(clip).transform,
+              opacity: Number(getComputedStyle(clip).opacity),
+            };
+          });
+          const initial = await measure();
+          assert.equal(initial.opacity, width < 768 ? 1 : 0);
+          await card.hover();
+          if (width >= 768 && reducedMotion === "no-preference") {
+            await page.waitForTimeout(140);
+            const expanding = await measure();
+            assert.ok(expanding.action.width > initial.action.width, "Border grows before text appears");
+            assert.ok(expanding.arrow.x > initial.arrow.x, "Arrow travels from left to right");
+            assert.equal(expanding.opacity, 0, "Label waits until the outline has expanded");
+          }
+          await page.waitForFunction(
+            (element) => getComputedStyle(element).opacity === "1",
+            await card.locator('[class*="Card__actionLabelClip"]').elementHandle(),
+          );
+          const expanded = await measure();
+          assert.ok(expanded.label.left - expanded.action.left >= 24, "Expanded label clears the rounded end");
+          assert.ok(expanded.label.top >= expanded.action.top && expanded.label.bottom <= expanded.action.bottom);
+          assert.ok(expanded.arrow.right <= expanded.action.right - 4, "Arrow stays inside the outline");
+          assert.equal(expanded.transform, "none", "Label fades in without a sliding transform");
+          assert.equal(expanded.opacity, 1);
+          await page.mouse.move(0, 0);
+          if (width >= 768 && reducedMotion === "no-preference") {
+            await page.waitForTimeout(160);
+            assert.ok((await measure()).opacity < 0.001, "Label is hidden during outline collapse");
+          }
+          await page.waitForTimeout(400);
+          await card.getByRole("link").focus();
+          await page.waitForFunction(
+            (element) => getComputedStyle(element).opacity === "1",
+            await card.locator('[class*="Card__actionLabelClip"]').elementHandle(),
+          );
+          const focused = await measure();
+          assert.equal(focused.opacity, 1, "Keyboard focus reveals the same label");
+          assert.equal(focused.action.width, expanded.action.width);
+          await card.getByRole("link").evaluate((element) => element.blur());
+        }
+        assert.equal(await page.evaluate(() => document.documentElement.scrollWidth > innerWidth), false);
+        results.push(`${reducedMotion} ${width}px: staged padded card CTAs, hover and keyboard focus`);
+      } finally {
+        await page.close();
+      }
+    }
+  }
+
+  const page = await browser.newPage();
+  try {
+    await page.goto(baseUrl);
+    const cardIcons = await page.locator('#resources [class*="resourceIcon"] svg').evaluateAll((icons) =>
+      icons.map((icon) => icon.innerHTML),
+    );
+    const catalogs = ["agents", "instructions", "skills", "plugins", "extensions", "learning-hub"];
+    for (const [index, catalog] of catalogs.entries()) {
+      await page.goto(`${baseUrl}/${catalog}/`);
+      const icon = page.locator('svg[class*="heroIcon"], [class*="heroIcon"] svg');
+      assert.equal(iconArtwork(await icon.evaluate((element) => element.innerHTML)), iconArtwork(cardIcons[index]), `${catalog}: reuse the catalog artwork exactly`);
+    }
+    results.push("All six homepage icons match their catalog artwork");
+    for (const prefix of ["", "/ko-kr"]) {
+      await page.goto(`${baseUrl}${prefix}/extension/pr-artifact-explorer/`);
+      const images = page.locator("main img");
+      assert.ok(await images.count() >= 2, "Preview and embedded README image are present");
+      await page.waitForFunction(() => {
+        const images = [...document.querySelectorAll("main img")];
+        return images.length >= 2 && images.every((image) => image.complete && image.naturalWidth > 0);
+      });
+      const sources = await images.evaluateAll((elements) => elements.map((image) => image.src));
+      assert.ok(sources.every((src) => !src.includes("/extension/pr-artifact-explorer/assets/")));
+      for (const width of [1440, 390]) {
+        await page.setViewportSize({ width, height: 900 });
+        for (const colorScheme of ["light", "dark"]) {
+          await page.emulateMedia({ colorScheme });
+          await page.evaluate(() => document.fonts.ready);
+          await page.waitForFunction(() =>
+            [...document.querySelectorAll("main img")].every((image) => image.complete && image.naturalWidth > 0),
+          );
+          const spacing = await page.locator("img[data-markdown-block-image]").evaluate((image) => {
+            const block = image.closest("picture") ?? image;
+            const before = block.previousElementSibling.getBoundingClientRect();
+            const after = block.nextElementSibling.getBoundingClientRect();
+            const bounds = image.getBoundingClientRect();
+            const style = getComputedStyle(image);
+            return {
+              top: bounds.top - before.bottom,
+              bottom: after.top - bounds.bottom,
+              marginTop: style.marginTop,
+              marginBottom: style.marginBottom,
+              width: bounds.width,
+              available: image.closest("[data-reading-content]").getBoundingClientRect().width,
+            };
+          });
+          assert.equal(spacing.marginTop, "24px");
+          assert.equal(spacing.marginBottom, "24px");
+          assert.ok(spacing.top >= 24 && spacing.bottom >= 24,
+            `${prefix} ${width}px ${colorScheme}: rendered image separates adjacent content: ${JSON.stringify(spacing)}`);
+          assert.ok(spacing.width <= spacing.available, "Embedded images stay responsive");
+          assert.equal(await page.locator("main img:not([data-markdown-block-image])").count(), 1,
+            "The dedicated preview gallery keeps its own layout");
+        }
+      }
+      results.push(`${prefix || "/"}: preview and README images load`);
+    }
+    await page.goto(baseUrl);
+    await page.emulateMedia({ forcedColors: "active" });
+    assert.equal(
+      await page.locator(".heading-grid").evaluate((element) => getComputedStyle(element).backgroundImage),
+      "none",
+    );
+    assert.equal(
+      await page.locator(".heading-grid").evaluate((element) => getComputedStyle(element, "::before").backgroundImage),
+      "none",
+    );
+    results.push("Forced colors: heading texture disabled");
+  } finally {
+    await page.close();
+  }
+  console.log(results.join("\n"));
+} finally {
+  await browser.close();
+}
diff --git a/website/src/assets/github-mark.svg b/website/src/assets/github-mark.svg
new file mode 100644
index 0000000000..4c25cdc969
--- /dev/null
+++ b/website/src/assets/github-mark.svg
@@ -0,0 +1,2 @@
+<!-- Source: https://github.githubassets.com/images/modules/site/icons/footer/github-mark.svg -->
+<svg height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20"><path fill="rgb(149, 157, 165)" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
diff --git a/website/src/components/brand/AgentDetail.tsx b/website/src/components/brand/AgentDetail.tsx
index d94e8676e0..5a6d534967 100644
--- a/website/src/components/brand/AgentDetail.tsx
+++ b/website/src/components/brand/AgentDetail.tsx
@@ -137,6 +137,11 @@ export function AgentDetail({
         { label: item.title },
       ]}
       install={install}
+      compactInstall={
+        <Button as="a" href={vscodeUrl} variant="primary" size="small" hasArrow={false} leadingVisual={PlusIcon}>
+          Install
+        </Button>
+      }
       sidebar={
         <ResourceMeta
           kicker="Agent details"
diff --git a/website/src/components/brand/AgentsCatalog.tsx b/website/src/components/brand/AgentsCatalog.tsx
index dfd6d32102..13fed70185 100644
--- a/website/src/components/brand/AgentsCatalog.tsx
+++ b/website/src/components/brand/AgentsCatalog.tsx
@@ -16,14 +16,15 @@ import {
   useTheme,
 } from "@primer/react-brand";
 import { clsx } from "clsx";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useMemo, useState } from "react";
 
 import { PageShell } from "./PageShell";
+import { AgentsIcon } from "./AgentsIcon";
 import { CatalogSortControl, CATALOG_SORT_OPTIONS } from "./CatalogSortControl";
 import { daysSince, toggleValue, updatedBuckets, updatedBucketOf } from "./catalogFilters";
 import { pageHref } from "./pageHref";
 import { downloadFile } from "./resourceActions";
-import { getScrollBehavior } from "./scrollBehavior";
+import { useCatalogPageFocus } from "./useCatalogPageFocus";
 import type { SearchItem } from "./searchIndex";
 import styles from "./styles/agents.module.css";
 
@@ -120,7 +121,7 @@ export function AgentsCatalog({
   const { colorMode } = useTheme();
   const [sortMode, setSortMode] = useState<SortMode>("az");
   const [currentPage, setCurrentPage] = useState(1);
-  const previousPage = useRef(currentPage);
+  useCatalogPageFocus(currentPage);
   const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);
   const [filters, setFilters] = useState<FilterState>(emptyFilters);
   const [expandedGroups, setExpandedGroups] = useState<
@@ -192,18 +193,6 @@ export function AgentsCatalog({
   const page = Math.min(currentPage, pageCount);
   const visibleAgents = sortedAgents.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
 
-  useEffect(() => {
-    if (previousPage.current === currentPage) return;
-    previousPage.current = currentPage;
-    const frame = window.requestAnimationFrame(() => {
-      const catalog = document.getElementById("catalog");
-      if (!catalog) return;
-      catalog.scrollIntoView({ behavior: getScrollBehavior(), block: "start" });
-      catalog.focus({ preventScroll: true });
-    });
-    return () => window.cancelAnimationFrame(frame);
-  }, [currentPage]);
-
   return (
     <PageShell
       styles={styles}
@@ -212,51 +201,9 @@ export function AgentsCatalog({
       contributorsTotal={contributorsTotal}
       searchAriaLabel="Search agents"
     >
-      <Box className={styles.hero}>
+      <Box className={clsx(styles.hero, "heading-texture")}>
         <div className={styles.heroInner}>
-          <svg
-            className={styles.heroIcon}
-            width="36"
-            height="36"
-            viewBox="0 0 96 96"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            aria-hidden="true"
-          >
-            <path
-              d="M48 53L23 72"
-              stroke="currentColor"
-              strokeWidth="4"
-              strokeMiterlimit="10"
-              strokeLinecap="round"
-            />
-            <path
-              d="M47.9998 53L72.9998 72"
-              stroke="currentColor"
-              strokeWidth="4"
-              strokeMiterlimit="10"
-              strokeLinecap="round"
-            />
-            <path
-              d="M48.01 53L48.01 26"
-              stroke="currentColor"
-              strokeWidth="4"
-              strokeMiterlimit="10"
-              strokeLinecap="round"
-            />
-            <path
-              d="M87 91C91.9706 91 96 86.9706 96 82C96 77.0294 91.9706 73 87 73C82.0294 73 78 77.0294 78 82C78 86.9706 82.0294 91 87 91Z"
-              fill="var(--base-color-scale-gray-5)"
-            />
-            <path
-              d="M48 18C52.9706 18 57 13.9706 57 9C57 4.02944 52.9706 0 48 0C43.0294 0 39 4.02944 39 9C39 13.9706 43.0294 18 48 18Z"
-              fill="var(--base-color-scale-gray-5)"
-            />
-            <path
-              d="M9 91C13.9706 91 18 86.9706 18 82C18 77.0294 13.9706 73 9 73C4.02944 73 0 77.0294 0 82C0 86.9706 4.02944 91 9 91Z"
-              fill="var(--base-color-scale-gray-5)"
-            />
-          </svg>
+          <AgentsIcon className={styles.heroIcon} />
           <Heading as="h1" size="3" className={styles.heroHeading}>
             Agents
           </Heading>
diff --git a/website/src/components/brand/AgentsIcon.tsx b/website/src/components/brand/AgentsIcon.tsx
new file mode 100644
index 0000000000..da49a16847
--- /dev/null
+++ b/website/src/components/brand/AgentsIcon.tsx
@@ -0,0 +1,52 @@
+type AgentsIconProps = {
+  size?: number;
+  className?: string;
+};
+
+export function AgentsIcon({ size = 36, className }: AgentsIconProps) {
+  return (
+    <svg
+      className={className}
+      width={size}
+      height={size}
+      viewBox="0 0 96 96"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <path
+        d="M48 53L23 72"
+        stroke="currentColor"
+        strokeWidth="4"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+      <path
+        d="M47.9998 53L72.9998 72"
+        stroke="currentColor"
+        strokeWidth="4"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+      <path
+        d="M48.01 53L48.01 26"
+        stroke="currentColor"
+        strokeWidth="4"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+      <path
+        d="M87 91C91.9706 91 96 86.9706 96 82C96 77.0294 91.9706 73 87 73C82.0294 73 78 77.0294 78 82C78 86.9706 82.0294 91 87 91Z"
+        fill="var(--base-color-scale-gray-5)"
+      />
+      <path
+        d="M48 18C52.9706 18 57 13.9706 57 9C57 4.02944 52.9706 0 48 0C43.0294 0 39 4.02944 39 9C39 13.9706 43.0294 18 48 18Z"
+        fill="var(--base-color-scale-gray-5)"
+      />
+      <path
+        d="M9 91C13.9706 91 18 86.9706 18 82C18 77.0294 13.9706 73 9 73C4.02944 73 0 77.0294 0 82C0 86.9706 4.02944 91 9 91Z"
+        fill="var(--base-color-scale-gray-5)"
+      />
+    </svg>
+  );
+}
diff --git a/website/src/components/brand/CookbookRecipe.tsx b/website/src/components/brand/CookbookRecipe.tsx
index 55714bb40e..bc48e06333 100644
--- a/website/src/components/brand/CookbookRecipe.tsx
+++ b/website/src/components/brand/CookbookRecipe.tsx
@@ -297,6 +297,7 @@ export function CookbookRecipe({
           text={active ? contents[active.path] : undefined}
           status={status}
           githubUrl={activeGithubUrl}
+          rawBase={rawBase}
         />
       </section>
     </DetailChassis>
@@ -312,6 +313,7 @@ function RecipeFileView({
   text,
   status,
   githubUrl,
+  rawBase,
 }: {
   active: RecipeFile | null;
   isPrimary: boolean;
@@ -321,11 +323,12 @@ function RecipeFileView({
   text?: string;
   status: "idle" | "loading" | "error";
   githubUrl: string;
+  rawBase: string;
 }) {
   const [markdown, setMarkdown] = React.useState<string | null>(null);
 
   React.useEffect(() => {
-    if (isPrimary || kind !== "markdown" || text === undefined) {
+    if (!active || isPrimary || kind !== "markdown" || text === undefined) {
       setMarkdown(null);
       return;
     }
@@ -338,14 +341,17 @@ function RecipeFileView({
       if (cancelled) return;
       setMarkdown(
         enhanceMarkdownA11y(
-          sanitizeHtml(marked.parse(text, { async: false }) as string),
+          sanitizeHtml(marked.parse(text, { async: false }) as string, {
+            rawBase,
+            filePath: active.path,
+          }),
         ),
       );
     });
     return () => {
       cancelled = true;
     };
-  }, [isPrimary, kind, text]);
+  }, [active?.path, isPrimary, kind, text, rawBase]);
 
   if (!active) return null;
 
diff --git a/website/src/components/brand/Custom.tsx b/website/src/components/brand/Custom.tsx
index bb1d1eb66b..5a8e1218e7 100644
--- a/website/src/components/brand/Custom.tsx
+++ b/website/src/components/brand/Custom.tsx
@@ -25,6 +25,7 @@ import {
 } from "@primer/react-brand";
 
 import styles from "./styles/styles.module.css";
+import navStyles from "./styles/TopNav.module.css";
 import brandDivider from "./brand-divider-copilot-sitting.webp";
 import { LargeFooter } from "./LargeFooter";
 import { ContributorsHoverCard } from "./ContributorsHoverCard";
@@ -121,7 +122,7 @@ export default function AwesomeCopilot({ pageHref }: PrototypePageProps) {
   return (
     <Box className={styles.page} backgroundColor="default" data-mode={colorMode}>
       <SkipLink />
-      <header className={styles.topBar}>
+      <header className={clsx(styles.topBar, navStyles.header)}>
         <nav className={styles.topBarInner} aria-label="Primary">
           <a href={pageHref()} className={styles.subNavTitle}>
             <MarkGithubIcon size={20} />
diff --git a/website/src/components/brand/DetailChassis.tsx b/website/src/components/brand/DetailChassis.tsx
index 6ce0ba3f23..47664ce398 100644
--- a/website/src/components/brand/DetailChassis.tsx
+++ b/website/src/components/brand/DetailChassis.tsx
@@ -6,6 +6,7 @@ import { Box, Breadcrumbs, Heading, Section, Text } from "@primer/react-brand";
 
 import { PageShell } from "./PageShell";
 import { LargeFooter } from "./LargeFooter";
+import { ReadingHeader } from "./ReadingHeader";
 import type { AwesomeCopilotPage } from "./navigation";
 import { getScrollBehavior } from "./scrollBehavior";
 import type { SearchItem } from "./searchIndex";
@@ -13,6 +14,7 @@ import styles from "./styles/dotnet-upgrade.module.css";
 import {
   useAgentDetailHeroPin,
   useAgentDetailProgress,
+  useReadingScrollSpy,
 } from "./useAgentDetailScroll";
 
 export type DetailCrumb = {
@@ -34,6 +36,8 @@ export type DetailChassisProps = {
   breadcrumbs: DetailCrumb[];
   /** Hero action row: install split-button, source/download buttons, etc. */
   install?: React.ReactNode;
+  /** The primary install action, sized for the compact reading header. */
+  compactInstall?: React.ReactNode;
   /** Extra hero content rendered under the description (e.g. `applyTo` tokens). */
   heroExtras?: React.ReactNode;
   /** "In this article" entries; ids must exist in the content region. */
@@ -50,13 +54,11 @@ export type DetailChassisProps = {
   children: React.ReactNode;
 };
 
-const TWO_COLUMN_QUERY = "(min-width: 75rem)";
-
 /**
  * Shared shell for every resource detail route.
  *
- * Reproduces the designers' `agent.tsx` layout: breadcrumbs and a sticky hero
- * carrying a reading-progress rule, a two-column body whose sidebar holds the
+ * Breadcrumbs and an expanded hero scroll into a compact reading title with a
+ * progress rule, above a two-column body whose sidebar holds the
  * in-page table of contents, sibling navigation, and a back-to-top control —
  * all inside the site-wide `PageShell` chrome.
  *
@@ -69,6 +71,7 @@ export function DetailChassis({
   description,
   breadcrumbs,
   install,
+  compactInstall,
   heroExtras,
   toc = [],
   sidebar,
@@ -84,22 +87,31 @@ export function DetailChassis({
   const [heroBurst, setHeroBurst] = React.useState(false);
   const [activeSection, setActiveSection] = React.useState(toc[0]?.id ?? "");
 
-  const lastSectionId = toc[toc.length - 1]?.id ?? "";
-
-  useAgentDetailHeroPin(contentScrollRef, {
+  const pinnedHeight = useAgentDetailHeroPin(contentScrollRef, {
     hero: styles.hero,
     heroInner: styles.heroInner,
-    heroContent: styles.heroContent,
   });
   const scrollToTop = useAgentDetailProgress(
     contentScrollRef,
-    lastSectionId,
     setShowBackToTop,
     setHeroBurst,
   );
 
   useScrollHostLayout(contentScrollRef);
-  useScrollSpy(contentScrollRef, toc, setActiveSection);
+  useReadingScrollSpy(contentScrollRef, toc, pinnedHeight, setActiveSection);
+
+  const progressRider = (
+    <div className={styles.progressViewport} aria-hidden="true">
+      <div className={styles.progressRider} data-burst={heroBurst ? "true" : undefined}>
+        <span className={styles.progressDuck} />
+        <span className={styles.confetti}>
+          {Array.from({ length: 14 }).map((_, i) => (
+            <i key={i} className={styles.confettiPiece} />
+          ))}
+        </span>
+      </div>
+    </div>
+  );
 
   return (
     <PageShell
@@ -110,7 +122,10 @@ export function DetailChassis({
       renderFooter={false}
     >
       <div className={styles.scrollHost} ref={contentScrollRef}>
-        <Box as="section" className={styles.hero}>
+        <ReadingHeader title={title} className={styles.readingHeader} action={compactInstall}>
+          {progressRider}
+        </ReadingHeader>
+        <Box as="section" className={clsx(styles.hero, "heading-texture")}>
           <Section paddingBlockStart="none" paddingBlockEnd="none">
             <div className={styles.heroInner}>
               <div className={styles.heroBreadcrumbs}>
@@ -154,30 +169,18 @@ export function DetailChassis({
                 ) : null}
                 {heroExtras}
                 {install ? (
-                  <div className={styles.heroActions}>{install}</div>
+                  <div className={styles.heroActions} data-hero-actions>{install}</div>
                 ) : null}
               </div>
             </div>
           </Section>
-          <div
-            className={styles.progressRider}
-            data-burst={heroBurst ? "true" : undefined}
-            aria-hidden="true"
-          >
-            <span className={styles.progressDuck} />
-            <span className={styles.confetti}>
-              {Array.from({ length: 14 }).map((_, i) => (
-                <i key={i} className={styles.confettiPiece} />
-              ))}
-            </span>
-          </div>
+          {progressRider}
         </Box>
-
         <Box as="section" className={styles.body}>
           <Section paddingBlockStart="none" paddingBlockEnd="none">
             <div className={styles.bodyInner}>
               <div className={styles.layout}>
-                <article className={styles.contentCol}>{children}</article>
+                <article className={styles.contentCol} data-reading-content>{children}</article>
 
                 <aside className={styles.sidebarCol}>
                   <div className={styles.sidebarSticky}>
@@ -328,55 +331,6 @@ function useScrollHostLayout(
   }, [contentScrollRef]);
 }
 
-/** Highlight the section the reader is currently in, below the pinned hero. */
-function useScrollSpy(
-  contentScrollRef: React.RefObject<HTMLDivElement | null>,
-  toc: DetailTocItem[],
-  setActiveSection: React.Dispatch<React.SetStateAction<string>>,
-) {
-  React.useEffect(() => {
-    if (toc.length === 0) return;
-    const scroller = contentScrollRef.current;
-    if (!scroller) return;
-
-    let observer: IntersectionObserver | null = null;
-    const build = () => {
-      observer?.disconnect();
-      const internal = window.matchMedia(TWO_COLUMN_QUERY).matches;
-      const root = internal ? scroller : null;
-      const viewport = internal ? scroller.clientHeight : window.innerHeight;
-      const hero = scroller.querySelector<HTMLElement>(`.${styles.hero}`);
-      const pinned = internal && hero ? hero.getBoundingClientRect().height : 0;
-      const bottomMargin = Math.round(Math.max(0, viewport - pinned) * 0.65);
-
-      observer = new IntersectionObserver(
-        (entries) => {
-          const visible = entries
-            .filter((entry) => entry.isIntersecting)
-            .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
-          if (visible[0]) setActiveSection(visible[0].target.id);
-        },
-        {
-          root,
-          rootMargin: `-${Math.round(pinned)}px 0px -${bottomMargin}px 0px`,
-          threshold: 0,
-        },
-      );
-      toc.forEach((section) => {
-        const el = document.getElementById(section.id);
-        if (el) observer?.observe(el);
-      });
-    };
-
-    build();
-    window.addEventListener("resize", build);
-    return () => {
-      observer?.disconnect();
-      window.removeEventListener("resize", build);
-    };
-  }, [contentScrollRef, toc, setActiveSection]);
-}
-
 const slugify = (text: string) =>
   text
     .toLowerCase()
diff --git a/website/src/components/brand/ExtensionDetail.tsx b/website/src/components/brand/ExtensionDetail.tsx
index a27ec140e2..29a7ecf0df 100644
--- a/website/src/components/brand/ExtensionDetail.tsx
+++ b/website/src/components/brand/ExtensionDetail.tsx
@@ -162,6 +162,11 @@ export function ExtensionDetail({
         { label: item.name },
       ]}
       install={install}
+      compactInstall={installUrl ? (
+        <Button as="a" href={installUrl} variant="primary" size="small" hasArrow={false} leadingVisual={PlusIcon}>
+          Install
+        </Button>
+      ) : null}
       heroExtras={heroExtras}
       sidebar={
         <ResourceMeta
diff --git a/website/src/components/brand/ExtensionsCatalog.tsx b/website/src/components/brand/ExtensionsCatalog.tsx
index 4755a930a7..bcacda92b0 100644
--- a/website/src/components/brand/ExtensionsCatalog.tsx
+++ b/website/src/components/brand/ExtensionsCatalog.tsx
@@ -36,7 +36,7 @@ import {
 import { pageHref } from "./pageHref";
 import type { SearchItem } from "./searchIndex";
 import styles from "./styles/extensions.module.css";
-import { getScrollBehavior } from "./scrollBehavior";
+import { useCatalogPageFocus } from "./useCatalogPageFocus";
 
 const CONTRIBUTE_URL =
   "https://github.com/github/awesome-copilot/blob/main/CONTRIBUTING.md#adding-canvas-extensions";
@@ -149,7 +149,7 @@ export function ExtensionsCatalog({
   const { colorMode } = useTheme();
   const [sortMode, setSortMode] = useState<SortMode>("az");
   const [currentPage, setCurrentPage] = useState(1);
-  const previousPage = React.useRef(currentPage);
+  useCatalogPageFocus(currentPage);
   const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);
   const [copied, setCopied] = useState(false);
   const copyTimer = React.useRef<number | undefined>(undefined);
@@ -241,18 +241,6 @@ export function ExtensionsCatalog({
     page * PAGE_SIZE,
   );
 
-  React.useEffect(() => {
-    if (previousPage.current === currentPage) return;
-    previousPage.current = currentPage;
-    const frame = window.requestAnimationFrame(() => {
-      const catalog = document.getElementById("catalog");
-      if (!catalog) return;
-      catalog.scrollIntoView({ behavior: getScrollBehavior(), block: "start" });
-      catalog.focus({ preventScroll: true });
-    });
-    return () => window.cancelAnimationFrame(frame);
-  }, [currentPage]);
-
   return (
     <PageShell
       styles={styles}
@@ -261,17 +249,17 @@ export function ExtensionsCatalog({
       contributorsTotal={contributorsTotal}
       searchAriaLabel="Search extensions"
     >
-      <Box className={styles.hero}>
+      <Box className={clsx(styles.hero, "heading-texture")}>
         <div className={styles.heroInner}>
           <span className={styles.heroIcon} aria-hidden="true">
             <ExtensionsIcon size={36} />
           </span>
           <Heading as="h1" size="3" className={styles.heroHeading}>
-            Canvas Extensions
+            Extensions
           </Heading>
           <Text as="p" size="300" variant="muted" className={styles.heroText}>
-            Canvas extensions that bring interactive GitHub Copilot app
-            experiences to life — contributed and curated by the community.
+            Interactive panels for the GitHub Copilot app, supplied by
+            community-built canvas extensions.
           </Text>
         </div>
       </Box>
@@ -511,18 +499,15 @@ export function ExtensionsCatalog({
                 Don&rsquo;t see what you&rsquo;re looking for?
               </CTABanner.Heading>
               <CTABanner.Description>
-                This collection is community-built. Share your own canvas
-                extension
-                <br />
-                &mdash;or request one&mdash;to help others get more out of the
-                GitHub Copilot app.
+                Share your own canvas extension or request a canvas to help
+                others get more out of the GitHub Copilot app.
               </CTABanner.Description>
               <CTABanner.ButtonGroup>
                 <Button as="a" href={CONTRIBUTE_URL}>
-                  Submit an extension
+                  Submit a canvas
                 </Button>
                 <Button as="a" href={REQUEST_URL}>
-                  Request an extension
+                  Request a canvas
                 </Button>
               </CTABanner.ButtonGroup>
             </CTABanner>
diff --git a/website/src/components/brand/HomePage.tsx b/website/src/components/brand/HomePage.tsx
index 33f4cb1671..a7493f0102 100644
--- a/website/src/components/brand/HomePage.tsx
+++ b/website/src/components/brand/HomePage.tsx
@@ -1,11 +1,3 @@
-import {
-  BookIcon,
-  BrowserIcon,
-  ChecklistIcon,
-  CopilotIcon,
-  PlugIcon,
-  ZapIcon,
-} from "@primer/octicons-react";
 import { clsx } from "clsx";
 import React from "react";
 
@@ -23,19 +15,22 @@ import {
 } from "@primer/react-brand";
 
 import styles from "./styles/styles.module.css";
+import { AgentsIcon } from "./AgentsIcon";
 import { ContributorsHoverCard } from "./ContributorsHoverCard";
+import { ExtensionsIcon } from "./ExtensionsIcon";
+import { InstructionsIcon } from "./InstructionsIcon";
 import { LearningIcon } from "./LearningIcon";
+import { LearningHubIcon } from "./LearningHubIcon";
 import { PageShell } from "./PageShell";
+import { PluginsIcon } from "./PluginsIcon";
+import { SkillsIcon } from "./SkillsIcon";
 import { pageHref } from "./pageHref";
 import type { SearchItem } from "./searchIndex";
 import { contributorsTotal as siteContributorsTotal } from "../../lib/site-data";
 
 const REPO_URL = "https://github.com/github/awesome-copilot";
-const CONTRIBUTING_URL =
-  "https://github.com/github/awesome-copilot/blob/main/CONTRIBUTING.md";
-
 type ResourceIcon = React.ComponentType<{
-  size?: number | "small" | "medium" | "large";
+  size?: number;
 }>;
 
 type Resource = {
@@ -66,7 +61,7 @@ export type HomePageProps = {
 
 const buildResources = (counts: HomePageCounts): Resource[] => [
   {
-    icon: CopilotIcon,
+    icon: AgentsIcon,
     name: "Agents",
     count: String(counts.agents),
     description:
@@ -75,7 +70,7 @@ const buildResources = (counts: HomePageCounts): Resource[] => [
     id: "agents",
   },
   {
-    icon: ChecklistIcon,
+    icon: InstructionsIcon,
     name: "Instructions",
     count: String(counts.instructions),
     description:
@@ -84,7 +79,7 @@ const buildResources = (counts: HomePageCounts): Resource[] => [
     id: "instructions",
   },
   {
-    icon: ZapIcon,
+    icon: SkillsIcon,
     name: "Skills",
     count: String(counts.skills),
     description:
@@ -93,7 +88,7 @@ const buildResources = (counts: HomePageCounts): Resource[] => [
     id: "skills",
   },
   {
-    icon: PlugIcon,
+    icon: PluginsIcon,
     name: "Plugins",
     count: String(counts.plugins),
     description:
@@ -102,16 +97,16 @@ const buildResources = (counts: HomePageCounts): Resource[] => [
     id: "plugins",
   },
   {
-    icon: BrowserIcon,
+    icon: ExtensionsIcon,
     name: "Extensions",
     count: String(counts.extensions),
     description:
-      "Interactive canvas extensions that enrich the Copilot app experience.",
+      "Interactive panels for the Copilot app, supplied by canvas extensions.",
     page: "extensions",
     id: "extensions",
   },
   {
-    icon: BookIcon,
+    icon: LearningHubIcon,
     name: "Learning Hub",
     count: String(counts.learningHub),
     description:
@@ -139,7 +134,7 @@ export function HomePage({
     >
       <Box className={styles.heroFrame}>
         <Section paddingBlockStart="none" paddingBlockEnd="none">
-          <Box className={styles.heroFrameInner}>
+          <Box className={clsx(styles.heroFrameInner, "heading-grid")}>
             <Stack
               direction="vertical"
               alignItems="center"
@@ -157,15 +152,22 @@ export function HomePage({
                   The community library for GitHub Copilot
                 </Hero.Heading>
                 <Hero.Description>
-                  Discover reusable agents, skills, instructions, hooks, and
-                  tools built by developers to help you ship faster with
-                  Copilot.
+                  Learn Copilot through hands-on guides, then explore agents,
+                  skills, and tools built by the community.
                 </Hero.Description>
-                <Hero.PrimaryAction href={REPO_URL}>
-                  Explore repository
+                <Hero.PrimaryAction
+                  href={pageHref("learning-hub-copilot-app")}
+                  className={styles.heroPrimaryAction}
+                  leadingVisual={
+                    <span aria-hidden="true">
+                      <LearningHubIcon size={20} />
+                    </span>
+                  }
+                >
+                  Explore Learning Hub
                 </Hero.PrimaryAction>
-                <Hero.SecondaryAction href={CONTRIBUTING_URL}>
-                  Become a contributor
+                <Hero.SecondaryAction href={REPO_URL}>
+                  View on GitHub
                 </Hero.SecondaryAction>
               </Hero>
             </Stack>
@@ -183,7 +185,7 @@ export function HomePage({
             {resources.map((item) => (
               <Grid.Column
                 key={item.name}
-                span={{ xsmall: 12, small: 6, xlarge: 4 }}
+                span={{ xsmall: 12, medium: 6, xlarge: 4 }}
                 className={clsx(
                   styles.cardGridColumn,
                   styles.cardGridColumnArrowHover,
@@ -195,11 +197,15 @@ export function HomePage({
                     fullWidth
                     ctaVariant="arrow"
                     ctaText={`Explore ${item.name}`}
+                    disableAnimation
                     backgroundColor="none"
                     className={styles.resourceCard}
                   >
                     <Card.Heading as="h2" size="5">
                       <span className={styles.cardHeadingRow}>
+                        <span className={styles.resourceIcon} aria-hidden="true">
+                          <item.icon size={24} />
+                        </span>
                         <span>{item.name}</span>
                         {item.count ? (
                           <Token variant="default">{item.count}</Token>
@@ -218,34 +224,33 @@ export function HomePage({
       <Box className={styles.ctaFrame}>
         <Section paddingBlockStart="none" paddingBlockEnd="none">
           <Box id="learning-hub" className={styles.ctaFrameInner}>
-            <CTABanner align="center" hasGridLines>
+            <CTABanner align="center">
               <CTABanner.Logo>
                 <LearningIcon size={64} />
               </CTABanner.Logo>
               <CTABanner.Heading as="h2" size="3">
-                Master GitHub Copilot
+                Learn by building
               </CTABanner.Heading>
               <CTABanner.Description>
-                Read the documentation to learn every feature and workflow, then
-                head to GitHub&rsquo;s YouTube channel for videos, demos, and
-                talks.
+                Start with the basics, follow a hands-on workshop, or explore
+                practical guides for your next Copilot workflow.
               </CTABanner.Description>
               <CTABanner.ButtonGroup>
                 <Button
                   as="a"
-                  href="https://docs.github.com/en/copilot"
+                  href="https://www.youtube.com/@GitHub/featured"
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  Read the docs
+                  Watch on YouTube
                 </Button>
                 <Button
                   as="a"
-                  href="https://www.youtube.com/@GitHub/featured"
+                  href="https://docs.github.com/en/copilot"
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  Watch on YouTube
+                  Read the docs
                 </Button>
               </CTABanner.ButtonGroup>
             </CTABanner>
diff --git a/website/src/components/brand/InstructionDetail.tsx b/website/src/components/brand/InstructionDetail.tsx
index a1e4a03986..81b6faacd4 100644
--- a/website/src/components/brand/InstructionDetail.tsx
+++ b/website/src/components/brand/InstructionDetail.tsx
@@ -146,6 +146,11 @@ export function InstructionDetail({
         { label: item.title },
       ]}
       install={install}
+      compactInstall={
+        <Button as="a" href={vscodeUrl} variant="primary" size="small" hasArrow={false} leadingVisual={PlusIcon}>
+          Install
+        </Button>
+      }
       heroExtras={heroExtras}
       sidebar={
         <ResourceMeta
diff --git a/website/src/components/brand/InstructionsCatalog.tsx b/website/src/components/brand/InstructionsCatalog.tsx
index 0b97acdbad..27703105a0 100644
--- a/website/src/components/brand/InstructionsCatalog.tsx
+++ b/website/src/components/brand/InstructionsCatalog.tsx
@@ -19,6 +19,8 @@ import { clsx } from "clsx";
 import { useMemo, useState } from "react";
 
 import { PageShell } from "./PageShell";
+import { InstructionsIcon } from "./InstructionsIcon";
+import { useCatalogPageFocus } from "./useCatalogPageFocus";
 import { CatalogSortControl, CATALOG_SORT_OPTIONS } from "./CatalogSortControl";
 import {
   daysSince,
@@ -115,6 +117,7 @@ export function InstructionsCatalog({
   const { colorMode } = useTheme();
   const [sortMode, setSortMode] = useState<SortMode>("az");
   const [currentPage, setCurrentPage] = useState(1);
+  useCatalogPageFocus(currentPage);
   const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);
   const [filters, setFilters] = useState<FilterState>(emptyFilters);
   const [expandedGroups, setExpandedGroups] = useState<
@@ -206,167 +209,9 @@ export function InstructionsCatalog({
       contributorsTotal={contributorsTotal}
       searchAriaLabel="Search instructions"
     >
-      <Box className={styles.hero}>
+      <Box className={clsx(styles.hero, "heading-texture")}>
         <div className={styles.heroInner}>
-          <svg
-            className={styles.heroIcon}
-            width="48"
-            height="48"
-            viewBox="0 0 96 96"
-            fill="none"
-            aria-hidden="true"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M26 18C26 21.3137 28.6863 24 32 24C35.3137 24 38 21.3137 38 18C38 14.6863 35.3137 12 32 12C28.6863 12 26 14.6863 26 18Z"
-              fill="#96A199"
-            />
-            <path
-              d="M26 61C26 64.3137 28.6863 67 32 67C35.3137 67 38 64.3137 38 61C38 57.6863 35.3137 55 32 55C28.6863 55 26 57.6863 26 61Z"
-              fill="#96A199"
-            />
-            <path
-              d="M2 51.75C2 48.0221 5.134 45 8.99999 45C12.866 45 16 48.0221 16 51.75"
-              stroke="currentColor"
-              strokeWidth="4"
-              strokeMiterlimit="10"
-              strokeLinecap="round"
-            />
-            <path
-              d="M16 52C16 54 14.5 56 12.2991 57.5L2 64H17"
-              stroke="currentColor"
-              strokeWidth="4"
-              strokeMiterlimit="10"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-            <path
-              d="M2 5L8.96802 2.48376C9.61985 2.24838 10.3077 2.7313 10.3077 3.42432V21"
-              stroke="currentColor"
-              strokeWidth="4"
-              strokeMiterlimit="10"
-              strokeLinecap="round"
-            />
-            <path
-              d="M17 21H2"
-              stroke="currentColor"
-              strokeWidth="4"
-              strokeMiterlimit="10"
-              strokeLinecap="round"
-            />
-            <path
-              d="M48 2H55"
-              stroke="currentColor"
-              strokeWidth="4"
-              strokeMiterlimit="10"
-              strokeLinecap="round"
-            />
-            <path
-              d="M65 2H83"
-              stroke="currentColor"
-              strokeWidth="4"
-              strokeMiterlimit="10"
-              strokeLinecap="round"
-            />
-            <path
-              d="M48 14H60"
-              stroke="currentColor"
-              strokeWidth="4"
-              strokeMiterlimit="10"
-              strokeLinecap="round"
-            />
-            <path
-              d="M60 14H72"
-              stroke="currentColor"
-              strokeWidth="4"
-              strokeMiterlimit="10"
-              strokeLinecap="round"
-            />
-            <path
-              d="M72 14H94"
-              stroke="currentColor"
-              strokeWidth="4"
-              strokeMiterlimit="10"
-              strokeLinecap="round"
-            />
-            <path
-              d="M48 26H76"
-              stroke="currentColor"
-              strokeWidth="4"
-              strokeMiterlimit="10"
-              strokeLinecap="round"
-            />
-            <path
-              d="M76 26H94"
-              stroke="currentColor"
-              strokeWidth="4"
-              strokeMiterlimit="10"
-              strokeLinecap="round"
-            />
-            <path
-              d="M48 44H55"
-              stroke="#96A199"
-              strokeWidth="4"
-              strokeMiterlimit="10"
-              strokeLinecap="round"
-            />
-            <path
-              d="M65 44H83"
-              stroke="#96A199"
-              strokeWidth="4"
-              strokeMiterlimit="10"
-              strokeLinecap="round"
-            />
-            <path
-              d="M48 56H60"
-              stroke="#96A199"
-              strokeWidth="4"
-              strokeMiterlimit="10"
-              strokeLinecap="round"
-            />
-            <path
-              d="M60 56H72"
-              stroke="#96A199"
-              strokeWidth="4"
-              strokeMiterlimit="10"
-              strokeLinecap="round"
-            />
-            <path
-              d="M72 56H94"
-              stroke="#96A199"
-              strokeWidth="4"
-              strokeMiterlimit="10"
-              strokeLinecap="round"
-            />
-            <path
-              d="M48 68H76"
-              stroke="#96A199"
-              strokeWidth="4"
-              strokeMiterlimit="10"
-              strokeLinecap="round"
-            />
-            <path
-              d="M76 68H94"
-              stroke="#96A199"
-              strokeWidth="4"
-              strokeMiterlimit="10"
-              strokeLinecap="round"
-            />
-            <path
-              d="M48 93H88"
-              stroke="#96A199"
-              strokeWidth="4"
-              strokeMiterlimit="10"
-              strokeLinecap="round"
-            />
-            <path
-              d="M48 81H94"
-              stroke="#96A199"
-              strokeWidth="4"
-              strokeMiterlimit="10"
-              strokeLinecap="round"
-            />
-          </svg>
+          <InstructionsIcon className={styles.heroIcon} />
           <Heading as="h1" size="3" className={styles.heroHeading}>
             Instructions
           </Heading>
@@ -377,7 +222,7 @@ export function InstructionsCatalog({
         </div>
       </Box>
 
-      <Section id="catalog" paddingBlockStart="none" paddingBlockEnd="none">
+      <Section id="catalog" tabIndex={-1} paddingBlockStart="none" paddingBlockEnd="none">
         <Box className={styles.catalog}>
           <aside className={styles.filterNav} aria-label="Filter instructions">
             <button
diff --git a/website/src/components/brand/InstructionsIcon.tsx b/website/src/components/brand/InstructionsIcon.tsx
new file mode 100644
index 0000000000..bdc3152eda
--- /dev/null
+++ b/website/src/components/brand/InstructionsIcon.tsx
@@ -0,0 +1,168 @@
+type InstructionsIconProps = {
+  size?: number;
+  className?: string;
+};
+
+export function InstructionsIcon({ size = 48, className }: InstructionsIconProps) {
+  return (
+    <svg
+      className={className}
+      width={size}
+      height={size}
+      viewBox="0 0 96 96"
+      fill="none"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M26 18C26 21.3137 28.6863 24 32 24C35.3137 24 38 21.3137 38 18C38 14.6863 35.3137 12 32 12C28.6863 12 26 14.6863 26 18Z"
+        fill="#96A199"
+      />
+      <path
+        d="M26 61C26 64.3137 28.6863 67 32 67C35.3137 67 38 64.3137 38 61C38 57.6863 35.3137 55 32 55C28.6863 55 26 57.6863 26 61Z"
+        fill="#96A199"
+      />
+      <path
+        d="M2 51.75C2 48.0221 5.134 45 8.99999 45C12.866 45 16 48.0221 16 51.75"
+        stroke="currentColor"
+        strokeWidth="4"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+      <path
+        d="M16 52C16 54 14.5 56 12.2991 57.5L2 64H17"
+        stroke="currentColor"
+        strokeWidth="4"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2 5L8.96802 2.48376C9.61985 2.24838 10.3077 2.7313 10.3077 3.42432V21"
+        stroke="currentColor"
+        strokeWidth="4"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+      <path
+        d="M17 21H2"
+        stroke="currentColor"
+        strokeWidth="4"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+      <path
+        d="M48 2H55"
+        stroke="currentColor"
+        strokeWidth="4"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+      <path
+        d="M65 2H83"
+        stroke="currentColor"
+        strokeWidth="4"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+      <path
+        d="M48 14H60"
+        stroke="currentColor"
+        strokeWidth="4"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+      <path
+        d="M60 14H72"
+        stroke="currentColor"
+        strokeWidth="4"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+      <path
+        d="M72 14H94"
+        stroke="currentColor"
+        strokeWidth="4"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+      <path
+        d="M48 26H76"
+        stroke="currentColor"
+        strokeWidth="4"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+      <path
+        d="M76 26H94"
+        stroke="currentColor"
+        strokeWidth="4"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+      <path
+        d="M48 44H55"
+        stroke="#96A199"
+        strokeWidth="4"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+      <path
+        d="M65 44H83"
+        stroke="#96A199"
+        strokeWidth="4"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+      <path
+        d="M48 56H60"
+        stroke="#96A199"
+        strokeWidth="4"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+      <path
+        d="M60 56H72"
+        stroke="#96A199"
+        strokeWidth="4"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+      <path
+        d="M72 56H94"
+        stroke="#96A199"
+        strokeWidth="4"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+      <path
+        d="M48 68H76"
+        stroke="#96A199"
+        strokeWidth="4"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+      <path
+        d="M76 68H94"
+        stroke="#96A199"
+        strokeWidth="4"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+      <path
+        d="M48 93H88"
+        stroke="#96A199"
+        strokeWidth="4"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+      <path
+        d="M48 81H94"
+        stroke="#96A199"
+        strokeWidth="4"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
diff --git a/website/src/components/brand/LargeFooter.tsx b/website/src/components/brand/LargeFooter.tsx
index c83b11d573..2f8cfe74aa 100644
--- a/website/src/components/brand/LargeFooter.tsx
+++ b/website/src/components/brand/LargeFooter.tsx
@@ -1,8 +1,9 @@
 import { MinimalFooter } from "@primer/react-brand";
+import styles from "./styles/footer.module.css";
 
 export function LargeFooter() {
   return (
-    <MinimalFooter logoHref="https://github.com" socialLinks={false}>
+    <MinimalFooter className={styles.footer} logoHref="https://github.com" socialLinks={false}>
       <MinimalFooter.Link href="https://docs.github.com/site-policy/github-terms/github-terms-of-service">
         Terms
       </MinimalFooter.Link>
diff --git a/website/src/components/brand/LearningArticleLayout.tsx b/website/src/components/brand/LearningArticleLayout.tsx
index 507a8790ae..3cac5054c6 100644
--- a/website/src/components/brand/LearningArticleLayout.tsx
+++ b/website/src/components/brand/LearningArticleLayout.tsx
@@ -22,7 +22,10 @@ import {
 } from "@primer/react-brand";
 
 import styles from "./styles/github-copilot-app.module.css";
+import navStyles from "./styles/TopNav.module.css";
 import { LargeFooter } from "./LargeFooter";
+import { ReadingHeader } from "./ReadingHeader";
+import { useAgentDetailHeroPin, useAgentDetailProgress, useReadingScrollSpy } from "./useAgentDetailScroll";
 import { TypingText } from "./TypingText";
 import type { PrototypePageProps } from "./pageHref";
 import { getAwesomeCopilotNavLinks } from "./navigation";
@@ -45,12 +48,6 @@ import {
 const CONTRIBUTING_URL =
   "https://github.com/github/awesome-copilot/blob/main/CONTRIBUTING.md";
 
-// Minimum article reading strip (px) that must remain below a pinned hero. When
-// pinning the hero would leave less than this — because the viewport is short or
-// the hero is tall (e.g. the CLI page's install bar) — the hero is released to
-// scroll away instead of trapping the article in a narrow band.
-const MIN_HERO_READING = 464;
-
 /** Copyable, syntax-highlighted code block for learning articles. */
 export function CopyBlock({
   code,
@@ -189,186 +186,38 @@ function LearningArticleLayoutBody({
   const contentScrollRef = React.useRef<HTMLDivElement>(null);
   const [showBackToTop, setShowBackToTop] = React.useState(false);
   const [heroBurst, setHeroBurst] = React.useState(false);
-  const heroBurstRef = React.useRef(false);
   const [activeSection, setActiveSection] = React.useState(
     tocSections[0]?.id ?? "",
   );
-  // Visible height of the hero once it pins to the top of the scroll region
-  // (measured below). The scroll-spy detection zone is offset by this so a
-  // section only becomes "active" once it clears the fixed hero.
-  const [pinnedHeight, setPinnedHeight] = React.useState(0);
-
-  const scrollToTop = () => {
-    contentScrollRef.current?.scrollTo({
-      top: 0,
-      behavior: getScrollBehavior(),
-    });
-  };
-
-  // Scroll-spy: highlight the current section in the "In this article" list. The
-  // pinned hero covers the top of the scroll region, so the detection zone is
-  // pushed below it (top margin = hero height) and its lower bound tracks the
-  // remaining visible area — reproducing "top third of what the reader can see".
-  React.useEffect(() => {
-    const scroller = contentScrollRef.current;
-    if (!scroller) return;
-    let observer: IntersectionObserver | null = null;
-    const build = () => {
-      observer?.disconnect();
-      const viewport = scroller.clientHeight;
-      const below = Math.max(0, viewport - pinnedHeight);
-      const bottomMargin = Math.round(below * 0.65);
-      observer = new IntersectionObserver(
-        (entries) => {
-          const visible = entries
-            .filter((entry) => entry.isIntersecting)
-            .sort(
-              (a, b) => a.boundingClientRect.top - b.boundingClientRect.top,
-            );
-          if (visible[0]) {
-            setActiveSection(visible[0].target.id);
-          }
-        },
-        {
-          root: scroller,
-          rootMargin: `-${Math.round(pinnedHeight)}px 0px -${bottomMargin}px 0px`,
-          threshold: 0,
-        },
-      );
-      tocSections.forEach((section) => {
-        const el = document.getElementById(section.id);
-        if (el) observer?.observe(el);
-      });
-    };
-    build();
-    window.addEventListener("resize", build);
-    return () => {
-      observer?.disconnect();
-      window.removeEventListener("resize", build);
-    };
-  }, [tocSections, pinnedHeight]);
-
-  // Expose the scroll region's scrollbar width so the fixed top bar and hero can
-  // inset by the same amount and keep every vertical gridline aligned.
-  React.useEffect(() => {
-    const el = contentScrollRef.current;
-    if (!el) return;
-    const page = el.parentElement;
-    const setRegion = () => {
-      const scrollbar = el.offsetWidth - el.clientWidth;
-      page?.style.setProperty("--app-scrollbar", `${scrollbar}px`);
-      // Align the progress line + duck to the framed content (between the outer
-      // vertical gridlines) rather than the viewport edge: expose the frame's
-      // left inset and width so the line and the duck start at the first
-      // vertical line on load and end at the last one.
-      const heroEl = page?.getElementsByClassName(styles.hero)[0];
-      const frameEl = page?.getElementsByClassName(styles.heroInner)[0];
-      const contentEl = page?.getElementsByClassName(styles.heroContent)[0];
-      if (heroEl && frameEl) {
-        const heroRect = heroEl.getBoundingClientRect();
-        const frameRect = frameEl.getBoundingClientRect();
-        const start = Math.round((frameRect.left - heroRect.left) * 100) / 100;
-        const width = Math.round(frameRect.width * 100) / 100;
-        page?.style.setProperty("--app-frame-start", `${start}px`);
-        page?.style.setProperty("--app-frame-width", `${width}px`);
-        // Split the hero into the breadcrumb band that scrolls off the top and
-        // the body that pins below it. --app-hero-crumb is the negative sticky
-        // offset (so the crumbs scroll out of view) and --app-hero-pinned is the
-        // hero's remaining visible height (so the sticky TOC and in-page anchor
-        // jumps clear the pinned hero). Both are parent-minus-child offsets, so
-        // they stay correct whether the hero is in flow or stuck.
-        if (contentEl) {
-          const contentRect = contentEl.getBoundingClientRect();
-          // Geometry of the hero split, independent of whether it is currently
-          // pinned (both are parent-minus-child offsets): the breadcrumb band
-          // that scrolls off the top, and the body that would pin below it.
-          const crumbBand = Math.round((contentRect.top - heroRect.top) * 100) / 100;
-          const contentBand = Math.round((heroRect.bottom - contentRect.top) * 100) / 100;
-          // Only pin the hero in the two-column layout AND when doing so still
-          // leaves a usable reading strip below it. On short viewports — or when
-          // the hero is tall (e.g. the CLI install bar) — release it so the
-          // article isn't squeezed into a narrow horizontal strip. Driven here
-          // rather than by a fixed max-height media query so the threshold
-          // adapts to each page's actual hero height.
-          const twoColumn = window.matchMedia("(min-width: 75rem)").matches;
-          const roomBelow = el.clientHeight - contentBand;
-          const shouldPin = twoColumn && roomBelow >= MIN_HERO_READING;
-          const crumb = shouldPin ? crumbBand : 0;
-          const pinned = shouldPin ? contentBand : 0;
-          if (page) page.dataset.heroPin = shouldPin ? "true" : "false";
-          page?.style.setProperty("--app-hero-crumb", `${crumb}px`);
-          page?.style.setProperty("--app-hero-pinned", `${pinned}px`);
-          setPinnedHeight((prev) =>
-            Math.abs(prev - pinned) > 0.5 ? pinned : prev,
-          );
-        }
-      }
-    };
-    setRegion();
-    window.addEventListener("resize", setRegion);
-    // The hero's height settles after fonts load and the install bar lays out,
-    // so re-measure whenever it resizes to keep --app-hero-crumb / -pinned exact
-    // (the offsets are scroll-invariant, so observing while pinned is safe).
-    const heroEl = page?.getElementsByClassName(styles.hero)[0];
-    let observer: ResizeObserver | undefined;
-    if (heroEl && typeof ResizeObserver !== "undefined") {
-      observer = new ResizeObserver(() => setRegion());
-      observer.observe(heroEl);
-    }
-    return () => {
-      window.removeEventListener("resize", setRegion);
-      observer?.disconnect();
-    };
-  }, []);
+  const pinnedHeight = useAgentDetailHeroPin(contentScrollRef, {
+    hero: styles.hero,
+    heroInner: styles.heroInner,
+  }, "app");
+  const scrollToTop = useAgentDetailProgress(
+    contentScrollRef,
+    setShowBackToTop,
+    setHeroBurst,
+    "app",
+  );
+  useReadingScrollSpy(contentScrollRef, tocSections, pinnedHeight, setActiveSection);
 
-  // Drive the hero's green bottom line as a reading-progress indicator. The
-  // "finish line" is the scroll position where the last article title reaches
-  // the reading zone, so the line fills to the very last vertical gridline
-  // exactly when the reader arrives at that title, and the duck bursts into
-  // confetti at the end of the line. An ease-out mapping keeps the line visibly
-  // moving from the very first scroll.
-  React.useEffect(() => {
-    const el = contentScrollRef.current;
-    if (!el) return;
-    const page = el.parentElement;
-    const lastId = tocSections[tocSections.length - 1]?.id;
-    let lastHeadingEl: HTMLElement | null = null;
-    const setProgress = () => {
-      if (!lastHeadingEl && lastId) {
-        const sectionEl = document.getElementById(lastId);
-        lastHeadingEl =
-          (sectionEl?.querySelector("h2") as HTMLElement | null) ?? sectionEl;
-      }
-      const rootRect = el.getBoundingClientRect();
-      let finish = el.scrollHeight - el.clientHeight;
-      if (lastHeadingEl) {
-        const headingRect = lastHeadingEl.getBoundingClientRect();
-        const headingOffset = headingRect.top - rootRect.top + el.scrollTop;
-        finish = Math.max(1, headingOffset - rootRect.height * 0.6);
-      }
-      const progress = finish > 0 ? Math.min(1, el.scrollTop / finish) : 0;
-      const eased = Math.max(progress > 0 ? Math.pow(progress, 0.5) : 0, 0.055);
-      page?.style.setProperty("--app-progress", String(eased));
-      setShowBackToTop(el.scrollTop > 200);
-      const reached = progress >= 1;
-      if (reached !== heroBurstRef.current) {
-        heroBurstRef.current = reached;
-        setHeroBurst(reached);
-      }
-    };
-    setProgress();
-    el.addEventListener("scroll", setProgress, { passive: true });
-    window.addEventListener("resize", setProgress);
-    return () => {
-      el.removeEventListener("scroll", setProgress);
-      window.removeEventListener("resize", setProgress);
-    };
-  }, [tocSections]);
+  const progressRider = (
+    <div className={styles.progressViewport} aria-hidden="true">
+      <div className={styles.progressRider} data-burst={heroBurst ? "true" : undefined}>
+        <span className={styles.progressDuck} />
+        <span className={styles.confetti}>
+          {Array.from({ length: 14 }).map((_, i) => (
+            <i key={i} className={styles.confettiPiece} />
+          ))}
+        </span>
+      </div>
+    </div>
+  );
 
   return (
     <Box className={styles.page} backgroundColor="default" data-mode={colorMode}>
       <SkipLink />
-      <header className={styles.topBar}>
+      <header className={clsx(styles.topBar, navStyles.header)}>
         <nav className={styles.topBarInner} aria-label="Primary">
           <a href={pageHref()} className={styles.subNavTitle}>
             <MarkGithubIcon size={20} />
@@ -403,7 +252,10 @@ function LearningArticleLayoutBody({
 
       <div className={styles.scrollHost} ref={contentScrollRef}>
         <main id="main-content" tabIndex={-1}>
-        <Box as="section" className={styles.hero}>
+        <ReadingHeader title={heroTitle} className={styles.readingHeader}>
+          {progressRider}
+        </ReadingHeader>
+        <Box as="section" className={clsx(styles.hero, "heading-texture")}>
           <Section paddingBlockStart="none" paddingBlockEnd="none">
             <div className={styles.heroInner}>
             <div className={styles.heroBreadcrumbs}>
@@ -458,6 +310,7 @@ function LearningArticleLayoutBody({
               ) : null}
               {heroCta ? (
                 <div
+                  data-hero-actions
                   className={clsx(
                     styles.heroActions,
                     animateHeroTitle && styles.heroReveal,
@@ -479,25 +332,13 @@ function LearningArticleLayoutBody({
             </div>
           </div>
         </Section>
-        <div
-          className={styles.progressRider}
-          data-burst={heroBurst ? "true" : undefined}
-          aria-hidden="true"
-        >
-          <span className={styles.progressDuck} />
-          <span className={styles.confetti}>
-            {Array.from({ length: 14 }).map((_, i) => (
-              <i key={i} className={styles.confettiPiece} />
-            ))}
-          </span>
-        </div>
+        {progressRider}
       </Box>
-
       <Box as="section" className={styles.body}>
           <Section paddingBlockStart="none" paddingBlockEnd="none">
             <div className={styles.bodyInner}>
               <div className={styles.layout}>
-                <article className={styles.contentCol}>{children}</article>
+                <article className={styles.contentCol} data-reading-content>{children}</article>
 
                 <aside className={styles.sidebarCol}>
                   <div className={styles.sidebarSticky}>
diff --git a/website/src/components/brand/LearningHubIcon.tsx b/website/src/components/brand/LearningHubIcon.tsx
index a05495d83f..525553b6fa 100644
--- a/website/src/components/brand/LearningHubIcon.tsx
+++ b/website/src/components/brand/LearningHubIcon.tsx
@@ -1,8 +1,11 @@
+import { useId } from "react";
+
 type LearningHubIconProps = {
   size?: number;
 };
 
 export function LearningHubIcon({ size = 36 }: LearningHubIconProps) {
+  const clipId = `learning-hub-icon-${useId()}`;
   return (
     <svg
       width={size}
@@ -13,7 +16,7 @@ export function LearningHubIcon({ size = 36 }: LearningHubIconProps) {
       aria-label="GitHub Copilot Learning Hub"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clipPath="url(#Learning Hub-icon-clip)">
+      <g clipPath={`url(#${clipId})`}>
         <path
           d="M48 23C50 12.9543 59.9543 6 71 6H90C92.2091 6 94 7.79086 94 10V81C94 83.2091 92.2091 85 90 85H72.5C68.0769 85 63.9581 87.061 61.3028 90.4876C60.3979 91.6553 59.0772 92.5 57.6 92.5H38.4C36.9228 92.5 35.6021 91.6553 34.6972 90.4876C32.0419 87.061 27.9231 85 23.5 85H6C3.79086 85 2 83.2091 2 81V43.5"
           stroke="var(--brand-color-text-default)"
@@ -52,7 +55,7 @@ export function LearningHubIcon({ size = 36 }: LearningHubIconProps) {
         />
       </g>
       <defs>
-        <clipPath id="Learning Hub-icon-clip">
+        <clipPath id={clipId}>
           <rect width="96" height="96" />
         </clipPath>
       </defs>
diff --git a/website/src/components/brand/LearningHubIndex.tsx b/website/src/components/brand/LearningHubIndex.tsx
index 7a5d85a3e1..f10ca05b52 100644
--- a/website/src/components/brand/LearningHubIndex.tsx
+++ b/website/src/components/brand/LearningHubIndex.tsx
@@ -26,6 +26,7 @@ import styles from "./styles/learning-hub-copilot-app.module.css";
 import { DuckIcon } from "./DuckIcon";
 import { LearningHubIcon } from "./LearningHubIcon";
 import { PageShell } from "./PageShell";
+import { useCatalogPageFocus } from "./useCatalogPageFocus";
 import { ScrambleText } from "./ScrambleText";
 import { pageHref } from "./pageHref";
 import type { SearchItem } from "./searchIndex";
@@ -228,6 +229,7 @@ function LearningHubIndexBody({
 }) {
   const { colorMode } = useTheme();
   const [currentPage, setCurrentPage] = useState(1);
+  useCatalogPageFocus(currentPage);
   const [searchTerm, setSearchTerm] = useState("");
   const [heroSearchFocused, setHeroSearchFocused] = useState(false);
   const [heroActiveIndex, setHeroActiveIndex] = useState(-1);
@@ -416,7 +418,7 @@ function LearningHubIndexBody({
 
   return (
     <>
-      <Box className={styles.hero}>
+      <Box className={clsx(styles.hero, "heading-texture")}>
         <div className={styles.heroInner}>
           <div className={styles.heroTop}>
             <span className={styles.heroIcon} aria-hidden="true">
@@ -661,6 +663,7 @@ function LearningHubIndexBody({
 
       <Section
         id="catalog"
+        tabIndex={-1}
         className={styles.catalogSection}
         paddingBlockStart="none"
         paddingBlockEnd="none"
diff --git a/website/src/components/brand/PageShell.tsx b/website/src/components/brand/PageShell.tsx
index f92b6b3eb9..3c45598eec 100644
--- a/website/src/components/brand/PageShell.tsx
+++ b/website/src/components/brand/PageShell.tsx
@@ -1,5 +1,6 @@
 import { MarkGithubIcon } from "@primer/octicons-react";
 import { Box, Button, ThemeProvider, useTheme } from "@primer/react-brand";
+import { clsx } from "clsx";
 import type { ReactNode } from "react";
 
 import { contributorsTotal as siteContributorsTotal } from "../../lib/site-data";
@@ -8,6 +9,7 @@ import { LanguageSelect } from "./LanguageSelect";
 import { LargeFooter } from "./LargeFooter";
 import { SkipLink } from "./SkipLink";
 import { TopNav } from "./TopNav";
+import navStyles from "./styles/TopNav.module.css";
 import { TopNavSearch } from "./TopNavSearch";
 import { getAwesomeCopilotNavLinks, type AwesomeCopilotPage } from "./navigation";
 import { pageHref } from "./pageHref";
@@ -103,7 +105,7 @@ function PageShellBody({
   return (
     <Box className={styles.page} backgroundColor="default" data-mode={colorMode}>
       <SkipLink />
-      <header className={styles.topBar}>
+      <header className={clsx(styles.topBar, navStyles.header)}>
         <nav className={styles.topBarInner} aria-label="Primary">
           <a href={pageHref()} className={styles.subNavTitle}>
             <MarkGithubIcon size={24} />
diff --git a/website/src/components/brand/PluginDetail.tsx b/website/src/components/brand/PluginDetail.tsx
index c52b8b22f5..0163b5eea5 100644
--- a/website/src/components/brand/PluginDetail.tsx
+++ b/website/src/components/brand/PluginDetail.tsx
@@ -209,6 +209,11 @@ export function PluginDetail({
         { label: item.name },
       ]}
       install={install}
+      compactInstall={
+        <Button as="a" href={appInstallUrl} variant="primary" size="small" hasArrow={false} leadingVisual={PlusIcon}>
+          Install
+        </Button>
+      }
       heroExtras={heroExtras}
       sidebar={
         <ResourceMeta
diff --git a/website/src/components/brand/PluginsCatalog.tsx b/website/src/components/brand/PluginsCatalog.tsx
index 36f0b1b39d..2c141080aa 100644
--- a/website/src/components/brand/PluginsCatalog.tsx
+++ b/website/src/components/brand/PluginsCatalog.tsx
@@ -15,7 +15,7 @@ import {
   useTheme,
 } from "@primer/react-brand";
 import { clsx } from "clsx";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useMemo, useState } from "react";
 
 import { externalRepoUrl, type ExternalSource } from "../../lib/external-source";
 import { PageShell } from "./PageShell";
@@ -25,7 +25,7 @@ import { daysSince, toggleValue } from "./catalogFilters";
 import { pageHref } from "./pageHref";
 import type { SearchItem } from "./searchIndex";
 import styles from "./styles/plugins.module.css";
-import { getScrollBehavior } from "./scrollBehavior";
+import { useCatalogPageFocus } from "./useCatalogPageFocus";
 
 const CONTRIBUTE_URL =
   "https://github.com/github/awesome-copilot/blob/main/docs/README.plugins.md#how-to-contribute";
@@ -126,7 +126,7 @@ export function PluginsCatalog({
   const { colorMode } = useTheme();
   const [sortMode, setSortMode] = useState<SortMode>("az");
   const [currentPage, setCurrentPage] = useState(1);
-  const previousPage = useRef(currentPage);
+  useCatalogPageFocus(currentPage);
   const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);
 
   const [filters, setFilters] = useState<FilterState>(emptyFilters);
@@ -198,18 +198,6 @@ export function PluginsCatalog({
     page * pageSize,
   );
 
-  useEffect(() => {
-    if (previousPage.current === currentPage) return;
-    previousPage.current = currentPage;
-    const frame = window.requestAnimationFrame(() => {
-      const catalog = document.getElementById("catalog");
-      if (!catalog) return;
-      catalog.scrollIntoView({ behavior: getScrollBehavior(), block: "start" });
-      catalog.focus({ preventScroll: true });
-    });
-    return () => window.cancelAnimationFrame(frame);
-  }, [currentPage]);
-
   return (
     <PageShell
       styles={styles}
@@ -218,7 +206,7 @@ export function PluginsCatalog({
       contributorsTotal={contributorsTotal}
       searchAriaLabel="Search plugins"
     >
-      <Box className={styles.hero}>
+      <Box className={clsx(styles.hero, "heading-texture")}>
         <div className={styles.heroInner}>
           <span className={styles.heroIcon} aria-hidden="true">
             <PluginsIcon size={36} />
diff --git a/website/src/components/brand/ReadingHeader.tsx b/website/src/components/brand/ReadingHeader.tsx
new file mode 100644
index 0000000000..411f07737d
--- /dev/null
+++ b/website/src/components/brand/ReadingHeader.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { clsx } from "clsx";
+import styles from "./styles/reading-header.module.css";
+
+/** A zero-height sticky slot keeps the expanded hero's scroll geometry intact. */
+export function ReadingHeader({
+  title,
+  className,
+  action,
+  children,
+}: {
+  title: string;
+  className: string;
+  action?: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className={styles.slot} data-reading-header inert aria-hidden="true">
+      <div className={clsx(styles.surface, className)}>
+        <div className={styles.row}>
+          <div className={styles.title} title={title}>{title}</div>
+          {action ? <div className={styles.action} data-reading-action>{action}</div> : null}
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/website/src/components/brand/SkillDetail.tsx b/website/src/components/brand/SkillDetail.tsx
index 07a61e57d9..528b2aa3ad 100644
--- a/website/src/components/brand/SkillDetail.tsx
+++ b/website/src/components/brand/SkillDetail.tsx
@@ -282,6 +282,17 @@ export function SkillDetail({
         { label: item.title },
       ]}
       install={install}
+      compactInstall={
+        <Button
+          variant="primary"
+          size="small"
+          hasArrow={false}
+          onClick={handleCopyInstall}
+          leadingVisual={copied ? CheckIcon : CopyIcon}
+        >
+          {copied ? "Copied" : "Copy install command"}
+        </Button>
+      }
       heroExtras={
         <div className={styles.codeBlockWrap}>
           <span className={styles.codeLabel}>Install with the GitHub CLI</span>
@@ -423,7 +434,7 @@ function FileView({
   // Non-primary markdown assets are parsed in the browser; `marked` and the
   // sanitizer are only pulled in when such a file is actually opened.
   React.useEffect(() => {
-    if (isPrimary || kind !== "markdown" || text === undefined) {
+    if (!active || isPrimary || kind !== "markdown" || text === undefined) {
       setMarkdown(null);
       return;
     }
@@ -436,14 +447,17 @@ function FileView({
       if (cancelled) return;
       setMarkdown(
         enhanceMarkdownA11y(
-          sanitizeHtml(marked.parse(text, { async: false }) as string),
+          sanitizeHtml(marked.parse(text, { async: false }) as string, {
+            rawBase,
+            filePath: active.path,
+          }),
         ),
       );
     });
     return () => {
       cancelled = true;
     };
-  }, [isPrimary, kind, text]);
+  }, [active?.path, isPrimary, kind, text, rawBase]);
 
   if (!active) return null;
 
diff --git a/website/src/components/brand/SkillsCatalog.tsx b/website/src/components/brand/SkillsCatalog.tsx
index d3b20d1580..b8fa87c1b0 100644
--- a/website/src/components/brand/SkillsCatalog.tsx
+++ b/website/src/components/brand/SkillsCatalog.tsx
@@ -18,6 +18,7 @@ import { clsx } from "clsx";
 import React, { useMemo, useState } from "react";
 
 import { PageShell } from "./PageShell";
+import { useCatalogPageFocus } from "./useCatalogPageFocus";
 import { CatalogSortControl, CATALOG_SORT_OPTIONS } from "./CatalogSortControl";
 import { SkillsIcon } from "./SkillsIcon";
 import {
@@ -103,6 +104,7 @@ export function SkillsCatalog({
   const { colorMode } = useTheme();
   const [sortMode, setSortMode] = useState<SortMode>("az");
   const [currentPage, setCurrentPage] = useState(1);
+  useCatalogPageFocus(currentPage);
   const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);
   const [filters, setFilters] = useState<FilterState>(emptyFilters);
   const [expandedGroups, setExpandedGroups] = useState<
@@ -182,7 +184,7 @@ export function SkillsCatalog({
       contributorsTotal={contributorsTotal}
       searchAriaLabel="Search skills"
     >
-      <Box className={styles.hero}>
+      <Box className={clsx(styles.hero, "heading-texture")}>
         <div className={styles.heroInner}>
           <span className={styles.heroIcon} aria-hidden="true">
             <SkillsIcon size={36} />
@@ -197,7 +199,7 @@ export function SkillsCatalog({
         </div>
       </Box>
 
-      <Section id="catalog" paddingBlockStart="none" paddingBlockEnd="none">
+      <Section id="catalog" tabIndex={-1} paddingBlockStart="none" paddingBlockEnd="none">
         <Box className={styles.catalog}>
           <aside className={styles.filterNav} aria-label="Filter skills">
             <button
diff --git a/website/src/components/brand/SkillsIcon.tsx b/website/src/components/brand/SkillsIcon.tsx
index dee11cab1c..8259f3cc36 100644
--- a/website/src/components/brand/SkillsIcon.tsx
+++ b/website/src/components/brand/SkillsIcon.tsx
@@ -1,8 +1,11 @@
+import { useId } from "react";
+
 type SkillsIconProps = {
   size?: number;
 };
 
 export function SkillsIcon({ size = 36 }: SkillsIconProps) {
+  const clipId = `skills-icon-${useId()}`;
   return (
     <svg
       width={size}
@@ -13,7 +16,7 @@ export function SkillsIcon({ size = 36 }: SkillsIconProps) {
       aria-label="Skills"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clipPath="url(#skills-icon-clip)">
+      <g clipPath={`url(#${clipId})`}>
         <path
           d="M87.6452 36.2143H60L69.8776 7.27142C71.2028 3.38827 66.5201 0.2653 63.4444 2.98108L5.9258 53.7695C3.16384 56.2082 4.88879 60.7679 8.57336 60.7679H38L29.0183 88.7728C27.7683 92.6706 32.486 95.7075 35.5163 92.9556L90.3343 43.1755C93.0417 40.7169 91.3024 36.2143 87.6452 36.2143Z"
           stroke="var(--brand-color-text-default)"
@@ -35,7 +38,7 @@ export function SkillsIcon({ size = 36 }: SkillsIconProps) {
         />
       </g>
       <defs>
-        <clipPath id="skills-icon-clip">
+        <clipPath id={clipId}>
           <rect width="96" height="96" />
         </clipPath>
       </defs>
diff --git a/website/src/components/brand/TopNav.tsx b/website/src/components/brand/TopNav.tsx
index 787f285c59..c0f85a7e95 100644
--- a/website/src/components/brand/TopNav.tsx
+++ b/website/src/components/brand/TopNav.tsx
@@ -1,7 +1,7 @@
-import { ChevronDownIcon, ThreeBarsIcon, XIcon } from "@primer/octicons-react";
+import { ArrowUpRightIcon, ChevronDownIcon, ThreeBarsIcon, XIcon } from "@primer/octicons-react";
 import { clsx } from "clsx";
 import { Button } from "@primer/react-brand";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, type ComponentType } from "react";
 
 import type { SearchItem } from "./searchIndex";
 import { contributorsTotal as siteContributorsTotal } from "../../lib/site-data";
@@ -13,7 +13,27 @@ import { TopNavSearch } from "./TopNavSearch";
 const CONTRIBUTING_URL =
   "https://github.com/github/awesome-copilot/blob/main/CONTRIBUTING.md";
 
-type NavLink = { label: string; href: string; current: boolean };
+type NavLink = {
+  label: string;
+  href: string;
+  current: boolean;
+  external?: boolean;
+  icon?: ComponentType<{ size?: number }>;
+};
+
+function NavLabel({ link }: { link: NavLink }) {
+  return (
+    <span className={mobileStyles.linkContent}>
+      {link.icon && (
+        <span className={mobileStyles.linkIcon} aria-hidden="true">
+          <link.icon size={16} />
+        </span>
+      )}
+      {link.label}
+      {link.external && <ArrowUpRightIcon size={16} aria-hidden="true" />}
+    </span>
+  );
+}
 
 /**
  * The top navigation is intentionally reduced to two tabs shared across every
@@ -107,7 +127,7 @@ export function TopNav({
                   className={styles.moreLink}
                   aria-current={link.current ? "page" : undefined}
                 >
-                  {link.label}
+                  <NavLabel link={link} />
                 </a>
               ))}
             </div>
@@ -159,7 +179,7 @@ export function TopNav({
               className={mobileStyles.mobileLink}
               aria-current={link.current ? "page" : undefined}
             >
-              {link.label}
+              <NavLabel link={link} />
             </a>
           ))}
           {learningHubLink && (
@@ -170,7 +190,7 @@ export function TopNav({
                 className={mobileStyles.mobileLink}
                 aria-current={learningHubLink.current ? "page" : undefined}
               >
-                {learningHubLink.label}
+                <NavLabel link={learningHubLink} />
               </a>
             </>
           )}
@@ -189,6 +209,7 @@ export function TopNav({
                   href={CONTRIBUTING_URL}
                   variant="primary"
                   size="medium"
+                  trailingVisual={<ArrowUpRightIcon size={16} aria-hidden="true" />}
                 >
                   Contribute
                 </Button>
diff --git a/website/src/components/brand/TopNavSearch.tsx b/website/src/components/brand/TopNavSearch.tsx
index 8e94668019..abab829992 100644
--- a/website/src/components/brand/TopNavSearch.tsx
+++ b/website/src/components/brand/TopNavSearch.tsx
@@ -6,11 +6,21 @@ import {
   useRef,
   useState,
 } from "react";
-import { ArrowUpRightIcon, SearchIcon } from "@primer/octicons-react";
+import { FileDirectoryIcon, SearchIcon } from "@primer/octicons-react";
 import { clsx } from "clsx";
 
-import { hrefKey, searchPagefind } from "./pagefindSearch";
-import { type SearchCategory, type SearchItem } from "./searchIndex";
+import { AgentsIcon } from "./AgentsIcon";
+import { InstructionsIcon } from "./InstructionsIcon";
+import { SkillsIcon } from "./SkillsIcon";
+import { PluginsIcon } from "./PluginsIcon";
+import { ExtensionsIcon } from "./ExtensionsIcon";
+import { LearningHubIcon } from "./LearningHubIcon";
+import { currentSearchLocale, searchPagefind } from "./pagefindSearch";
+import { pageHref } from "./pageHref";
+import {
+  CATEGORY_LABELS, filterSearchItemsByLocale, mergeSearchItems,
+  type SearchCategory, type SearchItem,
+} from "./searchIndex";
 import s from "./styles/TopNavSearch.module.css";
 
 const CATEGORY_ORDER: SearchCategory[] = [
@@ -28,6 +38,16 @@ const MAX_PER_GROUP = 4;
 /** Upper bound on Pagefind hits fetched per query before merge/dedupe. */
 const MAX_PAGEFIND_HITS = 12;
 
+const CATEGORY_ICONS = {
+  Pages: FileDirectoryIcon,
+  Articles: LearningHubIcon,
+  Agents: AgentsIcon,
+  Instructions: InstructionsIcon,
+  Skills: SkillsIcon,
+  Plugins: PluginsIcon,
+  Extensions: ExtensionsIcon,
+};
+
 type ResultGroup = { category: SearchCategory; items: SearchItem[] };
 
 /**
@@ -83,7 +103,7 @@ export function TopNavSearch({
   };
 
   useEffect(() => {
-    const onKeyDown = (event: KeyboardEvent) => {
+    const onKeyDown = (event: globalThis.KeyboardEvent) => {
       if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
         event.preventDefault();
         setOpen(true);
@@ -100,25 +120,27 @@ export function TopNavSearch({
   }, [open]);
 
   const trimmed = term.trim();
+  const locale = currentSearchLocale();
 
   // Pagefind covers every built HTML page (Learning Hub articles included), which
   // the build-time `index` prop does not. It is only available after a build,
   // so results arrive asynchronously and are merged in when they land.
-  const [pagefindHits, setPagefindHits] = useState<SearchItem[]>([]);
+  const [pagefindResult, setPagefindResult] = useState<{
+    term: string; locale: string; items: SearchItem[];
+  }>({ term: "", locale, items: [] });
 
   useEffect(() => {
     if (trimmed.length === 0) {
-      setPagefindHits([]);
       return;
     }
     let cancelled = false;
-    searchPagefind(trimmed, MAX_PAGEFIND_HITS).then((hits) => {
-      if (!cancelled) setPagefindHits(hits);
+    searchPagefind(trimmed, MAX_PAGEFIND_HITS, locale).then((hits) => {
+      if (!cancelled) setPagefindResult({ term: trimmed, locale, items: hits });
     });
     return () => {
       cancelled = true;
     };
-  }, [trimmed]);
+  }, [trimmed, locale]);
 
   const groups = useMemo<ResultGroup[]>(() => {
     const query = trimmed.toLowerCase();
@@ -127,30 +149,31 @@ export function TopNavSearch({
       (item) =>
         item.title.toLowerCase().includes(query) ||
         item.description.toLowerCase().includes(query) ||
+        CATEGORY_LABELS[item.category].toLowerCase().includes(query) ||
         item.category.toLowerCase().includes(query),
     );
     // Static hits win on ties: they carry curated titles and descriptions.
-    const seen = new Set(staticMatches.map((item) => hrefKey(item.href)));
-    const matches = [...staticMatches];
-    for (const hit of pagefindHits) {
-      const key = hrefKey(hit.href);
-      if (seen.has(key)) continue;
-      seen.add(key);
-      matches.push(hit);
-    }
-    let remaining = MAX_RESULTS;
-    const grouped: ResultGroup[] = [];
-    for (const category of CATEGORY_ORDER) {
-      if (remaining <= 0) break;
-      const items = matches
-        .filter((item) => item.category === category)
-        .slice(0, Math.min(MAX_PER_GROUP, remaining));
-      if (items.length === 0) continue;
-      remaining -= items.length;
-      grouped.push({ category, items });
+    const matches = mergeSearchItems(filterSearchItemsByLocale([
+      ...staticMatches,
+      ...(pagefindResult.term === trimmed && pagefindResult.locale === locale
+        ? pagefindResult.items : []),
+    ], locale, pageHref()));
+    // Reserve results in provider relevance order before arranging the groups.
+    // Otherwise body-only article hits can push a curated resource match out.
+    const selected: SearchItem[] = [];
+    const counts = new Map<SearchCategory, number>();
+    for (const item of matches) {
+      if (selected.length >= MAX_RESULTS) break;
+      const count = counts.get(item.category) ?? 0;
+      if (count >= MAX_PER_GROUP) continue;
+      selected.push(item);
+      counts.set(item.category, count + 1);
     }
-    return grouped;
-  }, [trimmed, index, pagefindHits]);
+    return CATEGORY_ORDER.map((category) => ({
+      category,
+      items: selected.filter((item) => item.category === category),
+    })).filter((group) => group.items.length > 0);
+  }, [trimmed, index, pagefindResult, locale]);
 
   const flatResults = useMemo(
     () => groups.flatMap((group) => group.items),
@@ -164,7 +187,8 @@ export function TopNavSearch({
   const resultsOpen = open && focused && trimmed.length > 0;
   const hasResults = groups.length > 0;
   const activeDescendant =
-    activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined;
+    activeIndex >= 0 && activeIndex < flatResults.length
+      ? `${listboxId}-option-${activeIndex}` : undefined;
 
   const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
     if (event.key === "Escape") {
@@ -180,23 +204,28 @@ export function TopNavSearch({
 
     if (!hasResults) return;
 
+    const selectResult = (index: number) => {
+      setActiveIndex(index);
+      document.getElementById(`${listboxId}-option-${index}`)?.scrollIntoView({
+        block: "nearest",
+        inline: "nearest",
+        behavior: "instant",
+      });
+    };
+
     if (event.key === "ArrowDown") {
       event.preventDefault();
-      setActiveIndex((current) =>
-        current >= flatResults.length - 1 ? 0 : current + 1,
-      );
+      selectResult(activeIndex >= flatResults.length - 1 ? 0 : activeIndex + 1);
     } else if (event.key === "ArrowUp") {
       event.preventDefault();
-      setActiveIndex((current) =>
-        current <= 0 ? flatResults.length - 1 : current - 1,
-      );
+      selectResult(activeIndex <= 0 ? flatResults.length - 1 : activeIndex - 1);
     } else if (event.key === "Home") {
       event.preventDefault();
-      setActiveIndex(0);
+      selectResult(0);
     } else if (event.key === "End") {
       event.preventDefault();
-      setActiveIndex(flatResults.length - 1);
-    } else if (event.key === "Enter" && activeIndex >= 0) {
+      selectResult(flatResults.length - 1);
+    } else if (event.key === "Enter" && flatResults[activeIndex]) {
       event.preventDefault();
       window.location.assign(flatResults[activeIndex].href);
     }
@@ -214,6 +243,7 @@ export function TopNavSearch({
     let itemIndex = 0;
     return groups.map((group, groupIndex) => {
       const groupLabelId = `${listboxId}-group-${groupIndex}`;
+      const Icon = CATEGORY_ICONS[group.category];
       return (
         <div
           className={s.group}
@@ -222,7 +252,10 @@ export function TopNavSearch({
           aria-labelledby={groupLabelId}
         >
           <p id={groupLabelId} className={s.groupLabel}>
-            {group.category}
+            <span className={s.groupIcon} aria-hidden="true">
+              <Icon size={16} />
+            </span>
+            {CATEGORY_LABELS[group.category]}
           </p>
           {group.items.map((item) => {
             const index = itemIndex++;
@@ -240,8 +273,15 @@ export function TopNavSearch({
                 onFocus={() => setActiveIndex(index)}
                 onMouseEnter={() => setActiveIndex(index)}
               >
-                <span className={s.resultText}>{item.title}</span>
-                <ArrowUpRightIcon size={16} className={s.resultIcon} />
+                <span className={s.resultContent}>
+                  <span className={s.resultText}>{item.title}</span>
+                  {item.locale && item.locale !== "en" && (
+                    <span className={s.resultContext}>{item.locale}</span>
+                  )}
+                  {item.description && (
+                    <span className={s.resultDescription}>{item.description}</span>
+                  )}
+                </span>
               </a>
             );
           })}
diff --git a/website/src/components/brand/navigation.ts b/website/src/components/brand/navigation.ts
index 4dd2fb36bc..10b68b5ee5 100644
--- a/website/src/components/brand/navigation.ts
+++ b/website/src/components/brand/navigation.ts
@@ -1,3 +1,14 @@
+import {
+  GitBranchIcon,
+  ToolsIcon,
+  WorkflowIcon,
+} from "@primer/octicons-react";
+import { AgentsIcon } from "./AgentsIcon";
+import { ExtensionsIcon } from "./ExtensionsIcon";
+import { InstructionsIcon } from "./InstructionsIcon";
+import { LearningHubIcon } from "./LearningHubIcon";
+import { PluginsIcon } from "./PluginsIcon";
+import { SkillsIcon } from "./SkillsIcon";
 import type { PrototypePageProps } from "./pageHref";
 
 export type AwesomeCopilotPage =
@@ -12,15 +23,15 @@ export type AwesomeCopilotPage =
   | "tools";
 
 const destinations = [
-  { label: "Agents", page: "agents" },
-  { label: "Instructions", page: "instructions" },
-  { label: "Learning Hub", page: "learning-hub-copilot-app" },
-  { label: "Skills", page: "skills" },
-  { label: "Plugins", page: "plugins" },
-  { label: "Extensions", page: "extensions" },
-  { label: "Hooks", page: "hooks" },
-  { label: "Workflows", page: "workflows" },
-  { label: "Tools", page: "tools" },
+  { label: "Agents", page: "agents", icon: AgentsIcon },
+  { label: "Instructions", page: "instructions", icon: InstructionsIcon },
+  { label: "Learning Hub", page: "learning-hub-copilot-app", icon: LearningHubIcon },
+  { label: "Skills", page: "skills", icon: SkillsIcon },
+  { label: "Plugins", page: "plugins", icon: PluginsIcon },
+  { label: "Extensions", page: "extensions", icon: ExtensionsIcon },
+  { label: "Hooks", page: "hooks", icon: GitBranchIcon, external: true },
+  { label: "Workflows", page: "workflows", icon: WorkflowIcon, external: true },
+  { label: "Tools", page: "tools", icon: ToolsIcon, external: true },
 ] as const;
 
 export function getAwesomeCopilotNavLinks(
@@ -31,5 +42,7 @@ export function getAwesomeCopilotNavLinks(
     label: destination.label,
     href: pageHref(destination.page),
     current: destination.page === currentPage,
+    icon: destination.icon,
+    external: "external" in destination && destination.external,
   }));
 }
\ No newline at end of file
diff --git a/website/src/components/brand/pagefindSearch.ts b/website/src/components/brand/pagefindSearch.ts
index 16474a1e5d..547c0867c1 100644
--- a/website/src/components/brand/pagefindSearch.ts
+++ b/website/src/components/brand/pagefindSearch.ts
@@ -7,7 +7,7 @@
  * dev` it simply fails and search degrades to the static in-memory index.
  */
 import { pageHref } from "./pageHref";
-import type { SearchCategory, SearchItem } from "./searchIndex";
+import { categoryOf, filterSearchItemsByLocale, mergeSearchItems, type SearchItem } from "./searchIndex";
 
 type PagefindResultData = {
   url: string;
@@ -26,8 +26,6 @@ function stripTags(html: string): string {
   } while (text !== previous);
   return text;
 }
-
-
 type PagefindModule = {
   options?: (opts: Record<string, unknown>) => Promise<void>;
   init?: () => Promise<void>;
@@ -54,6 +52,13 @@ function basePath(): string {
 
 let modulePromise: Promise<PagefindModule | null> | null = null;
 
+/** Match Pagefind's language selection, not an untranslated URL prefix. */
+export function currentSearchLocale(): string {
+  return typeof document !== "undefined"
+    ? document.documentElement.lang?.toLowerCase() || "en"
+    : "en";
+}
+
 /** Load (once) the Pagefind bundle, or resolve to `null` when unavailable. */
 export function loadPagefind(): Promise<PagefindModule | null> {
   if (modulePromise) return modulePromise;
@@ -74,53 +79,30 @@ export function loadPagefind(): Promise<PagefindModule | null> {
   return modulePromise;
 }
 
-const CATEGORY_BY_SEGMENT: Record<string, SearchCategory> = {
-  agent: "Agents",
-  agents: "Agents",
-  instruction: "Instructions",
-  instructions: "Instructions",
-  skill: "Skills",
-  skills: "Skills",
-  plugin: "Plugins",
-  plugins: "Plugins",
-  extension: "Extensions",
-  extensions: "Extensions",
-  "learning-hub": "Articles",
-};
-
-/** Derive a result category from the result URL, relative to the base path. */
-function categoryOf(pathname: string): SearchCategory {
-  const base = basePath();
-  const relative = pathname.startsWith(base)
-    ? pathname.slice(base.length)
-    : pathname.replace(/^\//, "");
-  const segments = relative.split("/").filter(Boolean);
-  if (segments.length === 0) return "Pages";
-  // A bare section landing page (e.g. /skills/) is a destination, not a record.
-  if (segments.length === 1 && !CATEGORY_BY_SEGMENT[segments[0]]) return "Pages";
-  if (segments.length === 1) return "Pages";
-  return CATEGORY_BY_SEGMENT[segments[0]] ?? "Pages";
-}
-
 /** Pagefind custom records carry a `Title — Agent` style suffix; strip it. */
 function cleanTitle(title: string): string {
-  return title.replace(/\s+—\s+(Agent|Instruction|Skill|Hook|Workflow|Plugin|Tool|Extension)$/u, "");
+  return title.replace(/\s+—\s+(Agent|Instruction|Skill|Hook|Workflow|Plugin|Tool|Extension|Canvas)$/u, "");
 }
 
-/** Normalised key used to dedupe against the static index. */
-export function hrefKey(href: string): string {
-  try {
-    const url = new URL(href, window.location.origin);
-    return url.pathname.replace(/\/+$/, "").toLowerCase() || "/";
-  } catch {
-    return href.replace(/\/+$/, "").toLowerCase() || "/";
-  }
+export function pagefindItem(entry: PagefindResultData, base = "/"): SearchItem {
+  const href = entry.meta?.canonical || entry.url;
+  return {
+    title: entry.meta?.resourceTitle ||
+      cleanTitle(entry.meta?.title?.trim() || entry.url),
+    description: entry.meta?.description ||
+      (entry.excerpt ? stripTags(entry.excerpt) : ""),
+    category: categoryOf(href, base),
+    href,
+    canonicalHref: entry.meta?.canonical,
+    locale: entry.meta?.locale,
+  };
 }
 
 /** Run a Pagefind query and adapt the hits to `SearchItem`s. */
 export async function searchPagefind(
   term: string,
   limit: number,
+  locale = currentSearchLocale(),
 ): Promise<SearchItem[]> {
   const pagefind = await loadPagefind();
   if (!pagefind) return [];
@@ -130,23 +112,24 @@ export async function searchPagefind(
       : await pagefind.search(term);
     // `debouncedSearch` resolves to null when superseded by a newer query.
     if (!response) return [];
-    const data = await Promise.all(
-      response.results.slice(0, limit).map((result) => result.data()),
-    );
-    const items: SearchItem[] = [];
-    for (const entry of data) {
-      if (!entry?.url) continue;
-      const title = cleanTitle(entry.meta?.title?.trim() || entry.url);
-      if (!title) continue;
-      items.push({
-        title,
-        description: entry.excerpt ? stripTags(entry.excerpt) : "",
-        category: categoryOf(entry.url.split(/[?#]/)[0]),
-        href: entry.url,
-      });
+    let items: SearchItem[] = [];
+    // Fetch bounded batches, but apply the result limit after identity merging.
+    for (let offset = 0; offset < response.results.length && items.length < limit; offset += limit) {
+      const data = await Promise.all(
+        response.results.slice(offset, offset + limit).map((result) => result.data()),
+      );
+      items = mergeSearchItems([
+        ...items,
+        ...filterSearchItemsByLocale(
+          data.filter((entry) => entry?.url).map((entry) => pagefindItem(entry, basePath())),
+          locale,
+          basePath(),
+        ),
+      ]);
     }
-    return items;
-  } catch {
+    return items.slice(0, limit);
+  } catch (error) {
+    console.warn("[search] Pagefind query failed; using the static index.", error);
     return [];
   }
 }
diff --git a/website/src/components/brand/searchIndex.ts b/website/src/components/brand/searchIndex.ts
index fb26ee0d28..271bd37ffa 100644
--- a/website/src/components/brand/searchIndex.ts
+++ b/website/src/components/brand/searchIndex.ts
@@ -21,8 +21,82 @@ export type SearchItem = {
   category: SearchCategory;
   /** Resolved site URL for the result. */
   href: string;
+  /** Canonical destination supplied by the index, never inferred from a title. */
+  canonicalHref?: string;
+  /** Language of the rendered content, not the requested fallback route. */
+  locale?: string;
 };
 
+export const CATEGORY_LABELS: Record<SearchCategory, string> = {
+  Pages: "Pages",
+  Articles: "Articles",
+  Agents: "Agents",
+  Instructions: "Instructions",
+  Skills: "Skills",
+  Plugins: "Plugins",
+  Extensions: "Extensions",
+};
+
+/** Preserve case, escaped path separators and meaningful queries/fragments. */
+export function hrefKey(href: string): string {
+  const url = new URL(href, "https://awesome-copilot.github.com");
+  const path = url.pathname
+    .replace(/%[0-9a-f]{2}/gi, (escape) => {
+      const character = String.fromCharCode(parseInt(escape.slice(1), 16));
+      return /[A-Za-z0-9._~-]/.test(character) ? character : escape.toUpperCase();
+    })
+    .replace(/\/{2,}/g, "/")
+    .replace(/\/index\.html$/, "/")
+    .replace(/\/+$/, "") || "/";
+  return `${path}${url.search}${url.hash}`;
+}
+
+/** A richer resource record wins over a generic HTML hit for the same URL. */
+export function mergeSearchItems(items: SearchItem[]): SearchItem[] {
+  const byIdentity = new Map<string, SearchItem>();
+  const richness = (item: SearchItem) =>
+    (item.category !== "Pages" ? 2 : 0) + (item.description ? 1 : 0);
+  for (const item of items) {
+    const key = hrefKey(item.canonicalHref ?? item.href);
+    const previous = byIdentity.get(key);
+    if (!previous || richness(item) > richness(previous)) {
+      byIdentity.set(key, item);
+    }
+  }
+  return [...byIdentity.values()];
+}
+
+function pathSegments(href: string, base: string): string[] {
+  const pathname = new URL(href, "https://awesome-copilot.github.com").pathname;
+  const relative = pathname.startsWith(base)
+    ? pathname.slice(base.length)
+    : pathname.replace(/^\//, "");
+  return relative.split("/").filter(Boolean);
+}
+
+/** Content metadata wins over a locale prefix on an English-fallback route. */
+export function filterSearchItemsByLocale(
+  items: SearchItem[],
+  locale: string,
+  base = "/",
+): SearchItem[] {
+  return items.filter((item) => {
+    const firstSegment = pathSegments(item.canonicalHref ?? item.href, base)[0] ?? "";
+    const itemLocale = item.locale ||
+      (/^[a-z]{2}-[a-z]{2}$/i.test(firstSegment) ? firstSegment : "en");
+    return itemLocale.toLowerCase() === locale.toLowerCase();
+  });
+}
+
+/** Locale prefixes are removed for classification only, never for identity. */
+export function categoryOf(href: string, base = "/"): SearchCategory {
+  const segments = pathSegments(href, base);
+  if (/^[a-z]{2}-[a-z]{2}$/i.test(segments[0] ?? "")) segments.shift();
+  if (segments.length < 2) return "Pages";
+  return CATEGORY_BY_TYPE[segments[0]] ??
+    (segments[0] === "learning-hub" ? "Articles" : "Pages");
+}
+
 /** Generated record shape from `eng/generate-website-data.mjs`. */
 export type GeneratedSearchRecord = {
   type: string;
@@ -126,7 +200,10 @@ export function buildSearchIndex(
       title: record.title,
       description: record.description ?? "",
       category,
-      href: route ? at(`/${route}/${record.id}/`) : at("/"),
+      href: route
+        ? at(`/${route}/${encodeURIComponent(record.id)}/`)
+        : at(`/${record.id}/`),
+      locale: "en",
     });
   }
   return [...staticPages(base), ...items];
diff --git a/website/src/components/brand/styles/TopNav.module.css b/website/src/components/brand/styles/TopNav.module.css
index f28037e94c..338cfdce22 100644
--- a/website/src/components/brand/styles/TopNav.module.css
+++ b/website/src/components/brand/styles/TopNav.module.css
@@ -1,16 +1,28 @@
-/*
- * Mobile navigation. Above 768px the desktop `.subNavList` (Resources dropdown
- * + Learning Hub tab) is shown and this hamburger is hidden; at/below 768px each
- * page module hides `.subNavList`, and this disclosure takes over as the mobile
- * menu. Styling mirrors the desktop `.moreOverlay` / `.moreLink` dropdown so the
- * two navs feel like one system.
- */
+/* The mobile panel spans its header, not 100vw (which includes scrollbars). */
+.header {
+  position: relative;
+}
+
+.linkContent {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--base-size-8);
+}
+
+.linkContent svg {
+  flex-shrink: 0;
+}
+
+.linkIcon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
 .mobileMenu {
   display: none;
-  position: relative;
+  position: static;
   align-items: center;
-  /* Sit at the far right of the header row (after the heart + Contribute
-     actions) so the right-anchored dropdown opens inward and stays on screen. */
+  /* Keep the trigger at the far right; the panel is anchored to the header. */
   order: 5;
   margin-inline-end: var(--base-size-16);
 }
@@ -67,15 +79,11 @@
   /* Meet the top bar flush: the panel's top edge lands on the top bar's own
      bottom border, so nav and menu read as one connected surface (no gap). */
   inset-block-start: 100%;
-  /* Break out of the right-anchored menu so the panel spans the full mobile
-     viewport: the trigger sits 16px + the top bar's 1px border from the screen
-     edge, so pull the panel's end edge out by that much and size it to 100vw. */
-  inset-inline-end: calc(
-    -1 * (var(--base-size-16) + var(--brand-borderWidth-thin))
-  );
+  inset-inline: 0;
   z-index: 30;
-  inline-size: 100vw;
-  max-inline-size: 100vw;
+  max-block-size: calc(100dvh - 100%);
+  overflow-y: auto;
+  overscroll-behavior: contain;
   display: flex;
   flex-direction: column;
   gap: var(--base-size-2);
@@ -86,6 +94,10 @@
   box-shadow: var(--brand-SubNav-shadow);
 }
 
+.mobileOverlay > * {
+  flex-shrink: 0;
+}
+
 .overlayLabel {
   padding-block: var(--base-size-8) var(--base-size-4);
   padding-inline: var(--base-size-12);
@@ -161,25 +173,14 @@
    Drop the leading pad here so the heart lines up flush with the links, the
    RESOURCES label and the site title (issue #18). The Contribute button's box
    already sits on that same content edge. */
-.mobileActions :global(button[class*="trigger"]) {
+.mobileActions :global(a[class*="trigger"]) {
   padding-inline-start: 0;
 }
 
-/* On the tablet band the top bar is inset from the screen edge by the page
-   gutter, so the right-anchored breakout above (which only clears the trigger's
-   16px + border) leaves the full-width panel hanging off the left of the screen.
-   Pull the end edge out by the gutter as well so the 100vw panel stays aligned
-   to the viewport here too. Phones (<48rem) have no gutter and keep the base
-   value above. */
+/* Align tablet menu content with the inset header's wordmark. */
 @media screen and (min-width: 48rem) and (max-width: 74.99rem) {
   .mobileOverlay {
-    inset-inline-end: calc(
-      -1 *
-        (
-          var(--page-gutter) + var(--base-size-16) +
-            var(--brand-borderWidth-thin)
-        )
-    );
+    padding-inline: calc(var(--page-gutter, 0px) + var(--base-size-12) + var(--brand-borderWidth-thin));
   }
 }
 
diff --git a/website/src/components/brand/styles/TopNavSearch.module.css b/website/src/components/brand/styles/TopNavSearch.module.css
index a4900467bb..8f542f2408 100644
--- a/website/src/components/brand/styles/TopNavSearch.module.css
+++ b/website/src/components/brand/styles/TopNavSearch.module.css
@@ -9,16 +9,18 @@
 }
 
 .results {
+  --search-result-inset: var(--base-size-16);
   position: absolute;
   z-index: 30;
   inset-block-start: calc(100% + var(--base-size-8));
   inset-inline-end: 0;
   inline-size: 22rem;
   max-inline-size: min(22rem, 90vw);
+  max-block-size: min(36rem, 70dvh);
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: var(--base-size-16);
-  padding: var(--base-size-16);
+  padding-block: var(--base-size-8);
   border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
   background-color: var(--brand-color-canvas-muted);
   box-shadow: var(--brand-SubNav-shadow);
@@ -48,29 +50,34 @@
   flex-direction: column;
 }
 
+.group + .group {
+  margin-block-start: var(--base-size-8);
+  padding-block-start: var(--base-size-8);
+  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
+}
+
 .groupLabel {
+  display: flex;
+  align-items: center;
+  gap: var(--base-size-8);
   margin: 0 0 var(--base-size-4);
+  padding: var(--base-size-8) var(--search-result-inset);
   font-family: var(--brand-fontStack-sansSerif);
   font-size: var(--brand-text-size-100);
-  font-weight: var(--brand-text-weight-normal);
-  color: var(--brand-color-text-muted);
+  font-weight: var(--brand-text-weight-semibold);
+  color: var(--brand-color-text-default);
 }
 
 .result {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--base-size-12);
+  align-items: flex-start;
+  inline-size: 100%;
+  padding-inline-start: calc(var(--search-result-inset) + var(--base-size-24));
+  padding-inline-end: var(--search-result-inset);
   padding-block: var(--base-size-8);
-  border-block-start: var(--brand-borderWidth-thin) dashed
-    var(--brand-color-border-subtle);
   color: var(--brand-color-text-default);
   text-decoration: none;
-  transition: color 0.15s ease;
-}
-
-.result:first-of-type {
-  border-block-start: 0;
+  transition: color 0.15s ease, background-color 0.15s ease;
 }
 
 .result:focus-visible {
@@ -86,26 +93,57 @@
   color: inherit;
 }
 
-.resultIcon {
-  flex-shrink: 0;
+.resultContent {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--base-size-4);
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+.resultContext,
+.resultDescription {
+  font-family: var(--brand-fontStack-sansSerif);
+  font-size: var(--brand-text-size-100);
+  font-weight: var(--brand-text-weight-normal);
   color: var(--brand-color-text-muted);
 }
 
+.resultDescription {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.groupIcon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: inherit;
+}
+
 .result:hover .resultText,
 .result:focus-visible .resultText,
-.resultActive .resultText,
-.result:hover .resultIcon,
-.result:focus-visible .resultIcon,
-.resultActive .resultIcon {
+.resultActive .resultText {
   color: var(--brand-color-text-link-rest);
 }
 
+.result:hover,
+.result:focus-visible,
 .resultActive {
   background-color: var(--brand-color-canvas-default);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .result {
+    transition: none;
+  }
+}
+
 .empty {
   margin: 0;
+  padding: var(--base-size-8) var(--search-result-inset);
   font-family: var(--brand-fontStack-sansSerif);
   font-size: var(--brand-text-size-100);
   color: var(--brand-color-text-muted);
@@ -166,10 +204,10 @@
 }
 
 .inlineResults {
+  --search-result-inset: var(--base-size-12);
   display: flex;
   flex-direction: column;
-  gap: var(--base-size-16);
-  padding: var(--base-size-12);
+  padding-block: var(--base-size-8);
   border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
   border-radius: var(--brand-borderRadius-medium);
   background-color: var(--brand-color-canvas-muted);
diff --git a/website/src/components/brand/styles/agents.module.css b/website/src/components/brand/styles/agents.module.css
index 11c5d91874..03eb5970ad 100644
--- a/website/src/components/brand/styles/agents.module.css
+++ b/website/src/components/brand/styles/agents.module.css
@@ -722,6 +722,10 @@
 /* Pagination: always show the Previous/Next chevrons (they are hidden on
    desktop by default) and strip the arrow stem so they read as clean
    chevrons; give the current page a neutral grey surface instead of green. */
+.pagination {
+  composes: pagination from "./catalog-pagination.module.css";
+}
+
 .pagination :global([class*="Pagination__controlArrowWrapper"]) {
   display: flex;
 }
diff --git a/website/src/components/brand/styles/catalog-pagination.module.css b/website/src/components/brand/styles/catalog-pagination.module.css
new file mode 100644
index 0000000000..45fb6461dd
--- /dev/null
+++ b/website/src/components/brand/styles/catalog-pagination.module.css
@@ -0,0 +1,6 @@
+/* Inline-flex participates in the label's baseline line box. With the reversed
+   arrow first, that leaves descender space and lifts Previous above Next. */
+.pagination :global([class*="Pagination__controlContent"]) {
+  display: flex;
+  align-items: center;
+}
diff --git a/website/src/components/brand/styles/dotnet-upgrade.module.css b/website/src/components/brand/styles/dotnet-upgrade.module.css
index 53a102ad01..fffc5e4ef7 100644
--- a/website/src/components/brand/styles/dotnet-upgrade.module.css
+++ b/website/src/components/brand/styles/dotnet-upgrade.module.css
@@ -348,10 +348,7 @@
 
 .hero {
   width: 100%;
-  /* The hero starts inside the scroll region. Its measured negative offset lets
-     the breadcrumb band scroll away while the content body pins at the top. */
-  position: sticky;
-  top: calc(-1 * var(--dotnet-hero-crumb, calc(var(--base-size-20) * 3)));
+  position: relative;
   z-index: 3;
   background-color: var(--brand-color-canvas-default);
   border-block-start: var(--brand-borderWidth-thin) solid
@@ -366,7 +363,8 @@
    hero rule used across the library. --dotnet-frame-start / --dotnet-frame-width
    are measured in JS so the line lives between the outer gridlines, not
    full-bleed, and the duck can ride its leading edge. */
-.hero::after {
+.hero::after,
+.readingHeader::after {
   content: "";
   position: absolute;
   inset-inline-start: var(--dotnet-frame-start, 0px);
@@ -375,16 +373,23 @@
   inset-block-end: 0;
   block-size: var(--brand-borderWidth-thick);
   inline-size: calc(var(--dotnet-progress, 0) * var(--dotnet-frame-width, 100%));
+  max-inline-size: calc(100% - var(--dotnet-frame-start, 0px));
   /* Figma Primitives/Green/05 — dark default. The brand green scale
      remaps per color mode, so green-4 (not green-5) resolves to Green/05 here. */
   background-color: var(--base-color-scale-green-4);
   transition: inline-size 0.08s linear;
 }
 
-.page[data-mode="light"] .hero::after {
+.page[data-mode="light"] .hero::after,
+.page[data-mode="light"] .readingHeader::after {
   background-color: var(--base-color-scale-green-6);
 }
 
+.hero[data-compact="true"]::after,
+.hero[data-compact="true"] > .progressViewport {
+  visibility: hidden;
+}
+
 .heroInner {
   display: flex;
   flex-direction: column;
@@ -451,14 +456,13 @@
   background-color: var(--brand-color-canvas-default);
 }
 
-/* The single scroll region wraps the hero, framed body, and footer. The top
-   navigation remains outside it while the hero uses sticky positioning within
-   this region. */
+/* The expanded hero scrolls naturally; only the compact reading title sticks. */
 .scrollHost {
   flex: 1 1 auto;
   min-height: 0;
   width: 100%;
   overflow-y: auto;
+  scroll-padding-block-start: var(--dotnet-hero-pinned, 0px);
 }
 
 /* Group the hero and article body under one main landmark. */
@@ -524,9 +528,7 @@
   padding: var(--base-size-32);
   /* Sections are separated by their padding/gaps, not divider rules, so text
      content does not pick up stray horizontal lines. */
-  scroll-margin-top: calc(
-    var(--dotnet-hero-pinned, 17rem) + var(--base-size-24)
-  );
+  scroll-margin-top: var(--base-size-24);
 }
 
 .articleSection:first-child {
@@ -918,6 +920,10 @@
    block visibly lifts off the hero (#2963). Article-body code blocks (e.g.
    Cookbook recipe steps) are unaffected: they sit on the canvas/default page
    body, where canvas/subtle already reads as a distinct surface. */
+.heroContent .codeBlockWrap {
+  max-inline-size: 100%;
+}
+
 .heroContent .codeBlock {
   background-color: var(--brand-color-canvas-default);
 }
@@ -1093,7 +1099,7 @@
   min-width: 0;
   align-self: start;
   position: sticky;
-  top: var(--dotnet-hero-pinned, 17rem);
+  top: var(--dotnet-hero-pinned, 0px);
   overflow: visible;
 }
 
@@ -1101,7 +1107,7 @@
   display: flex;
   flex-direction: column;
   max-block-size: calc(
-    100dvh - var(--dotnet-hero-pinned, 17rem) - var(--base-size-64)
+    100dvh - var(--dotnet-hero-pinned, 0px) - var(--base-size-64)
   );
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -1286,11 +1292,16 @@
   background-color: var(--brand-color-accent-primary);
 }
 
-/* Release measured pinning when a short desktop viewport cannot preserve enough
-   article reading room. Sidebar and anchor offsets collapse with the same vars. */
-.page[data-hero-pin="false"] .hero {
-  position: relative;
-  top: auto;
+/* Raw markdown headings and focused links need the same clearance as sections. */
+.contentCol :is([id], a, button, input, summary) {
+  scroll-margin-top: var(--base-size-24);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hero::after,
+  .readingHeader::after {
+    transition: none;
+  }
 }
 
 @media (max-width: 74.99rem) {
@@ -1318,7 +1329,7 @@
   }
 }
 
-@media (max-width: 56.25rem) {
+@media (max-width: 74.99rem) {
   .bodyInner {
     display: block;
     padding-block-end: var(--base-size-64);
@@ -1513,6 +1524,13 @@
 }
 
 /* ---- Reading-progress duck + confetti (ported from github-copilot-app) ---- */
+.progressViewport {
+  position: absolute;
+  inset: 0;
+  overflow-x: clip;
+  pointer-events: none;
+}
+
 .progressRider {
   position: absolute;
   z-index: 1;
diff --git a/website/src/components/brand/styles/extensions.module.css b/website/src/components/brand/styles/extensions.module.css
index 11a12cc824..4e097614e4 100644
--- a/website/src/components/brand/styles/extensions.module.css
+++ b/website/src/components/brand/styles/extensions.module.css
@@ -785,6 +785,10 @@
 /* Pagination: always show the Previous/Next chevrons (they are hidden on
    desktop by default) and strip the arrow stem so they read as clean
    chevrons; give the current page a neutral grey surface instead of green. */
+.pagination {
+  composes: pagination from "./catalog-pagination.module.css";
+}
+
 .pagination :global([class*="Pagination__controlArrowWrapper"]) {
   display: flex;
 }
diff --git a/website/src/components/brand/styles/footer.module.css b/website/src/components/brand/styles/footer.module.css
new file mode 100644
index 0000000000..08a60a1554
--- /dev/null
+++ b/website/src/components/brand/styles/footer.module.css
@@ -0,0 +1,16 @@
+.footer :global([class*="Footer__logomarks"]) a[aria-label="GitHub"] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--base-size-12);
+  color: var(--brand-color-text-default);
+}
+
+/* MinimalFooter has no logo slot; retain its link and add the official mark. */
+.footer :global([class*="Footer__logomarks"]) a[aria-label="GitHub"]::before {
+  content: "";
+  inline-size: var(--base-size-32);
+  block-size: var(--base-size-32);
+  flex-shrink: 0;
+  background-color: currentColor;
+  mask: url("../../../assets/github-mark.svg") center / contain no-repeat;
+}
diff --git a/website/src/components/brand/styles/github-copilot-app.module.css b/website/src/components/brand/styles/github-copilot-app.module.css
index d5516a548e..01d602e7a8 100644
--- a/website/src/components/brand/styles/github-copilot-app.module.css
+++ b/website/src/components/brand/styles/github-copilot-app.module.css
@@ -1,4 +1,4 @@
-/* The GitHub Copilot app guide page. A fixed app-shell: the top bar and hero
+/* The GitHub Copilot app guide page. A fixed app-shell: the top bar and compact title
    stay put while a framed two-column body (article + sticky sidebar) scrolls
    inside .scrollHost. Layout, gridlines, and code/prompt styling mirror the
    other awesome-copilot detail pages; every value resolves to a Primer Brand
@@ -332,14 +332,9 @@
 
 .hero {
   width: 100%;
-  /* The hero now lives at the top of the scroll region so the breadcrumbs
-     scroll away with the page. A negative sticky offset equal to the breadcrumb
-     band height (--app-hero-crumb, measured in JS) lets the crumbs scroll up out
-     of view while the hero body pins to the top of the window and stays fixed as
-     the article scrolls beneath it. */
-  position: sticky;
-  top: calc(-1 * var(--app-hero-crumb, calc(var(--base-size-20) * 3)));
-  /* Lift the pinned hero above the scrolling body so open overlays (the
+  /* The expanded heading and its actions stay in natural document flow. */
+  position: relative;
+  /* Lift the hero above the body so open overlays (the
      install-command dropdown) that spill past the hero's bottom edge paint over
      the body instead of being covered by it, and so the article scrolls behind
      the hero rather than over it. Stays below the nav "More" menu (20) and
@@ -357,7 +352,8 @@
    last one as the content region below is scrolled, matching the accent-green
    hero rule used across the library. --app-frame-start / --app-frame-width are
    measured in JS so the line lives between the outer gridlines, not full-bleed. */
-.hero::after {
+.hero::after,
+.readingHeader::after {
   content: "";
   position: absolute;
   inset-inline-start: var(--app-frame-start, 0px);
@@ -366,13 +362,15 @@
   inset-block-end: 0;
   block-size: var(--brand-borderWidth-thick);
   inline-size: calc(var(--app-progress, 0) * var(--app-frame-width, 100%));
+  max-inline-size: calc(100% - var(--app-frame-start, 0px));
   /* Figma Primitives/Green/05 (#0fbf3e) — dark default. The brand green scale
      remaps per color mode, so green-4 (not green-5) resolves to Green/05 here. */
   background-color: var(--base-color-scale-green-4);
   transition: inline-size 0.08s linear;
 }
 
-.page[data-mode="light"] .hero::after {
+.page[data-mode="light"] .hero::after,
+.page[data-mode="light"] .readingHeader::after {
   background-color: var(--base-color-scale-green-6);
 }
 
@@ -382,6 +380,13 @@
    into. The anchor is zero-size and centred on the line's leading edge; its
    children are centred on that point. It starts at the first vertical gridline
    (--app-frame-start) so on load the duck rests exactly on that line. */
+.progressViewport {
+  position: absolute;
+  inset: 0;
+  overflow-x: clip;
+  pointer-events: none;
+}
+
 .progressRider {
   position: absolute;
   z-index: 1;
@@ -609,6 +614,11 @@
   }
 }
 
+.hero[data-compact="true"]::after,
+.hero[data-compact="true"] > .progressViewport {
+  visibility: hidden;
+}
+
 .heroInner {
   display: flex;
   flex-direction: column;
@@ -904,13 +914,14 @@
 }
 
 /* The single scroll region wraps the framed two-column body AND the
-   full-page-width footer. The top bar and hero stay fixed above; the sidebar
+   full-page-width footer. The top bar stays fixed above; the sidebar
    stays fixed via sticky positioning inside this scroller. */
 .scrollHost {
   flex: 1 1 auto;
   min-height: 0;
   width: 100%;
   overflow-y: auto;
+  scroll-padding-block-start: var(--app-hero-pinned, 0px);
   /* Without this, the scrollbar always renders with the browser's light-mode
      chrome (see #2822) because the scroller never tells the UA which colour
      scheme it's painted in. Firefox reads scrollbar-color directly; WebKit/
@@ -990,7 +1001,7 @@
   border-block-start: none;
   /* Offset in-page anchor jumps by the pinned hero height so a targeted heading
      lands just below the fixed hero instead of behind it. */
-  scroll-margin-top: calc(var(--app-hero-pinned, 17rem) + var(--base-size-24));
+  scroll-margin-top: var(--base-size-24);
 }
 
 .articleSection:first-child {
@@ -1768,10 +1779,8 @@
   min-width: 0;
   align-self: start;
   position: sticky;
-  /* Sit the sticky TOC just below the pinned hero (its visible height is
-     measured into --app-hero-pinned) so it never slides under the fixed hero.
-     The rem fallback matches the hero content's min height before measurement. */
-  top: var(--app-hero-pinned, 17rem);
+  /* Share the compact reading title's measured clearance. */
+  top: var(--app-hero-pinned, 0px);
   overflow: visible;
 }
 
@@ -1779,7 +1788,7 @@
   display: flex;
   flex-direction: column;
   max-block-size: calc(
-    100dvh - var(--app-hero-pinned, 17rem) - var(--base-size-64)
+    100dvh - var(--app-hero-pinned, 0px) - var(--base-size-64)
   );
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -2019,16 +2028,15 @@
   --brand-ActionMenu-color-item-hover: var(--menu-item-hover);
 }
 
-/* Short desktop viewports do not have enough reading space for a pinned hero.
-   The layout's measurement effect sets data-hero-pin="false" on .page whenever
-   pinning would leave less than MIN_HERO_READING of article below the hero (a
-   per-page decision, so the CLI page's taller install-bar hero releases sooner
-   than a plain hero). Release the hero to scroll away; the sticky TOC top and
-   in-page anchor offsets follow automatically because the effect also zeroes
-   --app-hero-pinned. */
-.page[data-hero-pin="false"] .hero {
-  position: relative;
-  top: auto;
+.contentCol :is([id], a, button, input, summary) {
+  scroll-margin-top: var(--base-size-24);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hero::after,
+  .readingHeader::after {
+    transition: none;
+  }
 }
 
 @media (max-width: 74.99rem) {
diff --git a/website/src/components/brand/styles/instructions.module.css b/website/src/components/brand/styles/instructions.module.css
index 277d29f66e..50b1a5212c 100644
--- a/website/src/components/brand/styles/instructions.module.css
+++ b/website/src/components/brand/styles/instructions.module.css
@@ -708,6 +708,10 @@
 /* Pagination: always show the Previous/Next chevrons (they are hidden on
    desktop by default) and strip the arrow stem so they read as clean
    chevrons; give the current page a neutral grey surface instead of green. */
+.pagination {
+  composes: pagination from "./catalog-pagination.module.css";
+}
+
 .pagination :global([class*="Pagination__controlArrowWrapper"]) {
   display: flex;
 }
diff --git a/website/src/components/brand/styles/learning-hub-copilot-app.module.css b/website/src/components/brand/styles/learning-hub-copilot-app.module.css
index 680f481fd6..9ec23d72dc 100644
--- a/website/src/components/brand/styles/learning-hub-copilot-app.module.css
+++ b/website/src/components/brand/styles/learning-hub-copilot-app.module.css
@@ -1547,6 +1547,10 @@
 /* Pagination: always show the Previous/Next chevrons (they are hidden on
    desktop by default) and strip the arrow stem so they read as clean
    chevrons; give the current page a neutral grey surface instead of green. */
+.pagination {
+  composes: pagination from "./catalog-pagination.module.css";
+}
+
 .pagination :global([class*="Pagination__controlArrowWrapper"]) {
   display: flex;
 }
diff --git a/website/src/components/brand/styles/plugins.module.css b/website/src/components/brand/styles/plugins.module.css
index 298509d5f3..820f4116f0 100644
--- a/website/src/components/brand/styles/plugins.module.css
+++ b/website/src/components/brand/styles/plugins.module.css
@@ -743,6 +743,10 @@
 /* Pagination: always show the Previous/Next chevrons (they are hidden on
    desktop by default) and strip the arrow stem so they read as clean
    chevrons; give the current page a neutral grey surface instead of green. */
+.pagination {
+  composes: pagination from "./catalog-pagination.module.css";
+}
+
 .pagination :global([class*="Pagination__controlArrowWrapper"]) {
   display: flex;
 }
diff --git a/website/src/components/brand/styles/reading-header.module.css b/website/src/components/brand/styles/reading-header.module.css
new file mode 100644
index 0000000000..fe323b552e
--- /dev/null
+++ b/website/src/components/brand/styles/reading-header.module.css
@@ -0,0 +1,70 @@
+.slot {
+  position: sticky;
+  top: 0;
+  block-size: 0;
+  z-index: 4;
+}
+
+.surface {
+  position: absolute;
+  inset-block-start: 0;
+  inline-size: 100%;
+  box-sizing: border-box;
+  background: var(--brand-color-canvas-default);
+  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  visibility: hidden;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 0s linear 180ms;
+}
+
+.slot[data-visible="true"] .surface {
+  visibility: visible;
+  opacity: 1;
+  transform: none;
+  transition-delay: 0s;
+}
+
+.row {
+  margin-inline-start: var(--reading-frame-start, 0px);
+  inline-size: var(--reading-frame-width, 100%);
+  box-sizing: border-box;
+  min-block-size: 52px;
+  padding: var(--base-size-8) var(--base-size-32);
+  padding-inline-end: calc(var(--base-size-24) + var(--brand-borderWidth-thin));
+  display: flex;
+  align-items: center;
+  gap: var(--base-size-24);
+}
+
+.title {
+  flex: 1;
+  min-inline-size: 0;
+  font-size: 1rem;
+  line-height: 1.5;
+  font-weight: var(--brand-text-weight-semibold);
+  color: var(--brand-color-text-default);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.action {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .surface {
+    transition: none;
+    transform: none;
+  }
+}
+
+@media (max-width: 74.99rem) {
+  .slot {
+    display: none;
+  }
+}
diff --git a/website/src/components/brand/styles/skills.module.css b/website/src/components/brand/styles/skills.module.css
index 54cef50327..c40b3b5fd5 100644
--- a/website/src/components/brand/styles/skills.module.css
+++ b/website/src/components/brand/styles/skills.module.css
@@ -715,6 +715,10 @@
 /* Pagination: always show the Previous/Next chevrons (they are hidden on
    desktop by default) and strip the arrow stem so they read as clean
    chevrons; give the current page a neutral grey surface instead of green. */
+.pagination {
+  composes: pagination from "./catalog-pagination.module.css";
+}
+
 .pagination :global([class*="Pagination__controlArrowWrapper"]) {
   display: flex;
 }
diff --git a/website/src/components/brand/styles/styles.module.css b/website/src/components/brand/styles/styles.module.css
index 80a9b2325a..b9d154ef71 100644
--- a/website/src/components/brand/styles/styles.module.css
+++ b/website/src/components/brand/styles/styles.module.css
@@ -7,7 +7,7 @@
    *   <768px      →  L/R 20px · T/B 40px
    *   768–1279px  →  L/R 91px · T/B 40px
    *   1280–1919px →  L/R 152px · T/B 60px
-   *   ≥1920px     →  variables stop applying → native centered-1280 layout
+   *   ≥1920px     →  variables stop applying → centered-1296 catalog layout
    * (91/152/60 have no base-size token, so they are raw px.)
    */
   --page-gutter: var(--base-size-20);
@@ -355,12 +355,13 @@
 }
 
 .cardGridItem {
+  --card-grid-inset: var(--base-size-28);
   position: relative;
   width: 100%;
   height: 100%;
   /* 28px + the Primer Card's 32px inner padding = 60px, matching the catalog
      card padding used across the rest of the site. */
-  padding: var(--base-size-28);
+  padding: var(--card-grid-inset);
   border-block-start: var(--brand-borderWidth-thin) solid
     var(--brand-color-border-muted);
 }
@@ -385,7 +386,7 @@
 .cardGridItem::before {
   content: "";
   position: absolute;
-  inset: var(--base-size-28);
+  inset: var(--card-grid-inset);
   border-radius: var(--brand-borderRadius-medium);
   pointer-events: none;
 }
@@ -446,6 +447,11 @@
   animation: heroRiseUp 0.6s ease-out 0.09s both;
 }
 
+.heroPrimaryAction svg {
+  --brand-color-text-default: currentColor;
+  --brand-color-text-muted: currentColor;
+}
+
 /* Hero icon, title, and description rise up from below and fade in on load, in
    a subtle stagger — matching the Agents page hero entrance. */
 @keyframes heroRiseUp {
@@ -476,24 +482,6 @@
   }
 }
 
-/* Dark-mode override for the Hero secondary CTA ("Become a contributor"): use
- * the requested solid #202020 fill instead of the default translucent white.
- * Not a token: --brand-button-secondary-bgColor-rest resolves to a
- * translucent overlay (rgba(255,255,255,0.12) in dark mode), which would
- * visually regress from the prototype's opaque fill — this hex is a
- * deliberate, verbatim match to the approved design, not an oversight. */
-:global([data-color-mode="dark"]) .heroFrameInner
-  :global([class*="Button--secondary"]) {
-  background-color: #202020;
-}
-
-/* Light-mode override for the Hero secondary CTA: requested solid #F0F0F0
- * fill, same rationale as above. */
-:global([data-color-mode="light"]) .heroFrameInner
-  :global([class*="Button--secondary"]) {
-  background-color: #f0f0f0;
-}
-
 /*
  * Lay the heading out as a row: title on the left with the count label sitting
  * just after it (not pushed to the far card edge).
@@ -505,6 +493,12 @@
   gap: var(--base-size-12);
 }
 
+.resourceIcon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--brand-color-text-default);
+}
+
 /* Keep the count label at full width; let the title take the remaining space. */
 .cardHeadingRow :global([class*="Token"]) {
   flex-shrink: 0;
@@ -524,6 +518,7 @@
 }
 
 .ctaFrameInner {
+  background-color: var(--brand-CTABanner-bgColor);
   border-inline: var(--brand-borderWidth-thin) solid
     var(--brand-color-border-muted);
 }
@@ -562,22 +557,58 @@
   width: 100%;
 }
 
-/*
- * Render the Card's arrow-only CTA as a circular chevron affordance, matching
- * the reference design. The Card link still wraps the whole card, so the
- * chevron stays accessible and clickable. Colour tracks the Primer Brand Card
- * default: the arrow uses the link accent, not the green accent-primary.
- */
-.resourceCard :global([class*="Card__actionIcon--arrowOnly"]) {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: var(--base-size-40);
-  block-size: var(--base-size-40);
-  overflow: hidden;
-  color: var(--brand-Link-color-accent);
-  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
-  border-radius: var(--brand-borderRadius-full);
+/* Outline first, then make room for the label, then fade it in without sliding.
+   On exit the label fades out before its space collapses. */
+.cardGridItem .resourceCard :global([class*="Card__action--arrowOnly"]) {
+  max-inline-size: 100%;
+  padding: var(--base-size-4);
+  column-gap: 0;
+  transition:
+    border-color 100ms ease-out,
+    background-color 100ms ease-out,
+    column-gap 280ms ease-in-out 100ms,
+    padding-inline 280ms ease-in-out 100ms;
+}
+
+.cardGridItem .resourceCard :global([class*="Card__actionLabelClip"]) {
+  flex: 0 1 auto;
+  max-inline-size: 0;
+  margin-inline: 0;
+  padding-inline: 0;
+  transform: none;
+  opacity: 0;
+  transition: opacity 100ms ease-out, max-inline-size 280ms ease-in-out 100ms;
+}
+
+.cardGridItem .resourceCard :global([class*="Card--expandableArrow"]) {
+  transition: transform 280ms ease-in-out 100ms;
+}
+
+.cardGridItem .resourceCard:is(:hover, :focus-within)
+  :global([class*="Card__action--arrowOnly"]) {
+  padding-inline-start: var(--base-size-24);
+  column-gap: var(--base-size-8);
+}
+
+.cardGridItem .resourceCard:is(:hover, :focus-within)
+  :global([class*="Card__actionLabelClip"]) {
+  max-inline-size: 18rem;
+  opacity: 1;
+  transition: max-inline-size 280ms ease-in-out 100ms, opacity 140ms ease-out 380ms;
+}
+
+@media (hover: none), (max-width: 47.99rem) {
+  .cardGridItem .resourceCard :global([class*="Card__action--arrowOnly"]) {
+    padding-inline-start: var(--base-size-24);
+    column-gap: var(--base-size-8);
+    border-color: var(--brand-color-border-default);
+  }
+
+  .cardGridItem .resourceCard :global([class*="Card__actionLabelClip"]) {
+    max-inline-size: 18rem;
+    opacity: 1;
+  }
+
 }
 
 /* Tablet nav: the full desktop nav row (tabs + search + heart + Contribute)
@@ -702,12 +733,11 @@
 }
 
 /* Two-column band: from tablet (768px) up to just below xlarge (1280px), the
-   grid renders two columns (span small:6 holds through the large breakpoint).
+   grid renders two columns (span medium:6 holds through the large breakpoint).
    Draw the vertical rule on both edges of every card and clear the top border
    on the first row (items 1 and 2). */
 @media screen and (min-width: 48rem) and (max-width: 79.99rem) {
   .cardGridItem {
-    padding: var(--base-size-28);
     border-inline: var(--brand-borderWidth-thin) solid
       var(--brand-color-border-muted);
   }
@@ -722,7 +752,6 @@
    where span drops to 4. */
 @media screen and (min-width: 80rem) {
   .cardGridItem {
-    padding: var(--base-size-28);
     border-block-start: 0;
     border-inline-end: 0;
     border-inline-start: var(--brand-borderWidth-thin) solid
@@ -744,11 +773,48 @@
   }
 }
 
+/* Reduce the nested card padding before adding columns squeezes the labels. */
+@media screen and (max-width: 89.99rem) {
+  .cardGridItem {
+    --card-grid-inset: var(--base-size-12);
+  }
+
+  .resourceCard {
+    padding: var(--base-size-16);
+  }
+}
+
+@media screen and (min-width: 48rem) and (max-width: 63.99rem) {
+  .resourceCard {
+    padding-inline: var(--base-size-8);
+  }
+}
+
+@media screen and (max-width: 47.99rem) {
+  .cardGridItem {
+    --card-grid-inset: var(--base-size-8);
+  }
+
+  .resourceCard {
+    padding: var(--base-size-12) var(--base-size-8);
+  }
+
+  .cardHeadingRow {
+    gap: var(--base-size-8);
+  }
+}
+
+@media screen and (max-width: 22.49rem) {
+  .resourceCard {
+    padding-inline: 0;
+  }
+}
+
 /*
  * Responsive gutters (below 1920px). Neutralise the native Section/Grid
  * 1280px-centered layout and inset each band's framed content by the tiered
  * --page-gutter, so the vertical gridlines track the content edge at every
- * width. At >=1920px this block drops out and the original layout returns.
+ * width. At >=1920px the frame matches the catalog's centered 1296px layout.
  */
 @media screen and (max-width: 119.99rem) {
   .heroFrame :global([class*="Section__container"]),
@@ -796,3 +862,16 @@
     margin-inline: var(--page-gutter);
   }
 }
+
+@media screen and (min-width: 120rem) {
+  .topBarInner {
+    width: 1296px;
+  }
+
+  .heroFrame :global([class*="Section__container"]),
+  .ctaFrame :global([class*="Section__container"]),
+  .dividerFrame :global([class*="Section__container"]),
+  .cardGridContent :global([class*="Grid-module__Grid_"]) {
+    max-width: 1296px;
+  }
+}
diff --git a/website/src/components/brand/useAgentDetailScroll.ts b/website/src/components/brand/useAgentDetailScroll.ts
index 3a817e2ac2..4129cea22a 100644
--- a/website/src/components/brand/useAgentDetailScroll.ts
+++ b/website/src/components/brand/useAgentDetailScroll.ts
@@ -8,70 +8,115 @@ const TWO_COLUMN_QUERY = "(min-width: 75rem)";
 type AgentDetailClasses = {
   hero: string;
   heroInner: string;
-  heroContent: string;
 };
 
 export function useAgentDetailHeroPin(
   contentScrollRef: React.RefObject<HTMLDivElement | null>,
   classes: AgentDetailClasses,
+  prefix = "dotnet",
 ) {
+  const [pinnedHeight, setPinnedHeight] = React.useState(0);
+  const { hero: heroClass, heroInner: frameClass } = classes;
   React.useEffect(() => {
     const scrollHost = contentScrollRef.current;
     if (!scrollHost) return;
     const page = scrollHost.parentElement;
+    const hero = scrollHost.getElementsByClassName(heroClass)[0];
+    const frame = scrollHost.getElementsByClassName(frameClass)[0];
+    const strip = scrollHost.querySelector<HTMLElement>("[data-reading-header]");
+    const surface = strip?.firstElementChild;
+    if (!(hero instanceof HTMLElement) || !(frame instanceof HTMLElement) ||
+        !strip || !(surface instanceof HTMLElement)) return;
+    let boundary: IntersectionObserver | undefined;
+    let updateVisibility = () => {};
+    let focusFrame = 0;
+    const actions = hero.querySelector<HTMLElement>("[data-hero-actions]");
+    const main = scrollHost.closest("main") ?? scrollHost.querySelector("main");
 
     const measure = () => {
       const scrollbar = scrollHost.offsetWidth - scrollHost.clientWidth;
-      page?.style.setProperty("--dotnet-scrollbar", `${scrollbar}px`);
-
-      const hero = page?.getElementsByClassName(classes.hero)[0];
-      const frame = page?.getElementsByClassName(classes.heroInner)[0];
-      const content = page?.getElementsByClassName(classes.heroContent)[0];
-      if (!(hero instanceof HTMLElement) || !(frame instanceof HTMLElement)) {
-        return;
-      }
+      page?.style.setProperty(`--${prefix}-scrollbar`, `${scrollbar}px`);
 
       const heroRect = hero.getBoundingClientRect();
       const frameRect = frame.getBoundingClientRect();
       const frameStart = Math.round((frameRect.left - heroRect.left) * 100) / 100;
       const frameWidth = Math.round(frameRect.width * 100) / 100;
-      page?.style.setProperty("--dotnet-frame-start", `${frameStart}px`);
-      page?.style.setProperty("--dotnet-frame-width", `${frameWidth}px`);
+      page?.style.setProperty(`--${prefix}-frame-start`, `${frameStart}px`);
+      page?.style.setProperty(`--${prefix}-frame-width`, `${frameWidth}px`);
+      page?.style.setProperty("--reading-frame-start", `${frameStart}px`);
+      page?.style.setProperty("--reading-frame-width", `${frameWidth}px`);
 
-      if (!(content instanceof HTMLElement)) return;
-      const contentRect = content.getBoundingClientRect();
-      const crumbBand = Math.round((contentRect.top - heroRect.top) * 100) / 100;
-      const contentBand = Math.round((heroRect.bottom - contentRect.top) * 100) / 100;
+      const height = surface.getBoundingClientRect().height;
       const twoColumn = window.matchMedia(TWO_COLUMN_QUERY).matches;
-      const shouldPin = twoColumn && scrollHost.clientHeight - contentBand >= MIN_HERO_READING;
-      const pinnedHeight = shouldPin ? contentBand : 0;
+      const shouldPin = twoColumn && height <= 64 &&
+        scrollHost.getBoundingClientRect().top + height <= 144 &&
+        scrollHost.clientHeight - height >= MIN_HERO_READING;
+      const pinned = shouldPin ? height : 0;
 
       if (page) page.dataset.heroPin = shouldPin ? "true" : "false";
-      page?.style.setProperty("--dotnet-hero-crumb", `${shouldPin ? crumbBand : 0}px`);
-      page?.style.setProperty("--dotnet-hero-pinned", `${pinnedHeight}px`);
+      page?.style.setProperty(`--${prefix}-hero-pinned`, `${pinned}px`);
+      setPinnedHeight(pinned);
+      boundary?.disconnect();
+      updateVisibility = () => {
+        const focused = strip.contains(document.activeElement);
+        const visible = shouldPin && (focused ||
+          hero.getBoundingClientRect().bottom <= scrollHost.getBoundingClientRect().top + height);
+        if (!visible && focused) main?.focus({ preventScroll: true });
+        strip.dataset.visible = String(visible);
+        strip.inert = !visible;
+        strip.setAttribute("aria-hidden", String(!visible));
+        hero.dataset.compact = String(visible);
+        if (visible && actions?.contains(document.activeElement)) {
+          const action = strip.querySelector<HTMLElement>("[data-reading-action] a, [data-reading-action] button");
+          (action ?? main)?.focus({ preventScroll: true });
+        }
+        if (actions) actions.inert = visible;
+      };
+      updateVisibility();
+      boundary = new IntersectionObserver(updateVisibility, {
+        root: scrollHost,
+        // Hand over while the remaining hero is the same height as the strip,
+        // rather than showing a bare progress line before a taller title pops in.
+        rootMargin: `-${height}px 0px 0px 0px`,
+        threshold: 0,
+      });
+      boundary.observe(hero);
     };
 
     measure();
+    // Hydrated markdown can appear after the browser's initial fragment jump.
+    // Resolve it once the measured reading clearance is available.
+    const initialAnchor = window.requestAnimationFrame(() => {
+      scrollHost.querySelector(":target")?.scrollIntoView({ block: "start", behavior: "instant" });
+    });
     window.addEventListener("resize", measure);
-    const hero = page?.getElementsByClassName(classes.hero)[0];
-    const observer =
-      hero instanceof HTMLElement && typeof ResizeObserver !== "undefined"
-        ? new ResizeObserver(measure)
-        : undefined;
-    if (hero instanceof HTMLElement) observer?.observe(hero);
+    const observer = new ResizeObserver(measure);
+    observer.observe(hero);
+    observer.observe(surface);
+    observer.observe(scrollHost);
+    const onFocusOut = () => {
+      window.cancelAnimationFrame(focusFrame);
+      focusFrame = window.requestAnimationFrame(() => updateVisibility());
+    };
+    strip.addEventListener("focusout", onFocusOut);
 
     return () => {
       window.removeEventListener("resize", measure);
-      observer?.disconnect();
+      window.cancelAnimationFrame(initialAnchor);
+      window.cancelAnimationFrame(focusFrame);
+      strip.removeEventListener("focusout", onFocusOut);
+      observer.disconnect();
+      boundary?.disconnect();
     };
-  }, [classes, contentScrollRef]);
+  }, [heroClass, frameClass, contentScrollRef, prefix]);
+  return pinnedHeight;
 }
 
 export function useAgentDetailProgress(
   contentScrollRef: React.RefObject<HTMLDivElement | null>,
-  lastSectionId: string,
   setShowBackToTop: React.Dispatch<React.SetStateAction<boolean>>,
   setHeroBurst: React.Dispatch<React.SetStateAction<boolean>>,
+  prefix = "dotnet",
 ) {
   const burstRef = React.useRef(false);
 
@@ -79,14 +124,10 @@ export function useAgentDetailProgress(
     const scrollHost = contentScrollRef.current;
     if (!scrollHost) return;
     const page = scrollHost.parentElement;
-    let lastHeading: HTMLElement | null = null;
+    const content = scrollHost.querySelector<HTMLElement>("[data-reading-content]");
+    if (!content) throw new Error("Reading progress requires an article marked data-reading-content.");
 
     const update = () => {
-      if (!lastHeading) {
-        const section = document.getElementById(lastSectionId);
-        lastHeading = (section?.querySelector("h2") as HTMLElement | null) ?? section;
-      }
-
       const internalScroll = window.matchMedia(TWO_COLUMN_QUERY).matches;
       const rootRect = scrollHost.getBoundingClientRect();
       const regionTop = rootRect.top + window.scrollY;
@@ -94,23 +135,18 @@ export function useAgentDetailProgress(
         ? scrollHost.scrollTop
         : Math.max(0, window.scrollY - regionTop);
       const viewportHeight = internalScroll ? rootRect.height : window.innerHeight;
-      let finish = internalScroll
-        ? scrollHost.scrollHeight - scrollHost.clientHeight
-        : Math.max(1, scrollHost.scrollHeight - viewportHeight);
-
-      if (lastHeading) {
-        const headingOffset = internalScroll
-          ? lastHeading.getBoundingClientRect().top - rootRect.top + scrollHost.scrollTop
-          : lastHeading.getBoundingClientRect().top + window.scrollY - regionTop;
-        finish = Math.max(1, headingOffset - viewportHeight * 0.6);
-      }
+      const contentBottom = content.getBoundingClientRect().bottom;
+      const endOffset = internalScroll
+        ? contentBottom - rootRect.top + scrollHost.scrollTop
+        : contentBottom + window.scrollY - regionTop;
+      const finish = Math.max(0, endOffset - viewportHeight);
 
-      const progress = finish > 0 ? Math.min(1, scrollTop / finish) : 0;
+      const progress = finish > 0 ? Math.min(1, scrollTop / finish) : 1;
       const eased = Math.max(progress > 0 ? Math.pow(progress, 0.5) : 0, 0.055);
-      page?.style.setProperty("--dotnet-progress", String(eased));
+      page?.style.setProperty(`--${prefix}-progress`, String(eased));
       setShowBackToTop(scrollTop > 200);
 
-      const reached = progress >= 1;
+      const reached = scrollTop > 0 && progress >= 1;
       if (reached !== burstRef.current) {
         burstRef.current = reached;
         setHeroBurst(reached);
@@ -121,12 +157,15 @@ export function useAgentDetailProgress(
     scrollHost.addEventListener("scroll", update, { passive: true });
     window.addEventListener("scroll", update, { passive: true });
     window.addEventListener("resize", update);
+    const observer = new ResizeObserver(update);
+    observer.observe(content);
     return () => {
       scrollHost.removeEventListener("scroll", update);
       window.removeEventListener("scroll", update);
       window.removeEventListener("resize", update);
+      observer.disconnect();
     };
-  }, [contentScrollRef, lastSectionId, setHeroBurst, setShowBackToTop]);
+  }, [contentScrollRef, setHeroBurst, setShowBackToTop, prefix]);
 
   return React.useCallback(() => {
     const scrollHost = contentScrollRef.current;
@@ -136,5 +175,60 @@ export function useAgentDetailProgress(
     } else {
       window.scrollTo({ top: 0, behavior: getScrollBehavior() });
     }
+    const heading = scrollHost.querySelector("h1");
+    heading?.setAttribute("tabindex", "-1");
+    heading?.focus({ preventScroll: true });
   }, [contentScrollRef]);
 }
+
+export function useReadingScrollSpy(
+  contentScrollRef: React.RefObject<HTMLDivElement | null>,
+  toc: { id: string }[],
+  pinnedHeight: number,
+  setActiveSection: React.Dispatch<React.SetStateAction<string>>,
+) {
+  React.useEffect(() => {
+    const scroller = contentScrollRef.current;
+    if (!scroller || !toc.length) return;
+    let observer: IntersectionObserver;
+    const build = () => {
+      observer?.disconnect();
+      const internal = window.matchMedia(TWO_COLUMN_QUERY).matches;
+      const viewport = internal ? scroller.clientHeight : window.innerHeight;
+      const firstSection = document.getElementById(toc[0].id);
+      const anchorGap = firstSection
+        ? parseFloat(getComputedStyle(firstSection).scrollMarginTop) || 0
+        : 0;
+      const readingInset = pinnedHeight + anchorGap;
+      const visible = new Set<Element>();
+      observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) visible.add(entry.target);
+          else visible.delete(entry.target);
+        });
+        const readingTop = (internal ? scroller.getBoundingClientRect().top : 0) + readingInset;
+        const first = [...visible].filter(
+          // scrollTop is rounded to CSS pixels; ignore a fractional trailing edge.
+          (element) => element.getBoundingClientRect().bottom > readingTop + 1,
+        ).sort(
+          (a, b) => a.getBoundingClientRect().top - b.getBoundingClientRect().top,
+        )[0];
+        if (first) setActiveSection(first.id);
+      }, {
+        root: internal ? scroller : null,
+        rootMargin: `-${readingInset}px 0px -${Math.round(Math.max(0, viewport - readingInset) * 0.65)}px 0px`,
+        threshold: 0,
+      });
+      toc.forEach(({ id }) => {
+        const section = document.getElementById(id);
+        if (section) observer.observe(section);
+      });
+    };
+    build();
+    window.addEventListener("resize", build);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", build);
+    };
+  }, [contentScrollRef, toc, pinnedHeight, setActiveSection]);
+}
diff --git a/website/src/components/brand/useCatalogPageFocus.ts b/website/src/components/brand/useCatalogPageFocus.ts
new file mode 100644
index 0000000000..f4c2e5f40f
--- /dev/null
+++ b/website/src/components/brand/useCatalogPageFocus.ts
@@ -0,0 +1,17 @@
+import { useEffect, useRef } from "react";
+import { getScrollBehavior } from "./scrollBehavior";
+
+export function useCatalogPageFocus(currentPage: number) {
+  const previousPage = useRef(currentPage);
+  useEffect(() => {
+    if (previousPage.current === currentPage) return;
+    previousPage.current = currentPage;
+    const frame = window.requestAnimationFrame(() => {
+      const catalog = document.getElementById("catalog");
+      if (!catalog) return;
+      catalog.scrollIntoView({ behavior: getScrollBehavior(), block: "start" });
+      catalog.focus({ preventScroll: true });
+    });
+    return () => window.cancelAnimationFrame(frame);
+  }, [currentPage]);
+}
diff --git a/website/src/integrations/pagefind-resources.ts b/website/src/integrations/pagefind-resources.ts
index 3f15229ede..6fb18dc24f 100644
--- a/website/src/integrations/pagefind-resources.ts
+++ b/website/src/integrations/pagefind-resources.ts
@@ -1,14 +1,16 @@
 /**
  * Builds the Pagefind search index after the static build completes.
  *
- * Indexes every built HTML page and additionally injects synthetic records for
- * catalog resources (agents, skills, instructions, hooks, workflows, plugins)
- * so they are findable even where they are rendered client-side.
+ * Indexes canonical HTML pages, excluding untranslated locale rewrites. Resource
+ * metadata enriches the HTML record; only resources without HTML need a custom
+ * record. Search-only markup is never written back to the served pages.
  */
 import type { AstroIntegration } from "astro";
-import { readFileSync } from "node:fs";
+import { readFileSync, readdirSync } from "node:fs";
+import { join } from "node:path";
 import { fileURLToPath } from "node:url";
 import * as pagefind from "pagefind";
+import { hrefKey } from "../components/brand/searchIndex";
 
 interface SearchRecord {
   type: string;
@@ -54,14 +56,79 @@ const DETAIL_ROUTE_TYPES = new Set([
   "extension",
 ]);
 
+function attribute(tag: string, name: string): string | undefined {
+  return tag.match(new RegExp(`\\b${name}=["']([^"']*)["']`, "i"))?.[1];
+}
+
+function escapeAttribute(value: string): string {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;")
+    .replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+/**
+ * BaseLayout emits a canonical link and the actual content language. Learning
+ * fallbacks can have a localized canonical link, so lang must also be checked.
+ * Never collapse a translated document just because its slug matches English.
+ */
+export function prepareSearchHtml(
+  html: string,
+  url: string,
+  { base = "/", locales = [], defaultLocale = "en" }: {
+    base?: string; locales?: string[]; defaultLocale?: string;
+  } = {},
+  record?: SearchRecord,
+): { url: string; content: string } | null {
+  if (/<meta\b[^>]*name=["']robots["'][^>]*content=["'][^"']*noindex/i.test(html)) return null;
+  const locale = attribute(html.match(/<html\b[^>]*>/i)?.[0] ?? "", "lang");
+  if (!locale) throw new Error(`Missing content language: ${url}`);
+  const relative = url.slice(base.length).split("/")[0];
+  if (relative !== defaultLocale && locales.includes(relative) && locale === defaultLocale) return null;
+
+  const canonicalTag = html.match(/<link\b[^>]*rel=["']canonical["'][^>]*>/i)?.[0];
+  const canonical = attribute(canonicalTag ?? "", "href");
+  if (!canonical) throw new Error(`Missing canonical URL: ${url}`);
+  const destination = new URL(canonical, "https://awesome-copilot.github.com").pathname;
+  const meta = {
+    canonical: destination,
+    locale,
+    ...(record ? { resourceTitle: record.title, description: record.description } : {}),
+  };
+  const typeFilter = record
+    ? `<meta data-pagefind-filter="type[content]" content="${escapeAttribute(record.type)}">`
+    : "";
+  let content = html
+    .replace(/<body\b[^>]*>/i, (tag) => tag.replace(/\sdata-pagefind-body(?:=["'][^"']*["'])?/i, ""))
+    .replace(/<main\b/i, "<main data-pagefind-body");
+  if (!/<main\b/i.test(content)) throw new Error(`Missing search content landmark: ${url}`);
+  content = content.replace("</head>", `${Object.entries(meta).map(([name, value]) =>
+    `<meta data-pagefind-meta="${name}[content]" content="${escapeAttribute(value)}">`,
+  ).join("")}${typeFilter}</head>`);
+  if (!record) {
+    content = content.replace(/<meta\b[^>]*name=["']description["'][^>]*>/i,
+      (tag) => tag.replace("<meta", '<meta data-pagefind-meta="description[content]"'));
+  } else {
+    const keywords = `${record.searchText || ""} ${TYPE_LABELS[record.type] || record.type} ${record.type}`;
+    content = content.replace("</main>", `<span data-pagefind-weight="0.5">${escapeAttribute(keywords)}</span></main>`);
+  }
+  return { url: destination, content };
+}
+
 export default function pagefindResources(): AstroIntegration {
   let siteBase = "/";
+  let locales: string[] = [];
+  let defaultLocale = "en";
 
   return {
     name: "pagefind-resources",
     hooks: {
       "astro:config:done": ({ config }) => {
         siteBase = config.base;
+        if (config.i18n) {
+          locales = config.i18n.locales.flatMap((locale) =>
+            typeof locale === "string" ? [locale] : [locale.path],
+          );
+          defaultLocale = config.i18n.defaultLocale;
+        }
       },
       "astro:build:done": async ({ dir, logger }) => {
         const log = logger.fork("pagefind-resources");
@@ -70,7 +137,9 @@ export default function pagefindResources(): AstroIntegration {
         try {
           log.info("Building search index with Pagefind + resource records...");
 
-          const response = await pagefind.createIndex();
+          const response = await pagefind.createIndex({
+            excludeSelectors: ["nav", "footer", '[role="navigation"]'],
+          });
           if (response.errors.length > 0) {
             for (const err of response.errors) log.error(err);
             throw new Error("Failed to create Pagefind index");
@@ -81,53 +150,57 @@ export default function pagefindResources(): AstroIntegration {
             throw new Error("Pagefind index is undefined");
           }
 
-          // Index all built HTML pages
-          const indexResult = await index.addDirectory({
-            path: fileURLToPath(dir),
-          });
-          if (indexResult.errors.length > 0) {
-            for (const err of indexResult.errors) log.error(err);
-            throw new Error("Failed to index HTML directory");
-          }
-          log.info(`Indexed ${indexResult.page_count} HTML pages.`);
-
           // Read and index resource records from search-index.json
           const searchIndexPath = fileURLToPath(
             new URL("./data/search-index.json", dir)
           );
-          let records: SearchRecord[];
-          try {
-            records = JSON.parse(readFileSync(searchIndexPath, "utf-8"));
-          } catch {
-            log.warn(
-              "Could not read search-index.json, skipping resource indexing."
-            );
-            records = [];
-          }
+          const records: SearchRecord[] = JSON.parse(readFileSync(searchIndexPath, "utf-8"));
 
           // Use the base path from Astro config (e.g. "/")
           const base = siteBase.endsWith("/") ? siteBase : `${siteBase}/`;
+          const resourceUrl = (record: SearchRecord) =>
+            DETAIL_ROUTE_TYPES.has(record.type) && record.id
+              ? `${base}${record.type}/${encodeURIComponent(record.id)}/`
+              : TYPE_PAGES[record.type] ? `${base}${TYPE_PAGES[record.type].slice(1)}` : undefined;
+          const recordsByUrl = new Map(records.flatMap((record) => {
+            const url = resourceUrl(record);
+            return url ? [[hrefKey(url), record] as const] : [];
+          }));
+
+          const indexed = new Set<string>();
+          const root = fileURLToPath(dir);
+          const files = readdirSync(root, { recursive: true, encoding: "utf8" })
+            .filter((file) => file.endsWith(".html")).sort();
+          for (const file of files) {
+            const url = `${base}${file.replace(/\\/g, "/").replace(/index\.html$/, "")}`;
+            const prepared = prepareSearchHtml(
+              readFileSync(join(root, file), "utf8"), url,
+              { base, locales, defaultLocale }, recordsByUrl.get(hrefKey(url)),
+            );
+            if (!prepared || indexed.has(hrefKey(prepared.url))) continue;
+            const result = await index.addHTMLFile(prepared);
+            if (result.errors.length) throw new Error(`${url}: ${result.errors.join("; ")}`);
+            indexed.add(hrefKey(prepared.url));
+          }
+          log.info(`Indexed ${indexed.size} canonical HTML pages (from ${files.length} files).`);
 
           let added = 0;
           for (const record of records) {
-            const hasDetailPage =
-              DETAIL_ROUTE_TYPES.has(record.type) && Boolean(record.id);
-            const typePage = TYPE_PAGES[record.type];
-            // Skip records we can neither deep-link nor point at a listing page.
-            if (!hasDetailPage && !typePage) continue;
-
-            const url = hasDetailPage
-              ? `${base}${record.type}/${encodeURIComponent(record.id)}/`
-              : `${base}${typePage.slice(1)}`;
+            const url = resourceUrl(record);
+            if (!url || indexed.has(hrefKey(url))) continue;
             const typeLabel = TYPE_LABELS[record.type] || record.type;
 
             const addResult = await index.addCustomRecord({
               url,
               content:
-                record.searchText || `${record.title} ${record.description}`,
+                `${record.searchText || `${record.title} ${record.description}`} ${typeLabel} ${record.type}`,
               language: "en",
               meta: {
-                title: `${record.title} — ${typeLabel}`,
+                title: record.title,
+                resourceTitle: record.title,
+                description: record.description,
+                canonical: url,
+                locale: "en",
               },
               filters: {
                 type: [record.type],
@@ -135,9 +208,9 @@ export default function pagefindResources(): AstroIntegration {
             });
 
             if (addResult.errors.length > 0) {
-              for (const err of addResult.errors)
-                log.warn(`Record ${record.id}: ${err}`);
+              throw new Error(`Record ${record.id}: ${addResult.errors.join("; ")}`);
             } else {
+              indexed.add(hrefKey(url));
               added++;
             }
           }
diff --git a/website/src/lib/detail-page.ts b/website/src/lib/detail-page.ts
index 83dd51aefd..c615ab290f 100644
--- a/website/src/lib/detail-page.ts
+++ b/website/src/lib/detail-page.ts
@@ -4,6 +4,7 @@ import { marked } from "marked";
 import matter from "gray-matter";
 import { enhanceMarkdownA11y } from "./markdown-a11y";
 import { sanitizeHtml } from "./sanitize-html";
+import type { MarkdownImageSource } from "./markdown-images";
 
 /**
  * Build-time helpers shared by the resource detail pages
@@ -93,7 +94,10 @@ function stripLeadingH1(html: string): string {
  * Read a resource's markdown file at build time and return its rendered HTML,
  * trimmed frontmatter block, and the raw file contents.
  */
-export function readResourceMarkdown(filePath: string): {
+export function readResourceMarkdown(
+  filePath: string,
+  imageSource: MarkdownImageSource | null = { rawBase: RAW_BASE, filePath },
+): {
   markdownHtml: string;
   frontmatterText: string;
   rawMarkdown: string;
@@ -108,7 +112,10 @@ export function readResourceMarkdown(filePath: string): {
     frontmatterText = parsed.matter?.trim() ?? "";
     markdownHtml = enhanceMarkdownA11y(
       stripLeadingH1(
-        sanitizeHtml(marked.parse(parsed.content, { async: false }) as string)
+        sanitizeHtml(
+          marked.parse(parsed.content, { async: false }) as string,
+          imageSource,
+        )
       )
     );
   } catch (error) {
diff --git a/website/src/lib/markdown-images.ts b/website/src/lib/markdown-images.ts
new file mode 100644
index 0000000000..437f212387
--- /dev/null
+++ b/website/src/lib/markdown-images.ts
@@ -0,0 +1,89 @@
+/** The raw repository root (including revision) and the originating document. */
+export interface MarkdownImageSource {
+  rawBase: string;
+  filePath: string;
+}
+
+/**
+ * Resolve only embedded images, never ordinary links. A missing source is an
+ * error for relative images, not permission to use the current website route.
+ */
+export function resolveMarkdownImage(
+  value: string,
+  source: MarkdownImageSource | null,
+): string {
+  const url = value.trim();
+  if (!url || /[\u0000-\u001f\u007f\\]/.test(url)) {
+    throw new Error("Empty image URL or unsupported control characters/backslashes");
+  }
+  if (/^https?:\/\//i.test(url)) {
+    const absolute = new URL(url);
+    // Only a full commit SHA makes the blob/ref boundary unambiguous.
+    if (absolute.origin === "https://github.com") {
+      const blob = /^\/([^/]+\/[^/]+)\/blob\/([a-f0-9]{40})\/(.+)$/i.exec(
+        absolute.pathname,
+      );
+      if (blob) {
+        return `https://raw.githubusercontent.com/${blob[1]}/${blob[2]}/${blob[3]}${absolute.search}${absolute.hash}`;
+      }
+    }
+    return url;
+  }
+  if (url.startsWith("//")) return new URL(`https:${url}`).href;
+  if (/^[a-z][a-z0-9+.-]*:/i.test(url)) {
+    throw new Error("Unsupported image URL scheme");
+  }
+  // Site-owned assets such as Learning Hub /images/... are not repo paths.
+  if (url.startsWith("/")) return url;
+  if (!source) throw new Error("Relative image has no document source");
+
+  const base = new URL(`${source.rawBase.replace(/\/$/, "")}/`);
+  if (
+    base.origin !== "https://raw.githubusercontent.com" ||
+    base.search || base.hash || base.username || base.password ||
+    !/^\/[A-Za-z0-9._-]+\/[A-Za-z0-9._-]+\/[^/]+\/$/.test(base.pathname)
+  ) {
+    throw new Error("Image source must specify a raw GitHub repository and revision");
+  }
+  const segments = source.filePath.replace(/\\/g, "/").split("/");
+  if (segments.some((part) => !part || part === "." || part === "..")) {
+    throw new Error("Image source must have a repository-relative document path");
+  }
+  const document = new URL(segments.map(encodeURIComponent).join("/"), base);
+  const resolved = new URL(url, document);
+  if (!resolved.href.startsWith(base.href)) {
+    throw new Error("Relative image escapes the source repository revision");
+  }
+  return resolved.href;
+}
+
+/** Tokenize srcset URLs before descriptors; commas inside a URL are legal. */
+export function resolveMarkdownSrcset(
+  value: string,
+  source: MarkdownImageSource | null,
+): string {
+  const candidates: string[] = [];
+  let rest = value;
+  while (rest.trim()) {
+    rest = rest.replace(/^[\s,]+/, "");
+    if (!rest) break;
+    const token = /^[^\s]+/.exec(rest)![0];
+    rest = rest.slice(token.length);
+    let url = token;
+    let descriptor = "";
+    if (url.endsWith(",")) {
+      url = url.replace(/,+$/, "");
+    } else {
+      const end = rest.indexOf(",");
+      descriptor = (end < 0 ? rest : rest.slice(0, end)).trim();
+      rest = end < 0 ? "" : rest.slice(end + 1);
+    }
+    if (descriptor && !/^(?:[1-9]\d*w|(?:\d+(?:\.\d+)?|\.\d+)x)$/.test(descriptor)) {
+      throw new Error("Unsupported image srcset descriptor");
+    }
+    candidates.push(
+      `${resolveMarkdownImage(url, source)}${descriptor ? ` ${descriptor}` : ""}`,
+    );
+  }
+  return candidates.join(", ");
+}
diff --git a/website/src/lib/sanitize-html.ts b/website/src/lib/sanitize-html.ts
index 7894d07897..aebe36b4f5 100644
--- a/website/src/lib/sanitize-html.ts
+++ b/website/src/lib/sanitize-html.ts
@@ -13,12 +13,33 @@
  * browser DOMPurify when bundled for the client.
  */
 import DOMPurify from "isomorphic-dompurify";
+import {
+  resolveMarkdownImage,
+  resolveMarkdownSrcset,
+  type MarkdownImageSource,
+} from "./markdown-images";
 
-let noopenerHookInstalled = false;
+let markdownHooksInstalled = false;
 
-function ensureNoopenerHook(): void {
-  if (noopenerHookInstalled) return;
-  noopenerHookInstalled = true;
+function ensureMarkdownHooks(): void {
+  if (markdownHooksInstalled) return;
+  markdownHooksInstalled = true;
+
+  DOMPurify.addHook("afterSanitizeAttributes", (node) => {
+    if (node.tagName !== "IMG") return;
+    node.removeAttribute("data-markdown-block-image");
+    let container = node.closest("picture") ?? node;
+    if (container.parentElement?.tagName === "A") container = container.parentElement;
+    const parent = container.parentElement;
+    if (!parent || !["P", "DIV", "BODY", "SECTION", "ARTICLE", "LI"].includes(parent.tagName)) return;
+    // Image-only paragraphs are blocks; text and badge rows stay inline.
+    if (parent.tagName === "P" &&
+      (parent.textContent?.trim() || parent.querySelectorAll("img").length !== 1)) return;
+    if (Array.from(parent.childNodes).some((child) =>
+      child.nodeType === 3 && child.textContent?.trim(),
+    )) return;
+    node.setAttribute("data-markdown-block-image", "");
+  });
 
   DOMPurify.addHook("afterSanitizeAttributes", (node) => {
     const el = node as unknown as {
@@ -43,12 +64,42 @@ function ensureNoopenerHook(): void {
  * stripping scripts, event handlers, and dangerous URL schemes while keeping
  * the formatting tags GitHub-flavored markdown commonly emits.
  */
-export function sanitizeHtml(html: string): string {
+export function sanitizeHtml(
+  html: string,
+  imageSource?: MarkdownImageSource | null,
+): string {
   if (!html) return html;
-  ensureNoopenerHook();
-  return DOMPurify.sanitize(html, {
-    // Keep links that open in a new tab (target/rel) which some resource docs
-    // author directly as raw HTML.
-    ADD_ATTR: ["target", "rel"],
-  });
+  ensureMarkdownHooks();
+  // Scope provenance to this synchronous render; it must never leak between
+  // documents (or between the build-time and file-browser rendering paths).
+  if (imageSource !== undefined) {
+    DOMPurify.addHook("uponSanitizeAttribute", (node, data) => {
+      const image = node.nodeName === "IMG";
+      const pictureSource =
+        node.nodeName === "SOURCE" && node.parentNode?.nodeName === "PICTURE";
+      if (
+        !(image && data.attrName === "src") &&
+        !((image || pictureSource) && data.attrName === "srcset")
+      ) return;
+      try {
+        data.attrValue = data.attrName === "srcset"
+          ? resolveMarkdownSrcset(data.attrValue, imageSource)
+          : resolveMarkdownImage(data.attrValue, imageSource);
+      } catch (error) {
+        data.keepAttr = false;
+        console.warn(
+          `[markdown-images] Dropped ${data.attrName} in "${imageSource?.filePath ?? "unknown source"}": ${error instanceof Error ? error.message : String(error)}`,
+        );
+      }
+    });
+  }
+  try {
+    return DOMPurify.sanitize(html, {
+      // Keep links that open in a new tab (target/rel) which some resource docs
+      // author directly as raw HTML.
+      ADD_ATTR: ["target", "rel"],
+    });
+  } finally {
+    if (imageSource !== undefined) DOMPurify.removeHook("uponSanitizeAttribute");
+  }
 }
diff --git a/website/src/pages/extension/[id].astro b/website/src/pages/extension/[id].astro
index 8a52cbde95..b782449903 100644
--- a/website/src/pages/extension/[id].astro
+++ b/website/src/pages/extension/[id].astro
@@ -101,8 +101,11 @@ const images = Array.from(
 
 // `loadDetailPage` only covers the VS Code-installable resource types; an
 // extension body is its README, read straight off disk when one exists.
-const { markdownHtml } = item.readmeFile
-  ? readResourceMarkdown(item.readmeFile)
+const { markdownHtml } = !item.external && item.readmeFile
+  ? readResourceMarkdown(item.readmeFile, item.ref ? {
+      rawBase: `${RAW_BASE}/${encodeURIComponent(item.ref)}`,
+      filePath: item.readmeFile,
+    } : null)
   : { markdownHtml: "" };
 const { html } = buildDetailToc(markdownHtml);
 
diff --git a/website/src/pages/extensions.astro b/website/src/pages/extensions.astro
index 0acfa1c284..4e2229d8d0 100644
--- a/website/src/pages/extensions.astro
+++ b/website/src/pages/extensions.astro
@@ -7,7 +7,7 @@ import { extensions, searchIndex } from "../lib/site-data";
 
 <BaseLayout
   title="Extensions | Awesome GitHub Copilot"
-  description="Browse community-contributed canvas extensions for GitHub Copilot."
+  description="Browse community-built extensions that add interactive panels to the GitHub Copilot app."
 >
   <ExtensionsCatalog
     client:load
diff --git a/website/src/pages/plugin/[id].astro b/website/src/pages/plugin/[id].astro
index 60a1d6e783..726917164f 100644
--- a/website/src/pages/plugin/[id].astro
+++ b/website/src/pages/plugin/[id].astro
@@ -57,7 +57,7 @@ const { item, previous, next } = Astro.props as {
 
 // External plugins are referenced, not vendored: no README exists in this
 // repository for them, so the markdown body is simply empty.
-const { markdownHtml } = item.readmeFile
+const { markdownHtml } = !item.external && item.readmeFile
   ? readResourceMarkdown(item.readmeFile)
   : { markdownHtml: "" };
 
diff --git a/website/src/styles/base.css b/website/src/styles/base.css
index 46ad885fa7..dbb888e310 100644
--- a/website/src/styles/base.css
+++ b/website/src/styles/base.css
@@ -66,6 +66,56 @@ video {
   height: auto;
 }
 
+[data-reading-content] img[data-markdown-block-image] {
+  display: block;
+  margin-block: var(--base-size-24);
+}
+
+.heading-texture {
+  background-image: radial-gradient(
+    circle,
+    color-mix(in srgb, var(--brand-color-text-muted) 14%, transparent) 0.7px,
+    transparent 0.8px
+  );
+  background-size: 8px 8px;
+}
+
+.heading-grid {
+  position: relative;
+  isolation: isolate;
+  background-image: radial-gradient(
+    ellipse 60% 80% at 50% 100%,
+    color-mix(in srgb, var(--base-color-scale-green-5) 16%, transparent),
+    transparent 80%
+  );
+}
+
+.heading-grid::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(to right, color-mix(in srgb, var(--base-color-scale-green-5) 24%, transparent) 1px, transparent 1px),
+    linear-gradient(to bottom, color-mix(in srgb, var(--base-color-scale-green-5) 24%, transparent) 1px, transparent 1px);
+  background-size: 40px 40px;
+  mask-image: radial-gradient(ellipse 60% 80% at 50% 100%, black 10%, transparent 80%);
+}
+
+.heading-grid > * {
+  position: relative;
+  z-index: 1;
+}
+
+@media (forced-colors: active) {
+  .heading-grid,
+  .heading-grid::before,
+  .heading-texture {
+    background-image: none;
+  }
+}
+
 /* `<main>` receives tabindex="-1" so the skip link can move focus to it; the
    resulting focus ring is not meaningful to sighted users. */
 main:focus {