diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 82e5390..1c9af01 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -80,8 +80,7 @@ export default defineConfig({
             }
         },
         nav: [
-            { text: 'Documentation', link: '/quick-start', activeMatch: '^/(quick-start|invoice-tutorial|roadmap|acknowledgements|document-previewer|license/configuration|companion/|concepts/|api-reference/|examples/)' },
-            { text: 'Features', link: '/features-overview' },
+            { text: 'Documentation', items: [{ component: 'NavDocumentationMenu' }], activeMatch:'^/(quick-start|invoice-tutorial|roadmap|acknowledgements|document-previewer|license/configuration|features-overview|companion/|concepts/|api-reference/|examples/)' },
             { text: 'Pricing', link: '/pricing' },
             { text: 'GitHub', link: 'https://github.com/QuestPDF/QuestPDF', noIcon: true },
             { text: 'NuGet', link: 'https://www.nuget.org/packages/QuestPDF', noIcon: true },
diff --git a/docs/.vitepress/theme/Contact.vue b/docs/.vitepress/theme/Contact.vue
index 84236dd..67f8ced 100644
--- a/docs/.vitepress/theme/Contact.vue
+++ b/docs/.vitepress/theme/Contact.vue
@@ -3,6 +3,9 @@ import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 import { faCreditCard, faEnvelope, faIdCard, faUserGroup } from "@fortawesome/pro-regular-svg-icons";
 import { faHeart } from "@fortawesome/pro-solid-svg-icons";
 import Icon from "./Icon.vue";
+import { ref } from "vue";
+import { useDotWings } from "./dotWings";
+
 interface Link {
   href: string;
   label: string;
@@ -65,10 +68,13 @@ const contacts: ContactInformation[] = [
     ]
   }
 ]
+
+const root = ref<HTMLElement>();
+useDotWings(root);
 </script>
 
 <template>
-  <div class="custom-page contact-page texture-dots">
+  <div ref="root" class="custom-page contact-page texture-dots">
     <div class="content">
       <header class="section-header contact-header">
         <h1>Contact us</h1>
@@ -126,6 +132,10 @@ const contacts: ContactInformation[] = [
 
 <style scoped>
 
+.contact-page {
+  --dots-height: 196px; /* the contact cards */
+}
+
 .contact-header {
   margin-bottom: 48px;
 }
diff --git a/docs/.vitepress/theme/CustomPages.css b/docs/.vitepress/theme/CustomPages.css
index cb691b9..e085a6f 100644
--- a/docs/.vitepress/theme/CustomPages.css
+++ b/docs/.vitepress/theme/CustomPages.css
@@ -145,6 +145,7 @@
 
 .custom-page {
   --panel-padding: clamp(32px, 22.4px + 1.38vw, 40px) clamp(24px, 4.7px + 2.76vw, 40px);
+  --section-gap: 36px; /* between the homepage's sections, and between the cards of a row */
   --surface: #FFFFFF;
   --surface-inner: #F0F2F6;
   /* VitePress's light divider is too faint on white */
@@ -158,10 +159,10 @@
 }
 
 html.dark .custom-page {
-  --surface: rgba(255, 255, 255, 0.045);
+  --surface: rgba(255, 255, 255, 0.02);
   --surface-inner: rgba(0, 0, 0, 0.4);
   --surface-edge: none;
-  --surface-rim: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.015));
+  --surface-rim: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0.012));
   --surface-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 160px);
 }
 
@@ -204,6 +205,21 @@ html.dark .custom-page {
   color: var(--vp-c-text-1);
 }
 
+/* a floating sheet in a card's figure: white with a crisp edge in light, lifted and translucent in dark.
+   light-dark() takes colours only, so the shadows read theirs from variables. */
+.custom-page :where(.fragment) {
+  --edge: light-dark(rgba(16, 24, 40, 0.1), rgba(255, 255, 255, 0.14));
+  --shadow-near: light-dark(rgba(16, 24, 40, 0.04), transparent);
+  --shadow-far: light-dark(rgba(16, 24, 40, 0.14), rgba(0, 0, 0, 0.22));
+
+  border-radius: 12px;
+  background-color: light-dark(#FFFFFF, rgba(255, 255, 255, 0.07));
+  box-shadow:
+      0 0 0 1px var(--edge),
+      0 2px 4px var(--shadow-near),
+      0 14px 32px -12px var(--shadow-far);
+}
+
 /* Dot wings */
 
 .texture-dots {
@@ -211,38 +227,36 @@ html.dark .custom-page {
   isolation: isolate; /* keeps the wings (z-index: -1) above the canvas but below the content */
 }
 
-.texture-dots::before,
-.texture-dots::after {
-  content: "";
+/* one canvas per wing, drawn and flown by useDotWings (dotWings.ts). A page whose header text reaches the wings sets
+   --dots-clear to that text's width, so the dots stay beside it, and a page whose first card or divider reaches under
+   them sets --dots-height to that card's top. The wings run on behind the navbar and above the page by --dots-bleed, so
+   the macOS overscroll pull reveals more dots instead of an empty band. */
+.texture-dots > .dot-wing {
+  --dots-bleed: calc(var(--vp-nav-height) + 200px);
+  --dots-mask-size: 200% calc(0.85 * var(--dots-height, 420px));
+  --dots-mask-y: calc(var(--dots-bleed) + 0.08 * var(--dots-height, 420px));
+
   position: absolute;
-  top: 0;
-  width: 28%;
-  height: 420px;
+  top: calc(-1 * var(--dots-bleed));
+  width: min(28%, max(0px, (100% - var(--dots-clear, 0px)) / 2));
+  height: calc(var(--dots-height, 420px) + var(--dots-bleed));
   z-index: -1;
   pointer-events: none;
-  background-image: radial-gradient(circle, color-mix(in srgb, color-mix(in srgb, #1E88E5 85%, var(--vp-c-text-1)) 36%, transparent) 1px, transparent 1.5px);
-  background-size: 24px 24px;
-  background-position: center top;
 }
 
-.texture-dots::before {
+/* the masks are anchored at the outer edge, where the dots are largest */
+.texture-dots > .dot-wing.left {
   left: 0;
-  mask-image: radial-gradient(ellipse 55% 55% at 40% 42%, #000, transparent 100%);
+  mask-image: radial-gradient(ellipse var(--dots-mask-size) at 0% var(--dots-mask-y), #000 40%, transparent 100%);
 }
 
-.texture-dots::after {
+.texture-dots > .dot-wing.right {
   right: 0;
-  mask-image: radial-gradient(ellipse 55% 55% at 60% 42%, #000, transparent 100%);
-}
-
-html.dark .texture-dots::before,
-html.dark .texture-dots::after {
-  background-image: radial-gradient(circle, color-mix(in srgb, color-mix(in srgb, #64B5F6 50%, var(--vp-c-text-1)) 16%, transparent) 1px, transparent 1.5px);
+  mask-image: radial-gradient(ellipse var(--dots-mask-size) at 100% var(--dots-mask-y), #000 40%, transparent 100%);
 }
 
 @media screen and (max-width: 960px) {
-  .texture-dots::before,
-  .texture-dots::after {
+  .texture-dots > .dot-wing {
     display: none;
   }
 }
@@ -256,7 +270,7 @@ html.dark .texture-dots::after {
   margin: 14px 0;
   pointer-events: none;
   background-image: radial-gradient(circle, color-mix(in srgb, color-mix(in srgb, #1E88E5 85%, var(--vp-c-text-1)) 40%, transparent) 1px, transparent 1.5px);
-  background-size: 12px 4px;
+  background-size: 20px 4px;
   background-position: center;
   mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
 }
@@ -273,7 +287,7 @@ body:has(.custom-page) {
   --canvas-glow: color-mix(in srgb, #2196F3 32%, transparent);
   --canvas-glow-soft: color-mix(in srgb, #2196F3 12%, transparent);
   --canvas-glow-side: color-mix(in srgb, #2196F3 20%, transparent);
-  --canvas-glow-side-shape: ellipse 800px 450px at 0% 2%;
+  --canvas-glow-side-shape: ellipse 800px 450px at 0% 80px; /* px, not %: a percentage follows the page height */
   --canvas-grain: none;
 
   background-color: var(--custom-page-bg);
@@ -285,18 +299,17 @@ body:has(.custom-page) {
   background-repeat: repeat, no-repeat, no-repeat, no-repeat;
 }
 
-/* the homepage in light mode takes the side glow down the left edge; the more specific dark rule below keeps the
-   corner */
+/* light only: the dark rule below outranks this one */
 body:has(.home-page) {
-  --canvas-glow-side-shape: ellipse 760px 500px at 0% 780px;
-  --canvas-glow-side: color-mix(in srgb, #2196F3 11%, transparent);
+  --canvas-glow: color-mix(in srgb, #2196F3 40%, transparent);
+  --canvas-glow-soft: color-mix(in srgb, #2196F3 16%, transparent);
+  --canvas-glow-side: color-mix(in srgb, #2196F3 15%, transparent);
 }
 
 html.dark body:has(.custom-page) {
   --canvas-glow: color-mix(in srgb, #2196F3 20%, transparent);
   --canvas-glow-soft: color-mix(in srgb, #2196F3 7%, transparent);
   --canvas-glow-side: color-mix(in srgb, #2196F3 12%, transparent);
-  --canvas-glow-side-shape: ellipse 800px 450px at 0% 2%;
   /* grain only on the dark canvas */
   --canvas-grain: url("/homepage/grain-dark.png");
 }
diff --git a/docs/.vitepress/theme/FeaturesOverview.vue b/docs/.vitepress/theme/FeaturesOverview.vue
index cbc9b93..e62df7a 100644
--- a/docs/.vitepress/theme/FeaturesOverview.vue
+++ b/docs/.vitepress/theme/FeaturesOverview.vue
@@ -1,43 +1,288 @@
 <script setup lang="ts">
 import Icon from "./Icon.vue";
-import { featureChapters } from "./features";
+import { featureCategories as categories, featureMenu, isChapter, type Feature, type FeatureCategory, type FeatureChapter, type FeatureMenuEntry } from "./features";
+import { faChevronDown, faMagnifyingGlass, faXmark } from "@fortawesome/pro-light-svg-icons";
+import { computed, h, nextTick, ref, type FunctionalComponent } from "vue";
+import { useRouter } from "vitepress";
+import { useDotWings } from "./dotWings";
+
+const root = ref<HTMLElement>();
+useDotWings(root);
+const router = useRouter();
+
+const chapterOf = new Map<FeatureCategory, string>();
+for (const entry of featureMenu)
+  if (isChapter(entry)) entry.categories.forEach(category => chapterOf.set(category, entry.name));
+
+const openChapter = ref<string | undefined>(featureMenu.find(isChapter)?.name);
+const selected = ref(categories[0].name);
+
+function openChapterOf(chapter: FeatureChapter) {
+  clearQuery();
+  if (openChapter.value === chapter.name) return;
+  openChapter.value = chapter.name;
+  select(chapter.categories[0]);
+}
+
+function openSection(section: FeatureCategory) {
+  clearQuery();
+  openChapter.value = undefined;
+  select(section);
+}
+
+function select(category: FeatureCategory) {
+  if (selected.value === category.name) return;
+  selected.value = category.name;
+  nextTick(revealSelected);
+}
+
+const rail = ref<HTMLElement>();
+
+/* on phones the rail is a scrolling strip; keep the selected category in it visible */
+function revealSelected() {
+  const strip = rail.value;
+  const button = strip?.querySelector<HTMLElement>(".is-selected");
+  if (!strip || !button || strip.scrollWidth <= strip.clientWidth) return;
+
+  const left = button.offsetLeft - strip.offsetLeft;
+  if (left < strip.scrollLeft || left + button.offsetWidth > strip.scrollLeft + strip.clientWidth)
+    strip.scrollLeft = left - 16;
+}
+
+const steps: Record<string, number> = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 };
+
+/* arrow keys, Home and End move between the rail's visible buttons; landing on a category selects it */
+function onRailKey(event: KeyboardEvent) {
+  const rail = event.currentTarget as HTMLElement;
+  const buttons = [...rail.querySelectorAll<HTMLElement>("button")].filter(button => button.offsetParent !== null);
+  const index = buttons.indexOf(document.activeElement as HTMLElement);
+
+  let next: number;
+  if (event.key in steps) next = (index + steps[event.key] + buttons.length) % buttons.length;
+  else if (event.key === "Home") next = 0;
+  else if (event.key === "End") next = buttons.length - 1;
+  else return;
+
+  event.preventDefault();
+  buttons[next].focus();
+  if (buttons[next].getAttribute("role") === "tab") buttons[next].click();
+}
+
+const panelId = (name: string) => `features-${name.replace(/\W+/g, "-").toLowerCase()}`;
+
+
+/* Finder: every word typed has to occur in a feature's name, description or category; the browse view comes back as
+   soon as the field is empty or a rail entry is clicked */
+
+type ResultGroup = { category: FeatureCategory; features: Feature[] };
+
+const query = ref("");
+const finder = ref<HTMLInputElement>();
+const results = ref<HTMLElement>();
+
+const terms = computed(() => query.value.toLowerCase().split(/\s+/).filter(Boolean));
+const finding = computed(() => terms.value.length > 0);
+
+const groups = computed<ResultGroup[]>(() => {
+  if (!finding.value) return [];
+  const found: ResultGroup[] = [];
+
+  for (const category of categories) {
+    const byName: Feature[] = [];
+    const byText: Feature[] = [];
+
+    for (const feature of category.features) {
+      const name = feature.name.toLowerCase();
+      const text = `${name} ${feature.description.toLowerCase()} ${category.name.toLowerCase()}`;
+      if (!terms.value.every(term => text.includes(term))) continue;
+      (terms.value.every(term => name.includes(term)) ? byName : byText).push(feature);
+    }
+
+    if (byName.length || byText.length) found.push({ category, features: [...byName, ...byText] });
+  }
+
+  return found;
+});
+
+const matches = computed(() => groups.value.reduce((count, group) => count + group.features.length, 0));
+
+const matchesIn = (entry: FeatureMenuEntry) => groups.value
+    .filter(group => isChapter(entry) ? entry.categories.includes(group.category) : group.category === entry)
+    .reduce((count, group) => count + group.features.length, 0);
+
+const examples = ["tables", "fonts", "encryption", "accessibility", "watermark"];
+
+function clearQuery(focus = false) {
+  query.value = "";
+  if (focus) finder.value?.focus();
+}
+
+type Segment = { text: string; hit: boolean };
+
+/* the text split into plain and matching runs, so the matches can be marked */
+function highlight(text: string): Segment[] {
+  if (!finding.value) return [{ text, hit: false }];
+
+  const lower = text.toLowerCase();
+  const hits = new Array<boolean>(text.length).fill(false);
+
+  for (const term of terms.value)
+    for (let at = lower.indexOf(term); at >= 0; at = lower.indexOf(term, at + 1))
+      hits.fill(true, at, at + term.length);
+
+  const segments: Segment[] = [];
+  let start = 0;
+
+  for (let end = 1; end <= text.length; end++) {
+    if (end < text.length && hits[end] === hits[start]) continue;
+    segments.push({ text: text.slice(start, end), hit: hits[start] });
+    start = end;
+  }
+
+  return segments;
+}
+
+/* a render function: its marks carry no scope id, so their rule uses :deep() */
+const Highlighted: FunctionalComponent<{ text: string }> = ({ text }) =>
+    highlight(text).map(segment => segment.hit ? h("mark", segment.text) : segment.text);
+
+const resultLinks = () => [...(results.value?.querySelectorAll<HTMLElement>("a.feature") ?? [])];
+
+/* Enter opens the first match, the down arrow walks into the results, Escape clears */
+function onFinderKey(event: KeyboardEvent) {
+  if (event.key === "Enter" && groups.value.length) router.go(groups.value[0].features[0].link);
+  else if (event.key === "ArrowDown" && groups.value.length) resultLinks()[0]?.focus();
+  else if (event.key === "Escape" && query.value) clearQuery();
+  else return;
+
+  event.preventDefault();
+}
+
+function onResultsKey(event: KeyboardEvent) {
+  if (event.key === "Escape") {
+    event.preventDefault();
+    clearQuery(true);
+    return;
+  }
+
+  const links = resultLinks();
+  const index = links.indexOf(document.activeElement as HTMLElement);
+  if (index < 0 || !(event.key in steps)) return;
+
+  const next = index + steps[event.key];
+  event.preventDefault();
+  if (next < 0) finder.value?.focus();
+  else links[Math.min(next, links.length - 1)].focus();
+}
 </script>
 
 <template>
-  <div class="custom-page features-page texture-dots">
+  <div ref="root" class="custom-page features-page texture-dots">
     <div class="content">
       <header class="section-header features-header">
         <h1>Features Overview</h1>
-        <p class="sub-header">
-          Explore the full capabilities of QuestPDF. A mature, production-ready toolkit designed to handle every aspect of document generation, from versatile layouts to real-time developer tooling.
-        </p>
       </header>
 
-      <div class="chapters">
-        <template v-for="chapter in featureChapters" :key="chapter.name">
-          <div class="dotted-divider"></div>
+      <div class="explorer" :class="{ 'is-finding': finding }">
+        <div class="side">
+          <div class="finder" role="search">
+            <Icon :icon="faMagnifyingGlass" class="finder-icon" />
+            <input ref="finder" v-model="query" type="search" class="finder-input" placeholder="Find a feature"
+                   aria-label="Find a feature" autocomplete="off" autocorrect="off" spellcheck="false"
+                   @keydown="onFinderKey">
+            <button v-if="query" type="button" class="finder-clear" aria-label="Clear the search" @click="clearQuery(true)">
+              <Icon :icon="faXmark" />
+            </button>
+          </div>
 
-          <section class="chapter">
-            <h2 class="chapter-title">{{ chapter.name }}</h2>
+          <nav ref="rail" class="rail" aria-label="Feature categories" @keydown="onRailKey">
+            <div v-for="entry in featureMenu" :key="entry.name" class="rail-entry"
+                 :class="{ 'is-open': !finding && isChapter(entry) && openChapter === entry.name, 'is-empty': finding && matchesIn(entry) === 0 }">
 
-            <section v-for="category in chapter.categories" :key="category.name" class="panel category">
-              <h3 class="category-title">{{ category.name }}</h3>
+              <template v-if="isChapter(entry)">
+                <button type="button" class="rail-button chapter-button" :aria-expanded="!finding && openChapter === entry.name"
+                        @click="openChapterOf(entry)">
+                  <Icon :icon="entry.icon" />
+                  <span>{{ entry.name }}</span>
+                  <span v-if="finding" class="rail-count">{{ matchesIn(entry) }}</span>
+                  <Icon v-else :icon="faChevronDown" class="chevron" />
+                </button>
 
-              <div class="features">
-                <a v-for="feature in category.features" :key="feature.link" :href="feature.link" class="feature">
-                  <span class="icon-tile">
-                    <Icon :icon="feature.icon" />
-                  </span>
+                <div v-show="!finding && openChapter === entry.name" class="chapter-categories" role="tablist" aria-orientation="vertical">
+                  <button v-for="category in entry.categories" :key="category.name" type="button" role="tab"
+                          class="rail-button category-button" :class="{ 'is-selected': selected === category.name }"
+                          :id="panelId(category.name) + '-tab'" :aria-controls="panelId(category.name)"
+                          :aria-selected="selected === category.name" :tabindex="selected === category.name ? 0 : -1"
+                          @click="select(category)">
+                    {{ category.name }}
+                  </button>
+                </div>
+              </template>
+
+              <div v-else role="tablist">
+                <button type="button" role="tab" class="rail-button chapter-button section-button"
+                        :class="{ 'is-selected': !finding && selected === entry.name }"
+                        :id="panelId(entry.name) + '-tab'" :aria-controls="panelId(entry.name)"
+                        :aria-selected="!finding && selected === entry.name" :tabindex="selected === entry.name ? 0 : -1"
+                        @click="openSection(entry)">
+                  <Icon :icon="entry.icon" />
+                  <span>{{ entry.name }}</span>
+                  <span v-if="finding" class="rail-count">{{ matchesIn(entry) }}</span>
+                </button>
+              </div>
+            </div>
+          </nav>
+        </div>
+
+        <div class="panel main">
+          <section v-for="category in categories" v-show="!finding && selected === category.name" :key="category.name"
+                   :id="panelId(category.name)" role="tabpanel" :aria-labelledby="panelId(category.name) + '-tab'">
+            <h2 class="category-title">{{ category.name }}</h2>
+
+            <div class="features">
+              <a v-for="feature in category.features" :key="feature.link" :href="feature.link" class="feature">
+                <span class="icon-tile"><Icon :icon="feature.icon" /></span>
+                <span class="feature-text">
+                  <span class="feature-name">{{ feature.name }}</span>
+                  <span class="feature-description">{{ feature.description }}</span>
+                </span>
+              </a>
+            </div>
+          </section>
 
+          <div v-if="finding" ref="results" class="results" @keydown="onResultsKey">
+            <p class="results-summary" aria-live="polite">
+              <span>{{ matches }} {{ matches === 1 ? "feature matches" : "features match" }}</span>
+              <span v-if="matches" class="results-hint">Enter opens the first match</span>
+            </p>
+
+            <section v-for="group in groups" :key="group.category.name" class="results-group">
+              <h2 class="results-title">
+                <span v-if="chapterOf.has(group.category)" class="results-chapter">{{ chapterOf.get(group.category) }} ›</span>
+                {{ group.category.name }}
+              </h2>
+
+              <div class="features">
+                <a v-for="feature in group.features" :key="feature.link" :href="feature.link" class="feature">
+                  <span class="icon-tile"><Icon :icon="feature.icon" /></span>
                   <span class="feature-text">
-                    <strong class="row-title">{{ feature.name }}</strong>
-                    <span class="row-description">{{ feature.description }}</span>
+                    <span class="feature-name"><Highlighted :text="feature.name" /></span>
+                    <span class="feature-description"><Highlighted :text="feature.description" /></span>
                   </span>
                 </a>
               </div>
             </section>
-          </section>
-        </template>
+
+            <div v-if="!groups.length" class="results-empty">
+              <p>No feature matches “{{ query }}”. Try a shorter word, or one of these:</p>
+              <div class="results-examples">
+                <button v-for="example in examples" :key="example" type="button" class="example" @click="query = example">
+                  {{ example }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -45,121 +290,445 @@ import { featureChapters } from "./features";
 
 <style scoped>
 
-/* the first chapter's divider follows at the same distance as the ones between chapters */
+.features-page {
+  --dots-clear: 420px; /* the 368px title */
+  --dots-height: 196px; /* the card */
+}
+
 .features-header {
-  margin-bottom: 32px;
+  margin-bottom: 48px;
 }
 
-.features-header .sub-header {
-  max-width: 750px;
-  margin-bottom: 0;
+.explorer {
+  display: grid;
+  grid-template-columns: 280px minmax(0, 1fr); /* fits the longest label beside a match count */
+  align-items: start;
+  gap: 64px;
 }
 
 
-.chapters {
+/* Finder */
+
+/* the search and the tree stay beside the card while it scrolls; the tree scrolls itself only when the window is
+   shorter than its open chapter */
+.side {
+  position: sticky;
+  top: calc(var(--vp-nav-height) + 24px);
   display: flex;
   flex-direction: column;
-  gap: 32px;
+  gap: 16px;
+  max-height: calc(100vh - var(--vp-nav-height) - 48px);
 }
 
-.chapter,
-.chapters .dotted-divider {
+.finder {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+}
+
+/* the cards' glass: their surface, sheen and edge on the field, their rim drawn here because an input has no ::before */
+.finder::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 10px;
+  padding: 1px;
+  pointer-events: none;
+  background: var(--surface-rim);
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask-composite: exclude;
+}
+
+.finder-icon {
+  position: absolute;
+  left: 13px;
+  font-size: 1rem;
+  color: var(--vp-c-text-3);
+  pointer-events: none;
+}
+
+.finder-input {
   width: 100%;
-  max-width: 1040px;
-  margin-inline: auto;
+  height: 40px;
+  padding: 0 40px;
+  border: none;
+  border-radius: 10px;
+  appearance: none;
+  font: inherit;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  color: var(--vp-c-text-1);
+  background-color: var(--surface);
+  background-image: var(--surface-sheen);
+  box-shadow: var(--surface-edge);
+}
+
+.finder-input::placeholder {
+  color: var(--vp-c-text-3);
+  opacity: 1;
+}
+
+.finder-input::-webkit-search-cancel-button,
+.finder-input::-webkit-search-decoration {
+  appearance: none;
 }
 
-.chapter {
+.finder-input:hover {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vp-c-text-1) 14%, transparent), var(--surface-edge);
+}
+
+.finder-input:focus-visible {
+  outline: 2px solid #2196F3;
+  outline-offset: -1px;
+}
+
+html.dark .finder-input:hover {
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+}
+
+.finder-clear {
+  position: absolute;
+  right: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  font-size: 1rem;
+  color: var(--vp-c-text-2);
+}
+
+.finder-clear:hover {
+  color: var(--vp-c-text-1);
+  background-color: var(--vp-c-default-soft);
+}
+
+.finder-clear:focus-visible {
+  outline: 2px solid #2196F3;
+  outline-offset: -2px;
+}
+
+
+/* Rail */
+
+.rail {
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
   display: flex;
   flex-direction: column;
-  gap: 32px;
+  gap: 4px;
+}
+
+.rail-button {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  width: 100%;
+  padding: 7px 12px;
+  border-radius: 10px;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+  text-align: left;
+  color: var(--vp-c-text-1);
+}
+
+.rail-button:hover {
+  background-color: var(--vp-c-default-soft);
+}
+
+.rail-button.is-selected {
+  color: light-dark(#1976D2, #64B5F6);
+  background-color: color-mix(in srgb, #2196F3 10%, transparent);
 }
 
-.chapter-title {
-  margin: 0 0 8px;
-  text-align: center;
+.rail-button:focus-visible {
+  outline: 2px solid #2196F3;
+  outline-offset: -2px;
 }
 
+/* the same sizes as the navbar's Documentation menu */
+.chapter-button {
+  gap: 20px;
+  padding: 8px 12px;
+}
+
+.chapter-button .icon {
+  flex-shrink: 0;
+  font-size: 1.25rem;
+}
+
+.chapter-button > span:first-of-type {
+  white-space: nowrap;
+}
+
+.chapter-button .chevron {
+  margin-left: auto;
+  font-size: 1rem;
+  color: var(--vp-c-text-3);
+}
+
+.rail-entry.is-open .chevron {
+  transform: rotate(180deg);
+}
+
+.rail-entry.is-open .chapter-button {
+  font-weight: 600;
+}
+
+/* while finding, the chevron's place shows how many matches the entry holds */
+.rail-count {
+  margin-left: auto;
+  font-size: 1rem;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  color: light-dark(#1976D2, #64B5F6);
+}
+
+.rail-entry.is-empty .rail-button {
+  color: var(--vp-c-text-3);
+}
+
+.rail-entry.is-empty .rail-count {
+  color: var(--vp-c-text-3);
+}
+
+.chapter-categories {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 4px 0 8px 21px;
+  padding-left: 18px;
+  border-left: 1px solid var(--vp-c-divider);
+}
+
+
+/* Features */
+
 .category-title {
-  margin: 0 0 48px;
+  margin: 0 0 32px;
+  padding: 0;
+  border: none;
+  font-size: 1.375rem;
   font-weight: 700;
+  line-height: 2rem;
+  letter-spacing: -0.01em;
 }
 
 .features {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 32px 48px;
+  gap: 48px 64px;
 }
 
-@media screen and (max-width: 760px) {
-  .features {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
-
-
-/* the whole row is the link; it pads outwards into the grid gap, so the hover surface wraps the row without moving it */
-
+/* the padding is taken back by the margin, so the hover box grows around the item and nothing moves */
 .feature {
   display: flex;
   align-items: flex-start;
   gap: 16px;
   margin: -12px;
-  padding: 12px;
-  color: inherit;
+  padding: 11px;
+  border: 1px solid transparent;
   border-radius: 16px;
-  transition: background-color 0.2s, box-shadow 0.2s;
+  color: var(--vp-c-text-1);
 }
 
-.feature:is(:hover, :focus-visible) {
-  background-color: color-mix(in srgb, #2196F3 8%, transparent);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, #2196F3 35%, transparent);
+.feature:hover {
+  border-color: color-mix(in srgb, #2196F3 40%, transparent);
+  background-color: color-mix(in srgb, #2196F3 10%, transparent);
 }
 
-.feature:focus-visible {
-  outline: none;
+.feature:hover .icon-tile {
+  background-color: color-mix(in srgb, #2196F3 16%, transparent);
 }
 
-.feature .icon-tile {
-  transition: background-color 0.2s;
+.feature:hover .icon-tile .icon {
+  color: light-dark(#1976D2, #64B5F6);
 }
 
-.feature .icon-tile .icon {
-  transition: color 0.2s;
+.feature-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
 }
 
-.feature:is(:hover, :focus-visible) .icon-tile {
-  background-color: color-mix(in srgb, #2196F3 16%, transparent);
+.feature-name {
+  font-size: 1.0625rem;
+  font-weight: 600;
+  line-height: 1.5rem;
 }
 
-.feature:is(:hover, :focus-visible) .icon-tile .icon {
+.feature:hover .feature-name {
   color: light-dark(#1976D2, #64B5F6);
 }
 
-.feature:is(:hover, :focus-visible) .row-title {
-  color: var(--vp-c-brand-1);
+.feature-description {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  color: var(--vp-c-text-2);
 }
 
-.feature-text {
+.feature:focus-visible {
+  outline: 2px solid #2196F3;
+  outline-offset: -1px;
+}
+
+
+/* Results */
+
+.results-summary {
   display: flex;
-  flex-direction: column;
-  min-width: 0;
-  padding-top: 2px;
+  justify-content: space-between;
+  gap: 16px;
+  margin: 0 0 24px;
+  font-size: 1rem;
+  line-height: 2rem;
+  color: var(--vp-c-text-2);
+}
+
+.results-hint {
+  color: var(--vp-c-text-3);
 }
 
-.feature .row-title {
-  display: block;
+.results-group + .results-group {
+  margin-top: 40px;
+}
+
+.results-title {
+  margin: 0 0 20px;
+  padding: 0;
+  border: none;
   font-size: 1.0625rem;
+  font-weight: 600;
   line-height: 1.5rem;
-  transition: color 0.2s;
+  letter-spacing: 0;
+  color: var(--vp-c-text-1);
+}
+
+.results-chapter {
+  font-weight: 500;
+  color: var(--vp-c-text-3);
 }
 
-.feature .row-description {
-  display: block;
-  margin-top: 4px;
+.features-page :deep(mark) {
+  border-radius: 3px;
+  padding: 1px 0;
+  color: inherit;
+  background-color: color-mix(in srgb, #2196F3 22%, transparent);
+  box-decoration-break: clone;
+}
+
+.results-empty p {
+  margin: 0 0 16px;
+  color: var(--vp-c-text-2);
+}
+
+.results-examples {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.example {
+  padding: 6px 14px;
+  border-radius: 999px;
   font-size: 1rem;
+  font-weight: 500;
   line-height: 1.5rem;
-  color: var(--vp-c-text-2);
+  color: var(--vp-c-text-1);
+  background-color: var(--surface-inner);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vp-c-text-1) 12%, transparent);
+}
+
+.example:hover {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vp-c-text-1) 20%, transparent);
+}
+
+.example:focus-visible {
+  outline: 2px solid #2196F3;
+  outline-offset: 1px;
+}
+
+html.dark .example {
+  background-color: rgba(255, 255, 255, 0.07);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+}
+
+
+@media (max-width: 1180px) {
+  .features {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@media (pointer: coarse), (max-width: 760px) {
+  .results-hint {
+    display: none;
+  }
+}
+
+/* Phones: the categories go in one scrolling strip between the search and the card */
+
+@media (max-width: 760px) {
+  .explorer {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 16px;
+  }
+
+  .side {
+    position: static;
+    max-height: none;
+  }
+
+  .rail {
+    flex-direction: row;
+    gap: 6px;
+    margin-inline: calc(-1 * var(--custom-page-gutter));
+    padding-inline: var(--custom-page-gutter);
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  /* !important beats v-show's inline display: none, so every category is in the strip */
+  .rail-entry,
+  .rail-entry > div,
+  .chapter-categories {
+    display: contents !important;
+  }
+
+  .chapter-button:not(.section-button) {
+    display: none;
+  }
+
+  /* the strip is for browsing; the matches say where they live themselves */
+  .is-finding .rail {
+    display: none;
+  }
+
+  .rail-button {
+    width: auto;
+    flex-shrink: 0;
+    padding: 7px 12px;
+    white-space: nowrap;
+  }
+
+  .section-button .icon,
+  .section-button .rail-count {
+    display: none;
+  }
+
+  .category-title {
+    margin-bottom: 24px;
+  }
+
+  .features {
+    gap: 24px;
+  }
 }
 
 </style>
diff --git a/docs/.vitepress/theme/NavDocumentationMenu.vue b/docs/.vitepress/theme/NavDocumentationMenu.vue
new file mode 100644
index 0000000..9f9e331
--- /dev/null
+++ b/docs/.vitepress/theme/NavDocumentationMenu.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import {
+  faBadgeCheck,
+  faBookOpenCover,
+  faPlanetRinged,
+  faGift,
+  faObjectsColumn,
+  faRocketLaunch,
+  faSignsPost
+} from "@fortawesome/pro-light-svg-icons";
+import { useRoute } from "vitepress";
+import { VPLink } from "vitepress/theme";
+import Icon from "./Icon.vue";
+
+/* VitePress passes `menu` in the navbar dropdown and the ⋯ overflow menu (rendered straight into a <ul>), and
+   `screenMenu` in the mobile menu (already wrapped in an <li>) */
+const { screenMenu } = defineProps<{ menu?: boolean; screenMenu?: boolean }>();
+
+const route = useRoute();
+
+/* learning the library, project news; each group is its own list, separated by a divider */
+const groups = [
+  [
+    { icon: faRocketLaunch, title: "Quick start", link: "/quick-start" },
+    { icon: faBookOpenCover, title: "In-depth invoice tutorial", link: "/invoice-tutorial" },
+    { icon: faBadgeCheck, title: "License configuration", link: "/license/configuration" },
+    { icon: faObjectsColumn, title: "Features overview", link: "/features-overview" },
+    { icon: faPlanetRinged, title: "Companion app", link: "/companion/usage" }
+  ],
+  [
+    { icon: faGift, title: "Releases", link: "https://github.com/QuestPDF/QuestPDF/releases" },
+    { icon: faSignsPost, title: "Roadmap", link: "/roadmap" }
+  ]
+];
+
+const isCurrent = (link: string) => route.data.relativePath === `${link.slice(1)}.md`;
+</script>
+
+<template>
+  <component :is="screenMenu ? 'div' : 'li'" class="nav-documentation-menu" :class="{ screen: screenMenu }">
+    <ul v-for="(entries, index) in groups" :key="index" class="entries">
+      <li v-for="entry in entries" :key="entry.link">
+        <VPLink
+          :href="entry.link"
+          no-icon
+          class="entry"
+          :class="{ current: isCurrent(entry.link) }"
+          :aria-current="isCurrent(entry.link) ? 'page' : undefined"
+        >
+          <Icon :icon="entry.icon" />
+          {{ entry.title }}
+        </VPLink>
+      </li>
+    </ul>
+  </component>
+</template>
+
+<style scoped>
+/* one glyph and one line per entry, the glyph in the colour of its title; the panel is as wide as the longest title */
+.entries {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  white-space: nowrap;
+}
+
+.entries + .entries {
+  margin: 0.5rem -0.5rem 0;
+  border-top: 1px solid var(--vp-c-divider);
+  padding: 0.5rem 0.5rem 0;
+}
+
+.entry {
+  display: flex;
+  align-items: center;
+  gap: 1.25rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 8px;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+}
+
+.entry .icon {
+  flex: 0 0 auto;
+  font-size: 1.25rem;
+}
+
+.entry:is(:hover, :focus-visible) {
+  background-color: var(--vp-c-default-soft);
+}
+
+.entry.current {
+  color: var(--vp-c-brand-1);
+}
+
+.screen .entries {
+  gap: 0;
+  white-space: normal;
+}
+
+.screen .entries + .entries {
+  margin: 0.5rem 0 0;
+  padding: 0.5rem 0 0;
+}
+
+.screen .entry {
+  padding: 0.625rem 0;
+}
+
+.screen .entry:hover {
+  background-color: transparent;
+}
+</style>
diff --git a/docs/.vitepress/theme/VitepressAdjustments.css b/docs/.vitepress/theme/VitepressAdjustments.css
index 713e498..11124b8 100644
--- a/docs/.vitepress/theme/VitepressAdjustments.css
+++ b/docs/.vitepress/theme/VitepressAdjustments.css
@@ -192,6 +192,127 @@ html.dark .VPNavBar .VPNavBarMenu .VPNavMenuLink.VPNavBarMenuLink.active {
     background-color: var(--vp-c-default-soft);
 }
 
+/* Documentation dropdown: the same pill as the links, painted behind its full-height button like the ⋯ one, so the
+   panel still opens right below the bar; the links are centred against that taller item */
+.VPNavBar .VPNavBarMenu .list {
+    align-items: center;
+}
+
+.VPNavBar .VPNavBarMenu .VPNavBarMenuGroup > .button {
+    position: relative;
+    isolation: isolate;
+    padding: 0 0.875rem;
+}
+
+.VPNavBar .VPNavBarMenu .VPNavBarMenuGroup > .button::before {
+    content: "";
+    position: absolute;
+    inset: calc(var(--vp-nav-height) / 2 - 18px) 0;
+    z-index: -1;
+    border-radius: 10px;
+    transition: background-color 0.2s;
+}
+
+/* VitePress closes the flyout as soon as the pointer leaves the button, and the panel is wider than the button: while
+   open, an invisible fan beside the button, on the side the panel sticks out, keeps a diagonal path towards the entries
+   counted as the button */
+.VPNavBar .VPNavBarMenu .VPNavBarMenuGroup:has(.nav-documentation-menu) > .button[aria-expanded="true"]::after {
+    content: "";
+    position: absolute;
+    inset: 0 0 0 -6rem;
+    clip-path: polygon(6rem 0, 100% 0, 100% 100%, 0 100%);
+}
+
+.VPNavBar .VPNavBarMenu .VPNavBarMenuGroup > .button:hover::before,
+.VPNavBar .VPNavBarMenu .VPNavBarMenuGroup > .button[aria-expanded="true"]::before {
+    background-color: var(--vp-c-default-soft);
+}
+
+.VPNavBar .VPNavBarMenu .VPNavBarMenuGroup > .button .text {
+    font-size: 1rem;
+    color: var(--vp-c-text-1);
+    transition: color 0.2s;
+}
+
+.VPNavBar .VPNavBarMenu .VPNavBarMenuGroup > .button .text-icon {
+    margin-inline-start: 0.375rem;
+    font-size: 1rem;
+}
+
+.VPNavBar .VPNavBarMenu .VPNavBarMenuGroup.active > .button::before {
+    background-color: #1976D2;
+}
+
+.VPNavBar .VPNavBarMenu .VPNavBarMenuGroup.active > .button .text {
+    color: #ffffff;
+}
+
+html.dark .VPNavBar .VPNavBarMenu .VPNavBarMenuGroup.active > .button::before {
+    background-color: #F5F5F7;
+}
+
+html.dark .VPNavBar .VPNavBarMenu .VPNavBarMenuGroup.active > .button .text {
+    color: #111111;
+}
+
+/* the panel floats below the bar; the gap is the flyout's own transparent padding, so crossing it still counts as
+   hovering the panel and VitePress keeps the menu open */
+.VPNavBar .VPNavBarMenu .VPNavBarMenuGroup:has(.nav-documentation-menu) > .menu {
+    top: var(--vp-nav-height);
+    padding-top: 0.5rem;
+}
+
+.VPNavBar .VPNavBarMenu .VPMenu:has(.nav-documentation-menu) {
+    max-height: calc(100vh - var(--vp-nav-height) - 1.5rem);
+    padding: 0.5rem;
+    border-color: rgba(16, 24, 40, 0.08);
+    border-radius: 14px;
+    box-shadow:
+        0 1px 2px rgba(16, 24, 40, 0.05),
+        0 12px 24px -8px rgba(16, 24, 40, 0.1),
+        0 40px 80px -20px rgba(50, 50, 93, 0.28);
+    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.5s;
+}
+
+html.dark .VPNavBar .VPNavBarMenu .VPMenu:has(.nav-documentation-menu) {
+    border-color: rgba(255, 255, 255, 0.12);
+    background-color: #1E1F23;
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.06),
+        0 12px 24px -8px rgba(0, 0, 0, 0.5),
+        0 40px 80px -20px rgba(0, 0, 0, 0.75);
+}
+
+.VPNavBar .VPNavBarMenu .button[aria-expanded="false"] + .menu .VPMenu:has(.nav-documentation-menu) {
+    transform: translateY(-6px);
+    transition: transform 0.1s, background-color 0.5s;
+}
+
+/* the panel hangs from the button's left edge, positioned against the whole menu: sticking out of its own item to the
+   right would widen the item VitePress measures to decide what moves into ⋯. Without anchor positioning it keeps
+   VitePress's alignment with the button's right edge. The fan stays narrow on the right, where it would otherwise
+   catch clicks meant for the next link. */
+@supports (anchor-name: --nav-documentation-button) {
+    .VPNavBar .VPNavBarMenu .VPNavBarMenuGroup:has(.nav-documentation-menu) {
+        position: static;
+    }
+
+    .VPNavBar .VPNavBarMenu .VPNavBarMenuGroup:has(.nav-documentation-menu) > .button {
+        anchor-name: --nav-documentation-button;
+    }
+
+    .VPNavBar .VPNavBarMenu .VPNavBarMenuGroup:has(.nav-documentation-menu) > .menu {
+        position-anchor: --nav-documentation-button;
+        right: auto;
+        left: anchor(left);
+    }
+
+    .VPNavBar .VPNavBarMenu .VPNavBarMenuGroup:has(.nav-documentation-menu) > .button[aria-expanded="true"]::after {
+        inset: 0 -3rem 0 0;
+        clip-path: polygon(0 0, calc(100% - 3rem) 0, 100% 100%, 0 100%);
+    }
+}
+
 /* Search */
 @media (min-width: 48rem) {
     .VPNavBar .VPNavBarSearchButton {
diff --git a/docs/.vitepress/theme/dotWings.ts b/docs/.vitepress/theme/dotWings.ts
new file mode 100644
index 0000000..b31f013
--- /dev/null
+++ b/docs/.vitepress/theme/dotWings.ts
@@ -0,0 +1,219 @@
+/* The dot wings beside custom page headers (.texture-dots): each wing is a wall of a corridor receding towards the
+   page's h1, and the homepage flies slowly down it. Columns step back a fixed 24px, so the drawing does not scale with the
+   wing; it is drawn for the measured wing, on one canvas per wing, once the page is mounted. After 24px of flight the
+   lattice repeats itself, so the loop is seamless. */
+
+import { onBeforeUnmount, onMounted, watch, type Ref } from "vue";
+import { useData } from "vitepress";
+
+type Theme = "light" | "dark";
+
+type Wing = {
+  width: number;
+  height: number;
+  titleMiddle: number; /* rows converge on it; from the top of the page */
+};
+
+const pitch = 24;
+
+/* milliseconds to fly one pitch */
+const flightPeriod = 4500;
+
+const inks = {
+  light: { color: "#FFFFFF", alpha: 0.85, core: 1.25, edge: 2.25 },
+  dark: { color: "#A2CAE6", alpha: 0.22, core: 1, edge: 1.5 }
+};
+
+/* the vanishing point's distance from the outer edge, in wing widths: further away flattens the wall */
+const vanishingDistance = 2.5;
+
+/* the dot radius as a multiple of the base dot's, from the inner edge (0) to the outer edge (1) */
+const dotSize = (nearness: number) => 0.55 + 1.75 * nearness ** 2;
+
+const dotOpacity = 0.65;
+
+/* new columns fade in over this many pixels as they enter at the inner edge */
+const fadeIn = pitch * 0.6;
+
+const spriteSize = 64;
+
+/* one soft dot, scaled onto the canvas for every dot of the wall */
+function dotSprite({ color, alpha, core, edge }: (typeof inks)[Theme]) {
+  const sprite = document.createElement("canvas");
+  sprite.width = sprite.height = spriteSize;
+
+  const half = spriteSize / 2;
+  const context = sprite.getContext("2d")!;
+  const gradient = context.createRadialGradient(half, half, 0, half, half, half);
+  gradient.addColorStop(core / edge, withAlpha(color, alpha * dotOpacity));
+  gradient.addColorStop(1, withAlpha(color, 0));
+
+  context.fillStyle = gradient;
+  context.fillRect(0, 0, spriteSize, spriteSize);
+  return sprite;
+}
+
+function withAlpha(hex: string, alpha: number) {
+  const value = parseInt(hex.slice(1), 16);
+  return `rgba(${value >> 16}, ${(value >> 8) & 255}, ${value & 255}, ${alpha})`;
+}
+
+/* draws the wall after `flown` pixels of flight, 0 to pitch */
+function draw(context: CanvasRenderingContext2D, { width, height, titleMiddle }: Wing, theme: Theme, sprite: HTMLCanvasElement, mirror: boolean, flown: number) {
+  const { edge } = inks[theme];
+  const vanishingX = vanishingDistance * width;
+  const innerScale = 1 - width / vanishingX;
+
+  context.clearRect(0, 0, width, height);
+
+  /* the nearest column sits half a step in from the outer edge, as on a flat grid; the one before it has just left */
+  for (let distance = vanishingX / (1 - pitch / 2 / vanishingX) - pitch - flown; ; distance += pitch) {
+    const scale = vanishingX / distance;
+    const x = vanishingX * (1 - scale);
+
+    if (x > width + 8)
+      break;
+
+    const radius = edge * dotSize(Math.max(0, (scale - innerScale) / (1 - innerScale)));
+    const toRow = (y: number) => (titleMiddle + (y - titleMiddle) / scale - pitch / 2) / pitch;
+
+    context.globalAlpha = Math.min(1, Math.max(0, (width - x) / fadeIn));
+
+    for (let row = Math.ceil(toRow(-radius)); row <= toRow(height + radius); row++) {
+      const y = titleMiddle + (pitch / 2 + row * pitch - titleMiddle) * scale;
+      context.drawImage(sprite, (mirror ? width - x : x) - radius, y - radius, 2 * radius, 2 * radius);
+    }
+  }
+
+  context.globalAlpha = 1;
+}
+
+/* the wings of a .texture-dots page, flying only where `animated`: no wings until mounted, as their drawing depends on the window width */
+export function useDotWings(root: Ref<HTMLElement | undefined>, { animated = false } = {}) {
+  const { isDark } = useData();
+
+  /* created on mount: the page is also rendered on the server */
+  let motion: MediaQueryList | undefined;
+  let canvases: { canvas: HTMLCanvasElement; mirror: boolean; context: CanvasRenderingContext2D }[] = [];
+
+  let wing: Wing | undefined;
+  let sprite: HTMLCanvasElement | undefined;
+  let theme: Theme = "light";
+  let onScreen = false;
+  let frame = 0;
+  let flightStart = 0;
+
+  const currentTheme = (): Theme => (isDark.value ? "dark" : "light");
+
+  function render(flown: number) {
+    if (!wing || !sprite)
+      return;
+
+    for (const { canvas, mirror, context } of canvases) {
+      const scale = canvas.width / wing.width;
+      context.setTransform(scale, 0, 0, scale, 0, 0);
+      draw(context, wing, theme, sprite, mirror, flown);
+    }
+  }
+
+  function tick(now: number) {
+    render((((now - flightStart) / flightPeriod) % 1) * pitch);
+    frame = requestAnimationFrame(tick);
+  }
+
+  /* flies while on screen; a still wall when off screen, hidden or for reduced motion */
+  function update() {
+    cancelAnimationFrame(frame);
+    frame = 0;
+
+    if (animated && wing && onScreen && !motion?.matches) {
+      flightStart = performance.now();
+      frame = requestAnimationFrame(tick);
+    } else
+      render(0);
+  }
+
+  /* the size comes from CSS; NaN while the wings are hidden */
+  function measure(element: HTMLElement) {
+    const style = getComputedStyle(canvases[0].canvas);
+    const width = parseFloat(style.width);
+    const title = element.querySelector("h1")?.getBoundingClientRect();
+
+    if (!width || !title) {
+      wing = undefined;
+      update();
+      return;
+    }
+
+    /* the wing starts above the page, behind the navbar (a negative top) */
+    const wingTop = element.getBoundingClientRect().top + parseFloat(style.top);
+    const next = { width, height: parseFloat(style.height), titleMiddle: Math.round(title.top + title.height / 2 - wingTop) };
+
+    if (wing?.width === next.width && wing.height === next.height && wing.titleMiddle === next.titleMiddle)
+      return;
+
+    wing = next;
+
+    const density = window.devicePixelRatio || 1;
+
+    for (const { canvas } of canvases) {
+      canvas.width = Math.ceil(next.width * density);
+      canvas.height = Math.ceil(next.height * density);
+    }
+
+    update();
+  }
+
+  let resizeObserver: ResizeObserver | undefined;
+  let intersectionObserver: IntersectionObserver | undefined;
+
+  onMounted(() => {
+    const element = root.value!;
+
+    theme = currentTheme();
+    sprite = dotSprite(inks[theme]);
+
+    canvases = [false, true].map(mirror => {
+      const canvas = document.createElement("canvas");
+      canvas.className = `dot-wing ${mirror ? "right" : "left"}`;
+      canvas.setAttribute("aria-hidden", "true");
+      element.prepend(canvas);
+      return { canvas, mirror, context: canvas.getContext("2d")! };
+    });
+
+    resizeObserver = new ResizeObserver(() => measure(element));
+    resizeObserver.observe(element);
+
+    if (!animated)
+      return;
+
+    motion = matchMedia("(prefers-reduced-motion: reduce)");
+    motion.addEventListener("change", update);
+
+    intersectionObserver = new IntersectionObserver(entries => {
+      onScreen = entries.some(entry => entry.isIntersecting);
+      update();
+    });
+    for (const { canvas } of canvases)
+      intersectionObserver.observe(canvas);
+  });
+
+  watch(isDark, () => {
+    if (!sprite)
+      return;
+
+    theme = currentTheme();
+    sprite = dotSprite(inks[theme]);
+    update();
+  });
+
+  onBeforeUnmount(() => {
+    cancelAnimationFrame(frame);
+    resizeObserver?.disconnect();
+    intersectionObserver?.disconnect();
+    motion?.removeEventListener("change", update);
+
+    for (const { canvas } of canvases)
+      canvas.remove();
+  });
+}
diff --git a/docs/.vitepress/theme/features.ts b/docs/.vitepress/theme/features.ts
index 377a2ad..3aa3b1a 100644
--- a/docs/.vitepress/theme/features.ts
+++ b/docs/.vitepress/theme/features.ts
@@ -3,22 +3,29 @@
 
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 import {
-  faAlignJustify, faArrowRightArrowLeft, faArrowsFromLine, faArrowsMaximize, faArrowsUpDownLeftRight, faBarsStaggered,
-  faBezierCurve, faBold, faBookFont, faBookmark, faBorderAll, faBorderOuter, faBracketsCurly, faBringFront, faBrush,
-  faBug, faChartMixed, faCircle1, faCircleExclamation, faCompress, faCrop, faCrosshairs, faCubes, faDiagramSubtask,
-  faDistributeSpacingVertical, faDownLeftAndUpRightToCenter, faDroplet, faEllipsis, faExpand, faEye, faFeather, faFile,
-  faFileCode, faFileExport, faFileSvg, faFileZipper, faFillDrip, faFont, faFontCase, faForwardStep, faFunction,
-  faGlobe, faHashtag, faHighlighter, faHorizontalRule, faHyphen, faIdCard, faImage, faImages, faIndent, faInfinity,
-  faItalic, faKerning, faLanguage, faLayerGroup, faLeftRight, faLineHeight, faLink, faLinkSimple, faList, faListOl,
-  faListTree, faLocationCrosshairs, faLocationDot, faLock, faMagnifyingGlass, faMagnifyingGlassPlus, faMapLocationDot,
+  faAlignJustify, faArrowPointer, faArrowRightArrowLeft, faArrowsFromLine, faArrowsMaximize, faArrowsUpDownLeftRight,
+  faArrowUpRightFromSquare, faBarsStaggered, faBezierCurve, faBold, faBookFont, faBookmark, faBookOpen, faBorderAll,
+  faBorderOuter, faBoxArchive, faBracketsCurly, faBringFront, faBrush, faBug, faChartMixed, faCircle1,
+  faCircleExclamation, faClipboardCheck, faClosedCaptioning, faCompress, faCrop, faCrosshairs, faCubes,
+  faDiagramSubtask, faDistributeSpacingVertical, faDownLeftAndUpRightToCenter, faDroplet, faEarthEurope, faEllipsis,
+  faExpand, faEye, faEyeSlash, faFeather, faFile, faFileCertificate, faFileCode, faFileExport, faFileSvg,
+  faFileZipper, faFillDrip, faFolderTree, faFont, faFontCase, faForwardStep, faFunction, faGlobe, faHashtag,
+  faHeading, faHighlighter, faHorizontalRule, faHyphen, faIdCard, faImage, faImages, faIndent, faInfinity, faItalic,
+  faKerning, faLanguage, faLayerGroup, faLeftRight, faLineHeight, faLink, faLinkSimple, faList, faListOl, faListTree,
+  faListUl, faLocationCrosshairs, faLocationDot, faLock, faMagnifyingGlass, faMagnifyingGlassPlus, faMapLocationDot,
   faMerge, faMountainSun, faNewspaper, faObjectGroup, faObjectsAlignCenterHorizontal, faPageBreak, faPaintbrush,
   faPalette, faPaperclip, faParagraph, faPuzzlePiece, faQrcode, faRectangleHistory, faReflectHorizontal, faRepeat,
   faRotate, faRuler, faRulerCombined, faRulerVertical, faScissors, faSitemap, faSliders, faSplit, faSquareDashed,
   faSquareDashedCirclePlus, faSquareQuestion, faSquareRing, faStamp, faStop, faSubscript, faSuperscript, faSwap,
-  faSwatchbook, faTable, faTableCellsHeader, faTableCellsMerge, faTableColumns, faTableRows, faTags, faText,
-  faTextHeight, faTextSize, faTextWidth, faToggleOn, faUnderline, faUniversalAccess, faUnlock, faUpDown,
-  faUpRightAndDownLeftFromCenter, faVectorSquare, faWandMagicSparkles
+  faSwatchbook, faTable, faTableCellsHeader, faTableCellsMerge, faTableColumns, faTableList, faTableRows, faTag,
+  faTags, faText, faTextHeight, faTextSize, faTextWidth, faToggleOn, faTriangleExclamation, faUnderline, faUnlock,
+  faUpDown, faUpRightAndDownLeftFromCenter, faVectorSquare, faWandMagicSparkles
 } from "@fortawesome/pro-regular-svg-icons";
+import {
+  faCode as faMenuDevelopment, faFileExport as faMenuDocumentGeneration, faFilePen as faMenuDocumentOperations,
+  faImage as faMenuVisualContent, faPlanetRinged as faMenuCompanion, faTableLayout as faMenuLayout,
+  faText as faMenuText, faUniversalAccess as faMenuAccessibility
+} from "@fortawesome/pro-light-svg-icons";
 import { faDropShadow, faRoundedCorners } from "./customIcons";
 
 export interface Feature {
@@ -33,187 +40,23 @@ export interface FeatureCategory {
   features: Feature[];
 }
 
+/* the rail of the Features Overview: chapters fold open to their categories, a section stands on its own */
 export interface FeatureChapter {
   name: string;
+  icon: IconDefinition;
   categories: FeatureCategory[];
 }
 
-export const featureChapters: FeatureChapter[] = [
-  {
-    name: "Development tools",
-    categories: [
-      {
-        name: "Companion App",
-        features: [
-          {
-            name: "Live preview",
-            description: "Download, install, and integrate the Companion App with your project. Enjoy real-time hot-reload preview.",
-            icon: faEye,
-            link: "/companion/usage.html"
-          },
-          {
-            name: "Magnifier",
-            description: "Zoom into any part of the page at pixel level. Inspect fine details without zooming and panning the whole preview.",
-            icon: faMagnifyingGlassPlus,
-            link: "/companion/features.html#magnifier"
-          },
-          {
-            name: "Coordinate picker",
-            description: "Read the exact position of any point or element on the page. Verify placement against your layout intent.",
-            icon: faLocationCrosshairs,
-            link: "/companion/features.html#coordinate-picker"
-          },
-          {
-            name: "Size measurement",
-            description: "Measure the width and height of visual elements, and the distance between them. Check spacing and alignment with precision.",
-            icon: faRulerCombined,
-            link: "/companion/features.html#size-measurement"
-          },
-          {
-            name: "Element inspection",
-            description: "Browse the document hierarchy and select any element. Review its configuration, position, size and every page it appears on.",
-            icon: faListTree,
-            link: "/companion/features.html#element-selection"
-          },
-          {
-            name: "Content search",
-            description: "Search the document for a phrase. Matches are highlighted in both the structure tree and the preview.",
-            icon: faMagnifyingGlass,
-            link: "/companion/features.html#content-searching"
-          },
-          {
-            name: "Jump to source code",
-            description: "Ctrl-click any area of the preview to open the code that produced it in your IDE.",
-            icon: faFileCode,
-            link: "/companion/features.html#go-to-implementation"
-          }
-        ]
-      },
-      {
-        name: "Debugging",
-        features: [
-          {
-            name: "Exception analysis",
-            description: "View detailed exception messages, stack traces, and source code context when errors occur during document generation.",
-            icon: faCircleExclamation,
-            link: "/companion/features.html#runtime-exceptions"
-          },
-          {
-            name: "Layout debugging",
-            description: "Diagnose layout problems with color-coded status indicators. Identify root causes with intelligent heuristics.",
-            icon: faBug,
-            link: "/companion/features.html#layout-issue-debugging"
-          },
-          {
-            name: "Debug outlines",
-            description: "Colored border and label overlay showing element boundaries. Visual debugging during development.",
-            icon: faVectorSquare,
-            link: "/api-reference/debug-area.html"
-          },
-          {
-            name: "Debug pointers",
-            description: "Named marker appearing in layout exception messages. Identifies problematic elements in error diagnostics.",
-            icon: faLocationDot,
-            link: "/api-reference/debug-pointer.html"
-          }
-        ]
-      }
-    ]
-  },
-  {
-    name: "Code organization",
-    categories: [
-      {
-        name: "Code patterns",
-        features: [
-          {
-            name: "Execution order",
-            description: "Fluent API calls apply in the order they are chained. Learn how the order shapes the visual result.",
-            icon: faListOl,
-            link: "/concepts/code-patterns/execution-order.html"
-          },
-          {
-            name: "Document structure",
-            description: "Keep each document in one class and split its sections into well-named private methods. Modular code that stays readable as documents grow.",
-            icon: faSitemap,
-            link: "/concepts/code-patterns/document-structure.html"
-          },
-          {
-            name: "Local helpers",
-            description: "Encapsulate repeated layout logic in C# local functions, right where it is used. Clean code without single-use class members.",
-            icon: faFunction,
-            link: "/concepts/code-patterns/local-helpers.html"
-          },
-          {
-            name: "Reusable styles",
-            description: "Define shared styling once as a function and apply it to many elements. Consistent appearance with less repetition.",
-            icon: faBrush,
-            link: "/concepts/code-patterns/content-styling.html"
-          },
-          {
-            name: "Extension methods",
-            description: "Turn recurring styling and content patterns into extension methods. Reuse them across every document in your codebase.",
-            icon: faBracketsCurly,
-            link: "/concepts/code-patterns/extension-methods.html"
-          }
-        ]
-      },
-      {
-        name: "Components",
-        features: [
-          {
-            name: "Components",
-            description: "Build modular, reusable document blocks for cleaner architecture. Encapsulate layout patterns and maintain consistency across your entire codebase.",
-            icon: faPuzzlePiece,
-            link: "/concepts/code-patterns/components.html"
-          },
-          {
-            name: "Dynamic components",
-            description: "Components rendered separately on every page, with access to the page number, total page count and available space. Build progress bars or alternating layouts.",
-            icon: faCubes,
-            link: "/concepts/code-patterns/dynamic-components.html"
-          },
-          {
-            name: "Capture positions",
-            description: "Record where content lands on each page, then place other elements relative to it. Annotations, callouts and connectors.",
-            icon: faCrosshairs,
-            link: "/concepts/code-patterns/capture-content-position.html"
-          }
-        ]
-      },
-      {
-        name: "Prototyping",
-        features: [
-          {
-            name: "Placeholder text",
-            description: "Generate lorem ipsum, labels, sentences, names, emails, dates, numbers and more. Fill layouts before real data is available.",
-            icon: faWandMagicSparkles,
-            link: "/concepts/prototyping.html#text"
-          },
-          {
-            name: "Placeholder colours",
-            description: "Random colors drawn from the Material Design palette. Tell nested containers apart while prototyping.",
-            icon: faSwatchbook,
-            link: "/concepts/prototyping.html#colors"
-          },
-          {
-            name: "Placeholder images",
-            description: "Soft gradient images generated on demand. Test image placement, sizing and alignment before real assets arrive.",
-            icon: faMountainSun,
-            link: "/concepts/prototyping.html#image"
-          },
-          {
-            name: "Placeholder boxes",
-            description: "Gray rectangle with diagonal lines and optional label. Visualizes reserved space during layout prototyping.",
-            icon: faSquareDashed,
-            link: "/api-reference/placeholder.html"
-          }
-        ]
-      }
-    ]
-  },
+export interface FeatureSection extends FeatureCategory {
+  icon: IconDefinition;
+}
+
+export type FeatureMenuEntry = FeatureChapter | FeatureSection;
+
+export const featureMenu: FeatureMenuEntry[] = [
   {
     name: "Layout",
+    icon: faMenuLayout,
     categories: [
       {
         name: "Page setup",
@@ -477,6 +320,7 @@ export const featureChapters: FeatureChapter[] = [
   },
   {
     name: "Text",
+    icon: faMenuText,
     categories: [
       {
         name: "Text basics",
@@ -676,6 +520,7 @@ export const featureChapters: FeatureChapter[] = [
   },
   {
     name: "Visual content",
+    icon: faMenuVisualContent,
     categories: [
       {
         name: "Styling",
@@ -791,108 +636,370 @@ export const featureChapters: FeatureChapter[] = [
     ]
   },
   {
-    name: "Document output",
+    name: "Document generation",
+    icon: faMenuDocumentGeneration,
+    features: [
+      {
+        name: "Output formats",
+        description: "Generate PDF, SVG, or raster images (PNG, JPEG, WEBP). Save to file, stream, or byte array for flexible integration.",
+        icon: faFileExport,
+        link: "/concepts/generating-output.html"
+      },
+      {
+        name: "Document metadata",
+        description: "Set PDF properties like title, author, subject, keywords, and timestamps. Improve document organization and searchability.",
+        icon: faIdCard,
+        link: "/concepts/document-metadata.html"
+      },
+      {
+        name: "Document settings",
+        description: "Configure PDF/A archival and PDF/UA accessibility compliance. Control compression, image quality, DPI, and content direction.",
+        icon: faSliders,
+        link: "/concepts/document-settings.html"
+      },
+      {
+        name: "PDF/A archival",
+        description: "Produce documents that meet the ISO 19005 long-term preservation standard. Files stay readable decades from now, independent of today's software.",
+        icon: faBoxArchive,
+        link: "/concepts/accessibility.html#pdf-a-archival"
+      },
+      {
+        name: "Hyperlinks",
+        description: "Create interactive clickable areas linking to URLs, email addresses, or phone numbers. Seamless integration with PDF reader capabilities.",
+        icon: faLink,
+        link: "/api-reference/hyperlink.html"
+      },
+      {
+        name: "Named sections",
+        description: "Define named regions for navigation and location-aware page numbering. Build table of contents and cross-references with ease.",
+        icon: faBookmark,
+        link: "/api-reference/section.html"
+      },
+      {
+        name: "Lazy generation",
+        description: "Optimize memory for large documents with deferred content generation. Ideal for data-intensive reports and enterprise-scale document processing.",
+        icon: faFeather,
+        link: "/api-reference/lazy.html"
+      }
+    ]
+  },
+  {
+    name: "Accessibility",
+    icon: faMenuAccessibility,
+    features: [
+      {
+        name: "Tagged PDF",
+        description: "Embed the logical structure that screen readers and other assistive technologies rely on. Tags describe meaning the way semantic HTML elements do.",
+        icon: faTag,
+        link: "/concepts/accessibility.html#tagged-pdf"
+      },
+      {
+        name: "PDF/UA compliance",
+        description: "Generate documents that conform to the ISO 14289 standard for universal accessibility. The strongest guarantee that every reader can use the file.",
+        icon: faFileCertificate,
+        link: "/concepts/accessibility.html#pdf-ua-universal-accessibility"
+      },
+      {
+        name: "Semantic structure",
+        description: "Tag documents, parts, sections and articles so the reading order is explicit. Assistive technologies follow the same outline a sighted reader sees.",
+        icon: faFolderTree,
+        link: "/concepts/accessibility.html#document-structure"
+      },
+      {
+        name: "Headings",
+        description: "Mark headings from H1 to H6 to outline the content. PDF readers use them for navigation and to build a document outline.",
+        icon: faHeading,
+        link: "/concepts/accessibility.html#headings"
+      },
+      {
+        name: "Lists",
+        description: "Tag list items with their labels and bodies. Screen readers announce the list structure and the position of every entry.",
+        icon: faListUl,
+        link: "/concepts/accessibility.html#lists"
+      },
+      {
+        name: "Tables",
+        description: "Tag table headers, rows and cells with their scope and relationships. Readers can navigate data by column and row.",
+        icon: faTableList,
+        link: "/concepts/accessibility.html#tables"
+      },
+      {
+        name: "Table of contents",
+        description: "Mark a table of contents or an index as a navigational aid. Assistive technologies offer it as a shortcut through the document.",
+        icon: faBookOpen,
+        link: "/concepts/accessibility.html#table-of-contents"
+      },
+      {
+        name: "Alternative text",
+        description: "Describe figures, formulas and other non-text content with alternative text. The single most important step toward an accessible document.",
+        icon: faClosedCaptioning,
+        link: "/concepts/accessibility.html#illustrations-and-media"
+      },
+      {
+        name: "Content language",
+        description: "Declare the natural language of the whole document or any container. Screen readers switch to the matching pronunciation rules.",
+        icon: faEarthEurope,
+        link: "/concepts/accessibility.html#language"
+      },
+      {
+        name: "Decorative content",
+        description: "Exclude backgrounds, ornaments and helper lines from the accessibility tree. Assistive technologies skip what carries no meaning.",
+        icon: faEyeSlash,
+        link: "/concepts/accessibility.html#ignoring-content"
+      },
+      {
+        name: "Compliance checks",
+        description: "Validate the output with VeraPDF for formal PDF/A and PDF/UA conformance, and with PAC for how a screen reader experiences it.",
+        icon: faClipboardCheck,
+        link: "/concepts/accessibility.html#compliance-tools"
+      }
+    ]
+  },
+  {
+    name: "Document operations",
+    icon: faMenuDocumentOperations,
+    features: [
+      {
+        name: "Merge documents",
+        description: "Combine multiple PDF files into a single document. Merge entire documents or select specific pages from each source with full control.",
+        icon: faMerge,
+        link: "/concepts/document-operations.html#merging-documents"
+      },
+      {
+        name: "Extract pages",
+        description: "Select specific pages using flexible range syntax. Extract, reorder, reverse, or filter pages with powerful selection patterns.",
+        icon: faScissors,
+        link: "/concepts/document-operations.html#page-selection"
+      },
+      {
+        name: "Overlays and watermarks",
+        description: "Apply watermarks, headers, footers, or letterhead by layering PDF content. Configure which pages receive overlays with precise control.",
+        icon: faStamp,
+        link: "/concepts/document-operations.html#overlays-and-underlays"
+      },
+      {
+        name: "Encryption",
+        description: "Secure PDFs with 40-bit, 128-bit, or 256-bit encryption. Set user/owner passwords and control permissions for printing, copying, and editing.",
+        icon: faLock,
+        link: "/concepts/document-operations.html#document-encryption"
+      },
+      {
+        name: "Decryption",
+        description: "Remove encryption and security restrictions from password-protected PDFs. Access content for further processing or distribution.",
+        icon: faUnlock,
+        link: "/concepts/document-operations.html#document-decryption"
+      },
+      {
+        name: "Linearization",
+        description: "Optimize PDFs for web delivery. Linearized files allow viewers to display content before the entire file downloads, improving user experience.",
+        icon: faGlobe,
+        link: "/concepts/document-operations.html#document-linearization"
+      },
+      {
+        name: "Attachments",
+        description: "Embed files directly within PDFs with full PDF/A compliance. Support for all embedded file relationships.",
+        icon: faPaperclip,
+        link: "/concepts/document-operations.html#file-attachments"
+      },
+      {
+        name: "XMP metadata",
+        description: "Add custom XMP metadata to PDF/A documents. Essential for industry standards like ZUGFeRD invoices and other compliance requirements.",
+        icon: faTags,
+        link: "/concepts/document-operations.html#xmp-metadata-extension"
+      }
+    ]
+  },
+  {
+    name: "Development",
+    icon: faMenuDevelopment,
     categories: [
       {
-        name: "Document generation",
+        name: "Code patterns",
         features: [
           {
-            name: "Output formats",
-            description: "Generate PDF, SVG, or raster images (PNG, JPEG, WEBP). Save to file, stream, or byte array for flexible integration.",
-            icon: faFileExport,
-            link: "/concepts/generating-output.html"
+            name: "Execution order",
+            description: "Fluent API calls apply in the order they are chained. Learn how the order shapes the visual result.",
+            icon: faListOl,
+            link: "/concepts/code-patterns/execution-order.html"
           },
           {
-            name: "Document metadata",
-            description: "Set PDF properties like title, author, subject, keywords, and timestamps. Improve document organization and searchability.",
-            icon: faIdCard,
-            link: "/concepts/document-metadata.html"
+            name: "Document structure",
+            description: "Keep each document in one class and split its sections into well-named private methods. Modular code that stays readable as documents grow.",
+            icon: faSitemap,
+            link: "/concepts/code-patterns/document-structure.html"
           },
           {
-            name: "Document settings",
-            description: "Configure PDF/A archival and PDF/UA accessibility compliance. Control compression, image quality, DPI, and content direction.",
-            icon: faSliders,
-            link: "/concepts/document-settings.html"
+            name: "Local helpers",
+            description: "Encapsulate repeated layout logic in C# local functions, right where it is used. Clean code without single-use class members.",
+            icon: faFunction,
+            link: "/concepts/code-patterns/local-helpers.html"
           },
           {
-            name: "Accessibility",
-            description: "Generate inclusive PDFs with PDF/UA compliance and tagged content. Enable screen reader support with proper semantic structure for all users.",
-            icon: faUniversalAccess,
-            link: "/concepts/accessibility.html"
+            name: "Reusable styles",
+            description: "Define shared styling once as a function and apply it to many elements. Consistent appearance with less repetition.",
+            icon: faBrush,
+            link: "/concepts/code-patterns/content-styling.html"
           },
           {
-            name: "Hyperlinks",
-            description: "Create interactive clickable areas linking to URLs, email addresses, or phone numbers. Seamless integration with PDF reader capabilities.",
-            icon: faLink,
-            link: "/api-reference/hyperlink.html"
+            name: "Extension methods",
+            description: "Turn recurring styling and content patterns into extension methods. Reuse them across every document in your codebase.",
+            icon: faBracketsCurly,
+            link: "/concepts/code-patterns/extension-methods.html"
+          }
+        ]
+      },
+      {
+        name: "Components",
+        features: [
+          {
+            name: "Components",
+            description: "Build modular, reusable document blocks for cleaner architecture. Encapsulate layout patterns and maintain consistency across your entire codebase.",
+            icon: faPuzzlePiece,
+            link: "/concepts/code-patterns/components.html"
           },
           {
-            name: "Named sections",
-            description: "Define named regions for navigation and location-aware page numbering. Build table of contents and cross-references with ease.",
-            icon: faBookmark,
-            link: "/api-reference/section.html"
+            name: "Dynamic components",
+            description: "Components rendered separately on every page, with access to the page number, total page count and available space. Build progress bars or alternating layouts.",
+            icon: faCubes,
+            link: "/concepts/code-patterns/dynamic-components.html"
           },
           {
-            name: "Lazy generation",
-            description: "Optimize memory for large documents with deferred content generation. Ideal for data-intensive reports and enterprise-scale document processing.",
-            icon: faFeather,
-            link: "/api-reference/lazy.html"
+            name: "Capture positions",
+            description: "Record where content lands on each page, then place other elements relative to it. Annotations, callouts and connectors.",
+            icon: faCrosshairs,
+            link: "/concepts/code-patterns/capture-content-position.html"
           }
         ]
       },
       {
-        name: "Document operations",
+        name: "Prototyping",
         features: [
           {
-            name: "Merge documents",
-            description: "Combine multiple PDF files into a single document. Merge entire documents or select specific pages from each source with full control.",
-            icon: faMerge,
-            link: "/concepts/document-operations.html#merging-documents"
-          },
-          {
-            name: "Extract pages",
-            description: "Select specific pages using flexible range syntax. Extract, reorder, reverse, or filter pages with powerful selection patterns.",
-            icon: faScissors,
-            link: "/concepts/document-operations.html#page-selection"
+            name: "Placeholder text",
+            description: "Generate lorem ipsum, labels, sentences, names, emails, dates, numbers and more. Fill layouts before real data is available.",
+            icon: faWandMagicSparkles,
+            link: "/concepts/prototyping.html#text"
           },
           {
-            name: "Overlays and watermarks",
-            description: "Apply watermarks, headers, footers, or letterhead by layering PDF content. Configure which pages receive overlays with precise control.",
-            icon: faStamp,
-            link: "/concepts/document-operations.html#overlays-and-underlays"
+            name: "Placeholder colours",
+            description: "Random colors drawn from the Material Design palette. Tell nested containers apart while prototyping.",
+            icon: faSwatchbook,
+            link: "/concepts/prototyping.html#colors"
           },
           {
-            name: "Encryption",
-            description: "Secure PDFs with 40-bit, 128-bit, or 256-bit encryption. Set user/owner passwords and control permissions for printing, copying, and editing.",
-            icon: faLock,
-            link: "/concepts/document-operations.html#document-encryption"
+            name: "Placeholder images",
+            description: "Soft gradient images generated on demand. Test image placement, sizing and alignment before real assets arrive.",
+            icon: faMountainSun,
+            link: "/concepts/prototyping.html#image"
           },
           {
-            name: "Decryption",
-            description: "Remove encryption and security restrictions from password-protected PDFs. Access content for further processing or distribution.",
-            icon: faUnlock,
-            link: "/concepts/document-operations.html#document-decryption"
-          },
+            name: "Placeholder boxes",
+            description: "Gray rectangle with diagonal lines and optional label. Visualizes reserved space during layout prototyping.",
+            icon: faSquareDashed,
+            link: "/api-reference/placeholder.html"
+          }
+        ]
+      },
+      {
+        name: "Debugging",
+        features: [
           {
-            name: "Linearization",
-            description: "Optimize PDFs for web delivery. Linearized files allow viewers to display content before the entire file downloads, improving user experience.",
-            icon: faGlobe,
-            link: "/concepts/document-operations.html#document-linearization"
+            name: "Debug outlines",
+            description: "Colored border and label overlay showing element boundaries. Visual debugging during development.",
+            icon: faVectorSquare,
+            link: "/api-reference/debug-area.html"
           },
           {
-            name: "Attachments",
-            description: "Embed files directly within PDFs with full PDF/A compliance. Support for all embedded file relationships.",
-            icon: faPaperclip,
-            link: "/concepts/document-operations.html#file-attachments"
+            name: "Debug pointers",
+            description: "Named marker appearing in layout exception messages. Identifies problematic elements in error diagnostics.",
+            icon: faLocationDot,
+            link: "/api-reference/debug-pointer.html"
           },
           {
-            name: "XMP metadata",
-            description: "Add custom XMP metadata to PDF/A documents. Essential for industry standards like ZUGFeRD invoices and other compliance requirements.",
-            icon: faTags,
-            link: "/concepts/document-operations.html#xmp-metadata-extension"
+            name: "Layout error messages",
+            description: "When constraints cannot be met, the exception names the element most likely at fault, with its location and measurements.",
+            icon: faTriangleExclamation,
+            link: "/concepts/generating-output.html#layout-errors"
           }
         ]
       }
     ]
+  },
+  {
+    name: "Companion App",
+    icon: faMenuCompanion,
+    features: [
+      {
+        name: "Live preview",
+        description: "Download, install, and integrate the Companion App with your project. Enjoy real-time hot-reload preview.",
+        icon: faEye,
+        link: "/companion/usage.html"
+      },
+      {
+        name: "Document hierarchy",
+        description: "Browse the document as a tree that mirrors the Fluent API calls. Expand nodes to navigate the content and select elements quickly.",
+        icon: faListTree,
+        link: "/companion/features.html#document-hierarchy"
+      },
+      {
+        name: "Element inspection",
+        description: "Select any element in the preview or the hierarchy. Review its configuration, position, size and every page it appears on.",
+        icon: faArrowPointer,
+        link: "/companion/features.html#element-selection"
+      },
+      {
+        name: "Magnifier",
+        description: "Zoom into any part of the page at pixel level. Inspect fine details without zooming and panning the whole preview.",
+        icon: faMagnifyingGlassPlus,
+        link: "/companion/features.html#magnifier"
+      },
+      {
+        name: "Coordinate picker",
+        description: "Read the exact position of any point or element on the page. Verify placement against your layout intent.",
+        icon: faLocationCrosshairs,
+        link: "/companion/features.html#coordinate-picker"
+      },
+      {
+        name: "Size measurement",
+        description: "Measure the width and height of visual elements, and the distance between them. Check spacing and alignment with precision.",
+        icon: faRulerCombined,
+        link: "/companion/features.html#size-measurement"
+      },
+      {
+        name: "Content search",
+        description: "Search the document for a phrase. Matches are highlighted in both the structure tree and the preview.",
+        icon: faMagnifyingGlass,
+        link: "/companion/features.html#content-searching"
+      },
+      {
+        name: "Document links",
+        description: "Alt-click any hyperlink or section link in the preview to follow it. Check the document's navigation without leaving the app.",
+        icon: faArrowUpRightFromSquare,
+        link: "/companion/features.html#document-links"
+      },
+      {
+        name: "Jump to source code",
+        description: "Ctrl-click any area of the preview to open the code that produced it in your IDE.",
+        icon: faFileCode,
+        link: "/companion/features.html#go-to-implementation"
+      },
+      {
+        name: "Exception analysis",
+        description: "View detailed exception messages, stack traces, and source code context when errors occur during document generation.",
+        icon: faCircleExclamation,
+        link: "/companion/features.html#runtime-exceptions"
+      },
+      {
+        name: "Layout debugging",
+        description: "Diagnose layout problems with color-coded status indicators. Identify root causes with intelligent heuristics.",
+        icon: faBug,
+        link: "/companion/features.html#layout-issue-debugging"
+      }
+    ]
   }
 ];
+
+export const isChapter = (entry: FeatureMenuEntry): entry is FeatureChapter => "categories" in entry;
+
+/* every category in rail order, chapters unfolded */
+export const featureCategories: FeatureCategory[] = featureMenu.flatMap(entry => isChapter(entry) ? entry.categories : [entry]);
diff --git a/docs/.vitepress/theme/homepage/HomePage.vue b/docs/.vitepress/theme/homepage/HomePage.vue
index d4df6d5..b64634b 100644
--- a/docs/.vitepress/theme/homepage/HomePage.vue
+++ b/docs/.vitepress/theme/homepage/HomePage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="custom-page home-page">
+  <div ref="root" class="custom-page home-page texture-dots">
     <HomePageHero />
 
     <div class="content sections">
@@ -9,7 +9,6 @@
           <HomePageCtaCard
               title="Invoice in 10 minutes"
               description="Learn the core concepts step by step, from blank page to finished PDF in under 200 lines of C# code."
-              label="Watch the tutorial"
               href="/quick-start.html">
             <template #visual="{ active, visible }">
               <HomePageCtaBuildVisual :active="active" :visible="visible" />
@@ -19,7 +18,6 @@
           <HomePageCtaCard
               title="230+ real-world examples"
               description="Get inspired by our catalog of predesigned components, then reuse them and adjust them to your needs."
-              label="Browse the gallery"
               href="/sample-gallery.html"
               accent="#5C6BC0"
               accent-secondary="#3F51B5">
@@ -32,35 +30,37 @@
         <!-- the interim cards until then -->
         <template v-else>
           <HomePageCtaCard
-              title="Invoice in under 200 lines"
-              description="Build a professional, paginated invoice step by step and learn the core concepts of QuestPDF along the way."
-              label="Start the tutorial"
+              title="Read the tutorial"
+              description="Learn the library and build a professional invoice under 200 lines of C# code"
               href="/invoice-tutorial.html">
             <template #visual="{ active, visible }">
-              <HomePageCtaTutorialVisual :active="active" :visible="visible" />
+              <HomePageCtaBuildVisual :active="active" :visible="visible" />
             </template>
           </HomePageCtaCard>
 
           <HomePageCtaCard
-              title="120+ documented features"
-              description="Browse every capability, from layout and typography to charts, barcodes and PDF/A output, each linked to its documentation."
-              label="Explore the features"
+              title="Explore 120+ features"
+              description="Explore QuestPDF features and learn to create documents that match your needs."
               href="/features-overview.html"
               accent="#5C6BC0"
               accent-secondary="#3F51B5">
             <template #visual="{ active, visible }">
-              <HomePageCtaFeaturesVisual :active="active" :visible="visible" />
+              <HomePageCtaDeckVisual :active="active" :visible="visible" />
             </template>
           </HomePageCtaCard>
         </template>
       </div>
 
-      <div class="dotted-divider"></div>
+      <HomePageStatistics />
 
       <HomePageQuickStart />
 
       <div class="dotted-divider"></div>
 
+      <HomePageQuickStartCards />
+
+      <div class="dotted-divider"></div>
+
       <HomePageCompanion />
 
       <div class="dotted-divider"></div>
@@ -69,7 +69,14 @@
 
       <div class="dotted-divider"></div>
 
-      <HomePageLicense />
+      <HomePageEngine />
+
+      <div class="dotted-divider"></div>
+
+      <section class="titled-section">
+        <h2 class="section-title">Licensing and Pricing</h2>
+        <HomePageLicense />
+      </section>
     </div>
   </div>
 </template>
@@ -80,16 +87,22 @@ import HomePageHero from "./HomePageHero.vue";
 import HomePageCtaCard from "./HomePageCtaCard.vue";
 import HomePageCtaBuildVisual from "./HomePageCtaBuildVisual.vue";
 import HomePageCtaDeckVisual from "./HomePageCtaDeckVisual.vue";
-import HomePageCtaTutorialVisual from "./HomePageCtaTutorialVisual.vue";
-import HomePageCtaFeaturesVisual from "./HomePageCtaFeaturesVisual.vue";
+import HomePageStatistics from "./HomePageStatistics.vue";
 import HomePageQuickStart from "./HomePageQuickStart.vue";
+import HomePageQuickStartCards from "./HomePageQuickStartCards.vue";
 import HomePageCompanion from "./HomePageCompanion.vue";
 import HomePageTrust from "./HomePageTrust.vue";
+import HomePageEngine from "./HomePageEngine.vue";
 import HomePageLicense from "./HomePageLicense.vue";
+import { ref } from "vue";
+import { useDotWings } from "../dotWings";
 
 /* flip once the video tutorial and the sample gallery are live; the footer's "Sample gallery" link goes with it */
 const plannedCardsReady = false;
 
+const root = ref<HTMLElement>();
+useDotWings(root, { animated: true });
+
 </script>
 
 <style scoped>
@@ -97,20 +110,51 @@ const plannedCardsReady = false;
 .home-page {
   --panel-padding: clamp(32px, 12.7px + 2.76vw, 48px) clamp(24px, 4.14vw - 4.95px, 48px);
   --vp-c-text-2: light-dark(#56565C, #B3B3B9);
+  --hero-title-size: clamp(2.5rem, 1.75rem + 3.2vw, 4.5rem);
+  --dots-clear: calc(12.5 * var(--hero-title-size) + 96px); /* the one-line hero title is 12.5em wide */
+}
+
+/* below this the wings beside the hero title would be under 150px wide */
+@media screen and (max-width: 1239px) {
+  .home-page > :deep(.dot-wing) {
+    display: none;
+  }
 }
 
 .sections {
   display: flex;
   flex-direction: column;
-  gap: 32px;
+  gap: var(--section-gap);
   padding-top: 0;
-  padding-bottom: 48px;
+  padding-bottom: var(--section-gap);
+}
+
+/* the column's gap is the only space around a divider */
+.sections .dotted-divider {
+  margin: 0;
+}
+
+.titled-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--section-gap);
+}
+
+.section-title {
+  margin: 0;
+  font-size: 2rem;
+  line-height: 2.5rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  text-align: center;
+  color: var(--vp-c-text-1);
 }
 
 .cta-row {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 32px;
+  grid-template-columns: repeat(2, minmax(0, 628px));
+  justify-content: center;
+  gap: var(--section-gap);
 }
 
 @media screen and (max-width: 1180px) {
diff --git a/docs/.vitepress/theme/homepage/HomePageApiOrbit.vue b/docs/.vitepress/theme/homepage/HomePageApiOrbit.vue
new file mode 100644
index 0000000..355c900
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/HomePageApiOrbit.vue
@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from "vue";
+import { featureCategories } from "../features";
+import { observeOnScreen, reducedMotion } from "./ctaTimeline";
+
+const featureCount = featureCategories.reduce((count, category) => count + category.features.length, 0);
+
+/* Tilted orbits around a sun half-sunk in the card's bottom edge. Each orbit turns at its own, very slow pace
+   (seconds per turn); its planets sit at uneven but fixed gaps. */
+const squash = 0.55;
+const orbits = [
+  { radius: 130, planets: 6, period: 240 },
+  { radius: 220, planets: 9, period: 360 },
+  { radius: 310, planets: 11, period: 480 },
+  { radius: 400, planets: 14, period: 600 }
+];
+
+const noise = (seed: number) => {
+  const x = Math.sin(seed * 12.9898) * 43758.5453;
+  return x - Math.floor(x);
+};
+
+const planets = orbits.flatMap((orbit, o) => Array.from({ length: orbit.planets }, (_, i) => ({
+  orbit,
+  start: o * 29 + (i + (noise(o * 7 + i + 5) - 0.5) * 0.7) * 360 / orbit.planets
+})));
+
+const card = ref<HTMLElement>();
+const text = ref<HTMLElement>();
+const dots: HTMLElement[] = [];
+const fade = ref<number>();
+
+let frame = 0;
+let elapsed = 0;
+let last = 0;
+let visibility: IntersectionObserver | undefined;
+let resize: ResizeObserver | undefined;
+
+function place(seconds: number) {
+  planets.forEach((planet, index) => {
+    const angle = (planet.start + seconds / planet.orbit.period * 360) * Math.PI / 180;
+    const x = planet.orbit.radius * Math.cos(angle);
+    const y = planet.orbit.radius * squash * Math.sin(angle);
+    dots[index].style.transform = `translate(${x.toFixed(1)}px, ${y.toFixed(1)}px)`;
+  });
+}
+
+function tick(now: number) {
+  if (last) elapsed += Math.min(now - last, 100) / 1000;
+  last = now;
+  place(elapsed);
+  frame = requestAnimationFrame(tick);
+}
+
+function stop() {
+  cancelAnimationFrame(frame);
+  frame = 0;
+  last = 0;
+}
+
+onMounted(() => {
+  place(0);
+
+  resize = new ResizeObserver(() => fade.value = text.value!.offsetTop + text.value!.offsetHeight);
+  resize.observe(card.value!);
+
+  if (reducedMotion()) return;
+
+  /* moves only while the card is mostly on screen */
+  visibility = observeOnScreen(card.value!, onScreen => {
+    if (!onScreen) stop();
+    else if (!frame) frame = requestAnimationFrame(tick);
+  });
+});
+
+onBeforeUnmount(() => {
+  visibility?.disconnect();
+  resize?.disconnect();
+  stop();
+});
+</script>
+
+<template>
+  <article ref="card" class="panel api-orbit-card" :style="fade ? { '--fade': `${fade}px` } : undefined">
+    <div ref="text" class="orbit-text">
+      <h2 class="card-title">{{ featureCount }}+ document features</h2>
+      <p class="card-description">Precise typography, flexible layouts, rich visual content and fine control over every page. Everything you need to build professional documents.</p>
+      <a class="action primary" href="/features-overview.html">Explore features</a>
+    </div>
+
+    <div class="sky" aria-hidden="true">
+      <span class="glow"></span>
+
+      <svg class="orbits" width="1" height="1" viewBox="0 0 1 1">
+        <ellipse v-for="orbit of orbits" :key="orbit.radius" cx="0" cy="0" :rx="orbit.radius" :ry="orbit.radius * squash" />
+      </svg>
+
+      <span v-for="(planet, index) of planets" :key="index" :ref="el => dots[index] = el as HTMLElement" class="planet"></span>
+    </div>
+
+    <span class="sun" aria-hidden="true"></span>
+  </article>
+</template>
+
+<style scoped>
+
+.api-orbit-card {
+  /* the light theme's planets are paler, so they are larger */
+  --planet-size: 11px;
+  --wash: light-dark(color-mix(in srgb, #64B5F6 9%, transparent), color-mix(in srgb, #2196F3 9%, transparent));
+  --ring: light-dark(color-mix(in srgb, #64B5F6 55%, transparent), color-mix(in srgb, #64B5F6 38%, transparent));
+  --rim: light-dark(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.22));
+  --edge: light-dark(rgba(16, 24, 40, 0.08), rgba(255, 255, 255, 0.14));
+  --shadow-near: light-dark(rgba(16, 24, 40, 0.04), transparent);
+  --planet: light-dark(#8FC6F4, #64B5F6);
+  --sun-far: light-dark(rgba(25, 118, 210, 0.35), rgba(0, 0, 0, 0.55));
+  --sun-light: light-dark(#A8D5F8, #6DB5F4);
+  --sun: light-dark(#74B6F0, #3690E6);
+  --sun-deep: light-dark(#5CA5E8, #2374C8);
+
+  min-width: 0;
+  min-height: 400px;
+  overflow: clip;
+}
+
+html.dark .api-orbit-card {
+  --planet-size: 8px;
+}
+
+.orbit-text {
+  position: relative;
+  z-index: 1;
+}
+
+.card-description {
+  text-wrap: pretty;
+}
+
+.orbit-text .action {
+  margin-top: 24px;
+}
+
+/* the orbit layer fills the card and fades out above the text's bottom edge */
+.sky {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  mask-image: linear-gradient(to bottom, transparent calc(var(--fade, 220px) - 8px), #000 calc(var(--fade, 220px) + 72px));
+}
+
+/* a faint wash rising from the bottom edge */
+.glow {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to top, var(--wash), transparent 55%);
+}
+
+.orbits {
+  position: absolute;
+  left: 50%;
+  top: 100%;
+  overflow: visible;
+}
+
+.orbits ellipse {
+  fill: none;
+  stroke: var(--ring);
+  stroke-width: 2;
+  stroke-dasharray: 0 7;
+  stroke-linecap: round;
+}
+
+.planet {
+  position: absolute;
+  left: 50%;
+  top: 100%;
+  width: var(--planet-size);
+  height: var(--planet-size);
+  margin: calc(var(--planet-size) / -2) 0 0 calc(var(--planet-size) / -2);
+  border-radius: 50%;
+  background-color: var(--planet);
+}
+
+.sun {
+  position: absolute;
+  left: 50%;
+  top: 100%;
+  width: 72px;
+  height: 72px;
+  translate: -50% -50%;
+  border-radius: 50%;
+  background: radial-gradient(circle at 35% 30%, var(--sun-light), var(--sun) 58%, var(--sun-deep));
+  box-shadow:
+      inset 0 1px 0 var(--rim),
+      0 0 0 1px var(--edge),
+      0 2px 4px var(--shadow-near),
+      0 24px 56px -16px var(--sun-far);
+}
+
+</style>
diff --git a/docs/.vitepress/theme/homepage/HomePageCompanion.vue b/docs/.vitepress/theme/homepage/HomePageCompanion.vue
index 697aabe..234237c 100644
--- a/docs/.vitepress/theme/homepage/HomePageCompanion.vue
+++ b/docs/.vitepress/theme/homepage/HomePageCompanion.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="panel companion">
     <div class="companion-text">
-      <h2 class="card-title">Preview, inspect and debug</h2>
-      <p class="card-description">Add one line of code and your document opens beside your IDE. With hot-reload, every change appears in the preview at once: no recompiling, no reopening PDFs.</p>
+      <h2 class="card-title">Companion App</h2>
+      <p class="card-description">Make a change, see the result. Hot-&#8288;reload keeps the preview in sync, so every tweak is quick and effortless.</p>
 
       <ul class="points" aria-label="What the Companion App does">
         <li v-for="point of points" :key="point.text">
@@ -41,26 +41,25 @@
       </div>
     </div>
 
-    <div class="companion-media">
-      <img src="/companion/application-light.webp" alt="QuestPDF Companion App" class="light" width="1917" height="1328" loading="lazy" />
-      <img src="/companion/application-dark.webp" alt="QuestPDF Companion App" class="dark" width="1917" height="1328" loading="lazy" />
-    </div>
+    <HomePageCompanionScreens class="companion-media" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { faBug, faChevronDown, faCode, faFolderTree, faRulerCombined } from "@fortawesome/pro-regular-svg-icons";
+import { faArrowPointer, faBug, faChevronDown, faCode, faFolderTree, faRulerCombined } from "@fortawesome/pro-regular-svg-icons";
 import { faApple, faLinux, faWindows } from "@fortawesome/free-brands-svg-icons";
 import Icon from "../Icon.vue";
+import HomePageCompanionScreens from "./HomePageCompanionScreens.vue";
 
 import { nextTick, onBeforeUnmount, onMounted, ref } from "vue";
 
 /* facts from docs/companion/features.md */
 const points = [
-  { icon: faFolderTree, text: "Explore and navigate the document structure" },
-  { icon: faRulerCombined, text: "Magnify details and measure distances" },
-  { icon: faCode, text: "Jump from the preview to the matching code" },
-  { icon: faBug, text: "Debug exceptions and layout issues" }
+  { icon: faFolderTree, text: "Explore the document structure" },
+  { icon: faArrowPointer, text: "Inspect any element" },
+  { icon: faRulerCombined, text: "Magnify and measure details" },
+  { icon: faCode, text: "Jump from preview to code" },
+  { icon: faBug, text: "Debug exceptions and layouts" }
 ];
 
 /* the latest release; keep in sync with docs/companion/download.md and public/companion/latest-version */
@@ -131,7 +130,7 @@ onBeforeUnmount(() => {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 480px;
   grid-template-areas: "media text";
-  gap: 48px;
+  gap: 64px;
   align-items: center;
 }
 
@@ -140,27 +139,12 @@ onBeforeUnmount(() => {
   container-type: inline-size;
 }
 
-.companion-media {
-  grid-area: media;
-  aspect-ratio: 1.62;
-  overflow: hidden;
-  border-radius: 14px;
-  background-color: var(--vp-c-bg);
-  box-shadow:
-      0 0 0 1px light-dark(color-mix(in srgb, var(--vp-c-text-1) 10%, transparent), rgba(255, 255, 255, 0.08)),
-      0 16px 40px -16px light-dark(rgba(16, 24, 40, 0.22), rgba(0, 0, 0, 0.6));
+.companion .card-description {
+  text-wrap: pretty;
 }
 
-.companion-media img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: left top;
-}
-
-html:not(.dark) .companion-media .dark,
-html.dark .companion-media .light {
-  display: none;
+.companion-media {
+  grid-area: media;
 }
 
 
diff --git a/docs/.vitepress/theme/homepage/HomePageCompanionScreens.vue b/docs/.vitepress/theme/homepage/HomePageCompanionScreens.vue
new file mode 100644
index 0000000..a6a689f
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/HomePageCompanionScreens.vue
@@ -0,0 +1,110 @@
+<template>
+  <div ref="root" class="companion-screens">
+    <div class="frame">
+      <div
+        v-for="(screen, index) of screens"
+        :key="screen.name"
+        class="screen"
+        :class="{ current: index === current }"
+        :aria-hidden="index !== current">
+        <img :src="`/companion/${screen.name}-light.webp`" :alt="screen.alt" class="light" width="1917" height="1328" loading="lazy" />
+        <img :src="`/companion/${screen.name}-dark.webp`" :alt="screen.alt" class="dark" width="1917" height="1328" loading="lazy" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from "vue";
+import { observeOnScreen, reducedMotion } from "./ctaTimeline";
+
+/* the order of docs/companion/features.md; all share the 1917×1328 frame, so the window chrome stays put between slides */
+const screens = [
+  { name: "application", alt: "QuestPDF Companion App" },
+  { name: "selection", alt: "Inspecting a selected element" },
+  { name: "search", alt: "Searching the document structure" },
+  { name: "magnifier", alt: "Magnifying the preview" },
+  { name: "measurement-point", alt: "Measuring a position" },
+  { name: "measurement-vertical", alt: "Measuring along the vertical axis" },
+  { name: "measurement-horizontal", alt: "Measuring along the horizontal axis" }
+];
+
+const holdMs = 3000;
+
+const current = ref(0);
+const root = ref<HTMLElement>();
+
+let timer: number | undefined;
+let visible = false;
+let observer: IntersectionObserver | undefined;
+
+function schedule() {
+  window.clearTimeout(timer);
+  timer = undefined;
+
+  if (!visible || document.hidden || reducedMotion())
+    return;
+
+  timer = window.setTimeout(() => {
+    current.value = (current.value + 1) % screens.length;
+    schedule();
+  }, holdMs);
+}
+
+onMounted(() => {
+  observer = observeOnScreen(root.value!, onScreen => {
+    visible = onScreen;
+    schedule();
+  });
+  document.addEventListener("visibilitychange", schedule);
+});
+
+onBeforeUnmount(() => {
+  observer?.disconnect();
+  document.removeEventListener("visibilitychange", schedule);
+  window.clearTimeout(timer);
+});
+</script>
+
+<style scoped>
+
+.frame {
+  position: relative;
+  aspect-ratio: 1.62;
+  overflow: hidden;
+  border-radius: 14px;
+  background-color: var(--vp-c-bg);
+  box-shadow:
+      0 0 0 1px light-dark(color-mix(in srgb, var(--vp-c-text-1) 10%, transparent), rgba(255, 255, 255, 0.08)),
+      0 16px 40px -16px light-dark(rgba(16, 24, 40, 0.22), rgba(0, 0, 0, 0.6));
+}
+
+.screen {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+}
+
+.screen.current {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .screen {
+    transition: opacity 0.6s ease;
+  }
+}
+
+.screen img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: left top;
+}
+
+html:not(.dark) .screen .dark,
+html.dark .screen .light {
+  display: none;
+}
+
+</style>
diff --git a/docs/.vitepress/theme/homepage/HomePageCtaBuildVisual.vue b/docs/.vitepress/theme/homepage/HomePageCtaBuildVisual.vue
index c98b8b1..7e0cf90 100644
--- a/docs/.vitepress/theme/homepage/HomePageCtaBuildVisual.vue
+++ b/docs/.vitepress/theme/homepage/HomePageCtaBuildVisual.vue
@@ -171,7 +171,9 @@ onBeforeUnmount(() => timeline.cancel());
 .build {
   --tilt-y: 26deg;
   --tilt-z: -2deg;
+  --scale: 0.62;
   --lift: 56px; /* how far in front of the page a section starts */
+  min-height: 148px;
 }
 
 
@@ -184,19 +186,19 @@ onBeforeUnmount(() => timeline.cancel());
 .play-button {
   position: absolute;
   z-index: 10;
-  left: calc(50% - 22px);
-  top: calc(50% - 22px);
+  left: calc(50% - 18px);
+  top: calc(50% - 18px);
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 44px;
-  height: 44px;
+  width: 36px;
+  height: 36px;
   border-radius: 50%;
 
   background-color: var(--accent-secondary);
   color: #FFF;
   box-shadow:
-      0 0 0 5px color-mix(in srgb, var(--accent-secondary) 22%, transparent),
+      0 0 0 4px color-mix(in srgb, var(--accent-secondary) 22%, transparent),
       0 8px 20px -4px color-mix(in srgb, var(--accent-secondary) 60%, transparent);
   transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
 }
diff --git a/docs/.vitepress/theme/homepage/HomePageCtaCard.vue b/docs/.vitepress/theme/homepage/HomePageCtaCard.vue
index 769e6fc..06c3c43 100644
--- a/docs/.vitepress/theme/homepage/HomePageCtaCard.vue
+++ b/docs/.vitepress/theme/homepage/HomePageCtaCard.vue
@@ -2,6 +2,7 @@
 import { faArrowRight } from "@fortawesome/pro-solid-svg-icons";
 import Icon from "../Icon.vue";
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { observeOnScreen } from "./ctaTimeline";
 
 /* `active` while hovered or keyboard-focused (a click's focus does not count: the click navigates anyway);
    `visible` while mostly on screen, tracked on devices without hover only. The visual slot gets both. */
@@ -9,11 +10,9 @@ import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 withDefaults(defineProps<{
   title: string;
   description: string;
-
-  label: string;
   href: string;
 
-  /* the glow behind the visual (dark theme) and the colour of the link row */
+  /* the glow behind the visual (dark theme) and the colour of the arrow */
   accent?: string;
   accentSecondary?: string;
 }>(), {
@@ -37,8 +36,7 @@ onMounted(() => {
   if (window.matchMedia("(hover: hover)").matches)
     return;
 
-  observer = new IntersectionObserver(([entry]) => visible.value = entry.isIntersecting, { threshold: 0.6 });
-  observer.observe(card.value!);
+  observer = observeOnScreen(card.value!, onScreen => visible.value = onScreen);
 });
 
 onBeforeUnmount(() => observer?.disconnect());
@@ -63,13 +61,9 @@ onBeforeUnmount(() => observer?.disconnect());
     </div>
 
     <div class="cta-text">
-      <h2 class="card-title">{{ title }}</h2>
+      <!-- the word joiner keeps the arrow on the last word's line -->
+      <h2 class="card-title">{{ title }} &#8288;<Icon class="arrow-icon" :icon="faArrowRight" /></h2>
       <p class="card-description">{{ description }}</p>
-
-      <span class="cta-link">
-        {{ label }}
-        <Icon class="arrow-icon" :icon="faArrowRight" />
-      </span>
     </div>
   </a>
 </template>
@@ -81,11 +75,11 @@ onBeforeUnmount(() => observer?.disconnect());
   overflow: hidden;
 
   display: grid;
-  grid-template-columns: 184px minmax(0, 1fr);
-  column-gap: 24px;
+  grid-template-columns: 160px minmax(0, 30rem);
+  justify-content: center;
+  column-gap: 32px;
   align-items: center;
-  min-height: 256px;
-  padding: 32px 48px 32px 32px;
+  padding: 28px 48px 28px 32px;
 
   transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
 }
@@ -98,7 +92,7 @@ onBeforeUnmount(() => observer?.disconnect());
 
 html.dark .cta-card.active {
   box-shadow: var(--elevation-hover), var(--accent-halo);
-  background-color: rgba(255, 255, 255, 0.07);
+  background-color: rgba(255, 255, 255, 0.045);
 }
 
 .cta-card:focus-visible {
@@ -178,9 +172,6 @@ html.dark .cta-card {
 
 
 .cta-text {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
   min-width: 0;
 }
 
@@ -188,22 +179,11 @@ html.dark .cta-card {
   text-wrap: pretty;
 }
 
-.cta-link {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  white-space: nowrap;
-  margin-top: 20px;
-
-  font-size: 1rem;
-  line-height: 1.5rem;
-  font-weight: 600;
-  color: var(--accent-text);
-  align-self: flex-end;
-}
-
 .arrow-icon {
-  font-size: 1rem;
+  margin-left: 0.35em;
+  font-size: 1.125rem;
+  vertical-align: -0.05em;
+  color: var(--accent-text);
   transition: transform 0.25s ease;
 }
 
@@ -244,9 +224,10 @@ html.dark .background-gradient {
 }
 
 
-@media screen and (max-width: 1280px) and (min-width: 1181px) {
+@media screen and (min-width: 1181px) {
   .cta-card {
-    grid-template-columns: 168px minmax(0, 1fr);
+    grid-template-columns: 148px minmax(0, 1fr);
+    column-gap: 40px;
     padding: 28px;
   }
 }
@@ -257,13 +238,19 @@ html.dark .background-gradient {
 @media screen and (max-width: 700px) {
   .cta-card {
     grid-template-columns: minmax(0, 1fr);
+    justify-items: center;
     row-gap: 20px;
-    min-height: 0;
-    padding: 24px;
+    padding: 24px 24px 32px;
   }
 
   .visual {
     align-self: auto;
+    justify-self: stretch;
+  }
+
+  .cta-text {
+    max-width: 22rem;
+    text-align: center;
   }
 
   .cta-text .card-title {
@@ -271,6 +258,10 @@ html.dark .background-gradient {
     line-height: 1.625rem;
   }
 
+  .cta-text .card-description {
+    text-wrap: balance;
+  }
+
   .background-gradient {
     background-image: radial-gradient(ellipse 80% 70% at 50% 0%, var(--glow-outer), transparent);
   }
diff --git a/docs/.vitepress/theme/homepage/HomePageCtaDeckVisual.vue b/docs/.vitepress/theme/homepage/HomePageCtaDeckVisual.vue
index 2dff789..3828a8d 100644
--- a/docs/.vitepress/theme/homepage/HomePageCtaDeckVisual.vue
+++ b/docs/.vitepress/theme/homepage/HomePageCtaDeckVisual.vue
@@ -299,12 +299,13 @@ onBeforeUnmount(() => timeline.cancel());
 .deck {
   --tilt-y: -26deg;
   --tilt-z: 2deg;
-  --scale: 0.68;
-  --shift: -12px;
+  --scale: 0.58;
+  --shift: -10px;
   --dx: 4px;
   --dy: -4px;
   --dz: 14px;
   --ink-strong: #5A6472;
+  min-height: 148px;
 }
 
 .stage {
@@ -424,6 +425,7 @@ onBeforeUnmount(() => timeline.cancel());
   --tilt-x: 6deg;
   --tilt-y: -16deg;
   --tilt-z: 1deg;
+  --shift: -1px; /* the fanned pile reaches further right, so the whole pile stays centred */
   --rise: -4px;
   --dx: 7px;
   --dy: -6px;
diff --git a/docs/.vitepress/theme/homepage/HomePageCtaFeaturesVisual.vue b/docs/.vitepress/theme/homepage/HomePageCtaFeaturesVisual.vue
index 9303ff2..0356382 100644
--- a/docs/.vitepress/theme/homepage/HomePageCtaFeaturesVisual.vue
+++ b/docs/.vitepress/theme/homepage/HomePageCtaFeaturesVisual.vue
@@ -1,105 +1,269 @@
 <script setup lang="ts">
-import { faChartMixed, faImage, faQrcode, faTable, faText } from "@fortawesome/pro-regular-svg-icons";
+import {
+  faBezierCurve, faChartMixed, faImage, faLayerGroup, faList, faNewspaper, faQrcode, faTable, faText
+} from "@fortawesome/pro-regular-svg-icons";
 import Icon from "../Icon.vue";
-import { computed } from "vue";
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { reducedMotion, Timeline } from "./ctaTimeline";
 
-/* The features-overview card's visual, standing in for HomePageCtaDeckVisual.vue until the sample gallery ships:
-   a page in 3D with a tile beside it for each kind of content on it, joined to that content by a leader line. On
-   hover (or in view on a device without hover) the tiles lift and take the accent one after another in reading
-   order, each leader draws across and the content it names lights up inside an outline; the tiles float while the
-   pointer stays. The poses are CSS transitions, so a change of state is never cut short. Reduced motion: the tiles
-   stay down, only the colours change. */
+/* The features-overview card's visual: a paper page, the mirror of the invoice beside it, with one slot that shows
+   nine kinds of content from the Features Overview in turn, each entering its own way; the chip on the corner flips
+   to the kind's icon. It steps while hovered and for a few steps when the card comes into view on a device without
+   hover; leaving stops on the current kind and the next visit carries on from there. Reduced motion: no steps. */
 
 const props = defineProps<{ active: boolean; visible: boolean }>();
 const lit = computed(() => props.active || props.visible);
+const root = ref<HTMLElement>();
+
+/* Charts first, so the first view does not repeat the invoice's table */
+const kinds = [
+  { name: "charts", icon: faChartMixed },
+  { name: "tables", icon: faTable },
+  { name: "text", icon: faText },
+  { name: "images", icon: faImage },
+  { name: "lists", icon: faList },
+  { name: "columns", icon: faNewspaper },
+  { name: "layers", icon: faLayerGroup },
+  { name: "codes", icon: faQrcode },
+  { name: "vector", icon: faBezierCurve }
+];
 
-/* a shape on the page, in page coordinates (148 x 200): a placeholder bar, a photo (block) or a QR code (qr);
-   `region` names the tile it belongs to, so it takes the accent with it */
-interface Box {
-  x: number;
-  y: number;
-  w: number;
-  h: number;
-}
+const FIRST = 300;
+const HOLD = 1350;
+const STEPS_IN_VIEW = 6;
 
-interface Shape extends Box {
-  kind?: "block" | "qr";
-  tone?: "strong" | "soft" | "accent";
-  region?: number;
-}
+const step = ref(0);
+const previous = ref(-1);
+const timeline = new Timeline();
+
+let token = 0;
+let running = false;
+
+/* the waits run on the document timeline (see ctaTimeline.ts); a cancelled wait ends the run */
+async function play() {
+  const mine = ++token;
+  running = true;
 
-function box(item: Box) {
-  return { left: `${item.x}px`, top: `${item.y}px`, width: `${item.w}px`, height: `${item.h}px` };
+  let remaining = STEPS_IN_VIEW;
+  let delay = FIRST;
+
+  while (await Timeline.settled([timeline.wait(root.value!, delay)]) && mine === token) {
+    if (!props.active && !(props.visible && remaining > 0)) {
+      running = false;
+      return;
+    }
+
+    previous.value = step.value;
+    step.value = (step.value + 1) % kinds.length;
+    remaining--;
+    delay = HOLD;
+  }
 }
 
-const chartHeights = [18, 30, 22, 40, 32];
+watch(lit, isLit => {
+  if (isLit) {
+    if (!running && !reducedMotion())
+      play();
+
+    return;
+  }
+
+  token++;
+  running = false;
+  timeline.cancel();
+});
+
+onBeforeUnmount(() => timeline.cancel());
+
+const kind = (name: string) => {
+  const index = kinds.findIndex(item => item.name === name);
+  return index === step.value ? "current" : index === previous.value ? "leaving" : "waiting";
+};
 
-const shapes: Shape[] = [
-  { x: 10, y: 12, w: 64, h: 8, tone: "strong", region: 0 },
-  { x: 10, y: 24, w: 40, h: 4, tone: "soft" },
-  { x: 108, y: 13, w: 30, h: 4, tone: "soft" },
-  { x: 10, y: 36, w: 128, h: 4 },
-  { x: 10, y: 43, w: 118, h: 4, tone: "soft" },
-  { x: 10, y: 50, w: 96, h: 4 },
+/* the chip: two faces, the hidden one takes the next icon and the chip turns half way */
+const faces = ref([kinds[0].icon, kinds[0].icon]);
+const flips = ref(0);
 
-  ...chartHeights.map((h, index): Shape => ({ x: 10 + index * 12, y: 106 - h, w: 9, h, tone: index === 3 ? "accent" : "strong", region: 1 })),
-  { x: 10, y: 106, w: 58, h: 1.5, tone: "soft" },
-  { kind: "block", x: 80, y: 62, w: 60, h: 44, region: 2 },
+watch(step, now => {
+  faces.value[(flips.value + 1) % 2] = kinds[now].icon;
+  flips.value++;
+});
 
-  { x: 10, y: 118, w: 128, h: 9, tone: "strong", region: 3 },
-  ...[132, 141, 150, 159].flatMap(y => [[12, 36], [60, 20], [90, 16], [116, 20]].map(([x, w], index): Shape => ({ x, y, w, h: 4, tone: index === 1 || index === 2 ? "soft" : undefined }))),
+interface Box {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
 
-  { x: 10, y: 176, w: 70, h: 3.5, tone: "soft" },
-  { x: 10, y: 183, w: 54, h: 3.5, tone: "soft" },
-  { kind: "qr", x: 116, y: 172, w: 22, h: 22, region: 4 }
+const box = (item: Box) => ({ left: `${item.x}px`, top: `${item.y}px`, width: `${item.w}px`, height: `${item.h}px` });
+
+/* charts: bars on a baseline, a trend line through their tops */
+const heights = [20, 32, 26, 42, 34, 48];
+const bars = heights.map((h, i) => ({ x: 2 + i * 14, y: 58 - h, w: 9, h }));
+const points = bars.map(bar => [bar.x + 4.5, bar.y - 7]);
+const trend = points.map(([x, y], i) => `${i ? "L" : "M"}${x} ${y}`).join(" ");
+
+/* tables: a tinted header, four rows with zebra stripes */
+const rows = [13, 25, 37, 49];
+const cells = [{ x: 5, w: 28 }, { x: 42, w: 12, soft: true }, { x: 64, w: 16 }];
+
+/* rich text: word bars, one highlighted, one bold, one underlined */
+const words = [
+  { x: 0, y: 42, w: 18 },
+  { x: 22, y: 42, w: 20, style: "highlight" },
+  { x: 46, y: 42, w: 24 },
+  { x: 74, y: 42, w: 10, soft: true },
+  { x: 0, y: 52, w: 12, style: "bold" },
+  { x: 16, y: 52, w: 30 },
+  { x: 50, y: 52, w: 18, style: "underline" },
+  { x: 72, y: 52, w: 12, soft: true }
 ];
 
-/* the outline around each region, by tile */
-const frames: Box[] = [
-  { x: 7, y: 9, w: 70, h: 14 },
-  { x: 7, y: 59, w: 66, h: 51 },
-  { x: 77, y: 59, w: 66, h: 50 },
-  { x: 7, y: 115, w: 134, h: 51 },
-  { x: 113, y: 169, w: 28, h: 28 }
+/* lists: two levels */
+const items = [
+  { level: 1, y: 3, w: 58 },
+  { level: 1, y: 15.5, w: 44 },
+  { level: 2, y: 28, w: 46 },
+  { level: 2, y: 40.5, w: 36 },
+  { level: 1, y: 53, w: 52 }
 ];
 
-/* the tiles (34 x 34) beside the page in reading order; a leader runs from a tile's near edge to its outline */
-const TILE = 34;
-
-const tiles = [
-  { icon: faText, side: "left", y: 2 },
-  { icon: faChartMixed, side: "left", y: 66 },
-  { icon: faImage, side: "right", y: 66 },
-  { icon: faTable, side: "left", y: 124 },
-  { icon: faQrcode, side: "right", y: 166 }
-].map((tile, index) => {
-  const frame = frames[index];
-  const x = tile.side === "left" ? -42 : 156;
-  const leader = tile.side === "left" ? frame.x - (x + TILE) : x - (frame.x + frame.w);
-  return { ...tile, index, style: { left: `${x}px`, top: `${tile.y}px`, "--n": index, "--leader": `${leader}px` } };
-});
+/* multi-column text: a headline across, then the text flows down the first column and on into the second */
+const columnA = [38, 38, 38, 38, 28, 38, 24].map((w, i) => ({ x: 0, y: 16 + i * 7, w, h: 4 }));
+const columnB = [38, 38, 32, 20].map((w, i) => ({ x: 46, y: 37 + i * 7, w, h: 4 }));
+
+/* barcodes and QR codes: a 4px module grid and a barcode */
+const modules = [
+  [17, 1], [21, 5], [17, 9], [25, 9], [29, 13], [17, 17], [21, 21], [33, 17], [37, 21], [41, 17],
+  [5, 17], [1, 21], [9, 25], [13, 21], [25, 25], [17, 29], [29, 29], [21, 33], [37, 29], [41, 37],
+  [33, 37], [25, 41], [17, 41], [37, 41]
+].map(([x, y]) => ({ x, y, w: 4, h: 4 }));
+const barcode = [2, 3, 2, 4, 2, 3, 2].reduce<Box[]>((list, w) => {
+  const last = list[list.length - 1];
+  return [...list, { x: last ? last.x + last.w + 2 : 52, y: 10, w, h: 34 }];
+}, []);
+
+/* vector graphics: a curve through three anchors, the middle one with its handles */
+const anchors = [[4, 50], [42, 31], [80, 12]];
+const handles = [[34, 5], [50, 57]];
 </script>
 
 <template>
-  <div class="scene features" :class="{ active: lit }">
+  <div ref="root" class="scene features" :class="{ active: lit }">
     <div class="stage">
       <div class="model">
         <div class="shadow" />
 
         <div class="paper page">
-          <span
-              v-for="(shape, index) of shapes"
-              :key="index"
-              class="shape"
-              :class="[shape.kind, shape.tone, { lit: lit && shape.region !== undefined }]"
-              :style="{ ...box(shape), '--n': shape.region }" />
-
-          <span v-for="(frame, index) of frames" :key="index" class="frame" :class="{ lit }" :style="{ ...box(frame), '--n': index }" />
+          <span class="shape strong" :style="box({ x: 10, y: 12, w: 46, h: 7 })" />
+          <span class="shape soft" :style="box({ x: 10, y: 23, w: 70, h: 4 })" />
+          <span class="shape" :style="box({ x: 10, y: 108, w: 84, h: 4 })" />
+          <span class="shape soft" :style="box({ x: 10, y: 116, w: 62, h: 4 })" />
+          <span class="shape soft" :style="box({ x: 10, y: 126, w: 30, h: 3 })" />
+
+          <div class="slot" :class="{ lit }">
+            <!-- Charts -->
+            <div class="variant chart" :class="kind('charts')">
+              <span class="baseline" />
+              <span v-for="(bar, i) of bars" :key="i" class="bar" :style="{ ...box(bar), '--i': i }" />
+              <svg class="drawing" viewBox="0 0 84 62" aria-hidden="true">
+                <path class="trend" :d="trend" pathLength="1" />
+                <circle v-for="([x, y], i) of points" :key="i" class="dot" :cx="x" :cy="y" r="2.4" :style="{ '--i': i }" />
+              </svg>
+            </div>
+
+            <!-- Tables -->
+            <div class="variant table" :class="kind('tables')">
+              <span class="header">
+                <span class="cell" :style="box({ x: 5, y: 3.5, w: 22, h: 4 })" />
+                <span class="cell" :style="box({ x: 42, y: 3.5, w: 14, h: 4 })" />
+                <span class="cell" :style="box({ x: 64, y: 3.5, w: 15, h: 4 })" />
+              </span>
+              <span v-for="(y, r) of rows" :key="r" class="row" :class="{ striped: r % 2 === 1 }" :style="{ top: `${y}px`, '--i': r }">
+                <span v-for="(cell, c) of cells" :key="c" class="cell" :class="{ soft: cell.soft }" :style="box({ x: cell.x, y: 3.5, w: cell.w, h: 4 })" />
+              </span>
+            </div>
+
+            <!-- Rich text -->
+            <div class="variant text" :class="kind('text')">
+              <span class="glyphs">Aa</span>
+              <span class="word strong" :style="{ ...box({ x: 44, y: 6, w: 40, h: 6 }), '--i': 0 }" />
+              <span class="word soft" :style="{ ...box({ x: 44, y: 17, w: 32, h: 4 }), '--i': 1 }" />
+              <span class="word soft" :style="{ ...box({ x: 44, y: 25, w: 36, h: 4 }), '--i': 2 }" />
+              <template v-for="(word, i) of words" :key="i">
+                <span v-if="word.style === 'highlight'" class="marker" :style="{ ...box({ x: word.x - 2, y: word.y - 3, w: word.w + 4, h: 10 }), '--i': i + 3 }" />
+                <span class="word" :class="[word.style, { soft: word.soft }]" :style="{ ...box({ x: word.x, y: word.y, w: word.w, h: word.style === 'bold' ? 5 : 4 }), '--i': i + 3 }" />
+                <span v-if="word.style === 'underline'" class="underline" :style="{ ...box({ x: word.x, y: word.y + 6, w: word.w, h: 1.5 }), '--i': i + 3 }" />
+              </template>
+            </div>
+
+            <!-- Images -->
+            <div class="variant photo" :class="kind('images')">
+              <span class="photo-inner">
+                <span class="sun" />
+                <span class="hills back" />
+                <span class="hills front" />
+              </span>
+            </div>
+
+            <!-- Lists -->
+            <div class="variant list" :class="kind('lists')">
+              <template v-for="(item, i) of items" :key="i">
+                <span class="bullet" :class="`level-${item.level}`" :style="{ ...box({ x: item.level === 1 ? 1 : 13, y: item.y, w: 5, h: 5 }), '--i': i }" />
+                <span class="word" :class="{ soft: item.level === 2 }" :style="{ ...box({ x: item.level === 1 ? 11 : 23, y: item.y + 0.5, w: item.w, h: 4 }), '--i': i }" />
+              </template>
+            </div>
+
+            <!-- Multi-column text -->
+            <div class="variant columns" :class="kind('columns')">
+              <span class="headline" :style="box({ x: 0, y: 0, w: 66, h: 7 })" />
+              <span class="rule" :style="box({ x: 0, y: 11, w: 84, h: 1 })" />
+              <span class="column-rule" :style="box({ x: 41.5, y: 16, w: 1, h: 46 })" />
+              <span v-for="(line, i) of columnA" :key="`a${i}`" class="word" :style="{ ...box(line), '--i': i }" />
+              <span class="figure" :style="box({ x: 46, y: 16, w: 38, h: 17 })" />
+              <span v-for="(line, i) of columnB" :key="`b${i}`" class="word later" :style="{ ...box(line), '--i': i }" />
+            </div>
+
+            <!-- Layers -->
+            <div class="variant layers" :class="kind('layers')">
+              <span class="layer layer-back" />
+              <span class="layer layer-mid">
+                <span class="word strong" :style="box({ x: 6, y: 6, w: 30, h: 5 })" />
+                <span class="word" :style="box({ x: 6, y: 15, w: 42, h: 4 })" />
+                <span class="word soft" :style="box({ x: 6, y: 23, w: 36, h: 4 })" />
+                <span class="word soft" :style="box({ x: 6, y: 31, w: 40, h: 4 })" />
+              </span>
+              <span class="layer layer-top"><span class="stamp-bar" /></span>
+            </div>
+
+            <!-- Barcodes and QR codes -->
+            <div class="variant codes" :class="kind('codes')">
+              <span class="finder" style="left: 0; top: 8px" />
+              <span class="finder" style="left: 33px; top: 8px" />
+              <span class="finder" style="left: 0; top: 41px" />
+              <span v-for="(module, i) of modules" :key="i" class="module" :style="{ ...box({ ...module, y: module.y + 8 }), '--d': module.x + module.y }" />
+              <span v-for="(line, i) of barcode" :key="`b${i}`" class="code-bar" :style="{ ...box(line), '--i': i }" />
+              <span class="shape soft" :style="box({ x: 53, y: 48, w: 26, h: 3.5 })" />
+            </div>
+
+            <!-- Vector graphics -->
+            <div class="variant vector" :class="kind('vector')">
+              <svg class="drawing" viewBox="0 0 84 62" aria-hidden="true">
+                <path class="curve" d="M4 50 C18 4 34 4 42 31 C50 58 66 58 80 12" pathLength="1" />
+                <line class="handle" :x1="handles[0][0]" :y1="handles[0][1]" :x2="handles[1][0]" :y2="handles[1][1]" />
+                <circle v-for="([x, y], i) of handles" :key="`h${i}`" class="control" :cx="x" :cy="y" r="2.8" />
+                <rect v-for="([x, y], i) of anchors" :key="`a${i}`" class="anchor" :x="x - 3.5" :y="y - 3.5" width="7" height="7" rx="1" :style="{ '--i': i }" />
+              </svg>
+            </div>
+          </div>
         </div>
 
-        <div v-for="tile of tiles" :key="tile.index" class="tile" :class="tile.side" :style="tile.style">
-          <span class="leader" />
-          <span class="tile-face" :class="{ lit }"><Icon :icon="tile.icon" /></span>
+        <div class="chip" :class="{ lit }">
+          <div class="chip-spin" :style="{ transform: `rotateY(${flips * 180}deg)` }">
+            <span class="tile face" :class="{ lit }"><Icon :icon="faces[0]" /></span>
+            <span class="tile face back" :class="{ lit }"><Icon :icon="faces[1]" /></span>
+          </div>
         </div>
       </div>
     </div>
@@ -110,206 +274,657 @@ const tiles = [
 
 <style scoped>
 
-/* the pose, the mirror of the invoice beside it, a little flatter as the tiles hang out to the sides */
+/* the pose, the mirror of the invoice beside it; at 0.9 the page is about the invoice's size */
 .features {
+  --scale: 0.9;
   --tilt-y: -20deg;
   --tilt-z: 2deg;
   --ink-strong: #5A6472;
-  /* the lit colour is the card's link colour, so on the dark theme it is the same lifted violet */
-  --lit: light-dark(var(--accent-secondary), var(--accent-text));
+  --on-paper: light-dark(var(--accent-secondary), var(--accent));
+  min-height: 148px;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .features.active {
+    --tilt-x: 4deg;
+    --tilt-y: -12deg;
+    --tilt-z: 1deg;
+    --rise: -4px;
+  }
+}
+
+.model {
+  width: 104px;
+  height: 136px;
+  margin: -68px 0 0 -56px;
 }
 
 .page {
-  overflow: hidden;
   color: var(--ink);
 }
 
 
-/* Shapes */
-.shape {
-  transition: color 0.45s ease, opacity 0.45s ease, background-color 0.45s ease;
+/* the slot: framed in the accent while lit */
+.slot {
+  position: absolute;
+  left: 7px;
+  top: 33px;
+  width: 90px;
+  height: 68px;
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px transparent;
+  transition: box-shadow 0.35s ease, background-color 0.35s ease;
+}
+
+.slot.lit {
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--on-paper) 45%, transparent);
+  background-color: color-mix(in srgb, var(--on-paper) 4%, transparent);
+}
+
+.slot span {
+  position: absolute;
+  display: block;
+}
+
+
+/* a kind shows while current, fades out while leaving and resets unseen while waiting; its parts carry their own
+   entrance, played only on the way in and done within 0.8s */
+.variant {
+  position: absolute;
+  inset: 3px;
+  opacity: 0;
+}
+
+.variant.current {
+  opacity: 1;
+  transition: opacity 0.2s ease;
+}
+
+.variant.leaving {
+  transition: opacity 0.25s ease;
+}
+
+.variant.waiting,
+.variant.waiting * {
+  transition: none !important;
 }
 
-.shape.accent {
-  color: var(--lit);
+.current {
+  --ease: cubic-bezier(0.2, 0.75, 0.2, 1);
+}
+
+.drawing {
+  position: absolute;
+  inset: 0;
+  overflow: visible;
+}
+
+.word {
+  border-radius: 2px;
+  background-color: #A7AEBB;
+  transform-origin: left;
+}
+
+.word.strong,
+.word.bold {
+  background-color: var(--ink-strong);
+}
+
+.word.soft {
   opacity: 0.55;
 }
 
-.shape.block {
-  opacity: 0.32;
-  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 60%);
+
+/* Charts */
+.baseline {
+  left: 0;
+  top: 58px;
+  width: 84px;
+  height: 1px;
+  background-color: var(--ink);
+}
+
+.bar {
+  border-radius: 2px 2px 0 0;
+  background-color: #B9C0CB;
+  transform-origin: bottom;
+}
+
+.trend {
+  fill: none;
+  stroke: var(--on-paper);
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-dasharray: 1;
+  stroke-dashoffset: 0;
+}
+
+.dot {
+  fill: var(--on-paper);
+  stroke: #FFF;
+  stroke-width: 1.2;
+  transform-box: fill-box;
+  transform-origin: center;
 }
 
-/* two checkerboards of different periods make the modules look irregular; the inset ring is the finder pattern */
-.shape.qr {
+.chart.waiting .bar {
+  transform: scaleY(0);
+}
+
+.chart.waiting .trend {
+  stroke-dashoffset: 1;
+}
+
+.chart.waiting .dot {
+  transform: scale(0);
+}
+
+.chart.current .bar {
+  transition: transform 0.45s var(--ease) calc(var(--i) * 45ms + 60ms);
+}
+
+.chart.current .trend {
+  transition: stroke-dashoffset 0.55s ease-in-out 0.2s;
+}
+
+.chart.current .dot {
+  transition: transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1) calc(var(--i) * 55ms + 0.2s);
+}
+
+
+/* Tables */
+.table .header {
+  left: 0;
+  top: 0;
+  width: 84px;
+  height: 11px;
+  border-radius: 2px;
+  background-color: color-mix(in srgb, var(--on-paper) 14%, transparent);
+}
+
+.table .header .cell {
+  background-color: var(--on-paper);
+  opacity: 0.8;
+}
+
+.table .row {
+  left: 0;
+  width: 84px;
+  height: 11px;
+  border-radius: 2px;
+}
+
+.table .row.striped {
+  background-color: #EEF1F5;
+}
+
+.table .cell {
+  border-radius: 2px;
+  background-color: #A7AEBB;
+}
+
+.table .cell.soft {
+  opacity: 0.55;
+}
+
+.table.waiting .header {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+.table.waiting .row {
+  opacity: 0;
+  transform: translateX(-8px);
+}
+
+.table.current .header {
+  transition: opacity 0.25s ease 0.06s, transform 0.35s var(--ease) 0.06s;
+}
+
+.table.current .row {
+  transition: opacity 0.25s ease calc(var(--i) * 70ms + 0.12s), transform 0.4s var(--ease) calc(var(--i) * 70ms + 0.12s);
+}
+
+
+/* Rich text: the specimen, then the words write out left to right */
+.glyphs {
+  left: 0;
+  top: -1px;
+  font-size: 32px;
+  line-height: 38px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  color: var(--ink-strong);
+}
+
+.marker {
+  border-radius: 2px;
+  background-color: color-mix(in srgb, var(--on-paper) 24%, transparent);
+  transform-origin: left;
+}
+
+.word.highlight {
+  background-color: var(--on-paper);
   opacity: 0.85;
+}
+
+.underline {
   border-radius: 1px;
-  background-color: transparent;
-  background-image:
-      conic-gradient(currentColor 25%, transparent 0 50%, currentColor 0 75%, transparent 0),
-      conic-gradient(currentColor 25%, transparent 0 50%, currentColor 0 75%, transparent 0);
-  background-size: 4px 4px, 6px 6px;
-  background-position: 0 0, 1px 1px;
-  box-shadow: inset 0 0 0 1.5px currentColor;
+  background-color: var(--on-paper);
+  transform-origin: left;
 }
 
-.shape.lit {
-  color: var(--lit);
-  transition-delay: calc(var(--n) * 140ms + 220ms);
+.text.waiting .glyphs {
+  opacity: 0;
+  transform: scale(0.85);
 }
 
-.shape.lit.accent {
-  opacity: 1;
+.text.waiting :is(.word, .marker, .underline) {
+  transform: scaleX(0);
 }
 
-.shape.lit.block {
-  background-color: color-mix(in srgb, var(--accent) 45%, #C9D0DB);
-  opacity: 0.55;
+.text.current .glyphs {
+  transition: opacity 0.25s ease 0.05s, transform 0.35s var(--ease) 0.05s;
 }
 
-.frame {
-  position: absolute;
+.text.current .word {
+  transition: transform 0.25s ease-out calc(var(--i) * 40ms + 0.1s);
+}
+
+.text.current :is(.marker, .underline) {
+  transition: transform 0.25s ease-out calc(var(--i) * 40ms + 0.22s);
+}
+
+
+/* Images: wiped in from the left while the picture settles */
+.photo {
+  overflow: hidden;
   border-radius: 3px;
-  box-shadow: 0 0 0 1px color-mix(in srgb, var(--lit) 55%, transparent);
-  background-color: color-mix(in srgb, var(--lit) 6%, transparent);
-  opacity: 0;
-  transition: opacity 0.35s ease;
+  clip-path: inset(0 0 0 0 round 3px);
 }
 
-.frame.lit {
-  opacity: 1;
-  transition-delay: calc(var(--n) * 140ms + 220ms);
+.photo-inner {
+  inset: 0;
+  background-image: linear-gradient(170deg, #E1E7F1, #C7D0DE);
 }
 
+.sun {
+  left: 56px;
+  top: 9px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: #FFF;
+}
 
-/* Tiles: --lift is the height above the page; the face carries the look and, while hovered, the float */
-.tile {
-  --lift: 6px;
-  position: absolute;
-  width: 34px;
-  height: 34px;
-  transform: translateZ(var(--lift));
-  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) calc((4 - var(--n)) * 50ms);
+.hills {
+  inset: 0;
 }
 
-.features.active .tile {
-  --lift: 30px;
-  transition-delay: calc(var(--n) * 140ms);
+.hills.back {
+  top: 20px;
+  background-color: #C0C7D3;
+  clip-path: polygon(0 100%, 0 55%, 18% 30%, 40% 60%, 62% 18%, 84% 48%, 100% 34%, 100% 100%);
 }
 
-.tile-face {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  border-radius: 9px;
-  background-image: linear-gradient(180deg, #FFFFFF, #F5F6FA);
-  color: var(--ink-strong);
-  box-shadow:
-      inset 0 1px 0 rgba(255, 255, 255, 0.9),
-      0 0 0 1px rgba(16, 24, 40, 0.1),
-      0 2px 4px rgba(16, 24, 40, 0.1);
-  transform: scale(0.94);
-  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.55s ease, color 0.4s ease;
+.hills.front {
+  top: 30px;
+  background-color: #9AA3B2;
+  clip-path: polygon(0 100%, 0 52%, 24% 16%, 46% 58%, 70% 30%, 100% 74%, 100% 100%);
+  transition: background-color 0.4s ease;
 }
 
-.tile-face.lit {
-  color: var(--lit);
-  transform: scale(1);
-  box-shadow:
-      inset 0 1px 0 rgba(255, 255, 255, 0.9),
-      0 0 0 1px color-mix(in srgb, var(--lit) 45%, transparent),
-      0 12px 20px -8px color-mix(in srgb, var(--lit) 55%, rgba(16, 24, 40, 0.35));
-  transition-delay: calc(var(--n) * 140ms);
+.slot.lit .hills.front {
+  background-color: color-mix(in srgb, var(--on-paper) 50%, #9AA3B2);
 }
 
-/* 16px once the scene's scale is applied */
-.tile .icon {
-  font-size: 1.375rem;
+.photo.waiting {
+  clip-path: inset(0 100% 0 0 round 3px);
 }
 
-/* the leader: drawn from the tile's side to the outline, with a dot at the far end */
-.leader {
-  position: absolute;
-  top: 16.5px;
-  width: var(--leader);
-  height: 1px;
-  background-color: var(--lit);
+.photo.waiting .photo-inner {
+  transform: scale(1.18);
+}
+
+.photo.current {
+  transition: opacity 0.2s ease, clip-path 0.6s cubic-bezier(0.6, 0, 0.2, 1) 0.05s;
+}
+
+.photo.current .photo-inner {
+  transition: transform 0.8s var(--ease) 0.05s;
+}
+
+
+/* Lists: each bullet pops, then its line writes out */
+.bullet {
+  border-radius: 50%;
+}
+
+.bullet.level-1 {
+  background-color: var(--on-paper);
+}
+
+.bullet.level-2 {
+  box-shadow: inset 0 0 0 1.5px var(--ink-strong);
+}
+
+.list.waiting .bullet {
+  transform: scale(0);
+}
+
+.list.waiting .word {
   transform: scaleX(0);
-  transition: transform 0.35s ease;
 }
 
-.tile.left .leader {
-  left: 34px;
+.list.current .bullet {
+  transition: transform 0.25s cubic-bezier(0.3, 1.5, 0.5, 1) calc(var(--i) * 80ms + 0.06s);
+}
+
+.list.current .word {
+  transition: transform 0.3s ease-out calc(var(--i) * 80ms + 0.12s);
+}
+
+
+/* Multi-column text: the headline, then the text flows down the first column and on into the second */
+.headline {
+  border-radius: 2px;
+  background-color: var(--ink-strong);
+  transform-origin: left;
+}
+
+.rule,
+.column-rule {
+  background-color: var(--ink);
+  opacity: 0.7;
+}
+
+.rule {
   transform-origin: left;
 }
 
-.tile.right .leader {
-  right: 34px;
-  transform-origin: right;
+.column-rule {
+  opacity: 0.4;
+}
+
+.figure {
+  border-radius: 2px;
+  background-image: linear-gradient(160deg, #DCE2EC, #C2CAD6);
 }
 
-.leader::after {
-  content: "";
+.columns.waiting :is(.headline, .rule, .word) {
+  transform: scaleX(0);
+}
+
+.columns.waiting :is(.figure, .column-rule) {
+  opacity: 0;
+}
+
+.columns.current .headline {
+  transition: transform 0.3s ease-out 0.04s;
+}
+
+.columns.current .rule {
+  transition: transform 0.3s ease-out 0.1s;
+}
+
+.columns.current .column-rule {
+  transition: opacity 0.3s ease 0.14s;
+}
+
+.columns.current .word {
+  transition: transform 0.22s ease-out calc(var(--i) * 35ms + 0.14s);
+}
+
+.columns.current .figure {
+  transition: opacity 0.3s ease 0.38s;
+}
+
+.columns.current .word.later {
+  transition: transform 0.22s ease-out calc(var(--i) * 35ms + 0.42s);
+}
+
+
+/* Layers: a background, the content and a stamp, each arriving from its own side and settling on the last */
+.layer {
   position: absolute;
-  top: -1.5px;
-  width: 4px;
+}
+
+.layer-back {
+  inset: 0;
+  border-radius: 4px;
+  background-color: #E8ECF3;
+  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0 3px, transparent 3px 7px);
+}
+
+.layer-mid {
+  left: 8px;
+  top: 8px;
+  width: 56px;
+  height: 41px;
+  border-radius: 3px;
+  background-color: #FFF;
+  box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.06), 0 3px 6px -2px rgba(16, 24, 40, 0.2);
+}
+
+.layer-top {
+  left: 44px;
+  top: 34px;
+  width: 36px;
+  height: 19px;
+  border-radius: 4px;
+  box-shadow: inset 0 0 0 2px var(--on-paper);
+  background-color: color-mix(in srgb, var(--on-paper) 8%, #FFF);
+  transform: rotate(-10deg);
+}
+
+.stamp-bar {
+  left: 7px;
+  top: 7.5px;
+  width: 22px;
   height: 4px;
-  border-radius: 50%;
-  background-color: var(--lit);
+  border-radius: 2px;
+  background-color: var(--on-paper);
 }
 
-.tile.left .leader::after {
-  right: -2px;
+.layers.waiting .layer-back {
+  opacity: 0;
+  transform: translate(-6px, 6px);
 }
 
-.tile.right .leader::after {
-  left: -2px;
+.layers.waiting .layer-mid {
+  opacity: 0;
+  transform: translate(6px, -6px);
 }
 
-.features.active .leader {
-  transform: scaleX(1);
-  transition-delay: calc(var(--n) * 140ms + 140ms);
+.layers.waiting .layer-top {
+  opacity: 0;
+  transform: rotate(-10deg) scale(1.6);
 }
 
+.layers.current .layer-back {
+  transition: opacity 0.3s ease 0.04s, transform 0.4s var(--ease) 0.04s;
+}
 
-/* Hover */
-@media (prefers-reduced-motion: no-preference) {
-  .features.active {
-    --tilt-x: 4deg;
-    --tilt-y: -12deg;
-    --tilt-z: 1deg;
-    --rise: -4px;
-  }
+.layers.current .layer-mid {
+  transition: opacity 0.3s ease 0.16s, transform 0.4s var(--ease) 0.16s;
+}
 
-  /* `translate`, not transform, so the float and the scale transition never fight */
-  .features.active .tile-face {
-    animation: tile-float 3.4s ease-in-out calc(var(--n) * -0.65s + 1s) infinite;
-  }
+.layers.current .layer-top {
+  transition: opacity 0.2s ease 0.42s, transform 0.32s cubic-bezier(0.3, 1.3, 0.5, 1) 0.42s;
 }
 
-@keyframes tile-float {
-  0%, 100% {
-    translate: 0 0;
-  }
 
-  50% {
-    translate: 0 -2.5px;
-  }
+/* Barcodes and QR codes: finders first, modules in a diagonal wave, then the barcode prints top down */
+.finder {
+  width: 13px;
+  height: 13px;
+  border-radius: 1px;
+  box-shadow: inset 0 0 0 3px var(--ink-strong);
+  background-image: linear-gradient(var(--ink-strong) 0 0);
+  background-size: 5px 5px;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .features.active .tile {
-    --lift: 6px;
-  }
+.module {
+  background-color: var(--ink-strong);
+  opacity: 0.85;
+}
+
+.code-bar {
+  background-color: var(--ink-strong);
+  transform-origin: top;
+}
+
+.codes.waiting .finder {
+  opacity: 0;
+  transform: scale(0.5);
+}
+
+.codes.waiting .module {
+  opacity: 0;
+}
+
+.codes.waiting .code-bar {
+  transform: scaleY(0);
+}
+
+.codes.current .finder {
+  transition: opacity 0.2s ease 0.05s, transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1) 0.05s;
+}
+
+.codes.current .module {
+  transition: opacity 0.2s ease calc(var(--d) * 4ms + 0.15s);
+}
+
+.codes.current .code-bar {
+  transition: transform 0.3s var(--ease) calc(var(--i) * 35ms + 0.26s);
+}
+
+
+/* Vector graphics: the curve draws, its anchors land, then the middle anchor's handles show */
+.curve {
+  fill: none;
+  stroke: var(--ink-strong);
+  stroke-width: 2.5;
+  stroke-linecap: round;
+  stroke-dasharray: 1;
+  stroke-dashoffset: 0;
+}
+
+.handle {
+  stroke: var(--on-paper);
+  stroke-width: 1;
+  opacity: 0.7;
+}
+
+.control {
+  fill: #FFF;
+  stroke: var(--on-paper);
+  stroke-width: 1.5;
+}
+
+.anchor {
+  fill: #FFF;
+  stroke: var(--on-paper);
+  stroke-width: 1.5;
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+.vector.waiting .curve {
+  stroke-dashoffset: 1;
+}
+
+.vector.waiting .anchor {
+  transform: scale(0);
+}
+
+.vector.waiting :is(.handle, .control) {
+  opacity: 0;
+}
+
+.vector.current .curve {
+  transition: stroke-dashoffset 0.55s ease-in-out 0.04s;
+}
 
-  .tile,
-  .tile-face,
-  .leader,
-  .shape,
-  .frame {
-    transition: none;
+.vector.current .anchor {
+  transition: transform 0.25s cubic-bezier(0.3, 1.5, 0.5, 1) calc(var(--i) * 120ms + 0.2s);
+}
+
+.vector.current :is(.handle, .control) {
+  transition: opacity 0.25s ease 0.5s;
+}
+
+
+/* the chip on the page's corner: two faces, turned half a turn per kind */
+.chip {
+  position: absolute;
+  left: 76px;
+  top: -14px;
+  width: 38px;
+  height: 38px;
+  transform: translateZ(16px);
+  transform-style: preserve-3d;
+  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+.chip.lit {
+  transform: translateZ(26px);
+}
+
+.chip-spin {
+  position: absolute;
+  inset: 0;
+  transform-style: preserve-3d;
+  transition: transform 0.55s cubic-bezier(0.35, 0.1, 0.2, 1);
+}
+
+.tile {
+  position: absolute;
+  overflow: hidden;
+  border-radius: 10px;
+  background-image: linear-gradient(180deg, #FFFFFF, #F4F5F9);
+  color: var(--ink-strong);
+  box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.9),
+      0 0 0 1px rgba(16, 24, 40, 0.1),
+      0 2px 4px rgba(16, 24, 40, 0.1);
+  transition: box-shadow 0.45s ease, color 0.35s ease;
+}
+
+.tile.lit {
+  color: var(--on-paper);
+  box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.9),
+      0 0 0 1px color-mix(in srgb, var(--on-paper) 40%, transparent),
+      0 12px 20px -8px color-mix(in srgb, var(--on-paper) 50%, rgba(16, 24, 40, 0.35));
+}
+
+.face {
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backface-visibility: hidden;
+}
+
+.face.back {
+  transform: rotateY(180deg);
+}
+
+.face .icon {
+  font-size: 1.125rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .slot,
+  .slot *,
+  .chip,
+  .chip-spin,
+  .tile {
+    transition: none !important;
   }
 }
 
diff --git a/docs/.vitepress/theme/homepage/HomePageCtaTutorialVisual.vue b/docs/.vitepress/theme/homepage/HomePageCtaTutorialVisual.vue
index 4921dbd..4dd6325 100644
--- a/docs/.vitepress/theme/homepage/HomePageCtaTutorialVisual.vue
+++ b/docs/.vitepress/theme/homepage/HomePageCtaTutorialVisual.vue
@@ -2,173 +2,145 @@
 import { computed, onBeforeUnmount, ref, watch } from "vue";
 import { reducedMotion, Timeline } from "./ctaTimeline";
 
-/* The invoice-tutorial card's visual, standing in for HomePageCtaBuildVisual.vue until the video ships: the same
-   invoice page in 3D, assembled section by section as the tutorial builds it; a section lands in the accent colour
-   and settles to ink. A pass runs on hover (and again after a rest while the pointer stays) and once when the card
-   comes into view on a device without hover; it always finishes. Reduced motion: the finished page, nothing moves. */
+/* The invoice-tutorial card's visual, standing in for HomePageCtaBuildVisual.vue until the video ships: a paper page,
+   the mirror of the features page beside it, shown as its layout (dashed boxes for the containers the tutorial builds)
+   while a thin accent line sweeps down it section by section and leaves the finished invoice behind. It steps while
+   hovered, and when the card comes into view on a device without hover it steps until it is back on the finished
+   invoice; leaving returns to the finished invoice at once, so the next visit starts from the layout. Reduced motion:
+   the finished invoice. */
 
 const props = defineProps<{ active: boolean; visible: boolean }>();
-const playing = computed(() => props.active || props.visible);
+const lit = computed(() => props.active || props.visible);
 const root = ref<HTMLElement>();
 
-/* the sections in page coordinates (148 x 200): where each sits, its delay after the first, and its bars */
-interface Box {
-  x: number;
-  y: number;
-  w: number;
-  h: number;
-}
-
-interface Bar extends Box {
-  tone?: "strong" | "soft" | "accent";
-}
-
-interface Section extends Box {
-  delay: number;
-  bars: Bar[];
-}
+/* where the line stands at each step: the layout, below the header, the addresses and the table, the finished page */
+const STOPS = [0, 33, 64, 109, 136];
+const HOLDS = [400, 550, 550, 650, 1600];
+const FIRST = 200;
+const FINISHED = STOPS.length - 1;
 
-const tableRow: Bar[] = [
-  { x: 4, y: 4, w: 44, h: 4 },
-  { x: 60, y: 4, w: 14, h: 4, tone: "soft" },
-  { x: 82, y: 4, w: 18, h: 4, tone: "soft" },
-  { x: 104, y: 4, w: 18, h: 4 }
-];
-
-const sections: Section[] = [
-  /* the title block; the logo keeps the accent */
-  {
-    x: 10, y: 12, w: 128, h: 30, delay: 0,
-    bars: [
-      { x: 2, y: 4, w: 14, h: 14, tone: "accent" },
-      { x: 22, y: 5, w: 52, h: 8, tone: "strong" },
-      { x: 22, y: 18, w: 34, h: 4, tone: "soft" },
-      { x: 94, y: 5, w: 32, h: 4 },
-      { x: 94, y: 13, w: 26, h: 4, tone: "soft" },
-      { x: 94, y: 21, w: 30, h: 4, tone: "soft" }
-    ]
-  },
-  /* the two parties */
-  {
-    x: 10, y: 50, w: 128, h: 32, delay: 0.17,
-    bars: [
-      { x: 2, y: 4, w: 30, h: 5, tone: "strong" },
-      { x: 2, y: 13, w: 44, h: 3.5, tone: "soft" },
-      { x: 2, y: 19, w: 38, h: 3.5, tone: "soft" },
-      { x: 2, y: 25, w: 42, h: 3.5, tone: "soft" },
-      { x: 70, y: 4, w: 30, h: 5, tone: "strong" },
-      { x: 70, y: 13, w: 46, h: 3.5, tone: "soft" },
-      { x: 70, y: 19, w: 36, h: 3.5, tone: "soft" },
-      { x: 70, y: 25, w: 40, h: 3.5, tone: "soft" }
-    ]
-  },
-  /* the table header and rows */
-  {
-    x: 10, y: 90, w: 128, h: 12, delay: 0.33,
-    bars: [{ x: 0, y: 0, w: 128, h: 12, tone: "strong" }]
-  },
-  { x: 10, y: 104, w: 128, h: 12, delay: 0.45, bars: tableRow },
-  { x: 10, y: 116, w: 128, h: 12, delay: 0.53, bars: tableRow },
-  { x: 10, y: 128, w: 128, h: 12, delay: 0.6, bars: tableRow },
-  { x: 10, y: 140, w: 128, h: 12, delay: 0.68, bars: tableRow },
-  /* the totals */
-  {
-    x: 74, y: 158, w: 64, h: 26, delay: 0.83,
-    bars: [
-      { x: 10, y: 2, w: 24, h: 3.5, tone: "soft" },
-      { x: 42, y: 2, w: 18, h: 3.5, tone: "soft" },
-      { x: 10, y: 9, w: 24, h: 3.5, tone: "soft" },
-      { x: 42, y: 9, w: 18, h: 3.5, tone: "soft" },
-      { x: 4, y: 17, w: 30, h: 6, tone: "strong" },
-      { x: 38, y: 17, w: 22, h: 6, tone: "strong" }
-    ]
-  },
-  /* the footer line */
-  {
-    x: 10, y: 186, w: 60, h: 8, delay: 0.95,
-    bars: [
-      { x: 0, y: 2, w: 40, h: 3.5, tone: "soft" }
-    ]
-  }
-];
+const step = ref(FINISHED);
+const resetting = ref(false);
+const sweep = computed(() => `${STOPS[step.value]}px`);
+const timeline = new Timeline();
 
-function box(item: Box) {
-  return { left: `${item.x}px`, top: `${item.y}px`, width: `${item.w}px`, height: `${item.h}px` };
-}
+let token = 0;
+let running = false;
 
-/* a pass: the content fades out (0.2s), then the sections land one after another (0.7s each, the last starting
-   0.95s in), each in a soft tint of the accent that fades to ink once it is half way down, so only a few are tinted
-   at a time; while hovered, the next pass follows a rest; see ctaTimeline.ts for the waits */
-const FADE = 200;
-const LAND = 700;
-const TINT = 850;
-const TINT_HOLD = 350;
-const TINT_COLOR = "color-mix(in srgb, var(--accent-secondary) 55%, var(--ink))";
-const REST = 2600;
-const LAND_EASING = "cubic-bezier(0.3, 0.6, 0.15, 1)";
+/* the waits run on the document timeline (see ctaTimeline.ts); a cancelled wait ends the run */
+async function play() {
+  const mine = ++token;
+  running = true;
+  resetting.value = false;
 
-const timeline = new Timeline();
-let busy = false;
+  let moved = 0;
+  let delay = FIRST;
 
-async function pass() {
-  busy = true;
+  while (await Timeline.settled([timeline.wait(root.value!, delay)]) && mine === token) {
+    if (!props.active && !(props.visible && (moved === 0 || step.value !== FINISHED))) {
+      running = false;
+      return;
+    }
 
-  const targets = [...root.value!.querySelectorAll(".section")];
+    step.value = (step.value + 1) % STOPS.length;
+    moved++;
+    delay = HOLDS[step.value];
+  }
+}
 
-  const fades = targets.map(section => timeline.animate(section, [{ opacity: 1 }, { opacity: 0 }], { duration: FADE, easing: "ease-out", fill: "both" }));
+watch(lit, isLit => {
+  if (isLit) {
+    if (!running && !reducedMotion())
+      play();
 
-  if (!await Timeline.settled(fades))
     return;
+  }
 
-  const landings = targets.flatMap((section, index) => [
-    timeline.animate(section, [
-      { transform: "translateZ(var(--lift))", opacity: 0, easing: LAND_EASING },
-      { opacity: 1, offset: 0.4, easing: LAND_EASING },
-      { transform: "translateZ(0)", opacity: 1 }
-    ], { duration: LAND, delay: sections[index].delay * 1000, fill: "both" }),
-    timeline.animate(section, [
-      { color: TINT_COLOR },
-      { color: TINT_COLOR, offset: TINT_HOLD / TINT, easing: "ease-out" },
-      { color: "var(--ink)" }
-    ], { duration: TINT, delay: sections[index].delay * 1000, fill: "both" })
-  ]);
-
-  fades.forEach(fade => fade.cancel()); /* each landing holds its section invisible until its turn */
-
-  if (!await Timeline.settled(landings))
-    return;
+  token++;
+  running = false;
+  timeline.cancel();
+
+  resetting.value = step.value !== FINISHED;
+  step.value = FINISHED;
+});
 
-  landings.forEach(landing => landing.cancel()); /* their end state is the page's own */
-  busy = false;
+onBeforeUnmount(() => timeline.cancel());
 
-  if (props.active)
-    rest();
+interface Part {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  tone?: "strong" | "soft" | "accent" | "band" | "logo" | "rule";
 }
 
-async function rest() {
-  const wait = timeline.wait(root.value!, REST);
+const box = (item: Part) => ({ left: `${item.x}px`, top: `${item.y}px`, width: `${item.w}px`, height: `${item.h}px` });
 
-  if (await Timeline.settled([wait]) && props.active && !busy)
-    pass();
-}
+/* the invoice on a 104 x 136 page; the table's number columns are right-aligned like the tutorial's */
+const party = (x: number, label: number, lines: number[]): Part[] => [
+  { x, y: 36, w: label, h: 4, tone: "strong" },
+  { x, y: 42, w: 38, h: 1, tone: "rule" },
+  ...lines.map((w, i) => ({ x, y: 45 + i * 6, w, h: 4, tone: "soft" as const }))
+];
 
-watch(playing, isPlaying => {
-  if (isPlaying && !busy && !reducedMotion())
-    pass();
-});
+const rows = [
+  { y: 81, product: 24, price: 10, total: 11 },
+  { y: 88, product: 18, price: 9, total: 10 },
+  { y: 95, product: 22, price: 10, total: 11 },
+  { y: 102, product: 15, price: 8, total: 9 }
+];
 
-onBeforeUnmount(() => timeline.cancel());
+const parts: Part[] = [
+  { x: 10, y: 9, w: 38, h: 6, tone: "accent" },
+  { x: 10, y: 19, w: 28, h: 4, tone: "soft" },
+  { x: 10, y: 25, w: 25, h: 4, tone: "soft" },
+  { x: 72, y: 9, w: 22, h: 20, tone: "logo" },
+  ...party(10, 12, [34, 28, 31]),
+  ...party(56, 10, [32, 26, 30]),
+  { x: 10, y: 67, w: 84, h: 10, tone: "band" },
+  { x: 13, y: 70, w: 16, h: 4 },
+  { x: 51, y: 70, w: 10, h: 4 },
+  { x: 66, y: 70, w: 8, h: 4 },
+  { x: 81, y: 70, w: 10, h: 4 },
+  ...rows.flatMap(row => [
+    { x: 13, y: row.y, w: row.product, h: 4 },
+    { x: 61 - row.price, y: row.y, w: row.price, h: 4, tone: "soft" as const },
+    { x: 69, y: row.y, w: 5, h: 4, tone: "soft" as const },
+    { x: 91 - row.total, y: row.y, w: row.total, h: 4 }
+  ]),
+  { x: 60, y: 112, w: 18, h: 5 },
+  { x: 80, y: 112, w: 11, h: 5, tone: "strong" },
+  { x: 46, y: 125, w: 12, h: 4, tone: "soft" }
+];
+
+/* the containers, as the tutorial composes them */
+const outlines: Part[] = [
+  { x: 7, y: 6, w: 45, h: 26 },
+  { x: 69, y: 6, w: 28, h: 26 },
+  { x: 7, y: 34, w: 44, h: 29 },
+  { x: 53, y: 34, w: 44, h: 29 },
+  { x: 7, y: 65, w: 90, h: 43 },
+  { x: 56, y: 110, w: 41, h: 10 },
+  { x: 40, y: 122, w: 24, h: 10 }
+];
 </script>
 
 <template>
-  <div ref="root" class="scene tutorial" :class="{ active: playing }">
+  <div ref="root" class="scene tutorial" :class="[{ active: lit, resetting }, `step-${step}`]">
     <div class="stage">
       <div class="model">
         <div class="shadow" />
-        <div class="paper page" />
 
-        <div v-for="(section, index) of sections" :key="index" class="section" :style="box(section)">
-          <span v-for="(bar, barIndex) of section.bars" :key="barIndex" class="shape" :class="bar.tone" :style="box(bar)" />
+        <div class="paper page" :style="{ '--y': sweep }">
+          <div class="layout">
+            <span v-for="(outline, i) of outlines" :key="i" class="outline" :style="box(outline)" />
+          </div>
+
+          <div class="rendered">
+            <span v-for="(part, i) of parts" :key="i" class="part" :class="part.tone" :style="box(part)" />
+          </div>
+
+          <span class="sweep-line" />
         </div>
       </div>
     </div>
@@ -179,32 +151,157 @@ onBeforeUnmount(() => timeline.cancel());
 
 <style scoped>
 
-/* the pose; the rest is shared, see ctaVisual.css */
+/* the pose, the mirror of the features page beside it, at its size */
 .tutorial {
-  --tilt-y: 26deg;
+  --scale: 0.9;
+  --tilt-y: 20deg;
   --tilt-z: -2deg;
-  --lift: 56px; /* how far in front of the page a section starts */
-}
-
-.section {
-  position: absolute;
-  color: var(--ink);
-}
-
-/* set outright, so a section's colour animation leaves it alone */
-.shape.accent {
-  color: var(--accent-secondary);
-  opacity: 1;
+  --ink-strong: #858E9C;
+  --on-paper: light-dark(var(--accent-secondary), var(--accent));
+  --sweep-ease: cubic-bezier(0.45, 0, 0.25, 1);
+  min-height: 148px;
 }
 
-/* Hover */
 @media (prefers-reduced-motion: no-preference) {
   .tutorial.active {
     --tilt-x: 4deg;
-    --tilt-y: 14deg;
+    --tilt-y: 12deg;
     --tilt-z: -1deg;
     --rise: -4px;
   }
 }
 
+.model {
+  width: 104px;
+  height: 136px;
+  margin: -68px 0 0 -52px;
+}
+
+
+/* Invoice */
+.part {
+  position: absolute;
+  border-radius: 2px;
+  background-color: var(--ink);
+}
+
+.part.strong {
+  background-color: var(--ink-strong);
+}
+
+.part.soft {
+  opacity: 0.55;
+}
+
+.part.accent {
+  background-color: var(--on-paper);
+}
+
+.part.rule {
+  border-radius: 0;
+  opacity: 0.7;
+}
+
+.part.band,
+.part.logo {
+  background-color: #EDF0F4;
+}
+
+.part.logo {
+  border-radius: 3px;
+  box-shadow: inset 0 0 0 1px #DCE1E9;
+}
+
+
+/* Sweep: above the line the invoice, below it the layout */
+.layout,
+.rendered {
+  position: absolute;
+  inset: 0;
+  transition: clip-path 0.45s var(--sweep-ease);
+}
+
+.rendered {
+  clip-path: inset(0 0 calc(136px - var(--y)) 0);
+}
+
+.layout {
+  clip-path: inset(var(--y) 0 0 0);
+}
+
+.outline {
+  position: absolute;
+  box-sizing: border-box;
+  border: 1px dashed color-mix(in srgb, var(--ink) 85%, transparent);
+  border-radius: 2px;
+  transition: opacity 0.25s ease 0.1s;
+}
+
+/* the line, with a faint glow on the rendered side */
+.sweep-line {
+  position: absolute;
+  left: -4px;
+  right: -4px;
+  top: -14px;
+  height: 15.5px;
+  pointer-events: none;
+  background-image:
+      linear-gradient(var(--on-paper), var(--on-paper)),
+      linear-gradient(transparent, color-mix(in srgb, var(--on-paper) 14%, transparent));
+  background-size: 100% 1.5px, 100% 14px;
+  background-position: bottom, top;
+  background-repeat: no-repeat;
+  border-radius: 1px;
+  transform: translateY(var(--y));
+  transition: transform 0.45s var(--sweep-ease), opacity 0.3s ease;
+}
+
+/* back to the layout: the invoice fades while the outlines return, then the line goes back to the top unseen */
+.step-0 .rendered {
+  opacity: 0;
+  transition: opacity 0.2s ease, clip-path 0s linear 0.2s;
+}
+
+.step-0 .layout {
+  transition: none;
+}
+
+.step-0 .sweep-line {
+  transition: transform 0s linear 0.2s, opacity 0.2s ease 0.2s;
+}
+
+/* the finished invoice: the line fades once it reaches the bottom, the outlines hide once covered */
+.step-4 .sweep-line {
+  opacity: 0;
+  transition: transform 0.45s var(--sweep-ease), opacity 0.3s ease 0.4s;
+}
+
+.step-4 .outline {
+  opacity: 0;
+  transition: opacity 0s linear 0.45s;
+}
+
+/* leaving mid-round: a quick sweep to the bottom */
+.resetting .layout,
+.resetting .rendered {
+  transition: clip-path 0.35s ease-out;
+}
+
+.tutorial.resetting .sweep-line {
+  transition: transform 0.35s ease-out, opacity 0.2s ease 0.15s;
+}
+
+.tutorial.resetting .outline {
+  transition: opacity 0s linear 0.35s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .layout,
+  .rendered,
+  .outline,
+  .sweep-line {
+    transition: none !important;
+  }
+}
+
 </style>
diff --git a/docs/.vitepress/theme/homepage/HomePageEngine.vue b/docs/.vitepress/theme/homepage/HomePageEngine.vue
new file mode 100644
index 0000000..4d30cde
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/HomePageEngine.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { faCode, faPageBreak, faShieldHalved } from "@fortawesome/pro-regular-svg-icons";
+import Icon from "../Icon.vue";
+import HomePageEngineLanes from "./HomePageEngineLanes.vue";
+import HomePageApiOrbit from "./HomePageApiOrbit.vue";
+
+const notes = [
+  { icon: faCode, text: "No HTML, CSS or JS engines involved in generation" },
+  { icon: faShieldHalved, text: "Significantly smaller resource usage and better security" },
+  { icon: faPageBreak, text: "Layout engine built for documents, not web pages" }
+];
+</script>
+
+<template>
+  <div class="engine">
+    <article class="panel engine-card">
+      <h2 class="card-title">Pure speed, without a web browser</h2>
+
+      <ul class="notes" aria-label="Why no web browser is needed">
+        <li v-for="note of notes" :key="note.text" class="note">
+          <Icon :icon="note.icon" />
+          <span>{{ note.text }}</span>
+        </li>
+      </ul>
+
+      <figure class="card-figure">
+        <HomePageEngineLanes />
+      </figure>
+    </article>
+
+    <HomePageApiOrbit />
+  </div>
+</template>
+
+<style scoped>
+
+.engine {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--section-gap);
+}
+
+@media screen and (max-width: 1180px) {
+  .engine {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+/* the Quick start code card's tint */
+.engine-card {
+  --tint: #0288D1;
+
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+html.dark .engine-card {
+  --tint: #80C8FF;
+}
+
+/* under the copy, held to the card's bottom edge when the orbit card beside it is taller */
+.card-figure {
+  display: flex;
+  align-items: flex-end;
+  margin: auto 0 0;
+  padding-top: 48px; /* the Quick start cards' gap */
+}
+
+.notes {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 20px 0 0;
+}
+
+.note {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 6px 0;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+}
+
+.note .icon {
+  flex-shrink: 0;
+  width: 18px;
+  margin-top: 0.25rem;
+  font-size: 1rem;
+  color: var(--tint);
+}
+
+</style>
diff --git a/docs/.vitepress/theme/homepage/HomePageEngineLanes.vue b/docs/.vitepress/theme/homepage/HomePageEngineLanes.vue
new file mode 100644
index 0000000..53361f3
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/HomePageEngineLanes.vue
@@ -0,0 +1,260 @@
+<script setup lang="ts">
+import { faBolt, faCircleCheck, faCircleXmark, faGlobe } from "@fortawesome/pro-regular-svg-icons";
+import { onBeforeUnmount, onMounted, ref } from "vue";
+import Icon from "../Icon.vue";
+import { move, onScreenShare, reducedMotion, Timeline } from "./ctaTimeline";
+
+/* Two lanes, one bar each: QuestPDF's short run ends in a check; a browser's bar is the three layers it has to
+   interpret, together several times longer. Widths are % of the track, a schematic rather than a measurement. */
+const done = 15;
+const strips = [
+  { label: "HTML", width: 30 },
+  { label: "CSS", width: 24 },
+  { label: "JS", width: 30 }
+];
+
+/* Builds each time the figure comes mostly on screen: ruler, tiles, QuestPDF's run and check, the marker, then the
+   browser's strips at the same speed until the cross. Times in ms. */
+const timing = { ruler: 700, tileStagger: 90, tile: 450, runAt: 300, run: 520, stripsAt: 420, fullTrack: 3400, stripGap: 40, pop: 380 };
+
+const HIDDEN = "inset(-24px 100% -40px 0)";
+const SHOWN = "inset(-24px -24px -40px -24px)";
+const OVERSHOOT = "cubic-bezier(0.34, 1.5, 0.64, 1)";
+const EASE_OUT = "cubic-bezier(0.22, 0.8, 0.3, 1)";
+
+const root = ref<HTMLElement>();
+const timeline = new Timeline();
+let visibility: IntersectionObserver | undefined;
+
+function build(figure: HTMLElement) {
+  const t = timing;
+  const ms = (percent: number) => percent / 100 * t.fullTrack;
+  const runEnd = t.runAt + t.run;
+  let at = t.stripsAt;
+  const stripTimes = strips.map(strip => {
+    const span = [at, ms(strip.width)];
+    at += ms(strip.width) + t.stripGap;
+    return span;
+  });
+  const crossAt = at;
+  const total = crossAt + t.pop + 200;
+
+  const animations: Animation[] = [];
+  const add = (el: Element | null, from: Keyframe, to: Keyframe, start: number, end: number, easing: string) => {
+    if (el)
+      animations.push(timeline.animate(el, move(from, to, start, end, total, easing), { duration: total, fill: "both" }));
+  };
+  const clipIn = (el: Element | null, start: number, length: number, easing: string) =>
+    add(el, { clipPath: HIDDEN }, { clipPath: SHOWN }, start, start + length, easing);
+  const pop = (el: Element | null, start: number) =>
+    add(el, { opacity: 0, transform: "scale(0.6)" }, { opacity: 1, transform: "scale(1)" }, start, start + t.pop, OVERSHOOT);
+
+  add(figure.querySelector(".ruler"), { clipPath: "inset(-2px 100% -2px 0)" }, { clipPath: "inset(-2px 0 -2px 0)" }, 0, t.ruler, EASE_OUT);
+  figure.querySelectorAll(".tile").forEach((el, index) => {
+    const start = index * t.tileStagger;
+    add(el, { opacity: 0, transform: "translateY(6px)" }, { opacity: 1, transform: "translateY(0)" }, start, start + t.tile, EASE_OUT);
+  });
+  clipIn(figure.querySelector(".run"), t.runAt, t.run, EASE_OUT);
+  pop(figure.querySelector(".check"), runEnd);
+  add(figure.querySelector(".marker"), { clipPath: "inset(0 -4px 100% -4px)" }, { clipPath: "inset(0 -4px 0 -4px)" }, runEnd + 60, runEnd + 500, EASE_OUT);
+  figure.querySelectorAll(".strip").forEach((el, index) =>
+    clipIn(el, stripTimes[index][0], stripTimes[index][1], "cubic-bezier(0.3, 0, 0.6, 1)"));
+  pop(figure.querySelector(".cross"), crossAt);
+
+  return animations;
+}
+
+/* a pass waits paused at its start; it re-arms only once the figure is fully off screen, so it never jumps back
+   to empty in view */
+let animations: Animation[] = [];
+let armed = false;
+
+function arm() {
+  animations.forEach(animation => animation.cancel());
+  const pass = build(root.value!);
+  pass.forEach(animation => animation.pause());
+  animations = pass;
+  armed = true;
+
+  /* once done, drop the effects so the figure is plain CSS again */
+  Timeline.settled(pass).then(finished => finished && pass.forEach(animation => animation.cancel()));
+}
+
+onMounted(() => {
+  if (reducedMotion()) return;
+
+  arm();
+
+  visibility = new IntersectionObserver(entries => {
+    const entry = entries[entries.length - 1];
+    if (!entry.isIntersecting) {
+      if (!armed) arm();
+    } else if (armed && entry.intersectionRatio >= onScreenShare) {
+      armed = false;
+      animations.forEach(animation => animation.play());
+    }
+  }, { threshold: [0, onScreenShare] });
+  visibility.observe(root.value!);
+});
+
+onBeforeUnmount(() => {
+  visibility?.disconnect();
+  timeline.cancel();
+});
+</script>
+
+<template>
+  <div ref="root" class="lanes" aria-hidden="true" :style="{ '--done-n': done / 100 }">
+    <span class="ruler"></span>
+
+    <div class="lane">
+      <span class="tile fragment quest"><Icon :icon="faBolt" /></span>
+      <span class="track">
+        <span class="run" :style="{ width: `${done}%` }"></span>
+        <Icon class="check" :icon="faCircleCheck" />
+      </span>
+    </div>
+
+    <div class="lane">
+      <span class="tile fragment web"><Icon :icon="faGlobe" /></span>
+      <span class="track">
+        <span v-for="strip of strips" :key="strip.label" class="strip fragment" :style="{ width: `${strip.width}%` }">{{ strip.label }}</span>
+        <Icon class="cross" :icon="faCircleXmark" />
+      </span>
+    </div>
+
+    <span class="marker"></span>
+  </div>
+</template>
+
+<style scoped>
+
+.lanes {
+  --tile: 40px;
+  --gap: 16px;
+  --ruler: 14px;
+  --row-gap: 10px;
+  --bar: 24px;
+  --tick: light-dark(
+      color-mix(in srgb, var(--vp-c-text-1) 14%, transparent),
+      color-mix(in srgb, var(--vp-c-text-1) 16%, transparent));
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--row-gap);
+  width: min(100%, 460px);
+  user-select: none;
+}
+
+/* the time axis: faint ticks along the top, one every eighth of the track */
+.ruler {
+  height: var(--ruler);
+  margin-left: calc(var(--tile) + var(--gap));
+  background-image: repeating-linear-gradient(to right, var(--tick) 0 1px, transparent 1px 12.5%);
+  background-size: calc(100% + 1px) 100%;
+  border-bottom: 1px solid var(--tick);
+}
+
+.lane {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: var(--tile) minmax(0, 1fr);
+  gap: var(--gap);
+  align-items: center;
+}
+
+.tile {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--tile);
+  height: var(--tile);
+  border-radius: 12px;
+  font-size: 1.25rem;
+}
+
+.quest {
+  color: var(--tint);
+}
+
+.web {
+  color: var(--vp-c-text-2);
+}
+
+.track {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.run {
+  height: var(--bar);
+  margin-right: 4px;
+  border-radius: 7px;
+  background-image: linear-gradient(110deg,
+      color-mix(in srgb, var(--tint) 80%, transparent),
+      color-mix(in srgb, var(--tint) 60%, transparent));
+  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--tint) 50%, transparent);
+}
+
+.check {
+  font-size: 1.5rem;
+  color: light-dark(#2E7D32, #81C784);
+}
+
+/* the browser's work, one strip per layer it has to interpret */
+.strip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--bar);
+  border-radius: 5px;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: var(--vp-c-text-2);
+}
+
+.strip:first-child {
+  border-radius: 7px 5px 5px 7px;
+}
+
+.strip:nth-last-child(1 of .strip) {
+  border-radius: 5px 7px 7px 5px;
+}
+
+.cross {
+  margin-left: 4px;
+  font-size: 1.5rem;
+  color: light-dark(#C62828, #EF9A9A);
+}
+
+/* the moment QuestPDF is done, carried down behind both bars: the mask cuts it out of each bar's row, as the bars
+   and icons are see-through in dark */
+.marker {
+  --first: calc(var(--ruler) + var(--row-gap) + (var(--tile) - var(--bar)) / 2);
+  --second: calc(var(--first) + var(--tile) + var(--row-gap));
+
+  position: absolute;
+  top: 0;
+  bottom: -6px;
+  left: calc(var(--tile) + var(--gap) + (100% - var(--tile) - var(--gap)) * var(--done-n));
+  border-left: 2px dashed color-mix(in srgb, var(--tint) 70%, transparent);
+  mask-image: linear-gradient(to bottom,
+      #000 var(--first), transparent var(--first) calc(var(--first) + var(--bar)),
+      #000 calc(var(--first) + var(--bar)) var(--second), transparent var(--second) calc(var(--second) + var(--bar)),
+      #000 calc(var(--second) + var(--bar)));
+}
+
+@media screen and (max-width: 420px) {
+  .lanes {
+    --tile: 36px;
+    --gap: 12px;
+  }
+}
+
+</style>
diff --git a/docs/.vitepress/theme/homepage/HomePageHero.vue b/docs/.vitepress/theme/homepage/HomePageHero.vue
index 23a0ddc..33aebc2 100644
--- a/docs/.vitepress/theme/homepage/HomePageHero.vue
+++ b/docs/.vitepress/theme/homepage/HomePageHero.vue
@@ -1,16 +1,3 @@
-<script setup lang="ts">
-import { faAward, faCloudArrowUp, faCode, faSparkles } from "@fortawesome/pro-regular-svg-icons";
-import Icon from "../Icon.vue";
-import { data as statistics } from "../statistics.data";
-
-const benefits = [
-  { icon: faCode, text: "Implement documents in fluent C# that's easy to read, maintain and review" },
-  { icon: faAward, text: "Generate valid, standards-compliant and accessible PDF documents" },
-  { icon: faSparkles, text: "Develop faster with hot-reload preview and your favorite AI coding agent" },
-  { icon: faCloudArrowUp, text: "Deploy to any operating system or cloud, with excellent performance" }
-];
-</script>
-
 <template>
   <div class="hero">
     <section class="content">
@@ -18,28 +5,9 @@ const benefits = [
         <span class="highlight-foreground">Code-first</span> PDF library for C#
       </h1>
 
-      <div class="lists">
-        <ul class="benefits">
-          <li v-for="benefit in benefits" :key="benefit.text">
-            <span class="list-icon">
-              <Icon :icon="benefit.icon" />
-            </span>
-
-            <span>{{ benefit.text }}</span>
-          </li>
-        </ul>
-
-        <div class="hero-pattern" />
-
-        <ul class="statistics">
-          <li v-for="statistic in statistics" :key="statistic.label">
-            <a :href="statistic.link" :target="statistic.link.startsWith('http') ? '_blank' : undefined" class="statistic">
-              <span class="value">{{ statistic.value }}</span>
-              <span class="label">{{ statistic.label }}</span>
-            </a>
-          </li>
-        </ul>
-      </div>
+      <p class="lead">
+        Generate documents confidently with reviewable code, <span class="no-break">hot-reload</span> preview and your favorite AI coding agents.
+      </p>
     </section>
   </div>
 </template>
@@ -50,31 +18,27 @@ const benefits = [
 /* Layout */
 
 .content {
-  display: flex;
-  flex-direction: column;
-  gap: 48px;
   padding-block: 64px;
+  text-align: center;
 }
 
-.content h1 {
-  margin: 0;
-  font-size: 3.5rem;
-  line-height: 1.05;
-  letter-spacing: -0.02em;
-  word-spacing: 4px;
-  text-wrap: balance;
-}
 
-@media screen and (max-width: 820px) {
-  .content h1 {
-    font-size: 2.75rem;
-  }
+/* Text */
+
+h1 {
+  margin: 0 0 clamp(40px, 4vw, 56px);
+  font-size: var(--hero-title-size);
+  font-weight: 500;
+  line-height: 1.05;
+  letter-spacing: -0.03em;
+  word-spacing: 0.1em;
+  color: light-dark(#142630, var(--vp-c-text-1));
 }
 
 h1 .highlight-foreground {
   display: inline-block; /* so the gradient box ends at the word, not the full line */
   padding-right: 0.05em; /* keeps the gradient clip from shaving the last letter's edge */
-  font-weight: 800;
+  font-weight: 700;
 
   background-image: linear-gradient(100deg, #00c6ff 0%, #0094f9 55%, #2979ff 100%);
   background-clip: text;
@@ -86,132 +50,23 @@ html.dark h1 .highlight-foreground {
   background-image: linear-gradient(100deg, #4ED4FF 0%, #2FAEFA 50%, #5C8DFF 100%);
 }
 
-
-/* Lists */
-
-.lists {
-  isolation: isolate; /* so the dot grid's z-index puts it under the lists, not under the page canvas */
-  display: grid;
-  grid-template-columns: minmax(0, max-content) minmax(64px, 1fr) auto;
-  align-items: start;
-}
-
-.benefits,
-.statistics {
-  display: flex;
-  flex-direction: column;
-  gap: 1.75rem;
-}
-
-.benefits li {
-  display: flex;
-  align-items: flex-start;
-  gap: 1.25rem;
-  color: var(--vp-c-text-1);
-}
-
-/* regular text looks thinner on white, so light mode takes half a weight step up */
-html:not(.dark) .benefits li {
-  font-weight: 450;
-  color: #142630;
-}
-
-.benefits li,
-.statistic {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-  text-wrap: pretty;
-}
-
-.statistic {
-  display: block;
-}
-
-.list-icon {
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
-  margin-block: -0.375rem;
-  border-radius: 10px;
-  background-color: light-dark(#E0F3FF, color-mix(in srgb, var(--vp-c-brand-1) 12%, transparent));
-  box-shadow: 0 0 20px 5px light-dark(#FFFFFF, transparent);
-}
-
-.list-icon .icon {
-  font-size: 1.25rem;
-  color: light-dark(#1F6B99, var(--vp-c-brand-1));
-}
-
-html:not(.dark) .list-icon .icon {
-  font-size: 1.5rem;
-}
-
-/* each stat is a link whose parts set their own colours, so the global link hover never reaches them */
-.statistic .value {
-  margin-right: 0.5rem;
-  font-weight: 700;
-  font-variant-numeric: tabular-nums;
-  color: light-dark(#1C1C1E, var(--vp-c-text-1));
-}
-
-.statistic .label {
-  font-weight: 400;
-  color: var(--vp-c-text-2);
-}
-
-html:not(.dark) .statistic .label {
+.lead {
+  max-width: 30em;
+  margin: 0 auto;
+  font-size: clamp(1.25rem, 1.05rem + 0.92vw, 1.875rem);
+  line-height: 1.6;
   font-weight: 450;
+  text-wrap: balance;
   color: var(--vp-c-text-1);
 }
 
-@media screen and (max-width: 1023px) {
-  .lists {
-    grid-template-columns: 1fr;
-    gap: 48px;
-  }
-
-  .hero-pattern,
-  .statistics {
-    grid-area: 2 / 1;
-  }
-
-  .statistics {
-    display: grid;
-    grid-template-columns: repeat(2, max-content);
-    gap: 1.75rem 96px;
-  }
-}
-
-/* the two columns and the 96px gap need about 650px with the gutters */
-@media screen and (max-width: 720px) {
-  .statistics {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* Dot grid */
-
-.hero-pattern {
-  z-index: -1;
-  align-self: stretch;
-  margin-block: -64px;
-  pointer-events: none;
-
-  background-image: radial-gradient(circle, color-mix(in srgb, color-mix(in srgb, #1E88E5 85%, var(--vp-c-text-1)) 36%, transparent) 1px, transparent 1.5px);
-  background-size: 24px 24px;
-  background-position: 12px 12px;
-
-  mask-image:
-      linear-gradient(to right, transparent, #000 25%, #000 75%, transparent),
-      linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
-  mask-composite: intersect;
+html.dark .lead {
+  font-weight: 400;
+  color: color-mix(in srgb, var(--vp-c-text-1) 60%, var(--vp-c-text-2));
 }
 
-html.dark .hero-pattern {
-  background-image: radial-gradient(circle, color-mix(in srgb, color-mix(in srgb, #64B5F6 50%, var(--vp-c-text-1)) 13%, transparent) 1px, transparent 1.5px);
+.no-break {
+  white-space: nowrap;
 }
 
 </style>
diff --git a/docs/.vitepress/theme/homepage/HomePageLayers.vue b/docs/.vitepress/theme/homepage/HomePageLayers.vue
new file mode 100644
index 0000000..ed992fd
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/HomePageLayers.vue
@@ -0,0 +1,325 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { move, onScreenShare, reducedMotion } from "./ctaTimeline";
+
+/* The layers the library runs on, as three slabs with your application floating on top, and dashed leaders running
+   from the middle of each slab's edge to the row that names it. Rows size to their text; the figure measures them
+   so the leaders always meet the rows' markers. Facts as the package README states them. */
+const layers = [
+  { name: "Runtime", values: [".NET 6+", ".NET Framework 4.6.2+", "Native AOT"] },
+  { name: "Operating system", values: ["Windows", "Linux", "Alpine", "macOS"] },
+  { name: "Hosting", values: ["Docker", "Kubernetes", "Azure", "AWS", "Google Cloud"] }
+];
+
+const figureWidth = 208, gutter = 28, minHeight = 232;
+const cx = 96, halfWidth = 86, halfDepth = 28, thickness = 16, spacing = 58;
+const reach = figureWidth + gutter;
+
+/* bottom up, so each slab covers the one under it, and the assembly stacks them in the same order */
+const order = [2, 1, 0];
+
+/* first-paint estimates, replaced by measurements once mounted */
+const list = ref<HTMLElement>();
+const height = ref(268);
+const middles = ref([38, 134, 230]);
+let observer: ResizeObserver | undefined;
+
+/* stacked on phones: the figure keeps its own height and the leaders are hidden */
+function measure() {
+  const box = list.value!.getBoundingClientRect();
+  const stacked = matchMedia("(max-width: 600px)").matches;
+  height.value = stacked ? minHeight : Math.max(Math.round(box.height), minHeight);
+  middles.value = Array.from(list.value!.children).map(row => {
+    const r = row.getBoundingClientRect();
+    return Math.round(r.top - box.top + r.height / 2);
+  });
+}
+
+/* Motion: on each entry into view the stack assembles bottom-up and the application lands last; then the application
+   hovers above it. The hover runs only while the card is mostly on screen; leaving the screen entirely rewinds
+   everything, so the next visit assembles again. */
+const root = ref<HTMLElement>();
+const groups: SVGGElement[] = [];
+const leaders: SVGPathElement[] = [];
+const markers: HTMLElement[] = [];
+const application = ref<HTMLElement>();
+const shadow = ref<SVGEllipseElement>();
+
+const assembly = 2600, hover = 4800, lift = 10;
+const settle = "cubic-bezier(0.2, 0.7, 0.2, 1)";
+const sine = "cubic-bezier(0.37, 0, 0.63, 1)";
+
+let building: Animation[] = [];
+let floating: Animation[] = [];
+let visibility: IntersectionObserver | undefined;
+
+function build() {
+  const once = { duration: assembly, fill: "both" as const };
+  const step = (from: Keyframe, to: Keyframe, start: number, end: number, easing = settle) => move(from, to, start, end, assembly, easing);
+
+  order.forEach((i, k) => {
+    const start = k * 200;
+    building.push(
+      groups[i].animate(step({ transform: "translateY(-26px)", opacity: 0 }, { transform: "translateY(0)", opacity: 1 }, start, start + 760), once),
+      leaders[i].animate(step({ opacity: 0 }, { opacity: 1 }, start + 560, start + 900, "ease-out"), once),
+      markers[i].animate(step({ transform: "scale(0)" }, { transform: "scale(1)" }, start + 760, start + 1100), once)
+    );
+  });
+
+  building.push(
+    application.value!.animate(step({ transform: "translateY(-22px)", opacity: 0 }, { transform: "translateY(0)", opacity: 1 }, 1000, 1900), once),
+    shadow.value!.animate(step({ transform: "scale(0.6)", opacity: 0 }, { transform: "scale(1)", opacity: 1 }, 1100, 1900), once)
+  );
+
+  /* starts where the assembly leaves off, so the two never fight over the same transform */
+  const loop = { duration: hover, iterations: Infinity, delay: assembly };
+  floating.push(
+    application.value!.animate([
+      { transform: "translateY(0)", easing: sine },
+      { transform: `translateY(-${lift}px)`, easing: sine },
+      { transform: "translateY(0)" }
+    ], loop),
+    shadow.value!.animate([
+      { transform: "scale(1)", opacity: 1, easing: sine },
+      { transform: "scale(0.7)", opacity: 0.45, easing: sine },
+      { transform: "scale(1)", opacity: 1 }
+    ], loop)
+  );
+
+  [...building, ...floating].forEach(animation => animation.pause());
+}
+
+onMounted(() => {
+  measure();
+  observer = new ResizeObserver(measure);
+  observer.observe(list.value!);
+
+  if (reducedMotion()) return;
+  build();
+
+  visibility = new IntersectionObserver(([entry]) => {
+    if (!entry.isIntersecting) {
+      [...building, ...floating].forEach(animation => {
+        animation.pause();
+        animation.currentTime = 0;
+      });
+    }
+    else if (entry.intersectionRatio >= onScreenShare) {
+      [...building, ...floating].filter(animation => animation.playState !== "finished").forEach(animation => animation.play());
+    }
+    /* partly on screen: an assembly under way finishes, the hover waits */
+    else {
+      floating.forEach(animation => animation.pause());
+    }
+  }, { threshold: [0, onScreenShare] });
+  visibility.observe(root.value!);
+});
+
+onBeforeUnmount(() => {
+  observer?.disconnect();
+  visibility?.disconnect();
+  [...building, ...floating].forEach(animation => animation.cancel());
+});
+
+const slabs = computed(() => layers.map((_, i) => {
+  const cy = height.value / 2 + (i - 1) * spacing + 12;
+  const edge = cy + thickness / 2;
+  const ry = middles.value[i];
+  const x0 = cx + halfWidth + 4, x1 = reach - 2;
+  return {
+    cy,
+    edge,
+    top: `M${cx - halfWidth} ${cy}L${cx} ${cy - halfDepth}L${cx + halfWidth} ${cy}L${cx} ${cy + halfDepth}Z`,
+    left: `M${cx - halfWidth} ${cy}L${cx} ${cy + halfDepth}L${cx} ${cy + halfDepth + thickness}L${cx - halfWidth} ${cy + thickness}Z`,
+    right: `M${cx} ${cy + halfDepth}L${cx + halfWidth} ${cy}L${cx + halfWidth} ${cy + thickness}L${cx} ${cy + halfDepth + thickness}Z`,
+    leader: `M${x0} ${edge}C${x0 + 36} ${edge} ${x1 - 36} ${ry} ${x1} ${ry}`
+  };
+}));
+</script>
+
+<template>
+  <div ref="root" class="layers" :style="{ '--figure-width': `${figureWidth}px`, '--gutter': `${gutter}px`, '--min-height': `${minHeight}px` }">
+    <figure class="figure" aria-hidden="true">
+      <svg class="drawing" :viewBox="`0 0 ${figureWidth} ${height}`" preserveAspectRatio="xMinYMin meet">
+        <path v-for="(slab, i) of slabs" :key="`leader${i}`" :ref="el => leaders[i] = el as SVGPathElement" class="leader" :d="slab.leader" />
+
+        <g v-for="i of order" :key="i" :ref="el => groups[i] = el as SVGGElement">
+          <path class="side-left" :d="slabs[i].left" />
+          <path class="side-right" :d="slabs[i].right" />
+          <path class="face" :d="slabs[i].top" />
+          <circle class="joint" :cx="cx + halfWidth" :cy="slabs[i].edge" r="3" />
+        </g>
+
+        <ellipse ref="shadow" class="shadow" :cx="cx" :cy="slabs[0].cy" rx="26" ry="9" />
+      </svg>
+
+      <!-- your application, floating above the top slab -->
+      <span ref="application" class="application" :style="{ left: `${cx}px`, top: `${slabs[0].cy - 44}px` }"></span>
+    </figure>
+
+    <ul ref="list" class="rows">
+      <li v-for="(layer, i) of layers" :key="layer.name" class="row">
+        <span :ref="el => markers[i] = el as HTMLElement" class="marker"></span>
+        <span class="text">
+          <strong class="name">{{ layer.name }}</strong>
+          <span class="values">
+            <template v-for="(value, j) of layer.values" :key="value">
+              <span v-if="j > 0" class="dot" aria-hidden="true">·</span>
+              <span class="value">{{ value }}</span>
+            </template>
+          </span>
+        </span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+
+.layers {
+  --accent: light-dark(#1976D2, #64B5F6);
+  --line: color-mix(in srgb, var(--vp-c-text-1) 14%, transparent);
+  --slab-face: light-dark(#FFFFFF, #2A2B31);
+  --slab-left: light-dark(#E6EAF0, #222328);
+  --slab-right: light-dark(#D5DBE4, #1C1D21);
+  --application: light-dark(#42A5F5, #1E88E5);
+  --application-glow: light-dark(rgba(66, 165, 245, 0.35), rgba(30, 136, 229, 0.55));
+
+  display: grid;
+  grid-template-columns: var(--figure-width) minmax(0, 1fr);
+  gap: var(--gutter);
+}
+
+.figure {
+  position: relative;
+  width: var(--figure-width);
+  min-height: var(--min-height);
+  margin: 0;
+}
+
+.drawing {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  fill: none;
+}
+
+.face,
+.side-left,
+.side-right {
+  stroke: var(--line);
+  stroke-width: 1;
+  stroke-linejoin: round;
+}
+
+.face {
+  fill: var(--slab-face);
+}
+
+.side-left {
+  fill: var(--slab-left);
+}
+
+.side-right {
+  fill: var(--slab-right);
+}
+
+.leader {
+  stroke: color-mix(in srgb, var(--accent) 50%, transparent);
+  stroke-width: 1.5;
+  stroke-dasharray: 3 4;
+  stroke-linecap: round;
+}
+
+.joint {
+  fill: var(--accent);
+}
+
+.application {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  translate: -50% -50%;
+  border-radius: 50%;
+  background-color: var(--application);
+  box-shadow: 0 0 24px 2px var(--application-glow);
+}
+
+.shadow {
+  fill: color-mix(in srgb, var(--vp-c-text-1) 10%, transparent);
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+.rows {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin: 0;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.marker {
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--application);
+  box-shadow: 0 0 24px 2px var(--application-glow);
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.name {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.values {
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  color: var(--vp-c-text-2);
+}
+
+.value {
+  white-space: nowrap;
+}
+
+.dot {
+  margin: 0 0.5em;
+  color: var(--vp-c-text-3);
+}
+
+/* phones: the figure sits above the rows, and the leaders have nothing to reach */
+@media screen and (max-width: 600px) {
+  .layers {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .figure {
+    height: var(--min-height);
+    margin-inline: auto;
+  }
+
+  .leader {
+    display: none;
+  }
+}
+
+</style>
diff --git a/docs/.vitepress/theme/homepage/HomePageLicense.vue b/docs/.vitepress/theme/homepage/HomePageLicense.vue
index ec34e2a..0231792 100644
--- a/docs/.vitepress/theme/homepage/HomePageLicense.vue
+++ b/docs/.vitepress/theme/homepage/HomePageLicense.vue
@@ -1,281 +1,196 @@
 <script setup lang="ts">
-import { faArrowRight, faBoxOpen, faInfinity, faLayerGroup, faLockOpen, faRotateLeft, faTag, faUsers } from "@fortawesome/pro-regular-svg-icons";
+import {
+  faCalendarCheck, faEnvelope, faHandHoldingHeart, faInfinity, faLayerGroup, faLockOpen,
+  faTag, faUser
+} from "@fortawesome/pro-regular-svg-icons";
 import Icon from "../Icon.vue";
 import { licensePrices } from "../pricing/prices";
 
-const perYear = (price: number) => `$${price.toLocaleString("en-US")} / year`;
+const usd = (amount: number) => `$${amount.toLocaleString("en-US")}`;
 
-const tiers = [
+const halves = [
   {
-    name: "Community",
-    price: "Free",
-    description: "For individuals, FOSS projects, charities, academic institutions and businesses under $1M in annual revenue. Public-sector bodies and publicly traded companies need a paid license."
+    kind: "free",
+    lead: "Free license",
+    points: [
+      { icon: faUser, text: "For individuals and organisations under $1M annual revenue" },
+      { icon: faHandHoldingHeart, text: "For open-source projects, charities and academia" },
+      { icon: faLayerGroup, text: "All features, commercial use included" },
+      { icon: faLockOpen, text: "No registration, license keys or watermarks" }
+    ]
   },
   {
-    name: "Professional",
-    price: perYear(licensePrices.professional),
-    description: "For one legal entity shipping PDFs in production. Every developer covered at one flat price, with no seat counting or usage fees."
-  },
-  {
-    name: "Enterprise",
-    price: perYear(licensePrices.enterprise),
-    description: "For corporate groups that need affiliate-wide coverage, priority support, reduced risk and procurement-friendly terms."
+    kind: "paid",
+    lead: "Paid license from",
+    amount: usd(licensePrices.professional),
+    per: "/ year",
+    points: [
+      { icon: faTag, text: "One flat price per company, no seat counting" },
+      { icon: faInfinity, text: "Perpetual license: keep every version received" },
+      { icon: faEnvelope, text: "Direct and priority email support" },
+      { icon: faCalendarCheck, text: "60-day evaluation period" }
+    ]
   }
-]
-
-const includes = [
-  { icon: faInfinity, text: "Perpetual license, not a subscription: keep every version you received" },
-  { icon: faLayerGroup, text: "Full feature set in every tier, including the free Community License" },
-  { icon: faUsers, text: "Unlimited developers, projects, servers and deployments" },
-  { icon: faBoxOpen, text: "Royalty-free redistribution in SaaS, desktop and on-premises apps" },
-  { icon: faLockOpen, text: "No registration, license keys, watermarks or time limits" },
-  { icon: faRotateLeft, text: "30-day money-back guarantee on every paid license" },
-  { icon: faTag, text: "Locked renewal price: it never increases while you keep renewing" }
-]
+];
 </script>
 
 <template>
   <div class="panel license-panel">
-    <div class="includes">
-      <h2 class="card-title">Fair and Sustainable License</h2>
-
-      <ul class="includes-list">
-        <li v-for="item of includes" :key="item.text">
-          <Icon :icon="item.icon" />
-          <span>{{ item.text }}</span>
+    <section v-for="half of halves" :key="half.kind" class="half" :class="half.kind">
+      <h3 class="card-title">
+        <a href="/pricing.html">
+          {{ half.lead }}
+          <span v-if="half.amount" class="amount">{{ half.amount }}<span class="per">{{ half.per }}</span></span>
+        </a>
+      </h3>
+
+      <ul class="points">
+        <li v-for="point of half.points" :key="point.text">
+          <Icon :icon="point.icon" />
+          <span>{{ point.text }}</span>
         </li>
       </ul>
+    </section>
 
-      <div class="actions">
-        <a class="action pricing-button" href="/pricing.html">View Pricing</a>
-        <a class="action" href="/license/guide.html">License Selection Guide</a>
-      </div>
-    </div>
-
-    <div class="divider" aria-hidden="true"></div>
-
-    <div class="tiers">
-      <a v-for="tier of tiers" :key="tier.name" class="tier" :class="tier.name.toLowerCase()" href="/pricing.html">
-        <span class="tier-head">
-          <span class="tier-name">{{ tier.name }}</span>
-          <span class="tier-price">
-            <span class="tier-price-text">{{ tier.price }}</span>
-            <Icon class="tier-arrow" :icon="faArrowRight" />
-          </span>
-        </span>
-        <span class="tier-description">{{ tier.description }}</span>
-      </a>
+    <div class="footer">
+      <p>Not sure which applies to you? See the <a href="/pricing.html#faq">licensing FAQ</a>.</p>
+      <a class="action primary" href="/pricing.html">View Pricing</a>
     </div>
   </div>
 </template>
 
 <style scoped>
 
+/* the halves carry the padding, like the Quick start cards, so the divider and the glows reach the panel's edges */
 .license-panel {
+  --pad-x: clamp(24px, 4.14vw - 4.95px, 48px);
+
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
-  gap: 48px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  padding: 0;
+  overflow: clip;
 }
 
-html.dark .license-panel {
-  background-image:
-      radial-gradient(ellipse 90% 55% at 0% 64px, color-mix(in srgb, #67B84D 7%, transparent), transparent),
-      radial-gradient(ellipse 50% 30% at 0% 64px, color-mix(in srgb, #4CAF50 3%, transparent), transparent),
-      var(--surface-sheen);
+.half {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding: var(--panel-padding);
 }
 
-.divider {
-  align-self: stretch;
-  width: 1px;
-  background-color: var(--vp-c-divider);
+.free {
+  --tint: #2E7D32;
 }
 
-@media screen and (max-width: 960px) {
-  .license-panel {
-    grid-template-columns: minmax(0, 1fr);
-    gap: 40px;
-  }
+html.dark .free {
+  --tint: #81C784;
 
-  .divider {
-    width: auto;
-    height: 1px;
-  }
+  background-image:
+      radial-gradient(ellipse 90% 55% at 0% 64px, color-mix(in srgb, #67B84D 10%, transparent), transparent),
+      radial-gradient(ellipse 50% 30% at 0% 64px, color-mix(in srgb, #4CAF50 4%, transparent), transparent);
 }
 
+.paid {
+  --tint: #0277BD;
 
-.includes {
-  display: flex;
-  flex-direction: column;
+  border-left: 1px solid var(--vp-c-divider);
 }
 
-.includes-list {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  flex-grow: 1;
-  margin: 32px 0 0;
+html.dark .paid {
+  --tint: #80C8FF;
+
+  background-image:
+      radial-gradient(ellipse 90% 55% at 0% 64px, color-mix(in srgb, #64B5F6 10%, transparent), transparent),
+      radial-gradient(ellipse 50% 30% at 0% 64px, color-mix(in srgb, #29B6F6 4%, transparent), transparent);
 }
 
-.includes-list li {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  min-height: 36px;
-  font-weight: 500;
-  color: var(--vp-c-text-1);
+.half .card-title {
+  font-variant-numeric: tabular-nums;
 }
 
-.includes-list .icon {
-  flex-shrink: 0;
-  width: 18px;
-  font-size: 1rem;
-  color: light-dark(#38A83E, #6ECF73);
+html.dark .half .card-title {
+  color: color-mix(in srgb, var(--tint) 60%, var(--vp-c-text-1));
 }
 
-@media screen and (max-width: 700px) {
-  .includes-list li {
-    align-items: flex-start;
-    min-height: 0;
-    padding: 6px 0;
-  }
+.card-title a {
+  color: inherit;
+  border-radius: 4px;
+}
 
-  .includes-list .icon {
-    margin-top: 0.25rem;
-  }
+.card-title a:hover {
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 4px;
 }
 
-.actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  margin-top: 32px;
+.card-title a:focus-visible {
+  outline: 2px solid var(--vp-c-brand-1);
+  outline-offset: 4px;
 }
 
+.amount {
+  white-space: nowrap;
+}
 
-/* Tiers */
+.per {
+  margin-left: 0.3em;
+}
 
-.tiers {
+.points {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  gap: 40px;
+  gap: 4px;
+  margin-top: 20px;
 }
 
-.tier {
+.points li {
   display: flex;
-  flex-direction: column;
-  gap: 10px;
-  border-radius: 4px;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 6px 0;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
 }
 
-.tier:focus-visible {
-  outline: 2px solid var(--vp-c-brand-1);
-  outline-offset: 6px;
+.points .icon {
+  flex-shrink: 0;
+  width: 18px;
+  margin-top: 0.25rem;
+  font-size: 1rem;
+  color: var(--tint);
 }
 
-.tier-head {
+.footer {
+  grid-column: 1 / -1;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 8px 14px;
-}
-
-.tier-name {
-  padding: 7px 14px;
-  border-radius: 10px;
-  background-color: var(--surface-inner);
-
-  font-size: 0.9375rem;
-  line-height: 1.25rem;
-  font-weight: 600;
+  justify-content: space-between;
+  gap: 16px 32px;
+  padding: 24px var(--pad-x);
+  border-top: 1px solid var(--vp-c-divider);
   color: var(--vp-c-text-2);
 }
 
-.tier.community .tier-name {
-  color: light-dark(#2E7D32, #A5D6A7);
-  background-color: #67B84D33;
-}
-
-.tier.professional .tier-name {
-  color: white;
-  background-color: light-dark(#2196F3, #1976D2);
-}
-
-.tier.enterprise .tier-name {
-  color: light-dark(white, #212121);
-  background-color: light-dark(#212121, #EEEEEE);
-}
-
-.tier-price {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 1rem;
-  line-height: 1.5rem;
+.footer p a {
   font-weight: 600;
-  color: var(--vp-c-text-1);
-  white-space: nowrap;
+  color: var(--vp-c-brand-1);
 }
 
-.tier-price-text {
-  text-decoration: underline transparent;
-  text-decoration-thickness: 1px;
+.footer p a:hover {
+  text-decoration: underline;
   text-underline-offset: 3px;
-  transition: text-decoration-color 0.2s;
 }
 
-.tier:is(:hover, :focus-visible) .tier-price-text {
-  text-decoration-color: currentColor;
-}
-
-.tier-arrow {
-  font-size: 1rem;
-  opacity: 0;
-  transform: translateX(-4px);
-  transition: opacity 0.2s, transform 0.25s ease;
-}
-
-.tier:is(:hover, :focus-visible) .tier-arrow {
-  opacity: 1;
-  transform: translateX(0);
-}
-
-.tier-description {
-  font-size: 1rem;
-  line-height: 1.75rem;
-  color: var(--vp-c-text-2);
-}
-
-/* a touch screen never hovers, so there the cues show at rest */
-@media (hover: none) {
-  .tier-price-text {
-    text-decoration-color: currentColor;
-  }
-
-  .tier-arrow {
-    opacity: 1;
-    transform: none;
+@media screen and (max-width: 760px) {
+  .license-panel {
+    grid-template-columns: minmax(0, 1fr);
   }
-}
 
-@media (prefers-reduced-motion: reduce) {
-  .tier:is(:hover, :focus-visible) .tier-arrow {
-    transform: none;
+  .paid {
+    border-left: none;
+    border-top: 1px solid var(--vp-c-divider);
   }
 }
 
-
-/* two steps deeper than the list's green, so the white label passes AA */
-.action.pricing-button {
-  --fill: #2E7D32;
-
-  color: #FFF;
-  background-color: var(--fill);
-  box-shadow: var(--filled-edge);
-}
-
-.action.pricing-button:hover {
-  background-color: light-dark(#1B5E20, #388E3C);
-}
-
 </style>
diff --git a/docs/.vitepress/theme/homepage/HomePageQuickStart.vue b/docs/.vitepress/theme/homepage/HomePageQuickStart.vue
index 5025ef6..84f4169 100644
--- a/docs/.vitepress/theme/homepage/HomePageQuickStart.vue
+++ b/docs/.vitepress/theme/homepage/HomePageQuickStart.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
-import { faArrowRightArrowLeft, faArrowUp, faBolt, faCheck, faCode, faCodeBranch, faComments, faLightbulbOn, faPuzzlePiece, faShieldCheck } from "@fortawesome/pro-regular-svg-icons";
+import { faArrowUp, faCheck } from "@fortawesome/pro-regular-svg-icons";
 import { faSparkles } from "@fortawesome/pro-solid-svg-icons";
 import Icon from "../Icon.vue";
 import {computed, onMounted, onUnmounted, ref, watch} from "vue";
@@ -10,43 +9,15 @@ import {data as session} from "./quickStart.data";
 /* The quick start: a coding session (quickStart.data.ts, played by agentSession.ts) shown as code, a composer and
    the rendered page. */
 
-interface Card {
-  kind: "code-card" | "agent-card";
-  title: string;
-  label: string;
-  notes: {
-    icon: IconDefinition;
-    text: string;
-  }[];
-}
-
-const cards: Card[] = [
-  {
-    kind: "code-card",
-    title: "Create and review in C#",
-    label: "Why write documents in C#",
-    notes: [
-      { icon: faCode, text: "Write loops and conditions in plain C#, not a template language" },
-      { icon: faPuzzlePiece, text: "Build reusable components from ordinary classes and methods" },
-      { icon: faLightbulbOn, text: "Get IntelliSense, type checking and refactoring in your IDE" },
-      { icon: faCodeBranch, text: "Keep layouts in Git beside your application code" }
-    ]
-  },
-  {
-    kind: "agent-card",
-    title: "Develop with AI agents",
-    label: "How an AI assistant helps",
-    notes: [
-      { icon: faArrowRightArrowLeft, text: "Migrate legacy HTML-based reports to QuestPDF with AI" },
-      { icon: faComments, text: "Create and modify documents confidently through prompts" },
-      { icon: faBolt, text: "Deliver new documents and changes significantly faster" },
-      { icon: faShieldCheck, text: "Keep every AI change type-checked and easy to review" }
-    ]
-  }
-];
-
 const windowElement = ref<HTMLElement | null>(null);
-const { files, active, lines, promptIndex, promptText, typing, sent, working, finished, applied, zoom, scrolled, asking, countdown, paused, resetting, unfold } = useAgentSession(windowElement, session);
+const code = ref<HTMLElement | null>(null);
+const probe = ref<HTMLElement | null>(null);
+/* how many lines and characters the code shows, measured once mounted (narrow layouts show fewer) */
+const shownLines = ref(session.lines);
+const columns = ref(Infinity);
+const { files, active, lines, promptIndex, promptText, typing, sent, working, finished, applied, zoom, marked, scrolled, shifted, asking, countdown, paused, resetting, unfold } = useAgentSession(windowElement, session, { lines: shownLines, columns });
+
+const placeholder = "Ask the agent to change the invoice…";
 
 /* rendered at three times the page's box, so they stay sharp when zoomed in on; each is large once decoded, so only
    the one shown, the one fading out and the next one are in the document */
@@ -54,6 +25,9 @@ const page = session.page;
 const pages = computed(() => Array.from({ length: session.rounds.length + 1 }, (_, index) => ({ index, src: `${session.renders}${index}.webp` }))
     .filter(({ index }) => Math.abs(index - applied.value) <= 1));
 
+/* the parts of the page the last request changed; they stay in place while their outlines fade out */
+const marks = computed(() => session.rounds[applied.value - 1]?.marks ?? []);
+
 /* The page's box: 595 px wide and as tall as the session's page; the rounds' zoom is measured in its pixels. */
 const result = ref<HTMLElement | null>(null);
 /* the column inside its padding, measured; until then, as it is on a wide screen */
@@ -61,6 +35,8 @@ const view = ref({ x: 24, y: 24, width: 528, height: 444 });
 /* the page's head and its first content, the part of the page the viewer shows at rest */
 const overview = session.overview;
 const maxScale = 1.5;
+/* the closest the camera comes, so a close-up keeps some of the page around the change */
+const maxZoom = 1.8;
 
 const camera = computed(() => {
   const { x, y, width, height } = view.value;
@@ -72,7 +48,7 @@ const camera = computed(() => {
   const [left, top, w, h] = zoom.value;
   const across = width + 2 * x;
   const down = height + 2 * y;
-  let scale = Math.min(across / w, down / h, rest * 2);
+  let scale = Math.min(across / w, down / h, rest * 2, maxZoom);
 
   if (scale > maxScale && page.width * maxScale <= across)
     scale = maxScale;
@@ -163,16 +139,34 @@ function clamp(value: number, min: number, max: number) {
   return Math.min(Math.max(value, min), max);
 }
 
+/* a line's text starts after the line's 24px padding, the gutter and its 12px margin, and keeps 4px on the right */
+function measureCode() {
+  const box = code.value;
+  if (!box || !probe.value)
+    return;
+
+  const lineHeight = parseFloat(getComputedStyle(box).lineHeight);
+  const ch = probe.value.getBoundingClientRect().width;
+  shownLines.value = Math.max(1, Math.round(box.clientHeight / lineHeight));
+  columns.value = Math.floor((box.clientWidth - 40) / ch) - session.digits;
+}
+
 let resizeObserver: ResizeObserver | undefined;
+let codeObserver: ResizeObserver | undefined;
 
 onMounted(() => {
   resizeObserver = new ResizeObserver(([{ contentRect: { x, y, width, height } }]) => view.value = { x, y, width, height });
   resizeObserver.observe(result.value!);
+
+  codeObserver = new ResizeObserver(measureCode);
+  codeObserver.observe(code.value!);
+  void document.fonts.ready.then(measureCode);
 });
 
 onUnmounted(() => {
   cancelAnimationFrame(flight);
   resizeObserver?.disconnect();
+  codeObserver?.disconnect();
 });
 
 /* the window's markup, as Shiki writes it, from the tokens highlighted at build time (quickStart.data.ts) */
@@ -199,7 +193,7 @@ function lineHtml(line: Line, folded: boolean, number?: number) {
   let left = typed;
   let html = "";
 
-  for (const { content, style } of session.tokens[session.langs[active.value]][text]) {
+  for (const { content, style } of session.tokens[text]) {
     if (left <= 0)
       break;
 
@@ -210,7 +204,7 @@ function lineHtml(line: Line, folded: boolean, number?: number) {
   const classes = ["line", kind === "normal" ? "" : `line-${kind}`, state ? `line-${state}` : ""].filter(Boolean).join(" ");
   const gutter = `<span class="gutter">${state ? " " : number ?? " "}</span>`;
   const fold = folded && typed >= text.length ? `<span class="fold">{ … }</span>` : "";
-  return `<span class="${classes}">${gutter}${html}${fold}</span>`;
+  return `<span class="${classes}">${gutter}<span class="text">${html}${fold}</span></span>`;
 }
 </script>
 
@@ -228,8 +222,8 @@ function lineHtml(line: Line, folded: boolean, number?: number) {
       <div class="window-body" :class="{ resetting }">
         <!-- the composer sticks within this part, so it never rides up over the code's title bar -->
         <div class="window-main">
-          <div class="code-source" :style="{ '--code-lines': session.lines, '--gutter-digits': session.digits, '--scroll': scrolled }">
-            <pre class="shiki" tabindex="0"><code v-html="codeHtml"></code></pre>
+          <div class="code-source" :style="{ '--session-lines': session.lines, '--gutter-digits': session.digits, '--scroll': scrolled, '--shift': shifted }">
+            <pre ref="code" class="shiki" tabindex="0"><code v-html="codeHtml"></code><span ref="probe" class="probe" aria-hidden="true">0</span></pre>
           </div>
 
           <div class="composer" :class="{ asking, sent, working }">
@@ -239,6 +233,7 @@ function lineHtml(line: Line, folded: boolean, number?: number) {
                  request that wraps while it types does not move the page -->
             <div class="composer-text">
               <span v-for="round of session.rounds" :key="round.prompt" class="composer-sizer" aria-hidden="true">{{ round.prompt }}</span>
+              <span v-if="!promptText" class="composer-placeholder">{{ placeholder }}</span>
               <span>{{ promptText }}<span v-if="!sent" class="caret" :class="{ steady: typing }"></span></span>
             </div>
 
@@ -271,22 +266,13 @@ function lineHtml(line: Line, folded: boolean, number?: number) {
           <div ref="result" class="result">
             <div class="page" :style="pageStyle">
               <img v-for="{ index, src } of pages" :key="src" :src="src" :alt="index === applied ? `${session.title} rendered by QuestPDF` : ''" :class="{ shown: index === applied }" :width="page.width" :height="page.height" loading="lazy" />
+
+              <span v-for="([x, y, width, height], index) of marks" :key="index" class="mark" :class="{ shown: marked }" :style="{ left: `${x}px`, top: `${y}px`, width: `${width}px`, height: `${height}px` }" aria-hidden="true" />
             </div>
           </div>
         </div>
       </div>
     </div>
-
-    <article v-for="card of cards" :key="card.kind" class="quick-start-card" :class="card.kind">
-      <h2 class="card-title">{{ card.title }}</h2>
-
-      <ul class="notes" :aria-label="card.label">
-        <li v-for="note of card.notes" :key="note.text" class="note">
-          <Icon :icon="note.icon" />
-          <span>{{ note.text }}</span>
-        </li>
-      </ul>
-    </article>
   </div>
 </template>
 
@@ -300,6 +286,7 @@ function lineHtml(line: Line, folded: boolean, number?: number) {
   --composer-text: #FFFFFF;
   --composer-icon: rgba(255, 255, 255, 0.9);
   --composer-step: rgba(255, 255, 255, 0.85);
+  --composer-placeholder: rgba(255, 255, 255, 0.72);
   --composer-ink: #FFFFFF;
   --composer-button-ink: #6D49AB;
   --composer-sheen: rgba(255, 255, 255, 0.14);
@@ -307,11 +294,6 @@ function lineHtml(line: Line, folded: boolean, number?: number) {
   --composer-ring-strong: color-mix(in srgb, var(--agent-accent) 30%, transparent);
   --composer-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 28px -10px rgba(109, 73, 171, 0.3);
 
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  grid-template-areas:
-      "window window"
-      "code agent";
   padding: 0;
   overflow: clip; /* the embedded window follows the panel's corners; clip, unlike hidden, lets the composer stick */
 }
@@ -325,81 +307,21 @@ html.dark .quick-start {
   --composer-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 28px -10px rgba(0, 0, 0, 0.6);
 }
 
-.quick-start-card {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  padding: var(--panel-padding);
-}
-
-.code-card {
-  --tint: #0288D1;
-
-  grid-area: code;
-}
-
-html.dark .code-card {
-  --tint: #80C8FF;
-
-  background-image:
-      radial-gradient(ellipse 90% 55% at 0% 64px, color-mix(in srgb, #64B5F6 10%, transparent), transparent),
-      radial-gradient(ellipse 50% 30% at 0% 64px, color-mix(in srgb, #29B6F6 4%, transparent), transparent);
-}
-
-.agent-card {
-  --tint: #5E35B1;
-
-  grid-area: agent;
-  border-left: 1px solid var(--vp-c-divider);
-}
-
-html.dark .agent-card {
-  --tint: #B388FF;
-
-  background-image:
-      radial-gradient(ellipse 90% 55% at 0% 64px, color-mix(in srgb, var(--agent-accent) 10%, transparent), transparent),
-      radial-gradient(ellipse 50% 30% at 0% 64px, color-mix(in srgb, #AB47BC 4%, transparent), transparent);
-}
-
-
-.notes {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin: 12px 0 0;
-}
-
-.note {
-  display: flex;
-  align-items: flex-start;
-  gap: 16px;
-  padding: 6px 0;
-  font-weight: 500;
-  color: var(--vp-c-text-1);
-}
-
-.note .icon {
-  flex-shrink: 0;
-  width: 18px;
-  margin-top: 0.25rem;
-  font-size: 1rem;
-  color: var(--tint);
-}
-
 
 /* Windows */
 
-/* the body has no box of its own here, so the page's window can reach up beside the title bar */
+/* the body has no box of its own here, so the page's window can reach up beside the title bar; the code keeps room
+   for its longest line (68 characters) and the page takes the rest, up to 42rem */
 .window {
-  grid-area: window;
+  --code-width: 640px;
+
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 36rem;
+  grid-template-columns: minmax(0, 1fr) min(42rem, 100% - var(--code-width));
   grid-template-rows: auto 1fr;
   grid-template-areas:
       "header viewer"
       "main viewer";
   min-width: 0;
-  border-bottom: 1px solid var(--vp-c-divider);
   background-color: var(--vp-c-bg);
 }
 
@@ -409,14 +331,24 @@ html.dark .agent-card {
   gap: 6px;
   padding: 8px 16px 8px 24px;
   border-bottom: 1px solid var(--vp-c-divider);
-  background-color: light-dark(var(--vp-c-bg), var(--vp-c-bg-alt));
+  background-color: var(--vp-c-bg);
+}
+
+/* the code's bar sits in the panel's top-left corner, so its lights start where the 32px rounding ends */
+.window > .window-header {
+  padding-left: 32px;
+}
+
+/* the title bars wear the panel's own surface; it is see-through, so the canvas and its grain go under it */
+html.dark .window-header {
+  background-color: var(--custom-page-bg);
+  background-image: var(--surface-sheen), linear-gradient(var(--surface) 0 0), var(--canvas-grain);
 }
 
 .window-body {
   display: contents;
 }
 
-.code-source,
 .result {
   transition: opacity 0.45s ease;
 }
@@ -465,12 +397,22 @@ html.dark .agent-card {
   background-color: var(--lit);
 }
 
-/* as tall as the most lines the session shows, so the window keeps its height; a longer file scrolls by --scroll */
+/* as tall as the most lines the session shows, so the window keeps its height; a longer file scrolls by --scroll,
+   and where the window is narrower than an edit, its lines move sideways by --shift */
+@property --shift {
+  syntax: "<number> | <length>";
+  inherits: true;
+  initial-value: 0;
+}
+
 .code-source {
+  --code-lines: var(--session-lines);
+
   flex-grow: 1;
   padding-bottom: 12px;
   font-size: 0.875rem;
   line-height: 1.5;
+  transition: opacity 0.45s ease, --shift 0.6s ease;
 }
 
 .code-source pre {
@@ -479,6 +421,12 @@ html.dark .agent-card {
   overflow-y: hidden;
 }
 
+.probe {
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+}
+
 .code-source :deep(code) {
   display: block;
   translate: 0 calc(var(--scroll) * -1lh);
@@ -494,6 +442,13 @@ html.dark .agent-card {
   padding: 0 4px 0 24px;
 }
 
+/* the code moves under the line numbers, so the part moved past the text's start is cut off */
+.code-source :deep(.text) {
+  display: inline-block;
+  translate: calc(var(--shift) * -1ch) 0;
+  clip-path: inset(-4px 0 -4px calc(var(--shift) * 1ch));
+}
+
 /* a blank slot holds a space, so every line keeps one baseline */
 .code-source :deep(.gutter) {
   display: inline-block;
@@ -593,6 +548,11 @@ html.dark .agent-card {
   transform-origin: 0 0;
 }
 
+/* a little see-through, so the white page does not glare on the dark desk */
+html.dark .page {
+  opacity: 0.88;
+}
+
 .page img {
   position: absolute;
   inset: 0;
@@ -606,6 +566,24 @@ html.dark .agent-card {
   opacity: 1;
 }
 
+/* marks what the last request changed, once the page shows it, like a highlighter pen; multiply keeps the text
+   readable and the corners are divided by the page's scale, as the page's own are */
+.mark {
+  position: absolute;
+  background: rgba(255, 214, 10, 0.5);
+  mix-blend-mode: multiply;
+  border-radius: calc(3px / var(--scale));
+  opacity: 0;
+  scale: 1.04;
+  transition: opacity 0.32s ease, scale 0.32s ease;
+}
+
+.mark.shown {
+  opacity: 1;
+  scale: 1;
+  transition: opacity 0.4s ease 0.3s, scale 0.4s ease 0.3s;
+}
+
 
 /* Composer */
 
@@ -717,6 +695,11 @@ html.dark .agent-card {
   visibility: hidden;
 }
 
+.composer-placeholder {
+  font-weight: 500;
+  color: var(--composer-placeholder);
+}
+
 /* as wide as the caret, which follows a request until it is sent, so a request wraps where its sizer does */
 .composer-sizer::after {
   content: "";
@@ -832,9 +815,20 @@ html.dark .agent-card {
 }
 
 
-/* below 1280px the page's window goes under the code and the composer under the page, so the composer still sticks
-   over the code */
-@media screen and (max-width: 1280px) {
+/* the code and the page stay side by side down to 1024px, with smaller code */
+@media screen and (max-width: 1279px) {
+  .window {
+    --code-width: 600px;
+  }
+
+  .code-source {
+    font-size: 0.8125rem;
+  }
+}
+
+/* below 1024px the page's window goes under the code, with the composer between them; the code shows fewer lines,
+   so the code, the request and the page fit on one screen */
+@media screen and (max-width: 1023px) {
   .window {
     display: flex;
     flex-direction: column;
@@ -849,20 +843,25 @@ html.dark .agent-card {
     display: contents;
   }
 
-  /* the composer sticks within the body here, so the code's top padding is its own */
   .code-source {
+    --code-lines: min(var(--session-lines), 16);
+
     padding-top: 12px;
   }
 
   .composer {
-    order: 1;
-    margin-top: 24px;
+    position: relative;
+    bottom: auto;
   }
 
   .viewer {
     border-left: none;
     border-top: 1px solid var(--vp-c-divider);
-    border-bottom: 1px solid var(--vp-c-divider);
+  }
+
+  /* mid-panel here, where the panel has no sheen */
+  html.dark .viewer .window-header {
+    background-image: linear-gradient(var(--surface) 0 0), var(--canvas-grain);
   }
 
   .result {
@@ -872,19 +871,6 @@ html.dark .agent-card {
 }
 
 @media screen and (max-width: 760px) {
-  .quick-start {
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-areas:
-        "window"
-        "code"
-        "agent";
-  }
-
-  .agent-card {
-    border-left: none;
-    border-top: 1px solid var(--vp-c-divider);
-  }
-
   .window-header {
     padding: 8px 16px;
   }
@@ -894,11 +880,13 @@ html.dark .agent-card {
   }
 
   .code-source {
-    line-height: 1.25;
+    --code-lines: min(var(--session-lines), 14);
+
+    font-size: 0.75rem;
   }
 
   .composer {
-    margin: 16px;
+    margin: 4px 16px 16px;
   }
 }
 
diff --git a/docs/.vitepress/theme/homepage/HomePageQuickStartCards.vue b/docs/.vitepress/theme/homepage/HomePageQuickStartCards.vue
new file mode 100644
index 0000000..8766ced
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/HomePageQuickStartCards.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
+import { faArrowRightArrowLeft, faBolt, faCode, faCodeBranch, faComments, faLightbulbOn, faPuzzlePiece, faShieldCheck } from "@fortawesome/pro-regular-svg-icons";
+import Icon from "../Icon.vue";
+import QuickStartCodeFigure from "./QuickStartCodeFigure.vue";
+import QuickStartAgentFigure from "./QuickStartAgentFigure.vue";
+
+interface Card {
+  kind: "code-card" | "agent-card";
+  title: string;
+  label: string;
+  notes: {
+    icon: IconDefinition;
+    text: string;
+  }[];
+}
+
+const cards: Card[] = [
+  {
+    kind: "code-card",
+    title: "Create and review in C#",
+    label: "Why write documents in C#",
+    notes: [
+      { icon: faCode, text: "Write loops and conditions in C#, not templates" },
+      { icon: faPuzzlePiece, text: "Build reusable components with classes and methods" },
+      { icon: faLightbulbOn, text: "Use IntelliSense, type checking and refactoring in IDE" },
+      { icon: faCodeBranch, text: "Track changes and easily review in version-control" }
+    ]
+  },
+  {
+    kind: "agent-card",
+    title: "Develop with AI agents",
+    label: "How an AI assistant helps",
+    notes: [
+      { icon: faArrowRightArrowLeft, text: "Easily migrate legacy HTML reports to QuestPDF" },
+      { icon: faComments, text: "Create and edit documents confidently with prompts" },
+      { icon: faBolt, text: "Ship new documents and changes much faster" },
+      { icon: faShieldCheck, text: "Keep AI changes type-checked and reviewable" }
+    ]
+  }
+];
+</script>
+
+<template>
+  <div class="quick-start-cards">
+    <article v-for="card of cards" :key="card.kind" class="panel quick-start-card" :class="card.kind">
+      <figure class="card-figure">
+        <QuickStartCodeFigure v-if="card.kind === 'code-card'" />
+        <QuickStartAgentFigure v-else />
+      </figure>
+
+      <h2 class="card-title">{{ card.title }}</h2>
+
+      <ul class="notes" :aria-label="card.label">
+        <li v-for="note of card.notes" :key="note.text" class="note">
+          <Icon :icon="note.icon" />
+          <span>{{ note.text }}</span>
+        </li>
+      </ul>
+    </article>
+  </div>
+</template>
+
+<style scoped>
+
+.quick-start-cards {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--section-gap);
+}
+
+.quick-start-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.code-card {
+  --tint: #0288D1;
+}
+
+/* the cards' own glows go under the panel sheen */
+html.dark .code-card {
+  --tint: #80C8FF;
+
+  background-image:
+      var(--surface-sheen),
+      radial-gradient(ellipse 90% 55% at 0% 64px, color-mix(in srgb, #64B5F6 10%, transparent), transparent),
+      radial-gradient(ellipse 50% 30% at 0% 64px, color-mix(in srgb, #29B6F6 4%, transparent), transparent);
+}
+
+.agent-card {
+  --tint: #5E35B1;
+}
+
+html.dark .agent-card {
+  --tint: #B388FF;
+
+  background-image:
+      var(--surface-sheen),
+      radial-gradient(ellipse 90% 55% at 0% 64px, color-mix(in srgb, #9575CD 10%, transparent), transparent),
+      radial-gradient(ellipse 50% 30% at 0% 64px, color-mix(in srgb, #AB47BC 4%, transparent), transparent);
+}
+
+html.dark .quick-start-card .card-title {
+  color: color-mix(in srgb, var(--tint) 60%, var(--vp-c-text-1));
+}
+
+
+/* both figures are 151px tall (168px at 90% zoom); the fixed box keeps the two titles level if one ever changes */
+.card-figure {
+  display: flex;
+  align-items: flex-end;
+  height: 151px;
+  margin: 0 0 48px;
+}
+
+.notes {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 20px 0 0;
+}
+
+.note {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 6px 0;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+}
+
+.note .icon {
+  flex-shrink: 0;
+  width: 18px;
+  margin-top: 0.25rem;
+  font-size: 1rem;
+  color: var(--tint);
+}
+
+@media screen and (max-width: 760px) {
+  .quick-start-cards {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 24px;
+  }
+}
+
+</style>
diff --git a/docs/.vitepress/theme/homepage/HomePageSeal.vue b/docs/.vitepress/theme/homepage/HomePageSeal.vue
new file mode 100644
index 0000000..ae37ded
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/HomePageSeal.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { useId } from "vue";
+import { faCheck } from "@fortawesome/pro-solid-svg-icons";
+
+/* drawn in a 100-unit box; the gradient ids are per instance */
+const id = useId();
+
+const point = (r: number, angle: number) => `${(50 + r * Math.cos(angle)).toFixed(2)},${(50 + r * Math.sin(angle)).toFixed(2)}`;
+
+const LOBES = 16;
+
+const rosette = (() => {
+  let d = `M ${point(42, -Math.PI / 2)}`;
+  for (let i = 1; i <= LOBES; i++)
+    d += ` A 8.6,8.6 0 0 1 ${point(42, -Math.PI / 2 + i * 2 * Math.PI / LOBES)}`;
+  return d + " Z";
+})();
+
+const [checkWidth, checkHeight, , , checkPath] = faCheck.icon;
+const CHECK = 30;
+</script>
+
+<template>
+  <svg class="seal" viewBox="0 0 100 100" aria-hidden="true">
+    <defs>
+      <linearGradient :id="`${id}-chip`" x1="0" y1="0" x2="0.4" y2="1">
+        <stop class="chip-top" offset="0" />
+        <stop class="chip-bottom" offset="1" />
+      </linearGradient>
+      <linearGradient :id="`${id}-disc`" x1="0" y1="0" x2="0.4" y2="1">
+        <stop class="disc-top" offset="0" />
+        <stop class="disc-bottom" offset="1" />
+      </linearGradient>
+    </defs>
+
+    <path class="chip" :d="rosette" :fill="`url(#${id}-chip)`" />
+    <circle class="disc" cx="50" cy="50" r="35" :fill="`url(#${id}-disc)`" />
+
+    <svg :x="50 - CHECK / 2" :y="50 - CHECK / 2" :width="CHECK" :height="CHECK" :viewBox="`0 0 ${checkWidth} ${checkHeight}`">
+      <path class="check" :d="checkPath as string" />
+    </svg>
+  </svg>
+</template>
+
+<style scoped>
+
+.seal {
+  --shadow-near: light-dark(rgba(16, 24, 40, 0.05), rgba(0, 0, 0, 0.18));
+  --shadow-far: light-dark(rgba(16, 24, 40, 0.08), rgba(0, 0, 0, 0.26));
+
+  display: block;
+  overflow: visible;
+  filter:
+      drop-shadow(0 1px 2px var(--shadow-near))
+      drop-shadow(0 6px 12px var(--shadow-far));
+}
+
+.chip {
+  stroke: light-dark(rgba(25, 118, 210, 0.14), rgba(100, 181, 246, 0.12));
+  stroke-width: 1;
+}
+
+.chip-top {
+  stop-color: light-dark(#EBF4FD, #1B2B3F);
+}
+
+.chip-bottom {
+  stop-color: light-dark(#E0EDFB, #172538);
+}
+
+.disc-top {
+  stop-color: light-dark(#5AA9F0, #3489D6);
+}
+
+.disc-bottom {
+  stop-color: light-dark(#3C88DA, #2167B5);
+}
+
+.check {
+  fill: #FFF;
+}
+
+</style>
diff --git a/docs/.vitepress/theme/homepage/HomePageSpecimen.vue b/docs/.vitepress/theme/homepage/HomePageSpecimen.vue
new file mode 100644
index 0000000..c7998e2
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/HomePageSpecimen.vue
@@ -0,0 +1,261 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, useId } from "vue";
+import HomePageSeal from "./HomePageSeal.vue";
+import { observeOnScreen, reducedMotion } from "./ctaTimeline";
+
+/* A rendered page with the seal stamped on its top corner: the validated output itself, with no accent on the page.
+   Width in px, the seal scales with it. With `scan`, a validator's laser sweeps down the sheet and tints what it has
+   checked, and the seal stamps once the beam has passed the page. */
+const id = useId();
+
+const props = withDefaults(defineProps<{ width?: number; scan?: boolean }>(), { width: 150, scan: false });
+
+const rows = [0, 1, 2, 3, 4];
+
+const root = ref<HTMLElement>();
+const running = ref(false);
+let visibility: IntersectionObserver | undefined;
+
+onMounted(() => {
+  if (!props.scan || reducedMotion()) return;
+
+  /* a third of the sheet is enough: on phones the card clips nearly half of it */
+  visibility = observeOnScreen(root.value!, onScreen => running.value = onScreen, 0.35);
+});
+
+onBeforeUnmount(() => visibility?.disconnect());
+</script>
+
+<template>
+  <div ref="root" class="specimen" :class="{ running, scanning: scan }" :style="{ '--w': `${width}px` }" aria-hidden="true">
+    <svg class="sheet" viewBox="0 0 148 200">
+      <defs>
+        <linearGradient :id="`${id}-paper`" x1="0" y1="0" x2="0" y2="1">
+          <stop class="paper-top" offset="0" />
+          <stop class="paper-bottom" offset="1" />
+        </linearGradient>
+        <linearGradient :id="`${id}-glow`" x1="0" y1="0" x2="0" y2="1">
+          <stop class="glow-stop" offset="0" stop-opacity="0" />
+          <stop class="glow-stop" offset="0.5" stop-opacity="0.4" />
+          <stop class="glow-stop" offset="1" stop-opacity="0" />
+        </linearGradient>
+        <clipPath :id="`${id}-page`">
+          <rect x="0.5" y="0.5" width="147" height="199" rx="3" />
+        </clipPath>
+      </defs>
+
+      <rect class="paper" x="0.5" y="0.5" width="147" height="199" rx="3" :fill="`url(#${id}-paper)`" />
+
+      <rect class="bar strong" x="14" y="16" width="48" height="7" rx="1.5" />
+      <rect class="bar soft" x="14" y="28" width="30" height="3" rx="1" />
+      <rect class="bar" x="100" y="16" width="34" height="3" rx="1" />
+      <rect class="bar soft" x="100" y="23" width="28" height="3" rx="1" />
+      <rect class="bar soft" x="100" y="30" width="30" height="3" rx="1" />
+
+      <rect class="bar strong" x="14" y="48" width="26" height="4" rx="1" />
+      <rect class="bar soft" x="14" y="56" width="42" height="3" rx="1" />
+      <rect class="bar soft" x="14" y="62" width="38" height="3" rx="1" />
+      <rect class="bar strong" x="82" y="48" width="26" height="4" rx="1" />
+      <rect class="bar soft" x="82" y="56" width="46" height="3" rx="1" />
+      <rect class="bar soft" x="82" y="62" width="36" height="3" rx="1" />
+
+      <rect class="bar strong" x="14" y="80" width="120" height="9" rx="1.5" />
+      <template v-for="row of rows" :key="row">
+        <rect class="bar" x="18" :y="97 + row * 12" width="44" height="3.5" rx="1" />
+        <rect class="bar soft" x="76" :y="97 + row * 12" width="14" height="3.5" rx="1" />
+        <rect class="bar soft" x="96" :y="97 + row * 12" width="14" height="3.5" rx="1" />
+        <rect class="bar" x="116" :y="97 + row * 12" width="18" height="3.5" rx="1" />
+        <line class="rule" x1="14" :y1="106 + row * 12" x2="134" :y2="106 + row * 12" />
+      </template>
+
+      <rect class="bar soft" x="86" y="170" width="20" height="3" rx="1" />
+      <rect class="bar strong" x="112" y="169" width="22" height="5" rx="1" />
+
+      <!-- the laser: a wash over everything already checked, a soft glow and a crisp line, all moving together -->
+      <g v-if="scan" class="scan" :clip-path="`url(#${id}-page)`">
+        <g class="beam">
+          <rect class="checked" x="0" y="-200" width="148" height="200" />
+          <rect class="glow" x="0" y="-12" width="148" height="24" :fill="`url(#${id}-glow)`" />
+          <line class="laser" x1="0" y1="0" x2="148" y2="0" />
+          <line class="laser-core" x1="0" y1="0" x2="148" y2="0" />
+        </g>
+      </g>
+
+      <!-- the stamp's ripple, centred on the seal (top 0.12w, right -0.15w, size 0.49w, in page units) -->
+      <circle v-if="scan" class="ripple" cx="133.9" cy="54" r="30.5" />
+    </svg>
+
+    <HomePageSeal class="seal" />
+  </div>
+</template>
+
+<style scoped>
+
+.specimen {
+  --bone: light-dark(
+      color-mix(in srgb, var(--vp-c-text-1) 13%, transparent),
+      color-mix(in srgb, var(--vp-c-text-1) 15%, transparent));
+  --bone-strong: light-dark(
+      color-mix(in srgb, var(--vp-c-text-1) 26%, transparent),
+      color-mix(in srgb, var(--vp-c-text-1) 30%, transparent));
+  --hairline: color-mix(in srgb, var(--vp-c-text-1) 8%, transparent);
+  --shadow-near: light-dark(rgba(16, 24, 40, 0.04), rgba(0, 0, 0, 0.14));
+  --shadow-far: light-dark(rgba(16, 24, 40, 0.09), rgba(0, 0, 0, 0.24));
+  --laser: light-dark(#3A93E8, #64B5F6);
+  --cycle: 8s;
+
+  position: relative;
+  width: var(--w);
+  height: calc(var(--w) * 200 / 148);
+}
+
+.sheet {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  filter:
+      drop-shadow(0 1px 2px var(--shadow-near))
+      drop-shadow(0 14px 22px var(--shadow-far));
+}
+
+.paper {
+  stroke: light-dark(rgba(16, 24, 40, 0.06), rgba(255, 255, 255, 0.07));
+}
+
+.paper-top {
+  stop-color: light-dark(#FFFFFF, rgba(255, 255, 255, 0.06));
+}
+
+.paper-bottom {
+  stop-color: light-dark(#F9FAFC, rgba(255, 255, 255, 0.035));
+}
+
+.bar {
+  fill: var(--bone);
+}
+
+.bar.strong {
+  fill: var(--bone-strong);
+}
+
+.bar.soft {
+  opacity: 0.7;
+}
+
+.rule {
+  stroke: var(--hairline);
+  stroke-width: 0.75;
+}
+
+
+/* Scan: the beam group translates in page units (CSS px on SVG elements are user units); it fades in at the top
+   edge and out past the bottom so the wash never snaps back. Paused until the sheet is on screen. */
+.scan {
+  opacity: 0;
+  animation: scan-fade var(--cycle) linear infinite;
+  animation-play-state: paused;
+}
+
+.beam {
+  animation: scan-sweep var(--cycle) linear infinite;
+  animation-play-state: paused;
+}
+
+.specimen.running .scan,
+.specimen.running .beam,
+.specimen.running .ripple,
+.specimen.running.scanning .seal {
+  animation-play-state: running;
+}
+
+.checked {
+  fill: var(--laser);
+  opacity: 0.06;
+}
+
+.glow-stop {
+  stop-color: var(--laser);
+}
+
+.laser {
+  stroke: var(--laser);
+  stroke-width: 1.4;
+  opacity: 0.9;
+}
+
+.laser-core {
+  stroke: light-dark(#FFFFFF, #E3F2FD);
+  stroke-width: 0.45;
+  opacity: 0.8;
+}
+
+@keyframes scan-sweep {
+  0% { transform: translateY(-4px); }
+  40.3% { transform: translateY(204px); }
+  100% { transform: translateY(204px); }
+}
+
+@keyframes scan-fade {
+  0% { opacity: 0; }
+  2.6% { opacity: 1; }
+  37.7% { opacity: 1; }
+  44.2% { opacity: 0; }
+  100% { opacity: 0; }
+}
+
+/* Stamp: when the beam has left the visible page (35.75%), the seal presses (up, then a small settle) and a ring
+   spreads from it */
+.scanning .seal {
+  animation: seal-stamp var(--cycle) ease-in-out infinite;
+  animation-play-state: paused;
+}
+
+.ripple {
+  fill: none;
+  stroke: var(--laser);
+  stroke-width: 1.4;
+  vector-effect: non-scaling-stroke;
+  opacity: 0;
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: seal-ripple var(--cycle) linear infinite;
+  animation-play-state: paused;
+}
+
+@keyframes seal-stamp {
+  0%, 35.75% { transform: rotate(8deg) scale(1); }
+  37.12% { transform: rotate(8deg) scale(1.1); }
+  38.48% { transform: rotate(8deg) scale(1); }
+  40.24% { transform: rotate(8deg) scale(0.97); }
+  41.99%, 100% { transform: rotate(8deg) scale(1); }
+}
+
+@keyframes seal-ripple {
+  0%, 36.98% { opacity: 0; transform: scale(1); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
+  37.05% { opacity: 0.5; transform: scale(1); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
+  48.23% { opacity: 0; transform: scale(1.72); }
+  100% { opacity: 0; transform: scale(1.72); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .scan,
+  .ripple {
+    display: none;
+  }
+
+  .scanning .seal {
+    animation: none;
+  }
+}
+
+.seal {
+  position: absolute;
+  top: calc(var(--w) * 0.12);
+  right: calc(var(--w) * -0.15);
+  width: calc(var(--w) * 0.49);
+  height: calc(var(--w) * 0.49);
+  transform: rotate(8deg);
+}
+
+</style>
diff --git a/docs/.vitepress/theme/homepage/HomePageStack.vue b/docs/.vitepress/theme/homepage/HomePageStack.vue
new file mode 100644
index 0000000..f966238
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/HomePageStack.vue
@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { faCloud, faCode, faDesktop, faLock } from "@fortawesome/pro-regular-svg-icons";
+import Icon from "../Icon.vue";
+
+/* The stack the library runs in, top down: the application with QuestPDF inside, then what each layer accepts.
+   Lower slabs are wider, so the stack is read as one. Facts as the package README states them. */
+const layers = [
+  { name: "Runtime", values: [".NET 6+", ".NET Framework 4.6.2+", "Native AOT"], icon: faCode },
+  { name: "Operating system", values: ["Windows", "Linux", "Alpine", "macOS"], icon: faDesktop },
+  { name: "Hosting", values: ["Docker", "Kubernetes", "Azure", "AWS", "Google Cloud"], icon: faCloud }
+];
+</script>
+
+<template>
+  <div class="stack" aria-hidden="true">
+    <div class="layer top">
+      <span class="name">Your application</span>
+      <span class="chip">QuestPDF</span>
+      <span class="lock"><Icon :icon="faLock" />No network calls</span>
+    </div>
+
+    <div v-for="(layer, index) of layers" :key="layer.name" class="layer" :style="{ '--depth': index + 1 }">
+      <Icon class="layer-icon" :icon="layer.icon" />
+      <span class="name">{{ layer.name }}</span>
+      <span class="values">
+        <template v-for="(value, i) of layer.values" :key="value">
+          <span v-if="i > 0" class="dot">·</span>
+          <span class="value">{{ value }}</span>
+        </template>
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+.stack {
+  --accent: light-dark(#1976D2, #64B5F6);
+  --line: color-mix(in srgb, var(--vp-c-text-1) 14%, transparent);
+
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+  user-select: none;
+}
+
+.layer {
+  --inset: calc((3 - var(--depth, 0)) * 10px);
+
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  min-height: 40px;
+  margin-inline: var(--inset);
+  padding: 8px 16px;
+  border-radius: 10px;
+  background-color: var(--surface-inner);
+  box-shadow:
+      inset 0 0 0 1px var(--line),
+      0 3px 0 -1px color-mix(in srgb, var(--vp-c-text-1) calc(10% - var(--depth, 0) * 2%), transparent);
+}
+
+.layer.top {
+  --depth: 0;
+
+  background-color: color-mix(in srgb, var(--accent) 12%, transparent);
+  box-shadow:
+      inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
+      0 3px 0 -1px color-mix(in srgb, var(--accent) 30%, transparent);
+}
+
+.layer-icon {
+  flex-shrink: 0;
+  font-size: 1.125rem;
+  color: var(--accent);
+}
+
+.name {
+  flex-shrink: 0;
+  min-width: 112px;
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.top .name {
+  min-width: 128px;
+  color: var(--accent);
+}
+
+.chip {
+  padding: 2px 10px;
+  border-radius: 6px;
+  background-color: var(--accent);
+  color: #FFF;
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  font-weight: 700;
+}
+
+.lock {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 600;
+  white-space: nowrap;
+  color: var(--accent);
+}
+
+.lock .icon {
+  font-size: 1rem;
+}
+
+.values {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--vp-c-text-2);
+}
+
+.value {
+  white-space: nowrap;
+}
+
+.dot {
+  margin: 0 0.6em;
+  color: var(--vp-c-text-3);
+}
+
+@media screen and (max-width: 560px) {
+  .layer {
+    --inset: calc((3 - var(--depth, 0)) * 4px);
+
+    flex-wrap: wrap;
+    gap: 4px 12px;
+  }
+
+  .name,
+  .top .name {
+    min-width: 0;
+    width: 100%;
+  }
+
+  .lock {
+    margin-left: 0;
+  }
+}
+
+</style>
diff --git a/docs/.vitepress/theme/homepage/HomePageStatistics.vue b/docs/.vitepress/theme/homepage/HomePageStatistics.vue
new file mode 100644
index 0000000..91d4616
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/HomePageStatistics.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
+import { faArrowDownToLine, faCalendarCheck, faStar, faUsers } from "@fortawesome/pro-regular-svg-icons";
+import Icon from "../Icon.vue";
+import { data as statistics } from "../statistics.data";
+
+const icons: Record<string, IconDefinition> = {
+  "GitHub stars": faStar,
+  "NuGet downloads": faArrowDownToLine,
+  "paying customers": faUsers,
+  "years in production": faCalendarCheck
+};
+</script>
+
+<template>
+  <ul class="statistics">
+    <li v-for="statistic in statistics" :key="statistic.label">
+      <a :href="statistic.link" :target="statistic.link.startsWith('http') ? '_blank' : undefined" class="statistic">
+        <span class="headline">
+          <Icon :icon="icons[statistic.label]" />
+          <span class="value">{{ statistic.value }}</span>
+        </span>
+
+        <span class="label">{{ statistic.label }}</span>
+      </a>
+    </li>
+  </ul>
+</template>
+
+
+<style scoped>
+
+/* no divider around the stats: extra space on both sides separates them, 64px in all */
+.statistics {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 40px 24px;
+  margin-block: 32px;
+}
+
+@media screen and (max-width: 640px) {
+  .statistics {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 40px 16px;
+  }
+}
+
+/* each stat is a link whose parts set their own colours, so the global link hover never reaches them */
+.statistic {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  width: fit-content;
+  margin-inline: auto;
+  border-radius: 8px;
+  text-align: center;
+  transition: transform 0.18s ease-out;
+}
+
+/* hover: the whole stat grows and the label brightens; no surface, so the hit area stays invisible */
+.statistic:hover {
+  transform: scale(1.08);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .statistic {
+    transition: none;
+  }
+}
+
+.statistic:hover .label {
+  color: var(--vp-c-text-1);
+}
+
+.statistic:focus-visible {
+  outline: 2px solid var(--vp-c-brand-1);
+  outline-offset: 6px;
+}
+
+.headline {
+  display: inline-flex;
+  align-items: center;
+  gap: 14px;
+}
+
+/* same height for every glyph, width from its own shape, as Font Awesome sizes them; a 1em square shrinks the wide ones */
+.headline .icon {
+  width: auto;
+  height: 1em;
+  font-size: 1.75rem;
+  color: var(--vp-c-brand-1);
+}
+
+.value {
+  font-size: 1.875rem;
+  line-height: 1;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+  color: light-dark(#142630, var(--vp-c-text-1));
+}
+
+.label {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+  color: var(--vp-c-text-2);
+}
+
+/* grey text collides with the light canvas, and regular text looks thinner on white, so half a weight step up */
+html:not(.dark) .label {
+  font-weight: 450;
+  color: var(--vp-c-text-1);
+}
+
+</style>
diff --git a/docs/.vitepress/theme/homepage/HomePageTrust.vue b/docs/.vitepress/theme/homepage/HomePageTrust.vue
index 84a7f0a..7b8e516 100644
--- a/docs/.vitepress/theme/homepage/HomePageTrust.vue
+++ b/docs/.vitepress/theme/homepage/HomePageTrust.vue
@@ -1,103 +1,54 @@
 <script setup lang="ts">
-import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
-import { faArrowRight } from "@fortawesome/pro-regular-svg-icons";
-import { faApple, faAws, faDocker, faLinux, faMicrosoft, faWindows } from "@fortawesome/free-brands-svg-icons";
+import { faCheck } from "@fortawesome/pro-regular-svg-icons";
 import Icon from "../Icon.vue";
+import HomePageSpecimen from "./HomePageSpecimen.vue";
+import HomePageLayers from "./HomePageLayers.vue";
 
-interface StandardsCategory {
-  title: string;
-  levels: string[];
+/* each standard says what it is for; wording stays at "for", never "complies with the law" */
+interface Standard {
+  name: string;
+  purpose: string;
 }
 
-const standards : StandardsCategory[] = [
-  {
-    title: "Archiving",
-    levels: ["PDF/A-2b", "PDF/A-2u", "PDF/A-2a", "PDF/A-3b", "PDF/A-3u", "PDF/A-3a"]
-  },
-  {
-    title: "Accessibility",
-    levels: ["PDF/UA-1"]
-  },
-  {
-    title: "E-invoicing",
-    levels: ["EN 16931", "ZUGFeRD", "Factur-X"]
-  }
-];
-
-interface PlatformGroup {
-  label: string;
-  platforms: string[];
-}
-
-const platformGroups : PlatformGroup[] = [
-  {
-    /* as the package README states them: .NET 6 and later, .NET Framework 4.6.2 and later; Native AOT as
-       listed under "Recently delivered" on the roadmap */
-    label: "Runtimes",
-    platforms: [".NET 6+", ".NET Framework 4.6.2+", "Native AOT"]
-  },
-  {
-    label: "Operating systems",
-    platforms: ["Windows", "Linux", "macOS"]
-  },
-  {
-    label: "Deployment",
-    platforms: ["Docker", "Azure", "AWS"]
-  }
+const standards: Standard[] = [
+  { name: "PDF/A", purpose: "long-term document archiving and reliable visual preservation" },
+  { name: "PDF/UA", purpose: "universal accessibility, screen readers, and assistive tech" },
+  { name: "Factur-X / ZUGFeRD", purpose: "e‑invoicing readable by humans and machines" }
 ];
-
-/* Azure takes Microsoft's mark: Font Awesome has none for Azure */
-const platformIcons: Record<string, IconDefinition> = {
-  Windows: faWindows,
-  Linux: faLinux,
-  macOS: faApple,
-  Docker: faDocker,
-  Azure: faMicrosoft,
-  AWS: faAws
-};
-
 </script>
 
 <template>
   <div class="trust">
-    <div class="panel compliance">
-      <h2 class="card-title">Industry-standard compliant output</h2>
+    <article class="panel compliance">
+      <h2 class="card-title">Validated, standards-compliant output</h2>
       <p class="card-description">
-        Every build is automatically validated with the independent, trusted and open-source
+        Every release is tested against
         <a href="https://verapdf.org/" target="_blank">veraPDF</a> and
-        <a href="https://www.mustangproject.org/" target="_blank">Mustang</a> validators.
+        <a href="https://www.mustangproject.org/" target="_blank">Mustang</a>,
+        the independent, open-source, industry-standard validators.
       </p>
 
-      <div class="standards">
-        <section v-for="category of standards" :key="category.title" class="standards-category">
-          <h3 class="label">{{ category.title }}</h3>
-          <div class="standards-badges">
-            <span v-for="level in category.levels" :key="level">{{ level }}</span>
-          </div>
-        </section>
-      </div>
-    </div>
-
-    <section class="panel cells" aria-label="Enterprise-grade foundations">
-      <a href="/security-policy" class="cell fact">
-        <span class="label">
-          <span class="label-text">Data privacy</span>
-          <Icon class="fact-arrow" :icon="faArrowRight" />
-        </span>
-        <span class="fact-text">No network calls, no telemetry, no license server. Works air-gapped.</span>
-      </a>
-
-      <section v-for="group of platformGroups" :key="group.label" class="cell">
-        <h3 class="label">{{ group.label }}</h3>
-
-        <ul class="platforms">
-          <li v-for="platform of group.platforms" :key="platform" class="platform">
-            <Icon v-if="platformIcons[platform]" class="platform-icon" :icon="platformIcons[platform]" />
-            {{ platform }}
-          </li>
-        </ul>
-      </section>
-    </section>
+      <ul class="standards">
+        <li v-for="standard of standards" :key="standard.name" class="standard">
+          <span class="standard-check"><Icon :icon="faCheck" /></span>
+          <p class="standard-text">
+            <strong class="standard-name">{{ standard.name }}</strong> for {{ standard.purpose }}
+          </p>
+        </li>
+      </ul>
+
+      <!-- the validated page itself, leaning out of the corner; the panel clips it -->
+      <figure class="page-figure">
+        <HomePageSpecimen :width="172" scan />
+      </figure>
+    </article>
+
+    <article class="panel platform">
+      <h2 class="card-title">Runs entirely inside your application</h2>
+      <p class="card-description">Document generation happens locally, in your own process. No network calls, no telemetry, no license server. Works air-gapped.</p>
+
+      <HomePageLayers class="platform-layers" />
+    </article>
   </div>
 </template>
 
@@ -106,7 +57,7 @@ const platformIcons: Record<string, IconDefinition> = {
 .trust {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 32px;
+  gap: var(--section-gap);
 }
 
 @media screen and (max-width: 1180px) {
@@ -115,197 +66,101 @@ const platformIcons: Record<string, IconDefinition> = {
   }
 }
 
-
-.label {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 0.75rem;
-  line-height: 1.25rem;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--vp-c-text-1);
-}
-
-
-.standards {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px 40px;
-  margin-top: 32px;
+.card-description {
+  margin-top: 20px;
+  text-wrap: pretty;
 }
 
-.standards-category:first-child {
-  flex-basis: 100%;
-}
 
-.standards-badges {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 8px;
-}
+/* Compliance */
 
-.standards-badges > span {
-  display: inline-flex;
-  align-items: center;
-  padding: 8px 10px;
-  line-height: 1;
-  border-radius: 8px;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: var(--vp-c-text-2);
-  border: 1px solid #8884;
+.compliance {
+  overflow: clip;
 }
 
-
 .compliance .card-description a {
   color: var(--vp-c-text-1);
   font-weight: 600;
   text-decoration: underline;
   text-decoration-color: color-mix(in srgb, var(--vp-c-text-1) 30%, transparent);
   text-underline-offset: 3px;
-  transition: text-decoration-color 0.2s;
 }
 
 .compliance .card-description a:hover {
   text-decoration-color: var(--vp-c-text-1);
 }
 
+/* the list keeps clear of the page at its right */
+.standards {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  margin: 32px 0 0;
+  padding: 32px 220px 0 0;
+  border-top: 1px solid var(--vp-c-divider);
+}
 
-/* Cells */
-
-.cells {
+.standard {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  grid-auto-rows: minmax(0, 1fr);
+  grid-template-columns: 24px minmax(0, 1fr);
+  gap: 1rem;
 }
 
-.cell {
-  min-width: 0;
+/* a check on a green tile: on this card a check means "passes validation" */
+.standard-check {
   display: flex;
-  flex-direction: column;
+  align-items: center;
   justify-content: center;
-  padding: 24px 32px;
-}
-
-.cell:nth-child(odd) {
-  padding-left: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  background-color: color-mix(in srgb, light-dark(#2E7D32, #81C784) 12%, transparent);
+  color: light-dark(#2E7D32, #81C784);
+  font-size: 1rem;
 }
 
-.cell:nth-child(even) {
-  padding-right: 0;
-  border-left: 1px solid var(--vp-c-divider);
+.standard-text {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  color: var(--vp-c-text-2);
 }
 
-.cell:nth-child(-n + 2) {
-  padding-top: 0;
+.standard-name {
+  font-weight: 700;
+  color: var(--vp-c-text-1);
 }
 
-.cell:nth-child(n + 3) {
-  padding-bottom: 0;
-  border-top: 1px solid var(--vp-c-divider);
+.page-figure {
+  position: absolute;
+  right: 28px;
+  bottom: -44px;
+  margin: 0;
+  transform: rotate(-7deg);
+  transform-origin: bottom right;
 }
 
-/* :nth-child(n) weighs as much as the two-column rules above, so it replaces their paddings */
-@media screen and (max-width: 540px) {
-  .cells {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  .cell:nth-child(n) {
-    padding: 20px 0;
-    border-left: none;
+@media screen and (max-width: 600px) {
+  .standards {
+    padding-right: 0;
+    padding-bottom: 104px;
   }
 
-  .cell:first-child {
-    padding-top: 0;
-  }
-
-  .cell:last-child {
-    padding-bottom: 0;
-  }
-
-  .cell:nth-child(n + 2) {
-    border-top: 1px solid var(--vp-c-divider);
+  .page-figure {
+    right: 16px;
+    bottom: -110px;
   }
 }
 
-.fact-text {
-  display: block;
-  margin: 6px 0 0;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--vp-c-text-2);
-}
 
-
-.platforms {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin: 6px 0 0;
-}
+/* Platform */
 
 .platform {
   display: flex;
-  align-items: center;
-  gap: 8px;
-  white-space: nowrap;
-}
-
-.platform-icon {
-  flex-shrink: 0;
-  width: 24px;
-  text-align: center;
-  font-size: 1.0625rem;
-  color: var(--vp-c-text-2);
-}
-
-
-.fact {
-  border-radius: 4px;
-}
-
-.fact:focus-visible {
-  outline: 2px solid var(--vp-c-brand-1);
-  outline-offset: 4px;
-}
-
-.label-text {
-  text-decoration: underline transparent;
-  text-decoration-thickness: 1px;
-  text-underline-offset: 3px;
-  transition: text-decoration-color 0.2s;
-}
-
-.fact:is(:hover, :focus-visible) .label-text {
-  text-decoration-color: currentColor;
-}
-
-.fact-arrow {
-  font-size: 1rem;
-  opacity: 0;
-  transform: translateX(-4px);
-  transition: opacity 0.2s, transform 0.25s ease;
-}
-
-.fact:is(:hover, :focus-visible) .fact-arrow {
-  opacity: 1;
-  transform: translateX(0);
+  flex-direction: column;
 }
 
-/* a touch screen never hovers, so there the cues show at rest, or the link would read as plain text */
-@media (hover: none) {
-  .label-text {
-    text-decoration-color: currentColor;
-  }
-
-  .fact-arrow {
-    opacity: 1;
-    transform: none;
-  }
+.platform-layers {
+  margin-top: 36px;
 }
 
 </style>
diff --git a/docs/.vitepress/theme/homepage/QuickStartAgentFigure.vue b/docs/.vitepress/theme/homepage/QuickStartAgentFigure.vue
new file mode 100644
index 0000000..d8dad87
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/QuickStartAgentFigure.vue
@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import { faCircleCheck } from "@fortawesome/pro-regular-svg-icons";
+import { faSparkles } from "@fortawesome/pro-solid-svg-icons";
+import { onBeforeUnmount, onMounted, ref } from "vue";
+import Icon from "../Icon.vue";
+import { fadeInParts, type FadePart, observeOnScreen, reducedMotion, Timeline } from "./ctaTimeline";
+
+/* A request to an agent and its change summary as a skeleton: the prompt bubble, then the summary's checks and
+   diff, with bars where the words were. */
+const checks = [64, 78, 86, 72];
+
+/* Builds once, the first time the figure is mostly on screen, in three soft overlapping fades like the code
+   figure: the prompt, then the summary card, then its checks and footer together. Times in ms. */
+const parts: FadePart[] = [
+  { selector: ".bubble", at: 0, from: "translate(0px, 4px)" },
+  { selector: ".summary", at: 200, from: "translate(0px, 6px)" },
+  { selector: "ul", at: 400, from: "translate(0px, 4px)" },
+  { selector: "footer", at: 400, from: "translate(0px, 4px)" }
+];
+
+const root = ref<HTMLElement>();
+const timeline = new Timeline();
+let visibility: IntersectionObserver | undefined;
+
+onMounted(() => {
+  if (reducedMotion()) return;
+
+  const pass = fadeInParts(timeline, root.value!, parts);
+  pass.forEach(animation => animation.pause());
+
+  /* once done, drop the effects so the figure is plain CSS again */
+  Timeline.settled(pass).then(finished => {
+    if (!finished) return;
+    visibility?.disconnect();
+    pass.forEach(animation => animation.cancel());
+  });
+
+  visibility = observeOnScreen(root.value!, onScreen =>
+    pass.forEach(animation => onScreen ? animation.play() : animation.playState === "running" && animation.pause()));
+});
+
+onBeforeUnmount(() => {
+  visibility?.disconnect();
+  timeline.cancel();
+});
+</script>
+
+<template>
+  <div ref="root" class="figure" aria-hidden="true">
+    <p class="bubble">
+      <span class="prompt-mark">›</span>
+      <span class="bar strong" style="width: 50px"></span><span class="bar strong" style="width: 88px"></span><span class="bar strong" style="width: 64px"></span>
+    </p>
+
+    <div class="summary fragment">
+      <header>
+        <Icon class="spark" :icon="faSparkles" />
+        <span class="bar strong" style="width: 58px"></span><span class="bar strong" style="width: 100px"></span>
+        <span class="pill"></span>
+      </header>
+
+      <ul>
+        <li v-for="(width, index) of checks" :key="index">
+          <Icon :icon="faCircleCheck" />
+          <span class="bar" :style="{ width: `${width}px` }"></span>
+        </li>
+      </ul>
+
+      <footer>
+        <span class="bar" style="width: 64px"></span>
+        <span class="diff">
+          <span class="bar added" style="width: 22px"></span><span class="bar removed" style="width: 22px"></span>
+        </span>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+/* the bars take the card's purple ink, like its title */
+.figure {
+  --ink: color-mix(in srgb, var(--tint) 60%, var(--vp-c-text-1));
+  --bone: light-dark(
+      color-mix(in srgb, var(--ink) 22%, transparent),
+      color-mix(in srgb, var(--ink) 30%, transparent));
+  --bone-strong: light-dark(
+      color-mix(in srgb, var(--ink) 42%, transparent),
+      color-mix(in srgb, var(--ink) 55%, transparent));
+  --ok: light-dark(#2E7D32, #81C784);
+  --del: light-dark(#C62828, #EF9A9A);
+
+  width: 100%;
+  zoom: 0.9;
+  user-select: none;
+}
+
+.bar {
+  display: inline-block;
+  height: 8px;
+  border-radius: 4px;
+  background-color: var(--bone);
+  vertical-align: middle;
+}
+
+.bar + .bar {
+  margin-left: 8px;
+}
+
+.bar.strong {
+  background-color: var(--bone-strong);
+}
+
+.bubble {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  width: fit-content;
+  height: 32px;
+  margin: 0 0 8px;
+  padding: 0 14px;
+  border-radius: 12px 12px 12px 4px;
+  background-color: color-mix(in srgb, var(--tint) 12%, transparent);
+}
+
+.bubble .bar {
+  background-color: color-mix(in srgb, var(--tint) 65%, transparent);
+}
+
+.prompt-mark {
+  margin-right: 8px;
+  color: var(--tint);
+  font-weight: 700;
+}
+
+.summary {
+  width: 100%;
+  max-width: 400px;
+  margin-left: 28px;
+  padding: 12px 16px 10px;
+}
+
+header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 20px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid color-mix(in srgb, var(--vp-c-text-1) 14%, transparent);
+  box-sizing: content-box;
+}
+
+.spark {
+  flex-shrink: 0;
+  font-size: 1rem;
+  color: var(--tint);
+}
+
+.pill {
+  width: 40px;
+  height: 16px;
+  margin-left: auto;
+  border-radius: 999px;
+  background-color: color-mix(in srgb, var(--ok) 12%, transparent);
+}
+
+ul {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px 16px;
+  margin: 0;
+  padding: 6px 0;
+  list-style: none;
+}
+
+li {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 18px;
+}
+
+li .icon {
+  font-size: 1rem;
+  color: var(--ok);
+}
+
+footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 16px;
+  padding-top: 6px;
+  border-top: 1px solid color-mix(in srgb, var(--vp-c-text-1) 14%, transparent);
+  box-sizing: content-box;
+}
+
+.bar.added {
+  background-color: color-mix(in srgb, var(--ok) 55%, transparent);
+}
+
+.bar.removed {
+  background-color: color-mix(in srgb, var(--del) 55%, transparent);
+}
+
+@media screen and (max-width: 480px) {
+  .summary {
+    margin-left: 0;
+  }
+}
+
+</style>
diff --git a/docs/.vitepress/theme/homepage/QuickStartCodeFigure.vue b/docs/.vitepress/theme/homepage/QuickStartCodeFigure.vue
new file mode 100644
index 0000000..284f77a
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/QuickStartCodeFigure.vue
@@ -0,0 +1,235 @@
+<script setup lang="ts">
+import { faCube } from "@fortawesome/pro-regular-svg-icons";
+import { onBeforeUnmount, onMounted, ref } from "vue";
+import Icon from "../Icon.vue";
+import { fadeInParts, type FadePart, observeOnScreen, reducedMotion, Timeline } from "./ctaTimeline";
+
+/* Three lines of code with an IntelliSense popup and its signature help as a skeleton: bars where the words were,
+   so the figure says "IDE tooling" without adding text to the page. Widths in px. */
+const members = [
+  { name: 66, signature: 18 },
+  { name: 52, signature: 50 },
+  { name: 58, signature: 56 },
+  { name: 64, signature: 60 }
+];
+
+/* Builds once, the first time the figure is mostly on screen, in three soft overlapping fades: the code, then the
+   popup, then the help. Then only the caret blinks while on screen. Times in ms. */
+const parts: FadePart[] = [
+  { selector: ".code", at: 0, from: "translate(0px, 4px)" },
+  { selector: ".popup", at: 200, from: "translate(0px, -6px)" },
+  { selector: ".hint", at: 400, from: "translate(-6px, 0px)" }
+];
+
+const blinkPeriod = 1100;
+
+const root = ref<HTMLElement>();
+const timeline = new Timeline();
+let visibility: IntersectionObserver | undefined;
+let visible = false;
+let running: Animation[] = [];
+
+function idle(figure: HTMLElement) {
+  const blink = timeline.animate(figure.querySelector(".caret")!, [
+    { opacity: 1, offset: 0 }, { opacity: 1, offset: 0.5 }, { opacity: 0, offset: 0.5 }, { opacity: 0, offset: 1 }
+  ], { duration: blinkPeriod, iterations: Infinity });
+  if (!visible)
+    blink.pause();
+  return [blink];
+}
+
+onMounted(() => {
+  if (reducedMotion()) return;
+
+  const figure = root.value!;
+  const pass = fadeInParts(timeline, figure, parts);
+  pass.forEach(animation => animation.pause());
+  running = pass;
+
+  Timeline.settled(pass).then(finished => {
+    if (!finished) return;
+    pass.forEach(animation => animation.cancel());
+    running = idle(figure);
+  });
+
+  visibility = observeOnScreen(figure, onScreen => {
+    visible = onScreen;
+    running.forEach(animation => visible ? animation.play() : animation.playState === "running" && animation.pause());
+  });
+});
+
+onBeforeUnmount(() => {
+  visibility?.disconnect();
+  timeline.cancel();
+});
+</script>
+
+<template>
+  <div ref="root" class="figure" aria-hidden="true">
+    <div class="code">
+      <p class="line">
+        <span class="bar keyword" style="width: 40px"></span><span class="bar strong" style="width: 64px"></span><span class="bar type" style="width: 36px"></span><span class="bar" style="width: 16px"></span>
+      </p>
+      <p class="line indent">
+        <span class="bar" style="width: 32px"></span><span class="bar strong" style="width: 48px"></span><span class="bar" style="width: 20px"></span>
+      </p>
+      <p class="line indent">
+        <span class="bar" style="width: 32px"></span><span class="bar strong" style="width: 64px"></span><span class="bar" style="width: 14px"></span><span class="caret"></span>
+      </p>
+    </div>
+
+    <div class="row">
+      <ul class="popup fragment">
+        <li v-for="(member, index) of members" :key="index" :class="{ selected: index === 0 }">
+          <Icon :icon="faCube" />
+          <span class="bar strong" :style="{ width: `${member.name}px` }"></span><span class="bar" :style="{ width: `${member.signature}px` }"></span>
+        </li>
+      </ul>
+
+      <div class="hint fragment">
+        <p><span class="bar type" style="width: 88px"></span><span class="bar strong" style="width: 32px"></span></p>
+        <p><span class="bar" style="width: 140px"></span></p>
+        <p><span class="bar" style="width: 96px"></span></p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+.figure {
+  --bone: light-dark(
+      color-mix(in srgb, var(--vp-c-text-1) 20%, transparent),
+      color-mix(in srgb, var(--vp-c-text-1) 26%, transparent));
+  --bone-strong: light-dark(
+      color-mix(in srgb, var(--vp-c-text-1) 40%, transparent),
+      color-mix(in srgb, var(--vp-c-text-1) 50%, transparent));
+
+  width: 100%;
+  zoom: 0.9;
+  user-select: none;
+}
+
+.bar {
+  display: inline-block;
+  height: 8px;
+  border-radius: 4px;
+  background-color: var(--bone);
+  vertical-align: middle;
+}
+
+.bar + .bar {
+  margin-left: 8px;
+}
+
+.bar.strong {
+  background-color: var(--bone-strong);
+}
+
+.bar.keyword {
+  background-color: color-mix(in srgb, light-dark(#5E35B1, #B388FF) 50%, transparent);
+}
+
+.bar.type {
+  background-color: color-mix(in srgb, light-dark(#00796B, #80CBC4) 50%, transparent);
+}
+
+.code {
+  margin-bottom: 6px;
+}
+
+.line {
+  display: flex;
+  align-items: center;
+  height: 16px;
+  margin: 0;
+}
+
+.line.indent {
+  padding-left: 16px;
+}
+
+.caret {
+  display: inline-block;
+  width: 1.5px;
+  height: 14px;
+  margin-left: 8px;
+  background-color: var(--vp-c-text-1);
+}
+
+/* the popup opens under the word being typed */
+.row {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  margin-left: 56px;
+}
+
+.popup {
+  flex-shrink: 0;
+  width: 220px;
+  margin: 0;
+  padding: 5px;
+  list-style: none;
+}
+
+.popup li {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 26px;
+  padding: 0 10px;
+  border-radius: 7px;
+}
+
+.popup li .bar + .bar {
+  margin-left: 0;
+}
+
+.popup li.selected {
+  background-color: light-dark(
+      color-mix(in srgb, var(--tint) 16%, transparent),
+      color-mix(in srgb, var(--tint) 12%, transparent));
+}
+
+.popup li.selected .bar.strong {
+  background-color: color-mix(in srgb, var(--tint) 70%, transparent);
+}
+
+.popup .icon {
+  flex-shrink: 0;
+  font-size: 1rem;
+  color: var(--tint);
+}
+
+.hint {
+  flex: 1;
+  max-width: 260px;
+  margin-top: 4px;
+  padding: 11px 14px;
+}
+
+.hint p {
+  display: flex;
+  align-items: center;
+  height: 18px;
+  margin: 0;
+}
+
+.hint p + p {
+  margin-top: 4px;
+}
+
+@media screen and (max-width: 700px) {
+  .hint {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .row {
+    margin-left: 16px;
+  }
+}
+
+</style>
diff --git a/docs/.vitepress/theme/homepage/agentSession.ts b/docs/.vitepress/theme/homepage/agentSession.ts
index 0c4b50d..8c3c1fd 100644
--- a/docs/.vitepress/theme/homepage/agentSession.ts
+++ b/docs/.vitepress/theme/homepage/agentSession.ts
@@ -1,5 +1,5 @@
 import {computed, onMounted, onUnmounted, ref, type Ref} from "vue";
-import type {Edit, QuickStartSession, Round} from "./sessionBuilder";
+import type {Box, Edit, QuickStartSession} from "./sessionBuilder";
 import {foldLines} from "./codeFolding";
 
 /* A simulated session with a coding agent that plays by itself while the window is mostly on screen. Every pause
@@ -20,6 +20,12 @@ export interface OpenFile {
   lines: Line[];
 }
 
+/* how many lines, and characters of a line, the code window shows (HomePageQuickStart.vue measures them) */
+export interface CodeView {
+  lines: Ref<number>;
+  columns: Ref<number>;
+}
+
 type Phase = "idle" | "working" | "editing" | "built" | "done";
 
 const tick = 16;
@@ -38,6 +44,8 @@ const timing = {
   zoom: 1350,
   /* a file the agent opens comes to the front before it is edited */
   switchFile: 600,
+  /* the code scrolls to where an edit goes (HomePageQuickStart.vue, 0.6s) before it is edited */
+  scroll: 600,
   /* the lines an edit replaces turn red before the new ones arrive */
   markRemoved: 800,
   /* the room for the new lines opens */
@@ -75,7 +83,7 @@ function keyDelay(typed: string) {
 /* thrown out of a pause once the component is gone, which ends the loop */
 const unmounted = Symbol("unmounted");
 
-export function useAgentSession(root: Ref<HTMLElement | null>, session: QuickStartSession) {
+export function useAgentSession(root: Ref<HTMLElement | null>, session: QuickStartSession, view: CodeView) {
   const { rounds } = session;
 
   const files = ref<OpenFile[]>([]);
@@ -89,17 +97,21 @@ export function useAgentSession(root: Ref<HTMLElement | null>, session: QuickSta
   /* how many rounds the page shows the result of */
   const applied = ref(0);
   /* the part of the page the viewer is zoomed in on, from a moment after a request is sent until another request
-     zooms elsewhere (none: the page's overview) */
-  const zoom = ref<Round["zoom"]>();
-  /* the method the code shows unfolded (none folds until the first request that names one) */
+     zooms elsewhere, and the finished document after the last one (none: the page's overview) */
+  const zoom = ref<Box>();
+  /* the page outlines what the last request changed, from the page changing until the diff is taken in */
+  const marked = ref(false);
+  /* the method the code shows unfolded (none: nothing folds) */
   const unfold = ref<string>();
   /* the next request is arriving in the composer: from it emptying until it is sent */
   const asking = ref(false);
   /* a wait the composer shows as a ring filling around the send button (the key restarts it) */
   const countdown = ref<{ key: number, ms: number }>();
-  /* how many lines the code is scrolled by: a file longer than the window (session.lines) scrolls as an editor
-     does, to the method a request opens and to each line as it types in, only as far as it must */
+  /* how many lines the code is scrolled by: a file longer than the window scrolls as an editor does, to where an
+     edit goes before it types in, only as far as it must */
   const scrolled = ref(0);
+  /* how many characters the code is moved sideways by, where the window is narrower than the edit's lines */
+  const shifted = ref(0);
   /* the window is not mostly on screen, so the session and the composer's motion stand still */
   const paused = ref(true);
   /* the session fades out before it starts over */
@@ -129,8 +141,10 @@ export function useAgentSession(root: Ref<HTMLElement | null>, session: QuickSta
     promptTyped.value = 0;
     applied.value = 0;
     zoom.value = undefined;
-    unfold.value = undefined;
+    marked.value = false;
+    unfold.value = session.unfold;
     scrolled.value = 0;
+    shifted.value = 0;
     asking.value = false;
     countdown.value = undefined;
     phase.value = "idle";
@@ -139,14 +153,48 @@ export function useAgentSession(root: Ref<HTMLElement | null>, session: QuickSta
   function acceptDiff() {
     for (const file of files.value)
       file.lines = file.lines.filter(line => line.kind !== "removed").map(line => ({ text: line.text, kind: "normal" as const }));
-
-    scrolled.value = Math.min(scrolled.value, Math.max(0, lines.value.length - session.lines));
   }
 
   /* scrolls the shown line at `index` into the window, only as far as it must, so the code around it stays put */
   function scrollTo(index: number) {
     if (index >= 0)
-      scrolled.value = Math.min(Math.max(scrolled.value, index - session.lines + 1), index);
+      scrolled.value = Math.min(Math.max(scrolled.value, index - view.lines.value + 1), index);
+  }
+
+  /* moves the code once, before an edit, so all its new lines will fit with a line to spare below (the room under
+     the file may stay empty): as little as it must, and not past the signature of the method it is in, or the line
+     above the edit, while the edit leaves room for them; returns whether it moved */
+  function scrollToEdit(edit: Edit) {
+    const { after, remove = 0, add } = edit;
+    const at = after === undefined ? 0 : lines.value.findIndex(({ line }) => line.text === after && line.kind === "normal");
+    const last = (after === undefined ? 0 : at + Math.max(remove, 1)) + add.length - 1;
+    const signature = lines.value.findIndex(({ line }) => line.text === unfold.value);
+    const lowest = last - view.lines.value + 2;
+    const highest = Math.min(signature >= 0 && signature < at ? signature : at, at - 1);
+    const top = Math.max(0, lowest > highest ? lowest : Math.min(Math.max(scrolled.value, lowest), highest));
+    const left = shiftFor(edit);
+    const moved = top !== scrolled.value || left !== shifted.value;
+    scrolled.value = top;
+    shifted.value = left;
+    return moved;
+  }
+
+  /* how far sideways the code goes for an edit: as little as it must for its longest new line to fit, and never past
+     where the change starts: the new lines' indent, or the first character that one line replacing another changes */
+  function shiftFor({ after, remove = 0, add }: Edit) {
+    const written = add.filter(text => text.trim());
+    const overflow = Math.max(0, ...written.map(text => text.length)) + 1 - view.columns.value;
+
+    if (overflow <= 0)
+      return 0;
+
+    let start = Math.min(...written.map(text => text.length - text.trimStart().length));
+
+    if (remove === 1 && after !== undefined && written.length === 1)
+      while (start < after.length && after[start] === written[0][start])
+        start++;
+
+    return Math.min(overflow, start);
   }
 
   /* the file's reactive proxy, added if the edit creates it */
@@ -189,6 +237,7 @@ export function useAgentSession(root: Ref<HTMLElement | null>, session: QuickSta
     promptIndex.value = roundIndex.value;
     promptTyped.value = prompt.value.length;
     applied.value = rounds.length;
+    zoom.value = session.ending;
     phase.value = "done";
   }
 
@@ -255,6 +304,7 @@ export function useAgentSession(root: Ref<HTMLElement | null>, session: QuickSta
   }
 
   async function takeInDiff() {
+    marked.value = false;
     const removed = files.value.flatMap(file => file.lines.filter(line => line.kind === "removed"));
 
     if (removed.length) {
@@ -273,12 +323,15 @@ export function useAgentSession(root: Ref<HTMLElement | null>, session: QuickSta
       await pause(timing.switchFile);
     }
 
+    if (scrollToEdit(edit))
+      await pause(timing.scroll);
+
     const at = prepare(file, edit);
 
     if (edit.remove)
       await pause(timing.markRemoved);
 
-    const kind = edit.after === undefined ? "normal" : "added";
+    const kind: Line["kind"] = edit.after === undefined ? "normal" : "added";
     file.lines.splice(at, 0, ...edit.add.map(text => ({ text, kind, typed: 0, state: "opening" as const })));
     await pause(timing.openLines);
 
@@ -308,7 +361,11 @@ export function useAgentSession(root: Ref<HTMLElement | null>, session: QuickSta
     roundIndex.value = index;
     phase.value = "working";
     unfold.value = round.value.unfold ?? unfold.value;
-    scrollTo(lines.value.findIndex(({ line }) => line.text === unfold.value));
+
+    /* the code moves to where the first edit goes while the agent works, so it then types in place */
+    if (round.value.edits[0].file === active.value)
+      scrollToEdit(round.value.edits[0]);
+
     await pause(timing.working);
 
     /* compared by value: two requests may change the same part of the page */
@@ -325,6 +382,7 @@ export function useAgentSession(root: Ref<HTMLElement | null>, session: QuickSta
     await pause(timing.diffHold);
     phase.value = "done";
     applied.value = index + 1;
+    marked.value = true;
   }
 
   async function loop() {
@@ -341,7 +399,7 @@ export function useAgentSession(root: Ref<HTMLElement | null>, session: QuickSta
           await takeInDiff();
 
           if (index === rounds.length - 1) {
-            zoom.value = undefined;
+            zoom.value = session.ending;
             await wait(timing.endHold);
           }
           else
@@ -386,5 +444,5 @@ export function useAgentSession(root: Ref<HTMLElement | null>, session: QuickSta
     document.removeEventListener("visibilitychange", updatePaused);
   });
 
-  return { files, active, lines, promptIndex, promptText, typing, sent, working, finished, applied, zoom, scrolled, asking, countdown, paused, resetting, unfold };
+  return { files, active, lines, promptIndex, promptText, typing, sent, working, finished, applied, zoom, marked, scrolled, shifted, asking, countdown, paused, resetting, unfold };
 }
diff --git a/docs/.vitepress/theme/homepage/codeExamples/Invoice.cs b/docs/.vitepress/theme/homepage/codeExamples/Invoice.cs
new file mode 100644
index 0000000..8c50942
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/codeExamples/Invoice.cs
@@ -0,0 +1,178 @@
+static readonly Color Accent = Colors.Grey.Darken4;
+
+void ComposePage(PageDescriptor page)
+{
+    page.Size(PageSizes.A4);
+    page.Margin(50);
+    page.DefaultTextStyle(x => x.FontSize(10));
+
+    page.Header().Element(ComposeHeader);
+    page.Content().Element(ComposeContent);
+    page.Footer().Element(ComposeFooter);
+}
+
+void ComposeHeader(IContainer container)
+{
+    container.Row(row =>
+    {
+        row.ConstantItem(40).Svg("logo.svg");
+
+        row.RelativeItem()
+            .PaddingLeft(12)
+            .AlignMiddle()
+            .Column(column =>
+            {
+                column.Item()
+                    .Text("Alderwick")
+                    .FontSize(16)
+                    .Bold();
+
+                column.Item()
+                    .Text("Design Studio")
+                    .FontColor(Colors.Grey.Darken1);
+            });
+
+        row.AutoItem().Column(column =>
+        {
+            column.Item()
+                .Text($"Invoice {Model.Number}")
+                .FontSize(20)
+                .Bold()
+                .FontColor(Accent);
+
+            column.Item().Text($"Issued {Model.Issued:d MMM yyyy}");
+            column.Item().Text($"Due {Model.Due:d MMM yyyy}");
+        });
+    });
+}
+
+void ComposeContent(IContainer container)
+{
+    container.PaddingVertical(36).Column(column =>
+    {
+        column.Spacing(28);
+
+        column.Item().Element(ComposeAddresses);
+        column.Item().Element(ComposeItems);
+        column.Item().Element(ComposeTotals);
+    });
+}
+
+void ComposeAddresses(IContainer container)
+{
+    container.Row(row =>
+    {
+        row.Spacing(24);
+
+        AddAddressBlock("From", Model.Seller);
+        AddAddressBlock("Bill to", Model.Customer);
+
+        void AddAddressBlock(string label, Address address)
+        {
+            row.RelativeItem().Column(column =>
+            {
+                column.Item()
+                    .PaddingBottom(4)
+                    .Text(label)
+                    .Bold()
+                    .FontColor(Accent);
+
+                column.Item().Text(address.Name);
+                column.Item().Text(address.Street);
+                column.Item().Text(address.City);
+            });
+        }
+    });
+}
+
+void ComposeItems(IContainer container)
+{
+    container.Table(table =>
+    {
+        table.ColumnsDefinition(columns =>
+        {
+            columns.RelativeColumn();
+            columns.ConstantColumn(40);
+            columns.ConstantColumn(80);
+            columns.ConstantColumn(80);
+        });
+
+        table.Header(header =>
+        {
+            header.Cell().Element(Label).Text("Item");
+            header.Cell().Element(Label).AlignRight().Text("Qty");
+            header.Cell().Element(Label).AlignRight().Text("Price");
+            header.Cell().Element(Label).AlignRight().Text("Total");
+        });
+
+        foreach (var item in Model.Items)
+        {
+            table.Cell().Element(Cell).Text(item.Name);
+            table.Cell().Element(Number).Text($"{item.Quantity}");
+            table.Cell().Element(Number).Text($"{item.Price:C}");
+            table.Cell().Element(Number).Text($"{item.Amount:C}");
+        }
+    });
+
+    IContainer Label(IContainer cell) => cell
+        .BorderBottom(1)
+        .BorderColor(Accent)
+        .PaddingBottom(6)
+        .DefaultTextStyle(x => x.Bold().FontColor(Accent));
+
+    IContainer Cell(IContainer cell) => cell
+        .BorderBottom(0.5f)
+        .BorderColor(Colors.Grey.Lighten2)
+        .PaddingVertical(8);
+
+    IContainer Number(IContainer cell) => Cell(cell).AlignRight();
+}
+
+void ComposeTotals(IContainer container)
+{
+    container.AlignRight().Width(220).Column(column =>
+    {
+        column.Spacing(4);
+
+        AddLine("Subtotal", Model.Subtotal);
+        AddLine("VAT", Model.Vat);
+
+        column.Item()
+            .BorderTop(1)
+            .BorderColor(Accent)
+            .PaddingTop(8)
+            .AlignRight()
+            .Text($"Total due {Model.Total:C}")
+            .FontSize(14)
+            .Bold()
+            .FontColor(Accent);
+
+        void AddLine(string label, decimal amount)
+        {
+            column.Item().Row(row =>
+            {
+                row.RelativeItem().Text(label);
+                row.AutoItem().Text($"{amount:C}");
+            });
+        }
+    });
+}
+
+void ComposeFooter(IContainer container)
+{
+    container.Row(row =>
+    {
+        row.RelativeItem()
+            .Text($"IBAN {Model.Iban} · Payment within 14 days")
+            .FontSize(8)
+            .FontColor(Colors.Grey.Darken1);
+
+        row.AutoItem().Text(text =>
+        {
+            text.DefaultTextStyle(x => x.FontSize(8));
+            text.CurrentPageNumber();
+            text.Span(" / ");
+            text.TotalPages();
+        });
+    });
+}
diff --git a/docs/.vitepress/theme/homepage/codeExamples/invoice.html b/docs/.vitepress/theme/homepage/codeExamples/invoice.html
deleted file mode 100644
index f80ff28..0000000
--- a/docs/.vitepress/theme/homepage/codeExamples/invoice.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<style>
-  @page { size: A4; margin: 2cm; }
-  body { font-size: 10pt; }
-  .items td { padding: 6pt 0; border-bottom: 0.5pt solid; }
-  .totals { margin-left: auto; width: 200pt; }
-  .total { font-size: 14pt; font-weight: bold; }
-</style>
-<header>
-  <h1>Invoice {{number}}</h1>
-  <p>Issued {{issued}}</p>
-  <address>Bill to<br>{{customer}}</address>
-</header>
-<table class="items">
-  {{#each items}}
-  <tr>
-    <td>{{name}}</td>
-    <td>{{quantity}} × {{money price}}</td>
-    <td>{{money amount}}</td>
-  </tr>
-  {{/each}}
-</table>
-<table class="totals">
-  <tr><td>Subtotal</td><td>{{money subtotal}}</td></tr>
-  <tr><td>VAT</td><td>{{money vat}}</td></tr>
-</table>
-<p class="total">Total {{money total}}</p>
diff --git a/docs/.vitepress/theme/homepage/companion/CompanionDemo.vue b/docs/.vitepress/theme/homepage/companion/CompanionDemo.vue
new file mode 100644
index 0000000..50e8d06
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/companion/CompanionDemo.vue
@@ -0,0 +1,1210 @@
+<script setup lang="ts">
+import {
+  faArrowDown, faArrowUp, faBook, faCheck, faChevronRight, faCode, faExpand, faFile, faFolder, faFolderOpen, faGear,
+  faLocationCrosshairs, faMagnifyingGlass, faMinus, faPen, faSpinnerThird, faTableLayout, faUser, faWindowMaximize, faXmark
+} from "@fortawesome/pro-light-svg-icons";
+import Icon from "../../Icon.vue";
+import CompanionPage from "./CompanionPage.vue";
+import { page, stackTrace, statusColors, type CodeLine } from "./companionData";
+import { desk, H, ROW, TITLE, toolbarHeight, TREE, treeTop, useCompanionDemo, visibleRows, W } from "./companionDemo";
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+
+/* A scripted recording of the Companion App, drawn in HTML at 960 x 592 design px and scaled to its box.
+   `skeleton` draws the document and the tree as bars; readouts (toolbar values, measurements, errors) stay text. */
+const props = withDefaults(defineProps<{ skeleton?: boolean }>(), { skeleton: true });
+
+const root = ref<HTMLElement | null>(null);
+const { state, scenes, jump, EDITOR } = useCompanionDemo(root);
+defineExpose({ jump, scenes, state });
+
+const scale = ref(0);
+let resize: ResizeObserver | undefined;
+
+onMounted(() => {
+  resize = new ResizeObserver(([entry]) => scale.value = entry.contentRect.width / W);
+  resize.observe(root.value!);
+});
+
+onBeforeUnmount(() => resize?.disconnect());
+
+const rows = computed(() => visibleRows(state));
+const area = computed(() => desk(state));
+
+const camera = computed(() => {
+  const { cx, cy, z } = state.camera;
+  return {
+    transform: `translate(${area.value.w / 2 - cx * z}px, ${area.value.h / 2 - cy * z}px) scale(${z})`,
+    transitionDuration: `${state.camMs}ms`
+  };
+});
+
+/* 1 screen px inside the scaled page */
+const px = computed(() => 1 / state.camera.z);
+
+/* the magnifier: a 2.4x copy of the page centred on the cursor, moving with the same timing as the cursor */
+const LENS = 240;
+const LENS_ZOOM = 2.4;
+
+const lens = computed(() => {
+  const d = area.value;
+  const { cx, cy, z } = state.camera;
+  const x = cx + (state.cursor.x - d.left - d.w / 2) / z;
+  const y = cy + (state.cursor.y - d.top - d.h / 2) / z;
+  const zoom = z * LENS_ZOOM;
+  return {
+    box: { transform: `translate(${state.cursor.x - LENS / 2}px, ${state.cursor.y - LENS / 2}px)`, transitionDuration: `${state.cursor.ms}ms` },
+    page: { transform: `translate(${LENS / 2 - x * zoom}px, ${LENS / 2 - y * zoom}px) scale(${zoom})`, transitionDuration: `${state.cursor.ms}ms` }
+  };
+});
+
+function box(rect: { x: number; y: number; w: number; h: number }) {
+  return { left: `${rect.x}px`, top: `${rect.y}px`, width: `${rect.w}px`, height: `${rect.h}px` };
+}
+
+/* code tokens: identical geometry in text and skeleton mode, one monospace cell per character */
+const KEYWORDS = new Set(["void", "var", "new", "return"]);
+const SWATCHES: Record<string, string> = { "Grey.Lighten3": "#EEEEEE", "Blue.Lighten5": "#E3F2FD" };
+
+function tokens(line: CodeLine) {
+  const parts = line.text.match(/\$?"[^"]*"?|[A-Za-z_]\w*|\d+|\s+|./g) ?? [];
+  let previous = "";
+  return parts.map(text => {
+    let kind = "punct";
+    if (/^\s+$/.test(text)) kind = "space";
+    else if (text.startsWith("\"") || text.startsWith("$\"")) kind = "string";
+    else if (/^\d/.test(text)) kind = "number";
+    else if (KEYWORDS.has(text)) kind = "keyword";
+    else if (/^[A-Za-z_]/.test(text)) kind = previous === "." ? "member" : /^[A-Z]/.test(text) ? "type" : "plain";
+    previous = text;
+    return { text, kind };
+  });
+}
+
+function swatch(line: CodeLine) {
+  const match = line.text.match(/Colors\.(\w+\.\w+)\)/);
+  return match ? SWATCHES[match[1]] : undefined;
+}
+
+function codeX(line: CodeLine, column: number) {
+  return EDITOR.gutter + 12 + (line.indent * 4 + column) * EDITOR.char;
+}
+
+const forcedTheme = computed(() => state.theme ? `theme-${state.theme}` : "");
+const toolbarH = computed(() => toolbarHeight(state.toolbar));
+</script>
+
+<template>
+  <div ref="root" class="companion-demo" :style="{ '--scale': scale }" aria-hidden="true">
+    <div class="window" :class="[forcedTheme, { instant: state.instant, skeleton: props.skeleton }]" :style="{ width: `${W}px`, height: `${H}px` }">
+
+      <header class="titlebar" :style="{ height: `${TITLE}px` }">
+        <img class="logo light" src="/questpdf-logo-nav-light.webp" alt="" width="149" height="24" />
+        <img class="logo dark" src="/questpdf-logo-nav-dark.webp" alt="" width="149" height="24" />
+
+        <div class="controls">
+          <span v-if="state.alerts.includes('exception')" class="tile orange"><Icon :icon="faCode" /></span>
+          <span v-if="state.alerts.includes('layout')" class="tile red"><Icon :icon="faTableLayout" /></span>
+          <span class="tile green"><Icon :icon="faUser" /></span>
+          <span class="button"><Icon :icon="faBook" /></span>
+          <span class="button" :class="{ pressed: state.settings }"><Icon :icon="faGear" /></span>
+          <span class="separator"></span>
+          <span class="button"><Icon :icon="faMinus" /></span>
+          <span class="button"><Icon :icon="faWindowMaximize" /></span>
+          <span class="button"><Icon :icon="faXmark" /></span>
+        </div>
+      </header>
+
+      <aside class="tree" :style="{ width: `${state.treeVisible ? TREE : 0}px`, top: `${TITLE}px` }">
+        <div v-if="state.search" class="tree-bar search">
+          <Icon :icon="faMagnifyingGlass" />
+          <span class="query"><span class="typed">{{ state.search.text }}</span><i v-if="!state.search.count" class="caret"></i></span>
+          <span class="count">{{ state.search.count }}</span>
+          <Icon :icon="faArrowUp" />
+          <Icon :icon="faArrowDown" />
+          <Icon :icon="faXmark" />
+        </div>
+
+        <div v-else-if="state.banner" class="tree-bar banner">
+          <span>{{ state.banner }}</span>
+          <Icon :icon="faArrowUp" />
+          <Icon :icon="faArrowDown" />
+        </div>
+
+        <div class="rows-clip" :style="{ top: `${treeTop(state) - TITLE}px` }">
+          <ul class="rows" :style="{ transform: `translateY(${-state.treeScroll}px)` }">
+            <li
+                v-for="row of rows"
+                :key="row.id"
+                class="row"
+                :class="{ selected: state.selectedRow === row.id, section: row.section, dots: state.status }"
+                :style="{ '--depth': row.depth, height: `${ROW}px` }">
+              <i v-if="state.status" class="dot" :style="{ backgroundColor: statusColors[state.status[row.id] as keyof typeof statusColors] ?? statusColors.done }"></i>
+              <span class="slot">
+                <Icon v-if="row.folder" :icon="row.chevron ? faFolder : faFolderOpen" />
+                <Icon v-else-if="row.chevron" class="chevron" :class="{ open: row.opens && !state.collapsed.includes(row.opens) }" :icon="faChevronRight" />
+              </span>
+              <span class="label">
+                <template v-if="!props.skeleton">{{ row.label }}</template>
+                <i v-else class="bone" :style="{ width: `${row.label.length * 7.4}px` }"></i>
+              </span>
+              <span v-if="row.hint" class="hint">
+                <template v-if="!props.skeleton">{{ row.hint }}</template>
+                <i v-else class="bone" :style="{ width: `${Math.min(row.hint.length * 6.6, 120)}px` }"></i>
+              </span>
+            </li>
+          </ul>
+        </div>
+      </aside>
+
+      <section class="preview" :style="{ left: `${state.treeVisible ? TREE : 0}px`, top: `${TITLE}px` }">
+        <div v-if="state.toolbar" class="toolbar" :style="{ height: `${toolbarH}px` }">
+          <div class="tools">
+            <Icon :icon="faPen" />
+            <Icon class="off" :icon="faArrowUp" />
+            <Icon class="off" :icon="faArrowDown" />
+            <span v-if="state.toolbar.page" class="reading"><Icon :icon="faFile" />{{ state.toolbar.page }}</span>
+            <span v-if="state.toolbar.position" class="reading"><Icon :icon="faLocationCrosshairs" />{{ state.toolbar.position }}</span>
+            <span class="reading"><Icon :icon="faExpand" />{{ state.toolbar.size }}</span>
+          </div>
+          <div v-if="state.toolbar.error" class="error-line">
+            <i class="dot" :style="{ backgroundColor: statusColors.root }"></i>
+            <span><strong>{{ state.toolbar.error.title }}</strong><br />{{ state.toolbar.error.text }}</span>
+          </div>
+        </div>
+
+        <div class="desk" :style="{ top: `${toolbarH}px` }">
+          <div class="camera" :style="camera">
+            <CompanionPage :skeleton="props.skeleton" :comments-color="state.commentsColor" class="page" :class="{ dimmed: state.dim }" :style="{ '--blur': `${2.4 * px}px` }" />
+            <div v-if="state.dim" class="dim" :style="{ width: `${page.w}px`, height: `${page.h}px` }"></div>
+            <CompanionPage
+                v-if="state.spotlight"
+                :skeleton="props.skeleton"
+                :comments-color="state.commentsColor"
+                class="page spot"
+                :style="{ clipPath: `inset(${state.spotlight.y}px ${page.w - state.spotlight.x - state.spotlight.w}px ${page.h - state.spotlight.y - state.spotlight.h}px ${state.spotlight.x}px)` }" />
+            <div v-if="state.frame" class="frame" :style="{ ...box(state.frame), borderWidth: `${3 * px}px`, margin: `${-3 * px}px` }"></div>
+
+            <template v-if="state.overflow">
+              <div class="space" :style="box(state.overflow.space)"></div>
+              <div class="overflow" :style="{ ...box(state.overflow.overflow), '--line': `${6 * px}px` }"></div>
+            </template>
+
+            <template v-if="state.overlay">
+              <div class="tint" :style="{ ...box(state.overlay.tint), outlineWidth: `${1.5 * px}px` }"></div>
+              <template v-if="state.overlay.kind === 'point'">
+                <i class="point" :style="{ left: `${state.overlay.x1}px`, top: `${state.overlay.y1}px`, transform: `translate(-50%, -50%) scale(${px})` }"></i>
+                <div class="badge stack" :style="{ left: `${state.overlay.x1 + 20 * px}px`, top: `${state.overlay.y1 - 40 * px}px`, transform: `scale(${px})` }">
+                  <span v-for="line of state.overlay.label" :key="line">{{ line }}</span>
+                </div>
+              </template>
+              <template v-else>
+                <div
+                    class="ruler"
+                    :class="state.overlay.kind"
+                    :style="{
+                      left: `${state.overlay.x1}px`, top: `${state.overlay.y1}px`,
+                      width: `${Math.max(state.overlay.x2 - state.overlay.x1, 0)}px`, height: `${Math.max(state.overlay.y2 - state.overlay.y1, 0)}px`,
+                      '--line': `${2.5 * px}px`, '--cap': `${14 * px}px`
+                    }"></div>
+                <div
+                    class="badge"
+                    :style="state.overlay.kind === 'vertical'
+                      ? { left: `${state.overlay.x1 - 16 * px}px`, top: `${(state.overlay.y1 + state.overlay.y2) / 2}px`, transform: `translate(-100%, -50%) scale(${px})`, transformOrigin: 'right center' }
+                      : { left: `${(state.overlay.x1 + state.overlay.x2) / 2}px`, top: `${state.overlay.y1 - 14 * px}px`, transform: `translate(-50%, -100%) scale(${px})`, transformOrigin: 'center bottom' }">
+                  {{ state.overlay.label[0] }}
+                </div>
+              </template>
+            </template>
+          </div>
+
+          <div v-if="state.lens" class="lens" :style="{ ...lens.box, width: `${LENS}px`, height: `${LENS}px`, left: `${-area.left}px`, top: `${-area.top}px` }">
+            <div class="lens-page" :style="lens.page">
+              <CompanionPage :skeleton="props.skeleton" :comments-color="state.commentsColor" class="page" />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section v-if="state.view === 'exception'" class="exception" :style="{ top: `${TITLE}px` }">
+        <div class="exception-card">
+          <header>
+            <span>System.DivideByZeroException</span>
+            <strong>Attempted to divide by zero.</strong>
+          </header>
+          <p v-for="(frame, index) of stackTrace" :key="index" :class="{ hovered: state.hoverRow === index }">
+            <template v-if="!props.skeleton">{{ frame[0] }}<b>{{ frame[1] }}</b>{{ frame[2] }}</template>
+            <template v-else>
+              <i class="bone" :style="{ width: `${frame[0].length * 6.4}px` }"></i>
+              <i class="bone strong" :style="{ width: `${frame[1].length * 6.4}px` }"></i>
+              <i class="bone" :style="{ width: `${frame[2].length * 6.4}px` }"></i>
+            </template>
+          </p>
+        </div>
+      </section>
+
+      <div v-if="state.editor" class="editor" :style="{ left: `${EDITOR.x}px`, top: `${EDITOR.y}px` }">
+        <header :style="{ height: `${EDITOR.header}px` }">
+          <span class="file">{{ state.editor.file }}</span>
+          <span v-if="state.editor.status === 'applying'" class="status"><Icon class="spin" :icon="faSpinnerThird" />Applying changes</span>
+          <span v-else-if="state.editor.status === 'applied'" class="status done"><Icon :icon="faCheck" />Changes applied</span>
+        </header>
+        <div class="code" :style="{ '--line': `${EDITOR.lineHeight}px`, '--char': `${EDITOR.char}px` }">
+          <div v-for="(line, index) of state.editor.lines" :key="index" class="code-line" :class="{ marked: state.editor.mark === index }">
+            <span class="number">{{ index + 1 }}</span>
+            <i v-if="swatch(line)" class="swatch" :style="{ backgroundColor: swatch(line) }"></i>
+            <span class="source" :style="{ paddingLeft: `${line.indent * 4 * EDITOR.char}px` }">
+              <template v-for="(token, t) of tokens(line)" :key="t">
+                <span v-if="!props.skeleton" :class="token.kind">{{ token.text }}</span>
+                <i v-else-if="token.kind !== 'space' && token.kind !== 'punct'" class="bar" :class="token.kind" :style="{ width: `${token.text.length * EDITOR.char - 2}px` }"></i>
+                <span v-else class="gap" :style="{ width: `${token.text.length * EDITOR.char}px` }"></span>
+              </template>
+            </span>
+            <i v-if="state.editor.select?.line === index" class="selection" :style="{ left: `${codeX(line, state.editor.select.from)}px`, width: `${(state.editor.select.to - state.editor.select.from) * EDITOR.char}px` }"></i>
+            <i v-if="state.editor.caret?.line === index" class="caret" :style="{ left: `${codeX(line, state.editor.caret.column)}px` }"></i>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="state.settings" class="settings">
+        <h3>Settings</h3>
+        <h4>Theme mode</h4>
+        <div class="chips">
+          <span class="chip" style="width: 76px">System</span>
+          <span class="chip" :class="{ on: (state.theme ?? 'light') === 'light' }" style="width: 64px">Light</span>
+          <span class="chip" :class="{ on: state.theme === 'dark' }" style="width: 60px">Dark</span>
+        </div>
+        <hr />
+        <h4>Default code editor</h4>
+        <div class="chips">
+          <span class="chip on">Rider</span>
+          <span class="chip">VS Code</span>
+          <span class="chip">Visual Studio</span>
+        </div>
+        <hr />
+        <div class="setting-row"><h4>Show document hierarchy</h4><i class="toggle"></i></div>
+        <hr />
+        <div class="setting-row">
+          <div><h4>Connection port</h4><span class="listening"><i></i>Active and listening</span></div>
+          <span class="port">12500</span>
+        </div>
+      </div>
+
+      <div v-if="state.caption.title" class="caption">
+        <span>{{ state.caption.title }}</span>
+        <kbd v-for="key of state.caption.keys" :key="key" :class="{ pressed: state.pressed }">{{ key }}</kbd>
+      </div>
+
+      <div class="cursor" :style="{ transform: `translate(${state.cursor.x}px, ${state.cursor.y}px)`, transitionDuration: `${state.cursor.ms}ms` }">
+        <i v-if="state.clicks" :key="state.clicks" class="ring"></i>
+        <svg width="20" height="28" viewBox="0 0 20 28"><path d="M1.5 1.5v21.2l5.3-5 3.5 8.1 3.6-1.6-3.4-7.8h7.2z" /></svg>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+.companion-demo {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 960 / 592;
+  overflow: hidden;
+  user-select: none;
+  pointer-events: none;
+}
+
+.window {
+  --chrome: light-dark(#F9F8FF, #121418);
+  --desk: light-dark(#E3E2E9, #2E2F35);
+  --edge: light-dark(#D0CFD6, #2A2C33);
+  --ink: light-dark(#1F212C, #E4E4EA);
+  --ink-2: light-dark(#5C5E6B, #A6A8B4);
+  --ink-3: light-dark(#A3A2AC, #6C6F7C);
+  --section: light-dark(#4A5F8F, #8EA8DE);
+  --selected: light-dark(#DDE2F9, #3F4658);
+  --toolbar: light-dark(#DCE2F4, #353B4C);
+  --bone: light-dark(#C3C6D1, #4A4E5B);
+  --bone-strong: light-dark(#8E95A3, #7D8394);
+  --bone-section: light-dark(#93A6CC, #5D74A6);
+  --popover: light-dark(#F9F8FF, #1C1E24);
+  --popover-edge: light-dark(rgba(16, 24, 40, 0.12), rgba(255, 255, 255, 0.1));
+  --shadow: light-dark(rgba(16, 24, 40, 0.24), rgba(0, 0, 0, 0.6));
+  --red: #F44336;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  transform: scale(var(--scale));
+  transform-origin: 0 0;
+  background-color: var(--chrome);
+  color: var(--ink);
+  font-family: var(--vp-font-family-base);
+  font-size: 14px;
+  line-height: 20px;
+  text-align: left;
+}
+
+.window.theme-light {
+  color-scheme: light;
+}
+
+.window.theme-dark {
+  color-scheme: dark;
+}
+
+.window.instant,
+.window.instant * {
+  transition: none !important;
+  animation: none !important;
+}
+
+.icon {
+  font-size: 16px;
+}
+
+/* title bar */
+
+.titlebar {
+  position: absolute;
+  inset: 0 0 auto 0;
+  display: flex;
+  align-items: center;
+  padding-left: 14px;
+  border-bottom: 1px solid var(--edge);
+  background-color: var(--chrome);
+}
+
+.logo {
+  height: 24px;
+  width: auto;
+}
+
+.logo.dark,
+.theme-dark .logo.light {
+  display: none;
+}
+
+.theme-dark .logo.dark {
+  display: block;
+}
+
+:root.dark .window:not(.theme-light) .logo.light {
+  display: none;
+}
+
+:root.dark .window:not(.theme-light) .logo.dark {
+  display: block;
+}
+
+.controls {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  padding-right: 2px;
+}
+
+.button,
+.tile {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 32px;
+}
+
+.button .icon {
+  font-size: 18px;
+}
+
+.button.pressed {
+  border-radius: 6px;
+  background-color: light-dark(#E6E5EC, #2B2D35);
+}
+
+.tile {
+  width: 32px;
+  margin: 0 4px;
+  border-radius: 6px;
+  color: #FFFFFF;
+  animation: tile-in 0.35s ease-out;
+}
+
+.tile.green { background-color: #4CAF50; }
+.tile.orange { background-color: #FF9800; }
+.tile.red { background-color: var(--red); }
+
+.separator {
+  width: 1px;
+  height: 22px;
+  margin: 0 7px 0 8px;
+  background-color: var(--edge);
+}
+
+@keyframes tile-in {
+  from { transform: scale(0.4); opacity: 0; }
+}
+
+/* document tree */
+
+.tree {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  border-right: 1px solid var(--edge);
+  background-color: var(--chrome);
+  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.tree-bar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  width: 300px;
+  height: 40px;
+  padding: 0 14px;
+  border-bottom: 1px solid var(--edge);
+}
+
+.tree-bar.search .query {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.tree-bar.search .typed {
+  background-color: light-dark(#C9D3F0, #44506E);
+}
+
+.tree-bar .count {
+  color: var(--ink-2);
+}
+
+.tree-bar.banner {
+  background-color: light-dark(#FEDAD6, #4E2627);
+  color: light-dark(#B3261E, #FFB4AB);
+}
+
+.tree-bar.banner span {
+  flex: 1;
+}
+
+.caret {
+  display: inline-block;
+  width: 1.5px;
+  height: 17px;
+  margin-left: 1px;
+  background-color: var(--ink);
+  animation: blink 1s steps(1) infinite;
+}
+
+@keyframes blink {
+  50% { opacity: 0; }
+}
+
+.rows-clip {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 300px;
+  overflow: hidden;
+}
+
+.rows {
+  margin: 0;
+  padding: 0 8px;
+  list-style: none;
+  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.row {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding-left: calc(4px + var(--depth) * 24px);
+  border-radius: 7px;
+  white-space: nowrap;
+  animation: row-in 0.3s ease-out;
+}
+
+.row.dots {
+  padding-left: calc(26px + var(--depth) * 24px);
+}
+
+.row.selected {
+  background-color: var(--selected);
+}
+
+.row.section .label {
+  color: var(--section);
+}
+
+@keyframes row-in {
+  from { opacity: 0; transform: translateY(-4px); }
+}
+
+.dot {
+  display: block;
+  flex-shrink: 0;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.row .dot {
+  position: absolute;
+  left: 8px;
+}
+
+.slot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  color: var(--ink-2);
+}
+
+.chevron {
+  transition: transform 0.2s ease;
+}
+
+.chevron.open {
+  transform: rotate(90deg);
+}
+
+.label {
+  margin-left: 4px;
+}
+
+.hint {
+  overflow: hidden;
+  margin-left: 14px;
+  font-style: italic;
+  color: var(--ink-3);
+}
+
+.bone {
+  display: inline-block;
+  height: 9px;
+  border-radius: 4.5px;
+  background-color: var(--bone);
+  vertical-align: middle;
+}
+
+.label .bone {
+  background-color: var(--bone-strong);
+}
+
+.section .label .bone {
+  background-color: var(--bone-section);
+}
+
+.selected .label .bone {
+  background-color: var(--section);
+}
+
+/* preview */
+
+.preview {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.toolbar {
+  position: absolute;
+  inset: 0 0 auto 0;
+  border-bottom: 1px solid var(--edge);
+  background-color: var(--toolbar);
+  animation: fade-in 0.3s ease-out;
+}
+
+.tools {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  height: 40px;
+  padding: 0 16px;
+}
+
+.tools .off {
+  opacity: 0.45;
+}
+
+.reading {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-left: 22px;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.error-line {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 0 16px;
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.error-line .dot {
+  width: 16px;
+  height: 16px;
+}
+
+.error-line strong {
+  font-weight: 400;
+}
+
+.desk {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  background-color: var(--desk);
+  transition: top 0.3s ease;
+}
+
+.camera {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 595px;
+  height: 842px;
+  transform-origin: 0 0;
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.page {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+}
+
+.page.dimmed {
+  filter: blur(var(--blur));
+}
+
+.dim {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.25);
+  animation: fade-in 0.3s ease-out;
+}
+
+.spot {
+  box-shadow: none;
+  animation: fade-in 0.3s ease-out;
+}
+
+.frame {
+  position: absolute;
+  box-sizing: content-box;
+  border: solid #000000;
+  animation: fade-in 0.3s ease-out;
+}
+
+.space {
+  position: absolute;
+  background-color: rgba(76, 175, 80, 0.45);
+  outline: 1px solid rgba(244, 67, 54, 0.6);
+}
+
+.overflow {
+  position: absolute;
+  background: repeating-linear-gradient(-45deg, rgba(244, 67, 54, 0.55) 0 var(--line), rgba(244, 67, 54, 0.15) var(--line) calc(var(--line) * 2));
+  outline: 1px solid var(--red);
+}
+
+.tint {
+  position: absolute;
+  background-color: rgba(244, 67, 54, 0.22);
+  outline: solid rgba(244, 67, 54, 0.85);
+  animation: fade-in 0.2s ease-out;
+}
+
+.point {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background-color: var(--red);
+}
+
+.badge {
+  position: absolute;
+  padding: 6px 12px;
+  border-radius: 8px;
+  background-color: var(--red);
+  color: #FFFFFF;
+  font-size: 15px;
+  line-height: 20px;
+  white-space: nowrap;
+  transform-origin: 0 0;
+  animation: fade-in 0.2s ease-out;
+}
+
+.badge.stack {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 14px;
+}
+
+.ruler {
+  position: absolute;
+  animation: fade-in 0.2s ease-out;
+}
+
+.ruler.vertical {
+  border-left: var(--line) solid var(--red);
+  transform: translateX(calc(var(--line) / -2));
+}
+
+.ruler.horizontal {
+  border-top: var(--line) solid var(--red);
+  transform: translateY(calc(var(--line) / -2));
+}
+
+.ruler::before,
+.ruler::after {
+  content: "";
+  position: absolute;
+  background-color: var(--red);
+}
+
+.ruler.vertical::before,
+.ruler.vertical::after {
+  left: calc(var(--cap) / -2 - var(--line) / 2);
+  width: var(--cap);
+  height: var(--line);
+}
+
+.ruler.vertical::before { top: 0; }
+.ruler.vertical::after { bottom: 0; }
+
+.ruler.horizontal::before,
+.ruler.horizontal::after {
+  top: calc(var(--cap) / -2 - var(--line) / 2);
+  width: var(--line);
+  height: var(--cap);
+}
+
+.ruler.horizontal::before { left: 0; }
+.ruler.horizontal::after { right: 0; }
+
+.lens {
+  position: absolute;
+  overflow: hidden;
+  border-radius: 16px;
+  background-color: #FFFFFF;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 12px 32px -8px rgba(0, 0, 0, 0.35);
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  animation: fade-in 0.2s ease-out;
+}
+
+.lens-page {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 595px;
+  height: 842px;
+  transform-origin: 0 0;
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* runtime exception */
+
+.exception {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 48px 56px 0;
+  background-color: light-dark(#EFEEF5, #17181D);
+  animation: fade-in 0.35s ease-out;
+}
+
+.exception-card {
+  overflow: hidden;
+  border-radius: 14px 14px 0 0;
+  background-color: light-dark(#F8F7FE, #202228);
+}
+
+.exception-card header {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 16px 18px;
+  border-bottom: 1px solid light-dark(#C6C5CC, #3A3C44);
+  background-color: light-dark(#FEDAD6, #4E2627);
+  color: light-dark(#A1141C, #FFB4AB);
+}
+
+.exception-card header strong {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.exception-card p {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 44px;
+  margin: 0;
+  padding: 0 18px;
+  border-bottom: 1px solid light-dark(#DDDCE3, #2E3037);
+  color: var(--ink-2);
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.exception-card p b {
+  font-weight: 400;
+  color: var(--ink);
+}
+
+.exception-card p.hovered {
+  background-color: light-dark(#ECEBF4, #2A2C33);
+}
+
+.exception-card .bone.strong {
+  background-color: var(--bone-strong);
+}
+
+/* editor */
+
+.editor {
+  position: absolute;
+  width: 430px;
+  overflow: hidden;
+  border-radius: 12px;
+  background-color: light-dark(#FFFFFF, #1E1F24);
+  box-shadow: 0 0 0 1px var(--popover-edge), 0 18px 40px -12px var(--shadow);
+  animation: rise-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.editor header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 14px;
+  border-bottom: 1px solid var(--edge);
+  background-color: light-dark(#F4F4F8, #18191D);
+  font-size: 13px;
+}
+
+.file {
+  font-weight: 600;
+}
+
+.status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+  color: var(--ink-2);
+}
+
+.status.done {
+  color: light-dark(#2E7D32, #81C784);
+}
+
+.spin {
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.code {
+  padding: 8px 0;
+  font-family: var(--vp-font-family-mono);
+  font-size: 11px;
+}
+
+.code-line {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: var(--line);
+  white-space: pre;
+}
+
+.code-line.marked {
+  background-color: light-dark(rgba(33, 150, 243, 0.14), rgba(100, 181, 246, 0.16));
+  animation: fade-in 0.4s ease-out;
+}
+
+.number {
+  flex-shrink: 0;
+  width: 40px;
+  padding-right: 12px;
+  text-align: right;
+  color: var(--ink-3);
+}
+
+.swatch {
+  position: absolute;
+  left: 6px;
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
+}
+
+.source {
+  display: flex;
+  align-items: center;
+  margin-left: 12px;
+}
+
+.keyword { color: light-dark(#0033B3, #CF8E6D); }
+.type { color: light-dark(#008080, #6FAFBD); }
+.member { color: light-dark(#00627A, #57AAF7); }
+.string { color: light-dark(#067D17, #6AAB73); }
+.number { color: var(--ink-3); }
+.source .number { color: light-dark(#1750EB, #2AACB8); }
+
+.code .bar {
+  display: inline-block;
+  height: 8px;
+  margin-right: 2px;
+  border-radius: 4px;
+  background-color: var(--bone);
+}
+
+.code .bar.type { background-color: light-dark(rgba(0, 121, 107, 0.45), rgba(128, 203, 196, 0.45)); }
+.code .bar.keyword { background-color: light-dark(rgba(94, 53, 177, 0.45), rgba(179, 136, 255, 0.45)); }
+.code .bar.member { background-color: var(--bone-strong); }
+.code .bar.string { background-color: light-dark(rgba(46, 125, 50, 0.45), rgba(129, 199, 132, 0.45)); }
+
+.gap {
+  display: inline-block;
+}
+
+.code-line .selection {
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  background-color: light-dark(rgba(33, 150, 243, 0.25), rgba(100, 181, 246, 0.3));
+}
+
+.code-line .caret {
+  position: absolute;
+  height: 15px;
+  margin: 0;
+}
+
+/* settings */
+
+.settings {
+  position: absolute;
+  top: 50px;
+  right: 16px;
+  width: 330px;
+  padding: 20px;
+  border-radius: 12px;
+  background-color: var(--popover);
+  box-shadow: 0 0 0 1px var(--popover-edge), 0 18px 40px -12px var(--shadow);
+  animation: rise-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.settings h3,
+.settings h4 {
+  color: var(--ink);
+}
+
+.settings h3 {
+  height: 28px;
+  margin: 0 0 14px;
+  font-size: 17px;
+  line-height: 28px;
+  font-weight: 600;
+}
+
+.settings h4 {
+  height: 22px;
+  margin: 0 0 10px;
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 500;
+}
+
+.chips {
+  display: flex;
+  gap: 8px;
+}
+
+.chip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  padding: 0 12px;
+  border: 1px solid light-dark(#C9C8D0, #4A4C55);
+  border-radius: 8px;
+  font-size: 13px;
+}
+
+.chip.on {
+  border-color: transparent;
+  background-color: var(--selected);
+}
+
+.settings hr {
+  margin: 14px 0;
+  border: 0;
+  border-top: 1px solid var(--edge);
+}
+
+.setting-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.setting-row h4 {
+  margin: 0;
+}
+
+.toggle {
+  position: relative;
+  width: 38px;
+  height: 22px;
+  border-radius: 11px;
+  background-color: #475F90;
+}
+
+.toggle::after {
+  content: "";
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: #FFFFFF;
+}
+
+.listening {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: #4CAF50;
+}
+
+.listening i {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #4CAF50;
+}
+
+.port {
+  padding: 4px 12px;
+  border: 1px solid light-dark(#C9C8D0, #4A4C55);
+  border-radius: 8px;
+}
+
+/* recording cues: caption with key caps, cursor with click rings */
+
+.caption {
+  position: absolute;
+  bottom: 18px;
+  left: 50%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px 8px 16px;
+  border-radius: 12px;
+  background-color: rgba(20, 22, 28, 0.86);
+  color: #FFFFFF;
+  font-size: 15px;
+  font-weight: 600;
+  white-space: nowrap;
+  /* the shortcut cue stays readable when the window is scaled down on phones */
+  transform: translateX(-50%) scale(max(1, calc(0.73 / var(--scale))));
+  transform-origin: bottom center;
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 10px 30px -10px rgba(0, 0, 0, 0.5);
+}
+
+.caption span {
+  margin-right: 6px;
+}
+
+kbd {
+  min-width: 28px;
+  padding: 2px 8px;
+  border-radius: 6px;
+  background-color: rgba(255, 255, 255, 0.14);
+  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  text-align: center;
+  transition: background-color 0.15s ease, transform 0.15s ease;
+}
+
+kbd.pressed {
+  background-color: var(--vp-c-brand-1);
+  transform: translateY(1px);
+}
+
+.cursor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.cursor svg {
+  display: block;
+  margin: -1px 0 0 -1px;
+  overflow: visible;
+  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
+}
+
+.cursor path {
+  fill: #111111;
+  stroke: #FFFFFF;
+  stroke-width: 1.5;
+  stroke-linejoin: round;
+}
+
+.ring {
+  position: absolute;
+  top: -18px;
+  left: -18px;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: 2px solid var(--vp-c-brand-1);
+  opacity: 0;
+  animation: ring 0.5s ease-out;
+}
+
+@keyframes ring {
+  from { opacity: 0.9; transform: scale(0.3); }
+  to { opacity: 0; transform: scale(1); }
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+}
+
+@keyframes rise-in {
+  from { opacity: 0; transform: translateY(10px) scale(0.98); }
+}
+
+</style>
diff --git a/docs/.vitepress/theme/homepage/companion/CompanionPage.vue b/docs/.vitepress/theme/homepage/companion/CompanionPage.vue
new file mode 100644
index 0000000..3671cb6
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/companion/CompanionPage.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { faImage } from "@fortawesome/pro-light-svg-icons";
+import Icon from "../../Icon.vue";
+import { lines, rects, texts } from "./companionData";
+
+/* The invoice page in A4 points: 1 local px = 1 pt, the camera scales it. In skeleton mode every word becomes a bar
+   of the same box, so positions and readouts stay identical between both modes. */
+defineProps<{
+  skeleton: boolean;
+  commentsColor: string;
+}>();
+</script>
+
+<template>
+  <div class="sheet" :class="{ skeleton }">
+    <span class="box logo" :style="{ left: `${rects.logo.x}px`, top: `${rects.logo.y}px`, width: `${rects.logo.w}px`, height: `${rects.logo.h}px` }">
+      <Icon :icon="faImage" />
+    </span>
+
+    <span
+        class="box comments"
+        :style="{
+          left: `${rects.comments.x}px`, top: `${rects.comments.y}px`,
+          width: `${rects.comments.w}px`, height: `${rects.comments.h}px`,
+          backgroundColor: commentsColor
+        }"></span>
+
+    <span
+        v-for="(line, index) of lines"
+        :key="`l${index}`"
+        class="rule"
+        :class="line.tone"
+        :style="{ left: `${line.x}px`, top: `${line.y}px`, width: `${line.w}px`, height: `${line.h}px` }"></span>
+
+    <span
+        v-for="(text, index) of texts"
+        :key="index"
+        class="text"
+        :class="[text.tone ?? 'body', text.align ?? 'left']"
+        :style="{ left: `${text.x}px`, top: `${text.y}px`, width: `${text.w}px`, height: `${text.h}px`, fontSize: `${text.size}px`, '--size': `${text.size}px` }">
+      <i v-if="skeleton" class="bone"></i>
+      <template v-else>{{ text.text }}</template>
+    </span>
+  </div>
+</template>
+
+<style scoped>
+
+.sheet {
+  position: absolute;
+  inset: 0;
+  width: 595px;
+  height: 842px;
+  background-color: #FFFFFF;
+  color: #1F212C;
+  font-family: Lato, var(--vp-font-family-base);
+  line-height: 1.2;
+}
+
+.box,
+.rule,
+.text {
+  position: absolute;
+  display: block;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #E0E0E0;
+  font-size: 22px;
+  color: #212121;
+}
+
+.comments {
+  transition: background-color 0.6s ease;
+}
+
+.rule.strong {
+  background-color: #212121;
+}
+
+.rule.soft {
+  background-color: #E0E0E0;
+}
+
+.text {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.text.right {
+  justify-content: flex-end;
+}
+
+.text.center {
+  justify-content: center;
+}
+
+.text.accent {
+  color: #2196F3;
+}
+
+.text.muted {
+  color: #616161;
+}
+
+.bone {
+  display: block;
+  width: 100%;
+  height: calc(var(--size) * 0.62);
+  border-radius: calc(var(--size) * 0.31);
+  background-color: #C9CDD6;
+}
+
+.strong .bone {
+  background-color: #8E95A3;
+}
+
+.accent .bone {
+  background-color: #64B5F6;
+}
+
+.muted .bone {
+  background-color: #D5D8DF;
+}
+
+.skeleton .logo {
+  color: #9AA1AE;
+}
+
+</style>
diff --git a/docs/.vitepress/theme/homepage/companion/companionData.ts b/docs/.vitepress/theme/homepage/companion/companionData.ts
new file mode 100644
index 0000000..55e9df0
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/companion/companionData.ts
@@ -0,0 +1,247 @@
+/* The Companion demo's content: the invoice from the screenshots in A4 points (595 x 842), and its document tree.
+   Every readout the demo shows (position, size, measured distances) is computed from these boxes. */
+
+export interface Rect {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+export interface TextBlock extends Rect {
+  id?: string;
+  text: string;
+  size: number;
+  align?: "left" | "right" | "center";
+  tone?: "accent" | "strong" | "body" | "muted";
+}
+
+export interface Line extends Rect {
+  tone: "strong" | "soft";
+}
+
+export const page = { w: 595, h: 842 };
+
+export const rects = {
+  title: { x: 50, y: 50, w: 126, h: 24 },
+  logo: { x: 445, y: 50, w: 100, h: 50 },
+  header: { x: 50, y: 50, w: 495, h: 52 },
+  from: { x: 50, y: 142.8, w: 222.5, h: 101.4 },
+  for: { x: 322.5, y: 142.8, w: 222.5, h: 101.4 },
+  unitPrice: { x: 336.4, y: 254.2, w: 52, h: 14.4 },
+  grandTotal: { x: 412, y: 480, w: 133, h: 18 },
+  comments: { x: 50, y: 520, w: 495, h: 99.6 },
+  commentsTitle: { x: 60, y: 530.6, w: 66.4, h: 17 }
+} satisfies Record<string, Rect>;
+
+const fromLines = ["Multiplicabo Scientia", "Villa pisces bellum", "Parva digitus, Value fractionem", "experientiam84@dicendum.com", "824-233-6895"];
+const forLines = ["Disponere Hauriret", "Ictus ferre induere", "Tempore induere, Share centrum", "material76@accipiet.com", "548-907-9751"];
+
+const products = [
+  ["Lignum peritia corpus", "78,73$", "3", "236,19$"],
+  ["Navem coeperunt Posside", "77,91$", "8", "623,28$"],
+  ["Indica homines", "56,45$", "7", "395,15$"],
+  ["Magna quaestio", "92,74$", "8", "741,92$"],
+  ["Scriptum noun", "26,75$", "3", "80,25$"],
+  ["Sat lapis mortuus", "21,3$", "9", "191,7$"],
+  ["Pulchrae melodiam frequentare", "19$", "5", "95$"],
+  ["Dimidiam ita", "59,69$", "4", "238,76$"]
+];
+
+const comments = [
+  "Vigilate adiuva minor octo puer Auferatur row pars. More aut statum tatem engine mitis",
+  "nervo art anas habet minimus apta recte. Consilium mater disponere calor ita nos iratus",
+  "descendit commune usus domum tatem. Evolvere centum equo stetit aurem octo",
+  "momento adduxerunt ferrum."
+];
+
+/* rough advance of the body font, used for skeleton bar widths and right alignment */
+function width(text: string, size: number) {
+  return Math.round(text.length * size * 0.5 * 10) / 10;
+}
+
+function address(x: number, label: string, lines: string[]) {
+  return [
+    { x, y: 142.8, w: width(label, 11), h: 14, text: label, size: 11, tone: "strong" as const },
+    ...lines.map((text, index) => ({ x, y: 164.4 + index * 16, w: width(text, 11), h: 16, text, size: 11 }))
+  ];
+}
+
+function right(edge: number, y: number, text: string, size: number, tone?: TextBlock["tone"]): TextBlock {
+  const w = width(text, size);
+  return { x: edge - w, y, w, h: size * 1.4, text, size, align: "right", tone };
+}
+
+export const texts: TextBlock[] = [
+  { ...rects.title, text: "Invoice #8131", size: 20, tone: "accent" },
+  { x: 50, y: 74, w: 107, h: 14, text: "Issue date: 27.05.2026", size: 11 },
+  { x: 50, y: 88, w: 101, h: 14, text: "Due date: 10.06.2026", size: 11 },
+
+  ...address(rects.from.x, "From", fromLines),
+  ...address(rects.for.x, "For", forLines),
+
+  { x: 50, y: 254.2, w: 8, h: 14.4, text: "#", size: 11, tone: "strong" },
+  { x: 75, y: 254.2, w: 46, h: 14.4, text: "Product", size: 11, tone: "strong" },
+  { ...rects.unitPrice, text: "Unit price", size: 11, align: "right", tone: "strong" },
+  right(467, 254.2, "Quantity", 11, "strong"),
+  right(545, 254.2, "Total", 11, "strong"),
+
+  ...products.flatMap(([name, price, quantity, total], index) => {
+    const y = 280 + index * 24.4;
+    return [
+      { x: 50, y, w: 6, h: 14, text: `${index + 1}`, size: 10 },
+      { x: 75, y, w: width(name, 10), h: 14, text: name, size: 10 },
+      right(388.4, y, price, 10),
+      right(467, y, quantity, 10),
+      right(545, y, total, 10)
+    ];
+  }),
+
+  { ...rects.grandTotal, text: "Grand total: 2602,25$", size: 13, align: "right", tone: "strong" },
+
+  { ...rects.commentsTitle, text: "Comments", size: 13, tone: "strong" },
+  ...comments.map((text, index) => ({ x: 60, y: 552 + index * 14, w: [470, 466, 420, 132][index], h: 14, text, size: 9.5 })),
+
+  { x: 283, y: 790, w: 29, h: 14, text: "1 / 1", size: 9, align: "center", tone: "muted" }
+];
+
+export const lines: Line[] = [
+  { x: 50, y: 158.8, w: 222.5, h: 1, tone: "strong" },
+  { x: 322.5, y: 158.8, w: 222.5, h: 1, tone: "strong" },
+  { x: 50, y: 270.2, w: 495, h: 1, tone: "strong" },
+  ...products.map((_, index) => ({ x: 50, y: 299.4 + index * 24.4, w: 495, h: 0.6, tone: "soft" as const }))
+];
+
+/* The document tree, flattened the way the app draws it: one call chain per row, children of folders indented.
+   `group` rows hide while that group is collapsed; `opens` names the group a row's chevron toggles. */
+
+export interface TreeRow {
+  id: string;
+  label: string;
+  hint?: string;
+  depth: number;
+  section?: boolean;
+  chevron?: boolean;
+  folder?: boolean;
+  group?: string;
+  opens?: string;
+}
+
+export const tree: TreeRow[] = [
+  { id: "document", label: "Document", depth: 0, section: true, folder: true },
+  { id: "background", label: "Background", depth: 0, section: true, chevron: true },
+  { id: "header", label: "Header", depth: 0, section: true, chevron: true, opens: "header" },
+  { id: "compose-header", label: "ComposeHeader", depth: 0, group: "header" },
+  { id: "header-row", label: "Row", depth: 0, folder: true, group: "header" },
+  { id: "header-column", label: "Column", depth: 1, folder: true, chevron: true, group: "header" },
+  { id: "title", label: "Text Block", hint: "Invoice #8131", depth: 2, chevron: true, group: "header" },
+  { id: "issue", label: "Text Block", hint: "Issue date: 27.05.2026", depth: 2, chevron: true, group: "header" },
+  { id: "due", label: "Text Block", hint: "Due date: 10.06.2026", depth: 2, chevron: true, group: "header" },
+  { id: "logo", label: "Constrained", depth: 1, chevron: true, group: "header" },
+  { id: "placeholder", label: "Placeholder", depth: 1, group: "header" },
+  { id: "content", label: "Content", depth: 0, section: true, chevron: true, opens: "content" },
+  { id: "compose-content", label: "ComposeContent", depth: 0, group: "content" },
+  { id: "content-padding", label: "Padding", depth: 0, group: "content" },
+  { id: "content-column", label: "Column", depth: 0, folder: true, group: "content" },
+  { id: "address-row", label: "Row", depth: 1, folder: true, chevron: true, group: "content" },
+  { id: "from", label: "AddressComponent", depth: 2, chevron: true, group: "content" },
+  { id: "spacer", label: "Empty", depth: 2, chevron: true, group: "content" },
+  { id: "for", label: "AddressComponent", depth: 2, chevron: true, group: "content" },
+  { id: "compose-table", label: "ComposeTable", depth: 1, chevron: true, group: "content", opens: "table" },
+  { id: "decoration", label: "Decoration", depth: 2, folder: true, group: "table" },
+  { id: "before", label: "Before", depth: 2, chevron: true, group: "table" },
+  { id: "table", label: "Table", depth: 2, folder: true, group: "table" },
+  { id: "cell-number", label: "CellStyle", depth: 3, chevron: true, group: "table" },
+  { id: "cell-product", label: "CellStyle", depth: 3, chevron: true, group: "table" },
+  { id: "cell-padding", label: "Padding", depth: 3, group: "table" },
+  { id: "unit-price", label: "Text Block", hint: "Unit price", depth: 3, group: "table" },
+  { id: "cell-quantity", label: "CellStyle", depth: 3, chevron: true, group: "table" },
+  { id: "cell-total", label: "CellStyle", depth: 3, chevron: true, group: "table" },
+  { id: "grand-total", label: "Alignment", depth: 1, chevron: true, group: "content" },
+  { id: "comments", label: "Padding", depth: 1, chevron: true, group: "content" },
+  { id: "footer", label: "Footer", depth: 0, section: true, chevron: true },
+  { id: "foreground", label: "Foreground", depth: 0, section: true, chevron: true }
+];
+
+/* layout status dots, colours from docs/companion/features.md */
+export const statusColors = {
+  root: "#F44336",
+  wrapped: "#FF9800",
+  partial: "#FFEB3B",
+  done: "#4CAF50",
+  empty: "#00BCD4",
+  skipped: "#9E9E9E"
+};
+
+export const layoutStatus: Record<string, keyof typeof statusColors> = {
+  document: "wrapped",
+  background: "done",
+  header: "wrapped",
+  "compose-header": "wrapped",
+  "header-row": "root",
+  "header-column": "done",
+  title: "done",
+  issue: "done",
+  due: "done",
+  logo: "root",
+  placeholder: "root",
+  content: "skipped",
+  "compose-content": "skipped",
+  "content-padding": "skipped",
+  "content-column": "skipped",
+  "address-row": "skipped",
+  from: "skipped",
+  spacer: "skipped",
+  for: "skipped",
+  "compose-table": "skipped",
+  "grand-total": "skipped",
+  comments: "skipped",
+  footer: "done",
+  foreground: "empty"
+};
+
+/* code shown in the floating editor; `mark` is the line Ctrl + click lands on */
+export interface CodeLine {
+  text: string;
+  indent: number;
+}
+
+export const commentsCode: CodeLine[] = [
+  { indent: 0, text: "void ComposeComments(IContainer container)" },
+  { indent: 0, text: "{" },
+  { indent: 1, text: "container" },
+  { indent: 2, text: ".Background(Colors.Grey.Lighten3)" },
+  { indent: 2, text: ".Padding(10)" },
+  { indent: 2, text: ".Column(column =>" },
+  { indent: 2, text: "{" },
+  { indent: 3, text: "column.Spacing(5);" },
+  { indent: 3, text: "column.Item().Text(\"Comments\").FontSize(14);" },
+  { indent: 3, text: "column.Item().Text(Model.Comments);" },
+  { indent: 2, text: "});" }
+];
+
+export const contentCode: CodeLine[] = [
+  { indent: 0, text: "void ComposeContent(IContainer container)" },
+  { indent: 0, text: "{" },
+  { indent: 1, text: "container.PaddingVertical(40).Column(column =>" },
+  { indent: 1, text: "{" },
+  { indent: 2, text: "column.Spacing(20);" },
+  { indent: 2, text: "column.Item().Row(row => ...);" },
+  { indent: 2, text: "column.Item().Element(ComposeTable);" },
+  { indent: 0, text: "" },
+  { indent: 2, text: "var total = Model.Items.Sum(x => x.Price * x.Quantity);" },
+  { indent: 2, text: "column.Item().AlignRight().Text($\"Grand total: {total}$\");" },
+  { indent: 0, text: "" },
+  { indent: 2, text: "column.Item().Element(ComposeComments);" }
+];
+
+export const stackTrace = [
+  ["InvoiceDocument.", "<ComposeHeader>b__7_1", "(ColumnDescriptor column)"],
+  ["QuestPDF.Fluent.", "ColumnExtensions.Column", "(IContainer element, Action`1 handler)"],
+  ["InvoiceDocument.", "<ComposeHeader>b__7_0", "(RowDescriptor row)"],
+  ["QuestPDF.Fluent.", "RowExtensions.Row", "(IContainer element, Action`1 handler)"],
+  ["InvoiceDocument.", "ComposeHeader", "(IContainer container)"],
+  ["QuestPDF.Fluent.", "ElementExtensions.Element", "(IContainer parent, Action`1 handler)"],
+  ["InvoiceDocument.", "<Compose>b__6_0", "(PageDescriptor page)"],
+  ["QuestPDF.Fluent.", "PageExtensions.Page", "(IDocumentContainer document, Action`1 handler)"]
+];
diff --git a/docs/.vitepress/theme/homepage/companion/companionDemo.ts b/docs/.vitepress/theme/homepage/companion/companionDemo.ts
new file mode 100644
index 0000000..dce6f0b
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/companion/companionDemo.ts
@@ -0,0 +1,712 @@
+import { nextTick, onMounted, onUnmounted, reactive, type Ref } from "vue";
+import { type CodeLine, commentsCode, contentCode, layoutStatus, page, type Rect, rects, tree } from "./companionData";
+
+/* The Companion demo: a scripted screen recording of the app. Each scene is an async script that moves the cursor,
+   presses keys and changes the app state; CSS only draws the transitions. Like the Quick start session, it plays
+   while at least 60% of the window is on screen in a shown tab and counts only that time. */
+
+/* window geometry in design px; the component scales the whole window to its box */
+export const W = 960;
+export const H = 592;
+export const TITLE = 42;
+export const TREE = 300;
+export const TOOLBAR = 40;
+export const ERROR_BAR = 52;
+export const TREE_BAR = 40;
+export const ROW = 22;
+export const TREE_PAD = 10;
+
+/* all timings in ms, in one place */
+const T = {
+  move: 650,
+  moveSlow: 1100,
+  beforeClick: 160,
+  doubleClick: 150,
+  afterClick: 450,
+  key: 420,
+  typeChar: 120,
+  codeChar: 70,
+  camera: 900,
+  look: 700,
+  hold: 2600,
+  holdLong: 3200,
+  outro: 500,
+  treeToggle: 500
+};
+
+export interface Camera {
+  cx: number;
+  cy: number;
+  z: number;
+}
+
+export interface Overlay {
+  kind: "point" | "vertical" | "horizontal";
+  tint: Rect;
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+  label: string[];
+}
+
+export interface Editor {
+  file: string;
+  lines: CodeLine[];
+  mark: number | null;
+  select: { line: number; from: number; to: number } | null;
+  caret: { line: number; column: number } | null;
+  status: "" | "applying" | "applied";
+}
+
+export interface Toolbar {
+  page?: string;
+  position?: string;
+  size: string;
+  error?: { title: string; text: string };
+}
+
+function baseState() {
+  return {
+    scene: 0,
+    instant: false,
+    theme: null as null | "light" | "dark",
+
+    treeVisible: true,
+    collapsed: ["table"] as string[],
+    treeScroll: 0,
+    selectedRow: null as string | null,
+    status: null as null | Record<string, string>,
+    search: null as null | { text: string; count: string },
+    banner: null as null | string,
+
+    toolbar: null as null | Toolbar,
+    camera: fit(true, 0) as Camera,
+    camMs: T.camera,
+    dim: false,
+    spotlight: null as null | Rect,
+    frame: null as null | Rect,
+    overflow: null as null | { space: Rect; overflow: Rect },
+    overlay: null as null | Overlay,
+    lens: false,
+    commentsColor: "#EEEEEE",
+
+    cursor: { x: 760, y: 420, ms: 0, visible: true },
+    clicks: 0,
+    caption: { title: "", keys: [] as string[] },
+    pressed: false,
+
+    editor: null as null | Editor,
+    view: "document" as "document" | "exception",
+    alerts: [] as string[],
+    settings: false,
+    hoverRow: -1
+  };
+}
+
+export type DemoState = ReturnType<typeof baseState>;
+
+/* the preview area below the title bar (and the toolbar, when one shows) */
+export function desk(state: Pick<DemoState, "treeVisible" | "toolbar">) {
+  const left = state.treeVisible ? TREE : 0;
+  const top = TITLE + toolbarHeight(state.toolbar);
+  return { left, top, w: W - left, h: H - top };
+}
+
+export function toolbarHeight(toolbar: Toolbar | null) {
+  return toolbar ? TOOLBAR + (toolbar.error ? ERROR_BAR : 0) : 0;
+}
+
+/* the page as the app opens it: two thirds of the preview wide, 30px from the top */
+function fit(treeVisible: boolean, toolbar: number): Camera {
+  const w = W - (treeVisible ? TREE : 0);
+  const h = H - TITLE - toolbar;
+  const z = (w * 0.67) / page.w;
+  return { cx: page.w / 2, cy: (h / 2 - 30) / z, z };
+}
+
+/* the whole page on screen, for the layout error */
+function fitPage(state: DemoState): Camera {
+  const d = desk(state);
+  const z = (d.h - 48) / page.h;
+  return { cx: page.w / 2 + 30, cy: page.h / 2, z };
+}
+
+/* a page point in window px, for the cursor */
+export function toWindow(state: DemoState, x: number, y: number) {
+  const d = desk(state);
+  const { cx, cy, z } = state.camera;
+  return { x: d.left + d.w / 2 + (x - cx) * z, y: d.top + d.h / 2 + (y - cy) * z };
+}
+
+export function visibleRows(state: Pick<DemoState, "collapsed">) {
+  const parents: Record<string, string> = { table: "content" };
+  return tree.filter(row => {
+    let group = row.group;
+    while (group) {
+      if (state.collapsed.includes(group))
+        return false;
+      group = parents[group];
+    }
+    return true;
+  });
+}
+
+export function treeTop(state: Pick<DemoState, "search" | "banner">) {
+  return TITLE + (state.search || state.banner ? TREE_BAR : 0) + TREE_PAD;
+}
+
+function rowCenter(state: DemoState, id: string) {
+  const index = visibleRows(state).findIndex(row => row.id === id);
+  return treeTop(state) + index * ROW - state.treeScroll + ROW / 2;
+}
+
+/* scrolls the tree so that a row sits about a third down the panel */
+function revealRow(state: DemoState, id: string) {
+  const rows = visibleRows(state);
+  const index = rows.findIndex(row => row.id === id);
+  const panel = H - treeTop(state);
+  const max = Math.max(0, rows.length * ROW + TREE_PAD * 2 - panel);
+  state.treeScroll = Math.round(Math.min(max, Math.max(0, index * ROW - panel / 3)));
+}
+
+function center(rect: Rect) {
+  return { x: rect.x + rect.w / 2, y: rect.y + rect.h / 2 };
+}
+
+function format(value: number) {
+  return value.toFixed(1);
+}
+
+const CANCEL = Symbol("cancel");
+
+export function useCompanionDemo(root: Ref<HTMLElement | null>, options: { onScreen?: () => boolean } = {}) {
+  const state = reactive(baseState());
+
+  let generation = 0;
+  let fastUntil = 0;
+  let elapsed = 0;
+  let freeze = false;
+  let paused = true;
+  let inView = false;
+  let alive = true;
+  let started = false;
+  let observer: IntersectionObserver | undefined;
+
+  function sleep(ms: number) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+  function check(g: number) {
+    if (g !== generation || !alive)
+      throw CANCEL;
+  }
+
+  /* ends fast-forwarding: lets the browser draw the reached state without transitions, then turns them back on */
+  async function land(g: number) {
+    await nextTick();
+    await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+    check(g);
+    state.instant = false;
+  }
+
+  /* a frozen frame keeps transitions and entrance animations off, so it shows the settled state */
+  async function park(g: number) {
+    for (;;) {
+      await sleep(250);
+      check(g);
+    }
+  }
+
+  /* waits ms of on-screen time; while seeking it only advances the scene clock */
+  async function wait(ms: number) {
+    const g = generation;
+
+    if (elapsed + ms <= fastUntil) {
+      elapsed += ms;
+      return;
+    }
+
+    if (elapsed < fastUntil) {
+      ms -= fastUntil - elapsed;
+      elapsed = fastUntil;
+      if (freeze)
+        return park(g);
+      await land(g);
+    }
+
+    let left = ms;
+    while (left > 0) {
+      if (paused) {
+        await sleep(100);
+      }
+      else {
+        const slice = Math.min(left, 100);
+        await sleep(slice);
+        left -= slice;
+        elapsed += slice;
+      }
+      check(g);
+    }
+  }
+
+  /* the frame a scene is about: still mode (reduced motion, captures) stops here */
+  async function still() {
+    if (freeze && fastUntil === Infinity)
+      return park(generation);
+  }
+
+  async function move(x: number, y: number, ms = T.move) {
+    state.cursor.ms = ms;
+    state.cursor.x = Math.round(x);
+    state.cursor.y = Math.round(y);
+    await wait(ms);
+  }
+
+  async function moveToPage(x: number, y: number, ms = T.move) {
+    const point = toWindow(state, x, y);
+    await move(point.x, point.y, ms);
+  }
+
+  async function moveToRow(id: string, x: number, ms = T.move) {
+    await move(x, rowCenter(state, id), ms);
+  }
+
+  async function click() {
+    await wait(T.beforeClick);
+    state.clicks++;
+    await wait(T.afterClick / 3);
+  }
+
+  async function doubleClick() {
+    await wait(T.beforeClick);
+    state.clicks++;
+    await wait(T.doubleClick);
+    state.clicks++;
+    await wait(T.afterClick / 3);
+  }
+
+  async function press(keys: string[]) {
+    state.caption.keys = keys;
+    state.pressed = true;
+    await wait(T.key);
+    state.pressed = false;
+  }
+
+  function setCamera(camera: Camera, ms = T.camera) {
+    state.camMs = ms;
+    state.camera = camera;
+  }
+
+  function select(rect: Rect, toolbar: Toolbar | null = null) {
+    state.dim = true;
+    state.spotlight = rect;
+    state.frame = rect;
+    state.toolbar = toolbar ?? {
+      page: "1 (1-1)",
+      position: `${format(rect.x)} / ${format(rect.y)}`,
+      size: `${format(rect.w)} x ${format(rect.h)}`
+    };
+  }
+
+  function clearSelection() {
+    state.dim = false;
+    state.spotlight = null;
+    state.frame = null;
+    state.toolbar = null;
+    state.selectedRow = null;
+  }
+
+  function caption(title: string, keys: string[] = []) {
+    state.caption = { title, keys };
+  }
+
+  async function typeCode(line: number, from: number, to: number, text: string) {
+    const editor = state.editor!;
+    editor.select = { line, from, to };
+    await wait(T.look);
+
+    const source = editor.lines[line].text;
+    const head = source.slice(0, from);
+    const tail = source.slice(to);
+    editor.select = null;
+
+    for (let index = 1; index <= text.length; index++) {
+      editor.lines[line] = { ...editor.lines[line], text: head + text.slice(0, index) + tail };
+      editor.caret = { line, column: from + index };
+      await wait(T.codeChar);
+    }
+
+    editor.caret = null;
+  }
+
+  function openEditor(lines: CodeLine[], mark: number | null = null) {
+    state.editor = { file: "Rider · InvoiceDocument.cs", lines: lines.map(line => ({ ...line })), mark, select: null, caret: null, status: "" };
+  }
+
+  /* editor geometry, shared with the component: top-left over the tree */
+  const EDITOR = { x: 20, y: 62, lineHeight: 19, header: 34, gutter: 40, char: 6.6 };
+
+  function codePoint(line: number, column: number) {
+    return { x: EDITOR.x + EDITOR.gutter + 12 + column * EDITOR.char, y: EDITOR.y + EDITOR.header + 8 + line * EDITOR.lineHeight + EDITOR.lineHeight / 2 };
+  }
+
+  const scenes: { title: string; run: () => Promise<void> }[] = [
+    {
+      title: "Hot reload",
+      async run() {
+        caption("Hot reload");
+        setCamera({ cx: page.w / 2, cy: 470, z: 1.02 });
+        openEditor(commentsCode);
+        await wait(T.look);
+
+        const line = 3;
+        const source = state.editor!.lines[line].text;
+        const from = source.indexOf("Grey");
+        const to = source.indexOf(")");
+        const word = codePoint(line + 0, state.editor!.lines[line].indent * 4 + (from + to) / 2);
+        await move(word.x, word.y);
+        await doubleClick();
+        await typeCode(line, from, to, "Blue.Lighten5");
+        await wait(T.look);
+
+        state.editor!.status = "applying";
+        await wait(900);
+        state.editor!.status = "applied";
+        state.commentsColor = "#E3F2FD";
+        await moveToPage(rects.comments.x + 360, rects.comments.y + 70, T.moveSlow);
+        await still();
+        await wait(T.holdLong);
+      }
+    },
+    {
+      title: "Document structure",
+      async run() {
+        caption("Document structure", ["Ctrl", "W"]);
+        state.collapsed = ["content", "table"];
+        setCamera(fit(true, 0));
+        await moveToRow("content", 28);
+        await click();
+        state.collapsed = ["table"];
+        await wait(T.look);
+
+        await moveToRow("compose-table", 28 + 24);
+        await click();
+        state.collapsed = [];
+        await wait(T.look);
+        revealRow(state, "unit-price");
+        await wait(T.look + 400);
+
+        await move(640, 360, T.move);
+        await press(["Ctrl", "W"]);
+        state.treeVisible = false;
+        setCamera(fit(false, 0), T.treeToggle);
+        await still();
+        await wait(T.hold - 600);
+
+        await press(["Ctrl", "W"]);
+        state.treeVisible = true;
+        setCamera(fit(true, 0), T.treeToggle);
+        await wait(T.look + 300);
+      }
+    },
+    {
+      title: "Element selection",
+      async run() {
+        caption("Element selection", ["Double-click"]);
+        setCamera(fit(true, 0));
+        await wait(300);
+        const target = center(rects.from);
+        await moveToPage(target.x + 20, target.y + 6);
+        await doubleClick();
+
+        state.selectedRow = "from";
+        revealRow(state, "from");
+        select(rects.from);
+        setCamera({ cx: 215, cy: 205, z: 1.75 });
+        await wait(T.camera);
+        await moveToPage(target.x + 60, target.y + 34, T.moveSlow);
+        await still();
+        await wait(T.hold);
+
+        caption("Element selection", ["Esc"]);
+        await press(["Esc"]);
+        clearSelection();
+        setCamera(fit(true, 0));
+        await wait(T.look);
+      }
+    },
+    {
+      title: "Search",
+      async run() {
+        caption("Search", ["Ctrl", "F"]);
+        setCamera(fit(true, 0));
+        state.treeScroll = 0;
+        await move(150, 300);
+        await press(["Ctrl", "F"]);
+        state.search = { text: "", count: "" };
+        await wait(300);
+
+        for (const letter of "unit") {
+          state.search.text += letter;
+          await wait(T.typeChar);
+        }
+
+        state.search.count = "1 / 1";
+        state.collapsed = [];
+        state.selectedRow = "unit-price";
+        revealRow(state, "unit-price");
+        select(rects.unitPrice);
+        setCamera({ cx: 380, cy: 250, z: 2.4 });
+        await move(170, 400, T.moveSlow);
+        await still();
+        await wait(T.hold);
+
+        caption("Search", ["Esc"]);
+        await press(["Esc"]);
+        state.search = null;
+        clearSelection();
+        setCamera(fit(true, 0));
+        await wait(T.look);
+      }
+    },
+    {
+      title: "Magnifier",
+      async run() {
+        caption("Magnifier", ["1"]);
+        setCamera(fit(true, 0));
+        await moveToPage(100, 300);
+        await press(["1"]);
+        state.lens = true;
+        await moveToPage(120, 382, T.moveSlow + 300);
+        await still();
+        await wait(T.look);
+        await moveToPage(370, 440, T.moveSlow + 600);
+        await wait(T.look);
+        await moveToPage(520, 330, T.moveSlow + 300);
+        await wait(T.look);
+
+        await press(["1"]);
+        state.lens = false;
+        await wait(T.outro);
+      }
+    },
+    {
+      title: "Coordinates",
+      async run() {
+        caption("Coordinates", ["2"]);
+        setCamera({ cx: 250, cy: 470, z: 1.7 });
+        await wait(T.camera);
+        await press(["2"]);
+        const title = rects.commentsTitle;
+        await moveToPage(title.x + title.w, title.y, T.moveSlow);
+        state.overlay = {
+          kind: "point",
+          tint: title,
+          x1: title.x + title.w,
+          y1: title.y,
+          x2: 0,
+          y2: 0,
+          label: ["Page: 1", `X: ${format(title.x + title.w)}`, `Y: ${format(title.y)}`]
+        };
+        await still();
+        await wait(T.hold);
+        state.overlay = null;
+      }
+    },
+    {
+      title: "Measurement",
+      async run() {
+        caption("Measurement", ["3"]);
+        setCamera({ cx: 230, cy: 150, z: 1.6 });
+        await wait(T.camera - 300);
+        await press(["3"]);
+        const title = rects.title;
+        await moveToPage(title.x + 70, title.y + 14);
+        state.overlay = { kind: "vertical", tint: title, x1: title.x + 70, y1: 0, x2: title.x + 70, y2: title.y, label: [format(title.y)] };
+        await wait(T.hold - 400);
+        state.overlay = null;
+
+        caption("Measurement", ["4"]);
+        setCamera({ cx: 300, cy: 500, z: 1.2 });
+        await wait(T.camera - 300);
+        await press(["4"]);
+        const comments = rects.comments;
+        const words = rects.commentsTitle;
+        await moveToPage(words.x + words.w + 6, words.y + 8);
+        state.overlay = {
+          kind: "horizontal",
+          tint: comments,
+          x1: words.x + words.w,
+          y1: words.y + words.h / 2,
+          x2: comments.x + comments.w,
+          y2: words.y + words.h / 2,
+          label: [format(comments.x + comments.w - words.x - words.w)]
+        };
+        await still();
+        await wait(T.hold);
+        state.overlay = null;
+      }
+    },
+    {
+      title: "Go to implementation",
+      async run() {
+        caption("Go to implementation", ["Ctrl", "Click"]);
+        setCamera(fit(true, 0));
+        await wait(300);
+        await moveToPage(rects.grandTotal.x + 70, rects.grandTotal.y + 9);
+        state.caption.keys = ["Ctrl", "Click"];
+        state.pressed = true;
+        await click();
+        state.pressed = false;
+        openEditor(contentCode, 9);
+        await wait(T.look);
+        const mark = codePoint(9, 8 + 26);
+        await move(mark.x, mark.y + 14, T.moveSlow);
+        await still();
+        await wait(T.holdLong);
+      }
+    },
+    {
+      title: "Runtime exception",
+      async run() {
+        caption("Runtime exception");
+        await move(560, 300);
+        state.alerts = ["exception"];
+        state.view = "exception";
+        await wait(T.look);
+        for (const row of [0, 1, 2]) {
+          state.hoverRow = row;
+          await move(520 + row * 30, 192 + row * 44, T.move);
+        }
+        await still();
+        await wait(T.hold);
+      }
+    },
+    {
+      title: "Layout issues",
+      async run() {
+        caption("Layout issues");
+        state.alerts = ["layout"];
+        state.banner = "Layout error 1 / 3";
+        state.status = layoutStatus;
+        await wait(T.look);
+
+        state.selectedRow = "header-row";
+        const toolbar = { size: "495.0 x 52.0", error: { title: "Layout error root cause", text: "One of the items does not fit (even partially) in the available space." } };
+        select(rects.header, toolbar);
+        state.overflow = {
+          space: rects.logo,
+          overflow: { x: rects.logo.x + rects.logo.w, y: rects.logo.y, w: 80, h: rects.logo.h }
+        };
+        setCamera(fitPage(state));
+        await wait(T.camera);
+        await move(230, rowCenter(state, "header-row") + 4, T.moveSlow);
+        await still();
+        await wait(T.holdLong);
+      }
+    },
+    {
+      title: "Settings",
+      async run() {
+        caption("Settings");
+        await move(W - 158, 21);
+        await click();
+        state.settings = true;
+        await wait(T.look);
+
+        const dark = typeof document !== "undefined" && document.documentElement.classList.contains("dark");
+        const target = dark ? "light" : "dark";
+        await move(target === "dark" ? 820 : 750, 160);
+        await click();
+        state.theme = target;
+        await still();
+        await wait(T.hold);
+      }
+    }
+  ];
+
+  /* each scene starts from a clean app; the cursor and the camera carry over so the cut reads as one recording */
+  function reset(index: number) {
+    const cursor = { ...state.cursor };
+    const camera = { ...state.camera };
+    Object.assign(state, baseState(), { scene: index, cursor, camera, instant: state.instant });
+  }
+
+  async function play(start: number) {
+    const g = ++generation;
+    let index = start;
+
+    for (;;) {
+      reset(index);
+      elapsed = 0;
+
+      try {
+        await scenes[index].run();
+        check(g);
+      }
+      catch (error) {
+        if (error === CANCEL)
+          return;
+        throw error;
+      }
+
+      fastUntil = 0;
+      index = (index + 1) % scenes.length;
+    }
+  }
+
+  /* jumps to a scene; `at` fast-forwards into it (ms, Infinity = its still frame), `stop` freezes there */
+  function jump(index: number, at = 0, stop = false) {
+    started = true;
+    freeze = stop;
+    fastUntil = at;
+    state.instant = at > 0;
+    void play(index);
+  }
+
+  function updatePaused() {
+    paused = !inView || document.hidden;
+
+    if (!paused && !started) {
+      started = true;
+      void play(0);
+    }
+  }
+
+  onMounted(() => {
+    const params = new URLSearchParams(location.search);
+    const scene = params.get("scene");
+
+    if (scene !== null) {
+      paused = false;
+      const index = Math.max(0, Math.min(scenes.length - 1, Number(scene) || 0));
+      const at = params.get("t");
+      jump(index, at === null ? Infinity : Number(at), true);
+      return;
+    }
+
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      jump(2, Infinity, true);
+      return;
+    }
+
+    observer = new IntersectionObserver(([entry]) => {
+      const screen = entry.rootBounds?.height ?? window.innerHeight;
+      inView = entry.intersectionRect.height >= 0.6 * Math.min(entry.boundingClientRect.height, screen);
+      updatePaused();
+    }, { threshold: Array.from({ length: 21 }, (_, index) => index / 20) });
+
+    observer.observe(root.value!);
+    document.addEventListener("visibilitychange", updatePaused);
+  });
+
+  onUnmounted(() => {
+    alive = false;
+    generation++;
+    observer?.disconnect();
+    document.removeEventListener("visibilitychange", updatePaused);
+  });
+
+  return { state, scenes, jump, EDITOR };
+}
diff --git a/docs/.vitepress/theme/homepage/ctaTimeline.ts b/docs/.vitepress/theme/homepage/ctaTimeline.ts
index 38240e2..58088b2 100644
--- a/docs/.vitepress/theme/homepage/ctaTimeline.ts
+++ b/docs/.vitepress/theme/homepage/ctaTimeline.ts
@@ -1,8 +1,32 @@
-/* Shared by the CTA visuals. A pass is a sequence of Web Animations on the document timeline, waits included, so it
-   advances only while the page renders: nothing runs ahead in a hidden tab, and one clock drives it all. */
+/* Shared by the homepage's animated visuals. A pass is a sequence of Web Animations on the document timeline, waits
+   included, so it advances only while the page renders: nothing runs ahead in a hidden tab, and one clock drives it all. */
 
 export const reducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 
+/* how much of a visual has to be on screen before it plays */
+export const onScreenShare = 0.6;
+
+/* reports whether at least `share` of the element is on screen; isIntersecting alone is true for a single pixel */
+export function observeOnScreen(element: Element, callback: (onScreen: boolean) => void, share = onScreenShare) {
+  const observer = new IntersectionObserver(entries => {
+    const entry = entries[entries.length - 1];
+    callback(entry.isIntersecting && entry.intersectionRatio >= share);
+  }, { threshold: [0, share] });
+
+  observer.observe(element);
+  return observer;
+}
+
+/* one move in a pass of `total` ms: holds `from` until `start`, eases to `to` by `end`, then holds `to` */
+export function move(from: Keyframe, to: Keyframe, start: number, end: number, total: number, easing: string): Keyframe[] {
+  return [
+    { ...from, offset: 0 },
+    { ...from, offset: start / total, easing },
+    { ...to, offset: end / total },
+    { ...to, offset: 1 }
+  ];
+}
+
 export class Timeline {
   private readonly running = new Set<Animation>();
 
@@ -31,3 +55,23 @@ export class Timeline {
     this.running.clear();
   }
 }
+
+export type FadePart = { selector: string; at: number; from: string };
+
+/* the Quick start figures' build: each part fades in over `stage` ms from `at` while drifting from `from` into place.
+   Opacity eases in and out so nothing pops; the drift is a long ease-out that settles under the fade. */
+export function fadeInParts(timeline: Timeline, figure: Element, parts: FadePart[], stage = 600, total = 1000): Animation[] {
+  const options = { duration: total, fill: "both" as const };
+  const rest = "translate(0px, 0px)";
+
+  return parts.flatMap(({ selector, at, from }) => {
+    const element = figure.querySelector(selector);
+    if (!element)
+      return [];
+
+    return [
+      timeline.animate(element, move({ opacity: 0 }, { opacity: 1 }, at, at + stage, total, "cubic-bezier(0.37, 0, 0.63, 1)"), options),
+      timeline.animate(element, move({ transform: from }, { transform: rest }, at, at + stage, total, "cubic-bezier(0.22, 1, 0.36, 1)"), options)
+    ];
+  });
+}
diff --git a/docs/.vitepress/theme/homepage/quickStart.data.ts b/docs/.vitepress/theme/homepage/quickStart.data.ts
index ffc9e9d..6daa3ae 100644
--- a/docs/.vitepress/theme/homepage/quickStart.data.ts
+++ b/docs/.vitepress/theme/homepage/quickStart.data.ts
@@ -3,180 +3,102 @@ import fs from "node:fs";
 import { buildSession, type QuickStartSession, type Round } from "./sessionBuilder.ts";
 
 /* The homepage quick start's coding session, built by sessionBuilder.ts. The viewer shows
-   public/homepage/quick-start-<n>.webp (n requests applied; 0 is the page's chrome alone): render them again, and
-   measure the rounds' zoom again, whenever a request changes. */
+   public/homepage/quick-start-<n>.webp (n requests applied; 0 is the invoice as the session starts): render them
+   again, and measure the rounds' zoom and marks again, whenever a request changes. */
 
 declare const data: QuickStartSession;
 export { data };
 
 const rounds: Round[] = [
   {
-    prompt: "Migrate our legacy HTML-to-PDF invoice to QuestPDF.",
-    unfold: "void ComposePage(PageDescriptor page)",
+    prompt: "Update the invoice to use the brand color (indigo).",
+    marks: [[330, 49, 220, 27], [45, 131, 33, 19], [304, 131, 36, 19], [44, 211, 507, 28], [319, 457, 232, 33]],
     edits: [
       {
         file: "Invoice.cs",
+        after: "static readonly Color Accent = Colors.Grey.Darken4;",
+        remove: 1,
         add: [
-          "void ComposePage(PageDescriptor page)",
-          "{",
-          "    page.Size(PageSizes.A4);",
-          "    page.Margin(2, Unit.Centimetre);",
-          "    page.DefaultTextStyle(x => x.FontSize(10));",
-          "",
-          "    page.Header().Element(ComposeHeader);",
-          "",
-          "    page.Content().PaddingVertical(24).Column(column =>",
-          "    {",
-          "        foreach (var item in Model.Items)",
-          "            column.Item().Element(c => ComposeItem(c, item));",
-          "",
-          "        column.Item().PaddingTop(12).Element(ComposeTotals);",
-          "    });",
-          "}",
-          "",
-          "void ComposeHeader(IContainer container)",
-          "{",
-          "    container.Row(row =>",
-          "    {",
-          "        row.RelativeItem().Column(column =>",
-          "        {",
-          "            column.Item()",
-          "                .Text($\"Invoice {Model.Number}\")",
-          "                .FontSize(20)",
-          "                .Bold();",
-          "",
-          "            column.Item().Text($\"Issued {Model.Issued:d MMM yyyy}\");",
-          "        });",
-          "",
-          "        row.AutoItem().Text($\"Bill to\\n{Model.Customer}\");",
-          "    });",
-          "}",
-          "",
-          "void ComposeItem(IContainer container, InvoiceItem item)",
-          "{",
-          "    container.BorderBottom(0.5f).PaddingVertical(6).Row(row =>",
-          "    {",
-          "        row.RelativeItem().Text(item.Name);",
-          "",
-          "        row.ConstantItem(100)",
-          "            .AlignRight()",
-          "            .Text($\"{item.Quantity} × {item.Price:C}\");",
-          "",
-          "        row.ConstantItem(80).AlignRight().Text($\"{item.Amount:C}\");",
-          "    });",
-          "}",
-          "",
-          "void ComposeTotals(IContainer container)",
-          "{",
-          "    container.AlignRight().Width(200).Column(column =>",
-          "    {",
-          "        Line(\"Subtotal\", Model.Subtotal);",
-          "        Line(\"VAT\", Model.Vat);",
-          "",
-          "        column.Item()",
-          "            .PaddingTop(8)",
-          "            .AlignRight()",
-          "            .Text($\"Total {Model.Total:C}\")",
-          "            .FontSize(14)",
-          "            .Bold();",
-          "",
-          "        void Line(string label, decimal amount) =>",
-          "            column.Item().Row(row =>",
-          "            {",
-          "                row.RelativeItem().Text(label);",
-          "                row.AutoItem().Text($\"{amount:C}\");",
-          "            });",
-          "    });",
-          "}"
+          "static readonly Color Accent = Colors.Indigo.Medium;"
         ]
       }
     ]
   },
   {
-    prompt: "Add our logo and brand color.",
-    unfold: "void ComposeHeader(IContainer container)",
-    zoom: [36, 40, 300, 122],
+    prompt: "Add the shipping address next to the billing address.",
+    unfold: "void ComposeAddresses(IContainer container)",
+    zoom: [195, 105, 360, 90],
+    marks: [[390, 131, 117, 59]],
     edits: [
       {
         file: "Invoice.cs",
-        after: "        {",
+        after: "        AddAddressBlock(\"Bill to\", Model.Customer);",
         add: [
-          "            column.Item()",
-          "                .PaddingBottom(16)",
-          "                .Height(32)",
-          "                .Svg(\"logo.svg\")",
-          "                .FitHeight();",
-          ""
-        ]
-      },
-      {
-        file: "Invoice.cs",
-        after: "                .Bold();",
-        remove: 1,
-        add: [
-          "                .Bold()",
-          "                .FontColor(Colors.Teal.Darken3);"
+          "        AddAddressBlock(\"Ship to\", Model.Shipping);"
         ]
       }
     ]
   },
   {
-    prompt: "Show item details under each name.",
-    unfold: "void ComposeItem(IContainer container, InvoiceItem item)",
-    zoom: [40, 165, 260, 230],
+    prompt: "Show a product description under each item, in small grey text.",
+    unfold: "void ComposeItems(IContainer container)",
+    zoom: [30, 205, 280, 270],
+    marks: [[44, 237, 142, 236]],
     edits: [
       {
         file: "Invoice.cs",
-        after: "        row.RelativeItem().Text(item.Name);",
+        after: "            table.Cell().Element(Cell).Text(item.Name);",
         remove: 1,
         add: [
-          "        row.RelativeItem().Column(column =>",
-          "        {",
-          "            column.Item().Text(item.Name).SemiBold();",
+          "            table.Cell().Element(Cell).Column(column =>",
+          "            {",
+          "                column.Item().Text(item.Name);",
           "",
-          "            column.Item()",
-          "                .Text(item.Details)",
-          "                .FontSize(8)",
-          "                .FontColor(Colors.Grey.Darken1);",
-          "        });"
+          "                column.Item()",
+          "                    .PaddingTop(3)",
+          "                    .Text(item.Description)",
+          "                    .FontSize(8)",
+          "                    .FontColor(Colors.Grey.Darken1);",
+          "            });"
         ]
       }
     ]
   },
   {
-    prompt: "Break down VAT by rate.",
+    prompt: "Split VAT into a separate line for each tax rate.",
     unfold: "void ComposeTotals(IContainer container)",
-    zoom: [300, 396, 260, 148],
+    zoom: [300, 488, 270, 150],
+    marks: [[319, 516, 232, 35]],
     edits: [
       {
         file: "Invoice.cs",
-        after: "        Line(\"VAT\", Model.Vat);",
+        after: "        AddLine(\"VAT\", Model.Vat);",
         remove: 1,
         add: [
+          "",
           "        foreach (var vat in Model.Items.GroupBy(x => x.VatRate))",
-          "            Line($\"VAT {vat.Key:P0}\", vat.Sum(x => x.Vat));"
+          "            AddLine($\"VAT {vat.Key:P0}\", vat.Sum(x => x.Vat));"
         ]
       }
     ]
   },
   {
-    prompt: "Add a Pay now button linking to checkout.",
-    unfold: "void ComposePage(PageDescriptor page)",
-    zoom: [300, 396, 260, 148],
+    prompt: "Add a Pay now button below the total, linking to online payment.",
+    unfold: "void ComposeTotals(IContainer container)",
+    zoom: [300, 488, 270, 150],
+    marks: [[319, 590, 232, 45]],
     edits: [
       {
         file: "Invoice.cs",
-        after: "        column.Item().PaddingTop(12).Element(ComposeTotals);",
+        after: "            .FontColor(Accent);",
         add: [
           "",
           "        column.Item()",
           "            .PaddingTop(16)",
-          "            .AlignRight()",
-          "            .Width(200)",
           "            .Hyperlink(Model.PaymentLink)",
-          "            .Background(Colors.Teal.Darken3)",
-          "            .CornerRadius(4)",
-          "            .PaddingVertical(8)",
+          "            .Background(Accent)",
+          "            .CornerRadius(6)",
+          "            .PaddingVertical(10)",
           "            .AlignCenter()",
           "            .Text(\"Pay now\")",
           "            .FontColor(Colors.White)",
@@ -188,16 +110,18 @@ const rounds: Round[] = [
 ];
 
 export default defineLoader({
-  watch: ["./codeExamples/invoice.html"],
+  watch: ["./codeExamples/Invoice.cs"],
 
   load: () => buildSession({
     title: "Invoice.pdf",
     renders: "/homepage/quick-start-",
     page: { width: 595, height: 842 },
     overview: { width: 595, height: 340 },
+    ending: [-27, -27, 649, 682],
     files: [
-      { name: "invoice.html", lines: fs.readFileSync(new URL("./codeExamples/invoice.html", import.meta.url), "utf-8").trimEnd().split("\n") }
+      { name: "Invoice.cs", lines: fs.readFileSync(new URL("./codeExamples/Invoice.cs", import.meta.url), "utf-8").trimEnd().split("\n") }
     ],
+    unfold: "void ComposePage(PageDescriptor page)",
     rounds
   })
 });
diff --git a/docs/.vitepress/theme/homepage/sessionBuilder.ts b/docs/.vitepress/theme/homepage/sessionBuilder.ts
index 9c18e9c..536e16c 100644
--- a/docs/.vitepress/theme/homepage/sessionBuilder.ts
+++ b/docs/.vitepress/theme/homepage/sessionBuilder.ts
@@ -4,8 +4,8 @@ import { type FoldableLine, foldLines } from "./codeFolding.ts";
 /* Turns the quick start session (quickStart.data.ts) into what the window needs, highlighting every line it will
    show at build time, so no highlighter ships to the browser. */
 
-/* Shiki's languages: the legacy HTML template stays plain text, so the C# it becomes is what stands out */
-export type Lang = "csharp" | "text";
+/* a part of the page as [x, y, width, height], in the pixels of the page's box */
+export type Box = [number, number, number, number];
 
 export interface Edit {
   file: string;
@@ -21,9 +21,11 @@ export interface Round {
   edits: Edit[];
   /* the method the request works on: the window shows it and folds every other one */
   unfold?: string;
-  /* the part of the page the viewer flies to, as [x, y, width, height] in the page box's pixels, its sides in the
-     gaps between columns so the viewer's edges cut no words (none: the page's overview) */
-  zoom?: [number, number, number, number];
+  /* the part of the page the viewer flies to, its sides in the gaps between columns so the viewer's edges cut no
+     words (none: the page's overview) */
+  zoom?: Box;
+  /* the parts of the page the request changed, outlined from the page changing until the diff is taken in */
+  marks?: Box[];
 }
 
 export interface SessionDefinition {
@@ -36,8 +38,13 @@ export interface SessionDefinition {
   page: { width: number; height: number };
   /* the part of the page, from its top-left corner, that the viewer shows at rest: the head and the first content */
   overview: { width: number; height: number };
+  /* the part of the page the viewer flies out to after the last request: the finished document whole (none: the
+     overview) */
+  ending?: Box;
   /* the files open as the session starts */
   files: { name: string; lines: string[] }[];
+  /* the method the window shows unfolded as the session starts (none: nothing folds until a request names one) */
+  unfold?: string;
   rounds: Round[];
 }
 
@@ -48,10 +55,8 @@ export interface Token {
 }
 
 export interface QuickStartSession extends SessionDefinition {
-  /* per language, the tokens of every line that appears, by its text */
-  tokens: Record<Lang, Record<string, Token[]>>;
-  /* per file, its language (a data loader exports nothing but its data, so the client cannot call langOf) */
-  langs: Record<string, Lang>;
+  /* the tokens of every line that appears, by its text */
+  tokens: Record<string, Token[]>;
   /* the most lines the window shows at once, which it keeps room for */
   lines: number;
   /* how many digits the window's line numbers take: those of the longest file */
@@ -62,8 +67,6 @@ export interface QuickStartSession extends SessionDefinition {
    scrolls to the lines being edited */
 const maxLines = 26;
 
-const langOf = (file: string): Lang => file.endsWith(".html") ? "text" : "csharp";
-
 /* a file after an edit: the diff (the replaced lines still in place above the new ones) and the accepted lines */
 function applyEdit(lines: string[], { after, remove = 0, add }: Edit) {
   if (after === undefined) {
@@ -76,6 +79,9 @@ function applyEdit(lines: string[], { after, remove = 0, add }: Edit) {
   if (at < 0)
     throw new Error(`[session] no line "${after.trim()}" in the code for a request to edit`);
 
+  if (lines.lastIndexOf(after) !== at)
+    throw new Error(`[session] more than one line "${after.trim()}" in the code for a request to edit`);
+
   const end = at + Math.max(remove, 1);
   const kept = (text: string, index: number): FoldableLine => ({ text, kind: index >= at && index < at + remove ? "removed" : "normal" });
 
@@ -97,8 +103,8 @@ export async function buildSession(definition: SessionDefinition): Promise<Quick
   const accepted: Record<string, string[]> = Object.fromEntries(files.map(file => [file.name, file.lines]));
   const states = files.map(({ name, lines }) => ({ file: name, lines, diff: false }));
   const asNormal = (lines: string[]) => lines.map(text => ({ text, kind: "normal" as const }));
-  let unfold: string | undefined;
-  let lines = Math.max(0, ...files.map(file => file.lines.length));
+  let unfold = definition.unfold;
+  let lines = Math.max(0, ...files.map(file => foldLines(asNormal(file.lines), unfold).length));
 
   for (const round of rounds) {
     unfold = round.unfold ?? unfold;
@@ -114,39 +120,36 @@ export async function buildSession(definition: SessionDefinition): Promise<Quick
     }
   }
 
-  const tokens: QuickStartSession["tokens"] = { csharp: {}, text: {} };
+  const tokens: QuickStartSession["tokens"] = {};
 
   /* a diff holds the replaced lines above their replacement, which is not valid code (two lambdas opened where
      one closes), so a line keeps the tokens of a file as accepted and a diff only highlights the lines it alone has */
-  for (const { file, lines, diff } of [...states.filter(state => !state.diff), ...states.filter(state => state.diff)]) {
-    const lang = langOf(file);
-
-    for (const [index, line] of (await highlight(lines, lang)).entries()) {
+  for (const { lines, diff } of [...states.filter(state => !state.diff), ...states.filter(state => state.diff)]) {
+    for (const [index, line] of (await highlight(lines)).entries()) {
       const text = lines[index];
       const lineTokens = line.map(token => ({ content: token.content, style: stringifyTokenStyle(token.htmlStyle ?? {}) }));
 
-      if (diff && text in tokens[lang])
+      if (diff && text in tokens)
         continue;
 
-      if (text in tokens[lang] && JSON.stringify(tokens[lang][text]) !== JSON.stringify(lineTokens))
+      if (text in tokens && JSON.stringify(tokens[text]) !== JSON.stringify(lineTokens))
         throw new Error(`[session] "${text.trim()}" is highlighted differently in two places`);
 
-      tokens[lang][text] = lineTokens;
+      tokens[text] = lineTokens;
     }
   }
 
-  const langs = Object.fromEntries(states.map(({ file }) => [file, langOf(file)]));
   const digits = String(Math.max(...states.map(state => state.lines.length))).length;
 
-  return { ...definition, tokens, langs, lines: Math.min(lines, maxLines), digits };
+  return { ...definition, tokens, lines: Math.min(lines, maxLines), digits };
 }
 
 /* the tokens exactly as codeToHtml renders them (whitespace merged into the token that follows it) */
-async function highlight(lines: string[], lang: Lang): Promise<ThemedToken[][]> {
+async function highlight(lines: string[]): Promise<ThemedToken[][]> {
   let result: ThemedToken[][] = [];
 
   await codeToHtml(lines.join("\n"), {
-    lang,
+    lang: "csharp",
     themes: { light: "light-plus", dark: "dark-plus" },
     defaultColor: false,
     transformers: [{ tokens: tokens => { result = tokens; } }]
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 5a1ef89..d7112cb 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,6 +1,8 @@
 import DefaultTheme from 'vitepress/theme';
+import type { Theme } from 'vitepress';
 
 import Layout from './Layout.vue';
+import NavDocumentationMenu from './NavDocumentationMenu.vue';
 
 import './VitepressAdjustments.css'
 import './CustomPages.css'
@@ -8,4 +10,8 @@ import './CustomPages.css'
 export default {
     ...DefaultTheme,
     Layout: Layout,
-};
\ No newline at end of file
+    enhanceApp(context) {
+        DefaultTheme.enhanceApp?.(context);
+        context.app.component('NavDocumentationMenu', NavDocumentationMenu);
+    }
+} satisfies Theme;
diff --git a/docs/.vitepress/theme/license/LicenseIndex.vue b/docs/.vitepress/theme/license/LicenseIndex.vue
index d436b11..9e46e3a 100644
--- a/docs/.vitepress/theme/license/LicenseIndex.vue
+++ b/docs/.vitepress/theme/license/LicenseIndex.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { faArrowRight } from "@fortawesome/pro-solid-svg-icons";
 import Icon from "../Icon.vue";
+import { ref } from "vue";
+import { useDotWings } from "../dotWings";
 
 const documents = [
   {
@@ -29,10 +31,13 @@ const documents = [
   }
 ];
 
+const root = ref<HTMLElement>();
+useDotWings(root);
+
 </script>
 
 <template>
-  <div class="custom-page legal-page texture-dots">
+  <div ref="root" class="custom-page legal-page texture-dots">
     <article class="content">
       <header class="section-header">
         <h1>QuestPDF Legal Terms</h1>
@@ -54,6 +59,10 @@ const documents = [
 </template>
 
 <style scoped>
+.legal-page {
+  --dots-clear: 760px; /* the 750px section header */
+}
+
 .section-header {
   max-width: 750px;
 }
diff --git a/docs/.vitepress/theme/license/LicensePurchaseSuccess.vue b/docs/.vitepress/theme/license/LicensePurchaseSuccess.vue
index a6981a5..913416c 100644
--- a/docs/.vitepress/theme/license/LicensePurchaseSuccess.vue
+++ b/docs/.vitepress/theme/license/LicensePurchaseSuccess.vue
@@ -3,6 +3,8 @@ import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 import { faAwardSimple, faBolt, faCalendarDay, faCode, faCreditCard, faReceipt } from "@fortawesome/pro-regular-svg-icons";
 import { faCheck } from "@fortawesome/pro-solid-svg-icons";
 import Icon from "../Icon.vue";
+import { ref } from "vue";
+import { useDotWings } from "../dotWings";
 const shareEmailSubject = 'QuestPDF License Purchased – Setup Instructions';
 const shareEmailBody = `Hi Team,
 
@@ -69,10 +71,13 @@ const cards: Card[] = [
   }
 ];
 
+const root = ref<HTMLElement>();
+useDotWings(root);
+
 </script>
 
 <template>
-  <div class="custom-page purchase-page texture-dots">
+  <div ref="root" class="custom-page purchase-page texture-dots">
     <div class="content">
       <header class="section-header purchase-header">
         <div class="status-tag">
@@ -121,6 +126,11 @@ const cards: Card[] = [
 
 <style scoped>
 
+.purchase-page {
+  --dots-clear: 700px; /* the 650px section header */
+  --dots-height: 270px; /* the cards */
+}
+
 .content {
   display: flex;
   flex-direction: column;
diff --git a/docs/.vitepress/theme/license/documents/DocumentTemplate.vue b/docs/.vitepress/theme/license/documents/DocumentTemplate.vue
index ed0110a..9af61e2 100644
--- a/docs/.vitepress/theme/license/documents/DocumentTemplate.vue
+++ b/docs/.vitepress/theme/license/documents/DocumentTemplate.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="custom-page document-page legal-page texture-dots">
+  <section ref="root" class="custom-page document-page legal-page texture-dots">
     <div class="content">
       <header class="section-header document-header">
         <a class="document-back" href="/license">
@@ -38,14 +38,23 @@
 import { faArrowLeft } from "@fortawesome/pro-solid-svg-icons";
 import Icon from "../../Icon.vue";
 import { data } from "./licenseDocuments.data";
+import { ref } from "vue";
+import { useDotWings } from "../../dotWings";
 
 const props = defineProps<{ id: string }>();
 
 const doc = data[props.id];
+
+const root = ref<HTMLElement>();
+useDotWings(root);
 </script>
 
 <style>
 
+.document-page {
+  --dots-height: 204px; /* the document card */
+}
+
 .document-page .content {
   display: flex;
   flex-direction: column;
diff --git a/docs/.vitepress/theme/pricing/PricingContact.vue b/docs/.vitepress/theme/pricing/PricingContact.vue
index 399bf9f..fb0d684 100644
--- a/docs/.vitepress/theme/pricing/PricingContact.vue
+++ b/docs/.vitepress/theme/pricing/PricingContact.vue
@@ -5,29 +5,29 @@ const resellers = [
     name: "SoftwareOne",
     link: "https://www.softwareone.com/",
     src: "software-one.svg",
-    size: 38,
+    size: 32,
     marginTop: -3
   },
   {
     name: "Insight",
     link: "https://www.insight.com/",
     src: "insight.svg",
-    size: 43,
+    size: 37,
     marginTop: 3
   },
   {
     name: "SHI",
     link: "https://www.shi.com/",
     src: "shi.svg",
-    size: 45,
-    marginTop: -13
+    size: 38,
+    marginTop: -11
   },
   {
     name: "QBS Software",
     link: "https://www.qbssoftware.com/",
     src: "qbs-software.svg",
-    size: 56,
-    marginTop: 4
+    size: 48,
+    marginTop: 3
   }
 ];
 
diff --git a/docs/.vitepress/theme/pricing/PricingFaq.vue b/docs/.vitepress/theme/pricing/PricingFaq.vue
index f1b1ec7..4d6578e 100644
--- a/docs/.vitepress/theme/pricing/PricingFaq.vue
+++ b/docs/.vitepress/theme/pricing/PricingFaq.vue
@@ -7,7 +7,7 @@ import { faqCategories as categories } from "./faq";
 </script>
 
 <template>
-  <article class="content">
+  <article id="faq" class="content">
     <div class="faq-categories">
       <section v-for="category of categories" :key="category.title" class="faq-category">
         <h2 class="faq-category-title">{{ category.title }}</h2>
@@ -28,6 +28,11 @@ import { faqCategories as categories } from "./faq";
 
 <style scoped>
 
+/* #faq is a link target: keep the section padding visible under the fixed navbar */
+.content {
+  scroll-margin-top: var(--vp-nav-height);
+}
+
 .faq-categories {
   --faq-accent: light-dark(#1976D2, #2196F3);
 
diff --git a/docs/.vitepress/theme/pricing/PricingIndex.vue b/docs/.vitepress/theme/pricing/PricingIndex.vue
index 1c5a85d..54b3ff2 100644
--- a/docs/.vitepress/theme/pricing/PricingIndex.vue
+++ b/docs/.vitepress/theme/pricing/PricingIndex.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="custom-page pricing-page texture-dots">
+  <div ref="root" class="custom-page pricing-page texture-dots">
     <div class="container">
       <pricing-tiers />
     </div>
@@ -23,11 +23,20 @@
 import PricingTiers from "./PricingTiers.vue";
 import PricingFaq from "./PricingFaq.vue";
 import PricingContact from "./PricingContact.vue";
+import { ref } from "vue";
+import { useDotWings } from "../dotWings";
+
+const root = ref<HTMLElement>();
+useDotWings(root);
 
 </script>
 
 <style>
 
+.pricing-page {
+  --dots-height: 224px; /* the Community tier card */
+}
+
 .custom-page.pricing-page > .dotted-divider {
   width: calc(100% - 2 * var(--custom-page-gutter));
   max-width: 1040px;
diff --git a/docs/.vitepress/theme/pricing/PricingTiers.vue b/docs/.vitepress/theme/pricing/PricingTiers.vue
index fe4f975..741f45f 100644
--- a/docs/.vitepress/theme/pricing/PricingTiers.vue
+++ b/docs/.vitepress/theme/pricing/PricingTiers.vue
@@ -65,16 +65,16 @@ interface License {
 
 const CommunityLicense: License = {
   name: "community",
-  description: "For individuals, FOSS-compatible projects, charities, academic institutions, and businesses <b>under</b> 1M&nbsp;USD annual gross revenue",
+  description: "Free for individuals, open-source projects, qualifying charities, academic institutions, and businesses under $1M annual revenue.",
   price: null,
   paddlePriceId: null,
   details: [
-    "Full feature set — same core product as paid tiers",
+    "Full feature set, same core product as paid tiers",
     "Commercial use allowed",
     "Unlimited developers, projects, servers, and deployments",
     "Royalty-free redistribution inside your own apps",
     "No registration, license keys, or watermarks",
-    "Source-available — full source code on GitHub",
+    "Source-available, with full source code on GitHub",
     "Community support via GitHub"
   ],
   footnote: "From package install to first PDF in minutes"
@@ -82,7 +82,7 @@ const CommunityLicense: License = {
 
 const ProfessionalLicense: License = {
   name: "professional",
-  description: "For one legal entity shipping PDFs in production — every developer covered at one flat, predictable price, with no seat counting or usage fees",
+  description: "For businesses needing perpetual licensing, unlimited developers and deployments, and direct technical support.",
   price: licensePrices.professional,
   paddlePriceId: paddle.professionalLicensePriceId,
   details: [
@@ -90,17 +90,17 @@ const ProfessionalLicense: License = {
     "Unlimited developers, projects, servers, and deployments",
     "One year of feature updates, fixes, and security patches included",
     "Direct email support",
-    "Royalty-free redistribution — SaaS, desktop, on-prem; end users need no license",
+    "Royalty-free redistribution across SaaS, desktop, and on-prem apps",
     "Runs fully offline and air-gapped",
-    "Price Lock — your renewal price never increases while you renew continuously",
+    "Price Lock: your renewal price never increases while you renew continuously",
     "30-day money-back guarantee"
   ],
-  footnote: "Renews annually at today's price — cancel anytime, keep your version forever"
+  footnote: "Renews annually at today's price. Cancel anytime, keep your version forever"
 };
 
 const EnterpriseLicense: License = {
   name: "enterprise",
-  description: "For corporate groups that need affiliate-wide coverage, priority support, reduced risk, and procurement-friendly terms",
+  description: "For organizations that need affiliate-wide licensing, priority support, business continuity, and flexible procurement terms.",
   price: licensePrices.enterprise,
   paddlePriceId: paddle.enterpriseLicensePriceId,
   details: [
@@ -296,7 +296,7 @@ html.dark .license-tier .tag {
 .license-tier .tier-description {
   color: var(--vp-c-text-2);
   font-size: 1rem;
-  line-height: 1.5rem;
+  line-height: 1.625rem;
 }
 
 
diff --git a/docs/invoice-tutorial.md b/docs/invoice-tutorial.md
index de1b8b1..05a1e4f 100644
--- a/docs/invoice-tutorial.md
+++ b/docs/invoice-tutorial.md
@@ -175,7 +175,7 @@ public class InvoiceDocument : IDocument
 
 Then, use the following code to generate the document:
 
-```csharp{10-12}
+```csharp{9-11}
 using System.IO;
 using QuestPDF.Fluent;
 using QuestPDF.Infrastructure;
@@ -193,6 +193,8 @@ static void Main(string[] args)
 }
 ```
 
+The Evaluation license is for trying the library and is not permitted in production: see [License configuration](/license/configuration.md) to choose yours.
+
 This initial scaffolding sets up basic sections. You’ll refine them in the following steps.
 
 ![example](/getting-started/step-1.webp)
@@ -466,22 +468,3 @@ public class InvoiceDocument : IDocument
 ```
 
 ![example](/getting-started/step-5.webp)
-
-
-## License
-
-For learning and evaluation, you can use the free QuestPDF Evaluation license.
-
-```csharp
-QuestPDF.Settings.License = LicenseType.Evaluation;
-```
-
-::: warning SUSTAINABLE AND FAIR LICENSE
-By offering free access to most users and premium licenses for larger organizations, the project maintains its commitment to excellence while ensuring sustainable, long-term development for all.
-
-The library is free to use for any individual or business with less than 1 million USD annual gross revenue, or operates as a non-profit organization, or is a FOSS project.
-
-More details can be found on the [QuestPDF Pricing](/pricing) and [QuestPDF License](/license/) pages.
-:::
-
-
diff --git a/docs/public/homepage/grain-dark.png b/docs/public/homepage/grain-dark.png
index d67fa2f..d52e8ac 100644
Binary files a/docs/public/homepage/grain-dark.png and b/docs/public/homepage/grain-dark.png differ
diff --git a/docs/public/homepage/quick-start-0.webp b/docs/public/homepage/quick-start-0.webp
index ca5a6a3..42ed0d5 100644
Binary files a/docs/public/homepage/quick-start-0.webp and b/docs/public/homepage/quick-start-0.webp differ
diff --git a/docs/public/homepage/quick-start-1.webp b/docs/public/homepage/quick-start-1.webp
index a63151e..7003069 100644
Binary files a/docs/public/homepage/quick-start-1.webp and b/docs/public/homepage/quick-start-1.webp differ
diff --git a/docs/public/homepage/quick-start-2.webp b/docs/public/homepage/quick-start-2.webp
index c861078..0a447d3 100644
Binary files a/docs/public/homepage/quick-start-2.webp and b/docs/public/homepage/quick-start-2.webp differ
diff --git a/docs/public/homepage/quick-start-3.webp b/docs/public/homepage/quick-start-3.webp
index 5a1b443..4eb3f6e 100644
Binary files a/docs/public/homepage/quick-start-3.webp and b/docs/public/homepage/quick-start-3.webp differ
diff --git a/docs/public/homepage/quick-start-4.webp b/docs/public/homepage/quick-start-4.webp
index 7f50312..e39f854 100644
Binary files a/docs/public/homepage/quick-start-4.webp and b/docs/public/homepage/quick-start-4.webp differ
diff --git a/docs/public/homepage/quick-start-5.webp b/docs/public/homepage/quick-start-5.webp
index 529d35b..4847110 100644
Binary files a/docs/public/homepage/quick-start-5.webp and b/docs/public/homepage/quick-start-5.webp differ
diff --git a/docs/quick-start.md b/docs/quick-start.md
index 333642a..9ed00bd 100644
--- a/docs/quick-start.md
+++ b/docs/quick-start.md
@@ -1,31 +1,29 @@
 # Quick start
 
-QuestPDF is a modern C# library for PDF generation that provides a dedicated layout engine optimized specifically for creating PDF documents. Its component-based architecture lets you compose simple elements (such as text, images, tables, and grids) into sophisticated layouts through an intuitive, declarative API. Because it's pure C#, you get full access to familiar programming constructs, strong typing, and seamless IDE support.
+Create a console project, add the QuestPDF package and generate your first PDF.
 
 ## Installation
 
-QuestPDF is available as a NuGet package. You can install it through your IDE by searching for phrase `QuestPDF`. If you are not familiar how to do that, please refer to the following guides: 
-- [Visual Studio](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-visual-studio)
-- [Visual Code](https://code.visualstudio.com/docs/csharp/package-management)
-- [JetBrains Rider](https://www.jetbrains.com/help/rider/Using_NuGet.html)
-
-Or use the following command in your terminal:
+Run these commands in your terminal:
 
 ```bash
+dotnet new console -n HelloPdf
+cd HelloPdf
 dotnet add package QuestPDF
 ```
 
+Already have a project? Run only `dotnet add package QuestPDF` in its folder, or search for `QuestPDF` in the NuGet package manager of [Visual Studio](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-visual-studio), [Visual Studio Code](https://code.visualstudio.com/docs/csharp/package-management) or [JetBrains Rider](https://www.jetbrains.com/help/rider/Using_NuGet.html).
+
 ## Implementation
 
-QuestPDF's minimal API makes it incredibly easy to create and prototype PDF documents. Here's a simple example that demonstrates its intuitive syntax:
+Replace the contents of `Program.cs` with the following code:
 
 ```csharp
 using QuestPDF.Fluent;
 using QuestPDF.Helpers;
 using QuestPDF.Infrastructure;
 
-// TODO: set your license here:
-// QuestPDF.Settings.License = LicenseType.Evaluation;
+QuestPDF.Settings.License = LicenseType.Evaluation;
 
 Document.Create(container =>
 {
@@ -62,24 +60,19 @@ Document.Create(container =>
 .GeneratePdf("hello.pdf");
 ```
 
-This code generates a PDF document with the following layout:
-
-![example](/minimal-api.webp)
-
-## License
+Then run the project:
 
-::: warning SUSTAINABLE AND FAIR LICENSE
-By offering free access to most users and premium licenses for larger organizations, the project maintains its commitment to excellence while ensuring sustainable, long-term development for all.
+```bash
+dotnet run
+```
 
-The library is free to use for any individual or business with less than 1 million USD annual gross revenue, or operates as a non-profit organization, or is a FOSS project.
+The program saves `hello.pdf` in the folder it runs from, here `HelloPdf`. The document looks like this:
 
-More details can be found on the [QuestPDF Pricing](/pricing) and [QuestPDF License](/license/) pages.
-:::
+![example](/minimal-api.webp)
 
-::: tip
-For learning and evaluation, you can use the QuestPDF Evaluation license type.
-:::
+## License
 
+The Evaluation license lets you try every feature before choosing a license, and is not permitted in production. QuestPDF is free for individuals, non-profits, FOSS projects and organizations under $1M USD in annual gross revenue: see [License configuration](/license/configuration.md) and [Pricing](/pricing).
 
 ## Are you ready for more?
 
diff --git a/package-lock.json b/package-lock.json
index 099cc40..5a9f520 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@fortawesome/fontawesome-common-types": "7.3.1",
         "@fortawesome/free-brands-svg-icons": "7.3.1",
         "@fortawesome/pro-duotone-svg-icons": "7.3.1",
+        "@fortawesome/pro-light-svg-icons": "7.3.1",
         "@fortawesome/pro-regular-svg-icons": "7.3.1",
         "@fortawesome/pro-solid-svg-icons": "7.3.1",
         "@paddle/paddle-js": "1.6.5",
@@ -147,6 +148,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/@fortawesome/pro-light-svg-icons": {
+      "version": "7.3.1",
+      "resolved": "https://npm.fontawesome.com/@fortawesome/pro-light-svg-icons/-/pro-light-svg-icons-7.3.1.tgz",
+      "integrity": "sha512-NwexkEyu5WPQQkxk+dmuq0sKtFEB0Ge80DGBA+b6tcIsaAMJFGdC9oUWwWBVHAW6xGjArZ+v9I8rzUp8E7CI6g==",
+      "dev": true,
+      "license": "UNLICENSED",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "7.3.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@fortawesome/pro-regular-svg-icons": {
       "version": "7.3.1",
       "resolved": "https://npm.fontawesome.com/@fortawesome/pro-regular-svg-icons/-/pro-regular-svg-icons-7.3.1.tgz",
diff --git a/package.json b/package.json
index f0dd1e0..d63196c 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "@fortawesome/fontawesome-common-types": "7.3.1",
     "@fortawesome/free-brands-svg-icons": "7.3.1",
     "@fortawesome/pro-duotone-svg-icons": "7.3.1",
+    "@fortawesome/pro-light-svg-icons": "7.3.1",
     "@fortawesome/pro-regular-svg-icons": "7.3.1",
     "@fortawesome/pro-solid-svg-icons": "7.3.1",
     "@paddle/paddle-js": "1.6.5",